Canvas main to test (#5)

Canvas main to test
aukus-devs · Oct 1, 2024 · 355844f · 355844f
2 parents aae48ce + fecc31e
commit 355844f
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 72 deletions.
diff --git a/src/components/PlayerCanvasBackground/context.tsx b/src/components/PlayerCanvasBackground/context.tsx
@@ -6,77 +6,80 @@ import React, {
   useContext,
   useMemo,
   useState,
-} from 'react';
-import { useGetCanvasImages } from './queries';
-import { Player } from '../../utils/types';
+} from 'react'
+import { useGetCanvasImages } from './queries'
+import { Player } from '../../utils/types'
 
 export type CanvasImage = {
-  id: number;
-  rotation: number;
-  x: number;
-  y: number;
-  url: string;
-  width: number;
-  height: number;
-  zIndex: number;
-  scaleX: number;
-  scaleY: number;
-};
+  id: number
+  rotation: number
+  x: number
+  y: number
+  url: string
+  width: number
+  height: number
+  zIndex: number
+  scaleX: number
+  scaleY: number
+}
 
-type FlipFunction = () => void;
+type FlipFunction = () => void
 
 interface ContextType {
-  images: CanvasImage[];
-  isEditMode: boolean;
-  setIsEditMode: Dispatch<SetStateAction<boolean>>;
-  selectedImage: CanvasImage | null;
-  setSelectedImage: Dispatch<SetStateAction<CanvasImage | null>>;
-  player: Player;
-  flipFunction: FlipFunction | null;
-  setFlipFunction: (func: FlipFunction | null) => void;
+  images: CanvasImage[]
+  isEditMode: boolean
+  setIsEditMode: Dispatch<SetStateAction<boolean>>
+  selectedImage: CanvasImage | null
+  setSelectedImage: Dispatch<SetStateAction<CanvasImage | null>>
+  player: Player
+  flipFunction: FlipFunction | null
+  setFlipFunction: (func: FlipFunction | null) => void
 }
 
-const Context = createContext<ContextType | undefined>(undefined);
+const Context = createContext<ContextType | undefined>(undefined)
 
-export const PlayerCanvasBackgroundContextProvider = ({ children, player }: {
-  children: React.ReactNode,
+export const PlayerCanvasBackgroundContextProvider = ({
+  children,
+  player,
+}: {
+  children: React.ReactNode
   player: Player
 }) => {
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [selectedImage, setSelectedImage] = useState<CanvasImage | null>(null);
-  const flipFunctionRef = React.useRef<FlipFunction | null>(null);
+  const [isEditMode, setIsEditMode] = useState(false)
+  const [selectedImage, setSelectedImage] = useState<CanvasImage | null>(null)
+  const flipFunctionRef = React.useRef<FlipFunction | null>(null)
 
-  const { data } = useGetCanvasImages(player.id);
+  const { data } = useGetCanvasImages(player.id)
 
   const setFlipFunction = useCallback((func: FlipFunction | null) => {
-    flipFunctionRef.current = func;
-  }, []);
-
-  const value = useMemo(() => ({
-    images: data,
-    isEditMode,
-    setIsEditMode,
-    selectedImage,
-    setSelectedImage,
-    player,
-    flipFunction: flipFunctionRef.current,
-    setFlipFunction: setFlipFunction,
-  }), [data, isEditMode, selectedImage, player, flipFunctionRef.current, setFlipFunction]);
+    flipFunctionRef.current = func
+  }, [])
 
-  return (
-    <Context.Provider value={value}>
-      {children}
-    </Context.Provider>
-  );
-};
+  const value = useMemo(
+    () => ({
+      images: data,
+      isEditMode,
+      setIsEditMode,
+      selectedImage,
+      setSelectedImage,
+      player,
+      flipFunction: flipFunctionRef.current,
+      setFlipFunction: setFlipFunction,
+    }),
+    [data, isEditMode, selectedImage, player, setFlipFunction]
+  )
 
