js-draw 0.18.0 → 0.18.1

package/dist/mjs/src/toolbar/HTMLToolbar.d.ts

@@ -1,103 +0,0 @@
-import Editor from '../Editor';
-import { ToolbarLocalization } from './localization';
-import { ActionButtonIcon } from './types';
-import BaseWidget from './widgets/BaseWidget';
-export declare const toolbarCSSPrefix = "toolbar-";
-interface SpacerOptions {
-    grow: number;
-    minSize: string;
-    maxSize: string;
-}
-export default class HTMLToolbar {
-    private editor;
-    private localizationTable;
-    private container;
-    private resizeObserver;
-    private listeners;
-    private widgetOrderCounter;
-    private widgetsById;
-    private widgetList;
-    private overflowWidget;
-    private static colorisStarted;
-    private updateColoris;
-    /** @internal */
-    constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
-    setupColorPickers(): void;
-    private reLayoutQueued;
-    private queueReLayout;
-    private reLayout;
-    /**
-     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
-     * (i.e. its `addTo` method should not have been called).
-     *
-     * @example
-     * ```ts
-     * const toolbar = editor.addToolbar();
-     * const insertImageWidget = new InsertImageWidget(editor);
-     * toolbar.addWidget(insertImageWidget);
-     * ```
-     */
-    addWidget(widget: BaseWidget): void;
-    /**
-     * Adds a spacer.
-     *
-     * @example
-     * Adding a save button that moves to the very right edge of the toolbar
-     * while keeping the other buttons centered:
-     * ```ts
-     * const toolbar = editor.addToolbar(false);
-     *
-     * toolbar.addSpacer({ grow: 1 });
-     * toolbar.addDefaults();
-     * toolbar.addSpacer({ grow: 1 });
-     *
-     * toolbar.addActionButton({
-     * 	label: 'Save',
-     * 	icon: editor.icons.makeSaveIcon(),
-     * }, () => {
-     * 	  saveCallback();
-     * });
-     * ```
-     */
-    addSpacer(options?: Partial<SpacerOptions>): void;
-    serializeState(): string;
-    /**
-     * Deserialize toolbar widgets from the given state.
-     * Assumes that toolbar widgets are in the same order as when state was serialized.
-     */
-    deserializeState(state: string): void;
-    /**
-     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
-     *
-     * @return The added button.
-     */
-    addActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
-    addUndoRedoButtons(): void;
-    addDefaultToolWidgets(): void;
-    addDefaultActionButtons(): void;
-    /**
-     * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
-     * that this widget is in the correct space (if shown).
-     *
-     * @example
-     * ```ts
-     * toolbar.addDefaultToolWidgets();
-     * toolbar.addOverflowWidget();
-     * toolbar.addDefaultActionButtons();
-     * ```
-     * shows the overflow widget between the default tool widgets and the default action buttons,
-     * if shown.
-     */
-    addOverflowWidget(): void;
-    /**
-     * Adds both the default tool widgets and action buttons. Equivalent to
-     * ```ts
-     * toolbar.addDefaultToolWidgets();
-     * toolbar.addOverflowWidget();
-     * toolbar.addDefaultActionButtons();
-     * ```
-     */
-    addDefaults(): void;
-    remove(): void;
-}
-export {};

package/dist/mjs/src/toolbar/HTMLToolbar.mjs

