Abstract
Protected
editorProtected
localizationAdds an action button with title
to this toolbar (or to the given parent
element).
options
can either be an object with properties mustBeToplevel
and/or
autoDisableInReadOnlyEditors
or a boolean value. If a boolean, it is interpreted
as being the value of mustBeToplevel
.
The added button.
Example:
import { Editor } from 'js-draw'; const editor = new Editor(document.body); const toolbar = editor.addToolbar(); function makeTrashIcon() { const container = document.createElement('div'); container.textContent = '🗑️'; return container; } toolbar.addActionButton({ icon: makeTrashIcon(), // can be any Element not in the DOM label: 'Delete all', }, () => { alert('to-do!');
Adds widgets that don't correspond to tools, but do allow the user to control the editor in some way.
By default, this includes DocumentPropertiesWidget and InsertImageWidget.
Abstract
addAdds toolbar widgets based on the enabled tools, and additional tool-like buttons (e.g. DocumentPropertiesWidget and InsertImageWidget).
Final
Adds an "Exit" button that, when clicked, calls exitCallback
.
Note: This is roughly equivalent to
toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
label: this.editor.localization.exit,
icon: this.editor.icons.makeCloseIcon(),
// labelOverride can be used to override label or icon.
...labelOverride,
}, () => {
exitCallback();
});
with some additional configuration.
Adds a save button that, when clicked, calls saveCallback
.
import { Editor, makeDropdownToolbar } from 'js-draw'; const editor = new Editor(document.body); const toolbar = makeDropdownToolbar(editor); toolbar.addDefaults(); toolbar.addSaveButton(() => alert('save clicked!'));
labelOverride
can optionally be used to change the label
or icon
of the button.
Abstract
addAdds a spacer.
Toolbars can choose to ignore calls to addSpacer
.
Optional
options: Partial<SpacerOptions>Adding a save button that moves to the very right edge of the toolbar while keeping the other buttons centered:
const toolbar = editor.addToolbar(false);
toolbar.addSpacer({ grow: 1 });
toolbar.addDefaults();
toolbar.addSpacer({ grow: 1 });
toolbar.addActionButton({
label: 'Save',
icon: editor.icons.makeSaveIcon(),
}, () => {
saveCallback();
});
Like addActionButton, except associates tags
with the button that allow
different toolbar styles to give the button tag-dependent styles.
Adds an ActionButtonWidget
or BaseToolWidget
. The widget should not have already have a parent
(i.e. its addTo
method should not have been called).
Protected
Abstract
addCalled by addWidget
. Implement this to add a new widget to the toolbar.
Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.
If filter
returns false
for a tool, no widget is added for that tool.
See addDefaultToolWidgets
Optional
filter: (tool: BaseTool) => booleanProtected
closeProtected
deserializeProtected
getDo not modify the return value.
Protected
getProtected
getProtected
makeCreates, but does not add, an action button to this container.
Protected
manageRemoves listener
when remove is called.
Protected
Abstract
onInternal logic for remove. Implementers should remove the toolbar from its container.
Removes the given widget
from this toolbar.
Protected
Abstract
removeCalled by removeWidget
. Implement this to remove a new widget from the toolbar.
Protected
serialize
Abstract base class for js-draw editor toolbars.
See Editor.addToolbar, makeDropdownToolbar, and makeEdgeToolbar.