js-draw 0.17.4 → 0.18.1

package/dist/src/tools/PanZoom.js

@@ -1,414 +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 Mat33 from '../math/Mat33';
-import { Vec2 } from '../math/Vec2';
-import Vec3 from '../math/Vec3';
-import { PointerDevice } from '../Pointer';
-import { EditorEventType } from '../types';
-import untilNextAnimationFrame from '../util/untilNextAnimationFrame';
-import { Viewport } from '../Viewport';
-import BaseTool from './BaseTool';
-export var PanZoomMode;
-(function (PanZoomMode) {
-    PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
-    PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
-    PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
-    PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
-    PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
-    PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
-})(PanZoomMode || (PanZoomMode = {}));
-class InertialScroller {
-    constructor(initialVelocity, scrollBy, onComplete) {
-        this.initialVelocity = initialVelocity;
-        this.scrollBy = scrollBy;
-        this.onComplete = onComplete;
-        this.running = false;
-        this.start();
-    }
-    start() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.running) {
-                return;
-            }
-            this.currentVelocity = this.initialVelocity;
-            let lastTime = (new Date()).getTime();
-            this.running = true;
-            const maxSpeed = 5000; // units/s
-            const minSpeed = 200; // units/s
-            if (this.currentVelocity.magnitude() > maxSpeed) {
-                this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
-            }
-            while (this.running && this.currentVelocity.magnitude() > minSpeed) {
-                const nowTime = (new Date()).getTime();
-                const dt = (nowTime - lastTime) / 1000;
-                this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
-                this.scrollBy(this.currentVelocity.times(dt));
-                yield untilNextAnimationFrame();
-                lastTime = nowTime;
-            }
-            if (this.running) {
-                this.stop();
-            }
-        });
-    }
-    getCurrentVelocity() {
-        if (!this.running) {
-            return null;
-        }
-        return this.currentVelocity;
-    }
-    stop() {
-        if (this.running) {
-            this.running = false;
-            this.onComplete();
-        }
-    }
-}
-export default class PanZoom extends BaseTool {
-    constructor(editor, mode, description) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.mode = mode;
-        this.transform = null;
-        this.lastPointerDownTimestamp = 0;
-        this.initialTouchAngle = 0;
-        this.initialViewportRotation = 0;
-        this.inertialScroller = null;
-        this.velocity = null;
-    }
-    // Returns information about the pointers in a gesture
-    computePinchData(p1, p2) {
-        // Swap the pointers to ensure consistent ordering.
-        if (p1.id < p2.id) {
-            const tmp = p1;
-            p1 = p2;
-            p2 = tmp;
-        }
-        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 };
-    }
-    allPointersAreOfType(pointers, kind) {
-        return pointers.every(pointer => pointer.device === kind);
-    }
-    onPointerDown({ allPointers: pointers, current: currentPointer }) {
-        var _a, _b, _c, _d;
-        let handlingGesture = false;
-        const inertialScrollerVelocity = (_b = (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.getCurrentVelocity()) !== null && _b !== void 0 ? _b : Vec2.zero;
-        (_c = this.inertialScroller) === null || _c === void 0 ? void 0 : _c.stop();
-        this.velocity = inertialScrollerVelocity;
-        this.lastPointerDownTimestamp = currentPointer.timeStamp;
-        const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
-        const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
-        if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
-            const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
-            this.lastDist = dist;
-            this.lastScreenCenter = screenCenter;
-            this.initialTouchAngle = angle;
-            this.initialViewportRotation = this.editor.viewport.getRotationAngle();
-            handlingGesture = true;
-        }
-        else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
-            || (isRightClick && this.mode & PanZoomMode.RightClickDrags)
-            || (this.mode & PanZoomMode.SinglePointerGestures))) {
-            this.lastScreenCenter = pointers[0].screenPos;
-            handlingGesture = true;
-        }
-        if (handlingGesture) {
-            this.lastTimestamp = (new Date()).getTime();
-            (_d = this.transform) !== null && _d !== void 0 ? _d : (this.transform = Viewport.transformBy(Mat33.identity));
-            this.editor.display.setDraftMode(true);
-        }
-        return handlingGesture;
-    }
-    updateVelocity(currentCenter) {
-        const deltaPos = currentCenter.minus(this.lastScreenCenter);
-        let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
-        // Ignore duplicate events, unless there has been enough time between them.
-        if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
-            return;
-        }
-        // We divide by deltaTime. Don't divide by zero.
-        if (deltaTime === 0) {
-            return;
-        }
-        // Don't divide by almost zero, either
-        deltaTime = Math.max(deltaTime, 0.01);
-        const currentVelocity = deltaPos.times(1 / deltaTime);
-        let smoothedVelocity = currentVelocity;
-        if (this.velocity) {
-            smoothedVelocity = this.velocity.lerp(currentVelocity, 0.5);
-        }
-        this.velocity = smoothedVelocity;
-    }
-    // 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;
-    }
-    //  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
-    // to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
-    // when applied to the viewport, rotates the viewport to 90.0 degrees.
-    //
-    // Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
-    // from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
-    toSnappedRotationDelta(touchAngle) {
-        const deltaAngle = touchAngle - this.initialTouchAngle;
-        let fullRotation = deltaAngle + this.initialViewportRotation;
-        const snapToMultipleOf = Math.PI / 2;
-        const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
-        // The maximum angle for which we snap the given angle to a multiple of
-        // `snapToMultipleOf`.
-        const maxSnapAngle = 0.07;
-        // Snap the rotation
-        if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
-            fullRotation = roundedFullRotation;
-            // Work around a rotation/matrix multiply bug.
-            // (See commit after 4abe27ff8e7913155828f98dee77b09c57c51d30).
-            // TODO: Fix the underlying issue and remove this.
-            if (fullRotation !== 0) {
-                fullRotation += 0.0001;
-            }
-        }
-        return fullRotation - this.editor.viewport.getRotationAngle();
-    }
-    handleTwoFingerMove(allPointers) {
-        const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
-        const delta = this.getCenterDelta(screenCenter);
-        let deltaRotation;
-        if (this.isRotationLocked()) {
-            deltaRotation = 0;
-        }
-        else {
-            deltaRotation = this.toSnappedRotationDelta(angle);
-        }
-        this.updateVelocity(screenCenter);
-        const transformUpdate = Mat33.translation(delta)
-            .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-            .rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
-        this.lastScreenCenter = screenCenter;
-        this.lastDist = dist;
-        this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
-    }
-    handleOneFingerMove(pointer) {
-        const delta = this.getCenterDelta(pointer.screenPos);
-        this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(delta)));
-        this.updateVelocity(pointer.screenPos);
-        this.lastScreenCenter = pointer.screenPos;
-    }
-    onPointerMove({ allPointers }) {
-        var _a;
-        (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = Viewport.transformBy(Mat33.identity));
-        const lastTransform = this.transform;
-        if (allPointers.length === 2) {
-            this.handleTwoFingerMove(allPointers);
-        }
-        else if (allPointers.length === 1) {
-            this.handleOneFingerMove(allPointers[0]);
-        }
-        lastTransform.unapply(this.editor);
-        this.transform.apply(this.editor);
-        this.lastTimestamp = (new Date()).getTime();
-    }
-    onPointerUp(event) {
-        var _a;
-        const onComplete = () => {
-            if (this.transform) {
-                this.transform.unapply(this.editor);
-                this.editor.dispatch(this.transform, false);
-            }
-            this.editor.display.setDraftMode(false);
-            this.transform = null;
-            this.velocity = Vec2.zero;
-        };
-        const minInertialScrollDt = 30;
-        const shouldInertialScroll = event.current.device === PointerDevice.Touch
-            && event.allPointers.length === 1
-            && this.velocity !== null
-            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
-        if (shouldInertialScroll && this.velocity !== null) {
-            const oldVelocity = this.velocity;
-            // If the user drags the screen, then stops, then lifts the pointer,
-            // we want the final velocity to reflect the stop at the end (so the velocity
-            // should be near zero). Handle this:
-            this.updateVelocity(event.current.screenPos);
-            // Work around an input issue. Some devices that disable the touchscreen when a stylus
-            // comes near the screen fire a touch-end event at the position of the stylus when a
-            // touch gesture is canceled. Because the stylus is often far away from the last touch,
-            // this causes a great displacement between the second-to-last (from the touchscreen) and
-            // last (from the pen that is now near the screen) events. Only allow velocity to decrease
-            // to work around this:
-            if (oldVelocity.magnitude() < this.velocity.magnitude()) {
-                this.velocity = oldVelocity;
-            }
-            // Cancel any ongoing inertial scrolling.
-            (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
-            this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {
-                if (!this.transform) {
-                    return;
-                }
-                const canvasDelta = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollDelta);
-                // Scroll by scrollDelta
-                this.transform.unapply(this.editor);
-                this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(canvasDelta)));
-                this.transform.apply(this.editor);
-            }, onComplete);
-        }
-        else {
-            onComplete();
-        }
-    }
-    onGestureCancel() {
-        var _a, _b;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
-        this.velocity = Vec2.zero;
-        (_b = this.transform) === null || _b === void 0 ? void 0 : _b.unapply(this.editor);
-        this.editor.display.setDraftMode(false);
-        this.transform = null;
-    }
-    // Applies [transformUpdate] to the editor. This stacks on top of the
-    // current transformation, if it exists.
-    updateTransform(transformUpdate, announce = false) {
-        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 = Viewport.transformBy(newTransform);
-        this.transform.apply(this.editor);
-        if (announce) {
-            this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
-        }
-    }
-    onWheel({ delta, screenPos }) {
-        var _a;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
-        // Reset the transformation -- wheel events are individual events, so we don't
-        // need to unapply/reapply.
-        this.transform = Viewport.transformBy(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.03;
-        const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
-        this.updateTransform(transformUpdate, true);
-        return true;
-    }
-    onKeyPress({ key, ctrlKey, altKey }) {
-        var _a;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
-        if (!(this.mode & PanZoomMode.Keyboard)) {
-            return false;
-        }
-        if (ctrlKey || altKey) {
-            return false;
-        }
-        // No need to keep the same the transform for keyboard events.
-        this.transform = Viewport.transformBy(Mat33.identity);
-        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 'q':
-            case 'k':
-            case 'ArrowUp':
-                translation = Vec2.of(0, -1);
-                break;
-            case 'e':
-            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 least a sixteenth of a rotation
-        // Transform the canvas, not the viewport:
-        translation = translation.times(-1);
-        rotation = rotation * -1;
-        scale = 1 / scale;
-        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
-        // TODO: Figure out why and implement a better solution.
-        if (rotation !== 0) {
-            rotation += 0.0001;
-        }
-        if (this.isRotationLocked()) {
-            rotation = 0;
-        }
-        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, true);
-        return true;
-    }
-    isRotationLocked() {
-        return !!(this.mode & PanZoomMode.RotationLocked);
-    }
-    // Sets whether the given `mode` is enabled. `mode` should be a single
-    // mode from the `PanZoomMode` enum.
-    setModeEnabled(mode, enabled) {
-        let newMode = this.mode;
-        if (enabled) {
-            newMode |= mode;
-        }
-        else {
-            newMode &= ~mode;
-        }
-        this.setMode(newMode);
-    }
-    setMode(mode) {
-        if (mode !== this.mode) {
-            this.mode = mode;
-            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-                kind: EditorEventType.ToolUpdated,
-                tool: this,
-            });
-        }
-    }
-    getMode() {
-        return this.mode;
-    }
-}

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

