@bwp-web/canvas 0.8.0 → 0.8.2

package/dist/index.d.ts

@@ -11,6 +11,10 @@ export { useCanvasTooltip } from './hooks';
 export type { UseCanvasTooltipOptions, CanvasTooltipState } from './hooks';
 export { useCanvasClick } from './hooks';
 export type { UseCanvasClickOptions } from './hooks';
+export { EditCanvasProvider, useEditCanvasContext } from './context';
+export type { EditCanvasProviderProps, EditCanvasContextValue, } from './context';
+export { ViewCanvasProvider, useViewCanvasContext } from './context';
+export type { ViewCanvasProviderProps, ViewCanvasContextValue, } from './context';
 export { ObjectOverlay } from './overlay';
 export type { ObjectOverlayProps } from './overlay';
 export { OverlayContent } from './overlay';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"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;
 }
 
@@ -2116,7 +2126,8 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 // src/serialization.ts
 import {
   FabricImage as FabricImage2,
-  Rect as Rect5
+  Rect as Rect5,
+  filters as filters2
 } from "fabric";
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
 var borderRadiusBaseMap = /* @__PURE__ */ new WeakMap();
@@ -2309,6 +2320,10 @@ async function loadCanvas(canvas, json, options) {
       });
       bg.setCoords();
     }
+    if (bg.filters?.some((f) => f instanceof filters2.Invert)) {
+      bg.filters = bg.filters.filter((f) => !(f instanceof filters2.Invert));
+      bg.applyFilters();
+    }
   }
   if (options?.filter) {
     const toRemove = [];
@@ -2540,6 +2555,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 +2569,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 +2701,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 +2762,7 @@ function useViewCanvas(options) {
       canvas.on("object:added", () => {
         lockCanvas(canvas);
       });
+      canvas.hoverCursor = "pointer";
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
@@ -2976,11 +2996,53 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
+// src/context/EditCanvasContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var EditCanvasContext = createContext(null);
+function EditCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useEditCanvas(options);
+  return /* @__PURE__ */ jsx2(EditCanvasContext.Provider, { value: canvas, children });
+}
+function useEditCanvasContext() {
+  const ctx = useContext(EditCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasContext must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+
+// src/context/ViewCanvasContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ViewCanvasContext = createContext2(null);
+function ViewCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useViewCanvas(options);
+  return /* @__PURE__ */ jsx3(ViewCanvasContext.Provider, { value: canvas, children });
+}
+function useViewCanvasContext() {
+  const ctx = useContext2(ViewCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasContext must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+
 // src/overlay/ObjectOverlay.tsx
 import { useEffect as useEffect6, useRef as useRef7 } from "react";
 import { Stack } from "@mui/material";
 import { util as util4 } from "fabric";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function ObjectOverlay({
   canvasRef,
   object,
@@ -3024,7 +3086,7 @@ function ObjectOverlay({
     };
   }, [canvasRef, object]);
   if (!object) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     Stack,
     {
       ref: stackRef,
@@ -3045,7 +3107,7 @@ function ObjectOverlay({
 // src/overlay/OverlayContent.tsx
 import { Stack as Stack2 } from "@mui/material";
 import { useEffect as useEffect7, useRef as useRef8 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function OverlayContent({
   children,
   padding = 4,
@@ -3084,7 +3146,7 @@ function OverlayContent({
     fit();
     return () => observer.disconnect();
   }, [padding, maxScale]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Stack2,
     {
       ref: outerRef,
@@ -3097,7 +3159,7 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx5(
         Stack2,
         {
           ref: innerRef,
@@ -3117,7 +3179,7 @@ function OverlayContent({
 // src/overlay/FixedSizeContent.tsx
 import { Stack as Stack3 } from "@mui/material";
 import { useEffect as useEffect8, useRef as useRef9 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function FixedSizeContent({
   children,
   hideOnOverflow = true,
@@ -3164,7 +3226,7 @@ function FixedSizeContent({
     check();
     return () => observer.disconnect();
   }, [hideOnOverflow, truncationPadding]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     Stack3,
     {
       ref,
@@ -3191,11 +3253,36 @@ 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";
+import { jsx as jsx7 } 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,
@@ -3204,6 +3291,7 @@ function OverlayBadge({
   right,
   bottom,
   left,
+  circular = false,
   sx,
   ...rest
 }) {
@@ -3234,7 +3322,8 @@ function OverlayBadge({
         const overlayScale = parseFloat(
           getComputedStyle(el).getPropertyValue("--overlay-scale")
         ) || 1;
-        el.style.transform = `scale(${ownScale / overlayScale})`;
+        const scale = `scale(${ownScale / overlayScale})`;
+        el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
       });
     }
     const observer = new ResizeObserver(update);
@@ -3244,17 +3333,29 @@ function OverlayBadge({
       observer.disconnect();
       baseSize.current = null;
     };
-  }, [maxScale, minScale]);
-  return /* @__PURE__ */ jsx5(
+  }, [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__ */ jsx7(
     Stack4,
     {
       ref,
       sx: {
         position: "absolute",
-        top: toPx(top),
-        right: toPx(right),
-        bottom: toPx(bottom),
-        left: toPx(left),
+        ...positionSx,
         transformOrigin: "center center",
         pointerEvents: "auto",
         width: "max-content",
@@ -3286,6 +3387,7 @@ export {
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider,
   Canvas2 as FabricCanvas,
   FabricImage3 as FabricImage,
   FabricObject5 as FabricObject,
@@ -3296,6 +3398,7 @@ export {
   Point9 as Point,
   Polygon5 as Polygon,
   Rect6 as Rect,
+  ViewCanvasProvider,
   createCircle,
   createCircleAtPoint,
   createHistoryTracker,
@@ -3338,7 +3441,9 @@ export {
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
+  useEditCanvasContext,
   useViewCanvas,
+  useViewCanvasContext,
   util5 as util
 };
 //# sourceMappingURL=index.js.map