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
Allows changing how js-draw interacts with the clipboard.
Note: Even when a custom clipboardApi is specified, if a ClipboardEvent is available
(e.g. from when a user pastes with ctrl+v), the ClipboardEvent will be preferred.
Called to read data to the clipboard. Keys in the result are MIME types. Values are the data associated with that type.
Called to write data to the clipboard. Keys in data are MIME types. Values are the data associated with that type.
Provides a set of icons for the editor.
See, for example, the @js-draw/material-icons package.
Configures the default InsertImageWidget control.
OptionalshowImagePicker?: ShowCustomFilePickerCallbackA 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.
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();
OptionaladditionalPenTypes?: readonly Readonly<PenTypeRecord>[]Additional pen types that can be selected in a toolbar.
OptionalfilterPenTypes?: (penType: PenTypeRecord) => booleanShould return true if a pen type should be shown in the toolbar.
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); });