@@ -1,376 +0,0 @@
-import  { EditorEventType }  from '../types.mjs';
-import { coloris, init as colorisInit } from '@melloware/coloris';
-import  Color4  from '../Color4.mjs';
-import  { defaultToolbarLocalization }  from './localization.mjs';
-import  SelectionTool  from '../tools/SelectionTool/SelectionTool.mjs';
-import  PanZoomTool  from '../tools/PanZoom.mjs';
-import  TextTool  from '../tools/TextTool.mjs';
-import  EraserTool  from '../tools/Eraser.mjs';
-import  PenTool  from '../tools/Pen.mjs';
-import  PenToolWidget  from './widgets/PenToolWidget.mjs';
-import  EraserWidget  from './widgets/EraserToolWidget.mjs';
-import  SelectionToolWidget  from './widgets/SelectionToolWidget.mjs';
-import  TextToolWidget  from './widgets/TextToolWidget.mjs';
-import  HandToolWidget  from './widgets/HandToolWidget.mjs';
-import  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
-import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
-import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
-import  OverflowWidget  from './widgets/OverflowWidget.mjs';
-export const toolbarCSSPrefix = 'toolbar-';
-export default class HTMLToolbar {
-    /** @internal */
-    constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
-        this.editor = editor;
-        this.localizationTable = localizationTable;
-        this.listeners = [];
-        // Flex-order of the next widget to be added.
-        this.widgetOrderCounter = 0;
-        this.widgetsById = {};
-        this.widgetList = [];
-        // Widget to toggle overflow menu.
-        this.overflowWidget = null;
-        this.updateColoris = null;
-        this.reLayoutQueued = false;
-        this.container = document.createElement('div');
-        this.container.classList.add(`${toolbarCSSPrefix}root`);
-        this.container.setAttribute('role', 'toolbar');
-        parent.appendChild(this.container);
-        if (!HTMLToolbar.colorisStarted) {
-            colorisInit();
-            HTMLToolbar.colorisStarted = true;
-        }
-        this.setupColorPickers();
-        if ('ResizeObserver' in window) {
-            this.resizeObserver = new ResizeObserver((_entries) => {
-                this.reLayout();
-            });
-            this.resizeObserver.observe(this.container);
-        }
-        else {
-            console.warn('ResizeObserver not supported. Toolbar will not resize.');
-        }
-    }
-    // @internal
-    setupColorPickers() {
-        // Much of the setup only needs to be done once.
-        if (this.updateColoris) {
-            this.updateColoris();
-            return;
-        }
-        const closePickerOverlay = document.createElement('div');
-        closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
-        this.editor.createHTMLOverlay(closePickerOverlay);
-        const maxSwatchLen = 12;
-        const swatches = [
-            Color4.red.toHexString(),
-            Color4.purple.toHexString(),
-            Color4.blue.toHexString(),
-            Color4.clay.toHexString(),
-            Color4.black.toHexString(),
-            Color4.white.toHexString(),
-        ];
-        const presetColorEnd = swatches.length;
-        // (Re)init Coloris -- update the swatches list.
-        const initColoris = () => {
-            coloris({
-                el: '.coloris_input',
-                format: 'hex',
-                selectInput: false,
-                focusInput: false,
-                themeMode: 'auto',
-                swatches
-            });
-        };
-        initColoris();
-        this.updateColoris = initColoris;
-        const addColorToSwatch = (newColor) => {
-            let alreadyPresent = false;
-            for (const color of swatches) {
-                if (color === newColor) {
-                    alreadyPresent = true;
-                }
-            }
-            if (!alreadyPresent) {
-                swatches.push(newColor);
-                if (swatches.length > maxSwatchLen) {
-                    swatches.splice(presetColorEnd, 1);
-                }
-                initColoris();
-            }
-        };
-        this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
-            if (event.kind !== EditorEventType.ColorPickerToggled) {
-                return;
-            }
-            // Show/hide the overlay. Making the overlay visible gives users a surface to click
-            // on that shows/hides the color picker.
-            closePickerOverlay.style.display = event.open ? 'block' : 'none';
-        }));
-        // Add newly-selected colors to the swatch.
-        this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
-            if (event.kind === EditorEventType.ColorPickerColorSelected) {
-                addColorToSwatch(event.color.toHexString());
-            }
-        }));
-    }
-    queueReLayout() {
-        if (!this.reLayoutQueued) {
-            this.reLayoutQueued = true;
-            requestAnimationFrame(() => this.reLayout());
-        }
-    }
-    reLayout() {
-        this.reLayoutQueued = false;
-        if (!this.overflowWidget) {
-            return;
-        }
-        const getTotalWidth = (widgetList) => {
-            let totalWidth = 0;
-            for (const widget of widgetList) {
-                if (!widget.isHidden()) {
-                    totalWidth += widget.getButtonWidth();
-                }
-            }
-            return totalWidth;
-        };
-        // Returns true if there is enough empty space to move the first child
-        // from the overflow menu to the main menu.
-        const canRemoveFirstChildFromOverflow = (freeSpaceInMainMenu) => {
-            var _a, _b;
-            const overflowChildren = (_b = (_a = this.overflowWidget) === null || _a === void 0 ? void 0 : _a.getChildWidgets()) !== null && _b !== void 0 ? _b : [];
-            if (overflowChildren.length === 0) {
-                return false;
-            }
-            return overflowChildren[0].getButtonWidth() <= freeSpaceInMainMenu;
-        };
-        let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
-        let shownWidgetWidth = getTotalWidth(this.widgetList) - overflowWidgetsWidth;
-        let availableWidth = this.container.clientWidth * 0.87;
-        // If on a device that has enough vertical space, allow
-        // showing two rows of buttons.
-        // TODO: Fix magic numbers
-        if (window.innerHeight > availableWidth * 1.75) {
-            availableWidth *= 1.75;
-        }
-        let updatedChildren = false;
-        // If we can remove at least one child from the overflow menu,
-        if (canRemoveFirstChildFromOverflow(availableWidth - shownWidgetWidth)) {
-            // Move widgets to the main menu.
-            const overflowChildren = this.overflowWidget.clearChildren();
-            for (const child of overflowChildren) {
-                child.addTo(this.container);
-                child.setIsToplevel(true);
-                if (!child.isHidden()) {
-                    shownWidgetWidth += child.getButtonWidth();
-                }
-            }
-            overflowWidgetsWidth = 0;
-            updatedChildren = true;
-        }
-        if (shownWidgetWidth >= availableWidth) {
-            // Move widgets to the overflow menu.
-            // Start with the rightmost widget, move to the leftmost
-            for (let i = this.widgetList.length - 1; i >= 0 && shownWidgetWidth >= availableWidth; i--) {
-                const child = this.widgetList[i];
-                if (this.overflowWidget.hasAsChild(child)) {
-                    continue;
-                }
-                if (child.canBeInOverflowMenu()) {
-                    shownWidgetWidth -= child.getButtonWidth();
-                    this.overflowWidget.addToOverflow(child);
-                }
-            }
-            updatedChildren = true;
-        }
-        // Hide/show the overflow widget.
-        this.overflowWidget.setHidden(this.overflowWidget.getChildWidgets().length === 0);
-        if (updatedChildren) {
-            this.setupColorPickers();
-        }
-    }
-    /**
-     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
-     * (i.e. its `addTo` method should not have been called).
-     *
-     * @example
-     * ```ts
-     * const toolbar = editor.addToolbar();
-     * const insertImageWidget = new InsertImageWidget(editor);
-     * toolbar.addWidget(insertImageWidget);
-     * ```
-     */
-    addWidget(widget) {
-        // Prevent name collisions
-        const id = widget.getUniqueIdIn(this.widgetsById);
-        // Add the widget
-        this.widgetsById[id] = widget;
-        this.widgetList.push(widget);
-        // Add HTML elements.
-        const container = widget.addTo(this.container);
-        this.setupColorPickers();
-        // Ensure that the widget gets displayed in the correct
-        // place in the toolbar, even if it's removed and re-added.
-        container.style.order = `${this.widgetOrderCounter++}`;
-        this.queueReLayout();
-    }
-    /**
-     * Adds a spacer.
-     *
-     * @example
-     * Adding a save button that moves to the very right edge of the toolbar
-     * while keeping the other buttons centered:
-     * ```ts
-     * const toolbar = editor.addToolbar(false);
-     *
-     * toolbar.addSpacer({ grow: 1 });
-     * toolbar.addDefaults();
-     * toolbar.addSpacer({ grow: 1 });
-     *
-     * toolbar.addActionButton({
-     * 	label: 'Save',
-     * 	icon: editor.icons.makeSaveIcon(),
-     * }, () => {
-     * 	  saveCallback();
-     * });
-     * ```
-     */
-    addSpacer(options = {}) {
-        const spacer = document.createElement('div');
-        spacer.classList.add(`${toolbarCSSPrefix}spacer`);
-        if (options.grow) {
-            spacer.style.flexGrow = `${options.grow}`;
-        }
-        if (options.minSize) {
-            spacer.style.minWidth = options.minSize;
-        }
-        if (options.maxSize) {
-            spacer.style.maxWidth = options.maxSize;
-        }
-        spacer.style.order = `${this.widgetOrderCounter++}`;
-        this.container.appendChild(spacer);
-    }
-    serializeState() {
-        const result = {};
-        for (const widgetId in this.widgetsById) {
-            result[widgetId] = this.widgetsById[widgetId].serializeState();
-        }
-        return JSON.stringify(result);
-    }
-    /**
-     * Deserialize toolbar widgets from the given state.
-     * Assumes that toolbar widgets are in the same order as when state was serialized.
-     */
-    deserializeState(state) {
-        const data = JSON.parse(state);
-        for (const widgetId in data) {
-            if (!(widgetId in this.widgetsById)) {
-                console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
-            }
-            this.widgetsById[widgetId].deserializeFrom(data[widgetId]);
-        }
-    }
-    /**
-     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
-     *
-     * @return The added button.
-     */
-    addActionButton(title, command, mustBeToplevel = true) {
-        const titleString = typeof title === 'string' ? title : title.label;
-        const widgetId = 'action-button';
-        const makeIcon = () => {
-            if (typeof title === 'string') {
-                return null;
-            }
-            return title.icon;
-        };
-        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
-        this.addWidget(widget);
-        return widget;
-    }
-    addUndoRedoButtons() {
-        const undoButton = this.addActionButton({
-            label: this.localizationTable.undo,
-            icon: this.editor.icons.makeUndoIcon()
-        }, () => {
-            this.editor.history.undo();
-        });
-        const redoButton = this.addActionButton({
-            label: this.localizationTable.redo,
-            icon: this.editor.icons.makeRedoIcon(),
-        }, () => {
-            this.editor.history.redo();
-        });
-        undoButton.setDisabled(true);
-        redoButton.setDisabled(true);
-        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, event => {
-            if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
-                throw new Error('Wrong event type!');
-            }
-            undoButton.setDisabled(event.undoStackSize === 0);
-            redoButton.setDisabled(event.redoStackSize === 0);
-        });
-    }
-    addDefaultToolWidgets() {
-        const toolController = this.editor.toolController;
-        for (const tool of toolController.getMatchingTools(PenTool)) {
-            const widget = new PenToolWidget(this.editor, tool, this.localizationTable);
-            this.addWidget(widget);
-        }
-        for (const tool of toolController.getMatchingTools(EraserTool)) {
-            this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(SelectionTool)) {
-            this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(TextTool)) {
-            this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
-        }
-        const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
-        if (panZoomTool) {
-            this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
-        }
-        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
-    }
-    addDefaultActionButtons() {
-        this.addWidget(new DocumentPropertiesWidget(this.editor, this.localizationTable));
-        this.addUndoRedoButtons();
-    }
-    /**
-     * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
-     * that this widget is in the correct space (if shown).
-     *
-     * @example
-     * ```ts
-     * toolbar.addDefaultToolWidgets();
-     * toolbar.addOverflowWidget();
-     * toolbar.addDefaultActionButtons();
-     * ```
-     * shows the overflow widget between the default tool widgets and the default action buttons,
-     * if shown.
-     */
-    addOverflowWidget() {
-        this.overflowWidget = new OverflowWidget(this.editor, this.localizationTable);
-        this.addWidget(this.overflowWidget);
-    }
-    /**
-     * Adds both the default tool widgets and action buttons. Equivalent to
-     * ```ts
-     * toolbar.addDefaultToolWidgets();
-     * toolbar.addOverflowWidget();
-     * toolbar.addDefaultActionButtons();
-     * ```
-     */
-    addDefaults() {
-        this.addDefaultToolWidgets();
-        this.addOverflowWidget();
-        this.addDefaultActionButtons();
-    }
-    remove() {
-        this.container.remove();
-        this.resizeObserver.disconnect();
-        for (const listener of this.listeners) {
-            listener.remove();
-        }
-    }
-}
-HTMLToolbar.colorisStarted = false;

