js-draw 0.17.4 → 0.18.1

package/dist/src/tools/Eraser.js

@@ -1,106 +0,0 @@
-import { EditorEventType } from '../types';
-import BaseTool from './BaseTool';
-import { Vec2 } from '../math/Vec2';
-import LineSegment2 from '../math/LineSegment2';
-import Erase from '../commands/Erase';
-import { PointerDevice } from '../Pointer';
-import Color4 from '../Color4';
-import Rect2 from '../math/Rect2';
-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,
-        });
-    }
-}

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

@@ -1,21 +0,0 @@
-import Editor from '../Editor';
-import { KeyPressEvent } from '../types';
-import BaseTool from './BaseTool';
-export declare const cssPrefix = "find-tool";
-export default class FindTool extends BaseTool {
-    private editor;
-    private overlay;
-    private searchInput;
-    private currentMatchIdx;
-    constructor(editor: Editor);
-    private getMatches;
-    private focusCurrentMatch;
-    private toNextMatch;
-    private toPrevMatch;
-    private fillOverlay;
-    private isVisible;
-    private setVisible;
-    private toggleVisible;
-    onKeyPress(event: KeyPressEvent): boolean;
-    setEnabled(enabled: boolean): void;
-}

package/dist/src/tools/FindTool.js

@@ -1,114 +0,0 @@
-// Displays a find dialog that allows the user to search for and focus text. 
-//
-// @packageDocumentation
-import TextComponent from '../components/TextComponent';
-import BaseTool from './BaseTool';
-export const cssPrefix = 'find-tool';
-export default class FindTool extends BaseTool {
-    constructor(editor) {
-        super(editor.notifier, editor.localization.findLabel);
-        this.editor = editor;
-        this.currentMatchIdx = 0;
-        this.overlay = document.createElement('div');
-        this.fillOverlay();
-        editor.createHTMLOverlay(this.overlay);
-        this.overlay.style.display = 'none';
-        this.overlay.classList.add(`${cssPrefix}-overlay`);
-    }
-    getMatches(searchFor) {
-        searchFor = searchFor.toLocaleLowerCase();
-        const allTextComponents = this.editor.image.getAllElements()
-            .filter(elem => elem instanceof TextComponent);
-        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
-        return matches.map(match => match.getBBox());
-    }
-    focusCurrentMatch() {
-        const matches = this.getMatches(this.searchInput.value);
-        let matchIdx = this.currentMatchIdx % matches.length;
-        if (matchIdx < 0) {
-            matchIdx = matches.length + matchIdx;
-        }
-        if (matchIdx < matches.length) {
-            const undoable = false;
-            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
-            this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
-        }
-    }
-    toNextMatch() {
-        this.currentMatchIdx++;
-        this.focusCurrentMatch();
-    }
-    toPrevMatch() {
-        this.currentMatchIdx--;
-        this.focusCurrentMatch();
-    }
-    fillOverlay() {
-        const label = document.createElement('label');
-        this.searchInput = document.createElement('input');
-        const nextBtn = document.createElement('button');
-        const closeBtn = document.createElement('button');
-        // Math.random() ensures that the ID is unique (to allow us to refer to it
-        // with an htmlFor).
-        this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
-        label.htmlFor = this.searchInput.getAttribute('id');
-        label.innerText = this.editor.localization.findLabel;
-        nextBtn.innerText = this.editor.localization.toNextMatch;
-        closeBtn.innerText = this.editor.localization.closeFindDialog;
-        this.searchInput.onkeydown = (ev) => {
-            if (ev.key === 'Enter') {
-                if (ev.shiftKey) {
-                    this.toPrevMatch();
-                }
-                else {
-                    this.toNextMatch();
-                }
-            }
-            else if (ev.key === 'Escape') {
-                this.setVisible(false);
-            }
-            else if (ev.key === 'f' && ev.ctrlKey) {
-                ev.preventDefault();
-                this.toggleVisible();
-            }
-        };
-        nextBtn.onclick = () => {
-            this.toNextMatch();
-        };
-        closeBtn.onclick = () => {
-            this.setVisible(false);
-        };
-        this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
-    }
-    isVisible() {
-        return this.overlay.style.display !== 'none';
-    }
-    setVisible(visible) {
-        if (visible !== this.isVisible()) {
-            this.overlay.style.display = visible ? 'block' : 'none';
-            if (visible) {
-                this.searchInput.focus();
-                this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
-            }
-            else {
-                this.editor.focus();
-                this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
-            }
-        }
-    }
-    toggleVisible() {
-        this.setVisible(!this.isVisible());
-    }
-    onKeyPress(event) {
-        if (event.ctrlKey && event.key === 'f') {
-            this.toggleVisible();
-            return true;
-        }
-        return false;
-    }
-    setEnabled(enabled) {
-        super.setEnabled(enabled);
-        if (enabled) {
-            this.setVisible(false);
-        }
-    }
-}

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

@@ -1,52 +0,0 @@
-import { Editor } from '../Editor';
-import { Point2 } from '../math/Vec2';
-import Pointer from '../Pointer';
-import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
-import BaseTool from './BaseTool';
-interface PinchData {
-    canvasCenter: Point2;
-    screenCenter: Point2;
-    angle: number;
-    dist: number;
-}
-export declare enum PanZoomMode {
-    OneFingerTouchGestures = 1,
-    TwoFingerTouchGestures = 2,
-    RightClickDrags = 4,
-    SinglePointerGestures = 8,
-    Keyboard = 16,
-    RotationLocked = 32
-}
-export default class PanZoom extends BaseTool {
-    private editor;
-    private mode;
-    private transform;
-    private lastDist;
-    private lastScreenCenter;
-    private lastTimestamp;
-    private lastPointerDownTimestamp;
-    private initialTouchAngle;
-    private initialViewportRotation;
-    private inertialScroller;
-    private velocity;
-    constructor(editor: Editor, mode: PanZoomMode, description: string);
-    computePinchData(p1: Pointer, p2: Pointer): PinchData;
-    private allPointersAreOfType;
-    onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
-    private updateVelocity;
-    private getCenterDelta;
-    private toSnappedRotationDelta;
-    private handleTwoFingerMove;
-    private handleOneFingerMove;
-    onPointerMove({ allPointers }: PointerEvt): void;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
-    private updateTransform;
-    onWheel({ delta, screenPos }: WheelEvt): boolean;
-    onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean;
-    private isRotationLocked;
-    setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
-    setMode(mode: PanZoomMode): void;
-    getMode(): PanZoomMode;
-}
-export {};