fix: center dropped image and svg insertions

editor/grida-canvas-react/__tests__/data-transfer-position.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from "vitest";
+import { getCenteredCanvasInsertionPoint } from "../data-transfer-position";
+
+describe("getCenteredCanvasInsertionPoint", () => {
+  test("subtracts known canvas-space size after client-to-canvas conversion", () => {
+    const point = getCenteredCanvasInsertionPoint({
+      clientPosition: [100, 120],
+      size: { width: 40, height: 20 },
+      clientPointToCanvasPoint: ([x, y]) => [x / 2, y / 2],
+    });
+
+    expect(point).toEqual([30, 50]);
+  });
+
+  test("does not offset dimensions that cannot be measured", () => {
+    const point = getCenteredCanvasInsertionPoint({
+      clientPosition: [100, 120],
+      size: { width: 0, height: Number.NaN },
+      clientPointToCanvasPoint: ([x, y]) => [x / 2, y / 2],
+    });
+
+    expect(point).toEqual([50, 60]);
+  });
+});

editor/grida-canvas-react/data-transfer-position.ts

@@ -0,0 +1,22 @@
+type Vector2 = [number, number];
+
+type Size = {
+  width: number;
+  height: number;
+};
+
+export function getCenteredCanvasInsertionPoint(args: {
+  clientPosition: Vector2;
+  size: Size;
+  clientPointToCanvasPoint: (point: Vector2) => Vector2;
+}): Vector2 {
+  const [x, y] = args.clientPointToCanvasPoint(args.clientPosition);
+  return [
+    x - getPositiveHalf(args.size.width),
+    y - getPositiveHalf(args.size.height),
+  ];
+}
+
+function getPositiveHalf(value: number): number {
+  return Number.isFinite(value) && value > 0 ? value / 2 : 0;
+}

editor/grida-canvas-react/use-data-transfer.ts

@@ -13,6 +13,64 @@ import { iofigma } from "@grida/io-figma";
 import { nanoid } from "nanoid";
 import { datatransfer } from "@/grida-canvas/data-transfer";
 import type { editor } from "@/grida-canvas";
