js-draw 0.18.1 → 0.19.0

package/dist/cjs/src/tools/Pen.js

@@ -0,0 +1,179 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const Pointer_1 = require("../Pointer");
+const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+class Pen extends BaseTool_1.default {
+    constructor(editor, description, style, builderFactory = FreehandLineBuilder_1.makeFreehandLineBuilder) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.style = style;
+        this.builderFactory = builderFactory;
+        this.builder = null;
+        this.lastPoint = null;
+        this.ctrlKeyPressed = false;
+    }
+    getPressureMultiplier() {
+        return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
+    }
+    // Converts a `pointer` to a `StrokeDataPoint`.
+    toStrokePoint(pointer) {
+        var _a;
+        if (this.isSnappingToGrid()) {
+            pointer = pointer.snappedToGrid(this.editor.viewport);
+        }
+        const minPressure = 0.3;
+        let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
+        if (!isFinite(pressure)) {
+            console.warn('Non-finite pressure!', pointer);
+            pressure = minPressure;
+        }
+        console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
+        console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
+        console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+        const pos = pointer.canvasPos;
+        return {
+            pos,
+            width: pressure * this.getPressureMultiplier(),
+            color: this.style.color,
+            time: pointer.timeStamp,
+        };
+    }
+    // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
+    previewStroke() {
+        var _a;
+        this.editor.clearWetInk();
+        (_a = this.builder) === null || _a === void 0 ? void 0 : _a.preview(this.editor.display.getWetInkRenderer());
+    }
+    // Throws if no stroke builder exists.
+    addPointToStroke(point) {
+        if (!this.builder) {
+            throw new Error('No stroke is currently being generated.');
+        }
+        this.builder.addPoint(point);
+        this.lastPoint = point;
+        this.previewStroke();
+    }
+    onPointerDown({ current, allPointers }) {
+        const isEraser = current.device === Pointer_1.PointerDevice.Eraser;
+        let anyDeviceIsStylus = false;
+        for (const pointer of allPointers) {
+            if (pointer.device === Pointer_1.PointerDevice.Pen) {
+                anyDeviceIsStylus = true;
+                break;
+            }
+        }
+        if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
+            this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove({ current }) {
+        if (!this.builder)
+            return;
+        this.addPointToStroke(this.toStrokePoint(current));
+    }
+    onPointerUp({ current }) {
+        var _a, _b;
+        if (!this.builder) {
+            return;
+        }
+        // onPointerUp events can have zero pressure. Use the last pressure instead.
+        const currentPoint = this.toStrokePoint(current);
+        const strokePoint = Object.assign(Object.assign({}, currentPoint), { width: (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : currentPoint.width });
+        this.addPointToStroke(strokePoint);
+        if (current.isPrimary) {
+            this.finalizeStroke();
+        }
+    }
+    onGestureCancel() {
+        this.editor.clearWetInk();
+    }
+    finalizeStroke() {
+        if (this.builder) {
+            const stroke = this.builder.build();
+            this.previewStroke();
+            if (stroke.getBBox().area > 0) {
+                const canFlatten = true;
+                const action = EditorImage_1.default.addElement(stroke, canFlatten);
+                this.editor.dispatch(action);
+            }
+            else {
+                console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+            }
+        }
+        this.builder = null;
+        this.editor.clearWetInk();
+    }
+    noteUpdated() {
+        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setColor(color) {
+        if (color.toHexString() !== this.style.color.toHexString()) {
+            this.style = Object.assign(Object.assign({}, this.style), { color });
+            this.noteUpdated();
+        }
+    }
+    setThickness(thickness) {
+        if (thickness !== this.style.thickness) {
+            this.style = Object.assign(Object.assign({}, this.style), { thickness });
+            this.noteUpdated();
+        }
+    }
+    setStrokeFactory(factory) {
+        if (factory !== this.builderFactory) {
+            this.builderFactory = factory;
+            this.noteUpdated();
+        }
+    }
+    getThickness() { return this.style.thickness; }
+    getColor() { return this.style.color; }
+    getStrokeFactory() { return this.builderFactory; }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        this.ctrlKeyPressed = false;
+    }
+    isSnappingToGrid() { return this.ctrlKeyPressed; }
+    onKeyPress({ key, ctrlKey }) {
+        key = key.toLowerCase();
+        let newThickness;
+        if (key === '-' || key === '_') {
+            newThickness = this.getThickness() * 2 / 3;
+        }
+        else if (key === '+' || key === '=') {
+            newThickness = this.getThickness() * 3 / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 256);
+            this.setThickness(newThickness);
+            return true;
+        }
+        if (key === 'control' || key === 'meta') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        if (key === 'z' && ctrlKey && this.builder) {
+            this.finalizeStroke();
+        }
+        return false;
+    }
+    onKeyUp({ key }) {
+        key = key.toLowerCase();
+        if (key === 'control' || key === 'meta') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
+        return false;
+    }
+}
+exports.default = Pen;

