Infinite Canvas Tutorial

https://github.com/xiaoiver/infinite-canvas-tutorial
Admin
An educational tutorial for building infinite canvas applications with GPU-accelerated rendering...
Tokens:207,673
Snippets:2,354
Trust Score:9.2
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Run Application

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/ecs/README.md

Start the application using the built-in DefaultPlugins.

```ts
import { App } from '@infinite-canvas-tutorial/ecs';

// Add our custom plugin before running
const app = new App().addPlugins(...DefaultPlugins, MyPlugin);
app.run();
```

--------------------------------

### Run the Application

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/app/SUPABASE_SETUP.md

Commands to navigate to the app directory and start the development server.

```bash
cd packages/app
pnpm dev
```

--------------------------------

### Initialize circle instance

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-002.md

Setup of the circle object using the Lesson2 library.

```js
circle = (() => {
    const { Circle } = Lesson2;
    const circle = new Circle({
        cx: 100,
        cy: 100,
        r: 100,
        fill: 'red',
        antiAliasingType: 3,
    });
    return circle;
})();
```

--------------------------------

### Initialize Canvas Shadow Example

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-010.md

Initializes the canvas element and sets up the shadow rendering demonstration.

```js
$icCanvas4 = call(() => {
    return document.createElement('ic-canvas-lesson10');
});
```

```js
call(() => {
    const { Canvas, Rect } = Lesson10;

    const stats = new Stats();
    stats.showPanel(0);
    const $stats = stats.dom;
    $stats.style.position = 'absolute';
    $stats.style.left = '0px';
    $stats.style.top = '0px';

    $icCanvas4.parentElement.style.position = 'relative';
    $icCanvas4.parentElement.appendChild($stats);

    $icCanvas4.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;

        const rect = new Rect({
            x: 50,
            y: 50,
            fill: 'green',
            cornerRadius: 50,
            batchable: false,
            innerShadowColor: 'black',
            innerShadowOffsetX: 10,
            innerShadowOffsetY: 10,
            innerShadowBlurRadius: 10,
            dropShadowColor: 'black',
            dropShadowOffsetX: 10,
            dropShadowOffsetY: 10,
            dropShadowBlurRadius: 10,
        });
        rect.width = 400;
        rect.height = 100;
        canvas.appendChild(rect);
    });

    $icCanvas4.addEventListener('ic-frame', (e) => {
        stats.update();
    });
});
```

--------------------------------

### Run Vite Dev Server

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/README.md

Start the Vite development server for the lesson_001 package.

```bash
cd packages/lesson_001
pnpm run dev
```

--------------------------------

### Initialize Loro Tree

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-020.md

Basic setup for a Loro document and tree structure.

```ts
import { Loro, LoroTree, LoroTreeNode } from 'loro-crdt';

let doc = new Loro();
let tree: LoroTree = doc.getTree('tree');
let root: LoroTreeNode = tree.createNode();
```

--------------------------------

### Render loop initialization

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-002.md

Setup of the canvas and the animation loop for rendering.

```js
(async () => {
    const { Canvas } = Lesson2;

    const canvas = await Utils.createCanvas(Canvas, 200, 200);

    canvas.appendChild(circle);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });
    return canvas.getDOM();
})();
```

--------------------------------

### Webpack Plugin Registration Example

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-001.md

Demonstrates how a webpack plugin registers a listener to the 'run' hook. This hook is synchronous and serial, logging a message when webpack starts.

```typescript
class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, (compilation) => {
            console.log('webpack starting...');
        });
    }
}
```

--------------------------------

### Initialize devices using @antv/g-device-api

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-001.md

Example of creating WebGL and WebGPU devices using the hardware abstraction layer.

```ts
import {
    WebGLDeviceContribution,
    WebGPUDeviceContribution,
} from '@antv/g-device-api';

// create a device in WebGL
const deviceContribution = new WebGLDeviceContribution({
    targets: ['webgl2', 'webgl1'],
});
// create a device in WebGPU
const deviceContribution = new WebGPUDeviceContribution({
    shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
});
// here's the asynchronous process
const swapChain = await deviceContribution.createSwapChain($canvas);
const device = swapChain.getDevice();
// create GPU objects with Device API
```

--------------------------------

### Circle Initialization

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/circle.md

Example of initializing a Circle object with basic properties.

```APIDOC
## Circle Initialization

### Description
Initializes a Circle object with specified center coordinates, radius, and appearance properties.

### Method
Constructor

### Endpoint
N/A (Class constructor)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **cx** (number) - Required - The X-axis coordinate of the circle's center.
- **cy** (number) - Required - The Y-axis coordinate of the circle's center.
- **r** (number) - Required - The radius of the circle.
- **fill** (string) - Optional - The fill color of the circle.
- **strokeWidth** (number) - Optional - The width of the circle's stroke.
- **stroke** (string) - Optional - The color of the circle's stroke.
- **strokeOpacity** (number) - Optional - The opacity of the circle's stroke.
- **strokeAlignment** (string) - Optional - The alignment of the circle's stroke ('center', 'inner', 'outer').
- **strokeDasharray** (array) - Optional - Defines the pattern of dashes and gaps for the stroke.
- **strokeDashoffset** (number) - Optional - Defines the offset from the start of the path for the dash pattern.

### Request Example
```json
{
    "cx": 400,
    "cy": 150,
    "r": 100,
    "fill": "red",
    "strokeWidth": 10,
    "stroke": "black"
}
```

### Response
#### Success Response (200)
N/A (Constructor does not return a response in the typical API sense)

#### Response Example
N/A
```

