Class EditorImage

See

EditorImage.addElement

Returns the parent of the given element, if it exists.

See

setAutoresizeEnabled

Returns all components that make up the background of this image. These components are rendered below all other components.

See

setImportExportRect

See

AbstractComponent.getId

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.

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);

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).

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.

See

Display.flatten

Example

```ts,runnable
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));
Copy

Copy