@bwp-web/canvas 0.15.0 → 1.1.0

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   FixedSizeContent: () => FixedSizeContent,
   ObjectOverlay: () => ObjectOverlay,
   OverlayBadge: () => OverlayBadge,
+  OverlayContainer: () => OverlayContainer,
   OverlayContent: () => OverlayContent,
   Point: () => import_fabric19.Point,
   Polygon: () => import_fabric19.Polygon,
@@ -258,6 +259,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;
@@ -3260,8 +3262,10 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
   const [state, setState] = (0, import_react7.useState)({
     visible: false,
     content: null,
-    position: { x: 0, y: 0 }
+    position: { x: 0, y: 0 },
+    ref: { current: null }
   });
+  const tooltipElRef = (0, import_react7.useRef)(null);
   const hoveredObjectRef = (0, import_react7.useRef)(null);
   const optionsRef = (0, import_react7.useRef)(options);
   optionsRef.current = options;
@@ -3278,6 +3282,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;
@@ -3287,7 +3297,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 });
         }
       }
     };
@@ -3301,7 +3311,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);
@@ -3519,10 +3529,61 @@ function useViewCanvasState() {
 }
 
 // src/overlay/ObjectOverlay.tsx
+var import_react12 = require("react");
+var import_material2 = require("@mui/material");
+var import_fabric18 = require("fabric");
+
+// src/overlay/OverlayContainer.tsx
 var import_react11 = require("react");
 var import_material = require("@mui/material");
-var import_fabric18 = require("fabric");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var OverlayContainerContext = (0, import_react11.createContext)(false);
+function useIsInsideOverlayContainer() {
+  return (0, import_react11.useContext)(OverlayContainerContext);
+}
+function OverlayContainer({
+  canvasRef: canvasRefProp,
+  children
+}) {
+  const contextCanvasRef = useCanvasRef();
+  const canvasRef = canvasRefProp ?? contextCanvasRef;
+  const containerRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    const canvas = canvasRef?.current;
+    const el = containerRef.current;
+    if (!canvas || !el) return;
+    function updateContainer() {
+      if (!canvas || !el) return;
+      const vt = canvas.viewportTransform;
+      if (!vt) return;
+      el.style.transform = `translate(${vt[4]}px, ${vt[5]}px)`;
+    }
+    updateContainer();
+    canvas.on("after:render", updateContainer);
+    return () => {
+      canvas.off("after:render", updateContainer);
+    };
+  }, [canvasRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverlayContainerContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_material.Stack,
+    {
+      ref: containerRef,
+      sx: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        willChange: "transform"
+      },
+      children
+    }
+  ) });
+}
+
+// src/overlay/ObjectOverlay.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ObjectOverlay({
   canvasRef: canvasRefProp,
   object,
