js-draw 0.23.0 → 0.24.0

package/dist/mjs/src/toolbar/widgets/PenToolWidget.mjs

@@ -1,221 +0,0 @@
-import  { makeArrowBuilder }  from '../../components/builders/ArrowBuilder.mjs';
-import  { makeFreehandLineBuilder }  from '../../components/builders/FreehandLineBuilder.mjs';
-import  { makePressureSensitiveFreehandLineBuilder }  from '../../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
-import  { makeLineBuilder }  from '../../components/builders/LineBuilder.mjs';
-import  { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder }  from '../../components/builders/RectangleBuilder.mjs';
-import  { EditorEventType }  from '../../types.mjs';
-import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
-import  makeColorInput  from '../makeColorInput.mjs';
-import  BaseToolWidget  from './BaseToolWidget.mjs';
-import  Color4  from '../../Color4.mjs';
-class PenToolWidget extends BaseToolWidget {
-    constructor(editor, tool, localization) {
-        super(editor, tool, 'pen', localization);
-        this.tool = tool;
-        this.updateInputs = () => { };
-        // Default pen types
-        this.penTypes = [
-            {
-                name: this.localizationTable.pressureSensitiveFreehandPen,
-                id: 'pressure-sensitive-pen',
-                factory: makePressureSensitiveFreehandLineBuilder,
-            },
-            {
-                name: this.localizationTable.freehandPen,
-                id: 'freehand-pen',
-                factory: makeFreehandLineBuilder,
-            },
-            {
-                name: this.localizationTable.arrowPen,
-                id: 'arrow',
-                factory: makeArrowBuilder,
-            },
-            {
-                name: this.localizationTable.linePen,
-                id: 'line',
-                factory: makeLineBuilder,
-            },
-            {
-                name: this.localizationTable.filledRectanglePen,
-                id: 'filled-rectangle',
-                factory: makeFilledRectangleBuilder,
-            },
-            {
-                name: this.localizationTable.outlinedRectanglePen,
-                id: 'outlined-rectangle',
-                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;
-    }
-    // Return the index of this tool's stroke factory in the list of
-    // all stroke factories.
-    //
-    // Returns -1 if the stroke factory is not in the list of all stroke factories.
-    getCurrentPenTypeIdx() {
-        const currentFactory = this.tool.getStrokeFactory();
-        for (let i = 0; i < this.penTypes.length; i++) {
-            if (this.penTypes[i].factory === currentFactory) {
-                return i;
-            }
-        }
-        return -1;
-    }
-    getCurrentPenType() {
-        for (const penType of this.penTypes) {
-            if (penType.factory === this.tool.getStrokeFactory()) {
-                return penType;
-            }
-        }
-        return null;
-    }
-    createIcon() {
-        const strokeFactory = this.tool.getStrokeFactory();
-        if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
-            // 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();
-            const roundedTip = strokeFactory === makeFreehandLineBuilder;
-            return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
-        }
-        else {
-            const strokeFactory = this.tool.getStrokeFactory();
-            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
-        }
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        container.classList.add(`${toolbarCSSPrefix}spacedList`);
-        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}penThicknessInput${PenToolWidget.idCounter++}`;
-        objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
-        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
-        thicknessLabel.setAttribute('for', thicknessInput.id);
-        objectSelectLabel.innerText = this.localizationTable.selectPenType;
-        objectSelectLabel.setAttribute('for', objectTypeSelect.id);
-        // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
-        const inverseThicknessInputFn = (t) => Math.log10(t);
-        const thicknessInputFn = (t) => Math.pow(10, t);
-        thicknessInput.type = 'range';
-        thicknessInput.min = `${inverseThicknessInputFn(2)}`;
-        thicknessInput.max = `${inverseThicknessInputFn(400)}`;
-        thicknessInput.step = '0.1';
-        thicknessInput.oninput = () => {
-            this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
-        };
-        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, setColorInputValue] = makeColorInput(this.editor, color => {
-            this.tool.setColor(color);
-        });
-        colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
-        colorLabel.innerText = this.localizationTable.colorLabel;
-        colorLabel.setAttribute('for', colorInput.id);
-        colorRow.appendChild(colorLabel);
-        colorRow.appendChild(colorInputContainer);
-        this.updateInputs = () => {
-            setColorInputValue(this.tool.getColor());
-            thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
-            // Update the list of stroke factories
-            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);
-            }
-            // Update the selected stroke factory.
-            const strokeFactoryIdx = this.getCurrentPenTypeIdx();
-            if (strokeFactoryIdx === -1) {
-                objectTypeSelect.value = '';
-            }
-            else {
-                objectTypeSelect.value = strokeFactoryIdx.toString();
-            }
-        };
-        this.updateInputs();
-        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
-        dropdown.replaceChildren(container);
-        return true;
-    }
-    onKeyPress(event) {
-        if (!this.isSelected()) {
-            return false;
-        }
-        // Map alt+0-9 to different pen types.
-        if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
-            const penTypeIdx = parseInt(event.key) - 1;
-            if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
-                this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
-                return true;
-            }
-        }
-        return false;
-    }
-    serializeState() {
-        var _a;
-        return Object.assign(Object.assign({}, super.serializeState()), { color: this.tool.getColor().toHexString(), thickness: this.tool.getThickness(), strokeFactoryId: (_a = this.getCurrentPenType()) === null || _a === void 0 ? void 0 : _a.id });
-    }
-    deserializeFrom(state) {
-        super.deserializeFrom(state);
-        const verifyPropertyType = (propertyName, expectedType) => {
-            const actualType = typeof (state[propertyName]);
-            if (actualType !== expectedType) {
-                throw new Error(`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
-                    ` was ${actualType}.`);
-            }
-        };
-        if (state.color) {
-            verifyPropertyType('color', 'string');
-            this.tool.setColor(Color4.fromHex(state.color));
-        }
-        if (state.thickness) {
-            verifyPropertyType('thickness', 'number');
-            this.tool.setThickness(state.thickness);
-        }
-        if (state.strokeFactoryId) {
-            verifyPropertyType('strokeFactoryId', 'string');
-            const factoryId = state.strokeFactoryId;
-            for (const penType of this.penTypes) {
-                if (factoryId === penType.id) {
-                    this.tool.setStrokeFactory(penType.factory);
-                    break;
-                }
-            }
-        }
-    }
-}
-PenToolWidget.idCounter = 0;
-export default PenToolWidget;

