OptionalapplyByFlattening: booleanReturns the parent of the given element, if it exists.
all elements in the image, sorted by z-index. This can be slow for large images.
Does not include background elements. See getBackgroundComponents.
Returns all components that make up the background of this image. These components are rendered below all other components.
a list of AbstractComponents intersecting region, sorted by z-index.
the AbstractComponent with id, if it exists.
Forces a re-render of elem when the image is next re-rendered as a whole.
Does nothing if elem is not in this.
Renders all nodes visible from viewport (or all nodes if viewport = null).
viewport is used to improve rendering performance. If given, it must match
the viewport used by the renderer (if any).
Returns a Command that sets whether the image should autoresize when
AbstractComponents are added/removed.
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);
Sets the import/export rectangle to the given imageRect. Disables
autoresize if it was previously enabled.
Note: The import/export rectangle is the same as the size of any BackgroundComponents (and other components that auto-resize).
StaticaddReturns 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.
Example:
import {
Editor, EditorImage, Stroke, pathToRenderable.
Path, Color4,
} from 'js-draw';
const editor = new Editor(document.body);
const stroke = new Stroke([
pathToRenderable(Path.fromString('m0,0 l100,100 l0,-10 z'), { fill: Color4.red }),
]);
editor.dispatch(EditorImage.addElement(stroke));
Handles lookup/storage of elements in the image.