refact: moved konva files out of test dir

frontend/components/DocumentCanvas/Area.tsx

@@ -2,8 +2,8 @@
 
 import React, { useState } from 'react'
 import { Group, Rect } from 'react-konva'
-import { entities } from '../../../wailsjs/wailsjs/go/models'
-import { useProject } from '../../../context/Project/provider'
+import { entities } from '../../wailsjs/wailsjs/go/models'
+import { useProject } from '../../context/Project/provider'
 import { KonvaEventObject } from 'konva/lib/Node'
 import Konva from 'konva'
 import AreaContextMenu from './AreaContextMenu'

frontend/components/DocumentCanvas/AreaContextMenu/index.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import React from 'react'
-import { entities } from '../../../../wailsjs/wailsjs/go/models'
+import { entities } from '../../../wailsjs/wailsjs/go/models'
 import { Html } from 'react-konva-utils'
 import { copyButtonColors, deleteButtonColors, makeFormStyles, makeSharedButtonStyles, reprocessButtonColors, setMutableStylesOnElement, setPosition, setScale } from './styles'
-import { useProject } from '../../../../context/Project/provider'
-import asyncClick from '../../../../utils/asyncClick'
-import processImageArea from '../../../../useCases/processImageArea'
+import { useProject } from '../../../context/Project/provider'
+import asyncClick from '../../../utils/asyncClick'
+import processImageArea from '../../../useCases/processImageArea'
 
 type Props = {
   x: number,

frontend/components/DocumentCanvas/Areas.tsx

@@ -2,8 +2,8 @@
 
 import React, { useState } from 'react'
 import { Group } from 'react-konva'
-import { useProject } from '../../../context/Project/provider'
-import { entities } from '../../../wailsjs/wailsjs/go/models'
+import { useProject } from '../../context/Project/provider'
+import { entities } from '../../wailsjs/wailsjs/go/models'
 import Area from './Area'
 import ProcessedWord from './ProcessedWord'
 import EditingWord from './EditingWord'

frontend/components/DocumentCanvas/CanvasStage.tsx

@@ -4,12 +4,12 @@ import React, { useRef, useState } from 'react'
 import { Stage, Layer, Image, } from 'react-konva'
 import { KonvaEventObject } from 'konva/lib/Node'
 import Areas from './Areas'
-import { useProject } from '../../../context/Project/provider'
+import { useProject } from '../../context/Project/provider'
 import useImage from 'use-image'
-import { RectangleCoordinates } from '../types'
+import { RectangleCoordinates } from './types'
 import DrawingArea from './DrawingArea'
-import getNormalizedRectToBounds from '../../../utils/getNormalizedRectToBounds'
-import processImageArea from '../../../useCases/processImageArea'
+import getNormalizedRectToBounds from '../../utils/getNormalizedRectToBounds'
+import processImageArea from '../../useCases/processImageArea'
 
 type Props = {
   scale: number,
@@ -23,7 +23,7 @@ let downClickX: number
 let downClickY: number
 let isDrawing = false
 
-const KonvaTest = ({ scale, scaleStep, maxScale, setScale, size }: Props) => {
+const CanvasStage = ({ scale, scaleStep, maxScale, setScale, size }: Props) => {
   const { getSelectedDocument, requestAddArea, setSelectedAreaId } = useProject()
   const [documentImage] = useImage(getSelectedDocument()?.path || '')
   const documentRef = useRef(null)
@@ -100,4 +100,4 @@ const KonvaTest = ({ scale, scaleStep, maxScale, setScale, size }: Props) => {
   </Stage>
 }
 
-export default KonvaTest
+export default CanvasStage

frontend/components/DocumentCanvas/EditingWord.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Html } from 'react-konva-utils'
-import { entities } from '../../../wailsjs/wailsjs/go/models'
-import { useProject } from '../../../context/Project/provider'
-import onEnterHandler from '../../../utils/onEnterHandler'
+import { entities } from '../../wailsjs/wailsjs/go/models'
+import { useProject } from '../../context/Project/provider'
+import onEnterHandler from '../../utils/onEnterHandler'
 
 type Props = {
   scale: number,

frontend/components/DocumentCanvas/ProcessedWord.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { Group, Rect, Text } from 'react-konva'
-import { entities } from '../../../wailsjs/wailsjs/go/models'
+import { entities } from '../../wailsjs/wailsjs/go/models'
 
 type Props = {
   area: entities.ProcessedArea,

frontend/components/DocumentCanvas/index.tsx

@@ -1,22 +1,18 @@
 'use client'
 
 import dynamic from 'next/dynamic'
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useProject, } from '../../context/Project/provider'
 import { MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon } from '@heroicons/react/24/outline'
-import classNames from '../../utils/classNames'
 import LanguageSelect from '../workspace/LanguageSelect'
-import ImageCanvas from './ImageCanvas'
-import AreaCanvas from './AreaCanvas'
-import UiCanvas from './UiCanvas'
+
+const CanvasStage = dynamic(() => import('./CanvasStage'), {
+  ssr: false,
+})
 
 const zoomStep = 0.01
 const maxZoomLevel = 4
 
-const KonvaTest = dynamic(() => import('./konva'), {
-  ssr: false,
-})
-
 const DocumentCanvas = () => {
   const { getSelectedDocument } = useProject()
   const selectedDocument = getSelectedDocument()
@@ -56,7 +52,7 @@ const DocumentCanvas = () => {
     </div>
 
     <div className='h-full overflow-hidden rounded-lg border-4 border-dashed border-gray-200'>
-      <KonvaTest size={size} scale={zoomLevel} scaleStep={zoomStep} setScale={setZoomLevel} maxScale={maxZoomLevel} />
+      <CanvasStage size={size} scale={zoomLevel} scaleStep={zoomStep} setScale={setZoomLevel} maxScale={maxZoomLevel} />
     </div>
   </div >
 }