@pixerate/editor-svelte 0.112.0 → 0.114.0

package/dist/canvas/createCanvasDocument.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type CanvasEdge, type CanvasEdgeLike, type CanvasEditorDocument, type CanvasEditorDocumentOptions, type CanvasNode } from '@pixerate/editor/canvas';
+import type { EditorDocument } from '@pixerate/editor/persistence';
+export type CreateCanvasDocumentOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdgeLike = CanvasEdge> = Omit<CanvasEditorDocumentOptions<TNode, TEdge>, 'subscribe'>;
+/**
+ * Svelte 5 rune: the save / load / undo contract (kind `canvas`) for nodes and edges held in
+ * `$state`, for `createEditorAutosave` or `createDocumentToolProvider`. Reads `getNodes()` /
+ * `getEdges()` reactively, so changes the history does not see (a finished drag, an edge
+ * removed by Svelte Flow) count too; selection, measuring and drag frames do not. Parity with
+ * React's `useCanvasEditorDocument`. Call `destroy()` when done.
+ */
+export declare function createCanvasDocument<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdgeLike = CanvasEdge>(options: CreateCanvasDocumentOptions<TNode, TEdge>): EditorDocument<CanvasEditorDocument<TNode, TEdge>>;

package/dist/canvas/createCanvasDocument.svelte.js

@@ -0,0 +1,42 @@
+import { createCanvasEditorDocument } from '@pixerate/editor/canvas';
+const contentKey = (nodes, edges) => JSON.stringify([
+    nodes.map(({ selected: _s, dragging: _d, measured: _m, resizing: _r, ...rest }) => rest),
+    edges.map(({ selected: _s, ...rest }) => rest)
+]);
+/**
+ * Svelte 5 rune: the save / load / undo contract (kind `canvas`) for nodes and edges held in
+ * `$state`, for `createEditorAutosave` or `createDocumentToolProvider`. Reads `getNodes()` /
+ * `getEdges()` reactively, so changes the history does not see (a finished drag, an edge
+ * removed by Svelte Flow) count too; selection, measuring and drag frames do not. Parity with
+ * React's `useCanvasEditorDocument`. Call `destroy()` when done.
+ */
+export function createCanvasDocument(options) {
+    const listeners = new Set();
+    const doc = createCanvasEditorDocument({
+        ...options,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        }
+    });
+    let lastKey = null;
+    const stop = $effect.root(() => {
+        $effect(() => {
+            const nodes = options.getNodes();
+            const edges = options.getEdges();
+            if (nodes.some((n) => n.dragging))
+                return;
+            const key = contentKey(nodes, edges);
+            if (lastKey !== null && key !== lastKey)
+                listeners.forEach((listener) => listener());
+            lastKey = key;
+        });
+    });
+    return {
+        ...doc,
+        destroy() {
+            stop();
+            doc.destroy();
+        }
+    };
+}

package/dist/canvas/index.d.ts

@@ -18,6 +18,7 @@ export { createStreamingCanvas, type CreateStreamingCanvasOptions } from './crea
 export { createCanvasArrange, createCanvasArrangeShortcuts, type CanvasArrange, type CreateCanvasArrangeOptions, type CanvasArrangeShortcutsOptions } from './createCanvasArrange.svelte.js';
 export { createCanvasScenes, type CanvasScenes, type CreateCanvasScenesOptions } from './createCanvasScenes.svelte.js';
 export { createCanvasCapture, type CreateCanvasCaptureOptions } from './createCanvasCapture.js';
+export { createCanvasDocument, type CreateCanvasDocumentOptions } from './createCanvasDocument.svelte.js';
 export { createCanvasPlaybackSurface, type CreateCanvasPlaybackSurfaceOptions } from './createCanvasPlaybackSurface.svelte.js';
 export { default as PresenceLayer } from '../playback/PresenceLayer.svelte';
 export { default as CanvasGuidesLayer } from './CanvasGuidesLayer.svelte';

package/dist/canvas/index.js

@@ -36,6 +36,7 @@ export { createStreamingCanvas } from './createStreamingCanvas.svelte.js';
 export { createCanvasArrange, createCanvasArrangeShortcuts } from './createCanvasArrange.svelte.js';
 export { createCanvasScenes } from './createCanvasScenes.svelte.js';
 export { createCanvasCapture } from './createCanvasCapture.js';
+export { createCanvasDocument } from './createCanvasDocument.svelte.js';
 export { createCanvasPlaybackSurface } from './createCanvasPlaybackSurface.svelte.js';
 export { default as PresenceLayer } from '../playback/PresenceLayer.svelte';
 export { default as CanvasGuidesLayer } from './CanvasGuidesLayer.svelte';

