@visualli/react 0.1.1 → 0.1.3

package/dist/index.js

@@ -2149,11 +2149,6 @@ function VisualliCanvas(props) {
       return { flatNodes: [], connections: [], containers: [] };
     }
   }, [doc, currentLayerId]);
-  const setNodes = useNodeStore((s) => s.setNodes);
-  const nodes = useNodeStore((s) => s.nodes);
-  const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
-  const setCenter = useViewportStore((s) => s.setCenter);
-  const setZoom = useViewportStore((s) => s.setZoom);
   const viewport = useViewportStore((s) => ({
     centerX: s.centerX,
     centerY: s.centerY,
@@ -2161,6 +2156,11 @@ function VisualliCanvas(props) {
     canvasWidth: s.canvasWidth,
     canvasHeight: s.canvasHeight
   }));
+  const setCenter = useViewportStore((s) => s.setCenter);
+  const setZoom = useViewportStore((s) => s.setZoom);
+  const nodes = useNodeStore((s) => s.nodes);
+  const setNodes = useNodeStore((s) => s.setNodes);
+  const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
   const clearSel = useSelectionStore((s) => s.clear);
   const select = useSelectionStore((s) => s.select);
   useEffect6(() => {
@@ -2702,7 +2702,10 @@ function VisualliCanvas(props) {
       setCanvasContextMenu(null);
       return;
     }
-    setCanvasContextMenu({ x: e.evt.clientX, y: e.evt.clientY });
+    const rect = containerRef.current?.getBoundingClientRect();
+    const localX = rect ? e.evt.clientX - rect.left : e.evt.clientX;
+    const localY = rect ? e.evt.clientY - rect.top : e.evt.clientY;
+    setCanvasContextMenu({ x: localX, y: localY });
   }, [navStack.length]);
   const handleStageTouchStart = useCallback4((e) => handleStageMouseDown(e), [handleStageMouseDown]);
   const handleStageTouchMove = useCallback4((e) => handleStageMouseMove(e), [handleStageMouseMove]);
@@ -2858,7 +2861,7 @@ function VisualliCanvas(props) {
             role: "menu",
             "aria-label": "Canvas options",
             style: {
-              position: "fixed",
+              position: "absolute",
               zIndex: 60,
               pointerEvents: "auto",
               left: `${Math.min(canvasContextMenu.x, Math.max(8, (canvasSizeRef.current.width || 800) - 152))}px`,
@@ -2907,7 +2910,7 @@ function VisualliCanvas(props) {
             {
               "data-node-tooltip": "true",
               style: {
-                position: "fixed",
+                position: "absolute",
                 zIndex: 50,
                 left: safeLeft,
                 top: safeTop,