--------------------------------

### Initialize Infinite Canvas Element (JavaScript)

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-012.md

Initializes an Infinite Canvas element for use in lessons. This is a setup step for interactive examples.

```javascript
$icCanvas6 = call(() => {
    return document.createElement('ic-canvas-lesson12');
});
```

--------------------------------

### Initialize Canvas for Deserialization

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-010.md

Sets up a canvas instance and starts the animation loop for rendering.

```js
canvas2 = (async () => {
    const { Canvas } = Lesson10;

    const canvas = await Utils.createCanvas(Canvas, 200, 200);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });

    return canvas;
})();
```

--------------------------------

### Initialize and Run ECS Application

Source: https://context7.com/xiaoiver/infinite-canvas-tutorial/llms.txt

Configures the application with default and custom plugins, then starts the game loop.

```typescript
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';
import { EraserPlugin } from '@infinite-canvas-tutorial/plugin-eraser';
import { LaserPointerPlugin } from '@infinite-canvas-tutorial/plugin-laser-pointer';

// Create and configure the application
const app = new App()
  .addPlugins(
    ...DefaultPlugins,  // Core plugins: Hierarchy, Transform, Canvas, Camera, Event, Renderer, etc.
    UIPlugin,           // Web Components UI
    EraserPlugin,       // Eraser tool
    LaserPointerPlugin  // Laser pointer tool
  );

// Start the application (returns Promise<App>)
await app.run();

// Later, to exit the application
await app.exit();
```

--------------------------------

### Getting the Canvas API

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/create-app.md

Demonstrates how to obtain the canvas API instance by listening to the `Event.READY` event.

```APIDOC
## Getting the Canvas API

### Description
By listening to the canvas initialization event `Event.READY`, you can get the API instance from the event object.

### Event Listener Example

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

const canvas = document.querySelector<HTMLElement>('#canvas')!;
cavas.addEventListener(Event.READY, async (e) => {
    const api = e.detail;
    // Use the API instance here
});
```
```

--------------------------------

### Begin frame render pass

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-002.md

Initialize the render pass at the start of a frame.

```ts
hooks.beginFrame.tap(() => {
  this.#device.beginFrame();

  this.#renderPass = this.#device.createRenderPass({
    colorAttachment: [renderTarget],
    colorResolveTo: [onscreenTexture],
    colorClearColor: [TransparentWhite],
  });
});
```

--------------------------------

### Configure CI for Headless-GL

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-011.md

Installs necessary system dependencies and runs tests using xvfb in a CI environment.

```yaml
- name: Install headless-gl dependencies
    run: |
        sudo apt-get update
        sudo apt-get install -y mesa-utils xvfb libgl1-mesa-dri libglapi-mesa libosmesa6

- name: Cov
    run: |
        xvfb-run -s "-ac -screen 0 1280x1024x16" pnpm cov
```

--------------------------------

### Initialize and animate canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-002.md

Create a canvas instance, add a circle shape, and start the animation loop.

```js
canvas = (async () => {
    const { Canvas, Circle } = Lesson2;

    const canvas = await Utils.createCanvas(Canvas, 100, 100, renderer);

    const circle = new Circle({
        cx: 100,
        cy: 100,
        r: 100,
        fill: 'red',
        antiAliasingType: 3,
    });
    canvas.appendChild(circle);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });

    return canvas;
})();
```

--------------------------------

### Handle Initialization in WebWorker

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-011.md

Receive the OffscreenCanvas in the worker and start the render loop.

```js
// worker.js
self.onmessage = function (event) {
    const { type } = event.data;
    if (type === 'init') {
        // 1.
        const { offscreenCanvas, devicePixelRatio } = event.data;

        (async () => {
            // 2.
            const canvas = await new Canvas({
                canvas: offscreenCanvas,
                devicePixelRatio,
            }).initialized;

            // 3.
            const animate = () => {
                canvas.render();
                self.requestAnimationFrame(animate);
            };
            animate();
        })();
    }
    // ...Handle other messages.
};
```

--------------------------------

### Initialize Canvas Lesson

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-009.md

Setup for the interactive canvas lesson, including DOM element creation and event listener registration for shape interaction.

```javascript
$icCanvas = call(() => {
    return document.createElement('ic-canvas-lesson9');
});
```

```javascript
call(() => {
    const { Canvas, Ellipse } = Lesson9;

    const stats = new Stats();
    stats.showPanel(0);
    const $stats = stats.dom;
    $stats.style.position = 'absolute';
    $stats.style.left = '0px';
    $stats.style.top = '0px';

    $icCanvas.parentElement.style.position = 'relative';
    $icCanvas.parentElement.appendChild($stats);

    $icCanvas.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;

        for (let i = 0; i < 1000; i++) {
            const fill = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
                Math.random() * 255,
            )},${Math.floor(Math.random() * 255)})`;
            const ellipse = new Ellipse({
                cx: Math.random() * 1000,
                cy: Math.random() * 1000,
                rx: Math.random() * 20,
                ry: Math.random() * 20,
                fill,
            });
            canvas.appendChild(ellipse);
            ellipse.addEventListener('pointerenter', () => {
                ellipse.fill = 'red';
            });
            ellipse.addEventListener('pointerleave', () => {
                ellipse.fill = fill;
            });
        }
    });

    $icCanvas.addEventListener('ic-frame', (e) => {
        stats.update();
    });
});
```

