js-draw 0.25.1 → 1.0.0

package/dist/cjs/toolbar/HTMLToolbar.js

@@ -1,465 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toolbarCSSPrefix = void 0;
-var types_1 = require("../types");
-var coloris_1 = require("@melloware/coloris");
-var Color4_1 = require("../Color4");
-var localization_1 = require("./localization");
-var SelectionTool_1 = require("../tools/SelectionTool/SelectionTool");
-var PanZoom_1 = require("../tools/PanZoom");
-var TextTool_1 = require("../tools/TextTool");
-var Eraser_1 = require("../tools/Eraser");
-var Pen_1 = require("../tools/Pen");
-var PenToolWidget_1 = require("./widgets/PenToolWidget");
-var EraserToolWidget_1 = require("./widgets/EraserToolWidget");
-var SelectionToolWidget_1 = require("./widgets/SelectionToolWidget");
-var TextToolWidget_1 = require("./widgets/TextToolWidget");
-var HandToolWidget_1 = require("./widgets/HandToolWidget");
-var ActionButtonWidget_1 = require("./widgets/ActionButtonWidget");
-var InsertImageWidget_1 = require("./widgets/InsertImageWidget");
-var DocumentPropertiesWidget_1 = require("./widgets/DocumentPropertiesWidget");
-var OverflowWidget_1 = require("./widgets/OverflowWidget");
-var Vec2_1 = require("../math/Vec2");
-exports.toolbarCSSPrefix = 'toolbar-';
-var HTMLToolbar = /** @class */ (function () {
-    /** @internal */
-    function HTMLToolbar(editor, parent, localizationTable) {
-        if (localizationTable === void 0) { localizationTable = localization_1.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(exports.toolbarCSSPrefix, "root"));
-        this.container.setAttribute('role', 'toolbar');
-        parent.appendChild(this.container);
-        if (!HTMLToolbar.colorisStarted) {
-            (0, coloris_1.init)();
-            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(exports.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_1.Vec2.of(event.pageX, event.pageY);
-            // Whether to send the current event to the editor
-            var sendToEditor = true;
-            if (eventName === 'pointerdown') {
-                (0, coloris_1.close)();
-                // 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_1.default.red.toHexString(),
-            Color4_1.default.purple.toHexString(),
-            Color4_1.default.blue.toHexString(),
-            Color4_1.default.clay.toHexString(),
-            Color4_1.default.black.toHexString(),
-            Color4_1.default.white.toHexString(),
-        ];
-        var presetColorEnd = swatches.length;
-        // (Re)init Coloris -- update the swatches list.
-        var initColoris = function () {
-            (0, coloris_1.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(types_1.EditorEventType.ColorPickerToggled, function (event) {
-            if (event.kind !== types_1.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(types_1.EditorEventType.ColorPickerColorSelected, function (event) {
-            if (event.kind === types_1.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(exports.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_1.default(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(types_1.EditorEventType.UndoRedoStackUpdated, function (event) {
-            if (event.kind !== types_1.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(Pen_1.default); _i < _a.length; _i++) {
-            var tool = _a[_i];
-            var widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
-            this.addWidget(widget);
-        }
-        for (var _b = 0, _c = toolController.getMatchingTools(Eraser_1.default); _b < _c.length; _b++) {
-            var tool = _c[_b];
-            this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        for (var _d = 0, _e = toolController.getMatchingTools(SelectionTool_1.default); _d < _e.length; _d++) {
-            var tool = _e[_d];
-            this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        for (var _f = 0, _g = toolController.getMatchingTools(TextTool_1.default); _f < _g.length; _f++) {
-            var tool = _g[_f];
-            this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        var panZoomTool = toolController.getMatchingTools(PanZoom_1.default)[0];
-        if (panZoomTool) {
-            this.addWidget(new HandToolWidget_1.default(this.editor, panZoomTool, this.localizationTable));
-        }
-        this.addWidget(new InsertImageWidget_1.default(this.editor, this.localizationTable));
-    };
-    HTMLToolbar.prototype.addDefaultActionButtons = function () {
-        this.addWidget(new DocumentPropertiesWidget_1.default(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_1.default(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;
-}());
-exports.default = HTMLToolbar;

package/dist/cjs/toolbar/makeColorInput.d.ts

@@ -1,6 +0,0 @@
-import Color4 from '../Color4';
-import Editor from '../Editor';
-type OnColorChangeListener = (color: Color4) => void;
-type SetColorCallback = (color: Color4 | string) => void;
-export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
-export default makeColorInput;

package/dist/cjs/tools/Eraser.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/tools/PanZoom.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/tools/Pen.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/tools/SelectionTool/SelectionTool.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/tools/UndoRedoShortcut.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/mjs/Color4.d.ts

@@ -1,69 +0,0 @@
-import Vec3 from './math/Vec3';
-export default class Color4 {
-    /** Red component. Should be in the range [0, 1]. */
-    readonly r: number;
-    /** Green component. `g` ∈ [0, 1] */
-    readonly g: number;
-    /** Blue component. `b` ∈ [0, 1] */
-    readonly b: number;
-    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
-    readonly a: number;
-    private constructor();
-    /**
-     * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
-     *
-     * Each component should be in the range [0, 1].
-     */
-    static ofRGB(red: number, green: number, blue: number): Color4;
-    static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4;
-    static fromHex(hexString: string): Color4;
-    /** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
-    static fromString(text: string): Color4;
-    /** @returns true if `this` and `other` are approximately equal. */
-    eq(other: Color4 | null | undefined): boolean;
-    /**
-     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
-     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
-     *
-     * @returns a color `fractionTo` of the way from this color to `other`.
-     *
-     * @example
-     * ```ts
-     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
-     * ```
-     */
-    mix(other: Color4, fractionTo: number): Color4;
-    /**
-     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
-     */
-    static average(colors: Color4[]): Color4;
-    /**
-     * Converts to (hue, saturation, value).
-     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
-     *
-     * The resultant hue is represented in radians and is thus in [0, 2pi].
-     */
-    asHSV(): Vec3;
-    private hexString;
-    /**
-     * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
-     *
-     * @example
-     * ```
-     * Color4.red.toHexString(); // -> #ff0000ff
-     * ```
-     */
-    toHexString(): string;
-    toString(): string;
-    static transparent: Color4;
-    static red: Color4;
-    static green: Color4;
-    static blue: Color4;
-    static purple: Color4;
-    static yellow: Color4;
-    static clay: Color4;
-    static black: Color4;
-    static gray: Color4;
-    static white: Color4;
-}
-export { Color4 };