js-draw 0.23.1 → 0.24.0

package/dist/mjs/src/tools/PasteHandler.mjs

@@ -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.mjs';
-import  SVGLoader  from '../SVGLoader.mjs';
-import  Mat33  from '../math/Mat33.mjs';
-import  BaseTool  from './BaseTool.mjs';
-import  TextTool  from './TextTool.mjs';
-import  Color4  from '../Color4.mjs';
-import  ImageComponent  from '../components/ImageComponent.mjs';
-/**
- * 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/mjs/src/tools/Pen.d.ts

@@ -1,43 +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 startPoint;
-    private ctrlKeyPressed;
-    private shiftKeyPressed;
-    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;
-    private isSnappingToGrid;
-    private isAngleLocked;
-    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
-    onKeyUp({ key }: KeyUpEvent): boolean;
-}

package/dist/mjs/src/tools/Pen.mjs

@@ -1,196 +0,0 @@
-import  EditorImage  from '../EditorImage.mjs';
-import  { PointerDevice }  from '../Pointer.mjs';
-import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
-import  { EditorEventType }  from '../types.mjs';
-import  BaseTool  from './BaseTool.mjs';
-export default class Pen extends BaseTool {
-    constructor(editor, description, style, builderFactory = makeFreehandLineBuilder) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.style = style;
-        this.builderFactory = builderFactory;
-        this.builder = null;
-        this.lastPoint = null;
-        this.startPoint = null;
-        this.ctrlKeyPressed = false;
-        this.shiftKeyPressed = false;
-    }
-    getPressureMultiplier() {
-        return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
-    }
-    // Snap the given pointer to the nearer of the x/y axes.
-    xyAxesSnap(pointer) {
-        if (!this.startPoint) {
-            return pointer;
-        }
-        return pointer.lockedToXYAxes(this.startPoint.pos, this.editor.viewport);
-    }
-    // Converts a `pointer` to a `StrokeDataPoint`.
-    toStrokePoint(pointer) {
-        var _a;
-        if (this.isAngleLocked() && this.lastPoint) {
-            pointer = this.xyAxesSnap(pointer);
-        }
-        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 === PointerDevice.Eraser;
-        let anyDeviceIsStylus = false;
-        for (const pointer of allPointers) {
-            if (pointer.device === 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;
-    }
-    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.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();
-    }
-    noteUpdated() {
-        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-            kind: 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; }
-    isAngleLocked() { return this.shiftKeyPressed; }
-    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;
-        }
-        if (key === 'shift') {
-            this.shiftKeyPressed = 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;
-        }
-        if (key === 'shift') {
-            this.shiftKeyPressed = false;
-            return true;
-        }
-        return false;
-    }
-}

package/dist/mjs/src/tools/PipetteTool.mjs

@@ -1,39 +0,0 @@
-// @internal @packageDocumentation
-import  BaseTool  from './BaseTool.mjs';
-export default class PipetteTool extends BaseTool {
-    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);
-    }
-}

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

@@ -1,8 +0,0 @@
-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/mjs/src/tools/SelectionTool/SelectAllShortcutHandler.mjs

@@ -1,22 +0,0 @@
-import  BaseTool  from '../BaseTool.mjs';
-import  SelectionTool  from './SelectionTool.mjs';
-// Handles ctrl+a: Select all
-export default class SelectAllShortcutHandler extends BaseTool {
-    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);
-            if (selectionTools.length > 0) {
-                const selectionTool = selectionTools[0];
-                selectionTool.setEnabled(true);
-                selectionTool.setSelection(this.editor.image.getAllElements());
-                return true;
-            }
-        }
-        return false;
-    }
-}

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

@@ -1,64 +0,0 @@
-/**
- * @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[];
-}