package/dist/mjs/src/toolbar/IconProvider.d.ts

@@ -1,62 +0,0 @@
-import Color4 from '../Color4';
-import { ComponentBuilderFactory } from '../components/builders/types';
-import TextStyle from '../rendering/TextRenderingStyle';
-import Pen from '../tools/Pen';
-export type IconType = HTMLImageElement | SVGElement;
-/**
- * Provides icons that can be used in the toolbar, etc.
- * Extend this class and override methods to customize icons.
- *
- * @example
- * ```ts
- * class CustomIconProvider extends jsdraw.IconProvider {
- *     // Use '☺' instead of the default dropdown symbol.
- *     public makeDropdownIcon() {
- *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
- *         icon.innerHTML = `
- *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
- *         `;
- *         icon.setAttribute('viewBox', '0 0 100 100');
- *         return icon;
- *     }
- * }
- *
- * const icons = new CustomIconProvider();
- * const editor = new jsdraw.Editor(document.body, {
- *     iconProvider: icons,
- * });
- *
- * // Add a toolbar that uses these icons
- * editor.addToolbar();
- * ```
- */
-export default class IconProvider {
-    makeUndoIcon(): IconType;
-    makeRedoIcon(mirror?: boolean): IconType;
-    makeDropdownIcon(): IconType;
-    makeEraserIcon(eraserSize?: number): IconType;
-    makeSelectionIcon(): IconType;
-    /**
-     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
-     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
-     */
-    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconType;
-    makeHandToolIcon(): IconType;
-    makeTouchPanningIcon(): IconType;
-    makeAllDevicePanningIcon(): IconType;
-    makeZoomIcon(): IconType;
-    makeRotationLockIcon(): IconType;
-    makeInsertImageIcon(): IconType;
-    makeTextIcon(textStyle: TextStyle): IconType;
-    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
-    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
-    makePipetteIcon(color?: Color4): IconType;
-    makeFormatSelectionIcon(): IconType;
-    makeResizeViewportIcon(): IconType;
-    makeDuplicateSelectionIcon(): IconType;
-    makePasteIcon(): IconType;
-    makeDeleteSelectionIcon(): IconType;
-    makeSaveIcon(): IconType;
-    makeConfigureDocumentIcon(): IconType;
-    makeOverflowIcon(): IconType;
-}