js-draw 1.20.3 → 1.21.1

package/dist/mjs/tools/Pen.mjs

@@ -1,312 +0,0 @@
-import { Color4 } from '@js-draw/math';
-import  EditorImage  from '../image/EditorImage.mjs';
-import  { PointerDevice }  from '../Pointer.mjs';
-import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
-import  { EditorEventType }  from '../types.mjs';
-import  BaseTool  from './BaseTool.mjs';
-import  { undoKeyboardShortcutId }  from './keybindings.mjs';
-import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
-import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
-import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
-import  StationaryPenDetector  from './util/StationaryPenDetector.mjs';
-export default class Pen extends BaseTool {
-    constructor(editor, description, style) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.builder = null;
-        this.lastPoint = null;
-        this.startPoint = null;
-        this.currentDeviceType = null;
-        this.shapeAutocompletionEnabled = false;
-        this.autocorrectedShape = null;
-        this.lastAutocorrectedShape = null;
-        this.removedAutocorrectedShapeTime = 0;
-        this.stationaryDetector = null;
-        this.styleValue = ReactiveValue.fromInitialValue({
-            factory: makeFreehandLineBuilder,
-            color: Color4.blue,
-            thickness: 4,
-            ...style,
-        });
-        this.styleValue.onUpdateAndNow(newValue => {
-            this.style = newValue;
-            this.noteUpdated();
-        });
-    }
-    getPressureMultiplier() {
-        const thickness = this.style.thickness;
-        return 1 / this.editor.viewport.getScaleFactor() * thickness;
-    }
-    // Converts a `pointer` to a `StrokeDataPoint`.
-    toStrokePoint(pointer) {
-        const minPressure = 0.3;
-        let pressure = Math.max(pointer.pressure ?? 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() {
-        this.editor.clearWetInk();
-        const wetInkRenderer = this.editor.display.getWetInkRenderer();
-        if (this.autocorrectedShape) {
-            const visibleRect = this.editor.viewport.visibleRect;
-            this.autocorrectedShape.render(wetInkRenderer, visibleRect);
-        }
-        else {
-            this.builder?.preview(wetInkRenderer);
-        }
-    }
-    // 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(event) {
-        const { current, allPointers } = event;
-        const isEraser = current.device === PointerDevice.Eraser;
-        let anyDeviceIsStylus = false;
-        for (const pointer of allPointers) {
-            if (pointer.device === PointerDevice.Pen) {
-                anyDeviceIsStylus = true;
-                break;
-            }
-        }
-        // Avoid canceling an existing stroke
-        if (this.builder && !this.eventCanCancelStroke(event)) {
-            return true;
-        }
-        if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
-            this.startPoint = this.toStrokePoint(current);
-            this.builder = this.style.factory(this.startPoint, this.editor.viewport);
-            this.currentDeviceType = current.device;
-            if (this.shapeAutocompletionEnabled) {
-                const stationaryDetectionConfig = {
-                    maxSpeed: 8.5, // screenPx/s
-                    maxRadius: 11, // screenPx
-                    minTimeSeconds: 0.5, // s
-                };
-                this.stationaryDetector = new StationaryPenDetector(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
-            }
-            else {
-                this.stationaryDetector = null;
-            }
-            this.lastAutocorrectedShape = null;
-            this.removedAutocorrectedShapeTime = 0;
-            return true;
-        }
-        return false;
-    }
-    eventCanCancelStroke(event) {
-        // If there has been a delay since the last input event,
-        // it's always okay to cancel
-        const lastInputTime = this.lastPoint?.time ?? 0;
-        if (event.current.timeStamp - lastInputTime > 1000) {
-            return true;
-        }
-        const isPenStroke = this.currentDeviceType === PointerDevice.Pen;
-        const isTouchEvent = event.current.device === PointerDevice.Touch;
-        // Don't allow pen strokes to be cancelled by touch events.
-        if (isPenStroke && isTouchEvent) {
-            return false;
-        }
-        return true;
-    }
-    eventCanBeDeliveredToNonActiveTool(event) {
-        return this.eventCanCancelStroke(event);
-    }
-    onPointerMove({ current }) {
-        if (!this.builder)
-            return;
-        if (current.device !== this.currentDeviceType)
-            return;
-        const isStationary = this.stationaryDetector?.onPointerMove(current);
-        if (!isStationary) {
-            this.addPointToStroke(this.toStrokePoint(current));
-            if (this.autocorrectedShape) {
-                this.removedAutocorrectedShapeTime = performance.now();
-                this.autocorrectedShape = null;
-                this.editor.announceForAccessibility(this.editor.localization.autocorrectionCanceled);
-            }
-        }
-    }
-    onPointerUp({ current }) {
-        if (!this.builder)
-            return false;
-        if (current.device !== this.currentDeviceType) {
-            // this.builder still exists, so we're handling events from another
-            // device type.
-            return true;
-        }
-        this.stationaryDetector?.onPointerUp(current);
-        // onPointerUp events can have zero pressure. Use the last pressure instead.
-        const currentPoint = this.toStrokePoint(current);
-        const strokePoint = {
-            ...currentPoint,
-            width: this.lastPoint?.width ?? currentPoint.width,
-        };
-        this.addPointToStroke(strokePoint);
-        if (current.isPrimary) {
-            this.finalizeStroke();
-        }
-        return false;
-    }
-    onGestureCancel() {
-        this.builder = null;
-        this.editor.clearWetInk();
-        this.stationaryDetector?.destroy();
-        this.stationaryDetector = null;
-    }
-    removedAutocorrectedShapeRecently() {
-        return this.removedAutocorrectedShapeTime > performance.now() - 320;
-    }
-    async autocorrectShape(_lastPointer) {
-        if (!this.builder || !this.builder.autocorrectShape)
-            return;
-        if (!this.shapeAutocompletionEnabled)
-            return;
-        // If already corrected, do nothing
-        if (this.autocorrectedShape)
-            return;
-        // Activate stroke fitting
-        const correctedShape = await this.builder.autocorrectShape();
-        if (!this.builder || !correctedShape) {
-            return;
-        }
-        // Don't complete to empty shapes.
-        const bboxArea = correctedShape.getBBox().area;
-        if (bboxArea === 0 || !isFinite(bboxArea)) {
-            return;
-        }
-        const shapeDescription = correctedShape.description(this.editor.localization);
-        this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(shapeDescription));
-        this.autocorrectedShape = correctedShape;
-        this.lastAutocorrectedShape = correctedShape;
-        this.previewStroke();
-    }
-    finalizeStroke() {
-        if (this.builder) {
-            // If autocorrectedShape was cleared recently enough, it was
-            // probably by mistake. Reset it.
-            if (this.lastAutocorrectedShape && this.removedAutocorrectedShapeRecently()) {
-                this.autocorrectedShape = this.lastAutocorrectedShape;
-            }
-            const stroke = this.autocorrectedShape ?? this.builder.build();
-            this.previewStroke();
-            if (stroke.getBBox().area > 0) {
-                if (stroke === this.autocorrectedShape) {
-                    this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
-                }
-                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.autocorrectedShape = null;
-        this.lastAutocorrectedShape = null;
-        this.editor.clearWetInk();
-        this.stationaryDetector?.destroy();
-        this.stationaryDetector = null;
-    }
-    noteUpdated() {
-        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-            kind: EditorEventType.ToolUpdated,
-            tool: this,
-        });
-    }
-    setColor(color) {
-        if (color.toHexString() !== this.style.color.toHexString()) {
-            this.styleValue.set({
-                ...this.style,
-                color,
-            });
-        }
-    }
-    setThickness(thickness) {
-        if (thickness !== this.style.thickness) {
-            this.styleValue.set({
-                ...this.style,
-                thickness,
-            });
-        }
-    }
-    setStrokeFactory(factory) {
-        if (factory !== this.style.factory) {
-            this.styleValue.set({
-                ...this.style,
-                factory,
-            });
-        }
-    }
-    setHasStabilization(hasStabilization) {
-        const hasInputMapper = !!this.getInputMapper();
-        // TODO: Currently, this assumes that there is no other input mapper.
-        if (hasStabilization === hasInputMapper) {
-            return;
-        }
-        if (hasInputMapper) {
-            this.setInputMapper(null);
-        }
-        else {
-            this.setInputMapper(new InputStabilizer(this.editor.viewport));
-        }
-        this.noteUpdated();
-    }
-    setStrokeAutocorrectEnabled(enabled) {
-        if (enabled !== this.shapeAutocompletionEnabled) {
-            this.shapeAutocompletionEnabled = enabled;
-            this.noteUpdated();
-        }
-    }
-    getStrokeAutocorrectionEnabled() {
-        return this.shapeAutocompletionEnabled;
-    }
-    getThickness() { return this.style.thickness; }
-    getColor() { return this.style.color; }
-    getStrokeFactory() { return this.style.factory; }
-    getStyleValue() { return this.styleValue; }
-    onKeyPress(event) {
-        const shortcuts = this.editor.shortcuts;
-        // Ctrl+Z: End the stroke so that it can be undone/redone.
-        const isCtrlZ = shortcuts.matchesShortcut(undoKeyboardShortcutId, event);
-        if (this.builder && isCtrlZ) {
-            this.finalizeStroke();
-            // Return false: Allow other listeners to handle the event (e.g.
-            // undo/redo).
-            return false;
-        }
-        let newThickness;
-        if (shortcuts.matchesShortcut(decreaseSizeKeyboardShortcutId, event)) {
-            newThickness = this.getThickness() * 2 / 3;
-        }
-        else if (shortcuts.matchesShortcut(increaseSizeKeyboardShortcutId, event)) {
-            newThickness = this.getThickness() * 3 / 2;
-        }
-        if (newThickness !== undefined) {
-            newThickness = Math.min(Math.max(1, newThickness), 256);
-            this.setThickness(newThickness);
-            return true;
-        }
-        return false;
-    }
-}

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

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

