Class AbstractToolbarAbstract

Abstract base class for js-draw editor toolbars.

See Editor.addToolbar, makeDropdownToolbar, and makeEdgeToolbar.

Properties

editor: Editor
localizationTable: ToolbarLocalization = defaultToolbarLocalization

Methods

  • Adds 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.

    Parameters

    • title: string | ActionButtonIcon
    • command: (() => void)
        • (): void
        • Returns void

    • options: boolean | ToolbarActionButtonOptions = true

    Returns BaseWidget

    The added button.

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

    Parameters

    • exitCallback: (() => void)
        • (): void
        • Returns void

    • labelOverride: Partial<ActionButtonIcon> = {}

    Returns BaseWidget

  • Adds a save button that, when clicked, calls saveCallback.

    Parameters

    • saveCallback: (() => void)
        • (): void
        • Returns void

    • labelOverride: Partial<ActionButtonIcon> = {}

    Returns BaseWidget

    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.

  • Adds a spacer.

    Toolbars can choose to ignore calls to addSpacer.

    Parameters

    • Optionaloptions: Partial<SpacerOptions>

    Returns void

    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.

    Parameters

    • tags: string[]
    • title: string | ActionButtonIcon
    • command: (() => void)
        • (): void
        • Returns void

    • options: boolean | ToolbarActionButtonOptions = true

    Returns BaseWidget

  • Adds undo and redo buttons that trigger the editor's built-in undo and redo functionality.

    Parameters

    • undoFirst: boolean = true

    Returns void

  • Adds an ActionButtonWidget or BaseToolWidget. The widget should not have already have a parent (i.e. its addTo method should not have been called).

    Parameters

    Returns void

    const toolbar = editor.addToolbar();
    const insertImageWidget = new InsertImageWidget(editor);
    toolbar.addWidget(insertImageWidget);
  • 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

    Parameters

    • Optionalfilter: ((tool: BaseTool) => boolean)
        • (tool): boolean
        • Parameters

          Returns boolean

    Returns void

  • Called by deserializeState with a version of the JSON outputted previously by serializeInternal.

    Parameters

    • _json: any

    Returns void

  • Deserialize toolbar widgets from the given state. Assumes that toolbar widgets are in the same order as when state was serialized.

    Parameters

    • state: string

    Returns void

  • Creates, but does not add, an action button to this container.

    Parameters

    • title: string | ActionButtonIcon
    • command: (() => void)
        • (): void
        • Returns void

    • options: boolean | ToolbarActionButtonOptions = true

    Returns BaseWidget

  • Remove this toolbar from its container and clean up listeners. This should only be called once for a given toolbar.

    Returns void

  • Called by serializeState to attach any additional JSONifyable data to the serialized result.

    Returns any

    an object that can be converted to JSON with JSON.stringify.

OpenSource licenses