Class EditorImage

Handles lookup/storage of elements in the image.

js-draw images are made up of a collection of AbstractComponents (which includes Strokes, TextComponents, etc.). An EditorImage is the data structure that stores these components.

Here's how to do a few common operations:

Example:

import { Editor, RenderingStyle, Erase, Stroke, pathToRenderable } from 'js-draw';
import { Path, Color4, Point2, Vec2, Rect2 } from '@js-draw/math';
const editor = new Editor(document.body);


// //////////////// //
// Helper functions //
// //////////////// //

function addStroke(path: Path, style: RenderingStyle) {
const stroke = new Stroke([
pathToRenderable(path, style)
]);

// Create a command that adds the stroke to the image
// (but don't apply it yet).
const command = editor.image.addComponent(stroke);
// Actually apply the command.
editor.dispatch(command);
}

function addBoxAt(point: Point2, color: Color4) {
// Create a 10x10 square at the given point:
const box = new Rect2(point.x, point.y, 10, 10);

addStroke(
Path.fromRect(box),
{ fill: color },
);
}


function makeTrashIcon() {
const container = document.createElement('div');
container.textContent = '🗑️';
return container;
}


// //////////////////// //
// End helper functions //
// //////////////////// //



// Add some components to the image:
addBoxAt(Vec2.of(0, 0), Color4.green);
addBoxAt(Vec2.of(20, 0), Color4.orange);
addBoxAt(Vec2.of(20, 20), Color4.blue);

// Get the components in a small rectangle near (0, 0)
const components = editor.image.getComponentsIntersecting(
new Rect2(0, 0, 5, 5), // a 5x5 square with top left (0, 0)
);


// Add a button that removes the components
const toolbar = editor.addToolbar();
toolbar.addActionButton({
icon: makeTrashIcon(),
label: 'remove near (0,0)',
}, () => {
const deleteCommand = new Erase(components);
editor.dispatch(deleteCommand);
});

Properties

notifier

Methods

addComponent addElement findParent getAllComponents getAllElements getAutoresizeEnabled getBackgroundComponents getComponentsIntersecting getElementsIntersectingRegion getImportExportRect getImportExportViewport lookupElement queueRerenderOf render setAutoresizeEnabled setImportExportRect addComponent addElement

Properties

Readonlynotifier

notifier: EditorImageNotifier

Event handler

Methods

addComponent

addElement

findParent

getAllComponents

getAllElements

getAutoresizeEnabled

getBackgroundComponents

getComponentsIntersecting

  • getComponentsIntersecting(
        region: Rect2,
        includeBackground?: boolean,
    ): AbstractComponent[]

  • Parameters

    • region: Rect2
    • includeBackground: boolean = false

    Returns AbstractComponent[]

    a list of AbstractComponents intersecting region, sorted by increasing z-index.

    Components in the background layer are only included if includeBackground is true.

getElementsIntersectingRegion

getImportExportRect

getImportExportViewport

lookupElement

queueRerenderOf

render

  • render(renderer: AbstractRenderer, viewport: null | Viewport): void

  • Renders this image to the given renderer.

    If viewport is non-null, only components that can be seen from that viewport will be rendered. If viewport is null, all components are rendered.

    Example:

    // Given some editor.
    // Set up the canvas to be drawn onto.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure that the canvas can fit the entire rendering
    const viewport = editor.image.getImportExportViewport();
    canvas.width = viewport.getScreenRectSize().x;
    canvas.height = viewport.getScreenRectSize().y;

    // Render editor.image onto the renderer
    const renderer = new CanvasRenderer(ctx, viewport);
    editor.image.render(renderer, viewport);

    // Add the rendered canvas to the document.
    document.body.appendChild(canvas);

    Parameters

    Returns void

setAutoresizeEnabled

  • setAutoresizeEnabled(autoresize: boolean): Command

  • Returns a Command that sets whether the image should autoresize when AbstractComponents are added/removed.

    Parameters

    • autoresize: boolean

    Returns Command

    Example

    import { Editor } from 'js-draw';

    const editor = new Editor(document.body);
    const toolbar = editor.addToolbar();

    // Add a save button to demonstrate what the output looks like
    // (it should change size to fit whatever was drawn)
    toolbar.addSaveButton(() => {
    document.body.replaceChildren(editor.toSVG({ sanitize: true }));
    });

    // Actually using setAutoresizeEnabled:
    //
    // To set autoresize without announcing for accessibility/making undoable
    const addToHistory = false;
    editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), addToHistory);

    // Add to undo history **and** announce for accessibility
    //editor.dispatch(editor.image.setAutoresizeEnabled(true), true);

setImportExportRect

StaticaddComponent

  • addComponent(
        elem: AbstractComponent,
        applyByFlattening?: boolean,
    ): SerializableCommand

  • Returns a command that adds the given element to the EditorImage. If applyByFlattening is true, the content of the wet ink renderer is rendered onto the main rendering canvas instead of doing a full re-render.

    Parameters

    Returns SerializableCommand

    See

    Display.flatten

    Example:

    import {
    Editor, EditorImage, Stroke, Path, Color4,
    } from 'js-draw';

    const editor = new Editor(document.body);

    const stroke = Stroke.fromFilled(
    Path.fromString('m0,0 l100,100 l0,-10 z'),
    Color4.red,
    );
    editor.dispatch(EditorImage.addComponent(stroke));

StaticaddElement

Settings

Member Visibility

On This Page

Properties
Methods
OpenSource licenses MMNEPVFCICPMFPCPTTAAATR