package/dist/mjs/tools/PipetteTool.d.ts

@@ -1,28 +0,0 @@
-import { Color4 } from '@js-draw/math';
-import Editor from '../Editor';
-import { PointerEvt } from '../inputEvents';
-import BaseTool from './BaseTool';
-type ColorListener = (color: Color4 | null) => void;
-/**
- * A tool used internally to pick colors from the canvas.
- *
- * When color selection is in progress, the `pipette--color-selection-in-progress` class
- * is added to the root element. This can be used by themes.
- *
- * @internal
- */
-export default class PipetteTool extends BaseTool {
-    private editor;
-    private colorPreviewListener;
-    private colorSelectListener;
-    constructor(editor: Editor, description: string);
-    canReceiveInputInReadOnlyEditor(): boolean;
-    private updateSelectingStatus;
-    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/mjs/tools/PipetteTool.mjs

@@ -1,63 +0,0 @@
-// @internal @packageDocumentation
-import  BaseTool  from './BaseTool.mjs';
-/**
- * A tool used internally to pick colors from the canvas.
- *
- * When color selection is in progress, the `pipette--color-selection-in-progress` class
- * is added to the root element. This can be used by themes.
- *
- * @internal
- */
-export default class PipetteTool extends BaseTool {
-    constructor(editor, description) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.colorPreviewListener = null;
-        this.colorSelectListener = null;
-        this.enabledValue().onUpdateAndNow(() => {
-            this.updateSelectingStatus();
-        });
-    }
-    canReceiveInputInReadOnlyEditor() {
-        return true;
-    }
-    // Ensures that the root editor element correctly reflects whether color selection
-    // is in progress.
-    updateSelectingStatus() {
-        const className = 'pipette--color-selection-in-progress';
-        if (this.isEnabled() && this.colorSelectListener && this.colorPreviewListener) {
-            this.editor.getRootElement().classList.add(className);
-        }
-        else {
-            this.editor.getRootElement().classList.remove(className);
-        }
-    }
-    setColorListener(colorPreviewListener, 
-    // Called when the gesture ends -- when the user has selected a color.
-    colorSelectListener) {
-        this.colorPreviewListener = colorPreviewListener;
-        this.colorSelectListener = colorSelectListener;
-        this.updateSelectingStatus();
-    }
-    clearColorListener() {
-        this.colorPreviewListener = null;
-        this.colorSelectListener = null;
-        this.updateSelectingStatus();
-    }
-    onPointerDown({ current, allPointers }) {
-        if (this.colorPreviewListener && allPointers.length === 1) {
-            this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
-            return true;
-        }
-        return false;
-    }
-    onPointerMove({ current }) {
-        this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
-    }
-    onPointerUp({ current }) {
-        this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
-    }
-    onGestureCancel() {
-        this.colorSelectListener?.(null);
-    }
-}