package/dist/mjs/src/toolbar/widgets/SelectionToolWidget.mjs

@@ -1,147 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import  Color4  from '../../Color4.mjs';
-import  { isRestylableComponent }  from '../../components/RestylableComponent.mjs';
-import  uniteCommands  from '../../commands/uniteCommands.mjs';
-import  { EditorEventType }  from '../../types.mjs';
-import  makeColorInput  from '../makeColorInput.mjs';
-import  ActionButtonWidget  from './ActionButtonWidget.mjs';
-import  BaseToolWidget  from './BaseToolWidget.mjs';
-import  BaseWidget  from './BaseWidget.mjs';
-class RestyleSelectionWidget extends BaseWidget {
-    constructor(editor, selectionTool, localizationTable) {
-        super(editor, 'restyle-selection', localizationTable);
-        this.selectionTool = selectionTool;
-        this.updateFormatData = () => { };
-        // Allow showing the dropdown even if this widget isn't selected yet
-        this.container.classList.add('dropdownShowable');
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
-                throw new Error('Invalid event type!');
-            }
-            if (toolEvt.tool === this.selectionTool) {
-                this.updateFormatData();
-            }
-        });
-    }
-    getTitle() {
-        return this.localizationTable.reformatSelection;
-    }
-    createIcon() {
-        return this.editor.icons.makeFormatSelectionIcon();
-    }
-    handleClick() {
-        this.setDropdownVisible(!this.isDropdownVisible());
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        const colorRow = document.createElement('div');
-        const colorLabel = document.createElement('label');
-        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
-            const selection = this.selectionTool.getSelection();
-            if (selection) {
-                const updateStyleCommands = [];
-                for (const elem of selection.getSelectedObjects()) {
-                    if (isRestylableComponent(elem)) {
-                        updateStyleCommands.push(elem.updateStyle({ color }));
-                    }
-                }
-                const unitedCommand = uniteCommands(updateStyleCommands);
-                this.editor.dispatch(unitedCommand);
-            }
-        });
-        colorLabel.innerText = this.localizationTable.colorLabel;
-        this.updateFormatData = () => {
-            const selection = this.selectionTool.getSelection();
-            if (selection) {
-                colorInput.disabled = false;
-                const colors = [];
-                for (const elem of selection.getSelectedObjects()) {
-                    if (isRestylableComponent(elem)) {
-                        const color = elem.getStyle().color;
-                        if (color) {
-                            colors.push(color);
-                        }
-                    }
-                }
-                setColorInputValue(Color4.average(colors));
-            }
-            else {
-                colorInput.disabled = true;
-            }
-        };
-        colorRow.replaceChildren(colorLabel, colorInputContainer);
-        container.replaceChildren(colorRow);
-        dropdown.replaceChildren(container);
-        return true;
-    }
-}
-export default class SelectionToolWidget extends BaseToolWidget {
-    constructor(editor, tool, localization) {
-        super(editor, tool, 'selection-tool-widget', localization);
-        this.tool = tool;
-        const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
-            this.resizeImageToSelection();
-        }, localization);
-        const deleteButton = new ActionButtonWidget(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
-            const selection = this.tool.getSelection();
-            this.editor.dispatch(selection.deleteSelectedObjects());
-            this.tool.clearSelection();
-        }, localization);
-        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => __awaiter(this, void 0, void 0, function* () {
-            const selection = this.tool.getSelection();
-            this.editor.dispatch(yield selection.duplicateSelectedObjects());
-        }), localization);
-        const restyleButton = new RestyleSelectionWidget(editor, this.tool, localization);
-        this.addSubWidget(resizeButton);
-        this.addSubWidget(deleteButton);
-        this.addSubWidget(duplicateButton);
-        this.addSubWidget(restyleButton);
-        const updateDisabled = (disabled) => {
-            resizeButton.setDisabled(disabled);
-            deleteButton.setDisabled(disabled);
-            duplicateButton.setDisabled(disabled);
-            restyleButton.setDisabled(disabled);
-        };
-        updateDisabled(true);
-        // 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.getSelectedItemCount() > 0;
-                updateDisabled(!hasSelection);
-            }
-        });
-    }
-    resizeImageToSelection() {
-        const selection = this.tool.getSelection();
-        if (selection) {
-            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
-        }
-    }
-    onKeyPress(event) {
-        // Resize image to selection:
-        // Other keys are handled directly by the selection tool.
-        if (event.ctrlKey && event.key === 'r') {
-            this.resizeImageToSelection();
-            return true;
-        }
-        return false;
-    }
-    getTitle() {
-        return this.localizationTable.select;
-    }
-    createIcon() {
-        return this.editor.icons.makeSelectionIcon();
-    }
-}

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

