@infinite-canvas-tutorial/webcomponents

Developing Web UIs with Lit and Spectrum.

For more information, please refer to: Lesson 7 - Web UI which used Shoelace at that time.

Getting Started

For now we provide these web components implementations based on Spectrum:

import '@infinite-canvas-tutorial/webcomponents/spectrum';

Using web components in HTML:

<ic-spectrum-canvas></ic-spectrum-canvas>

Use API (a more recommended way)

Listening to Events in JS:

import { Event } from '@infinite-canvas-tutorial/webcomponents';

// Get container element.
const canvas = document.querySelector<HTMLElement>('ic-spectrum-canvas')!;

// Waiting for the canvas to be ready...
canvas.addEventListener(Event.READY, (e) => {
    // Get API.
    const api = e.detail;

    // Append initial nodes to canvas.
    api.updateNodes(nodes);

    // Set cursor style.
    api.setCursor('grabbing');
});

For more information, please refer to API section.

Use ECS

Please refer to @infinite-canvas-tutorial/ecs.

API

Just like Figma API and Excalidraw API, we provide ours which is also friendly to MCP. MCP: What It Is and Why It Matters:

Instead of only having a GUI or API that humans use, you get an AI interface “for free.” This idea has led to the concept of “MCP-first development”, where you build the MCP server for your app before or alongside the GUI.

get/setAppState

api.getAppState();
api.setAppState({
    penbarSelected: Pen.HAND,
});

penbarVisible

penbarAll

export enum Pen {
    SELECT = 'select',
    HAND = 'hand',
    DRAW_RECT = 'draw-rect',
    DRAW_ELLIPSE = 'draw-ellipse',
    DRAW_LINE = 'draw-line',
    DRAW_ROUGH_RECT = 'draw-rough-rect',
    IMAGE = 'image',
    TEXT = 'text',
    PENCIL = 'pencil',
    BRUSH = 'brush',
    VECTOR_NETWORK = 'vector-network',
}

penbarSelected

checkboardStyle

Set the checkboard style of grid, refer to Lesson 5 - Grid.

api.setAppState({
    checkboardStyle: CheckboardStyle.GRID,
});

Valid values to take include:

enum CheckboardStyle {
    NONE = 'none',
    GRID = 'grid',
    DOTS = 'dots',
}

contextMenuVisible

contextBarVisible

topbarVisible

taskbarVisible

taskbarAll

taskbarSelected

setCursor

Set current cursor style, the valid values are detailed: cursor.

setCursor(cursor: string): void;

updateNodes

updateNodes(nodes: SerializedNode[]): void;

undo

redo

isUndoStackEmpty

isRedoStackEmpty

destroy

Delete canvas entity.

Events

canvas.addEventListener(Event.READY, (e) => {
    // Get API.
    const api = e.detail;
});

• READY
• RESIZED
• CAMERA_ZOOM_CHANGED
• SCREENSHOT_REQUESTED
• SCREENSHOT_DOWNLOADED

Built-in plugin and systems

• UI plugin
  • InitCanvas System
  • ZoomLevel System
  • DownloadScreenshot System

FAQ

Registry conflicts

Failed to execute 'define' on 'CustomElementRegistry':
the name "sp-overlay" has already been used with this registry

https://opensource.adobe.com/spectrum-web-components/registry-conflicts/