+  return <Context.Provider value={value}>{children}</Context.Provider>
+}
 
 export const usePlayerCanvasBackgroundContext = () => {
-  const context = useContext(Context);
+  const context = useContext(Context)
 
   if (!context) {
-    throw new Error('usePlayerCanvasBackgroundContext must be used within PlayerCanvasBackgroundContextProvider');
+    throw new Error(
+      'usePlayerCanvasBackgroundContext must be used within PlayerCanvasBackgroundContextProvider'
+    )
   }
 
-  return context;
-};
+  return context
+}
diff --git a/src/components/PlayerCanvasBackground/ui/canvas-stage.tsx b/src/components/PlayerCanvasBackground/ui/canvas-stage.tsx
@@ -8,9 +8,11 @@ import { KonvaEventObject } from 'konva/lib/Node'
 const URLImage = ({
   image,
   setImages,
+  centerX,
 }: {
   image: CanvasImage
   setImages: React.Dispatch<React.SetStateAction<CanvasImage[]>>
+  centerX: number
 }) => {
   const { url, id, scaleX, scaleY, zIndex, ...restProps } = image
 
@@ -61,7 +63,7 @@ const URLImage = ({
         ...image,
         scaleX: newScaleX,
         scaleY: node.scaleY(),
-        x: node.x(),
+        x: node.x() - centerX,
         y: node.y(),
         rotation,
         width: node.width(),
@@ -83,7 +85,7 @@ const URLImage = ({
     console.log('handleDragEnd()')
     const updatedImage = {
       ...image,
-      x: e.target.x(),
+      x: e.target.x() - centerX,
       y: e.target.y(),
     }
 
@@ -122,7 +124,7 @@ const URLImage = ({
         rotation: node.rotation(),
         width: Math.abs(Math.max(20, node.width() * transformScaleX)),
         height: Math.abs(node.height() * transformScaleY),
-        x: node.x(),
+        x: node.x() - centerX,
         y: node.y(),
         scaleX: newScaleX,
         scaleY: newScaleY,
@@ -141,6 +143,7 @@ const URLImage = ({
         ref={imageRef}
         image={img}
         {...restProps}
+        x={restProps.x + centerX}
         draggable
         onClick={() => {
           console.log('image clicked', image)
@@ -235,7 +238,12 @@ export function CanvasStage({
       >
         <Layer>
           {imageList.map((image) => (
-            <URLImage key={image.id} image={image} setImages={setImageList} />
+            <URLImage
+              key={image.id}
+              image={image}
+              setImages={setImageList}
+              centerX={width / 2}
+            />
           ))}
         </Layer>
       </Stage>

diff --git a/src/components/PlayerCanvasBackground/ui/control-buttons.tsx b/src/components/PlayerCanvasBackground/ui/control-buttons.tsx
@@ -117,6 +117,8 @@ export function ControlButtons({
       disableEditMode = window.confirm('Вы забыли сохранить изображения')
     }
     setIsEditMode(!disableEditMode)
+    setSelectedImage(null)
+    setFlipFunction(null)
   }
 
   return (

diff --git a/src/components/PlayerCanvasBackground/ui/static-canvas.tsx b/src/components/PlayerCanvasBackground/ui/static-canvas.tsx
@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { Box } from '@mui/material'
 import { usePlayerCanvasBackgroundContext } from '../context'
+import { useRefDimensions } from '../use-ref-dimensions'
 
-function rotateImage(
+function adjustCoordinates(
   x: number,
   y: number,
   width: number,
@@ -41,17 +42,13 @@ function rotateImage(
 
 export function StaticCanvas() {
   const { images } = usePlayerCanvasBackgroundContext()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const dimensions = useRefDimensions(containerRef)
 
-  return (
-    <Box
-      sx={{
-        position: 'absolute',
-        backgroundColor: 'yellow',
-        zIndex: 0,
-      }}
-    >
-      {images.map((image) => {
-        const { x, y } = rotateImage(
+  const renderItems = () => {
+    if (dimensions.width > 0) {
+      return images.map((image) => {
+        const { x, y } = adjustCoordinates(
           image.x,
           image.y,
           image.width,
@@ -69,16 +66,32 @@ export function StaticCanvas() {
             sx={{
               position: 'absolute',
               top: y,
-              left: x,
+              left: dimensions.width / 2 + x,
               width: `${Math.abs(image.width)}px`,
               height: `${Math.abs(image.height)}px`,
-              transform: `rotate(${image.rotation}deg) scaleX(${image.scaleX}) scaleY(${image.scaleY})`, //scaleX(${image.scaleX}) //  * image.scaleX
+              transform: `rotate(${image.rotation}deg) scaleX(${image.scaleX}) scaleY(${image.scaleY})`,
               userSelect: 'none',
             }}
             draggable={false}
           />
         )
-      })}
+      })
+    }
+
+    return null
+  }
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        position: 'absolute',
+        zIndex: 0,
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      {renderItems()}
     </Box>
   )
 }