@@ -1,23 +0,0 @@
-import Editor from '../Editor';
-import { PasteEvent } from '../types';
-import BaseTool from './BaseTool';
-/**
- * A tool that handles paste events (e.g. as triggered by ctrl+V).
- *
- * @example
- * While `ToolController` has a `PasteHandler` in its default list of tools,
- * if a non-default set is being used, `PasteHandler` can be added as follows:
- * ```ts
- * const toolController = editor.toolController;
- * toolController.addTool(new PasteHandler(editor));
- * ```
- */
-export default class PasteHandler extends BaseTool {
-    private editor;
-    constructor(editor: Editor);
-    onPaste(event: PasteEvent): boolean;
-    private addComponentsFromPaste;
-    private doSVGPaste;
-    private doTextPaste;
-    private doImagePaste;
-}

package/dist/src/tools/PasteHandler.js

@@ -1,93 +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 TextComponent from '../components/TextComponent';
-import SVGLoader from '../SVGLoader';
-import Mat33 from '../math/Mat33';
-import BaseTool from './BaseTool';
-import TextTool from './TextTool';
-import Color4 from '../Color4';
-import ImageComponent from '../components/ImageComponent';
-/**
- * A tool that handles paste events (e.g. as triggered by ctrl+V).
- *
- * @example
- * While `ToolController` has a `PasteHandler` in its default list of tools,
- * if a non-default set is being used, `PasteHandler` can be added as follows:
- * ```ts
- * const toolController = editor.toolController;
- * toolController.addTool(new PasteHandler(editor));
- * ```
- */
-export default class PasteHandler extends BaseTool {
-    constructor(editor) {
-        super(editor.notifier, editor.localization.pasteHandler);
-        this.editor = editor;
-    }
-    // @internal
-    onPaste(event) {
-        const mime = event.mime.toLowerCase();
-        if (mime === 'image/svg+xml') {
-            void this.doSVGPaste(event.data);
-            return true;
-        }
-        else if (mime === 'text/plain') {
-            void this.doTextPaste(event.data);
-            return true;
-        }
-        else if (mime === 'image/png' || mime === 'image/jpeg') {
-            void this.doImagePaste(event.data);
-            return true;
-        }
-        return false;
-    }
-    addComponentsFromPaste(components) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.editor.addAndCenterComponents(components);
-        });
-    }
-    doSVGPaste(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const sanitize = true;
-            const loader = SVGLoader.fromString(data, sanitize);
-            const components = [];
-            yield loader.start((component) => {
-                components.push(component);
-            }, (_countProcessed, _totalToProcess) => null);
-            yield this.addComponentsFromPaste(components);
-        });
-    }
-    doTextPaste(text) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const textTools = this.editor.toolController.getMatchingTools(TextTool);
-            textTools.sort((a, b) => {
-                if (!a.isEnabled() && b.isEnabled()) {
-                    return -1;
-                }
-                if (!b.isEnabled() && a.isEnabled()) {
-                    return 1;
-                }
-                return 0;
-            });
-            const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
-            const pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
-            const lines = text.split('\n');
-            yield this.addComponentsFromPaste([TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle)]);
-        });
-    }
-    doImagePaste(dataURL) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const image = new Image();
-            image.src = dataURL;
-            const component = yield ImageComponent.fromImage(image, Mat33.identity);
-            yield this.addComponentsFromPaste([component]);
-        });
-    }
-}

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