package/dist/mjs/tools/ScrollbarTool.d.ts

@@ -1,18 +0,0 @@
-import Editor from '../Editor';
-import BaseTool from './BaseTool';
-/**
- * This tool, when enabled, renders scrollbars reflecting the current position
- * of the view relative to the import/export area of the image.
- *
- * **Note**: These scrollbars are currently not draggable. This may change in
- * a future release.
- */
-export default class ScrollbarTool extends BaseTool {
-    private editor;
-    private scrollbarOverlay;
-    private verticalScrollbar;
-    private horizontalScrollbar;
-    constructor(editor: Editor);
-    private fadeOutTimeout;
-    private updateScrollbars;
-}

package/dist/mjs/tools/ScrollbarTool.mjs

@@ -1,79 +0,0 @@
-import { Rect2 } from '@js-draw/math';
-import  { EditorEventType }  from '../types.mjs';
-import  BaseTool  from './BaseTool.mjs';
-/**
- * This tool, when enabled, renders scrollbars reflecting the current position
- * of the view relative to the import/export area of the image.
- *
- * **Note**: These scrollbars are currently not draggable. This may change in
- * a future release.
- */
-export default class ScrollbarTool extends BaseTool {
-    constructor(editor) {
-        super(editor.notifier, 'scrollbar');
-        this.editor = editor;
-        this.fadeOutTimeout = null;
-        this.scrollbarOverlay = document.createElement('div');
-        this.scrollbarOverlay.classList.add('ScrollbarTool-overlay');
-        this.verticalScrollbar = document.createElement('div');
-        this.verticalScrollbar.classList.add('vertical-scrollbar');
-        this.horizontalScrollbar = document.createElement('div');
-        this.horizontalScrollbar.classList.add('horizontal-scrollbar');
-        this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
-        let overlay = null;
-        let viewportListener = null;
-        this.enabledValue().onUpdateAndNow(enabled => {
-            overlay?.remove();
-            viewportListener?.remove();
-            viewportListener = null;
-            overlay = null;
-            if (enabled) {
-                viewportListener = editor.notifier.on(EditorEventType.ViewportChanged, _event => {
-                    this.updateScrollbars();
-                });
-                this.updateScrollbars();
-                overlay = editor.createHTMLOverlay(this.scrollbarOverlay);
-            }
-        });
-    }
-    updateScrollbars() {
-        const viewport = this.editor.viewport;
-        const screenSize = viewport.getScreenRectSize();
-        const screenRect = new Rect2(0, 0, screenSize.x, screenSize.y);
-        const imageRect = this.editor.getImportExportRect()
-            // The scrollbars are positioned in screen coordinates, so the exportRect also needs
-            // to be in screen coordinates
-            .transformedBoundingBox(viewport.canvasToScreenTransform)
-            // If the screenRect is outside of the exportRect, expand the image rectangle
-            .union(screenRect);
-        const scrollbarWidth = screenRect.width / imageRect.width * screenSize.x;
-        const scrollbarHeight = screenRect.height / imageRect.height * screenSize.y;
-        const scrollbarX = (screenRect.x - imageRect.x) / imageRect.width * (screenSize.x);
-        const scrollbarY = (screenRect.y - imageRect.y) / imageRect.height * (screenSize.y);
-        this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
-        this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
-        this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;
-        this.verticalScrollbar.style.marginTop = `${scrollbarY}px`;
-        // Style the scrollbars differently when there's no scroll (all content visible)
-        const handleNoScrollStyling = (scrollbar, size, fillSize) => {
-            const fillsWindowClass = 'represents-no-scroll';
-            if (Math.abs(size - fillSize) < 1e-8) {
-                scrollbar.classList.add(fillsWindowClass);
-            }
-            else {
-                scrollbar.classList.remove(fillsWindowClass);
-            }
-        };
-        handleNoScrollStyling(this.horizontalScrollbar, scrollbarWidth, screenSize.x);
-        handleNoScrollStyling(this.verticalScrollbar, scrollbarHeight, screenSize.y);
-        // Fade out after a delay.
-        if (this.fadeOutTimeout !== null) {
-            clearTimeout(this.fadeOutTimeout);
-        }
-        const fadeOutDelay = 3000;
-        this.fadeOutTimeout = setTimeout(() => {
-            this.scrollbarOverlay.classList.remove('just-updated');
-        }, fadeOutDelay);
-        this.scrollbarOverlay.classList.add('just-updated');
-    }
-}

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

