js-draw 0.17.4 → 0.18.0

package/dist/cjs/src/tools/TextTool.js

@@ -0,0 +1,262 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color4_1 = __importDefault(require("../Color4"));
+const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const Mat33_1 = __importDefault(require("../math/Mat33"));
+const Vec2_1 = require("../math/Vec2");
+const Pointer_1 = require("../Pointer");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const Erase_1 = __importDefault(require("../commands/Erase"));
+const uniteCommands_1 = __importDefault(require("../commands/uniteCommands"));
+const overlayCssClass = 'textEditorOverlay';
+class TextTool extends BaseTool_1.default {
+    constructor(editor, description, localizationTable) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.textInputElem = null;
+        this.textTargetPosition = null;
+        this.textMeasuringCtx = null;
+        this.textScale = Vec2_1.Vec2.of(1, 1);
+        this.removeExistingCommand = null;
+        this.textStyle = {
+            size: 32,
+            fontFamily: 'sans-serif',
+            renderingStyle: {
+                fill: Color4_1.default.purple,
+            },
+        };
+        this.textEditOverlay = document.createElement('div');
+        this.textEditOverlay.classList.add(overlayCssClass);
+        this.editor.addStyleSheet(`
+			.${overlayCssClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCssClass} textarea {
+				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+				overflow: hidden;
+
+				padding: 0;
+				margin: 0;
+				border: none;
+				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
+			}
+		`);
+        this.editor.createHTMLOverlay(this.textEditOverlay);
+        this.editor.notifier.on(types_1.EditorEventType.ViewportChanged, () => this.updateTextInput());
+    }
+    getTextAscent(text, style) {
+        var _a;
+        (_a = this.textMeasuringCtx) !== null && _a !== void 0 ? _a : (this.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
+        if (this.textMeasuringCtx) {
+            TextComponent_1.default.applyTextStyles(this.textMeasuringCtx, style);
+            return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
+        }
+        // Estimate
+        return style.size * 2 / 3;
+    }
+    // Take input from this' textInputElem and add it to the EditorImage.
+    // If [removeInput], the HTML input element is removed. Otherwise, its value
+    // is cleared.
+    flushInput(removeInput = true) {
+        if (this.textInputElem && this.textTargetPosition) {
+            const content = this.textInputElem.value.trimEnd();
+            this.textInputElem.value = '';
+            if (removeInput) {
+                // In some browsers, .remove() triggers a .blur event (synchronously).
+                // Clear this.textInputElem before removal
+                const input = this.textInputElem;
+                this.textInputElem = null;
+                input.remove();
+            }
+            if (content === '') {
+                return;
+            }
+            const textTransform = Mat33_1.default.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(Mat33_1.default.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33_1.default.zRotation(this.textRotation));
+            const textComponent = TextComponent_1.default.fromLines(content.split('\n'), textTransform, this.textStyle);
+            const action = EditorImage_1.default.addElement(textComponent);
+            if (this.removeExistingCommand) {
+                // Unapply so that `removeExistingCommand` can be added to the undo stack.
+                this.removeExistingCommand.unapply(this.editor);
+                this.editor.dispatch((0, uniteCommands_1.default)([this.removeExistingCommand, action]));
+                this.removeExistingCommand = null;
+            }
+            else {
+                this.editor.dispatch(action);
+            }
+        }
+    }
+    getTextScaleMatrix() {
+        return Mat33_1.default.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
+    }
+    updateTextInput() {
+        var _a, _b, _c;
+        if (!this.textInputElem || !this.textTargetPosition) {
+            (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        const viewport = this.editor.viewport;
+        const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
+        this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
+        this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
+        this.textInputElem.style.fontVariant = (_b = this.textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+        this.textInputElem.style.fontWeight = (_c = this.textStyle.fontWeight) !== null && _c !== void 0 ? _c : '';
+        this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
+        this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
+        this.textInputElem.style.position = 'relative';
+        this.textInputElem.style.left = `${textScreenPos.x}px`;
+        this.textInputElem.style.top = `${textScreenPos.y}px`;
+        this.textInputElem.style.margin = '0';
+        this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+        this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+        // Get the ascent based on the font, using a character that is tall in most fonts.
+        const tallCharacter = '⎢';
+        const ascent = this.getTextAscent(tallCharacter, this.textStyle);
+        const rotation = this.textRotation + viewport.getRotationAngle();
+        const scale = this.getTextScaleMatrix();
+        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+        this.textInputElem.style.transformOrigin = 'top left';
+    }
+    startTextInput(textCanvasPos, initialText) {
+        this.flushInput();
+        this.textInputElem = document.createElement('textarea');
+        this.textInputElem.value = initialText;
+        this.textInputElem.style.display = 'inline-block';
+        this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
+        this.textRotation = -this.editor.viewport.getRotationAngle();
+        this.textScale = Vec2_1.Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        this.updateTextInput();
+        // Update the input size/position/etc. after the placeHolder has had time to appear.
+        setTimeout(() => this.updateTextInput(), 0);
+        this.textInputElem.oninput = () => {
+            if (this.textInputElem) {
+                this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+                this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+            }
+        };
+        this.textInputElem.onblur = () => {
+            // Delay removing the input -- flushInput may be called within a blur()
+            // event handler
+            const removeInput = false;
+            const input = this.textInputElem;
+            this.flushInput(removeInput);
+            this.textInputElem = null;
+            setTimeout(() => {
+                input === null || input === void 0 ? void 0 : input.remove();
+            }, 0);
+        };
+        this.textInputElem.onkeyup = (evt) => {
+            var _a, _b;
+            if (evt.key === 'Enter' && !evt.shiftKey) {
+                this.flushInput();
+                this.editor.focus();
+            }
+            else if (evt.key === 'Escape') {
+                // Cancel input.
+                (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+                this.textInputElem = null;
+                this.editor.focus();
+                (_b = this.removeExistingCommand) === null || _b === void 0 ? void 0 : _b.unapply(this.editor);
+                this.removeExistingCommand = null;
+            }
+        };
+        this.textEditOverlay.replaceChildren(this.textInputElem);
+        setTimeout(() => { var _a; return (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (!enabled) {
+            this.flushInput();
+        }
+        this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+    }
+    onPointerDown({ current, allPointers }) {
+        if (current.device === Pointer_1.PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1) {
+            // Are we clicking on a text node?
+            const canvasPos = current.canvasPos;
+            const halfTestRegionSize = Vec2_1.Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const testRegion = Rect2_1.default.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+            const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent_1.default);
+            // Don't try to edit text nodes that contain the viewport (this allows us
+            // to zoom in on text nodes and add text on top of them.)
+            const visibleRect = this.editor.viewport.visibleRect;
+            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
+            // End any TextNodes we're currently editing.
+            this.flushInput();
+            if (targetTextNodes.length > 0) {
+                const targetNode = targetTextNodes[targetTextNodes.length - 1];
+                this.setTextStyle(targetNode.getTextStyle());
+                // Create and temporarily apply removeExistingCommand.
+                this.removeExistingCommand = new Erase_1.default([targetNode]);
+                this.removeExistingCommand.apply(this.editor);
+                this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+                const transform = targetNode.getTransform();
+                this.textRotation = transform.transformVec3(Vec2_1.Vec2.unitX).angle();
+                const scaleFactor = transform.transformVec3(Vec2_1.Vec2.unitX).magnitude();
+                this.textScale = Vec2_1.Vec2.of(1, 1).times(scaleFactor);
+                this.updateTextInput();
+            }
+            else {
+                this.removeExistingCommand = null;
+                this.startTextInput(current.canvasPos, '');
+            }
+            return true;
+        }
+        return false;
+    }
+    onGestureCancel() {
+        this.flushInput();
+        this.editor.focus();
+    }
+    dispatchUpdateEvent() {
+        this.updateTextInput();
+        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setFontFamily(fontFamily) {
+        if (fontFamily !== this.textStyle.fontFamily) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { fontFamily: fontFamily });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setColor(color) {
+        if (!color.eq(this.textStyle.renderingStyle.fill)) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { renderingStyle: Object.assign(Object.assign({}, this.textStyle.renderingStyle), { fill: color }) });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setFontSize(size) {
+        if (size !== this.textStyle.size) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { size });
+            this.dispatchUpdateEvent();
+        }
+    }
+    getTextStyle() {
+        return this.textStyle;
+    }
+    setTextStyle(style) {
+        // Copy the style — we may change parts of it.
+        this.textStyle = Object.assign(Object.assign({}, style), { renderingStyle: Object.assign({}, style.renderingStyle) });
+        this.dispatchUpdateEvent();
+    }
+}
+exports.default = TextTool;

package/dist/cjs/src/tools/ToolController.js

@@ -0,0 +1,187 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../types");
+const PanZoom_1 = __importStar(require("./PanZoom"));
+const Pen_1 = __importDefault(require("./Pen"));
+const ToolEnabledGroup_1 = __importDefault(require("./ToolEnabledGroup"));
+const Eraser_1 = __importDefault(require("./Eraser"));
+const SelectionTool_1 = __importDefault(require("./SelectionTool/SelectionTool"));
+const Color4_1 = __importDefault(require("../Color4"));
+const UndoRedoShortcut_1 = __importDefault(require("./UndoRedoShortcut"));
+const TextTool_1 = __importDefault(require("./TextTool"));
+const PipetteTool_1 = __importDefault(require("./PipetteTool"));
+const ToolSwitcherShortcut_1 = __importDefault(require("./ToolSwitcherShortcut"));
+const PasteHandler_1 = __importDefault(require("./PasteHandler"));
+const ToolbarShortcutHandler_1 = __importDefault(require("./ToolbarShortcutHandler"));
+const PressureSensitiveFreehandLineBuilder_1 = require("../components/builders/PressureSensitiveFreehandLineBuilder");
+const FindTool_1 = __importDefault(require("./FindTool"));
+const SelectAllShortcutHandler_1 = __importDefault(require("./SelectionTool/SelectAllShortcutHandler"));
+class ToolController {
+    /** @internal */
+    constructor(editor, localization) {
+        this.activeTool = null;
+        const primaryToolGroup = new ToolEnabledGroup_1.default();
+        this.primaryToolGroup = primaryToolGroup;
+        const panZoomTool = new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.TwoFingerTouchGestures | PanZoom_1.PanZoomMode.RightClickDrags, localization.touchPanTool);
+        const keyboardPanZoomTool = new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.Keyboard, localization.keyboardPanZoom);
+        const primaryPenTool = new Pen_1.default(editor, localization.penTool(1), { color: Color4_1.default.purple, thickness: 8 });
+        const primaryTools = [
+            // Three pens
+            primaryPenTool,
+            new Pen_1.default(editor, localization.penTool(2), { color: Color4_1.default.clay, thickness: 4 }),
+            // Highlighter-like pen with width=40
+            new Pen_1.default(editor, localization.penTool(3), { color: Color4_1.default.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder),
+            new Eraser_1.default(editor, localization.eraserTool),
+            new SelectionTool_1.default(editor, localization.selectionTool),
+            new TextTool_1.default(editor, localization.textTool, localization),
+            new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
+        ];
+        this.tools = [
+            new PipetteTool_1.default(editor, localization.pipetteTool),
+            panZoomTool,
+            ...primaryTools,
+            keyboardPanZoomTool,
+            new UndoRedoShortcut_1.default(editor),
+            new ToolbarShortcutHandler_1.default(editor),
+            new ToolSwitcherShortcut_1.default(editor),
+            new FindTool_1.default(editor),
+            new PasteHandler_1.default(editor),
+            new SelectAllShortcutHandler_1.default(editor),
+        ];
+        primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
+        panZoomTool.setEnabled(true);
+        primaryPenTool.setEnabled(true);
+        editor.notifier.on(types_1.EditorEventType.ToolEnabled, event => {
+            if (event.kind === types_1.EditorEventType.ToolEnabled) {
+                editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
+            }
+        });
+        editor.notifier.on(types_1.EditorEventType.ToolDisabled, event => {
+            if (event.kind === types_1.EditorEventType.ToolDisabled) {
+                editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
+            }
+        });
+        this.activeTool = null;
+    }
+    // Replaces the current set of tools with `tools`. This should only be done before
+    // the creation of the app's toolbar (if using `HTMLToolbar`).
+    setTools(tools, primaryToolGroup) {
+        this.tools = tools;
+        this.primaryToolGroup = primaryToolGroup !== null && primaryToolGroup !== void 0 ? primaryToolGroup : new ToolEnabledGroup_1.default();
+    }
+    // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+    // This should be called before creating the app's toolbar.
+    addPrimaryTool(tool) {
+        tool.setToolGroup(this.primaryToolGroup);
+        if (tool.isEnabled()) {
+            this.primaryToolGroup.notifyEnabled(tool);
+        }
+        this.addTool(tool);
+    }
+    getPrimaryTools() {
+        return this.tools.filter(tool => {
+            return tool.getToolGroup() === this.primaryToolGroup;
+        });
+    }
+    // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+    // This should be called before creating the app's toolbar.
+    addTool(tool) {
+        this.tools.push(tool);
+    }
+    // Returns true if the event was handled
+    dispatchInputEvent(event) {
+        var _a, _b;
+        let handled = false;
+        if (event.kind === types_1.InputEvtType.PointerDownEvt) {
+            for (const tool of this.tools) {
+                if (tool.isEnabled() && tool.onPointerDown(event)) {
+                    if (this.activeTool !== tool) {
+                        (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.onGestureCancel();
+                    }
+                    this.activeTool = tool;
+                    handled = true;
+                    break;
+                }
+            }
+        }
+        else if (event.kind === types_1.InputEvtType.PointerUpEvt) {
+            (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
+            this.activeTool = null;
+            handled = true;
+        }
+        else if (event.kind === types_1.InputEvtType.PointerMoveEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onPointerMove(event);
+                handled = true;
+            }
+        }
+        else if (event.kind === types_1.InputEvtType.GestureCancelEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onGestureCancel();
+                this.activeTool = null;
+            }
+        }
+        else {
+            let allCasesHandledGuard;
+            for (const tool of this.tools) {
+                if (!tool.isEnabled()) {
+                    continue;
+                }
+                switch (event.kind) {
+                    case types_1.InputEvtType.KeyPressEvent:
+                        handled = tool.onKeyPress(event);
+                        break;
+                    case types_1.InputEvtType.KeyUpEvent:
+                        handled = tool.onKeyUp(event);
+                        break;
+                    case types_1.InputEvtType.WheelEvt:
+                        handled = tool.onWheel(event);
+                        break;
+                    case types_1.InputEvtType.CopyEvent:
+                        handled = tool.onCopy(event);
+                        break;
+                    case types_1.InputEvtType.PasteEvent:
+                        handled = tool.onPaste(event);
+                        break;
+                    default:
+                        allCasesHandledGuard = event;
+                        return allCasesHandledGuard;
+                }
+                if (handled) {
+                    break;
+                }
+            }
+        }
+        return handled;
+    }
+    getMatchingTools(type) {
+        return this.tools.filter(tool => tool instanceof type);
+    }
+}
+exports.default = ToolController;

package/dist/cjs/src/tools/ToolEnabledGroup.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Connects a group of tools -- at most one tool in the group can be enabled.
+class ToolEnabledGroup {
+    constructor() { }
+    notifyEnabled(tool) {
+        var _a;
+        if (tool !== this.activeTool) {
+            (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.setEnabled(false);
+            this.activeTool = tool;
+        }
+    }
+}
+exports.default = ToolEnabledGroup;

package/dist/cjs/src/tools/ToolSwitcherShortcut.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ * @deprecated This may be replaced in the future.
+ */
+class ToolSwitcherShortcut extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
+        // Map keys 0-9 to primary tools.
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
+        if (keyMatch) {
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
+            targetTool = primaryTools[targetIdx];
+        }
+        if (targetTool) {
+            targetTool.setEnabled(true);
+            return true;
+        }
+        return false;
+    }
+}
+exports.default = ToolSwitcherShortcut;

package/dist/cjs/src/tools/ToolbarShortcutHandler.js

@@ -0,0 +1,29 @@
+"use strict";
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+class ToolbarShortcutHandler extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.listeners = new Set([]);
+    }
+    registerListener(listener) {
+        this.listeners.add(listener);
+    }
+    removeListener(listener) {
+        this.listeners.delete(listener);
+    }
+    onKeyPress(event) {
+        for (const listener of this.listeners) {
+            if (listener(event)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+exports.default = ToolbarShortcutHandler;

package/dist/cjs/src/tools/UndoRedoShortcut.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+class UndoRedoShortcut extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.undoRedoTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key, ctrlKey }) {
+        if (ctrlKey) {
+            if (key === 'z') {
+                this.editor.history.undo();
+                return true;
+            }
+            else if (key === 'Z') {
+                this.editor.history.redo();
+                return true;
+            }
+        }
+        return false;
+    }
+}
+exports.default = UndoRedoShortcut;

package/dist/cjs/src/tools/lib.js

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * @packageDocumentation
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarShortcutHandler = exports.PasteHandler = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = void 0;
+var BaseTool_1 = require("./BaseTool");
+Object.defineProperty(exports, "BaseTool", { enumerable: true, get: function () { return __importDefault(BaseTool_1).default; } });
+var ToolController_1 = require("./ToolController");
+Object.defineProperty(exports, "ToolController", { enumerable: true, get: function () { return __importDefault(ToolController_1).default; } });
+var ToolEnabledGroup_1 = require("./ToolEnabledGroup");
+Object.defineProperty(exports, "ToolEnabledGroup", { enumerable: true, get: function () { return __importDefault(ToolEnabledGroup_1).default; } });
+var UndoRedoShortcut_1 = require("./UndoRedoShortcut");
+Object.defineProperty(exports, "UndoRedoShortcut", { enumerable: true, get: function () { return __importDefault(UndoRedoShortcut_1).default; } });
+var ToolSwitcherShortcut_1 = require("./ToolSwitcherShortcut");
+Object.defineProperty(exports, "ToolSwitcherShortcut", { enumerable: true, get: function () { return __importDefault(ToolSwitcherShortcut_1).default; } });
+var PanZoom_1 = require("./PanZoom");
+Object.defineProperty(exports, "PanZoomTool", { enumerable: true, get: function () { return __importDefault(PanZoom_1).default; } });
+Object.defineProperty(exports, "PanZoomMode", { enumerable: true, get: function () { return PanZoom_1.PanZoomMode; } });
+var Pen_1 = require("./Pen");
+Object.defineProperty(exports, "PenTool", { enumerable: true, get: function () { return __importDefault(Pen_1).default; } });
+var TextTool_1 = require("./TextTool");
+Object.defineProperty(exports, "TextTool", { enumerable: true, get: function () { return __importDefault(TextTool_1).default; } });
+var SelectionTool_1 = require("./SelectionTool/SelectionTool");
+Object.defineProperty(exports, "SelectionTool", { enumerable: true, get: function () { return __importDefault(SelectionTool_1).default; } });
+var SelectAllShortcutHandler_1 = require("./SelectionTool/SelectAllShortcutHandler");
+Object.defineProperty(exports, "SelectAllShortcutHandler", { enumerable: true, get: function () { return __importDefault(SelectAllShortcutHandler_1).default; } });
+var Eraser_1 = require("./Eraser");
+Object.defineProperty(exports, "EraserTool", { enumerable: true, get: function () { return __importDefault(Eraser_1).default; } });
+var PasteHandler_1 = require("./PasteHandler");
+Object.defineProperty(exports, "PasteHandler", { enumerable: true, get: function () { return __importDefault(PasteHandler_1).default; } });
+var ToolbarShortcutHandler_1 = require("./ToolbarShortcutHandler");
+Object.defineProperty(exports, "ToolbarShortcutHandler", { enumerable: true, get: function () { return __importDefault(ToolbarShortcutHandler_1).default; } });

package/dist/cjs/src/tools/localization.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultToolLocalization = void 0;
+exports.defaultToolLocalization = {
+    penTool: (penId) => `Pen ${penId}`,
+    selectionTool: 'Selection',
+    selectAllTool: 'Select all shortcut',
+    eraserTool: 'Eraser',
+    touchPanTool: 'Touch panning',
+    twoFingerPanZoomTool: 'Panning and zooming',
+    undoRedoTool: 'Undo/Redo',
+    rightClickDragPanTool: 'Right-click drag',
+    pipetteTool: 'Pick color from screen',
+    keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
+    textTool: 'Text',
+    enterTextToInsert: 'Text to insert',
+    changeTool: 'Change tool',
+    pasteHandler: 'Copy paste handler',
+    findLabel: 'Find',
+    toNextMatch: 'Next',
+    closeFindDialog: 'Close',
+    findDialogShown: 'Find dialog shown',
+    findDialogHidden: 'Find dialog hidden',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
+    anyDevicePanning: 'Any device panning',
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
+};

package/dist/cjs/src/types.js

@@ -0,0 +1,38 @@
+"use strict";
+// Types related to the image editor
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UndoEventType = exports.EditorEventType = exports.InputEvtType = void 0;
+var InputEvtType;
+(function (InputEvtType) {
+    InputEvtType[InputEvtType["PointerDownEvt"] = 0] = "PointerDownEvt";
+    InputEvtType[InputEvtType["PointerMoveEvt"] = 1] = "PointerMoveEvt";
+    InputEvtType[InputEvtType["PointerUpEvt"] = 2] = "PointerUpEvt";
+    InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
+    InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
+    InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
+    InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
+    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
+    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
+})(InputEvtType = exports.InputEvtType || (exports.InputEvtType = {}));
+var EditorEventType;
+(function (EditorEventType) {
+    EditorEventType[EditorEventType["ToolEnabled"] = 0] = "ToolEnabled";
+    EditorEventType[EditorEventType["ToolDisabled"] = 1] = "ToolDisabled";
+    EditorEventType[EditorEventType["ToolUpdated"] = 2] = "ToolUpdated";
+    EditorEventType[EditorEventType["UndoRedoStackUpdated"] = 3] = "UndoRedoStackUpdated";
+    EditorEventType[EditorEventType["CommandDone"] = 4] = "CommandDone";
+    EditorEventType[EditorEventType["CommandUndone"] = 5] = "CommandUndone";
+    EditorEventType[EditorEventType["ObjectAdded"] = 6] = "ObjectAdded";
+    EditorEventType[EditorEventType["ViewportChanged"] = 7] = "ViewportChanged";
+    EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
+})(EditorEventType = exports.EditorEventType || (exports.EditorEventType = {}));
+// Types of `EditorUndoStackUpdated` events.
+var UndoEventType;
+(function (UndoEventType) {
+    UndoEventType[UndoEventType["CommandDone"] = 0] = "CommandDone";
+    UndoEventType[UndoEventType["CommandUndone"] = 1] = "CommandUndone";
+    UndoEventType[UndoEventType["CommandRedone"] = 2] = "CommandRedone";
+})(UndoEventType = exports.UndoEventType || (exports.UndoEventType = {}));