js-draw 0.17.3 → 0.18.0

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

@@ -0,0 +1,99 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const SVGLoader_1 = __importDefault(require("../SVGLoader"));
+const Mat33_1 = __importDefault(require("../math/Mat33"));
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const TextTool_1 = __importDefault(require("./TextTool"));
+const Color4_1 = __importDefault(require("../Color4"));
+const ImageComponent_1 = __importDefault(require("../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));
+ * ```
+ */
+class PasteHandler extends BaseTool_1.default {
+    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_1.default.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_1.default);
+            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_1.default.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_1.default.fromLines(lines, Mat33_1.default.identity, pastedTextStyle)]);
+        });
+    }
+    doImagePaste(dataURL) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = new Image();
+            image.src = dataURL;
+            const component = yield ImageComponent_1.default.fromImage(image, Mat33_1.default.identity);
+            yield this.addComponentsFromPaste([component]);
+        });
+    }
+}
+exports.default = PasteHandler;

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.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.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;