js-draw 0.23.1 → 0.24.1

package/dist/mjs/toolbar/HTMLToolbar.mjs

@@ -0,0 +1,462 @@
+import  { EditorEventType }  from '../types.mjs';
+import { coloris, close as closeColoris, 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';
+import  { Vec2 }  from '../math/Vec2.mjs';
+export var toolbarCSSPrefix = 'toolbar-';
+var HTMLToolbar = /** @class */ (function () {
+    /** @internal */
+    function HTMLToolbar(editor, parent, localizationTable) {
+        if (localizationTable === void 0) { localizationTable = defaultToolbarLocalization; }
+        var _this = this;
+        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.closeColorPickerOverlay = null;
+        this.reLayoutQueued = false;
+        this.container = document.createElement('div');
+        this.container.classList.add("".concat(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(function (_entries) {
+                _this.reLayout();
+            });
+            this.resizeObserver.observe(this.container);
+        }
+        else {
+            console.warn('ResizeObserver not supported. Toolbar will not resize.');
+        }
+    }
+    HTMLToolbar.prototype.setupCloseColorPickerOverlay = function () {
+        var _this = this;
+        if (this.closeColorPickerOverlay)
+            return;
+        this.closeColorPickerOverlay = document.createElement('div');
+        this.closeColorPickerOverlay.className = "".concat(toolbarCSSPrefix, "closeColorPickerOverlay");
+        this.editor.createHTMLOverlay(this.closeColorPickerOverlay);
+        // Buffer events: Send events to the editor only if the pointer has moved enough to
+        // suggest that the user is attempting to draw, rather than click to close the color picker.
+        var eventBuffer = [];
+        var gestureStartPos = null;
+        // Hide the color picker when attempting to draw on the overlay.
+        this.listeners.push(this.editor.handlePointerEventsFrom(this.closeColorPickerOverlay, function (eventName, event) {
+            var _a, _b;
+            // Position of the current event.
+            var currentPos = Vec2.of(event.pageX, event.pageY);
+            // Whether to send the current event to the editor
+            var sendToEditor = true;
+            if (eventName === 'pointerdown') {
+                closeColoris();
+                // Buffer the event, but don't send it to the editor yet.
+                // We don't want to send single-click events, but we do want to send full strokes.
+                eventBuffer = [];
+                eventBuffer.push([eventName, event]);
+                gestureStartPos = currentPos;
+                // Capture the pointer so we receive future events even if the overlay is hidden.
+                (_a = _this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            else if (eventName === 'pointermove') {
+                // Skip if the pointer hasn't moved enough to not be a "click".
+                var strokeStartThreshold = 10;
+                if (gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold) {
+                    eventBuffer.push([eventName, event]);
+                    sendToEditor = false;
+                }
+                else {
+                    // Send all buffered events to the editor -- start the stroke.
+                    for (var _i = 0, eventBuffer_1 = eventBuffer; _i < eventBuffer_1.length; _i++) {
+                        var _c = eventBuffer_1[_i], eventName_1 = _c[0], event_1 = _c[1];
+                        _this.editor.handleHTMLPointerEvent(eventName_1, event_1);
+                    }
+                    eventBuffer = [];
+                    sendToEditor = true;
+                }
+            }
+            // Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
+            // buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
+            // pointercancel event.
+            else if ((eventName === 'pointerup' || eventName === 'pointercancel') && eventBuffer.length > 0) {
+                (_b = _this.closeColorPickerOverlay) === null || _b === void 0 ? void 0 : _b.releasePointerCapture(event.pointerId);
+                eventBuffer = [];
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            // Transfer focus to the editor to allow keyboard events to be handled.
+            if (eventName === 'pointerup') {
+                _this.editor.focus();
+            }
+            // Forward all other events to the editor.
+            return sendToEditor;
+        }));
+    };
+    // @internal
+    HTMLToolbar.prototype.setupColorPickers = function () {
+        var _this = this;
+        // Much of the setup only needs to be done once.
+        if (this.updateColoris) {
+            this.updateColoris();
+            return;
+        }
+        this.setupCloseColorPickerOverlay();
+        var maxSwatchLen = 12;
+        var swatches = [
+            Color4.red.toHexString(),
+            Color4.purple.toHexString(),
+            Color4.blue.toHexString(),
+            Color4.clay.toHexString(),
+            Color4.black.toHexString(),
+            Color4.white.toHexString(),
+        ];
+        var presetColorEnd = swatches.length;
+        // (Re)init Coloris -- update the swatches list.
+        var initColoris = function () {
+            coloris({
+                el: '.coloris_input',
+                format: 'hex',
+                selectInput: false,
+                focusInput: false,
+                themeMode: 'auto',
+                swatches: swatches
+            });
+        };
+        initColoris();
+        this.updateColoris = initColoris;
+        var addColorToSwatch = function (newColor) {
+            var alreadyPresent = false;
+            for (var _i = 0, swatches_1 = swatches; _i < swatches_1.length; _i++) {
+                var color = swatches_1[_i];
+                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, function (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.
+            if (_this.closeColorPickerOverlay) {
+                _this.closeColorPickerOverlay.style.display = event.open ? 'block' : 'none';
+            }
+        }));
+        // Add newly-selected colors to the swatch.
+        this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, function (event) {
+            if (event.kind === EditorEventType.ColorPickerColorSelected) {
+                addColorToSwatch(event.color.toHexString());
+            }
+        }));
+    };
+    HTMLToolbar.prototype.queueReLayout = function () {
+        var _this = this;
+        if (!this.reLayoutQueued) {
+            this.reLayoutQueued = true;
+            requestAnimationFrame(function () { return _this.reLayout(); });
+        }
+    };
+    HTMLToolbar.prototype.reLayout = function () {
+        var _this = this;
+        this.reLayoutQueued = false;
+        if (!this.overflowWidget) {
+            return;
+        }
+        var getTotalWidth = function (widgetList) {
+            var totalWidth = 0;
+            for (var _i = 0, widgetList_1 = widgetList; _i < widgetList_1.length; _i++) {
+                var widget = widgetList_1[_i];
+                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.
+        var canRemoveFirstChildFromOverflow = function (freeSpaceInMainMenu) {
+            var _a, _b;
+            var 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;
+        };
+        var overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
+        var shownWidgetWidth = getTotalWidth(this.widgetList) - overflowWidgetsWidth;
+        var 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;
+        }
+        var updatedChildren = false;
+        // If we can remove at least one child from the overflow menu,
+        if (canRemoveFirstChildFromOverflow(availableWidth - shownWidgetWidth)) {
+            // Move widgets to the main menu.
+            var overflowChildren = this.overflowWidget.clearChildren();
+            for (var _i = 0, overflowChildren_1 = overflowChildren; _i < overflowChildren_1.length; _i++) {
+                var child = overflowChildren_1[_i];
+                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 (var i = this.widgetList.length - 1; i >= 0 && shownWidgetWidth >= availableWidth; i--) {
+                var 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);
+     * ```
+     */
+    HTMLToolbar.prototype.addWidget = function (widget) {
+        // Prevent name collisions
+        var id = widget.getUniqueIdIn(this.widgetsById);
+        // Add the widget
+        this.widgetsById[id] = widget;
+        this.widgetList.push(widget);
+        // Add HTML elements.
+        var 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 = "".concat(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();
+     * });
+     * ```
+     */
+    HTMLToolbar.prototype.addSpacer = function (options) {
+        if (options === void 0) { options = {}; }
+        var spacer = document.createElement('div');
+        spacer.classList.add("".concat(toolbarCSSPrefix, "spacer"));
+        if (options.grow) {
+            spacer.style.flexGrow = "".concat(options.grow);
+        }
+        if (options.minSize) {
+            spacer.style.minWidth = options.minSize;
+        }
+        if (options.maxSize) {
+            spacer.style.maxWidth = options.maxSize;
+        }
+        spacer.style.order = "".concat(this.widgetOrderCounter++);
+        this.container.appendChild(spacer);
+    };
+    HTMLToolbar.prototype.serializeState = function () {
+        var result = {};
+        for (var 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.
+     */
+    HTMLToolbar.prototype.deserializeState = function (state) {
+        var data = JSON.parse(state);
+        for (var widgetId in data) {
+            if (!(widgetId in this.widgetsById)) {
+                console.warn("Unable to deserialize widget ".concat(widgetId, " \u00AD\u2014 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.
+     */
+    HTMLToolbar.prototype.addActionButton = function (title, command, mustBeToplevel) {
+        if (mustBeToplevel === void 0) { mustBeToplevel = true; }
+        var titleString = typeof title === 'string' ? title : title.label;
+        var widgetId = 'action-button';
+        var makeIcon = function () {
+            if (typeof title === 'string') {
+                return null;
+            }
+            return title.icon;
+        };
+        var widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
+        this.addWidget(widget);
+        return widget;
+    };
+    HTMLToolbar.prototype.addUndoRedoButtons = function () {
+        var _this = this;
+        var undoButton = this.addActionButton({
+            label: this.localizationTable.undo,
+            icon: this.editor.icons.makeUndoIcon()
+        }, function () {
+            _this.editor.history.undo();
+        });
+        var redoButton = this.addActionButton({
+            label: this.localizationTable.redo,
+            icon: this.editor.icons.makeRedoIcon(),
+        }, function () {
+            _this.editor.history.redo();
+        });
+        undoButton.setDisabled(true);
+        redoButton.setDisabled(true);
+        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, function (event) {
+            if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
+                throw new Error('Wrong event type!');
+            }
+            undoButton.setDisabled(event.undoStackSize === 0);
+            redoButton.setDisabled(event.redoStackSize === 0);
+        });
+    };
+    HTMLToolbar.prototype.addDefaultToolWidgets = function () {
+        var toolController = this.editor.toolController;
+        for (var _i = 0, _a = toolController.getMatchingTools(PenTool); _i < _a.length; _i++) {
+            var tool = _a[_i];
+            var widget = new PenToolWidget(this.editor, tool, this.localizationTable);
+            this.addWidget(widget);
+        }
+        for (var _b = 0, _c = toolController.getMatchingTools(EraserTool); _b < _c.length; _b++) {
+            var tool = _c[_b];
+            this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
+        }
+        for (var _d = 0, _e = toolController.getMatchingTools(SelectionTool); _d < _e.length; _d++) {
+            var tool = _e[_d];
+            this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
+        }
+        for (var _f = 0, _g = toolController.getMatchingTools(TextTool); _f < _g.length; _f++) {
+            var tool = _g[_f];
+            this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
+        }
+        var panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
+        if (panZoomTool) {
+            this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
+        }
+        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
+    };
+    HTMLToolbar.prototype.addDefaultActionButtons = function () {
+        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.
+     */
+    HTMLToolbar.prototype.addOverflowWidget = function () {
+        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();
+     * ```
+     */
+    HTMLToolbar.prototype.addDefaults = function () {
+        this.addDefaultToolWidgets();
+        this.addOverflowWidget();
+        this.addDefaultActionButtons();
+    };
+    HTMLToolbar.prototype.remove = function () {
+        var _a;
+        this.container.remove();
+        this.resizeObserver.disconnect();
+        (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.remove();
+        for (var _i = 0, _b = this.listeners; _i < _b.length; _i++) {
+            var listener = _b[_i];
+            listener.remove();
+        }
+    };
+    HTMLToolbar.colorisStarted = false;
+    return HTMLToolbar;
+}());
+export default HTMLToolbar;