@@ -1,110 +0,0 @@
-import  Color4  from '../../Color4.mjs';
-import  { EditorEventType }  from '../../types.mjs';
-import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
-import  makeColorInput  from '../makeColorInput.mjs';
-import  BaseToolWidget  from './BaseToolWidget.mjs';
-class TextToolWidget extends BaseToolWidget {
-    constructor(editor, tool, localization) {
-        super(editor, tool, 'text-tool-widget', 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 this.editor.icons.makeTextIcon(textStyle);
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        container.classList.add(`${toolbarCSSPrefix}spacedList`);
-        const fontRow = document.createElement('div');
-        const colorRow = document.createElement('div');
-        const sizeRow = document.createElement('div');
-        const fontInput = document.createElement('select');
-        const fontLabel = document.createElement('label');
-        const sizeInput = document.createElement('input');
-        const sizeLabel = document.createElement('label');
-        const [colorInput, colorInputContainer, setColorInputValue] = 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);
-        };
-        sizeInput.setAttribute('type', 'number');
-        sizeInput.min = '1';
-        sizeInput.max = '128';
-        fontLabel.innerText = this.localizationTable.fontLabel;
-        colorLabel.innerText = this.localizationTable.colorLabel;
-        sizeLabel.innerText = this.localizationTable.textSize;
-        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
-        colorLabel.setAttribute('for', colorInput.id);
-        sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
-        sizeLabel.setAttribute('for', sizeInput.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);
-        };
-        sizeInput.onchange = () => {
-            const size = parseInt(sizeInput.value);
-            if (!isNaN(size) && size > 0) {
-                this.tool.setFontSize(size);
-            }
-        };
-        colorRow.appendChild(colorLabel);
-        colorRow.appendChild(colorInputContainer);
-        fontRow.appendChild(fontLabel);
-        fontRow.appendChild(fontInput);
-        sizeRow.appendChild(sizeLabel);
-        sizeRow.appendChild(sizeInput);
-        this.updateDropdownInputs = () => {
-            const style = this.tool.getTextStyle();
-            setColorInputValue(style.renderingStyle.fill);
-            if (!fontsInInput.has(style.fontFamily)) {
-                addFontToInput(style.fontFamily);
-            }
-            fontInput.value = style.fontFamily;
-            sizeInput.value = `${style.size}`;
-        };
-        this.updateDropdownInputs();
-        container.replaceChildren(colorRow, sizeRow, fontRow);
-        dropdown.appendChild(container);
-        return true;
-    }
-    serializeState() {
-        const textStyle = this.tool.getTextStyle();
-        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, textSize: textStyle.size, color: textStyle.renderingStyle.fill.toHexString() });
-    }
-    deserializeFrom(state) {
-        if (state.fontFamily && typeof (state.fontFamily) === 'string') {
-            this.tool.setFontFamily(state.fontFamily);
-        }
-        if (state.color && typeof (state.color) === 'string') {
-            this.tool.setColor(Color4.fromHex(state.color));
-        }
-        if (state.textSize && typeof (state.textSize) === 'number') {
-            this.tool.setFontSize(state.textSize);
-        }
-        super.deserializeFrom(state);
-    }
-}
-TextToolWidget.idCounter = 0;
-export default TextToolWidget;