@@ -1,39 +0,0 @@
-import Color4 from '../Color4';
-import Editor from '../Editor';
-import Pointer from '../Pointer';
-import { KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
-import BaseTool from './BaseTool';
-import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
-export interface PenStyle {
-    color: Color4;
-    thickness: number;
-}
-export default class Pen extends BaseTool {
-    private editor;
-    private style;
-    private builderFactory;
-    protected builder: ComponentBuilder | null;
-    private lastPoint;
-    private ctrlKeyPressed;
-    constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
-    private getPressureMultiplier;
-    protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
-    protected previewStroke(): void;
-    protected addPointToStroke(point: StrokeDataPoint): void;
-    onPointerDown({ current, allPointers }: PointerEvt): boolean;
-    onPointerMove({ current }: PointerEvt): void;
-    onPointerUp({ current }: PointerEvt): void;
-    onGestureCancel(): void;
-    private finalizeStroke;
-    private noteUpdated;
-    setColor(color: Color4): void;
-    setThickness(thickness: number): void;
-    setStrokeFactory(factory: ComponentBuilderFactory): void;
-    getThickness(): number;
-    getColor(): Color4;
-    getStrokeFactory(): ComponentBuilderFactory;
-    setEnabled(enabled: boolean): void;
-    private isSnappingToGrid;
-    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
-    onKeyUp({ key }: KeyUpEvent): boolean;
-}