js-draw 0.0.1

package/dist/src/testing/loadExpectExtensions.js

@@ -0,0 +1,27 @@
+export const loadExpectExtensions = () => {
+    // Custom matchers. See
+    // https://jestjs.io/docs/expect#expectextendmatchers
+    expect.extend({
+        // Determine whether expected = actual based on the objects'
+        // .eq methods
+        objEq(actual, expected, ...eqArgs) {
+            let pass = false;
+            if ((expected !== null && expected !== void 0 ? expected : null) === null) {
+                pass = actual.eq(expected, ...eqArgs);
+            }
+            else {
+                pass = expected.eq(actual, ...eqArgs);
+            }
+            return {
+                pass,
+                message: () => {
+                    if (pass) {
+                        return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
+                    }
+                    return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+                },
+            };
+        },
+    });
+};
+export default loadExpectExtensions;

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { ToolbarLocalization } from './types';
+export default class HTMLToolbar {
+    private editor;
+    private localizationTable;
+    private container;
+    static defaultLocalization: ToolbarLocalization;
+    constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
+    private addUndoRedoButtons;
+    private addElements;
+}

package/dist/src/toolbar/HTMLToolbar.js

@@ -0,0 +1,444 @@
+import { ToolType } from '../tools/ToolController';
+import { EditorEventType } from '../types';
+import { coloris, init as colorisInit } from '@melloware/coloris';
+import Color4 from '../Color4';
+import Pen from '../tools/Pen';
+import Eraser from '../tools/Eraser';
+import SelectionTool from '../tools/SelectionTool';
+const primaryForegroundFill = `
+	style='fill: var(--primary-foreground-color);'
+`;
+const primaryForegroundStrokeFill = `
+	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+`;
+const toolbarCSSPrefix = 'toolbar-';
+class ToolbarWidget {
+    constructor(editor, targetTool, localizationTable) {
+        this.editor = editor;
+        this.targetTool = targetTool;
+        this.localizationTable = localizationTable;
+        this.icon = null;
+        this.container = document.createElement('div');
+        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
+        this.dropdownContainer = document.createElement('div');
+        this.dropdownContainer.classList.add(`${toolbarCSSPrefix}dropdown`);
+        this.dropdownContainer.classList.add('hidden');
+        this.hasDropdown = false;
+        this.button = document.createElement('div');
+        this.button.classList.add(`${toolbarCSSPrefix}button`);
+        this.label = document.createElement('label');
+        this.button.setAttribute('role', 'button');
+        this.button.tabIndex = 0;
+        this.button.onclick = () => {
+            this.handleClick();
+        };
+        editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolEnabled) {
+                throw new Error('Incorrect event type! (Expected ToolEnabled)');
+            }
+            if (toolEvt.tool === targetTool) {
+                this.updateSelected(true);
+            }
+        });
+        editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolDisabled) {
+                throw new Error('Incorrect event type! (Expected ToolDisabled)');
+            }
+            if (toolEvt.tool === targetTool) {
+                this.updateSelected(false);
+                this.setDropdownVisible(false);
+            }
+        });
+    }
+    handleClick() {
+        if (this.hasDropdown) {
+            if (!this.targetTool.isEnabled()) {
+                this.targetTool.setEnabled(true);
+            }
+            else {
+                this.setDropdownVisible(!this.isDropdownVisible());
+            }
+        }
+        else {
+            this.targetTool.setEnabled(!this.targetTool.isEnabled());
+        }
+    }
+    // Adds this to [parent]. This can only be called once for each ToolbarWidget.
+    addTo(parent) {
+        this.label.innerText = this.getTitle();
+        this.icon = null;
+        this.updateIcon();
+        this.updateSelected(this.targetTool.isEnabled());
+        this.button.replaceChildren(this.icon, this.label);
+        this.container.appendChild(this.button);
+        this.hasDropdown = this.fillDropdown(this.dropdownContainer);
+        if (this.hasDropdown) {
+            this.dropdownIcon = this.createDropdownIcon();
+            this.button.appendChild(this.dropdownIcon);
+            this.container.appendChild(this.dropdownContainer);
+        }
+        this.setDropdownVisible(false);
+        parent.appendChild(this.container);
+    }
+    updateIcon() {
+        var _a;
+        const newIcon = this.createIcon();
+        (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
+        this.icon = newIcon;
+        this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+    }
+    updateSelected(selected) {
+        const currentlySelected = this.container.classList.contains('selected');
+        if (currentlySelected === selected) {
+            return;
+        }
+        if (selected) {
+            this.container.classList.add('selected');
+            this.button.ariaSelected = 'true';
+        }
+        else {
+            this.container.classList.remove('selected');
+            this.button.ariaSelected = 'false';
+        }
+    }
+    setDropdownVisible(visible) {
+        const currentlyVisible = this.container.classList.contains('dropdownVisible');
+        if (currentlyVisible === visible) {
+            return;
+        }
+        if (visible) {
+            this.dropdownContainer.classList.remove('hidden');
+            this.container.classList.add('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.targetTool.description));
+        }
+        else {
+            this.dropdownContainer.classList.add('hidden');
+            this.container.classList.remove('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.targetTool.description));
+        }
+    }
+    isDropdownVisible() {
+        return !this.dropdownContainer.classList.contains('hidden');
+    }
+    createDropdownIcon() {
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        icon.innerHTML = `
+		<g>
+			<path
+				d='M5,10 L50,90 L95,10 Z'
+				${primaryForegroundFill}
+			/>
+		</g>
+		`;
+        icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+}
+class EraserWidget extends ToolbarWidget {
+    getTitle() {
+        return this.localizationTable.eraser;
+    }
+    createIcon() {
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        // Draw an eraser-like shape
+        icon.innerHTML = `
+		<g>
+			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+			<rect
+				x=10 y=10 width=80 height=50
+				${primaryForegroundFill}
+			/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+    fillDropdown(_dropdown) {
+        // No dropdown associated with the eraser
+        return false;
+    }
+}
+class SelectionWidget extends ToolbarWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+    }
+    getTitle() {
+        return this.localizationTable.select;
+    }
+    createIcon() {
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        // Draw a cursor-like shape
+        icon.innerHTML = `
+		<g>
+			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
+			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const resizeButton = document.createElement('button');
+        resizeButton.innerText = this.localizationTable.resizeImageToSelection;
+        resizeButton.disabled = true;
+        resizeButton.onclick = () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+        };
+        // 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;
+            }
+        });
+        container.replaceChildren(resizeButton);
+        dropdown.appendChild(container);
+        return true;
+    }
+}
+class TouchDrawingWidget extends ToolbarWidget {
+    getTitle() {
+        return this.localizationTable.touchDrawing;
+    }
+    createIcon() {
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        // Draw a cursor-like shape
+        icon.innerHTML = `
+		<g>
+			<path d='M11,-30 Q0,10 20,20 Q40,20 40,-30 Z' fill='blue' stroke='black'/>
+			<path d='
+				M0,90 L0,50 Q5,40 10,50
+				L10,20 Q20,15 30,20
+				L30,50 Q50,40 80,50
+				L80,90 L10,90 Z'
+				
+				${primaryForegroundStrokeFill}
+			/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '-10 -30 100 100');
+        return icon;
+    }
+    fillDropdown(_dropdown) {
+        // No dropdown
+        return false;
+    }
+    updateSelected(active) {
+        if (active) {
+            this.container.classList.remove('selected');
+        }
+        else {
+            this.container.classList.add('selected');
+        }
+    }
+}
+class PenWidget extends ToolbarWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateInputs = () => { };
+        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() {
+        // We need to use createElementNS to embed an SVG element in HTML.
+        // See http://zhangwenli.com/blog/2017/07/26/createelementns/
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        // Use a square-root scale to prevent the pen's tip from overflowing.
+        const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
+        const color = this.tool.getColor();
+        // Draw a pen-like shape
+        const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
+        const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
+        icon.innerHTML = `
+		<defs>
+			<pattern
+				id='checkerboard'
+				viewBox='0,0,10,10'
+				width='20%'
+				height='20%'
+				patternUnits='userSpaceOnUse'
+			>
+				<rect x=0 y=0 width=10 height=10 fill='white'/>
+				<rect x=0 y=0 width=5 height=5 fill='gray'/>
+				<rect x=5 y=5 width=5 height=5 fill='gray'/>
+			</pattern>
+		</defs>
+		<g>
+			<!-- Pen grip -->
+			<path
+				d='M10,10 L90,10 L90,60 L${50 + scale},80 L${50 - scale},80 L10,60 Z'
+				${primaryForegroundStrokeFill}
+			/>
+		</g>
+		<g>
+			<!-- Checkerboard background for slightly transparent pens -->
+			<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
+
+			<!-- Actual pen tip -->
+			<path
+				d='${primaryStrokeTipPath}'
+				fill='${color.toHexString()}'
+				stroke='${color.toHexString()}'
+			/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        // Thickness: Value of the input is squared to allow for finer control/larger values.
+        const thicknessRow = document.createElement('div');
+        const thicknessLabel = document.createElement('label');
+        const thicknessInput = document.createElement('input');
+        thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.setAttribute('for', thicknessInput.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);
+        const colorRow = document.createElement('div');
+        const colorLabel = document.createElement('label');
+        const colorInput = document.createElement('input');
+        colorInput.id = `${toolbarCSSPrefix}colorInput${PenWidget.idCounter++}`;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorLabel.setAttribute('for', colorInput.id);
+        colorInput.className = 'coloris_input';
+        colorInput.type = 'button';
+        colorInput.oninput = () => {
+            this.tool.setColor(Color4.fromHex(colorInput.value));
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInput);
+        this.updateInputs = () => {
+            colorInput.value = this.tool.getColor().toHexString();
+            thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+        };
+        this.updateInputs();
+        container.replaceChildren(colorRow, thicknessRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
+PenWidget.idCounter = 0;
+export default class HTMLToolbar {
+    constructor(editor, parent, localizationTable = HTMLToolbar.defaultLocalization) {
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.container = document.createElement('div');
+        this.container.classList.add(`${toolbarCSSPrefix}root`);
+        this.container.setAttribute('role', 'toolbar');
+        this.addElements();
+        parent.appendChild(this.container);
+        // Initialize color choosers
+        colorisInit();
+        coloris({
+            el: '.coloris_input',
+            format: 'hex',
+            selectInput: false,
+            focusInput: false,
+            themeMode: 'auto',
+            swatches: [
+                Color4.red.toHexString(),
+                Color4.purple.toHexString(),
+                Color4.blue.toHexString(),
+                Color4.clay.toHexString(),
+                Color4.black.toHexString(),
+                Color4.white.toHexString(),
+            ],
+        });
+    }
+    addActionButton(text, command, parent) {
+        const button = document.createElement('button');
+        button.innerText = text;
+        button.classList.add(`${toolbarCSSPrefix}toolButton`);
+        button.onclick = command;
+        (parent !== null && parent !== void 0 ? parent : this.container).appendChild(button);
+        return button;
+    }
+    addUndoRedoButtons() {
+        const undoRedoGroup = document.createElement('div');
+        undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
+        const undoButton = this.addActionButton('Undo', () => {
+            this.editor.history.undo();
+        }, undoRedoGroup);
+        const redoButton = this.addActionButton('Redo', () => {
+            this.editor.history.redo();
+        }, undoRedoGroup);
+        this.container.appendChild(undoRedoGroup);
+        undoButton.disabled = true;
+        redoButton.disabled = true;
+        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, event => {
+            if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
+                throw new Error('Wrong event type!');
+            }
+            undoButton.disabled = event.undoStackSize === 0;
+            redoButton.disabled = event.redoStackSize === 0;
+        });
+    }
+    addElements() {
+        const toolController = this.editor.toolController;
+        for (const tool of toolController.getMatchingTools(ToolType.Pen)) {
+            if (!(tool instanceof Pen)) {
+                throw new Error('All `Pen` tools must have kind === ToolType.Pen');
+            }
+            const widget = new PenWidget(this.editor, tool, this.localizationTable);
+            widget.addTo(this.container);
+        }
+        for (const tool of toolController.getMatchingTools(ToolType.Eraser)) {
+            if (!(tool instanceof Eraser)) {
+                throw new Error('All Erasers must have kind === ToolType.Eraser!');
+            }
+            (new EraserWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        }
+        for (const tool of toolController.getMatchingTools(ToolType.Selection)) {
+            if (!(tool instanceof SelectionTool)) {
+                throw new Error('All SelectionTools must have kind === ToolType.Selection');
+            }
+            (new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        }
+        for (const tool of toolController.getMatchingTools(ToolType.TouchPanZoom)) {
+            (new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        }
+        this.addUndoRedoButtons();
+    }
+}
+HTMLToolbar.defaultLocalization = {
+    pen: 'Pen',
+    eraser: 'Eraser',
+    select: 'Select',
+    touchDrawing: 'Touch Drawing',
+    thicknessLabel: 'Thickness: ',
+    colorLabel: 'Color: ',
+    resizeImageToSelection: 'Resize image to selection',
+    undo: 'Undo',
+    redo: 'Redo',
+    dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
+    dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+};

package/dist/src/toolbar/types.d.ts

@@ -0,0 +1,17 @@
+export declare enum ToolbarButtonType {
+    ToggleButton = 0,
+    ActionButton = 1
+}
+export interface ToolbarLocalization {
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    touchDrawing: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    undo: string;
+    redo: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+}

package/dist/src/toolbar/types.js

@@ -0,0 +1,5 @@
+export var ToolbarButtonType;
+(function (ToolbarButtonType) {
+    ToolbarButtonType[ToolbarButtonType["ToggleButton"] = 0] = "ToggleButton";
+    ToolbarButtonType[ToolbarButtonType["ActionButton"] = 1] = "ActionButton";
+})(ToolbarButtonType || (ToolbarButtonType = {}));

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

@@ -0,0 +1,20 @@
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent } from '../types';
+import { ToolType } from './ToolController';
+import ToolEnabledGroup from './ToolEnabledGroup';
+export default abstract class BaseTool implements PointerEvtListener {
+    private notifier;
+    readonly description: string;
+    private enabled;
+    private group;
+    abstract onPointerDown(event: PointerEvt): boolean;
+    abstract onPointerMove(event: PointerEvt): void;
+    abstract onPointerUp(event: PointerEvt): void;
+    abstract onGestureCancel(): void;
+    abstract readonly kind: ToolType;
+    protected constructor(notifier: EditorNotifier, description: string);
+    onWheel(_event: WheelEvt): boolean;
+    onKeyPress(_event: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    setToolGroup(group: ToolEnabledGroup): void;
+}

package/dist/src/tools/BaseTool.js

@@ -0,0 +1,44 @@
+import { EditorEventType } from '../types';
+export default class BaseTool {
+    constructor(notifier, description) {
+        this.notifier = notifier;
+        this.description = description;
+        this.enabled = true;
+        this.group = null;
+    }
+    onWheel(_event) {
+        return false;
+    }
+    onKeyPress(_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;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import Editor from '../Editor';
+import { ToolType } from './ToolController';
+export default class Eraser extends BaseTool {
+    private editor;
+    private lastPoint;
+    private command;
+    kind: ToolType;
+    private toRemove;
+    constructor(editor: Editor, description: string);
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+}

package/dist/src/tools/Eraser.js

@@ -0,0 +1,53 @@
+import BaseTool from './BaseTool';
+import LineSegment2 from '../geometry/LineSegment2';
+import Erase from '../commands/Erase';
+import { ToolType } from './ToolController';
+import { PointerDevice } from '../Pointer';
+export default class Eraser extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.command = null;
+        this.kind = ToolType.Eraser;
+    }
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
+            this.lastPoint = event.current.canvasPos;
+            this.toRemove = [];
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        var _a;
+        const currentPoint = event.current.canvasPos;
+        if (currentPoint.minus(this.lastPoint).magnitude() === 0) {
+            return;
+        }
+        const line = new LineSegment2(this.lastPoint, currentPoint);
+        const region = line.bbox;
+        // Remove any intersecting elements.
+        this.toRemove.push(...this.editor.image
+            .getElementsIntersectingRegion(region).filter(component => {
+            return component.intersects(line);
+        }));
+        (_a = this.command) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.command = new Erase(this.toRemove);
+        this.command.apply(this.editor);
+        this.lastPoint = currentPoint;
+    }
+    onPointerUp(_event) {
+        var _a;
+        if (this.command && this.toRemove.length > 0) {
+            (_a = this.command) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+            // Dispatch the command to make it undo-able
+            this.editor.dispatch(this.command);
+        }
+        this.command = null;
+    }
+    onGestureCancel() {
+        var _a;
+        (_a = this.command) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.command = null;
+    }
+}

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

@@ -0,0 +1,40 @@
+import { Editor } from '../Editor';
+import { Point2 } from '../geometry/Vec2';
+import Pointer from '../Pointer';
+import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+interface PinchData {
+    canvasCenter: Point2;
+    screenCenter: Point2;
+    angle: number;
+    dist: number;
+}
+export declare enum PanZoomMode {
+    OneFingerGestures = 1,
+    TwoFingerGestures = 2,
+    AnyDevice = 4
+}
+export default class PanZoom extends BaseTool {
+    private editor;
+    private mode;
+    readonly kind: ToolType.PanZoom | ToolType.TouchPanZoom;
+    private transform;
+    private lastAngle;
+    private lastDist;
+    private lastScreenCenter;
+    constructor(editor: Editor, mode: PanZoomMode, description: string);
+    computePinchData(p1: Pointer, p2: Pointer): PinchData;
+    private pointersHaveCorrectDeviceType;
+    onPointerDown({ allPointers }: PointerEvt): boolean;
+    private getCenterDelta;
+    private handleTwoFingerMove;
+    private handleOneFingerMove;
+    onPointerMove({ allPointers }: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+    private updateTransform;
+    onWheel({ delta, screenPos }: WheelEvt): boolean;
+    onKeyPress({ key }: KeyPressEvent): boolean;
+}
+export {};