package/dist/mjs/src/tools/BaseTool.mjs

@@ -1,63 +0,0 @@
-import  { EditorEventType }  from '../types.mjs';
-export default class BaseTool {
-    onPointerDown(_event) { return false; }
-    onPointerMove(_event) { }
-    onPointerUp(_event) { }
-    onGestureCancel() { }
-    constructor(notifier, description) {
-        this.notifier = notifier;
-        this.description = description;
-        this.enabled = true;
-        this.group = null;
-    }
-    onWheel(_event) {
-        return false;
-    }
-    onCopy(_event) {
-        return false;
-    }
-    onPaste(_event) {
-        return false;
-    }
-    onKeyPress(_event) {
-        return false;
-    }
-    onKeyUp(_event) {
-        return false;
-    }
-    setEnabled(enabled) {
-        var _a;
-        this.enabled = enabled;
-        // Ensure that at most one tool in the group is enabled.
-        if (enabled) {
-            (_a = this.group) === null || _a === void 0 ? void 0 : _a.notifyEnabled(this);
-            this.notifier.dispatch(EditorEventType.ToolEnabled, {
-                kind: EditorEventType.ToolEnabled,
-                tool: this,
-            });
-        }
-        else {
-            this.notifier.dispatch(EditorEventType.ToolDisabled, {
-                kind: EditorEventType.ToolDisabled,
-                tool: this,
-            });
-        }
-    }
-    isEnabled() {
-        return this.enabled;
-    }
-    // Connect this tool to a set of other tools, ensuring that at most one
-    // of the tools in the group is enabled.
-    setToolGroup(group) {
-        if (this.isEnabled()) {
-            group.notifyEnabled(this);
-        }
-        this.group = group;
-    }
-    getToolGroup() {
-        if (this.group) {
-            return this.group;
-        }
-        return null;
-    }
-}

package/dist/mjs/src/tools/Eraser.d.ts

@@ -1,23 +0,0 @@
-import { PointerEvt } from '../types';
-import BaseTool from './BaseTool';
-import Editor from '../Editor';
-export default class Eraser extends BaseTool {
-    private editor;
-    private lastPoint;
-    private isFirstEraseEvt;
-    private toRemove;
-    private thickness;
-    private partialCommands;
-    constructor(editor: Editor, description: string);
-    private clearPreview;
-    private getSizeOnCanvas;
-    private drawPreviewAt;
-    private getEraserRect;
-    private eraseTo;
-    onPointerDown(event: PointerEvt): boolean;
-    onPointerMove(event: PointerEvt): void;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
-    getThickness(): number;
-    setThickness(thickness: number): void;
-}

