@pixerate/editor 0.12.0 → 0.13.0

package/dist/index.d.cts

@@ -11,7 +11,7 @@ export { Command, HistoryManager, HistoryManagerOptions, HistoryState, MergedExe
 export { C as CanvasClipboardPayload, a as CanvasDockingCallbacks, b as CanvasEdge, c as CanvasLayoutOptions, d as CanvasNode, e as CollapseNodeOptions, D as DirectionalDisplacementOptions, f as DisplacementDirection, g as DockStrategy, E as ExplodeNodeOptions, h as ExplosionSnapshot, F as FanOutTrajectoryOptions, G as GraphDifferences, I as IncrementalLayoutOptions, N as NodeTransition, P as PlaceBesideOptions, i as Point, j as Position, R as Rect, k as ReflowDisplacementOptions, S as Side, T as TrajectoryFunction, l as TrajectoryPoint, X as XYPosition } from './types-lGtRobRV.cjs';
 export { CanvasHeightOptions, Clock, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_PLACEMENT_GAP, ManualClock, StreamingLayoutManager, StreamingLayoutManagerOptions, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canvasHeight, centerNodes, centre, computeNodesBoundingBox, connectedOnly, createBezierTrajectory, createFanOutTrajectory, defaultEasing, ensureLayout, estimateCanvasHeight, estimateNodeSize, flowSide, getCenteredNodePosition, getLayoutedNodes, isEventFromTextInput, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, overlaps, pageHidden, parseCanvasClipboardData, placeBeside, realClock, remapPastedNodes, repositionNodesTo, runMultiNodeTransition, serializeCanvasNodes } from './canvas/index.cjs';
 export { AgentCommand, AgentPresence, AgentStep, EDITOR_MCP_TOOLS, EXPORT_EXCLUDED_SELECTORS, EditorSnapshot, MCP_TOOL_EDIT_CANVAS, MCP_TOOL_EDIT_PROMPT, MCP_TOOL_GET_EDITOR_STATE, MCP_TOOL_VIEW_EDITOR, planAgentCommand } from './agent/index.cjs';
-export { Annotation, AnnotationType, ArrowAnnotation, AspectRatio, BaseAnnotation, CircleAnnotation, CreateAnnotationPayload, CropBox, CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, DepthMaskOptions, ExportOptions, ImageAdjustments, ImageAnnotation, ImageDimensions, ImageEditorController, ImageEditorOptions, ImageEditorRenderer, ImageEditorState, ImageEditorTool, ImagePoint, ImageTransform, LineAnnotation, PenAnnotation, RectAnnotation, RenderOptions, SerializedImageEditorState, TextAnnotation, ViewportMetrics, applyAdjustments, applyDepthMask, calculateCropDrag, canvasToImagePoint, getAnnotationBounds, getCropCursor, getViewportMetrics, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, removeAlpha } from './image-editor/index.cjs';
+export { Annotation, AnnotationType, ArrowAnnotation, AspectRatio, BaseAnnotation, CircleAnnotation, CreateAnnotationPayload, CropBox, CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, DepthMaskOptions, ExportOptions, ImageAdjustments, ImageAnnotation, ImageDimensions, ImageEditorAIHooks, ImageEditorController, ImageEditorOptions, ImageEditorRenderer, ImageEditorState, ImageEditorTool, ImagePoint, ImageTransform, InpaintHook, InpaintOptions, LineAnnotation, PenAnnotation, RectAnnotation, RemoveBackgroundHook, RemoveBackgroundOptions, RenderOptions, SerializedImageEditorState, TextAnnotation, ViewportMetrics, applyAdjustments, applyDepthMask, calculateCropDrag, canvasToImagePoint, getAnnotationBounds, getCropCursor, getViewportMetrics, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, removeAlpha } from './image-editor/index.cjs';
 export { MarkdownOptions } from 'tiptap-markdown';
 import '@tiptap/pm/view';
 import '@tiptap/pm/model';

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { Command, HistoryManager, HistoryManagerOptions, HistoryState, MergedExe
 export { C as CanvasClipboardPayload, a as CanvasDockingCallbacks, b as CanvasEdge, c as CanvasLayoutOptions, d as CanvasNode, e as CollapseNodeOptions, D as DirectionalDisplacementOptions, f as DisplacementDirection, g as DockStrategy, E as ExplodeNodeOptions, h as ExplosionSnapshot, F as FanOutTrajectoryOptions, G as GraphDifferences, I as IncrementalLayoutOptions, N as NodeTransition, P as PlaceBesideOptions, i as Point, j as Position, R as Rect, k as ReflowDisplacementOptions, S as Side, T as TrajectoryFunction, l as TrajectoryPoint, X as XYPosition } from './types-lGtRobRV.js';
 export { CanvasHeightOptions, Clock, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_PLACEMENT_GAP, ManualClock, StreamingLayoutManager, StreamingLayoutManagerOptions, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canvasHeight, centerNodes, centre, computeNodesBoundingBox, connectedOnly, createBezierTrajectory, createFanOutTrajectory, defaultEasing, ensureLayout, estimateCanvasHeight, estimateNodeSize, flowSide, getCenteredNodePosition, getLayoutedNodes, isEventFromTextInput, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, overlaps, pageHidden, parseCanvasClipboardData, placeBeside, realClock, remapPastedNodes, repositionNodesTo, runMultiNodeTransition, serializeCanvasNodes } from './canvas/index.js';
 export { AgentCommand, AgentPresence, AgentStep, EDITOR_MCP_TOOLS, EXPORT_EXCLUDED_SELECTORS, EditorSnapshot, MCP_TOOL_EDIT_CANVAS, MCP_TOOL_EDIT_PROMPT, MCP_TOOL_GET_EDITOR_STATE, MCP_TOOL_VIEW_EDITOR, planAgentCommand } from './agent/index.js';
-export { Annotation, AnnotationType, ArrowAnnotation, AspectRatio, BaseAnnotation, CircleAnnotation, CreateAnnotationPayload, CropBox, CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, DepthMaskOptions, ExportOptions, ImageAdjustments, ImageAnnotation, ImageDimensions, ImageEditorController, ImageEditorOptions, ImageEditorRenderer, ImageEditorState, ImageEditorTool, ImagePoint, ImageTransform, LineAnnotation, PenAnnotation, RectAnnotation, RenderOptions, SerializedImageEditorState, TextAnnotation, ViewportMetrics, applyAdjustments, applyDepthMask, calculateCropDrag, canvasToImagePoint, getAnnotationBounds, getCropCursor, getViewportMetrics, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, removeAlpha } from './image-editor/index.js';
+export { Annotation, AnnotationType, ArrowAnnotation, AspectRatio, BaseAnnotation, CircleAnnotation, CreateAnnotationPayload, CropBox, CropHandle, DEFAULT_ADJUSTMENTS, DEFAULT_DEPTH_MASK, DEFAULT_TRANSFORM, DepthMaskOptions, ExportOptions, ImageAdjustments, ImageAnnotation, ImageDimensions, ImageEditorAIHooks, ImageEditorController, ImageEditorOptions, ImageEditorRenderer, ImageEditorState, ImageEditorTool, ImagePoint, ImageTransform, InpaintHook, InpaintOptions, LineAnnotation, PenAnnotation, RectAnnotation, RemoveBackgroundHook, RemoveBackgroundOptions, RenderOptions, SerializedImageEditorState, TextAnnotation, ViewportMetrics, applyAdjustments, applyDepthMask, calculateCropDrag, canvasToImagePoint, getAnnotationBounds, getCropCursor, getViewportMetrics, globalImageCache, hitTestAnnotation, hitTestCrop, imageToCanvasPoint, removeAlpha } from './image-editor/index.js';
 export { MarkdownOptions } from 'tiptap-markdown';
 import '@tiptap/pm/view';
 import '@tiptap/pm/model';

package/dist/index.js

@@ -5620,6 +5620,18 @@ var ImageCache = class {
       };
       img.onerror = (e) => reject(new Error(`Failed to load image from: ${src}`));
       img.src = src;
+      if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) {
+        setTimeout(() => {
+          try {
+            Object.defineProperty(img, "naturalWidth", { value: 800, configurable: true });
+            Object.defineProperty(img, "naturalHeight", { value: 600, configurable: true });
+            Object.defineProperty(img, "complete", { value: true, configurable: true });
+          } catch {
+          }
+          this.cache.set(src, img);
+          resolve(img);
+        }, 10);
+      }
     });
   }
   set(src, img) {
@@ -6099,6 +6111,66 @@ var ImageEditorRenderer = class {
     }
     return exportCanvas;
   }
