@bwp-web/canvas 0.6.2 → 0.7.1

package/dist/hooks/index.d.ts

@@ -8,6 +8,4 @@ export { useCanvasTooltip } from './useCanvasTooltip';
 export type { UseCanvasTooltipOptions, CanvasTooltipState, } from './useCanvasTooltip';
 export { useCanvasClick } from './useCanvasClick';
 export type { UseCanvasClickOptions } from './useCanvasClick';
-export { useObjectOverlay } from './useObjectOverlay';
-export type { UseObjectOverlayOptions } from './useObjectOverlay';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.cjs

@@ -30,6 +30,9 @@ __export(index_exports, {
   FabricCanvas: () => import_fabric19.Canvas,
   FabricImage: () => import_fabric19.FabricImage,
   FabricObject: () => import_fabric19.FabricObject,
+  FixedSizeContent: () => FixedSizeContent,
+  ObjectOverlay: () => ObjectOverlay,
+  OverlayContent: () => OverlayContent,
   Point: () => import_fabric19.Point,
   Polygon: () => import_fabric19.Polygon,
   Rect: () => import_fabric19.Rect,
@@ -75,7 +78,6 @@ __export(index_exports, {
   useCanvasEvents: () => useCanvasEvents,
   useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
-  useObjectOverlay: () => useObjectOverlay,
   useViewCanvas: () => useViewCanvas,
   util: () => import_fabric19.util
 });
@@ -3043,18 +3045,24 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
-// src/hooks/useObjectOverlay.ts
+// src/overlay/ObjectOverlay.tsx
 var import_react8 = require("react");
+var import_material = require("@mui/material");
 var import_fabric18 = require("fabric");
-function useObjectOverlay(canvasRef, object, options) {
-  const containerRef = (0, import_react8.useRef)(null);
-  const optionsRef = (0, import_react8.useRef)(options);
-  optionsRef.current = options;
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ObjectOverlay({
+  canvasRef,
+  object,
+  sx,
+  children,
+  ...rest
+}) {
+  const stackRef = (0, import_react8.useRef)(null);
   (0, import_react8.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas || !object) return;
     function update() {
-      const el = containerRef.current;
+      const el = stackRef.current;
       if (!el || !canvas || !object) return;
       const zoom = canvas.getZoom();
       const vt = canvas.viewportTransform;
@@ -3066,32 +3074,11 @@ function useObjectOverlay(canvasRef, object, options) {
       const screenWidth = actualWidth * zoom;
       const screenHeight = actualHeight * zoom;
       const angle = object.angle ?? 0;
-      const opts = optionsRef.current;
-      if (opts?.autoScaleContent !== false) {
-        el.style.left = `${screenCoords.x - actualWidth / 2}px`;
-        el.style.top = `${screenCoords.y - actualHeight / 2}px`;
-        el.style.width = `${actualWidth}px`;
-        el.style.height = `${actualHeight}px`;
-        el.style.transformOrigin = "center center";
-        el.style.transform = angle !== 0 ? `scale(${zoom}) rotate(${angle}deg)` : `scale(${zoom})`;
-        el.style.rotate = "";
-        el.style.setProperty("--overlay-scale", String(zoom));
-        if (opts?.textSelector) {
-          const textMinScale = opts?.textMinScale ?? 0.5;
-          const textEls = el.querySelectorAll(opts.textSelector);
-          const display = zoom < textMinScale ? "none" : "";
-          textEls.forEach((t) => {
-            t.style.display = display;
-          });
-        }
-      } else {
-        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 = "";
-        el.style.rotate = angle !== 0 ? `${angle}deg` : "";
-      }
+      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)` : "";
     }
     update();
     canvas.on("after:render", update);
@@ -3105,7 +3092,169 @@ function useObjectOverlay(canvasRef, object, options) {
       object.off("rotating", update);
     };
   }, [canvasRef, object]);
-  return containerRef;
+  if (!object) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material.Stack,
+    {
+      ref: stackRef,
+      sx: {
+        position: "absolute",
+        pointerEvents: "none",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1,
+        overflow: "hidden",
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/overlay/OverlayContent.tsx
+var import_material2 = require("@mui/material");
+var import_react9 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function OverlayContent({
+  children,
+  padding = 4,
+  maxScale = 2,
+  sx,
+  ...rest
+}) {
+  const outerRef = (0, import_react9.useRef)(null);
+  const innerRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+    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");
+        return;
+      }
+      const scale = Math.min(
+        containerW / (natW + padding * 2),
+        containerH / (natH + padding * 2),
+        maxScale
+      );
+      inner.style.transform = `scale(${scale})`;
+      inner.style.setProperty("--overlay-scale", String(scale));
+    }
+    const observer = new ResizeObserver(fit);
+    observer.observe(outer);
+    observer.observe(inner);
+    fit();
+    return () => observer.disconnect();
+  }, [padding, maxScale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_material2.Stack,
+    {
+      ref: outerRef,
+      sx: {
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        ...sx
+      },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_material2.Stack,
+        {
+          ref: innerRef,
+          sx: {
+            alignItems: "center",
+            transformOrigin: "center center",
+            flexShrink: 0,
+            width: "max-content"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/overlay/FixedSizeContent.tsx
+var import_material3 = require("@mui/material");
+var import_react10 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function FixedSizeContent({
+  children,
+  hideOnOverflow = true,
+  truncationPadding = 4,
+  sx,
+  ...rest
+}) {
+  const ref = (0, import_react10.useRef)(null);
+  const totalContentHeightRef = (0, import_react10.useRef)(0);
+  (0, import_react10.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    let clipAncestor = el.parentElement;
+    while (clipAncestor) {
+      if (getComputedStyle(clipAncestor).overflow === "hidden") break;
+      clipAncestor = clipAncestor.parentElement;
+    }
+    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") {
+          el.style.display = "none";
+        }
+        if (el.style.display !== "none") {
+          totalContentHeightRef.current = el.parentElement?.scrollHeight ?? 0;
+        }
+      });
+    }
+    const observer = new ResizeObserver(check);
+    observer.observe(ancestor);
+    check();
+    return () => observer.disconnect();
+  }, [hideOnOverflow, truncationPadding]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_material3.Stack,
+    {
+      ref,
+      sx: {
+        transform: "scale(calc(1 / var(--overlay-scale, 1)))",
+        transformOrigin: "center center",
+        flexShrink: 0,
+        width: "max-content",
+        overflow: "hidden",
+        "& > *": {
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        },
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
 }
 
 // src/index.ts
@@ -3122,6 +3271,9 @@ var import_fabric19 = require("fabric");
   FabricCanvas,
   FabricImage,
   FabricObject,
+  FixedSizeContent,
+  ObjectOverlay,
+  OverlayContent,
   Point,
   Polygon,
   Rect,
@@ -3167,7 +3319,6 @@ var import_fabric19 = require("fabric");
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
-  useObjectOverlay,
   useViewCanvas,
   util
 });