--------------------------------

### Setup canvas rendering and performance monitoring

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-013.md

Configures the canvas, adds performance stats, and renders path and circle objects.

```js
call(() => {
    const { Canvas, Path, Circle } = Lesson13;

    const stats = new Stats();
    stats.showPanel(0);
    const $stats = stats.dom;
    $stats.style.position = 'absolute';
    $stats.style.left = '0px';
    $stats.style.top = '0px';

    $icCanvas2.parentElement.style.position = 'relative';
    $icCanvas2.parentElement.appendChild($stats);

    $icCanvas2.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;
        canvas.camera.zoom = 2;

        const path = new Path({
            d: 'M40,0A40,40 0 1,1 0,-40A40,40 0 0,1 40,0Z',
            fill: 'black',
            opacity: 0.5,
        });
        path.position.x = 100;
        path.position.y = 100;
        canvas.appendChild(path);

        const circle = new Circle({
            cx: 0,
            cy: 0,
            r: 40,
            fill: 'black',
            opacity: 0.5,
        });
        circle.position.x = 200;
        circle.position.y = 100;
        canvas.appendChild(circle);
    });

    $icCanvas2.addEventListener('ic-frame', (e) => {
        stats.update();
    });
});
```

--------------------------------

### Initialize Infinite Canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-012.md

Initializes the infinite canvas element for lesson 12. This is a setup step before drawing.

```javascript
$icCanvas = call(() => {
    return document.createElement('ic-canvas-lesson12');
});
```

--------------------------------

### Initialize RBush Index

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-008.md

Setup the RBush instance and define the node interface for spatial indexing.

```ts
import RBush from 'rbush';
const rBushRoot = new RBush<RBushNodeAABB>();

export interface RBushNodeAABB {
    shape: Shape;
    minX: number;
    minY: number;
    maxX: number;
    maxY: number;
}
```

--------------------------------

### Setup performance monitoring and circle rendering

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-008.md

Configures stats.js for FPS monitoring and populates the canvas with 100 random circles.

```js
call(() => {
    const { Canvas, Circle } = Lesson7;

    const stats = new Stats();
    stats.showPanel(0);
    const $stats = stats.dom;
    $stats.style.position = 'absolute';
    $stats.style.left = '0px';
    $stats.style.top = '0px';

    $icCanvas.parentElement.style.position = 'relative';
    $icCanvas.parentElement.appendChild($stats);

    $icCanvas.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;

        for (let i = 0; i < 100; i++) {
            const circle = new Circle({
                cx: Math.random() * 400,
                cy: Math.random() * 200,
                r: Math.random() * 20,
                fill: 'red',
            });
            canvas.appendChild(circle);
        }
    });

    $icCanvas.addEventListener('ic-frame', (e) => {
        stats.update();
    });
});
```

--------------------------------

### Initialize and Animate Canvas with Circle

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-003.md

Sets up a canvas, appends the circle, and starts an animation loop to continuously render the canvas. Includes cleanup logic.

```javascript
(async () => {
    const { Canvas } = Lesson3;
    const canvas = await Utils.createCanvas(Canvas, 200, 200);
    canvas.appendChild(circle);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });
    return canvas.getDOM();
})();
```

--------------------------------

### Initialize Bevy App with Plugins

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-018.md

Demonstrates the standard Bevy application initialization using default plugins and system scheduling.

```rust
fn main() {
    App::new()
        .add_plugins(DefaultPlugins) // Default plugin set provided by the official team
        .add_systems(Startup, add_people)
        .add_systems(Update, (hello_world, (update_people, greet_people).chain()))
        .run();
}
```

--------------------------------

### Install pnpm

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/README.md

Install pnpm package manager to manage project dependencies.

```bash
pnpm i
```

--------------------------------

### SVG Image as Fill Example

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-010.md

An example of how an SVG `<rect>` element can use an image as a fill via a `<pattern>` and `<use>` element. This demonstrates indirect image tiling fill.

```html
<svg>
    <rect width="500" height="500" fill="url(#pattern0_2442_3)" />
    <defs>
        <pattern id="pattern0_2442_3">
            <use xlink:href="#image0_2442_3"
            <!-- 0.000520833 = 1 / 1920 -->
            transform="matrix(0.000520833 0 0 0.000527058 0 -0.0059761)" />
        </pattern>
        <image
            id="image0_2442_3"
            width="1920"
            height="1920"
            xlink:href="data:image/png;base64,iVBO..."
        />
    </defs>
</svg>
```

--------------------------------

### Compare WebGL and WebGPU initialization

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-001.md

Demonstrates the difference between synchronous WebGL context creation and asynchronous WebGPU device requests.

```js
// create a context in WebGL
const gl = $canvas.getContext('webgl');

// obtaining a device in WebGPU
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
```

--------------------------------

### Initialize Infinite Canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-013.md

Initializes an infinite canvas element for lesson 13. This is a setup step for subsequent drawing operations.

