@rollstack/rscanvas 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,269 @@
+import * as orderedmap from 'orderedmap';
+import * as prosemirror_model from 'prosemirror-model';
+import { Schema } from 'prosemirror-model';
+
+interface RSObjectOptionsConfig {
+}
+interface RSObjectConfig {
+    type: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    options: RSObjectOptionsConfig;
+}
+/**
+ * State configuration for the canvas.
+ */
+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." }] }
+      *         ]
+      *       }
+      *     }
+      *   }
+      * }
+      * ```
+      */
+    objects: Record<string, RSObjectConfig>;
+}
+interface RSObject<T> {
+    isStateEqual(state: T): boolean;
+    updateState(state: T): void;
+    getStateSFCT(state: T): void;
+    renderSFCT(node: HTMLElement): void;
+    destroy(): void;
+}
+interface RSObjectEditor {
+    destroy(): void;
+}
+interface RSEditorHandle<T extends RSObjectOptionsConfig> {
+    onCommit(newState: T): void;
+    onEnd(): void;
+}
+interface RSObjectEditingSessionHandle {
+    onEnd(): void;
+}
+type RSObjectEditorConstructor<T extends RSObjectOptionsConfig> = new (canvas: RSCanvasLike, state: T, container: HTMLElement, handle: RSEditorHandle<T>) => RSObjectEditor;
+type RSObjectConstructor<T> = (state: T, invalidate: () => void) => RSObject<T>;
+type RSCanvasEventType = 'mousedown' | 'mouseup' | 'mouseenter' | 'mouseleave' | 'mousemove' | 'click' | 'dblclick' | 'scroll' | 'keydown' | 'keyup' | 'highlight' | 'stateChanged';
+type RSCanvasEvent = {
+    type: RSCanvasEventType;
+    viewX?: number;
+    viewY?: number;
+    deltaY?: number | null;
+    preventDefault?: () => void;
+    objectId?: string | null;
+    key?: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+};
+/** Handler for the highlight event. Receives the highlighted object ID or null when cleared. */
+type RSCanvasHighlightHandler = (objectId: string | null) => void;
+/** Handler for the stateChanged event. Receives the canvas instance. */
+type RSCanvasStateChangedHandler<T = RSCanvasLike> = (canvas: T) => void;
+/** Corner of an object's bounding box. */
+type RSCanvasCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/** View-space coordinates (pixels relative to canvas element). */
+interface RSViewXY {
+    viewX: number;
+    viewY: number;
+}
+/** World-space coordinates (canvas content space). */
+interface RSWorldXY {
+    worldX: number;
+    worldY: number;
+}
+interface RSControl {
+    handleEvent(event: RSCanvasEvent): RSControl | null;
+    render(node: HTMLElement): void;
+    destroy(): void;
+}
+interface RSCanvasLike {
+    changeCursor(cursor: string): void;
+    getScale(): number;
+    toWorldX(viewX: number): number;
+    toWorldY(viewY: number): number;
+    objectIdAtXY(viewX: number, viewY: number): string | null;
+    objectIdAtLowerRightCorner(viewX: number, viewY: number): string | null;
+    objectIdAtUpperRightCorner(viewX: number, viewY: number): string | null;
+    getCornerWorldXYSFCT(objectId: string, corner: RSCanvasCorner, out: RSWorldXY): boolean;
+    getCanvasWidth(): number;
+    getCanvasHeight(): number;
+    getObjectNode(objectId: string): {
+        getX(): number;
+        getY(): number;
+        getWidth(): number;
+        getHeight(): number;
+    } | null;
+    resizeObject(objectId: string, dw: number, dh: number): void;
+    rotateObject(objectId: string, dAngle: number): void;
+    translateObject(objectId: string, dx: number, dy: number): void;
+    translate(dx: number, dy: number): void;
+    scaleAtXY(scaleFactor: number, viewX: number, viewY: number): void;
+    highlightObject(id: string): void;
+    clearHighlight(): void;
+    setHighlightColor(color: string): void;
+    getHighlightedObjectId(): string | null;
+    canEditObject(objectId: string): boolean;
+    startEditSession(objectId: string, handle: RSObjectEditingSessionHandle): boolean;
+    deleteObject(objectId: string): void;
+    addControlToFront(ControlCtor: new (canvas: RSCanvasLike) => RSControl): RSControl;
+}
+
+type RSCanvasOptions = {
+    width?: number;
+    height?: number;
+};
+declare class RSCanvas implements RSCanvasLike {
+    private readonly _containerNode;
+    private readonly _innerContainerNode;
+    private readonly _overlayNode;
+    private _width;
+    private _height;
+    private _scale;
+    private _translateX;
+    private _translateY;
+    private _objects;
+    private _objectConstructors;
+    private _objectEditorConstructors;
+    private _editingObjectId;
+    private _highlightedObjectId;
+    private _highlightColor;
+    private _activeControl;
+    private _rafId;
+    private _listeners;
+    private _destroyed;
+    private _dirtyTransform;
+    private _pendingState;
+    private _internalStateVersion;
+    private _pendingStateVersion;
+    private readonly _cornerPosScratch;
+    private _resizeObserver;
+    private _boundingClientRect;
+    private readonly _controls;
+    private readonly _onPaint;
+    private readonly _localInvalidate;
+    constructor(container: HTMLDivElement, options?: RSCanvasOptions);
+    private _setupEventListeners;
+    private _updateBoundingClientRect;
+    private _viewXFromEvent;
+    private _viewYFromEvent;
+    private _emit;
+    private _paint;
+    private _invalidate;
+    private _cornerWorldPosSFCT;
+    private _emitStateChanged;
+    private _dispatchToControls;
+    private _createPointerEvent;
+    private _onMouseDown;
+    private _onMouseUp;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    private _onMouseMove;
+    private _onClick;
+    private _onDblClick;
+    private _onScroll;
+    private _onKeyDown;
+    private _onKeyUp;
+    private _on;
+    private _getObjectEditorConstructor;
+    private _updateObjectTree;
+    onHighlight(fn: RSCanvasHighlightHandler): void;
+    onStateChanged(fn: RSCanvasStateChangedHandler<RSCanvas>): void;
+    registerObjectType(objectType: string, constructor: RSObjectConstructor<RSObjectOptionsConfig>): void;
+    registerObjectTypeEditor(objectType: string, constructor: RSObjectEditorConstructor<RSObjectOptionsConfig>): void;
+    setState(state: RSCanvasStateConfig): void;
+    getStateSFCT(state: RSCanvasStateConfig): void;
+    changeCursor(cursor: string): void;
+    addControlToFront(ControlCtor: new (canvas: RSCanvasLike) => RSControl): RSControl;
+    getScale(): number;
+    toWorldX(viewX: number): number;
+    toWorldY(viewY: number): number;
+    toViewX(worldX: number): number;
+    toViewY(worldY: number): number;
+    objectIdAtXY(viewX: number, viewY: number): string | null;
+    objectIdAtLowerRightCorner(viewX: number, viewY: number): string | null;
+    objectIdAtUpperRightCorner(viewX: number, viewY: number): string | null;
+    getCornerWorldXYSFCT(objectId: string, corner: RSCanvasCorner, out: RSWorldXY): boolean;
+    getCanvasWidth(): number;
+    getCanvasHeight(): number;
+    getObjectNode(objectId: string): {
+        getX(): number;
+        getY(): number;
+        getWidth(): number;
+        getHeight(): number;
+    } | null;
+    resizeObject(objectId: string, dw: number, dh: number): void;
+    rotateObject(objectId: string, dAngle: number): void;
+    translateObject(objectId: string, dx: number, dy: number): void;
+    translate(dx: number, dy: number): void;
+    scaleAtXY(scaleFactor: number, viewX: number, viewY: number): void;
+    center(): void;
+    highlightObject(id: string): void;
+    clearHighlight(): void;
+    setHighlightColor(color: string): void;
+    getHighlightedObjectId(): string | null;
+    canEditObject(objectId: string): boolean;
+    startEditSession(objectId: string, hostHandle: RSObjectEditingSessionHandle): boolean;
+    deleteObject(objectId: string): void;
+    saveToImage(callback: (blob: Blob) => void): Promise<void>;
+    destroy(): void;
+}
+
+interface RSRichTextObjectOptionsConfig extends RSObjectOptionsConfig {
+    doc: Record<string, unknown>;
+}
+declare const richTextSchema: Schema<keyof orderedmap.default<prosemirror_model.NodeSpec>, keyof orderedmap.default<prosemirror_model.MarkSpec>>;
+
+interface RSTextObjectOptionsConfig extends RSObjectOptionsConfig {
+    text: string;
+}
+
+interface RSImageObjectOptionsConfig extends RSObjectOptionsConfig {
+    type: "url" | "localStorage";
+    url?: string;
+    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 };