Information about the app/website js-draw is running within. This is shown at the beginning of the about dialog.
Optionaldescription?: string(Optional) A brief description of the app
Optionalversion?: string(Optional) The app version
Provides a set of icons for the editor.
See, for example, the @js-draw/material-icons package.
Configures the default InsertImageWidget control.
Optional BetashowA custom callback to show an image picker. If given, this should return
a list of Files representing the images selected by the picker.
If not given, the default file picker shown by a file input is shown.
-- API may change between minor releases.
Overrides for keyboard shortcuts. For example,
{
'some.shortcut.id': [ KeyBinding.keyboardShortcutFromString('ctrl+a') ],
'another.shortcut.id': [ ]
}
where shortcut IDs map to lists of associated keybindings.
Uses a default English localization if a translation is not given.
Maximum zoom fraction (e.g. 2 → 200% zoom). Defaults to .
Minimum zoom fraction (e.g. 0.5 → 50% zoom). Defaults to .
Additional messages to show in the "about" dialog.
Configures the default PenTool tools.
Example:
import { Editor, makePolylineBuilder } from 'js-draw';
const editor = new Editor(document.body, {
pens: {
additionalPenTypes: [{
name: 'Polyline (For debugging)',
id: 'custom-polyline',
factory: makePolylineBuilder,
// The pen doesn't create fixed shapes (e.g. squares, rectangles, etc)
// and so should go under the "pens" section.
isShapeBuilder: false,
}],
},
});
editor.addToolbar();
OptionaladditionalAdditional pen types that can be selected in a toolbar.
OptionalfilterShould return true if a pen type should be shown in the toolbar.
import {Editor} from 'js-draw';
const editor = new Editor(document.body, {
// Only allow selecting the polyline pen from the toolbar.
pens: { filterPenTypes: p => p.id === 'polyline-pen' },
});
editor.addToolbar();
Notice that this setting only affects the toolbar GUI.
Defaults to RenderingMode.CanvasRenderer
Configures the default TextTool control and text tool.
Optionalfonts?: string[]Fonts to show in the text UI.
true if touchpad/mousewheel scrolling should scroll the editor instead of the document.
This does not include pinch-zoom events.
Defaults to true.
Provides settings to an instance of an editor. See the Editor Editor.constructor.
Example
import { EditorSettings, Editor, KeyBinding, makeEdgeToolbar } from 'js-draw'; import { MaterialIconProvider } from '@js-draw/material-icons'; // All settings are optional! Try commenting them out. const settings: EditorSettings = { // Use a non-default set of icons iconProvider: new MaterialIconProvider(), // Only capture mouse wheel events if the editor has focus. This is useful // when the editor is part of a larger, scrolling page. wheelEventsEnabled: 'only-if-focused', // The default minimum zoom is 2e-10... minZoom: 2e-10, // and the maximum default zoom is 1e12 maxZoom: 1e12, // Override some keyboard shortcuts! keyboardShortcutOverrides: { // The ID for the save action 'jsdraw.toolbar.SaveActionWidget.save': [ // "Meta" = the command key on MacOS KeyBinding.fromString('ctrlOrMeta+s'), // Also map ctrl+M to save! KeyBinding.fromString('ctrl+m'), ], }, }; // Create the editor! const editor = new Editor(document.body, settings); // Selects a specific toolbar type. See also makeDropdownToolbar const toolbar = makeEdgeToolbar(editor); toolbar.addDefaults(); // Add the action button that is triggered by the save keyboard shortcuts above. toolbar.addSaveButton(() => { const saveData = editor.toSVG().outerHTML; // Do something with saveData alert('Saved data:\n\n' + saveData); });