@bwp-web/canvas 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -32,6 +32,7 @@ __export(index_exports, {
   FabricObject: () => import_fabric19.FabricObject,
   FixedSizeContent: () => FixedSizeContent,
   ObjectOverlay: () => ObjectOverlay,
+  OverlayBadge: () => OverlayBadge,
   OverlayContent: () => OverlayContent,
   Point: () => import_fabric19.Point,
   Polygon: () => import_fabric19.Polygon,
@@ -3103,7 +3104,6 @@ function ObjectOverlay({
         alignItems: "center",
         justifyContent: "center",
         zIndex: 1,
-        overflow: "hidden",
         ...sx
       },
       ...rest,
@@ -3172,6 +3172,7 @@ function OverlayContent({
         {
           ref: innerRef,
           sx: {
+            alignItems: "center",
             transformOrigin: "center center",
             flexShrink: 0,
             width: "max-content"
@@ -3243,6 +3244,7 @@ function FixedSizeContent({
         flexShrink: 0,
         width: "max-content",
         overflow: "hidden",
+        alignItems: "center",
         "& > *": {
           maxWidth: "100%",
           overflow: "hidden",
@@ -3256,6 +3258,86 @@ function FixedSizeContent({
   );
 }
 
+// src/overlay/OverlayBadge.tsx
+var import_material4 = require("@mui/material");
+var import_react11 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function toPx(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v}px` : v;
+}
+function OverlayBadge({
+  children,
+  maxScale = 2,
+  minScale = 0.75,
+  top,
+  right,
+  bottom,
+  left,
+  sx,
+  ...rest
+}) {
+  const ref = (0, import_react11.useRef)(null);
+  const baseSize = (0, import_react11.useRef)(null);
+  (0, import_react11.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;
+        el.style.transform = `scale(${ownScale / overlayScale})`;
+      });
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(ancestor);
+    update();
+    return () => {
+      observer.disconnect();
+      baseSize.current = null;
+    };
+  }, [maxScale, minScale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_material4.Stack,
+    {
+      ref,
+      sx: {
+        position: "absolute",
+        top: toPx(top),
+        right: toPx(right),
+        bottom: toPx(bottom),
+        left: toPx(left),
+        transformOrigin: "center center",
+        pointerEvents: "auto",
+        width: "max-content",
+        height: "max-content",
+        flexShrink: 0,
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
 // src/index.ts
 var import_fabric19 = require("fabric");
 // Annotate the CommonJS export names for ESM import in node:
@@ -3272,6 +3354,7 @@ var import_fabric19 = require("fabric");
   FabricObject,
   FixedSizeContent,
   ObjectOverlay,
+  OverlayBadge,
   OverlayContent,
   Point,
   Polygon,