AbstractAdds 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.
AbstractaddAdds toolbar widgets based on the enabled tools, and additional tool-like buttons (e.g. DocumentPropertiesWidget and InsertImageWidget).
FinalAdds 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.
AbstractaddAdds a spacer.
Toolbars can choose to ignore calls to addSpacer.
Optionaloptions: 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 AbstractaddCalled 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
Optionalfilter: (tool: BaseTool) => booleanProtectedcloseProtecteddeserializeProtectedgetDo not modify the return value.
ProtectedgetProtectedgetProtectedmakeCreates, but does not add, an action button to this container.
ProtectedmanageRemoves listener when remove is called.
Protected AbstractonInternal logic for remove. Implementers should remove the toolbar from its container.
Removes the given widget from this toolbar.
Protected AbstractremoveCalled by removeWidget. Implement this to remove a new widget from the toolbar.
Protectedserialize
Abstract base class for js-draw editor toolbars.
See Editor.addToolbar, makeDropdownToolbar, and makeEdgeToolbar.