```javascript
$icCanvas = call(() => {
    return document.createElement('ic-canvas-lesson13');
});
```

--------------------------------

### Initialize Canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-005.md

Sets up the canvas instance for the lesson.

```js
canvas = call(() => {
    const { Canvas } = Lesson5;
    return Utils.createCanvas(Canvas, 400, 400);
});
```

--------------------------------

### Build and Run Site Locally

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/README.md

Build the project and run the site development server locally.

```bash
pnpm run build
cd packages/site
pnpm run dev
```

--------------------------------

### Define D2 containers

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-032.md

Example of nested container syntax in D2.

```d2
good chips: {
  doritos
  ruffles
}
bad chips.lays
bad chips.pringles

chocolate.chip.cookies
```

--------------------------------

### Interactive Polyline Stroke Alignment Example

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-012.md

This JavaScript code sets up an interactive example using the Infinite Canvas library. It creates multiple polylines with different stroke alignment settings ('outer', 'center', 'inner') and adds event listeners for pointer interactions, changing the stroke color on hover.

```javascript
call(() => {
    const { Canvas, Polyline } = Lesson12;

    const stats = new Stats();
    stats.showPanel(0);
    const $stats = stats.dom;
    $stats.style.position = 'absolute';
    $stats.style.left = '0px';
    $stats.style.top = '0px';

    $icCanvas2.parentElement.style.position = 'relative';
    $icCanvas2.parentElement.appendChild($stats);

    $icCanvas2.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;

        const polyline1 = new Polyline({
            points: [
                [100, 100],
                [100, 200],
                [200, 200],
                [200, 100],
            ],
            stroke: 'black',
            strokeWidth: 20,
            strokeAlignment: 'outer',
            fill: 'none',
            cursor: 'pointer',
        });
        canvas.appendChild(polyline1);
        const polyline4 = new Polyline({
            points: [
                [100, 100],
                [100, 200],
                [200, 200],
                [200, 100],
            ],
            stroke: 'red',
            strokeWidth: 2,
            // strokeAlignment: 'outer',
            fill: 'none',
        });
        canvas.appendChild(polyline4);

        const polyline2 = new Polyline({
            points: [
                [220, 100],
                [220, 200],
                [320, 200],
                [320, 100],
            ],
            stroke: 'black',
            strokeWidth: 20,
            cursor: 'pointer',
            fill: 'none',
        });
        canvas.appendChild(polyline2);
        const polyline5 = new Polyline({
            points: [
                [220, 100],
                [220, 200],
                [320, 200],
                [320, 100],
            ],
            stroke: 'red',
            strokeWidth: 2,
            fill: 'none',
        });
        canvas.appendChild(polyline5);

        const polyline3 = new Polyline({
            points: [
                [360, 100],
                [360, 200],
                [460, 200],
                [460, 100],
            ],
            stroke: 'black',
            strokeWidth: 20,
            strokeAlignment: 'inner',
            fill: 'none',
            cursor: 'pointer',
        });
        canvas.appendChild(polyline3);
        const polyline6 = new Polyline({
            points: [
                [360, 100],
                [360, 200],
                [460, 200],
                [460, 100],
            ],
            stroke: 'red',
            strokeWidth: 2,
            fill: 'none',
        });
        canvas.appendChild(polyline6);

        polyline1.addEventListener('pointerenter', () => {
            polyline1.stroke = 'green';
        });
        polyline1.addEventListener('pointerleave', () => {
            polyline1.stroke = 'black';
        });
        polyline2.addEventListener('pointerenter', () => {
            polyline2.stroke = 'green';
        });
        polyline2.addEventListener('pointerleave', () => {
            polyline2.stroke = 'black';
        });
        polyline3.addEventListener('pointerenter', () => {
            polyline3.stroke = 'green';
        });
        polyline3.addEventListener('pointerleave', () => {
            polyline3.stroke = 'black';
        });
    });

    $icCanvas2.addEventListener('ic-frame', (e) => {
        stats.update();
    });
});
```

--------------------------------

### Initialize System and API

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/ecs/README.md

Create a system and initialize the API instance within the initialize hook.

```ts
import {
    System,
    Commands,
    API,
    DefaultStateManagement,
} from '@infinite-canvas-tutorial/ecs';

class StartUpSystem extends System {
    private readonly commands = new Commands(this);

    initialize(): void {
        const api = new API(new DefaultStateManagement(), this.commands);

        api.createCanvas({
            element: $canvas,
            width: window.innerWidth,
            height: window.innerHeight,
            devicePixelRatio: window.devicePixelRatio,
        });
        api.createCamera({
            zoom: 1,
        });

        api.updateNodes([
            {
                id: '1',
                type: 'rect',
                x: 0,
                y: 0,
                width: 100,
                height: 100,
                fill: 'red',
            },
        ]);
        api.record();
    }
}
```

--------------------------------

### Paste HTML Fragment

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-029.md

Example of an HTML fragment copied from a code editor.

```html
<meta charset="utf-8" />
<div
    style="color: #e4e4e4;background-color: #181818;font-family: Menlo, Monaco, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"
>
    <div><span style="color: #d6d6dd;">### iframe</span></div>
</div>
```

--------------------------------

### Initializing the App and Canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/create-app.md