@@ -3532,8 +3593,10 @@ function ObjectOverlay({
 }) {
   const contextCanvasRef = useCanvasRef();
   const canvasRef = canvasRefProp ?? contextCanvasRef;
-  const stackRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const insideContainer = useIsInsideOverlayContainer();
+  const stackRef = (0, import_react12.useRef)(null);
+  const prev = (0, import_react12.useRef)({ transform: "", w: "", h: "" });
+  (0, import_react12.useEffect)(() => {
     const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
@@ -3545,15 +3608,32 @@ function ObjectOverlay({
       const center = object.getCenterPoint();
       const actualWidth = (object.width ?? 0) * (object.scaleX ?? 1);
       const actualHeight = (object.height ?? 0) * (object.scaleY ?? 1);
-      const screenCoords = import_fabric18.util.transformPoint(center, vt);
       const screenWidth = actualWidth * zoom;
       const screenHeight = actualHeight * zoom;
       const angle = object.angle ?? 0;
-      el.style.left = `${screenCoords.x - screenWidth / 2}px`;
-      el.style.top = `${screenCoords.y - screenHeight / 2}px`;
-      el.style.width = `${screenWidth}px`;
-      el.style.height = `${screenHeight}px`;
-      el.style.transform = angle !== 0 ? `rotate(${angle}deg)` : "";
+      let tx;
+      let ty;
+      if (insideContainer) {
+        tx = center.x * zoom - screenWidth / 2;
+        ty = center.y * zoom - screenHeight / 2;
+      } else {
+        const screenCoords = import_fabric18.util.transformPoint(center, vt);
+        tx = screenCoords.x - screenWidth / 2;
+        ty = screenCoords.y - screenHeight / 2;
+      }
+      const transform = angle !== 0 ? `translate(${tx}px, ${ty}px) rotate(${angle}deg)` : `translate(${tx}px, ${ty}px)`;
+      if (transform !== prev.current.transform) {
+        el.style.transform = transform;
+        prev.current.transform = transform;
+      }
+      const w = `${screenWidth}px`;
+      const h = `${screenHeight}px`;
+      if (prev.current.w !== w || prev.current.h !== h) {
+        el.style.width = w;
+        el.style.height = h;
+        prev.current.w = w;
+        prev.current.h = h;
+      }
     }
     update();
     canvas.on("after:render", update);
@@ -3565,19 +3645,23 @@ function ObjectOverlay({
       object.off("moving", update);
       object.off("scaling", update);
       object.off("rotating", update);
+      prev.current = { transform: "", w: "", h: "" };
     };
-  }, [canvasRef, object]);
+  }, [canvasRef, object, insideContainer]);
   if (!object) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_material.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_material2.Stack,
     {
       ref: stackRef,
       sx: {
         position: "absolute",
+        left: 0,
+        top: 0,
         pointerEvents: "none",
         alignItems: "center",
         justifyContent: "center",
         zIndex: 1,
+        willChange: "transform",
         ...sx
       },
       ...rest,
@@ -3587,28 +3671,28 @@ function ObjectOverlay({
 }
 
 // src/overlay/OverlayContent.tsx
-var import_material2 = require("@mui/material");
-var import_react12 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_material3 = require("@mui/material");
+var import_react13 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function OverlayContent({
   children,
-  padding = 4,
+  padding = 6,
   maxScale = 2,
   sx,
   ...rest
 }) {
-  const outerRef = (0, import_react12.useRef)(null);
-  const innerRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const outerRef = (0, import_react13.useRef)(null);
+  const innerRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
+    let natW = 0;
+    let natH = 0;
     function fit() {
       if (!outer || !inner) return;
       const containerW = outer.clientWidth;
       const containerH = outer.clientHeight;
-      const natW = inner.scrollWidth;
-      const natH = inner.scrollHeight;
       if (natW === 0 || natH === 0 || containerW <= 0 || containerH <= 0) {
         inner.style.transform = "";
         inner.style.removeProperty("--overlay-scale");
@@ -3622,14 +3706,25 @@ function OverlayContent({
       inner.style.transform = `scale(${scale})`;
       inner.style.setProperty("--overlay-scale", String(scale));
     }
-    const observer = new ResizeObserver(fit);
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === inner) {
+          natW = inner.scrollWidth;
+          natH = inner.scrollHeight;
+          break;
+        }
+      }
+      fit();
+    });
     observer.observe(outer);
     observer.observe(inner);
+    natW = inner.scrollWidth;
+    natH = inner.scrollHeight;
     fit();
     return () => observer.disconnect();
   }, [padding, maxScale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_material2.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_material3.Stack,
     {
       ref: outerRef,
       sx: {
@@ -3641,8 +3736,8 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_material2.Stack,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_material3.Stack,
         {
           ref: innerRef,
           sx: {
@@ -3659,9 +3754,9 @@ function OverlayContent({
 }
 
 // src/overlay/FixedSizeContent.tsx
-var import_material3 = require("@mui/material");
-var import_react13 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_material4 = require("@mui/material");
+var import_react14 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function FixedSizeContent({
   children,
   hideOnOverflow = true,
@@ -3669,9 +3764,9 @@ function FixedSizeContent({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react13.useRef)(null);
-  const totalContentHeightRef = (0, import_react13.useRef)(0);
-  (0, import_react13.useEffect)(() => {
+  const ref = (0, import_react14.useRef)(null);
+  const totalContentHeightRef = (0, import_react14.useRef)(0);
+  (0, import_react14.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3682,34 +3777,45 @@ function FixedSizeContent({
     if (!clipAncestor) return;
     const ancestor = clipAncestor;
     totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
-    function check() {
-      requestAnimationFrame(() => {
-        if (!el) return;
-        const containerRect = ancestor.getBoundingClientRect();
-        el.style.maxWidth = `${Math.max(0, containerRect.width - truncationPadding * 2)}px`;
-        if (!hideOnOverflow) return;
-        const fits = containerRect.height >= totalContentHeightRef.current;
-        if (fits && el.style.display === "none") {
-          el.style.display = "";
-          totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
-          if (containerRect.height < totalContentHeightRef.current) {
-            el.style.display = "none";
-          }
-        } else if (!fits && el.style.display !== "none") {
+    let rafId = 0;
+    function doCheck() {
+      if (!el) return;
+      const containerW = ancestor.clientWidth;
+      const containerH = ancestor.clientHeight;
+      el.style.maxWidth = `${Math.max(0, containerW - truncationPadding * 2)}px`;
+      if (!hideOnOverflow) return;
+      const fits = containerH >= totalContentHeightRef.current;
+      if (fits && el.style.display === "none") {
+        el.style.display = "";
+        totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
+        if (containerH < totalContentHeightRef.current) {
           el.style.display = "none";
         }
-        if (el.style.display !== "none") {
-          totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
-        }
-      });
+      } else if (!fits && el.style.display !== "none") {
+        el.style.display = "none";
+      }
+      if (el.style.display !== "none") {
+        totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
+      }
+    }
+    function scheduleCheck() {
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = 0;
+          doCheck();
+        });
+      }
     }
-    const observer = new ResizeObserver(check);
+    const observer = new ResizeObserver(scheduleCheck);
     observer.observe(ancestor);
-    check();
-    return () => observer.disconnect();
+    scheduleCheck();
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [hideOnOverflow, truncationPadding]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_material3.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_material4.Stack,
     {
       ref,
       sx: {
@@ -3733,9 +3839,9 @@ function FixedSizeContent({
 }
 
 // src/overlay/OverlayBadge.tsx
-var import_material4 = require("@mui/material");
-var import_react14 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_material5 = require("@mui/material");
+var import_react15 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function toPx(v) {
   if (v === void 0) return void 0;
   return typeof v === "number" ? `${v}px` : v;
@@ -3765,10 +3871,19 @@ function ellipsePosition(angleDeg) {
 function toNum(v) {
   return typeof v === "number" ? v : 0;
 }
+function readOverlayScale(el) {
+  let node = el.parentElement;
+  while (node) {
+    const val = node.style.getPropertyValue("--overlay-scale");
+    if (val) return parseFloat(val) || 1;
+    node = node.parentElement;
+  }
+  return 1;
+}
 function OverlayBadge({
   children,
-  maxScale = 2,
-  minScale = 0.75,
+  maxScale = 1.5,
+  minScale = 0.5,
   top,
   right,
   bottom,
@@ -3777,41 +3892,47 @@ function OverlayBadge({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react14.useRef)(null);
-  const baseSize = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const ref = (0, import_react15.useRef)(null);
+  const baseSize = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
     if (!ancestor) return;
-    function update() {
-      requestAnimationFrame(() => {
-        if (!el || !ancestor) return;
-        const containerW = ancestor.clientWidth;
-        const containerH = ancestor.clientHeight;
-        if (containerW <= 0 || containerH <= 0) {
-          el.style.transform = "";
-          return;
-        }
-        if (!baseSize.current) {
-          baseSize.current = { w: containerW, h: containerH };
-        }
-        const ratio = Math.min(
-          containerW / baseSize.current.w,
-          containerH / baseSize.current.h
-        );
-        const ownScale = Math.max(minScale, Math.min(ratio, maxScale));
-        const overlayScale = parseFloat(
-          getComputedStyle(el).getPropertyValue("--overlay-scale")
-        ) || 1;
-        const scale = `scale(${ownScale / overlayScale})`;
-        el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
-      });
+    let rafId = 0;
+    function doUpdate() {
+      if (!el || !ancestor) return;
+      const containerW = ancestor.clientWidth;
+      const containerH = ancestor.clientHeight;
+      if (containerW <= 0 || containerH <= 0) {
+        el.style.transform = "";
+        return;
+      }
+      if (!baseSize.current) {
+        baseSize.current = { w: containerW, h: containerH };
+      }
+      const ratio = Math.min(
+        containerW / baseSize.current.w,
+        containerH / baseSize.current.h
+      );
+      const ownScale = Math.max(minScale, Math.min(ratio, maxScale));
+      const overlayScale = readOverlayScale(el);
+      const scale = `scale(${ownScale / overlayScale})`;
+      el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
     }
-    const observer = new ResizeObserver(update);
+    function scheduleUpdate() {
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = 0;
+          doUpdate();
+        });
+      }
+    }
+    const observer = new ResizeObserver(scheduleUpdate);
     observer.observe(ancestor);
-    update();
+    scheduleUpdate();
     return () => {
+      if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
       baseSize.current = null;
     };
@@ -3831,8 +3952,8 @@ function OverlayBadge({
     bottom: toPx(bottom),
     left: toPx(left)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_material4.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_material5.Stack,
     {
       ref,
       sx: {
@@ -3869,6 +3990,7 @@ var import_fabric19 = require("fabric");
   FixedSizeContent,
   ObjectOverlay,
   OverlayBadge,
+  OverlayContainer,
   OverlayContent,
   Point,
   Polygon,