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:

    import {Editor,CanvasRenderer} from 'js-draw';

// Create an editor and load initial data -- don't add to the body (hidden editor).
const editor = new Editor(document.createElement('div'));
await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
---visible---
// 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