This snippet shows how to create a global App instance with default plugins and then initialize the canvas component.

```APIDOC
## Initialize App and Canvas

### Description
Creates a global `App` instance with default plugins and then initializes the `ic-spectrum-canvas` Web Component.

### Code Example

```ts
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';

const app = new App().addPlugins(...DefaultPlugins, UIPlugin);
app.run();
```

### HTML Declaration

```html
<ic-spectrum-canvas
    id="canvas"
    style="width: 100%; height: 100%;"
    app-state='{"topbarVisible":true, "cameraZoom":1}'
    renderer="webgl"
></ic-spectrum-canvas>
```
```

--------------------------------

### Initialize Liveblocks Client and Enter Room

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/example/comments-overlay.md

Sets up the Liveblocks client and enters a room with initial presence. Requires 'pk_dev...' public API key.

```typescript
import { createClient } from '@liveblocks/client';
import { getYjsProviderForRoom } from '@liveblocks/yjs';

const client = createClient({
    throttle: 16,
    publicApiKey: 'pk_dev...',
});
const { room, leave } = client.enterRoom('my-room-id', {
    initialPresence: { cursor: null },
});

const yProvider = getYjsProviderForRoom(room);
const yDoc = yProvider.getYDoc();
```

--------------------------------

### Configure Path Instance

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/path.md

Instantiate a path and set its initial position.

```js
path = call(() => {
    const { Canvas, Path } = Core;
    const path = new Path({
        d: 'M 100 100 L 200 200 L 300 100 Z',
        stroke: 'red',
        strokeWidth: 20,
        fill: 'blue',
    });
    path.position.x = 250;
    return path;
});
```

--------------------------------

### Initialize App with Default Plugins

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/create-app.md

Create a global App instance and add default plugins along with the UIPlugin. This is the first step for setting up the canvas environment.

```typescript
import { App, DefaultPlugins } from '@infinite-canvas-tutorial/ecs';
import { UIPlugin } from '@infinite-canvas-tutorial/webcomponents';

const app = new App().addPlugins(...DefaultPlugins, UIPlugin);
app.run();
```

--------------------------------

### Initialize canvas and camera animation

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-004.md

Sets up a solar system scene with nested groups and implements a camera landmark transition to reset the view.

```js
(async () => {
    const { Canvas, Circle, Group } = Lesson4;
    const canvas = await Utils.createCanvas(Canvas, 400, 400);

    const solarSystem = new Group();
    const earthOrbit = new Group();
    const moonOrbit = new Group();

    const sun = new Circle({
        cx: 0,
        cy: 0,
        r: 100,
        fill: 'red',
    });
    const earth = new Circle({
        cx: 0,
        cy: 0,
        r: 50,
        fill: 'blue',
    });
    const moon = new Circle({
        cx: 0,
        cy: 0,
        r: 25,
        fill: 'yellow',
    });
    solarSystem.appendChild(sun);
    solarSystem.appendChild(earthOrbit);
    earthOrbit.appendChild(earth);
    earthOrbit.appendChild(moonOrbit);
    moonOrbit.appendChild(moon);

    solarSystem.position.x = 200;
    solarSystem.position.y = 200;
    earthOrbit.position.x = 100;
    moonOrbit.position.x = 100;

    canvas.appendChild(solarSystem);

    let id;
    const animate = () => {
        solarSystem.rotation += 0.01;
        earthOrbit.rotation += 0.02;
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });

    const landmark = canvas.camera.createLandmark({
        x: 0,
        y: 0,
        zoom: 1,
        rotation: 0,
    });
    $button.onclick = () => {
        canvas.camera.gotoLandmark(landmark, {
            duration: 1000,
            easing: 'ease',
        });
    };

    return canvas.getDOM();
})();
```

--------------------------------

### Interactive input controls

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-002.md

UI inputs for controlling circle properties in the example environment.

```js
cx2 = Inputs.range([50, 300], { label: 'cx', value: 100, step: 1 });
```

```js
cy2 = Inputs.range([50, 300], { label: 'cy', value: 100, step: 1 });
```

```js
r2 = Inputs.range([50, 300], { label: 'r', value: 100, step: 1 });
```

```js
fill2 = Inputs.color({ label: 'fill', value: '#ff0000' });
```

--------------------------------

### Example XLIFF Translation File

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-007.md

The structure of an xlf file containing translated strings.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file target-language="zh-Hans" source-language="en" original="lit-localize-inputs" datatype="plaintext">
<body>
<trans-unit id="sa10f310edb35fa9f">
  <source>Main menu</source>
  <target>主菜单</target>
</trans-unit>
</body>
</file>
</xliff>
```

--------------------------------

### Initialize Liveblocks Client for Collaboration

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/zh/guide/lesson-020.md

Set up the Liveblocks client with your public API key and enter a room to enable real-time collaboration. This example also configures Yjs provider with experimental V2 encoding for better performance.

```ts
import { createClient } from '@liveblocks/client';
import { getYjsProviderForRoom } from '@liveblocks/yjs';

const client = createClient({
    publicApiKey: 'pk_dev...',
});
const { room, leave } = client.enterRoom('my-room-id', {});

