js-draw 0.1.6 → 0.1.9

package/dist/src/toolbar/widgets/HandToolWidget.js

@@ -0,0 +1,133 @@
+import Mat33 from '../../geometry/Mat33';
+import { PanZoomMode } from '../../tools/PanZoom';
+import { EditorEventType } from '../../types';
+import Viewport from '../../Viewport';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeAllDevicePanningIcon, makeHandToolIcon, makeTouchPanningIcon, makeZoomIcon } from '../icons';
+import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+const makeZoomControl = (localizationTable, editor) => {
+    const zoomLevelRow = document.createElement('div');
+    const increaseButton = document.createElement('button');
+    const decreaseButton = document.createElement('button');
+    const zoomLevelDisplay = document.createElement('span');
+    increaseButton.innerText = '+';
+    decreaseButton.innerText = '-';
+    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+    zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
+    zoomLevelDisplay.classList.add('zoomDisplay');
+    let lastZoom;
+    const updateZoomDisplay = () => {
+        let zoomLevel = editor.viewport.getScaleFactor() * 100;
+        if (zoomLevel > 0.1) {
+            zoomLevel = Math.round(zoomLevel * 10) / 10;
+        }
+        else {
+            zoomLevel = Math.round(zoomLevel * 1000) / 1000;
+        }
+        if (zoomLevel !== lastZoom) {
+            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            lastZoom = zoomLevel;
+        }
+    };
+    updateZoomDisplay();
+    editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
+        if (event.kind === EditorEventType.ViewportChanged) {
+            updateZoomDisplay();
+        }
+    });
+    const zoomBy = (factor) => {
+        const screenCenter = editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(factor, screenCenter);
+        editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+    };
+    increaseButton.onclick = () => {
+        zoomBy(5.0 / 4);
+    };
+    decreaseButton.onclick = () => {
+        zoomBy(4.0 / 5);
+    };
+    return zoomLevelRow;
+};
+class ZoomWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        super(editor, localizationTable);
+        // Make it possible to open the dropdown, even if this widget isn't selected.
+        this.container.classList.add('dropdownShowable');
+    }
+    getTitle() {
+        return this.localizationTable.zoom;
+    }
+    createIcon() {
+        return makeZoomIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        return true;
+    }
+}
+class HandModeWidget extends BaseWidget {
+    constructor(editor, localizationTable, tool, flag, makeIcon, title) {
+        super(editor, localizationTable);
+        this.tool = tool;
+        this.flag = flag;
+        this.makeIcon = makeIcon;
+        this.title = title;
+        editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+                const allEnabled = !!(tool.getMode() & PanZoomMode.SinglePointerGestures);
+                this.setSelected(!!(tool.getMode() & flag) || allEnabled);
+                // Unless this widget toggles all single pointer gestures, toggling while
+                // single pointer gestures are enabled should have no effect
+                this.setDisabled(allEnabled && flag !== PanZoomMode.SinglePointerGestures);
+            }
+        });
+        this.setSelected(false);
+    }
+    setModeFlag(enabled) {
+        const mode = this.tool.getMode();
+        if (enabled) {
+            this.tool.setMode(mode | this.flag);
+        }
+        else {
+            this.tool.setMode(mode & ~this.flag);
+        }
+    }
+    handleClick() {
+        this.setModeFlag(!this.isSelected());
+    }
+    getTitle() {
+        return this.title;
+    }
+    createIcon() {
+        return this.makeIcon();
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+}
+export default class HandToolWidget extends BaseToolWidget {
+    constructor(editor, tool, localizationTable) {
+        super(editor, tool, localizationTable);
+        this.tool = tool;
+        this.container.classList.add('dropdownShowable');
+        this.touchPanningWidget = new HandModeWidget(editor, localizationTable, tool, PanZoomMode.OneFingerTouchGestures, makeTouchPanningIcon, localizationTable.touchPanning);
+        this.addSubWidget(this.touchPanningWidget);
+        this.addSubWidget(new HandModeWidget(editor, localizationTable, tool, PanZoomMode.SinglePointerGestures, makeAllDevicePanningIcon, localizationTable.anyDevicePanning));
+        this.addSubWidget(new ZoomWidget(editor, localizationTable));
+    }
+    getTitle() {
+        return this.localizationTable.handTool;
+    }
+    createIcon() {
+        return makeHandToolIcon();
+    }
+    setSelected(_selected) {
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+}

package/dist/src/toolbar/widgets/PenWidget.d.ts

@@ -0,0 +1,20 @@
+import { ComponentBuilderFactory } from '../../components/builders/types';
+import Editor from '../../Editor';
+import Pen from '../../tools/Pen';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+interface PenTypeRecord {
+    name: string;
+    factory: ComponentBuilderFactory;
+}
+export default class PenWidget extends BaseToolWidget {
+    private tool;
+    private updateInputs;
+    protected penTypes: PenTypeRecord[];
+    constructor(editor: Editor, tool: Pen, localization: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+}
+export {};

package/dist/src/toolbar/widgets/PenWidget.js

@@ -0,0 +1,131 @@
+import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
+import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
+import { makeLineBuilder } from '../../components/builders/LineBuilder';
+import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeIconFromFactory, makePenIcon } from '../icons';
+import makeColorInput from '../makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+export default class PenWidget extends BaseToolWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateInputs = () => { };
+        // Default pen types
+        this.penTypes = [
+            {
+                name: localization.freehandPen,
+                factory: makeFreehandLineBuilder,
+            },
+            {
+                name: localization.arrowPen,
+                factory: makeArrowBuilder,
+            },
+            {
+                name: localization.linePen,
+                factory: makeLineBuilder,
+            },
+            {
+                name: localization.filledRectanglePen,
+                factory: makeFilledRectangleBuilder,
+            },
+            {
+                name: localization.outlinedRectanglePen,
+                factory: makeOutlinedRectangleBuilder,
+            },
+        ];
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            // The button icon may depend on tool properties.
+            if (toolEvt.tool === this.tool) {
+                this.updateIcon();
+                this.updateInputs();
+            }
+        });
+    }
+    getTitle() {
+        return this.targetTool.description;
+    }
+    createIcon() {
+        const strokeFactory = this.tool.getStrokeFactory();
+        if (strokeFactory === makeFreehandLineBuilder) {
+            // Use a square-root scale to prevent the pen's tip from overflowing.
+            const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
+            const color = this.tool.getColor();
+            return makePenIcon(scale, color.toHexString());
+        }
+        else {
+            const strokeFactory = this.tool.getStrokeFactory();
+            return makeIconFromFactory(this.tool, strokeFactory);
+        }
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const thicknessRow = document.createElement('div');
+        const objectTypeRow = document.createElement('div');
+        // Thickness: Value of the input is squared to allow for finer control/larger values.
+        const thicknessLabel = document.createElement('label');
+        const thicknessInput = document.createElement('input');
+        const objectSelectLabel = document.createElement('label');
+        const objectTypeSelect = document.createElement('select');
+        // Give inputs IDs so we can label them with a <label for=...>Label text</label>
+        thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
+        objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenWidget.idCounter++}`;
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.setAttribute('for', thicknessInput.id);
+        objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+        objectSelectLabel.setAttribute('for', objectTypeSelect.id);
+        thicknessInput.type = 'range';
+        thicknessInput.min = '1';
+        thicknessInput.max = '20';
+        thicknessInput.step = '1';
+        thicknessInput.oninput = () => {
+            this.tool.setThickness(Math.pow(parseFloat(thicknessInput.value), 2));
+        };
+        thicknessRow.appendChild(thicknessLabel);
+        thicknessRow.appendChild(thicknessInput);
+        objectTypeSelect.oninput = () => {
+            const penTypeIdx = parseInt(objectTypeSelect.value);
+            if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
+                console.error('Invalid pen type index', penTypeIdx);
+                return;
+            }
+            this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+        };
+        objectTypeRow.appendChild(objectSelectLabel);
+        objectTypeRow.appendChild(objectTypeSelect);
+        const colorRow = document.createElement('div');
+        const colorLabel = document.createElement('label');
+        const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        colorInput.id = `${toolbarCSSPrefix}colorInput${PenWidget.idCounter++}`;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorLabel.setAttribute('for', colorInput.id);
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInputContainer);
+        this.updateInputs = () => {
+            colorInput.value = this.tool.getColor().toHexString();
+            thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+            objectTypeSelect.replaceChildren();
+            for (let i = 0; i < this.penTypes.length; i++) {
+                const penType = this.penTypes[i];
+                const option = document.createElement('option');
+                option.value = i.toString();
+                option.innerText = penType.name;
+                objectTypeSelect.appendChild(option);
+                if (penType.factory === this.tool.getStrokeFactory()) {
+                    objectTypeSelect.value = i.toString();
+                }
+            }
+        };
+        this.updateInputs();
+        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
+PenWidget.idCounter = 0;

package/dist/src/toolbar/widgets/SelectionWidget.d.ts

@@ -0,0 +1,11 @@
+import Editor from '../../Editor';
+import SelectionTool from '../../tools/SelectionTool';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+export declare class SelectionWidget extends BaseToolWidget {
+    private tool;
+    constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+}

package/dist/src/toolbar/widgets/SelectionWidget.js

@@ -0,0 +1,56 @@
+import { EditorEventType } from '../../types';
+import { makeSelectionIcon } from '../icons';
+import BaseToolWidget from './BaseToolWidget';
+export class SelectionWidget extends BaseToolWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+    }
+    getTitle() {
+        return this.localizationTable.select;
+    }
+    createIcon() {
+        return makeSelectionIcon();
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const resizeButton = document.createElement('button');
+        const duplicateButton = document.createElement('button');
+        const deleteButton = document.createElement('button');
+        resizeButton.innerText = this.localizationTable.resizeImageToSelection;
+        resizeButton.disabled = true;
+        deleteButton.innerText = this.localizationTable.deleteSelection;
+        deleteButton.disabled = true;
+        duplicateButton.innerText = this.localizationTable.duplicateSelection;
+        duplicateButton.disabled = true;
+        resizeButton.onclick = () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+        };
+        deleteButton.onclick = () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(selection.deleteSelectedObjects());
+            this.tool.clearSelection();
+        };
+        duplicateButton.onclick = () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(selection.duplicateSelectedObjects());
+        };
+        // Enable/disable actions based on whether items are selected
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            if (toolEvt.tool === this.tool) {
+                const selection = this.tool.getSelection();
+                const hasSelection = selection && selection.region.area > 0;
+                resizeButton.disabled = !hasSelection;
+                deleteButton.disabled = resizeButton.disabled;
+                duplicateButton.disabled = resizeButton.disabled;
+            }
+        });
+        container.replaceChildren(resizeButton, duplicateButton, deleteButton);
+        dropdown.appendChild(container);
+        return true;
+    }
+}

package/dist/src/toolbar/widgets/TextToolWidget.d.ts

@@ -0,0 +1,13 @@
+import Editor from '../../Editor';
+import TextTool from '../../tools/TextTool';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+export default class TextToolWidget extends BaseToolWidget {
+    private tool;
+    private updateDropdownInputs;
+    constructor(editor: Editor, tool: TextTool, localization: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+}

package/dist/src/toolbar/widgets/TextToolWidget.js

@@ -0,0 +1,72 @@
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeTextIcon } from '../icons';
+import makeColorInput from '../makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+export default class TextToolWidget extends BaseToolWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+            var _a;
+            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+                this.updateIcon();
+                (_a = this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+        });
+    }
+    getTitle() {
+        return this.targetTool.description;
+    }
+    createIcon() {
+        const textStyle = this.tool.getTextStyle();
+        return makeTextIcon(textStyle);
+    }
+    fillDropdown(dropdown) {
+        const fontRow = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
+        const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        const colorLabel = document.createElement('label');
+        const fontsInInput = new Set();
+        const addFontToInput = (fontName) => {
+            const option = document.createElement('option');
+            option.value = fontName;
+            option.textContent = fontName;
+            fontInput.appendChild(option);
+            fontsInInput.add(fontName);
+        };
+        fontLabel.innerText = this.localizationTable.fontLabel;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+        fontLabel.setAttribute('for', fontInput.id);
+        fontInput.onchange = () => {
+            this.tool.setFontFamily(fontInput.value);
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInputContainer);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
+            colorInput.value = style.renderingStyle.fill.toHexString();
+            if (!fontsInInput.has(style.fontFamily)) {
+                addFontToInput(style.fontFamily);
+            }
+            fontInput.value = style.fontFamily;
+        };
+        this.updateDropdownInputs();
+        dropdown.replaceChildren(colorRow, fontRow);
+        return true;
+    }
+}
+TextToolWidget.idCounter = 0;

package/dist/src/tools/Pen.js

@@ -68,7 +68,7 @@ export default class Pen extends BaseTool {
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
                 const canFlatten = true;
-                const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+                const action = EditorImage.addElement(stroke, canFlatten);
                 this.editor.dispatch(action);
             }
             else {

package/dist/src/tools/PipetteTool.d.ts

@@ -0,0 +1,20 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+declare type ColorListener = (color: Color4 | null) => void;
+export default class PipetteTool extends BaseTool {
+    private editor;
+    kind: ToolType;
+    private colorPreviewListener;
+    private colorSelectListener;
+    constructor(editor: Editor, description: string);
+    setColorListener(colorPreviewListener: ColorListener, colorSelectListener: ColorListener): void;
+    clearColorListener(): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export {};

package/dist/src/tools/PipetteTool.js

@@ -0,0 +1,40 @@
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export default class PipetteTool extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.kind = ToolType.Pipette;
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+    }
+    setColorListener(colorPreviewListener, 
+    // Called when the gesture ends -- when the user has selected a color.
+    colorSelectListener) {
+        this.colorPreviewListener = colorPreviewListener;
+        this.colorSelectListener = colorSelectListener;
+    }
+    clearColorListener() {
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+    }
+    onPointerDown({ current, allPointers }) {
+        if (this.colorPreviewListener && allPointers.length === 1) {
+            this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+            return true;
+        }
+        return false;
+    }
+    onPointerMove({ current }) {
+        var _a;
+        (_a = this.colorPreviewListener) === null || _a === void 0 ? void 0 : _a.call(this, this.editor.display.getColorAt(current.screenPos));
+    }
+    onPointerUp({ current }) {
+        var _a;
+        (_a = this.colorSelectListener) === null || _a === void 0 ? void 0 : _a.call(this, this.editor.display.getColorAt(current.screenPos));
+    }
+    onGestureCancel() {
+        var _a;
+        (_a = this.colorSelectListener) === null || _a === void 0 ? void 0 : _a.call(this, null);
+    }
+}

package/dist/src/tools/SelectionTool.d.ts

@@ -21,6 +21,7 @@ declare class Selection {
     handleRotateCircleDrag(offset: Vec2): void;
     private computeTransformCommands;
     finishDragging(): void;
+    private static ApplyTransformationCommand;
     private previewTransformCmds;
     appendBackgroundBoxTo(elem: HTMLElement): void;
     setToPoint(point: Point2): void;
@@ -32,6 +33,7 @@ declare class Selection {
     getSelectedItemCount(): number;
     updateUI(): void;
     deleteSelectedObjects(): Command;
+    duplicateSelectedObjects(): Command;
 }
 export default class SelectionTool extends BaseTool {
     private editor;

package/dist/src/tools/SelectionTool.js

@@ -7,6 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import Command from '../commands/Command';
+import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import Mat33 from '../geometry/Mat33';
 // import Mat33 from "../geometry/Mat33";
@@ -219,28 +221,7 @@ class Selection {
         this.transform = Mat33.identity;
         this.region = this.region.transformedBoundingBox(inverseTransform);
         // Make the commands undo-able
-        this.editor.dispatch({
-            apply: (editor) => __awaiter(this, void 0, void 0, function* () {
-                // Approximate the new selection
-                this.region = this.region.transformedBoundingBox(fullTransform);
-                this.boxRotation += deltaBoxRotation;
-                this.updateUI();
-                yield editor.asyncApplyCommands(currentTransfmCommands, updateChunkSize);
-                this.recomputeRegion();
-                this.updateUI();
-            }),
-            unapply: (editor) => __awaiter(this, void 0, void 0, function* () {
-                this.region = this.region.transformedBoundingBox(inverseTransform);
-                this.boxRotation -= deltaBoxRotation;
-                this.updateUI();
-                yield editor.asyncUnapplyCommands(currentTransfmCommands, updateChunkSize);
-                this.recomputeRegion();
-                this.updateUI();
-            }),
-            description(localizationTable) {
-                return localizationTable.transformedElements(currentTransfmCommands.length);
-            },
-        });
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform, inverseTransform, deltaBoxRotation));
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -350,7 +331,44 @@ class Selection {
     deleteSelectedObjects() {
         return new Erase(this.selectedElems);
     }
+    duplicateSelectedObjects() {
+        return new Duplicate(this.selectedElems);
+    }
 }
+Selection.ApplyTransformationCommand = class extends Command {
+    constructor(selection, currentTransfmCommands, fullTransform, inverseTransform, deltaBoxRotation) {
+        super();
+        this.selection = selection;
+        this.currentTransfmCommands = currentTransfmCommands;
+        this.fullTransform = fullTransform;
+        this.inverseTransform = inverseTransform;
+        this.deltaBoxRotation = deltaBoxRotation;
+    }
+    apply(editor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Approximate the new selection
+            this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform);
+            this.selection.boxRotation += this.deltaBoxRotation;
+            this.selection.updateUI();
+            yield editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+            this.selection.recomputeRegion();
+            this.selection.updateUI();
+        });
+    }
+    unapply(editor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.selection.region = this.selection.region.transformedBoundingBox(this.inverseTransform);
+            this.selection.boxRotation -= this.deltaBoxRotation;
+            this.selection.updateUI();
+            yield editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+            this.selection.recomputeRegion();
+            this.selection.updateUI();
+        });
+    }
+    description(localizationTable) {
+        return localizationTable.transformedElements(this.currentTransfmCommands.length);
+    }
+};
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
@@ -396,7 +414,7 @@ export default class SelectionTool extends BaseTool {
         if (hasSelection) {
             this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
             const selectionRect = this.selectionBox.region;
-            this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
+            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
         }
     }
     onPointerUp(event) {

package/dist/src/tools/TextTool.js

@@ -60,7 +60,7 @@ export default class TextTool extends BaseTool {
             }
             const textTransform = Mat33.translation(this.textTargetPosition).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
             const textComponent = new Text([content], textTransform, this.textStyle);
-            const action = new EditorImage.AddElementCommand(textComponent);
+            const action = EditorImage.addElement(textComponent);
             this.editor.dispatch(action);
         }
     }

package/dist/src/tools/ToolController.d.ts

@@ -8,7 +8,9 @@ export declare enum ToolType {
     Eraser = 2,
     PanZoom = 3,
     Text = 4,
-    UndoRedoShortcut = 5
+    UndoRedoShortcut = 5,
+    Pipette = 6,
+    Other = 7
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -7,6 +7,7 @@ import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
+import PipetteTool from './PipetteTool';
 export var ToolType;
 (function (ToolType) {
     ToolType[ToolType["Pen"] = 0] = "Pen";
@@ -15,6 +16,8 @@ export var ToolType;
     ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
     ToolType[ToolType["Text"] = 4] = "Text";
     ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
+    ToolType[ToolType["Pipette"] = 6] = "Pipette";
+    ToolType[ToolType["Other"] = 7] = "Other";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
@@ -32,6 +35,7 @@ export default class ToolController {
             new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
+            new PipetteTool(editor, localization.pipetteTool),
             panZoomTool,
             ...primaryTools,
             new UndoRedoShortcut(editor),