@bwp-web/canvas 0.7.1 → 0.8.1

package/dist/index.d.ts

@@ -17,6 +17,8 @@ export { OverlayContent } from './overlay';
 export type { OverlayContentProps } from './overlay';
 export { FixedSizeContent } from './overlay';
 export type { FixedSizeContentProps } from './overlay';
+export { OverlayBadge } from './overlay';
+export type { OverlayBadgeProps } from './overlay';
 export type { Point2D, ShapeStyleOptions, SnappingOptions, InteractionModeOptions, SnappableInteractionOptions, DragBounds, ModeSetup, CanvasJSON, } from './types';
 export type { ObjectDataType } from './fabricAugmentation';
 export { createRectangle, createRectangleAtPoint, editRectangle, } from './shapes';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAGvD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACtB,2BAA2B,EAC3B,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG3D,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEpE,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC7D,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAGpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhE,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,UAAU,EACV,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,EAC7B,uBAAuB,GACxB,MAAM,UAAU,CAAC;AAKlB,OAAO,EACL,MAAM,IAAI,YAAY,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -434,21 +434,26 @@ function setBackgroundContrast(canvas, value) {
   const contrastIdx = currentFilters.findIndex(
     (f) => f instanceof filters.Contrast
   );
+  let changed = false;
   if (contrast === 0) {
     if (contrastIdx >= 0) {
       bg.filters = currentFilters.filter(
         (f) => !(f instanceof filters.Contrast)
       );
       bg.applyFilters();
+      changed = true;
     }
   } else if (contrastIdx >= 0) {
     currentFilters[contrastIdx].contrast = contrast;
     bg.applyFilters();
+    changed = true;
   } else {
     bg.filters = [...currentFilters, new filters.Contrast({ contrast })];
     bg.applyFilters();
+    changed = true;
   }
   canvas.requestRenderAll();
+  if (changed) canvas.fire("background:modified");
 }
 function getBackgroundContrast(canvas) {
   const bg = getBackgroundImage(canvas);
@@ -463,14 +468,18 @@ function setBackgroundInverted(canvas, inverted) {
   if (!bg) return;
   const currentFilters = bg.filters ?? [];
   const hasInvert = currentFilters.some((f) => f instanceof filters.Invert);
+  let changed = false;
   if (inverted && !hasInvert) {
     bg.filters = [...currentFilters, new filters.Invert()];
     bg.applyFilters();
+    changed = true;
   } else if (!inverted && hasInvert) {
     bg.filters = currentFilters.filter((f) => !(f instanceof filters.Invert));
     bg.applyFilters();
+    changed = true;
   }
   canvas.requestRenderAll();
+  if (changed) canvas.fire("background:modified");
 }
 function getBackgroundInverted(canvas) {
   const bg = getBackgroundImage(canvas);
@@ -536,6 +545,7 @@ async function setBackgroundImage(canvas, url, options) {
     setBackgroundContrast(canvas, prevContrast);
   }
   canvas.requestRenderAll();
+  canvas.fire("background:modified");
   return img;
 }
 
@@ -2540,6 +2550,7 @@ function useEditCanvas(options) {
           canvas.on("object:added", () => setIsDirty(true));
           canvas.on("object:removed", () => setIsDirty(true));
           canvas.on("object:modified", () => setIsDirty(true));
+          canvas.on("background:modified", () => setIsDirty(true));
         }
         if (opts?.history) {
           const syncHistoryState = () => {
@@ -2553,6 +2564,7 @@ function useEditCanvas(options) {
           canvas.on("object:added", syncHistoryState);
           canvas.on("object:removed", syncHistoryState);
           canvas.on("object:modified", syncHistoryState);
+          canvas.on("background:modified", syncHistoryState);
         }
         if (opts?.vertexEdit !== false) {
           const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
@@ -2684,6 +2696,8 @@ function useEditCanvas(options) {
     isDirty,
     /** Reset the dirty flag (e.g., after a successful save). */
     resetDirty: useCallback(() => setIsDirty(false), []),
+    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
+    markDirty: useCallback(() => setIsDirty(true), []),
     /** Undo the last change. Requires `history: true`. */
     undo: useCallback(async () => {
       const h = historyRef.current;
@@ -2743,6 +2757,7 @@ function useViewCanvas(options) {
       canvas.on("object:added", () => {
         lockCanvas(canvas);
       });
+      canvas.hoverCursor = "pointer";
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
@@ -3034,7 +3049,6 @@ function ObjectOverlay({
         alignItems: "center",
         justifyContent: "center",
         zIndex: 1,
-        overflow: "hidden",
         ...sx
       },
       ...rest,
@@ -3175,6 +3189,7 @@ function FixedSizeContent({
         flexShrink: 0,
         width: "max-content",
         overflow: "hidden",
+        alignItems: "center",
         "& > *": {
           maxWidth: "100%",
           overflow: "hidden",
@@ -3188,6 +3203,125 @@ function FixedSizeContent({
   );
 }
 
+// src/overlay/OverlayBadge.tsx
+import { Stack as Stack4 } from "@mui/material";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function toPx(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v}px` : v;
+}
+function deriveAngle(top, right, bottom, left) {
+  const hasTop = top !== void 0;
+  const hasRight = right !== void 0;
+  const hasBottom = bottom !== void 0;
+  const hasLeft = left !== void 0;
+  if (hasTop && hasRight) return 45;
+  if (hasTop && hasLeft) return 135;
+  if (hasBottom && hasRight) return 315;
+  if (hasBottom && hasLeft) return 225;
+  if (hasTop) return 90;
+  if (hasRight) return 0;
+  if (hasBottom) return 270;
+  if (hasLeft) return 180;
+  return 45;
+}
+function ellipsePosition(angleDeg) {
+  const rad = angleDeg * Math.PI / 180;
+  return {
+    pctX: 50 + 50 * Math.cos(rad),
+    pctY: 50 - 50 * Math.sin(rad)
+  };
+}
+function toNum(v) {
+  return typeof v === "number" ? v : 0;
+}
+function OverlayBadge({
+  children,
+  maxScale = 2,
+  minScale = 0.75,
+  top,
+  right,
+  bottom,
+  left,
+  circular = false,
+  sx,
+  ...rest
+}) {
+  const ref = useRef10(null);
+  const baseSize = useRef10(null);
+  useEffect9(() => {
+    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;
+      });
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(ancestor);
+    update();
+    return () => {
+      observer.disconnect();
+      baseSize.current = null;
+    };
+  }, [maxScale, minScale, circular]);
+  const positionSx = circular ? (() => {
+    const angle = deriveAngle(top, right, bottom, left);
+    const { pctX, pctY } = ellipsePosition(angle);
+    const leftOffset = toNum(left) - toNum(right);
+    const topOffset = toNum(top) - toNum(bottom);
+    return {
+      left: `calc(${pctX}% + ${leftOffset}px)`,
+      top: `calc(${pctY}% + ${topOffset}px)`
+    };
+  })() : {
+    top: toPx(top),
+    right: toPx(right),
+    bottom: toPx(bottom),
+    left: toPx(left)
+  };
+  return /* @__PURE__ */ jsx5(
+    Stack4,
+    {
+      ref,
+      sx: {
+        position: "absolute",
+        ...positionSx,
+        transformOrigin: "center center",
+        pointerEvents: "auto",
+        width: "max-content",
+        height: "max-content",
+        flexShrink: 0,
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
 // src/index.ts
 import {
   Canvas as Canvas2,
@@ -3211,6 +3345,7 @@ export {
   FabricObject5 as FabricObject,
   FixedSizeContent,
   ObjectOverlay,
+  OverlayBadge,
   OverlayContent,
   Point9 as Point,
   Polygon5 as Polygon,