package/dist/cjs/src/tools/PipetteTool.d.ts

@@ -0,0 +1,18 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+type ColorListener = (color: Color4 | null) => void;
+export default class PipetteTool extends BaseTool {
+    private editor;
+    private colorPreviewListener;
+    private colorSelectListener;
+    constructor(editor: Editor, description: string);
+    setColorListener(colorPreviewListener: ColorListener, colorSelectListener: ColorListener): void;
+    clearColorListener(): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export {};

package/dist/cjs/src/tools/PipetteTool.js

@@ -0,0 +1,45 @@
+"use strict";
+// @internal @packageDocumentation
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+class PipetteTool extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+    }
+    setColorListener(colorPreviewListener, 
+    // Called when the gesture ends -- when the user has selected a color.
+    colorSelectListener) {
+        this.colorPreviewListener = colorPreviewListener;
+        this.colorSelectListener = colorSelectListener;
+    }
+    clearColorListener() {
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+    }
+    onPointerDown({ current, allPointers }) {
+        if (this.colorPreviewListener && allPointers.length === 1) {
+            this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+            return true;
+        }
+        return false;
+    }
+    onPointerMove({ current }) {
+        var _a;
+        (_a = this.colorPreviewListener) === null || _a === void 0 ? void 0 : _a.call(this, this.editor.display.getColorAt(current.screenPos));
+    }
+    onPointerUp({ current }) {
+        var _a;
+        (_a = this.colorSelectListener) === null || _a === void 0 ? void 0 : _a.call(this, this.editor.display.getColorAt(current.screenPos));
+    }
+    onGestureCancel() {
+        var _a;
+        (_a = this.colorSelectListener) === null || _a === void 0 ? void 0 : _a.call(this, null);
+    }
+}
+exports.default = PipetteTool;

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

@@ -0,0 +1,8 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import BaseTool from '../BaseTool';
+export default class SelectAllShortcutHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+}

package/dist/cjs/src/tools/SelectionTool/SelectAllShortcutHandler.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("../BaseTool"));
+const SelectionTool_1 = __importDefault(require("./SelectionTool"));
+// Handles ctrl+a: Select all
+class SelectAllShortcutHandler extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.selectAllTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key, ctrlKey }) {
+        if (ctrlKey && key === 'a') {
+            const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
+            if (selectionTools.length > 0) {
+                const selectionTool = selectionTools[0];
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
+        return false;
+    }
+}
+exports.default = SelectAllShortcutHandler;

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

@@ -0,0 +1,64 @@
+/**
+ * @internal
+ * @packageDocumentation
+ */
+import Editor from '../../Editor';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2 } from '../../math/Vec2';
+import Pointer from '../../Pointer';
+import AbstractComponent from '../../components/AbstractComponent';
+import Command from '../../commands/Command';
+export default class Selection {
+    private editor;
+    private handles;
+    private originalRegion;
+    private transformers;
+    private transform;
+    private selectedElems;
+    private container;
+    private backgroundElem;
+    private hasParent;
+    constructor(startPoint: Point2, editor: Editor);
+    getBackgroundElem(): HTMLElement;
+    getTransform(): Mat33;
+    get preTransformRegion(): Rect2;
+    get region(): Rect2;
+    /**
+     * Computes and returns the bounding box of the selection without
+     * any additional padding. Computes directly from the elements that are selected.
+     * @internal
+     */
+    computeTightBoundingBox(): Rect2;
+    get regionRotation(): number;
+    get preTransformedScreenRegion(): Rect2;
+    get preTransformedScreenRegionRotation(): number;
+    get screenRegion(): Rect2;
+    get screenRegionRotation(): number;
+    setTransform(transform: Mat33, preview?: boolean): void;
+    finalizeTransform(): void;
+    private static ApplyTransformationCommand;
+    private previewTransformCmds;
+    resolveToObjects(): boolean;
+    recomputeRegion(): boolean;
+    getMinCanvasSize(): number;
+    getSelectedItemCount(): number;
+    updateUI(): void;
+    private removedFromImage;
+    private addRemoveSelectionFromImage;
+    private removeDeletedElemsFromSelection;
+    private targetHandle;
+    private backgroundDragging;
+    onDragStart(pointer: Pointer, target: EventTarget): boolean;
+    onDragUpdate(pointer: Pointer): void;
+    onDragEnd(): void;
+    onDragCancel(): void;
+    scrollTo(): Promise<void>;
+    deleteSelectedObjects(): Command;
+    duplicateSelectedObjects(): Promise<Command>;
+    addTo(elem: HTMLElement): void;
+    setToPoint(point: Point2): void;
+    cancelSelection(): void;
+    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
+    getSelectedObjects(): AbstractComponent[];
+}