js-draw 0.0.1

package/dist/src/tools/PanZoom.js

@@ -0,0 +1,191 @@
+import Mat33 from '../geometry/Mat33';
+import { Vec2 } from '../geometry/Vec2';
+import Vec3 from '../geometry/Vec3';
+import { PointerDevice } from '../Pointer';
+import { Viewport } from '../Viewport';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export var PanZoomMode;
+(function (PanZoomMode) {
+    // Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
+    PanZoomMode[PanZoomMode["OneFingerGestures"] = 1] = "OneFingerGestures";
+    // Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
+    PanZoomMode[PanZoomMode["TwoFingerGestures"] = 2] = "TwoFingerGestures";
+    // / Handle gestures from any device, rather than just touch
+    PanZoomMode[PanZoomMode["AnyDevice"] = 4] = "AnyDevice";
+})(PanZoomMode || (PanZoomMode = {}));
+export default class PanZoom extends BaseTool {
+    constructor(editor, mode, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.mode = mode;
+        this.kind = ToolType.PanZoom;
+        this.transform = null;
+        if (mode === PanZoomMode.OneFingerGestures) {
+            this.kind = ToolType.TouchPanZoom;
+        }
+    }
+    // Returns information about the pointers in a gesture
+    computePinchData(p1, p2) {
+        const screenBetween = p2.screenPos.minus(p1.screenPos);
+        const angle = screenBetween.angle();
+        const dist = screenBetween.magnitude();
+        const canvasCenter = p2.canvasPos.plus(p1.canvasPos).times(0.5);
+        const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
+        return { canvasCenter, screenCenter, angle, dist };
+    }
+    pointersHaveCorrectDeviceType(pointers) {
+        return this.mode & PanZoomMode.AnyDevice || pointers.every(pointer => pointer.device === PointerDevice.Touch);
+    }
+    onPointerDown({ allPointers }) {
+        var _a;
+        let handlingGesture = false;
+        if (!this.pointersHaveCorrectDeviceType(allPointers)) {
+            handlingGesture = false;
+        }
+        else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+            const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+            this.lastAngle = angle;
+            this.lastDist = dist;
+            this.lastScreenCenter = screenCenter;
+            handlingGesture = true;
+        }
+        else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+            this.lastScreenCenter = allPointers[0].screenPos;
+            handlingGesture = true;
+        }
+        if (handlingGesture) {
+            (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
+        }
+        return handlingGesture;
+    }
+    // Returns the change in position of the center of the given group of pointers.
+    // Assumes this.lastScreenCenter has been set appropriately.
+    getCenterDelta(screenCenter) {
+        // Use transformVec3 to avoid translating the delta
+        const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
+        return delta;
+    }
+    handleTwoFingerMove(allPointers) {
+        const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+        const delta = this.getCenterDelta(screenCenter);
+        const transformUpdate = Mat33.translation(delta)
+            .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
+            .rightMul(Mat33.zRotation(angle - this.lastAngle, canvasCenter));
+        this.lastScreenCenter = screenCenter;
+        this.lastDist = dist;
+        this.lastAngle = angle;
+        this.transform = new Viewport.ViewportTransform(this.transform.transform.rightMul(transformUpdate));
+    }
+    handleOneFingerMove(pointer) {
+        const delta = this.getCenterDelta(pointer.screenPos);
+        this.transform = new Viewport.ViewportTransform(this.transform.transform.rightMul(Mat33.translation(delta)));
+        this.lastScreenCenter = pointer.screenPos;
+    }
+    onPointerMove({ allPointers }) {
+        var _a;
+        (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
+        const lastTransform = this.transform;
+        if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+            this.handleTwoFingerMove(allPointers);
+        }
+        else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+            this.handleOneFingerMove(allPointers[0]);
+        }
+        lastTransform.unapply(this.editor);
+        this.transform.apply(this.editor);
+    }
+    onPointerUp(_event) {
+        if (this.transform) {
+            this.transform.unapply(this.editor);
+            this.editor.dispatch(this.transform, false);
+        }
+        this.transform = null;
+    }
+    onGestureCancel() {
+        var _a;
+        (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.transform = null;
+    }
+    // Applies [transformUpdate] to the editor. This stacks on top of the
+    // current transformation, if it exists.
+    updateTransform(transformUpdate) {
+        var _a;
+        let newTransform = transformUpdate;
+        if (this.transform) {
+            newTransform = this.transform.transform.rightMul(transformUpdate);
+        }
+        (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.transform = new Viewport.ViewportTransform(newTransform);
+        this.transform.apply(this.editor);
+    }
+    onWheel({ delta, screenPos }) {
+        if (this.transform === null) {
+            this.transform = new Viewport.ViewportTransform(Mat33.identity);
+        }
+        const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
+        // Transform without including translation
+        const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
+        const pinchZoomScaleFactor = 1.04;
+        const transformUpdate = Mat33.scaling2D(Math.pow(pinchZoomScaleFactor, -delta.z), canvasPos).rightMul(Mat33.translation(translation));
+        this.updateTransform(transformUpdate);
+        return true;
+    }
+    onKeyPress({ key }) {
+        let translation = Vec2.zero;
+        let scale = 1;
+        let rotation = 0;
+        // Keyboard shortcut handling
+        switch (key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                translation = Vec2.of(-1, 0);
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                translation = Vec2.of(1, 0);
+                break;
+            case 'k':
+            case 'ArrowUp':
+                translation = Vec2.of(0, -1);
+                break;
+            case 'j':
+            case 'ArrowDown':
+                translation = Vec2.of(0, 1);
+                break;
+            case 'w':
+                scale = 1 / 2;
+                break;
+            case 's':
+                scale = 2;
+                break;
+            case 'r':
+                rotation = 1;
+                break;
+            case 'R':
+                rotation = -1;
+                break;
+            default:
+                return false;
+        }
+        // For each keypress,
+        translation = translation.times(30); // Move at most 30 units
+        rotation *= Math.PI / 8; // Rotate at most a sixteenth of a rotation
+        // Transform the canvas, not the viewport:
+        translation = translation.times(-1);
+        rotation = rotation * -1;
+        scale = 1 / scale;
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
+        // Transform without translating (treat toCanvas as a linear instead of
+        // an affine transformation).
+        translation = toCanvas.transformVec3(translation);
+        // Rotate/scale about the center of the canvas
+        const transformCenter = this.editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(scale, transformCenter).rightMul(Mat33.zRotation(rotation, transformCenter)).rightMul(Mat33.translation(translation));
+        this.updateTransform(transformUpdate);
+        return true;
+    }
+}

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

@@ -0,0 +1,25 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export default class Pen extends BaseTool {
+    private editor;
+    private color;
+    private thickness;
+    private builder;
+    readonly kind: ToolType;
+    constructor(editor: Editor, description: string, color?: Color4, thickness?: number);
+    private getPressureMultiplier;
+    private getStrokePoint;
+    private addPointToStroke;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): void;
+    onGestureCancel(): void;
+    private noteUpdated;
+    setColor(color: Color4): void;
+    setThickness(thickness: number): void;
+    getThickness(): number;
+    getColor(): Color4;
+}

