fix rendering is reversed

fisirc · Dec 2, 2024 · 7c7c4a3 · 7c7c4a3
1 parent 724aa3c
commit 7c7c4a3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/app/src/pages/Editor/components/GalleryCanvas2D.tsx b/app/src/pages/Editor/components/GalleryCanvas2D.tsx
@@ -10,7 +10,7 @@ import { PictureSlot } from '@/pages/Editor/components/blocks/PictureSlot';
 import { Model3DSlot } from '@/pages/Editor/components/blocks/Model3DBlock';
 import { getInitialScale, getInitialXY, saveScaleToLocalStorage, saveXYToLocalStorage } from '../utils';
 import { useApi } from '@/hooks/useApi';
-import { StillerGallery } from '@/types';
+import { SlotVertices, StillerGallery } from '@/types';
 
 const initialScale = getInitialScale();
 const initialXY = getInitialXY();
@@ -118,8 +118,8 @@ export const GalleryCanvas2D = memo(({ gallery, triggerReRender }: GalleryCanvas
                   <PictureSlot
                     key={i}
                     idRef={block.ref}
-                    v={block.v as any}
-                    props={{}}
+                    v={block.v as unknown as SlotVertices}
+                    props={block.props}
                     res={res}
                   />
                 );
@@ -129,7 +129,7 @@ export const GalleryCanvas2D = memo(({ gallery, triggerReRender }: GalleryCanvas
                   <Model3DSlot
                     key={i}
                     idRef={block.ref}
-                    v={block.v[0] as any}
+                    v={block.v[0]}
                     props={block.props}
                     res={res}
                   />

diff --git a/app/src/pages/Editor/components/blocks/PictureSlot.tsx b/app/src/pages/Editor/components/blocks/PictureSlot.tsx
@@ -7,7 +7,7 @@ import { useEditorStore } from '@/stores/editorAction';
 import { useMetagalleryStore } from '@/providers/MetagalleryProvider';
 import { CORNER_RADIUS, FRAME_STROKE_WIDTH, noImageSrc } from '@/constants';
 import { JSONValue, SlotVertices } from '@/types';
-import { cosine, getFrameAngle, getFrameHeight, getFrameWidth, sine, v3tov2 } from '@/pages/Editor/utils';
+import { cosine, getFrameAngle, getFrameHeight, getFrameWidth, medianPoint, sine, v3tov2 } from '@/pages/Editor/utils';
 import { useUser } from '@/stores/useUser';
 import { mutate } from 'swr';
 import { notifications } from '@mantine/notifications';
@@ -39,7 +39,8 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
 
   const [image] = useImage(src ?? noImageSrc);
 
-  const pos = v3tov2(v[2]);
+  // const pos = v3tov2(v[3]);
+  const pos = medianPoint(v3tov2(v[1]), v3tov2(v[3]));
   const rotation = getFrameAngle(v);
 
   const frameWidth = getFrameWidth(v);
@@ -62,19 +63,21 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
     imgOffsetY = frameHeight / 2 - imgHeight / 2;
   }
 
-  // const changedX = -pos[0] + (pos[0] > 0 ? frameWidth : -frameWidth);
-  // const changedX = -pos[0] - frameWidth;
-  const changedX = pos[0];
+  const x = -pos[0];
+  const y = pos[1];
 
   return (
     <Group>
       { /* Base color and border */}
+
       <Rect
-        x={changedX}
-        y={pos[1]}
+        x={x}
+        y={y}
+        offsetX={+frameWidth / 2}
+        offsetY={+frameHeight / 2}
         width={frameWidth}
         height={frameHeight}
-        rotation={rotation}
+        // rotation={rotation}
         listening
         fillAfterStrokeEnabled
         strokeHitEnabled
@@ -136,8 +139,11 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
       { /* Rendered image */}
       {
         image && <Image
-          x={changedX - imgOffsetY * sine(rotation) + imgOffsetX * cosine(rotation)}
-          y={pos[1] + imgOffsetY * cosine(rotation) + imgOffsetX * sine(rotation)}
+          x={x - imgOffsetY * sine(rotation) + imgOffsetX * cosine(rotation)}
+          y={y + imgOffsetY * cosine(rotation) + imgOffsetX * sine(rotation)}
+          offsetX={+frameWidth / 2}
+          offsetY={+frameHeight / 2}
+
           width={imgWidth}
           height={imgHeight}
           listening={false}

diff --git a/app/src/pages/Editor/utils.ts b/app/src/pages/Editor/utils.ts
@@ -1,10 +1,19 @@
 import { SlotVertex, SlotVertices } from '@/types';
 import debounce from 'debounce';
 
+/**
+ * The conversion is:
+ * Blender (x, y, z)
+ * Konva   (x, x, -y)
+ */
 export function v3tov2(v: SlotVertex): [number, number] {
     return [v[0], -v[2]];
 }
 
+export function medianPoint(p1: [number, number], p2: [number, number]) {
+    return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
+}
+
 export function getFrameWidth(v: SlotVertices) {
     const p1 = v3tov2(v[2]);
     const p2 = v3tov2(v[0]);