const yProvider = getYjsProviderForRoom(room, {
    // Enable V2 encoding for better performance with LiveMaps
    // https://liveblocks.io/docs/guides/yjs-best-practices-and-tips#Enable-experimental-V2-encoding-for-Y.Maps
    useV2Encoding_experimental: true,
});
const yDoc = yProvider.getYDoc();
```

--------------------------------

### Initialize Canvas and Circle

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-002.md

Sets up a basic canvas and renders a red circle using the Lesson2 library.

```javascript
(async () => {
    const { Canvas, Circle } = Lesson2;

    const canvas = await Utils.createCanvas(Canvas, 200, 200);

    const circle = new Circle({
        cx: 100,
        cy: 100,
        r: 100,
        fill: 'red',
    });
    canvas.appendChild(circle);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });
    return canvas.getDOM();
})();
```

--------------------------------

### Render Canvas Animation

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/example/rounded-rectangle-shadow.md

Initializes the canvas, adds the rectangle, and starts the animation loop.

```js
(async () => {
    const { Canvas } = Core;

    const canvas = await Utils.createCanvas(Canvas, 200, 200);

    canvas.appendChild(rect);

    let id;
    const animate = () => {
        canvas.render();
        id = requestAnimationFrame(animate);
    };
    animate();

    unsubscribe(() => {
        cancelAnimationFrame(id);
        canvas.destroy();
    });
    return canvas.getDOM();
})();
```

--------------------------------

### Render Graph Initialization and Edge Addition

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-030.md

Demonstrates initializing a RenderGraph and adding nodes and edges to define the rendering pipeline. This is a basic example of setting up a render graph structure.

```rust
let mut graph = RenderGraph::default();
graph.add_node(Labels::A, MyNode);
graph.add_node(Labels::B, MyNode);
graph.add_node_edge(Labels::B, Labels::A);
```

--------------------------------

### Export SVG Metadata

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-031.md

Examples of embedding logical metadata within SVG elements for persistence.

```html
<svg content='&lt;mxfile host="app.diagrams.net" diagram name="Page-1"'></svg>
```

```html
<line x1="0" y1="0" data-binding="" />
```

--------------------------------

### Define AntV G6 Edge Instance

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-031.md

Example of an edge instance using anchor indices.

```ts
{
    source: 'nodeA',
    target: 'nodeB',
    sourceAnchor: 1,
    targetAnchor: 3,
}
```

--------------------------------

### Initialize Canvas and Circle

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/zh/guide/lesson-002.md

Sets up the canvas and adds a circle instance for rendering.

```js
(async () => {
    const { Canvas, Circle } = Lesson2;

    const canvas = await Utils.createCanvas(Canvas, 200, 200);

    const circle = new Circle({
        cx: 100,
        cy: 100,
        r: 100,
        fill: 'red',
    });
    canvas.appendChild(circle);

    const animate = () => {
        canvas.render();
        requestAnimationFrame(animate);
    };
    animate();
    return canvas.getDOM();
})();
```

--------------------------------

### Define D2 connections

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-032.md

Example of complex connection syntax in D2 including arrowheads and labels.

```d2
dogs -> cats -> mice: chase
replica 1 <-> replica 2
a -> b: To err is human, to moo bovine {
  source-arrowhead: 1
  target-arrowhead: * {
    shape: diamond
  }
}
```

--------------------------------

### Define Basic ECS Queries

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-018.md

Examples of simple query definitions in ECSY and bitECS frameworks.

```typescript
// https://ecsyjs.github.io/ecsy/docs/#/manual/Architecture?id=queries
SystemName.queries = {
    boxes: { components: [Box] },
    spheres: { components: [Sphere] },
};

