js-draw 0.23.0 → 0.24.0

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

@@ -0,0 +1,41 @@
+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 startPoint;
+    private snapToGridEnabled;
+    private angleLockEnabled;
+    constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
+    private getPressureMultiplier;
+    private xyAxesSnap;
+    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;
+    onKeyPress(event: KeyPressEvent): boolean;
+    onKeyUp(event: KeyUpEvent): boolean;
+}

package/dist/cjs/tools/Pen.js

@@ -0,0 +1,238 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var EditorImage_1 = require("../EditorImage");
+var Pointer_1 = require("../Pointer");
+var FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
+var types_1 = require("../types");
+var BaseTool_1 = require("./BaseTool");
+var keybindings_1 = require("./keybindings");
+var keybindings_2 = require("./keybindings");
+var Pen = /** @class */ (function (_super) {
+    __extends(Pen, _super);
+    function Pen(editor, description, style, builderFactory) {
+        if (builderFactory === void 0) { builderFactory = FreehandLineBuilder_1.makeFreehandLineBuilder; }
+        var _this = _super.call(this, editor.notifier, description) || this;
+        _this.editor = editor;
+        _this.style = style;
+        _this.builderFactory = builderFactory;
+        _this.builder = null;
+        _this.lastPoint = null;
+        _this.startPoint = null;
+        _this.snapToGridEnabled = false;
+        _this.angleLockEnabled = false;
+        return _this;
+    }
+    Pen.prototype.getPressureMultiplier = function () {
+        return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
+    };
+    // Snap the given pointer to the nearer of the x/y axes.
+    Pen.prototype.xyAxesSnap = function (pointer) {
+        if (!this.startPoint) {
+            return pointer;
+        }
+        var screenPos = this.editor.viewport.canvasToScreen(this.startPoint.pos);
+        return pointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
+    };
+    // Converts a `pointer` to a `StrokeDataPoint`.
+    Pen.prototype.toStrokePoint = function (pointer) {
+        var _a;
+        if (this.angleLockEnabled && this.lastPoint) {
+            pointer = this.xyAxesSnap(pointer);
+        }
+        if (this.snapToGridEnabled) {
+            pointer = pointer.snappedToGrid(this.editor.viewport);
+        }
+        var minPressure = 0.3;
+        var 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!');
+        var pos = pointer.canvasPos;
+        return {
+            pos: 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`.
+    Pen.prototype.previewStroke = function () {
+        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.
+    Pen.prototype.addPointToStroke = function (point) {
+        if (!this.builder) {
+            throw new Error('No stroke is currently being generated.');
+        }
+        this.builder.addPoint(point);
+        this.lastPoint = point;
+        this.previewStroke();
+    };
+    Pen.prototype.onPointerDown = function (_a) {
+        var current = _a.current, allPointers = _a.allPointers;
+        var isEraser = current.device === Pointer_1.PointerDevice.Eraser;
+        var anyDeviceIsStylus = false;
+        for (var _i = 0, allPointers_1 = allPointers; _i < allPointers_1.length; _i++) {
+            var pointer = allPointers_1[_i];
+            if (pointer.device === Pointer_1.PointerDevice.Pen) {
+                anyDeviceIsStylus = true;
+                break;
+            }
+        }
+        if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
+            this.startPoint = this.toStrokePoint(current);
+            this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
+            return true;
+        }
+        return false;
+    };
+    Pen.prototype.onPointerMove = function (_a) {
+        var current = _a.current;
+        if (!this.builder)
+            return;
+        this.addPointToStroke(this.toStrokePoint(current));
+    };
+    Pen.prototype.onPointerUp = function (_a) {
+        var _b, _c;
+        var current = _a.current;
+        if (!this.builder) {
+            return;
+        }
+        // onPointerUp events can have zero pressure. Use the last pressure instead.
+        var currentPoint = this.toStrokePoint(current);
+        var strokePoint = __assign(__assign({}, currentPoint), { width: (_c = (_b = this.lastPoint) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : currentPoint.width });
+        this.addPointToStroke(strokePoint);
+        if (current.isPrimary) {
+            this.finalizeStroke();
+        }
+    };
+    Pen.prototype.onGestureCancel = function () {
+        this.editor.clearWetInk();
+    };
+    Pen.prototype.finalizeStroke = function () {
+        if (this.builder) {
+            var stroke = this.builder.build();
+            this.previewStroke();
+            if (stroke.getBBox().area > 0) {
+                var canFlatten = true;
+                var 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.lastPoint = null;
+        this.editor.clearWetInk();
+    };
+    Pen.prototype.noteUpdated = function () {
+        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    };
+    Pen.prototype.setColor = function (color) {
+        if (color.toHexString() !== this.style.color.toHexString()) {
+            this.style = __assign(__assign({}, this.style), { color: color });
+            this.noteUpdated();
+        }
+    };
+    Pen.prototype.setThickness = function (thickness) {
+        if (thickness !== this.style.thickness) {
+            this.style = __assign(__assign({}, this.style), { thickness: thickness });
+            this.noteUpdated();
+        }
+    };
+    Pen.prototype.setStrokeFactory = function (factory) {
+        if (factory !== this.builderFactory) {
+            this.builderFactory = factory;
+            this.noteUpdated();
+        }
+    };
+    Pen.prototype.getThickness = function () { return this.style.thickness; };
+    Pen.prototype.getColor = function () { return this.style.color; };
+    Pen.prototype.getStrokeFactory = function () { return this.builderFactory; };
+    Pen.prototype.setEnabled = function (enabled) {
+        _super.prototype.setEnabled.call(this, enabled);
+        this.snapToGridEnabled = false;
+    };
+    Pen.prototype.onKeyPress = function (event) {
+        var shortcuts = this.editor.shortcuts;
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        var isCtrlZ = shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event);
+        if (this.builder && isCtrlZ) {
+            this.finalizeStroke();
+            // Return false: Allow other listeners to handle the event (e.g.
+            // undo/redo).
+            return false;
+        }
+        var newThickness;
+        if (shortcuts.matchesShortcut(keybindings_2.decreaseSizeKeyboardShortcutId, event)) {
+            newThickness = this.getThickness() * 2 / 3;
+        }
+        else if (shortcuts.matchesShortcut(keybindings_2.increaseSizeKeyboardShortcutId, event)) {
+            newThickness = this.getThickness() * 3 / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 256);
+            this.setThickness(newThickness);
+            return true;
+        }
+        if (shortcuts.matchesShortcut(keybindings_2.snapToGridKeyboardShortcutId, event)) {
+            this.snapToGridEnabled = true;
+            return true;
+        }
+        if (shortcuts.matchesShortcut(keybindings_2.lineLockKeyboardShortcutId, event)) {
+            this.angleLockEnabled = true;
+            return true;
+        }
+        return false;
+    };
+    Pen.prototype.onKeyUp = function (event) {
+        var shortcuts = this.editor.shortcuts;
+        if (shortcuts.matchesShortcut(keybindings_2.snapToGridKeyboardShortcutId, event)) {
+            this.snapToGridEnabled = false;
+            return true;
+        }
+        if (shortcuts.matchesShortcut(keybindings_2.lineLockKeyboardShortcutId, event)) {
+            this.angleLockEnabled = false;
+            return true;
+        }
+        return false;
+    };
+    return Pen;
+}(BaseTool_1.default));
+exports.default = Pen;

package/dist/cjs/tools/Pen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/PipetteTool.js

@@ -0,0 +1,63 @@
+"use strict";
+// @internal @packageDocumentation
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var BaseTool_1 = require("./BaseTool");
+var PipetteTool = /** @class */ (function (_super) {
+    __extends(PipetteTool, _super);
+    function PipetteTool(editor, description) {
+        var _this = _super.call(this, editor.notifier, description) || this;
+        _this.editor = editor;
+        _this.colorPreviewListener = null;
+        _this.colorSelectListener = null;
+        return _this;
+    }
+    PipetteTool.prototype.setColorListener = function (colorPreviewListener, 
+    // Called when the gesture ends -- when the user has selected a color.
+    colorSelectListener) {
+        this.colorPreviewListener = colorPreviewListener;
+        this.colorSelectListener = colorSelectListener;
+    };
+    PipetteTool.prototype.clearColorListener = function () {
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+    };
+    PipetteTool.prototype.onPointerDown = function (_a) {
+        var current = _a.current, allPointers = _a.allPointers;
+        if (this.colorPreviewListener && allPointers.length === 1) {
+            this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+            return true;
+        }
+        return false;
+    };
+    PipetteTool.prototype.onPointerMove = function (_a) {
+        var _b;
+        var current = _a.current;
+        (_b = this.colorPreviewListener) === null || _b === void 0 ? void 0 : _b.call(this, this.editor.display.getColorAt(current.screenPos));
+    };
+    PipetteTool.prototype.onPointerUp = function (_a) {
+        var _b;
+        var current = _a.current;
+        (_b = this.colorSelectListener) === null || _b === void 0 ? void 0 : _b.call(this, this.editor.display.getColorAt(current.screenPos));
+    };
+    PipetteTool.prototype.onGestureCancel = function () {
+        var _a;
+        (_a = this.colorSelectListener) === null || _a === void 0 ? void 0 : _a.call(this, null);
+    };
+    return PipetteTool;
+}(BaseTool_1.default));
+exports.default = PipetteTool;

package/dist/cjs/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(event: KeyPressEvent): boolean;
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var BaseTool_1 = require("../BaseTool");
+var keybindings_1 = require("../keybindings");
+var SelectionTool_1 = require("./SelectionTool");
+// Handles ctrl+a: Select all
+var SelectAllShortcutHandler = /** @class */ (function (_super) {
+    __extends(SelectAllShortcutHandler, _super);
+    function SelectAllShortcutHandler(editor) {
+        var _this = _super.call(this, editor.notifier, editor.localization.selectAllTool) || this;
+        _this.editor = editor;
+        return _this;
+    }
+    // @internal
+    SelectAllShortcutHandler.prototype.onKeyPress = function (event) {
+        if (this.editor.shortcuts.matchesShortcut(keybindings_1.selectAllKeyboardShortcut, event)) {
+            var selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
+            if (selectionTools.length > 0) {
+                var selectionTool = selectionTools[0];
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
+        return false;
+    };
+    return SelectAllShortcutHandler;
+}(BaseTool_1.default));
+exports.default = SelectAllShortcutHandler;

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

@@ -0,0 +1,64 @@
+/**
+ * @internal
+ * @packageDocumentation
+ */
+import Editor from '../../Editor';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/shapes/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[];
+}