@rollstack/rscanvas 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rollstack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,386 @@
+# @rollstack/rscanvas
+
+## Installation
+
+```bash
+npm install @rollstack/rscanvas
+```
+
+## Usage
+
+```typescript
+import { RSCanvas } from "@rollstack/rscanvas";
+import type { RSCanvasStateConfig } from "@rollstack/rscanvas";
+
+const container = document.getElementById("canvas") as HTMLDivElement;
+const canvas = new RSCanvas(container, { width: 800, height: 600 });
+
+const state: RSCanvasStateConfig = {
+  objects: {
+    text1: {
+      type: "text",
+      x: 100,
+      y: 50,
+      width: 200,
+      height: 40,
+      options: { text: "Hello world" },
+    },
+    image1: {
+      type: "image",
+      x: 100,
+      y: 120,
+      width: 150,
+      height: 100,
+      options: { type: "url", url: "https://example.com/image.png" },
+    },
+  },
+};
+
+canvas.setState(state);
+
+
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Run tests
+npm test
+
+# Type check
+npm run typecheck
+
+# Lint
+npm run lint
+```
+
+## Sandbox
+
+A React application with a JSON editor and a single canvas (no backend). To run locally with automatic rebuilds:
+
+```bash
+npm run sandbox
+```
+
+Then open `http://localhost:3000/sandbox/public/` in your browser.
+
+This app is an illustration. Much of the code is AI generated.
+
+
+## Docs
+
+To generate the API documentation:
+
+```bash
+npm run docs
+```
+
+This runs TypeDoc and outputs to `docs/`. To generate and open the docs in your browser:
+
+```bash
+npm run docs:open
+```
+
+## Publishing to npm
+
+TODO: MUST VERIFY THIS FLOW!
+
+1. **Create an npm account** at [npmjs.com](https://www.npmjs.com/signup) if you don't have one.
+
+2. **Log in** from the project directory:
+   ```bash
+   npm login
+   ```
+
+3. **Bump the version** in `package.json` (or use `npm version patch/minor/major`):
+   ```bash
+   npm version patch
+   ```
+
+4. **Publish**:
+   ```bash
+   npm publish
+   ```
+
+   For a scoped package (e.g. `@rollstack/rscanvas`), use:
+   ```bash
+   npm publish --access public
+   ```
+
+5. **Verify** the package is live at `https://www.npmjs.com/package/@rollstack/rscanvas`.
+
+## License
+
+MIT
+
+## Architecture
+
+### Overview
+
+RSCanvas is an SDK that renders and manages objects (text, images, rich text) inside a zoomable, pannable container. The host application owns the state; RSCanvas renders it.
+
+```
+Host application
+  │
+  │  State
+  ├── setState(state)                        ──►  RSCanvas renders objects
+  ├── getStateSFCT(state)                    ◄──  Read current state into object
+  │
+  │  Events
+  ├── onStateChanged(cb)                     ◄──  User dragged, resized, or edited an object
+  ├── onHighlight(cb)                        ◄──  User hovered over an object (or null)
+  │
+  │  Plugins
+  ├── registerObjectType(type, fn)           ──►  Teach RSCanvas how to render a new object type
+  ├── registerObjectTypeEditor(type, ctor)   ──►  Teach RSCanvas how to edit an object type
+  ├── addControlToFront(control)             ──►  Add a custom control to the event chain
+  │
+  │  View
+  ├── center()                               ──►  Fit and center the slide in the container
+  ├── translate(dx, dy)                      ──►  Pan the viewport
+  ├── scaleAtXY(factor, viewX, viewY)        ──►  Zoom around a point
+  │
+  │  Object manipulation
+  ├── translateObject(id, dx, dy)            ──►  Move an object
+  ├── resizeObject(id, dw, dh)               ──►  Resize an object
+  ├── rotateObject(id, dAngle)               ──►  Rotate an object
+  ├── deleteObject(id)                       ──►  Remove an object
+  ├── highlightObject(id)                    ──►  Highlight an object
+  ├── clearHighlight()                       ──►  Clear highlight
+  │
+  │  Coordinate conversion
+  ├── toWorldX(viewX) / toWorldY(viewY)      ──►  View pixels to world coordinates
+  │
+  │  Lifecycle
+  ├── destroy()                              ──►  Clean up
+  └── saveToImage(cb)                        ──►  Export as PNG blob
+```
+
+### Coordinate systems
+
+RSCanvas uses two coordinate systems:
+
+- **World coordinates** — the fixed coordinate space of the slide content, anchored at the top-left corner of the canvas. `(0, 0)` is the top-left; x increases rightward, y increases downward. An object at `x: 100, y: 50` is always at that position in world space, regardless of zoom or pan. World space is unbounded.
+
+- **View coordinates** — pixel positions relative to the container element's top-left corner. These change as the user zooms and pans.
+
+```
+ view (0,0)
+  ┌──────────────────────────────────────────── container div ─┐
+  │                                                            │
+  │   translateX,translateY                                    │
+  │    ┌──────────────────────── slide ──────────────┐         │
+  │    │ world (0,0)                                 │         │
+  │    │  ·──── x ──►                                │         │
+  │    │  │                                          │         │
+  │    │  y   ┌──────────┐                           │         │
+  │    │  │   │  object  │  world (100, 50)          │         │
+  │    │  ▼   └──────────┘                           │         │
+  │    │                                             │         │
+  │    │                       (width x height)      │         │
+  │    └─────────────────────────────────────────────┘         │
+  │                                                            │
+  │          grey (#e0e0e0) when slide < container             │
+  └────────────────────────────────────────────────────────────┘
+```
+
+
+### Mounting and cleanup
+
+Pass a `<div>` to the constructor. RSCanvas takes ownership of that element — it sets overflow, background, focus, and appends its internal DOM structure. The host should not style the container beyond sizing it.
+
+```typescript
+import { RSCanvas } from "@rollstack/rscanvas";
+
+const container = document.getElementById("canvas") as HTMLDivElement;
+const canvas = new RSCanvas(container, { width: 1200, height: 800 });
+```
+
+After use, call `destroy()` to cleanup all references and prevent memory leaks. After `destroy()`, the canvas instance is inert and should not be reused.
+
+```typescript
+canvas.destroy();
+```
+
+### State model
+
+State is a plain object with an `objects` map. Each key is an object ID, each value describes type, position, size, rotation, and type-specific options.
+
+```typescript
+canvas.setState({
+  objects: {
+    myText: { type: "text", x: 50, y: 50, width: 200, height: 40, options: { text: "Hello" } },
+    myImage: { type: "image", x: 300, y: 100, width: 150, height: 100, options: { type: "url", url: "..." } },
+  },
+});
+```
+
+Read state back with `getStateSFCT` (mutates the passed object in place. this is a big performance boost when host has already control of a state-object (which it will for 90% of the scenarios)).
+
+```typescript
+const state = {};
+canvas.getStateSFCT(state);
+```
+
+### Highlight state
+
+An object can be highlighted. The built-in `HighlightControl` highlights whichever object the mouse is over, but the host can also drive it programmatically.
+
+```typescript
+canvas.highlightObject("myText");    // highlight an object by ID
+canvas.clearHighlight();             // remove the highlight
+canvas.getHighlightedObjectId();     // returns the current ID or null
+canvas.setHighlightColor("#ff0000"); // change the highlight color (default: #00d4aa)
+```
+
+Listen for highlight changes with `onHighlight`. This fires both when the user hovers over an object and when the host calls `highlightObject` / `clearHighlight`.
+
+```typescript
+canvas.onHighlight((objectId) => {
+  // objectId is the highlighted object's ID, or null when cleared
+});
+```
+
+### Paint loop
+
+RSCanvas uses a `requestAnimationFrame`-based paint loop. Mutations never touch the DOM directly — they set dirty flags and call `_invalidate()`, which schedules a single paint on the next frame. Multiple mutations within the same frame coalesce into one paint.
+
+![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.
+
+### Events
+
+
+```typescript
+canvas.onStateChanged((canvas) => { /* user dragged, resized, or edited an object */ });
+canvas.onHighlight((objectId) => { /* user hovered over an object, or null when cleared */ });
+```
+
+### Object types
+
+Three built-in types: `text`, `image`, and `rich-text`. You can register custom types and editors.
+
+#### Rendering
+
+An object type needs a constructor function that returns an `RSObject` implementation. The key methods:
+
+- `renderSFCT(node)` — render the object's content into the provided DOM node
+- `updateState(state)` — update internal state. e.g. may happen because an editor changes the state.
+- `isStateEqual(state)` — return true if the new state matches
+- `getStateSFCT(state)` — write the current state into the passed object
+- `destroy()` — clean up
+
+```typescript
+class RSTextObject implements RSObject<{ text: string }> {
+  private _text: string;
+
+  constructor(state: { text: string }) {
+    this._text = state.text;
+  }
+
+  isStateEqual(state: { text: string }) { return this._text === state.text; }
+  updateState(state: { text: string }) { this._text = state.text; }
+  getStateSFCT(state: { text: string }) { state.text = this._text; }
+  renderSFCT(node: HTMLElement) { node.textContent = this._text; }
+  destroy() {}
+}
+
+canvas.registerObjectType("text", (options) => new RSTextObject(options));
+```
+
+#### Editing
+
+Register an editor to enable editing of object-contents. When the user double-clicks an object, RSCanvas creates an editor instance, passing it the canvas, the object's current options, the object's container DOM node, and a handle.
+
+The handle has two callbacks:
+
+- `handle.onCommit(newState)` — commit changes to the state. The RSCanvas will notify the host via `onStateChanged`
+- `handle.onEnd()` — end the editing session and return to normal mode
+
+The editor must implement `destroy()` for cleanup when the session ends.
+
+
+### Controls
+
+RSCanvas ships with built-in controls for drag, resize, rotate, zoom (Cmd/Ctrl + scroll), pan, highlight, keyboard move, edit (double-click), and delete.
+
+Controls are processed in order. Each control receives every event via `handleEvent` and can act on it regardless of return value. Returning `this` claims exclusive ownership — all subsequent events go to that control until it returns `null`. Returning `null` lets the event continue to the next control in the chain.
+
+```
+ Event arrives (mousedown, mousemove, keydown, etc.)
+  │
+  ▼
+ activeControl set?
+  │
+  ├── YES ──► activeControl.handleEvent(event)
+  │            │
+  │            ├── returns this  ──► stay active, done
+  │            │
+  │            └── returns null  ──► clear activeControl, fall through ──┐
+  │                                                                     │
+  └── NO ───────────────────────────────────────────────────────────────┘
+              │
+              ▼
+         for each control in order:
+              │
+              ├── control.handleEvent(event)
+              │    │
+              │    ├── returns this  ──► set as activeControl, stop loop
+              │    │
+              │    └── returns null  ──► continue to next control
+              │
+              └── (end of loop, no control claimed it)
+```
+
+#### RSControl interface
+
+```typescript
+interface RSControl {
+  handleEvent(event: RSCanvasEvent): RSControl | null;
+  render(node: HTMLElement): void;
+  destroy(): void;
+}
+```
+
+- `handleEvent` — receives mouse, keyboard, and scroll events. Return a control instance (e.g. `this`) to claim the event for that control (block other controls), or `null` to pass along the event.
+- `render` — called each paint frame with the overlay node. Append any visual feedback (handles, guides, etc.).
+- `destroy` — clean up when the canvas is destroyed.
+
+#### Custom controls
+
+Add custom controls to the front of the chain with `addControlToFront`. They get first priority over built-in controls.
+
+```typescript
+import type { RSControl, RSCanvasEvent, RSCanvasLike } from "@rollstack/rscanvas";
+
+class LoggingControl implements RSControl {
+  private readonly _canvas: RSCanvasLike;
+
+  constructor(canvas: RSCanvasLike) {
+    this._canvas = canvas;
+  }
+
+  handleEvent(event: RSCanvasEvent): RSControl | null {
+    if (event.type === "mousedown") {
+      const worldX = this._canvas.toWorldX(event.viewX ?? 0);
+      const worldY = this._canvas.toWorldY(event.viewY ?? 0);
+      console.log(`click at world (${worldX}, ${worldY})`);
+    }
+    return null; // pass to next control
+  }
+
+  render(_node: HTMLElement): void {}
+  destroy(): void {}
+}
+
+canvas.addControlToFront(LoggingControl);
+```
+
+Returning `null` from `handleEvent` lets the event propagate to the next control. To block all other controls (e.g. a drawing tool), return `this` — you'll keep receiving events until you return `null`.

package/dist/index.d.mts

@@ -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 };