@@ -1,9 +0,0 @@
-import Editor from '../../Editor';
-import { KeyPressEvent } from '../../inputEvents';
-import BaseTool from '../BaseTool';
-export default class SelectAllShortcutHandler extends BaseTool {
-    private editor;
-    constructor(editor: Editor);
-    canReceiveInputInReadOnlyEditor(): boolean;
-    onKeyPress(event: KeyPressEvent): boolean;
-}

package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs

@@ -1,26 +0,0 @@
-import  BaseTool  from '../BaseTool.mjs';
-import  { selectAllKeyboardShortcut }  from '../keybindings.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;
-    }
-    canReceiveInputInReadOnlyEditor() {
-        return true;
-    }
-    // @internal
-    onKeyPress(event) {
-        if (this.editor.shortcuts.matchesShortcut(selectAllKeyboardShortcut, event)) {
-            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/tools/SelectionTool/Selection.d.ts

@@ -1,71 +0,0 @@
-/**
- * @internal
- * @packageDocumentation
- */
-import SerializableCommand from '../../commands/SerializableCommand';
-import Editor from '../../Editor';
-import { Mat33, Rect2, Point2 } from '@js-draw/math';
-import Pointer from '../../Pointer';
-import AbstractComponent from '../../components/AbstractComponent';
-import Command from '../../commands/Command';
-export default class Selection {
-    private editor;
-    private childwidgets;
-    private originalRegion;
-    private selectionTightBoundingBox;
-    private transformers;
-    private transform;
-    private selectedElems;
-    private outerContainer;
-    private innerContainer;
-    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;
-    getScreenRegion(): Rect2;
-    get screenRegionRotation(): number;
-    setTransform(transform: Mat33, preview?: boolean): void;
-    private getDeltaZIndexToMoveSelectionToTop;
-    finalizeTransform(): void | Promise<void>;
-    /** Sends all selected elements to the bottom of the visible image. */
-    sendToBack(): SerializableCommand | null;
-    private static ApplyTransformationCommand;
-    private previewTransformCmds;
-    resolveToObjects(): boolean;
-    recomputeRegion(): boolean;
-    padRegion(): void;
-    getMinCanvasSize(): number;
-    getSelectedItemCount(): number;
-    updateUI(): void;
-    private removedFromImage;
-    private addRemoveSelectionFromImage;
-    private removeDeletedElemsFromSelection;
-    private activeHandle;
-    private backgroundDragging;
-    onDragStart(pointer: Pointer): boolean;
-    onDragUpdate(pointer: Pointer): void;
-    onDragEnd(): void;
-    onDragCancel(): void;
-    scrollTo(): boolean;
-    deleteSelectedObjects(): Command;
-    private selectionDuplicatedAnimationTimeout;
-    private runSelectionDuplicatedAnimation;
-    duplicateSelectedObjects(): Promise<Command>;
-    addTo(elem: HTMLElement): void;
-    setToPoint(point: Point2): void;
-    cancelSelection(): void;
-    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
-    getSelectedObjects(): AbstractComponent[];
-}