package/dist/mjs/src/tools/Eraser.mjs

@@ -1,106 +0,0 @@
-import  { EditorEventType }  from '../types.mjs';
-import  BaseTool  from './BaseTool.mjs';
-import  { Vec2 }  from '../math/Vec2.mjs';
-import  LineSegment2  from '../math/LineSegment2.mjs';
-import  Erase  from '../commands/Erase.mjs';
-import  { PointerDevice }  from '../Pointer.mjs';
-import  Color4  from '../Color4.mjs';
-import  Rect2  from '../math/Rect2.mjs';
-export default class Eraser extends BaseTool {
-    constructor(editor, description) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.lastPoint = null;
-        this.isFirstEraseEvt = true;
-        this.thickness = 10;
-        // Commands that each remove one element
-        this.partialCommands = [];
-    }
-    clearPreview() {
-        this.editor.clearWetInk();
-    }
-    getSizeOnCanvas() {
-        return this.thickness / this.editor.viewport.getScaleFactor();
-    }
-    drawPreviewAt(point) {
-        this.clearPreview();
-        const size = this.getSizeOnCanvas();
-        const renderer = this.editor.display.getWetInkRenderer();
-        const rect = this.getEraserRect(point);
-        const fill = {
-            fill: Color4.gray,
-        };
-        renderer.drawRect(rect, size / 4, fill);
-    }
-    getEraserRect(centerPoint) {
-        const size = this.getSizeOnCanvas();
-        const halfSize = Vec2.of(size / 2, size / 2);
-        return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
-    }
-    eraseTo(currentPoint) {
-        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
-            return;
-        }
-        this.isFirstEraseEvt = false;
-        // Currently only objects within eraserRect or that intersect a straight line
-        // from the center of the current rect to the previous are erased. TODO: Erase
-        // all objects as if there were pointerMove events between the two points.
-        const eraserRect = this.getEraserRect(currentPoint);
-        const line = new LineSegment2(this.lastPoint, currentPoint);
-        const region = Rect2.union(line.bbox, eraserRect);
-        const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
-            return component.intersects(line) || component.intersectsRect(eraserRect);
-        });
-        // Only erase components that could be selected (and thus interacted with)
-        // by the user.
-        const toErase = intersectingElems.filter(elem => elem.isSelectable());
-        // Remove any intersecting elements.
-        this.toRemove.push(...toErase);
-        // Create new Erase commands for the now-to-be-erased elements and apply them.
-        const newPartialCommands = toErase.map(elem => new Erase([elem]));
-        newPartialCommands.forEach(cmd => cmd.apply(this.editor));
-        this.partialCommands.push(...newPartialCommands);
-        this.drawPreviewAt(currentPoint);
-        this.lastPoint = currentPoint;
-    }
-    onPointerDown(event) {
-        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
-            this.lastPoint = event.current.canvasPos;
-            this.toRemove = [];
-            this.isFirstEraseEvt = true;
-            this.drawPreviewAt(event.current.canvasPos);
-            return true;
-        }
-        return false;
-    }
-    onPointerMove(event) {
-        const currentPoint = event.current.canvasPos;
-        this.eraseTo(currentPoint);
-    }
-    onPointerUp(event) {
-        this.eraseTo(event.current.canvasPos);
-        if (this.toRemove.length > 0) {
-            // Undo commands for each individual component and unite into a single command.
-            this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
-            this.partialCommands = [];
-            const command = new Erase(this.toRemove);
-            this.editor.dispatch(command); // dispatch: Makes undo-able.
-        }
-        this.clearPreview();
-    }
-    onGestureCancel() {
-        this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
-        this.partialCommands = [];
-        this.clearPreview();
-    }
-    getThickness() {
-        return this.thickness;
-    }
-    setThickness(thickness) {
-        this.thickness = thickness;
-        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-            kind: EditorEventType.ToolUpdated,
-            tool: this,
-        });
-    }
-}