@bwp-web/canvas 0.8.1 → 0.8.2

package/dist/context/EditCanvasContext.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { useEditCanvas, type UseEditCanvasOptions } from '../hooks/useEditCanvas';
+/** The full return value of {@link useEditCanvas}, exposed via context. */
+export type EditCanvasContextValue = ReturnType<typeof useEditCanvas>;
+export interface EditCanvasProviderProps {
+    /** Options forwarded to the underlying {@link useEditCanvas} hook. */
+    options?: UseEditCanvasOptions;
+    children: ReactNode;
+}
+/**
+ * Calls {@link useEditCanvas} internally and provides the full canvas API
+ * to all descendants via React context.
+ *
+ * Use {@link useEditCanvasContext} in any descendant to access `canvasRef`,
+ * `isDirty`, `viewport`, `setMode`, `setBackground`, and every other value
+ * that `useEditCanvas` returns — without prop drilling or bridge contexts.
+ *
+ * @example
+ * ```tsx
+ * <EditCanvasProvider options={{ trackChanges: true, history: true }}>
+ *   <MyCanvas />
+ *   <MySidebar />
+ *   <MyToolbar />
+ * </EditCanvasProvider>
+ *
+ * function MyCanvas() {
+ *   const { onReady } = useEditCanvasContext();
+ *   return <Canvas onReady={onReady} />;
+ * }
+ *
+ * function MySidebar() {
+ *   const { isDirty, resetDirty } = useEditCanvasContext();
+ *   return <SaveButton disabled={!isDirty} onClick={() => { save(); resetDirty(); }} />;
+ * }
+ * ```
+ */
+export declare function EditCanvasProvider({ options, children, }: EditCanvasProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the full {@link useEditCanvas} API from any descendant of
+ * {@link EditCanvasProvider}.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useEditCanvasContext(): EditCanvasContextValue;
+//# sourceMappingURL=EditCanvasContext.d.ts.map

package/dist/context/EditCanvasContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/EditCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAItE,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAOzB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D"}

package/dist/context/ViewCanvasContext.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import { useViewCanvas, type UseViewCanvasOptions } from '../hooks/useViewCanvas';
+/** The full return value of {@link useViewCanvas}, exposed via context. */
+export type ViewCanvasContextValue = ReturnType<typeof useViewCanvas>;
+export interface ViewCanvasProviderProps {
+    /** Options forwarded to the underlying {@link useViewCanvas} hook. */
+    options?: UseViewCanvasOptions;
+    children: ReactNode;
+}
+/**
+ * Calls {@link useViewCanvas} internally and provides the full canvas API
+ * to all descendants via React context.
+ *
+ * Use {@link useViewCanvasContext} in any descendant to access `canvasRef`,
+ * `viewport`, `setObjectStyle`, and every other value that `useViewCanvas`
+ * returns — without prop drilling or bridge contexts.
+ *
+ * @example
+ * ```tsx
+ * <ViewCanvasProvider options={{ scaledStrokes: true }}>
+ *   <MyCanvas />
+ *   <MyToolbar />
+ * </ViewCanvasProvider>
+ *
+ * function MyCanvas() {
+ *   const { onReady } = useViewCanvasContext();
+ *   return <Canvas onReady={onReady} />;
+ * }
+ *
+ * function MyToolbar() {
+ *   const { viewport } = useViewCanvasContext();
+ *   return <ZoomControls onZoomIn={viewport.zoomIn} onZoomOut={viewport.zoomOut} />;
+ * }
+ * ```
+ */
+export declare function ViewCanvasProvider({ options, children, }: ViewCanvasProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the full {@link useViewCanvas} API from any descendant of
+ * {@link ViewCanvasProvider}.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useViewCanvasContext(): ViewCanvasContextValue;
+//# sourceMappingURL=ViewCanvasContext.d.ts.map

package/dist/context/ViewCanvasContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/ViewCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAItE,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAOzB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D"}

package/dist/context/index.d.ts

@@ -0,0 +1,5 @@
+export { EditCanvasProvider, useEditCanvasContext } from './EditCanvasContext';
+export type { EditCanvasProviderProps, EditCanvasContextValue, } from './EditCanvasContext';
+export { ViewCanvasProvider, useViewCanvasContext } from './ViewCanvasContext';
+export type { ViewCanvasProviderProps, ViewCanvasContextValue, } from './ViewCanvasContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC"}

package/dist/index.cjs

@@ -27,6 +27,7 @@ __export(index_exports, {
   DEFAULT_DRAG_SHAPE_STYLE: () => DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE: () => DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE: () => DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider: () => EditCanvasProvider,
   FabricCanvas: () => import_fabric19.Canvas,
   FabricImage: () => import_fabric19.FabricImage,
   FabricObject: () => import_fabric19.FabricObject,
@@ -37,6 +38,7 @@ __export(index_exports, {
   Point: () => import_fabric19.Point,
   Polygon: () => import_fabric19.Polygon,
   Rect: () => import_fabric19.Rect,
+  ViewCanvasProvider: () => ViewCanvasProvider,
   createCircle: () => createCircle,
   createCircleAtPoint: () => createCircleAtPoint,
   createHistoryTracker: () => createHistoryTracker,
@@ -79,7 +81,9 @@ __export(index_exports, {
   useCanvasEvents: () => useCanvasEvents,
   useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
+  useEditCanvasContext: () => useEditCanvasContext,
   useViewCanvas: () => useViewCanvas,
+  useViewCanvasContext: () => useViewCanvasContext,
   util: () => import_fabric19.util
 });
 module.exports = __toCommonJS(index_exports);
@@ -2389,6 +2393,10 @@ async function loadCanvas(canvas, json, options) {
       });
       bg.setCoords();
     }
+    if (bg.filters?.some((f) => f instanceof import_fabric16.filters.Invert)) {
+      bg.filters = bg.filters.filter((f) => !(f instanceof import_fabric16.filters.Invert));
+      bg.applyFilters();
+    }
   }
   if (options?.filter) {
     const toRemove = [];
@@ -3061,11 +3069,53 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
-// src/overlay/ObjectOverlay.tsx
+// src/context/EditCanvasContext.tsx
 var import_react8 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var EditCanvasContext = (0, import_react8.createContext)(null);
+function EditCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useEditCanvas(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditCanvasContext.Provider, { value: canvas, children });
+}
+function useEditCanvasContext() {
+  const ctx = (0, import_react8.useContext)(EditCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasContext must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+
+// src/context/ViewCanvasContext.tsx
+var import_react9 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ViewCanvasContext = (0, import_react9.createContext)(null);
+function ViewCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useViewCanvas(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewCanvasContext.Provider, { value: canvas, children });
+}
+function useViewCanvasContext() {
+  const ctx = (0, import_react9.useContext)(ViewCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasContext must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+
+// src/overlay/ObjectOverlay.tsx
+var import_react10 = require("react");
 var import_material = require("@mui/material");
 var import_fabric18 = require("fabric");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ObjectOverlay({
   canvasRef,
   object,
@@ -3073,8 +3123,8 @@ function ObjectOverlay({
   children,
   ...rest
 }) {
-  const stackRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const stackRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas || !object) return;
     function update() {
@@ -3109,7 +3159,7 @@ function ObjectOverlay({
     };
   }, [canvasRef, object]);
   if (!object) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_material.Stack,
     {
       ref: stackRef,
@@ -3129,8 +3179,8 @@ function ObjectOverlay({
 
 // src/overlay/OverlayContent.tsx
 var import_material2 = require("@mui/material");
-var import_react9 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function OverlayContent({
   children,
   padding = 4,
@@ -3138,9 +3188,9 @@ function OverlayContent({
   sx,
   ...rest
 }) {
-  const outerRef = (0, import_react9.useRef)(null);
-  const innerRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const outerRef = (0, import_react11.useRef)(null);
+  const innerRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
@@ -3169,7 +3219,7 @@ function OverlayContent({
     fit();
     return () => observer.disconnect();
   }, [padding, maxScale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_material2.Stack,
     {
       ref: outerRef,
@@ -3182,7 +3232,7 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_material2.Stack,
         {
           ref: innerRef,
@@ -3201,8 +3251,8 @@ function OverlayContent({
 
 // src/overlay/FixedSizeContent.tsx
 var import_material3 = require("@mui/material");
-var import_react10 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function FixedSizeContent({
   children,
   hideOnOverflow = true,
@@ -3210,9 +3260,9 @@ function FixedSizeContent({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react10.useRef)(null);
-  const totalContentHeightRef = (0, import_react10.useRef)(0);
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react12.useRef)(null);
+  const totalContentHeightRef = (0, import_react12.useRef)(0);
+  (0, import_react12.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3249,7 +3299,7 @@ function FixedSizeContent({
     check();
     return () => observer.disconnect();
   }, [hideOnOverflow, truncationPadding]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_material3.Stack,
     {
       ref,
@@ -3275,8 +3325,8 @@ 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");
+var import_react13 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function toPx(v) {
   if (v === void 0) return void 0;
   return typeof v === "number" ? `${v}px` : v;
@@ -3318,9 +3368,9 @@ function OverlayBadge({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react11.useRef)(null);
-  const baseSize = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  const baseSize = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
@@ -3372,7 +3422,7 @@ function OverlayBadge({
     bottom: toPx(bottom),
     left: toPx(left)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_material4.Stack,
     {
       ref,
@@ -3403,6 +3453,7 @@ var import_fabric19 = require("fabric");
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider,
   FabricCanvas,
   FabricImage,
   FabricObject,
@@ -3413,6 +3464,7 @@ var import_fabric19 = require("fabric");
   Point,
   Polygon,
   Rect,
+  ViewCanvasProvider,
   createCircle,
   createCircleAtPoint,
   createHistoryTracker,
@@ -3455,7 +3507,9 @@ var import_fabric19 = require("fabric");
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
+  useEditCanvasContext,
   useViewCanvas,
+  useViewCanvasContext,
   util
 });
 //# sourceMappingURL=index.cjs.map