canvu-react 0.4.13 → 0.4.15

package/dist/react.cjs

@@ -8050,6 +8050,7 @@ var VectorViewport = react.forwardRef(
     const wrapperRef = react.useRef(null);
     const interactionRootRef = react.useRef(null);
     const sceneContainerRef = react.useRef(null);
+    const lastPointerScreenRef = react.useRef(null);
     const activeInteractionPointerIdRef = react.useRef(null);
     const activeInteractionPointerTargetRef = react.useRef(null);
     const activeInteractionTouchIdRef = react.useRef(null);
@@ -8776,6 +8777,24 @@ var VectorViewport = react.forwardRef(
         root.removeEventListener("pointerleave", leave);
       };
     }, [onWorldPointerMove]);
+    react.useEffect(() => {
+      const root = wrapperRef.current;
+      if (!root) return;
+      const record = (e) => {
+        lastPointerScreenRef.current = { x: e.clientX, y: e.clientY };
+      };
+      const clear = () => {
+        lastPointerScreenRef.current = null;
+      };
+      root.addEventListener("pointermove", record, { passive: true });
+      root.addEventListener("pointerdown", record, { passive: true });
+      root.addEventListener("pointerleave", clear);
+      return () => {
+        root.removeEventListener("pointermove", record);
+        root.removeEventListener("pointerdown", record);
+        root.removeEventListener("pointerleave", clear);
+      };
+    }, []);
     react.useEffect(() => {
       if (directRemoteStrokePreviewRef.current && placementPreview === null) {
         return;
@@ -9495,6 +9514,50 @@ var VectorViewport = react.forwardRef(
       },
       [screenToWorld, placeImageFilesAtWorld]
     );
+    const handleWrapperPaste = react.useCallback(
+      async (e) => {
+        if (!interactiveRef.current || !onItemsChangeRef.current) return;
+        const t = e.target;
+        if (t instanceof HTMLTextAreaElement || t instanceof HTMLInputElement || t instanceof HTMLElement && t.isContentEditable) {
+          return;
+        }
+        if (editingTextIdRef.current) return;
+        const dt = e.clipboardData;
+        if (!dt) return;
+        const files = [];
+        for (const file of Array.from(dt.files)) {
+          if (file.type.startsWith("image/")) files.push(file);
+        }
+        if (files.length === 0) {
+          for (const item of Array.from(dt.items)) {
+            if (item.kind === "file" && item.type.startsWith("image/")) {
+              const file = item.getAsFile();
+              if (file) files.push(file);
+            }
+          }
+        }
+        if (files.length === 0) return;
+        e.preventDefault();
+        const last = lastPointerScreenRef.current;
+        let target;
+        if (last) {
+          target = screenToWorld(last.x, last.y);
+        } else {
+          const el = sceneContainerRef.current;
+          const cam = cameraRef.current;
+          if (el && cam) {
+            const rect = el.getBoundingClientRect();
+            target = cam.screenToWorld(rect.width / 2, rect.height / 2);
+          } else {
+            target = { worldX: 0, worldY: 0 };
+          }
+        }
+        await placeImageFilesAtWorld(files, target.worldX, target.worldY, {
+          stackBelowExistingItems: false
+        });
+      },
+      [screenToWorld, placeImageFilesAtWorld]
+    );
     const handleOverlayDoubleClick = react.useCallback(
       (e) => {
         const cam = cameraRef.current;
@@ -10764,6 +10827,7 @@ var VectorViewport = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-describedby": liveId,
         onKeyDown,
+        onPaste: handleWrapperPaste,
         onDragOver: handleWrapperDragOver,
         onDrop: handleWrapperDrop,
         children: [