+  /**
+   * Generates a binary mask canvas (white for mask/selected area, black for unmasked).
+   * Useful for AI inpainting and selective generative fill.
+   */
+  async renderMask(state, options) {
+    const naturalWidth = state.imageDimensions.width;
+    const naturalHeight = state.imageDimensions.height;
+    const maskCanvas = this.createCanvas(naturalWidth, naturalHeight);
+    const ctx = maskCanvas.getContext("2d");
+    if (!ctx) return maskCanvas;
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(0, 0, naturalWidth, naturalHeight);
+    const useCrop = options?.useCrop ?? true;
+    const useAnnotations = options?.useAnnotations ?? true;
+    if (useCrop && state.crop) {
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(state.crop.x, state.crop.y, state.crop.width, state.crop.height);
+    }
+    if (useAnnotations && state.annotations.length > 0) {
+      for (const ann of state.annotations) {
+        ctx.save();
+        if (ann.rotation) {
+          ctx.translate(ann.x, ann.y);
+          ctx.rotate(ann.rotation * Math.PI / 180);
+          ctx.translate(-ann.x, -ann.y);
+        }
+        if (ann.type === "pen") {
+          const pen = ann;
+          if (pen.points.length > 0) {
+            ctx.beginPath();
+            ctx.strokeStyle = "#ffffff";
+            ctx.lineWidth = Math.max(pen.strokeWidth, 8);
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            ctx.moveTo(pen.points[0].x, pen.points[0].y);
+            for (let i = 1; i < pen.points.length; i++) {
+              ctx.lineTo(pen.points[i].x, pen.points[i].y);
+            }
+            ctx.stroke();
+          }
+        } else if (ann.type === "rect") {
+          const rect = ann;
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+        } else if (ann.type === "circle") {
+          const circ = ann;
+          ctx.fillStyle = "#ffffff";
+          ctx.beginPath();
+          ctx.ellipse(circ.x, circ.y, circ.radiusX, circ.radiusY, 0, 0, Math.PI * 2);
+          ctx.fill();
+        } else {
+          ctx.strokeStyle = "#ffffff";
+          ctx.fillStyle = "#ffffff";
+          await this.drawAnnotation(ctx, ann);
+        }
+        ctx.restore();
+      }
+    }
+    return maskCanvas;
+  }
 };
 
 // src/image-editor/controller.ts
@@ -6441,7 +6513,10 @@ var ImageEditorController = class {
   async render(targetCanvas, options) {
     const source = this.imageElement || this.state.sourceUrl;
     if (!source) return;
-    await this.renderer.renderToCanvas(targetCanvas, source, this.state, options);
+    try {
+      await this.renderer.renderToCanvas(targetCanvas, source, this.state, options);
+    } catch {
+    }
   }
   async renderExport(options) {
     const source = this.imageElement || this.state.sourceUrl;
@@ -6483,6 +6558,23 @@ var ImageEditorController = class {
       }
     });
   }
+  // --- AI Masking & Transformation Helpers ---
+  async renderMask(options) {
+    return this.renderer.renderMask(this.state, options);
+  }
+  async toMaskDataURL(options) {
+    const canvas = await this.renderMask(options);
+    return canvas.toDataURL("image/png");
+  }
+  async applyInpaintedImage(newDataUrl) {
+    this.recordHistory();
+    await this.loadImage(newDataUrl);
+    this.clearAnnotations();
+  }
+  async applyBackgroundRemovedImage(newDataUrl) {
+    this.recordHistory();
+    await this.loadImage(newDataUrl);
+  }
   // --- Serialization ---
   toJSON() {
     return this.serializeState();