+import { getCenteredCanvasInsertionPoint } from "./data-transfer-position";
+import type grida from "@grida/schema";
+
+function createImagePaint(src: string): cg.ImagePaint {
+  return {
+    type: "image",
+    src,
+    fit: "cover",
+    transform: cmath.transform.identity,
+    filters: cg.def.IMAGE_FILTERS,
+    blend_mode: cg.def.BLENDMODE,
+    opacity: 1,
+    active: true,
+  };
+}
+
+function insertImageRectangle(args: {
+  editor: Editor;
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  src: string;
+}) {
+  const paint = createImagePaint(args.src);
+  const prototype = {
+    type: "rectangle",
+    name: args.name,
+    layout_positioning: "absolute",
+    layout_inset_left: 0,
+    layout_inset_top: 0,
+    layout_target_width: args.width,
+    layout_target_height: args.height,
+    fill: paint,
+    fill_paints: [paint],
+  } satisfies grida.program.nodes.NodePrototype;
+
+  const [nodeId] = args.editor.insert(
+    { prototype },
+    args.editor.state.scene_id ?? null
+  );
+
+  if (!nodeId) return;
+
+  args.editor.doc.dispatch({
+    type: "node/change/*",
+    node_id: nodeId,
+    layout_positioning: "absolute",
+    name: args.name,
+    layout_inset_left: args.x,
+    layout_inset_top: args.y,
+    layout_target_width: args.width,
+    layout_target_height: args.height,
+    fill_paints: [paint],
+  });
+  args.editor.doc.select([nodeId], "reset");
+}
 
 /**
  * Hook that provides file insertion utilities for the Grida canvas editor.
@@ -54,33 +112,27 @@ export function useInsertFile() {
         clientY: number;
       }
     ) => {
-      const [x, y] = instance.camera.clientPointToCanvasPoint(
-        position ? [position.clientX, position.clientY] : [0, 0]
-      );
-
       const bytes = await file.arrayBuffer();
       const image = await instance.createImage(new Uint8Array(bytes));
+      const [x, y] = getCenteredCanvasInsertionPoint({
+        clientPosition: position
+          ? [position.clientX, position.clientY]
+          : [0, 0],
+        size: image,
+        clientPointToCanvasPoint: instance.camera.clientPointToCanvasPoint.bind(
+          instance.camera
+        ),
+      });
 
-      // Create rectangle node with image paint instead of image node
-      const node = instance.commands.createRectangleNode();
-      node.$.layout_positioning = "absolute";
-      node.$.name = name;
-      node.$.layout_inset_left = x;
-      node.$.layout_inset_top = y;
-      node.$.layout_target_width = image.width;
-      node.$.layout_target_height = image.height;
-      node.$.fill_paints = [
-        {
-          type: "image",
-          src: image.url,
-          fit: "cover",
-          transform: cmath.transform.identity,
-          filters: cg.def.IMAGE_FILTERS,
-          blend_mode: cg.def.BLENDMODE,
-          opacity: 1,
-          active: true,
-        } satisfies cg.ImagePaint,
-      ];
+      insertImageRectangle({
+        editor: instance,
+        name,
+        x,
+        y,
+        width: image.width,
+        height: image.height,
+        src: image.url,
+      });
     },
     [instance]
   );
@@ -96,24 +148,24 @@ export function useInsertFile() {
     ) => {
       const node = await instance.commands.createNodeFromSvg(svg);
 
-      const center_dx =
-        typeof node.$.layout_target_width === "number" &&
-        node.$.layout_target_width > 0
-          ? node.$.layout_target_width / 2
-          : 0;
-
-      const center_dy =
-        typeof node.$.layout_target_height === "number" &&
-        node.$.layout_target_height > 0
-          ? node.$.layout_target_height / 2
-          : 0;
-
-      const [x, y] = instance.camera.clientPointToCanvasPoint(
-        cmath.vector2.sub(
-          position ? [position.clientX, position.clientY] : [0, 0],
-          [center_dx, center_dy]
-        )
-      );
+      const [x, y] = getCenteredCanvasInsertionPoint({
+        clientPosition: position
+          ? [position.clientX, position.clientY]
+          : [0, 0],
+        size: {
+          width:
+            typeof node.$.layout_target_width === "number"
+              ? node.$.layout_target_width
+              : 0,
+          height:
+            typeof node.$.layout_target_height === "number"
+              ? node.$.layout_target_height
+              : 0,
+        },
+        clientPointToCanvasPoint: instance.camera.clientPointToCanvasPoint.bind(
+          instance.camera
+        ),
+      });
 
       node.$.name = name;
       node.$.layout_inset_left = x;
@@ -595,29 +647,25 @@ export function useDataTransferEventTarget() {
             const { name, src, width, height } = data;
             const task = (async () => {
               const imageRef = await instance.createImageAsync(src);
-              const [x, y] = instance.camera.clientPointToCanvasPoint([
-                event.clientX,
-                event.clientY,
-              ]);
-              const node = instance.commands.createRectangleNode();
-              node.$.layout_positioning = "absolute";
-              node.$.name = name || "Photo";
-              node.$.layout_inset_left = x;
-              node.$.layout_inset_top = y;
-              node.$.layout_target_width = width || imageRef.width;
-              node.$.layout_target_height = height || imageRef.height;
-              node.$.fill_paints = [
-                {
-                  type: "image",
-                  src: imageRef.url,
-                  fit: "cover",
-                  transform: cmath.transform.identity,
-                  filters: cg.def.IMAGE_FILTERS,
-                  blend_mode: cg.def.BLENDMODE,
-                  opacity: 1,
-                  active: true,
-                } satisfies cg.ImagePaint,
-              ];
+              const imageWidth = width ?? imageRef.width;
+              const imageHeight = height ?? imageRef.height;
+              const [x, y] = getCenteredCanvasInsertionPoint({
+                clientPosition: [event.clientX, event.clientY],
+                size: { width: imageWidth, height: imageHeight },
+                clientPointToCanvasPoint:
+                  instance.camera.clientPointToCanvasPoint.bind(
+                    instance.camera
+                  ),
+              });
+              insertImageRectangle({
+                editor: instance,
+                name: name || "Photo",
+                x,
+                y,
+                width: imageWidth,
+                height: imageHeight,
+                src: imageRef.url,
+              });
             })();
 
             toast.promise(task, {
@@ -664,7 +712,7 @@ export function useDataTransferEventTarget() {
         }
       }
     },
-    [insertFromFile, insertSVG]
+    [insertFromFile, insertSVG, instance]
   );
   //