// https://github.com/NateTheGreatt/bitECS/blob/master/docs/API.md#defineQuery
const movementQuery = defineQuery([Position, Velocity]);
```

--------------------------------

### Initialize Canvas Instance

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-004.md

Creates a canvas instance for the lesson using the provided utility.

```js
canvas = call(() => {
    const { Canvas } = Lesson4;
    return Utils.createCanvas(Canvas, 400, 400);
});
```

--------------------------------

### Initialize WebGPU Canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/experiment/particles.md

Use the '<ic-canvas>' component with the 'webgpu' renderer to enable WebGPU capabilities.

```html
<ic-canvas renderer="webgpu" />
```

--------------------------------

### Project Structure

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/ecs/README.md

Overview of the project directory layout.

```bash
src/
├── plugins/                   # Built-in plugins
│   │── Hierarchy
│   │── Transform
|   │── ...
├── components/                # Components
│   │── Canvas
│   │── Theme
│   │── Grid
|   |── ...
├── systems/                   # Systems
|   |── ...
├── enviroment/                # Browser, WebWorker...
├── shaders/                   # Built-in shaders e.g. SDF, Mesh...
├── drawcalls/
```

--------------------------------

### Import FlexTree Component

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/example/flextree.md

Registers the FlexTree component within a Vue script setup block.

```vue
<script setup>
import FlexTree from '../components/FlexTree.vue'
</script>
```

--------------------------------

### Initialize container with layout

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-033.md

Configures a container with specific layout properties using the pixijs/layout library.

```ts
const container = new Container({
    layout: {
        width: '80%',
        height: '80%',
        gap: 4,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignContent: 'center',
    },
});
```

--------------------------------

### Define Text Content

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/text.md

Example of creating a Text instance with multi-line content and mixed character sets.

```js
text = call(() => {
    const { Canvas, Text } = Core;
    const text = new Text({
        x: 300,
        y: 100,
        content: 'Hello, World!\n你好，世界！🌞🌛',
        fontFamily: 'Arial',
        fontSize: 20,
        fontWeight: 'normal',
    });
    return text;
});
```

--------------------------------

### Generate Fractional Indices

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-020.md

Example of generating multiple fractional index keys between two existing bounds.

```ts
// @see https://github.com/excalidraw/excalidraw/blob/9ee0b8ffcbd3664a47748a93262860321a203821/packages/excalidraw/fractionalIndex.ts#L380
import { generateNKeysBetween } from 'fractional-indexing';
const fractionalIndices = generateNKeysBetween(
    elements[lowerBoundIndex]?.index,
    elements[upperBoundIndex]?.index,
    indices.length,
) as FractionalIndex[];
```

--------------------------------

### Import Spectrum UI

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/plugin-lasso/README.md

Include the Spectrum UI styles and components required for the lasso tool.

```ts
import '@infinite-canvas-tutorial/lasso/spectrum';
```

--------------------------------

### Define parent and child nodes

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-033.md

Example configuration for parent and child nodes using flexbox properties.

```ts
const parent = {
    id: 'parent',
    type: 'rect',
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
};
const child = {
    id: 'child',
    parentId: 'parent',
    type: 'rect',
    width: 50,
    height: 50,
};
```

--------------------------------

### Bevy EventReader for Window Resize

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-018.md

Example of a Bevy system using an EventReader to process WindowResized events.

```rust
fn on_resize_system(
    mut text: Single<&mut Text, With<ResolutionText>>,
    mut resize_reader: EventReader<WindowResized>,
) {
    for e in resize_reader.read() {
        // When resolution is being changed
    }
}
```

--------------------------------

### Define a VectorNetwork Triangle

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-022.md

Example of a triangular VectorNetwork structure using vertices, segments, and a region loop.

```ts
node.vectorNetwork = {
    // The vertices of the triangle
    vertices: [
        { x: 0, y: 100 },
        { x: 100, y: 100 },
        { x: 50, y: 0 },
    ],

    // The edges of the triangle. 'start' and 'end' refer to indices in the vertices array.
    segments: [
        {
            start: 0,
            tangentStart: { x: 0, y: 0 }, // optional
            end: 1,
            tangentEnd: { x: 0, y: 0 }, // optional
        },
        {
            start: 1,
            end: 2,
        },
        {
            start: 2,
            end: 0,
        },
    ],

    // The loop that forms the triangle. Each loop is a
    // sequence of indices into the segments array.
    regions: [{ windingRule: 'NONZERO', loops: [[0, 1, 2]] }],
};
```

--------------------------------

### Initialize and Use `<ic-spectrum-canvas>` Web Component

Source: https://context7.com/xiaoiver/infinite-canvas-tutorial/llms.txt

Set up the `<ic-spectrum-canvas>` web component with specified renderer, theme, and shader compiler path. Listen for events like 'ic-ready', 'nodes-updated', 'selected-nodes-changed', and 'resized' to interact with the canvas API and UI.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import '@infinite-canvas-tutorial/webcomponents/spectrum';
  </script>
</head>
<body>
  <ic-spectrum-canvas
    id="canvas"
    renderer="webgl"
    theme="light"
    shader-compiler-path="https://unpkg.com/@antv/g-device-api@1.6.8/dist/pkg/glsl_wgsl_compiler_bg.wasm"
  ></ic-spectrum-canvas>

  <script type="module">
    import { Event } from '@infinite-canvas-tutorial/webcomponents';

    const canvas = document.getElementById('canvas');

    // Listen for canvas ready event
    canvas.addEventListener(Event.READY, (e) => {
      const api = e.detail;
      console.log('Canvas is ready!', api);

      // Add initial shapes
      api.updateNodes([
        {
          id: 'welcome-text',
          type: 'text',
          x: 100,
          y: 100,
          content: 'Welcome to Infinite Canvas!',
          fontSize: 32,
          fontFamily: 'system-ui',
          fill: '#2d3436',
          zIndex: 1
        }
      ]);
    });

    // Listen for node changes
    canvas.addEventListener(Event.NODES_UPDATED, (e) => {
      console.log('Nodes updated:', e.detail.nodes);
    });

    // Listen for selection changes
    canvas.addEventListener(Event.SELECTED_NODES_CHANGED, (e) => {
      console.log('Selection changed:', e.detail.selected);
    });

    // Listen for resize
    canvas.addEventListener(Event.RESIZED, (e) => {
      console.log('Canvas resized:', e.detail.width, e.detail.height);
    });
  </script>
</body>
</html>
```

--------------------------------

### Implement unit test for Circle

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-011.md

Example unit test for verifying shape attribute getters and setters.

```typescript
// __tests__/unit/circle.spec.ts
import { Circle } from '../../packages/core/src';

describe('Circle', () => {
    it('should get/set attributes correctly.', () => {
        const circle = new Circle({
            cx: 50,
            cy: 50,
            r: 50,
            fill: '#F67676',
        });
        expect(circle.cx).toBe(50);
    });
});
```

--------------------------------

### GLSL instance transformation attributes

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-008.md

