Canvas Addons

Addons extend ChamevoCanvas with optional features via the canvas.use() plugin pattern.

Using Addons

import { ChamevoCanvas, snapGuides, ruler, multiSelection, highlightEditable } from '@chamevo/core';

const canvas = new ChamevoCanvas(canvasEl, { width: 800, height: 600 });

// Enable smart alignment guides
canvas.use(snapGuides);

// Enable rulers
canvas.use(ruler, { unit: 'mm' });

// Enable Shift+click multi-selection
canvas.use(multiSelection);

// Highlight editable objects with dashed border
canvas.use(highlightEditable, { color: '#2185d0' });

Built-in Addons

Addon	Description	Options
snapGuides	Smart alignment guides when moving/resizing elements.	—
ruler	X/Y axis rulers with unit display.	{ unit: 'mm' | 'cm' | 'inch' | 'px' }
multiSelection	Select multiple elements with Shift+click.	—
highlightEditable	Show dashed border on editable objects.	{ color: string }

Canvas Overlay Components

Some visual overlays are implemented as StencilJS components rather than canvas addons. These are automatically rendered by cv-customizer and controlled via options:

Component	Option	Description
<cv-size-tooltip>	sizeTooltip: true	Shows W × H dimensions above the selected image element in the configured unitOfMeasurement.

Creating Custom Addons

Addons implement the ChamevoAddon interface:

import type { ChamevoAddon } from '@chamevo/core';

const myAddon: ChamevoAddon = {
    name: 'my-addon',

    install(canvas, options) {
        // Called once when canvas.use(myAddon) is invoked
        // Set up event listeners, modify canvas behavior, etc.

        canvas.on('object:added', (e) => {
            console.log('Element added:', e.target);
        });
    },

    uninstall(canvas) {
        // Clean up when addon is removed
    },
};

// Usage
canvas.use(myAddon, { /* custom options */ });

Next Steps

• Core Canvas — Low-level canvas usage
• Configuration — smartGuides, unitOfMeasurement options