@bwp-web/canvas 0.14.0 → 0.14.2

package/dist/index.js

@@ -165,6 +165,7 @@ function setupMousePan(canvas, getMode, isEnabled) {
     const isModifiedSelect = e instanceof MouseEvent && mode === "select" && (e.metaKey || e.ctrlKey);
     const shouldPan = mode === "pan" || isMiddleButton || isModifiedSelect || mode === "select" && !opt.target;
     if (shouldPan) {
+      e.preventDefault();
       isPanning = true;
       lastPanX = pos.x;
       lastPanY = pos.y;
@@ -1836,10 +1837,11 @@ function enableDrawToCreate(canvas, options) {
   const finalize = () => {
     removePreviewElements();
     snapping.clearSnapResult();
-    const obj = options?.factory ? options.factory(canvas, [...points]) : createPolygonFromVertices(canvas, points, options?.style);
-    if (options?.data) {
-      obj.data = options.data;
-    }
+    const styleWithData = {
+      ...options?.style,
+      ...options?.data != null && { data: options.data }
+    };
+    const obj = options?.factory ? options.factory(canvas, [...points]) : createPolygonFromVertices(canvas, points, styleWithData);
     canvas.selection = previousSelection;
     canvas.requestRenderAll();
     restoreViewport(options?.viewport);
@@ -1999,6 +2001,10 @@ function enableDrawToCreate(canvas, options) {
         placeVertex(dragStartX, dragStartY);
         return;
       }
+      const dragStyleWithData = {
+        ...options?.style,
+        ...options?.data != null && { data: options.data }
+      };
       const obj = createPolygonFromVertices(
         canvas,
         [
@@ -2007,11 +2013,8 @@ function enableDrawToCreate(canvas, options) {
           { x: dragStartX + width, y: dragStartY + height },
           { x: dragStartX, y: dragStartY + height }
         ],
-        options?.style
+        dragStyleWithData
       );
-      if (options?.data) {
-        obj.data = options.data;
-      }
       canvas.selection = previousSelection;
       canvas.requestRenderAll();
       restoreViewport(options?.viewport);
@@ -3181,8 +3184,10 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
   const [state, setState] = useState3({
     visible: false,
     content: null,
-    position: { x: 0, y: 0 }
+    position: { x: 0, y: 0 },
+    ref: { current: null }
   });
+  const tooltipElRef = useRef5(null);
   const hoveredObjectRef = useRef5(null);
   const optionsRef = useRef5(options);
   optionsRef.current = options;
@@ -3199,6 +3204,12 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
         y: bounds.top * zoom + vt[5] - 10
       };
     }
+    function applyPositionToDOM(position) {
+      const el = tooltipElRef.current;
+      if (!el) return;
+      el.style.left = `${position.x}px`;
+      el.style.top = `${position.y}px`;
+    }
     const handleMouseOver = (e) => {
       const target = e.target;
       if (!target) return;
@@ -3208,7 +3219,7 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
         hoveredObjectRef.current = target;
         const position = calculatePosition(target);
         if (position) {
-          setState({ visible: true, content, position });
+          setState({ visible: true, content, position, ref: tooltipElRef });
         }
       }
     };
@@ -3222,7 +3233,7 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
       if (!hoveredObjectRef.current) return;
       const position = calculatePosition(hoveredObjectRef.current);
       if (position) {
-        setState((prev) => prev.visible ? { ...prev, position } : prev);
+        applyPositionToDOM(position);
       }
     };
     canvas.on("mouse:over", handleMouseOver);