@rollstack/rscanvas 0.1.0 → 0.1.1

package/README.md

@@ -23,6 +23,7 @@ const state: RSCanvasStateConfig = {
       y: 50,
       width: 200,
       height: 40,
+      rotation: 0,
       options: { text: "Hello world" },
     },
     image1: {
@@ -31,6 +32,7 @@ const state: RSCanvasStateConfig = {
       y: 120,
       width: 150,
       height: 100,
+      rotation: 0,
       options: { type: "url", url: "https://example.com/image.png" },
     },
   },
@@ -253,7 +255,7 @@ RSCanvas uses a `requestAnimationFrame`-based paint loop. Mutations never touch
 
 ![Paint loop sequence diagram](paint_loop.png)
 
-`setState` is deferred: the incoming state is stored as `_pendingState` and applied at the start of the next paint. If the canvas mutated its own state between the `setState` call and the paint (e.g. the user dragged an object), the pending state is stale and is dropped. This prevents echoed state from the host from overwriting newer internal changes.
+`setState` is deferred: the incoming state is stored as `_pendingState` and applied at the start of the next paint. If the canvas mutated its own state between the `setState` call and the paint (e.g. the user dragged an object), the pending state is stale and is dropped.
 
 ### Events
 

package/dist/index.d.mts

@@ -14,59 +14,18 @@ interface RSObjectConfig {
     options: RSObjectOptionsConfig;
 }
 /**
- * State configuration for the canvas.
+ * A single slide containing objects.
  */
