@pixerate/editor-react 0.87.0 → 0.89.0

package/dist/canvas/index.cjs

@@ -97,6 +97,7 @@ __export(canvas_exports, {
   blendLayout: () => import_canvas30.blendLayout,
   boundsOf: () => import_canvas30.boundsOf,
   brushstrokeScaleBucket: () => import_canvas34.brushstrokeScaleBucket,
+  brushstrokeSeed: () => import_canvas34.brushstrokeSeed,
   calculateDagreReflowDisplacement: () => import_canvas30.calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement: () => import_canvas30.calculateDirectionalDisplacement,
   canCombineShapeNodes: () => import_canvas28.canCombineShapeNodes,
@@ -301,6 +302,7 @@ __export(canvas_exports, {
   removeTrack: () => import_canvas33.removeTrack,
   renameCanvasVariantProperty: () => import_canvas34.renameCanvasVariantProperty,
   renameCanvasVariantValue: () => import_canvas34.renameCanvasVariantValue,
+  renderCanvasBrushSwatch: () => import_canvas34.renderCanvasBrushSwatch,
   renderShapeBrushstroke: () => import_canvas34.renderShapeBrushstroke,
   reorderNodes: () => import_canvas27.reorderNodes,
   repositionNodesTo: () => import_canvas30.repositionNodesTo,
@@ -1660,13 +1662,16 @@ function ShapeNodeZoomProvider({ zoom, children }) {
   const bucket = (0, import_canvas12.brushstrokeScaleBucket)(zoom);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShapeNodeZoomContext.Provider, { value: bucket, children });
 }
-function useShapeBrushstroke(shape, width, height) {
+function useShapeBrushstroke(shape, width, height, position) {
   const zoom = (0, import_react14.useContext)(ShapeNodeZoomContext);
   const brushed = (0, import_canvas12.isBrushedShape)(shape) ? shape : null;
   const vb = brushed?.viewBox;
   const nodeScale = vb && width && height && vb[2] > 0 && vb[3] > 0 ? Math.max(width / vb[2], height / vb[3]) : 1;
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   const scale = (0, import_canvas12.brushstrokeScaleBucket)(zoom * nodeScale, dpr);
+  const unit = vb && width && vb[2] > 0 ? width / vb[2] : 1;
+  const ox = Math.round((position?.x ?? 0) - (vb?.[0] ?? 0) * unit);
+  const oy = Math.round((position?.y ?? 0) - (vb?.[1] ?? 0) * unit);
   const [image, setImage] = (0, import_react14.useState)(null);
   (0, import_react14.useEffect)(() => {
     if (!brushed) {
@@ -1674,7 +1679,7 @@ function useShapeBrushstroke(shape, width, height) {
       return;
     }
     let live = true;
-    (0, import_canvas12.renderShapeBrushstroke)(brushed, { scale }).then(
+    (0, import_canvas12.renderShapeBrushstroke)(brushed, { scale, origin: { x: ox, y: oy }, unit }).then(
       (img) => live && setImage(img),
       (error) => {
         if (!live) return;
@@ -1685,21 +1690,23 @@ function useShapeBrushstroke(shape, width, height) {
     return () => {
       live = false;
     };
-  }, [brushed, scale]);
+  }, [brushed, scale, ox, oy, unit]);
   return image;
 }
-function useCanvasBrushes() {
+function useCanvasBrushes(options = {}) {
   const [state, setState] = (0, import_react14.useState)({ brushes: [], loading: true, error: null });
+  const swatches = options.swatches ? JSON.stringify(options.swatches) : "";
   (0, import_react14.useEffect)(() => {
     let live = true;
-    (0, import_canvas12.listCanvasBrushes)().then(
+    const opts = swatches ? JSON.parse(swatches) : null;
+    (0, import_canvas12.listCanvasBrushes)().then(async (list) => opts ? Promise.all(list.map(async (b) => ({ ...b, swatch: await (0, import_canvas12.renderCanvasBrushSwatch)(b.id, opts) }))) : list).then(
       (brushes) => live && setState({ brushes, loading: false, error: null }),
       (error) => live && setState({ brushes: [], loading: false, error: error instanceof Error ? error.message : String(error) })
     );
     return () => {
       live = false;
     };
-  }, []);
+  }, [swatches]);
   return (0, import_react14.useMemo)(() => state, [state]);
 }
 
@@ -2399,9 +2406,9 @@ function CanvasEffectsPanel({ controller, nodeId, shape, sceneId, className = ""
 
 // src/canvas/ShapeNode.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function ShapeNode({ id, data, width, height, selected, className = "", children }) {
+function ShapeNode({ id, data, width, height, selected, className = "", children, positionAbsoluteX, positionAbsoluteY }) {
   const shape = data?.shape;
-  const brushImage = useShapeBrushstroke((0, import_canvas14.isShapeDescription)(shape) ? shape : null, width, height);
+  const brushImage = useShapeBrushstroke((0, import_canvas14.isShapeDescription)(shape) ? shape : null, width, height, { x: positionAbsoluteX ?? 0, y: positionAbsoluteY ?? 0 });
   if (!(0, import_canvas14.isShapeDescription)(shape)) return null;
   const render = (0, import_canvas14.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -3758,6 +3765,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   blendLayout,
   boundsOf,
   brushstrokeScaleBucket,
+  brushstrokeSeed,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement,
   canCombineShapeNodes,
@@ -3962,6 +3970,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   removeTrack,
   renameCanvasVariantProperty,
   renameCanvasVariantValue,
+  renderCanvasBrushSwatch,
   renderShapeBrushstroke,
   reorderNodes,
   repositionNodesTo,