package/dist/image-editor/imageEditorState.svelte.d.ts

@@ -2,6 +2,7 @@ import type { ToolRegistry } from '@pixerate/editor/tools';
 import { ImageEditorController, type ImageEffectsToolProviderOptions, type ImageEditorFit, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type AIResultOptions, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
 export declare function createReactiveImageEditor(options?: ImageEditorOptions): {
     readonly controller: ImageEditorController;
+    editorDocument: import("@pixerate/editor/persistence").EditorDocument<SerializedImageEditorState>;
     readonly state: ImageEditorState;
     readonly canUndo: boolean;
     /** Histogram of the last rendered preview (after adjustments and layers); null before a render. */

package/dist/image-editor/imageEditorState.svelte.js

@@ -1,4 +1,4 @@
-import { ImageEditorController, createImageEffectsToolProvider, } from '@pixerate/editor/image-editor';
+import { ImageEditorController, createImageEditorDocument, createImageEffectsToolProvider, } from '@pixerate/editor/image-editor';
 export function createReactiveImageEditor(options = {}) {
     const controller = new ImageEditorController(options);
     let state = $state(controller.getState());
@@ -11,10 +11,13 @@ export function createReactiveImageEditor(options = {}) {
     const unsubscribeHistogram = controller.subscribeHistogram((h) => {
         histogram = h;
     });
+    /** The save / load / undo contract, with layer pixels as asset references. */
+    const editorDocument = createImageEditorDocument(controller);
     return {
         get controller() {
             return controller;
         },
+        editorDocument,
         get state() {
             return state;
         },
@@ -168,6 +171,7 @@ export function createReactiveImageEditor(options = {}) {
         destroy() {
             unsubscribe();
             unsubscribeHistogram();
+            editorDocument.destroy();
         },
     };
 }

package/dist/paint-editor/paintEditorRune.svelte.d.ts

@@ -8,6 +8,7 @@ import type { ToolRegistry } from '@pixerate/editor/tools';
 export declare function createReactivePaintEditor(options?: PaintEditorOptions | PaintEditorController): {
     readonly controller: PaintEditorController;
     readonly state: PaintEditorState;
+    editorDocument: import("@pixerate/editor/persistence").EditorDocument<import("@pixerate/editor/paint-editor").SerializedPaintDocument>;
     destroy(): void;
 };
 /** The controller's state as a rune, for components (subscribe in an effect, see GOTCHAS). */

package/dist/paint-editor/paintEditorRune.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from 'svelte';
-import { createPaintEffectsToolProvider, PaintDirector, PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
+import { createPaintEditorDocument, createPaintEffectsToolProvider, PaintDirector, PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
 /**
  * A `PaintEditorController` (created from `options`, or the one given) with its state as a
  * rune: `editor.state` updates after every change. Call `destroy()` to unsubscribe.
@@ -10,6 +10,8 @@ export function createReactivePaintEditor(options = {}) {
     const unsubscribe = controller.subscribe(() => {
         snapshot = controller.getState();
     });
+    /** The save / load / undo contract, with every image as an asset reference. */
+    const editorDocument = createPaintEditorDocument(controller);
     return {
         get controller() {
             return controller;
@@ -17,8 +19,10 @@ export function createReactivePaintEditor(options = {}) {
         get state() {
             return snapshot;
         },
+        editorDocument,
         destroy() {
             unsubscribe();
+            editorDocument.destroy();
         },
     };
 }

package/dist/persistence/editorAutosave.svelte.js

@@ -1,4 +1,4 @@
-import { parseEditorDocument, toEditorDocumentFile, } from "@pixerate/editor/persistence";
+import { parseEditorDocument, toEditorDocumentFile, withEditorAssets, } from "@pixerate/editor/persistence";
 import { createAutosave } from "./autosave.svelte.js";
 /**
  * `createAutosave` for any editor's `EditorDocument` (e.g.
@@ -9,6 +9,8 @@ import { createAutosave } from "./autosave.svelte.js";
 export function createEditorAutosave(doc, options) {
     const autosave = createAutosave({
         ...options,
+        // Image and paint documents hold asset references: their bytes are saved and read with them.
+        storage: doc.assets ? withEditorAssets(options.storage, doc.assets) : options.storage,
         key: options.key ?? doc.kind,
         getSnapshot: () => toEditorDocumentFile(doc),
         deserialize: (text) => parseEditorDocument(text, { kind: doc.kind }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.112.0",
+  "version": "0.114.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -160,7 +160,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.153.0"
+    "@pixerate/editor": "0.155.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",