-interface RSCanvasStateConfig {
-    /**
-     * Objects configuration for the canvas as key-value pairs of object id and object config.
-     *
-     * @example
-     /**
-      * Example (!!! claude-generated :| !!!!)
-      *
-      * ```ts
-      * const canvasState: RSCanvasStateConfig = {
-      *   objects: {
-      *     "text1": {
-      *       type: "text",
-      *       x: 100,
-      *       y: 80,
-      *       width: 200,
-      *       height: 60,
-      *       options: {
-      *         text: "Hello world!",
-      *         fontSize: 20,
-      *         color: "#222"
-      *       }
-      *     },
-      *     "image1": {
-      *       type: "image",
-      *       x: 250,
-      *       y: 170,
-      *       width: 120,
-      *       height: 90,
-      *       options: {
-      *         url: "https://placekitten.com/200/300"
-      *       }
-      *     },
-      *     "richtext1": {
-      *       type: "richtext",
-      *       x: 400,
-      *       y: 230,
-      *       width: 300,
-      *       height: 120,
-      *       options: {
-      *         content: [
-      *           { type: "paragraph", children: [{ text: "Supports " }, { text: "rich", bold: true }, { text: " text." }] }
-      *         ]
-      *       }
-      *     }
-      *   }
-      * }
-      * ```
-      */
+interface RSSlideConfig {
+    id: string;
     objects: Record<string, RSObjectConfig>;
 }
+/**
+ * State configuration for the canvas — an array of slides.
+ */
+interface RSCanvasStateConfig {
+    slides: RSSlideConfig[];
+}
 interface RSObject<T> {
     isStateEqual(state: T): boolean;
     updateState(state: T): void;
@@ -119,9 +78,19 @@ interface RSControl {
     render(node: HTMLElement): void;
     destroy(): void;
 }
+/** Minimal interface for an object node (position + size). */
+interface RSObjectNodeLike {
+    getX(): number;
+    getY(): number;
+    getWidth(): number;
+    getHeight(): number;
+    getId(): string;
+    getType(): string;
+}
 interface RSCanvasLike {
     changeCursor(cursor: string): void;
     getScale(): number;
+    toWorldSize(viewSize: number): number;
     toWorldX(viewX: number): number;
     toWorldY(viewY: number): number;
     objectIdAtXY(viewX: number, viewY: number): string | null;
@@ -130,12 +99,7 @@ interface RSCanvasLike {
     getCornerWorldXYSFCT(objectId: string, corner: RSCanvasCorner, out: RSWorldXY): boolean;
     getCanvasWidth(): number;
     getCanvasHeight(): number;
-    getObjectNode(objectId: string): {
-        getX(): number;
-        getY(): number;
-        getWidth(): number;
-        getHeight(): number;
-    } | null;
+    getObjectNode(objectId: string): RSObjectNodeLike | null;
     resizeObject(objectId: string, dw: number, dh: number): void;
     rotateObject(objectId: string, dAngle: number): void;
     translateObject(objectId: string, dx: number, dy: number): void;
@@ -149,6 +113,7 @@ interface RSCanvasLike {
     startEditSession(objectId: string, handle: RSObjectEditingSessionHandle): boolean;
     deleteObject(objectId: string): void;
     addControlToFront(ControlCtor: new (canvas: RSCanvasLike) => RSControl): RSControl;
+    forEachObject(fn: (node: RSObjectNodeLike) => void): void;
 }
 
 type RSCanvasOptions = {
@@ -165,6 +130,8 @@ declare class RSCanvas implements RSCanvasLike {
     private _translateX;
     private _translateY;
     private _objects;
+    private _slides;
+    private _selectedSlideId;
     private _objectConstructors;
     private _objectEditorConstructors;
     private _editingObjectId;
@@ -182,15 +149,14 @@ declare class RSCanvas implements RSCanvasLike {
     private _resizeObserver;
     private _boundingClientRect;
     private readonly _controls;
-    private readonly _onPaint;
     private readonly _localInvalidate;
     constructor(container: HTMLDivElement, options?: RSCanvasOptions);
+    private readonly _onPaint;
     private _setupEventListeners;
     private _updateBoundingClientRect;
     private _viewXFromEvent;
     private _viewYFromEvent;
     private _emit;
-    private _paint;
     private _invalidate;
     private _cornerWorldPosSFCT;
     private _emitStateChanged;
@@ -208,6 +174,7 @@ declare class RSCanvas implements RSCanvasLike {
     private _onKeyUp;
     private _on;
     private _getObjectEditorConstructor;
+    private _findSlideIndexById;
     private _updateObjectTree;
     onHighlight(fn: RSCanvasHighlightHandler): void;
     onStateChanged(fn: RSCanvasStateChangedHandler<RSCanvas>): void;
@@ -215,9 +182,12 @@ declare class RSCanvas implements RSCanvasLike {
     registerObjectTypeEditor(objectType: string, constructor: RSObjectEditorConstructor<RSObjectOptionsConfig>): void;
     setState(state: RSCanvasStateConfig): void;
     getStateSFCT(state: RSCanvasStateConfig): void;
+    getSelectedSlideId(): string | null;
+    setSelectedSlide(slideId: string): void;
     changeCursor(cursor: string): void;
     addControlToFront(ControlCtor: new (canvas: RSCanvasLike) => RSControl): RSControl;
     getScale(): number;
+    toWorldSize(viewSize: number): number;
     toWorldX(viewX: number): number;
     toWorldY(viewY: number): number;
     toViewX(worldX: number): number;
@@ -228,12 +198,7 @@ declare class RSCanvas implements RSCanvasLike {
     getCornerWorldXYSFCT(objectId: string, corner: RSCanvasCorner, out: RSWorldXY): boolean;
     getCanvasWidth(): number;
     getCanvasHeight(): number;
-    getObjectNode(objectId: string): {
-        getX(): number;
-        getY(): number;
-        getWidth(): number;
-        getHeight(): number;
-    } | null;
+    getObjectNode(objectId: string): RSObjectNodeLike | null;
     resizeObject(objectId: string, dw: number, dh: number): void;
     rotateObject(objectId: string, dAngle: number): void;
     translateObject(objectId: string, dx: number, dy: number): void;
@@ -247,6 +212,7 @@ declare class RSCanvas implements RSCanvasLike {
     canEditObject(objectId: string): boolean;
     startEditSession(objectId: string, hostHandle: RSObjectEditingSessionHandle): boolean;
     deleteObject(objectId: string): void;
+    forEachObject(fn: (node: RSObjectNodeLike) => void): void;
     saveToImage(callback: (blob: Blob) => void): Promise<void>;
     destroy(): void;
 }
@@ -266,4 +232,4 @@ interface RSImageObjectOptionsConfig extends RSObjectOptionsConfig {
     key?: string;
 }
 
-export { RSCanvas, type RSCanvasCorner, type RSCanvasEvent, type RSCanvasEventType, type RSCanvasHighlightHandler, type RSCanvasLike, type RSCanvasOptions, type RSCanvasStateChangedHandler, type RSCanvasStateConfig, type RSControl, type RSEditorHandle, type RSImageObjectOptionsConfig, type RSObject, type RSObjectConfig, type RSObjectConstructor, type RSObjectEditingSessionHandle, type RSObjectEditor, type RSObjectEditorConstructor, type RSObjectOptionsConfig, type RSRichTextObjectOptionsConfig, type RSTextObjectOptionsConfig, type RSViewXY, type RSWorldXY, richTextSchema };
+export { RSCanvas, type RSCanvasCorner, type RSCanvasEvent, type RSCanvasEventType, type RSCanvasHighlightHandler, type RSCanvasLike, type RSCanvasOptions, type RSCanvasStateChangedHandler, type RSCanvasStateConfig, type RSControl, type RSEditorHandle, type RSImageObjectOptionsConfig, type RSObject, type RSObjectConfig, type RSObjectConstructor, type RSObjectEditingSessionHandle, type RSObjectEditor, type RSObjectEditorConstructor, type RSObjectNodeLike, type RSObjectOptionsConfig, type RSRichTextObjectOptionsConfig, type RSSlideConfig, type RSTextObjectOptionsConfig, type RSViewXY, type RSWorldXY, richTextSchema };

package/dist/index.d.ts

@@ -14,59 +14,18 @@ interface RSObjectConfig {
     options: RSObjectOptionsConfig;
 }
 /**
- * State configuration for the canvas.
+ * A single slide containing objects.
  */
-interface RSCanvasStateConfig {
-    /**
-     * Objects configuration for the canvas as key-value pairs of object id and object config.
-     *
-     * @example
-     /**
-      * Example (!!! claude-generated :| !!!!)
-      *
-      * ```ts
-      * const canvasState: RSCanvasStateConfig = {
-      *   objects: {
-      *     "text1": {
-      *       type: "text",
-      *       x: 100,
-      *       y: 80,
-      *       width: 200,
-      *       height: 60,
-      *       options: {
-      *         text: "Hello world!",
-      *         fontSize: 20,
-      *         color: "#222"
-      *       }
-      *     },
-      *     "image1": {
-      *       type: "image",
-      *       x: 250,
-      *       y: 170,
-      *       width: 120,
-      *       height: 90,
-      *       options: {
-      *         url: "https://placekitten.com/200/300"
-      *       }
-      *     },
-      *     "richtext1": {
-      *       type: "richtext",
-      *       x: 400,
-      *       y: 230,
-      *       width: 300,
-      *       height: 120,
-      *       options: {
-      *         content: [
-      *           { type: "paragraph", children: [{ text: "Supports " }, { text: "rich", bold: true }, { text: " text." }] }
-      *         ]
-      *       }
-      *     }
-      *   }
-      * }
-      * ```
-      */
+interface RSSlideConfig {
+    id: string;
     objects: Record<string, RSObjectConfig>;
 }
+/**
+ * State configuration for the canvas — an array of slides.
+ */
+interface RSCanvasStateConfig {
+    slides: RSSlideConfig[];
+}
 interface RSObject<T> {
     isStateEqual(state: T): boolean;
     updateState(state: T): void;
@@ -119,9 +78,19 @@ interface RSControl {
     render(node: HTMLElement): void;
     destroy(): void;
 }
+/** Minimal interface for an object node (position + size). */
+interface RSObjectNodeLike {
+    getX(): number;
+    getY(): number;
+    getWidth(): number;
+    getHeight(): number;
+    getId(): string;
+    getType(): string;
+}
 interface RSCanvasLike {
     changeCursor(cursor: string): void;
     getScale(): number;
+    toWorldSize(viewSize: number): number;
     toWorldX(viewX: number): number;
     toWorldY(viewY: number): number;
     objectIdAtXY(viewX: number, viewY: number): string | null;
@@ -130,12 +99,7 @@ interface RSCanvasLike {
     getCornerWorldXYSFCT(objectId: string, corner: RSCanvasCorner, out: RSWorldXY): boolean;
     getCanvasWidth(): number;
     getCanvasHeight(): number;
-    getObjectNode(objectId: string): {
-        getX(): number;
-        getY(): number;
-        getWidth(): number;
-        getHeight(): number;
-    } | null;
+    getObjectNode(objectId: string): RSObjectNodeLike | null;
     resizeObject(objectId: string, dw: number, dh: number): void;
     rotateObject(objectId: string, dAngle: number): void;
     translateObject(objectId: string, dx: number, dy: number): void;
@@ -149,6 +113,7 @@ interface RSCanvasLike {
     startEditSession(objectId: string, handle: RSObjectEditingSessionHandle): boolean;
     deleteObject(objectId: string): void;
     addControlToFront(ControlCtor: new (canvas: RSCanvasLike) => RSControl): RSControl;
+    forEachObject(fn: (node: RSObjectNodeLike) => void): void;
 }
 
 type RSCanvasOptions = {
@@ -165,6 +130,8 @@ declare class RSCanvas implements RSCanvasLike {
     private _translateX;
     private _translateY;
     private _objects;
+    private _slides;
+    private _selectedSlideId;
     private _objectConstructors;
     private _objectEditorConstructors;
     private _editingObjectId;
@@ -182,15 +149,14 @@ declare class RSCanvas implements RSCanvasLike {
     private _resizeObserver;
     private _boundingClientRect;
     private readonly _controls;
-    private readonly _onPaint;
     private readonly _localInvalidate;
     constructor(container: HTMLDivElement, options?: RSCanvasOptions);
+    private readonly _onPaint;
     private _setupEventListeners;
     private _updateBoundingClientRect;
     private _viewXFromEvent;
     private _viewYFromEvent;
     private _emit;
-    private _paint;
     private _invalidate;
     private _cornerWorldPosSFCT;
     private _emitStateChanged;
@@ -208,6 +174,7 @@ declare class RSCanvas implements RSCanvasLike {
     private _onKeyUp;
     private _on;
     private _getObjectEditorConstructor;
+    private _findSlideIndexById;
     private _updateObjectTree;
     onHighlight(fn: RSCanvasHighlightHandler): void;
     onStateChanged(fn: RSCanvasStateChangedHandler<RSCanvas>): void;
@@ -215,9 +182,12 @@ declare class RSCanvas implements RSCanvasLike {
     registerObjectTypeEditor(objectType: string, constructor: RSObjectEditorConstructor<RSObjectOptionsConfig>): void;
     setState(state: RSCanvasStateConfig): void;
     getStateSFCT(state: RSCanvasStateConfig): void;
+    getSelectedSlideId(): string | null;
+    setSelectedSlide(slideId: string): void;
     changeCursor(cursor: string): void;
     addControlToFront(ControlCtor: new (canvas: RSCanvasLike) => RSControl): RSControl;
     getScale(): number;
+    toWorldSize(viewSize: number): number;
     toWorldX(viewX: number): number;
     toWorldY(viewY: number): number;
     toViewX(worldX: number): number;
@@ -228,12 +198,7 @@ declare class RSCanvas implements RSCanvasLike {
     getCornerWorldXYSFCT(objectId: string, corner: RSCanvasCorner, out: RSWorldXY): boolean;
     getCanvasWidth(): number;
     getCanvasHeight(): number;
-    getObjectNode(objectId: string): {
-        getX(): number;
-        getY(): number;
-        getWidth(): number;
-        getHeight(): number;
-    } | null;
+    getObjectNode(objectId: string): RSObjectNodeLike | null;
     resizeObject(objectId: string, dw: number, dh: number): void;
     rotateObject(objectId: string, dAngle: number): void;
     translateObject(objectId: string, dx: number, dy: number): void;
@@ -247,6 +212,7 @@ declare class RSCanvas implements RSCanvasLike {
     canEditObject(objectId: string): boolean;
     startEditSession(objectId: string, hostHandle: RSObjectEditingSessionHandle): boolean;
     deleteObject(objectId: string): void;
+    forEachObject(fn: (node: RSObjectNodeLike) => void): void;
     saveToImage(callback: (blob: Blob) => void): Promise<void>;
     destroy(): void;
 }
@@ -266,4 +232,4 @@ interface RSImageObjectOptionsConfig extends RSObjectOptionsConfig {
     key?: string;
 }
 
-export { RSCanvas, type RSCanvasCorner, type RSCanvasEvent, type RSCanvasEventType, type RSCanvasHighlightHandler, type RSCanvasLike, type RSCanvasOptions, type RSCanvasStateChangedHandler, type RSCanvasStateConfig, type RSControl, type RSEditorHandle, type RSImageObjectOptionsConfig, type RSObject, type RSObjectConfig, type RSObjectConstructor, type RSObjectEditingSessionHandle, type RSObjectEditor, type RSObjectEditorConstructor, type RSObjectOptionsConfig, type RSRichTextObjectOptionsConfig, type RSTextObjectOptionsConfig, type RSViewXY, type RSWorldXY, richTextSchema };
+export { RSCanvas, type RSCanvasCorner, type RSCanvasEvent, type RSCanvasEventType, type RSCanvasHighlightHandler, type RSCanvasLike, type RSCanvasOptions, type RSCanvasStateChangedHandler, type RSCanvasStateConfig, type RSControl, type RSEditorHandle, type RSImageObjectOptionsConfig, type RSObject, type RSObjectConfig, type RSObjectConstructor, type RSObjectEditingSessionHandle, type RSObjectEditor, type RSObjectEditorConstructor, type RSObjectNodeLike, type RSObjectOptionsConfig, type RSRichTextObjectOptionsConfig, type RSSlideConfig, type RSTextObjectOptionsConfig, type RSViewXY, type RSWorldXY, richTextSchema };