Example of using instance attributes for world transformation matrices in GLSL.

```glsl
#ifdef INSTANCES
  attribute vec4 world0;
  attribute vec4 world1;
  attribute vec4 world2;
  attribute vec4 world3;

  finalWorld = mat4(world0, world1, world2, world3);
#endif
```

--------------------------------

### Declare Plugin

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/ecs/README.md

Define a plugin using system stages to execute logic during startup.

```ts
import { system, PreStartUp } from '@infinite-canvas-tutorial/ecs';

const MyPlugin = () => {
    system(PreStartUp)(StartUpSystem);
};
```

--------------------------------

### Initialize Text Objects for BiDi Content

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/example/bidi.md

Create Text instances with specific coordinates, content, and styling to support bidirectional text rendering.

```ts
const text = new Text({
    x: 50,
    y: 100,
    content: 'ABCג ב אDEF',
    fontSize: 30,
    fill: '#F67676',
});

const text2 = new Text({
    x: 50,
    y: 150,
    content: 'سلام',
    fontSize: 30,
    fill: '#F67676',
});
```

--------------------------------

### Initialize and Render Canvas

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-001.md

Initializes the canvas with specified renderer and dimensions, sets up a resize handler, and starts an animation loop for rendering. Ensure the shaderCompilerPath is correctly set for the chosen renderer.

```javascript
(async () => {
    const { Canvas } = Lesson1;

    const $canvas = document.createElement('canvas');
    $canvas.style.outline = 'none';
    $canvas.style.padding = '0px';
    $canvas.style.margin = '0px';
    $canvas.style.border = '1px solid black';

    const canvas = await new Canvas({
        canvas: $canvas,
        renderer,
        shaderCompilerPath:
            'https://unpkg.com/@antv/g-device-api@1.6.8/dist/pkg/glsl_wgsl_compiler_bg.wasm',
    }).initialized;

    const resize = (width, height) => {
        const scale = window.devicePixelRatio;
        $canvas.width = Math.floor(width * scale);
        $canvas.height = Math.floor(height * scale);
        $canvas.style.width = `${width}px`;
        $canvas.style.height = `${height}px`;
        canvas.resize(width, height);
    };
    resize(width, height);

    const animate = () => {
        canvas.render();
        requestAnimationFrame(animate);
    };
    animate();
    return $canvas;
})();
```

--------------------------------

### Setup canvas event listeners

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-014.md

Configure canvas attributes and append shapes upon the ic-ready event.

```js
call(() => {
    $icCanvas3.setAttribute('modes', '[]');

    $icCanvas3.style.width = '100%';
    $icCanvas3.style.height = '250px';

    $icCanvas3.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;
        canvas.appendChild(circle1);
        canvas.appendChild(circle2);
    });
});
```

--------------------------------

### Initialize Liveblocks and Yjs Provider

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/example/liveblocks.md

Configures the Liveblocks client and establishes a connection to a room to obtain a Yjs document.

```ts
import { createClient } from '@liveblocks/client';
import { getYjsProviderForRoom } from '@liveblocks/yjs';

const client = createClient({
    publicApiKey: 'pk_dev...',
});
const { room, leave } = client.enterRoom('my-room-id', {});

const yProvider = getYjsProviderForRoom(room);
const yDoc = yProvider.getYDoc();
```

--------------------------------

### Import Vello Component

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/experiment/vello.md

Imports the Vello component for use within the Vue application. This is a setup script.

```javascript
import Vello from '../components/Vello.vue'
```

--------------------------------

### Plugin Registration and Initialization

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-001.md

Illustrates the process of registering plugins and initializing the canvas instance. It iterates through provided plugins, applies them to the context, and calls synchronous and asynchronous initialization hooks.

```typescript
import { Renderer } from './plugins';

this.#instancePromise = (async () => {
  const { hooks } = this.#pluginContext;
  [new Renderer()].forEach((plugin) => {
    plugin.apply(this.#pluginContext);
  });
  hooks.init.call();
  await hooks.initAsync.promise();
  return this;
})();
```

--------------------------------

### Get Element Bounding Box

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/reference/shape.md

Retrieve the axis-aligned bounding box (AABB) of an element in world coordinates.

```typescript
circle.getBounds(); // AABB {}
```

--------------------------------

### Initialize SAM Plugin

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/plugin-sam/README.md

Import and initialize the SAMPlugin for the application. Ensure other default plugins and UIPlugin are also included.

```typescript
import { SAMPlugin } from '@infinite-canvas-tutorial/sam';

new App().addPlugins(...DefaultPlugins, UIPlugin, SAMPlugin).run();
```

--------------------------------

### Get Perimeter Point

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-031.md

Retrieves the perimeter point for a given state using the graph view API.

```ts
// Note: generally next is passed as "the other center point", orthogonal is usually false
var pointA = graph.view.getPerimeterPoint(stateA, centerB, false, 0);
var pointB = graph.view.getPerimeterPoint(stateB, centerA, false, 0);
```

--------------------------------

### Get First Child Node

Source: https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/packages/site/docs/guide/lesson-023.md

Retrieves the first child of a given node. Returns the node itself if it has no children.

```javascript
function nextLeft(v) {
    var children = v.children;
    return children ? children[0] : v.t;
}
```
Tokens:
Raw