package/dist/src/tools/Pen.js

@@ -0,0 +1,97 @@
+import Color4 from '../Color4';
+import EditorImage from '../EditorImage';
+import { Vec2 } from '../geometry/Vec2';
+import { PointerDevice } from '../Pointer';
+import StrokeBuilder from '../StrokeBuilder';
+import { EditorEventType } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export default class Pen extends BaseTool {
+    constructor(editor, description, color = Color4.purple, thickness = 16.0) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.color = color;
+        this.thickness = thickness;
+        this.builder = null;
+        this.kind = ToolType.Pen;
+    }
+    getPressureMultiplier() {
+        return 1 / this.editor.viewport.getScaleFactor() * this.thickness;
+    }
+    getStrokePoint(pointer) {
+        var _a;
+        const minPressure = 0.3;
+        const pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
+        return {
+            pos: pointer.canvasPos,
+            width: pressure * this.getPressureMultiplier(),
+            color: this.color,
+            time: pointer.timeStamp,
+        };
+    }
+    addPointToStroke(pointer) {
+        if (!this.builder) {
+            throw new Error('No stroke is currently being generated.');
+        }
+        this.builder.addPoint(this.getStrokePoint(pointer));
+        this.editor.clearWetInk();
+        this.editor.drawWetInk(...this.builder.preview());
+    }
+    onPointerDown({ current, allPointers }) {
+        if (current.device === PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
+            // Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
+            // less than ± 2 px from the curve.
+            const canvasTransform = this.editor.viewport.screenToCanvasTransform;
+            const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
+            const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+            this.builder = new StrokeBuilder(this.getStrokePoint(current), minSmoothingDist, maxSmoothingDist);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove({ current }) {
+        this.addPointToStroke(current);
+    }
+    onPointerUp({ current }) {
+        if (!this.builder) {
+            return;
+        }
+        this.addPointToStroke(current);
+        if (this.builder && current.isPrimary) {
+            const stroke = this.builder.build();
+            this.editor.clearWetInk();
+            this.editor.drawWetInk(...this.builder.preview());
+            const canFlatten = true;
+            const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+            this.editor.dispatch(action);
+        }
+        this.builder = null;
+        this.editor.clearWetInk();
+    }
+    onGestureCancel() {
+        this.editor.clearWetInk();
+    }
+    noteUpdated() {
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setColor(color) {
+        if (color.toHexString() !== this.color.toHexString()) {
+            this.color = color;
+            this.noteUpdated();
+        }
+    }
+    setThickness(thickness) {
+        if (thickness !== this.thickness) {
+            this.thickness = thickness;
+            this.noteUpdated();
+        }
+    }
+    getThickness() { return this.thickness; }
+    getColor() { return this.color; }
+}

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

@@ -0,0 +1,49 @@
+import Editor from '../Editor';
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+declare class Selection {
+    startPoint: Point2;
+    private editor;
+    region: Rect2;
+    private boxRotation;
+    private backgroundBox;
+    private rotateCircle;
+    private selectedElems;
+    private transform;
+    private transformationCommands;
+    constructor(startPoint: Point2, editor: Editor);
+    handleBackgroundDrag(deltaPosition: Vec2): void;
+    handleResizeCornerDrag(deltaPosition: Vec2): void;
+    handleRotateCircleDrag(offset: Vec2): void;
+    private computeTransformCommands;
+    finishDragging(): void;
+    private previewTransformCmds;
+    appendBackgroundBoxTo(elem: HTMLElement): void;
+    setToPoint(point: Point2): void;
+    cancelSelection(): void;
+    resolveToObjects(): boolean;
+    recomputeRegion(): boolean;
+    getMinCanvasSize(): number;
+    private recomputeBoxRotation;
+    getSelectedItemCount(): number;
+    updateUI(): void;
+}
+export default class SelectionTool extends BaseTool {
+    private editor;
+    private handleOverlay;
+    private prevSelectionBox;
+    private selectionBox;
+    readonly kind: ToolType;
+    constructor(editor: Editor, description: string);
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    private onGestureEnd;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    setEnabled(enabled: boolean): void;
+    getSelection(): Selection | null;
+}
+export {};