js-draw 1.20.3 → 1.21.1

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

@@ -1,23 +0,0 @@
-import { Point2, Vec2 } from '@js-draw/math';
-import Viewport from '../../Viewport';
-type ScrollByCallback = (delta: Vec2) => void;
-/**
- * Automatically scrolls the viewport such that the user's pointer is visible.
- */
-export default class ToPointerAutoscroller {
-    private viewport;
-    private scrollByCanvasDelta;
-    private started;
-    private updateLoopId;
-    private updateLoopRunning;
-    private targetPoint;
-    private scrollRate;
-    constructor(viewport: Viewport, scrollByCanvasDelta: ScrollByCallback);
-    private getScrollForPoint;
-    start(): void;
-    onPointerMove(pointerScreenPosition: Point2): void;
-    stop(): void;
-    private startUpdateLoop;
-    private stopUpdateLoop;
-}
-export {};

package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs

@@ -1,77 +0,0 @@
-import { Rect2, Vec2 } from '@js-draw/math';
-import  untilNextAnimationFrame  from '../../util/untilNextAnimationFrame.mjs';
-/**
- * Automatically scrolls the viewport such that the user's pointer is visible.
- */
-export default class ToPointerAutoscroller {
-    constructor(viewport, scrollByCanvasDelta) {
-        this.viewport = viewport;
-        this.scrollByCanvasDelta = scrollByCanvasDelta;
-        this.started = false;
-        this.updateLoopId = 0;
-        this.updateLoopRunning = false;
-        this.targetPoint = null;
-        this.scrollRate = 1000; // px/s
-    }
-    getScrollForPoint(screenPoint) {
-        const screenSize = this.viewport.getScreenRectSize();
-        const screenRect = new Rect2(0, 0, screenSize.x, screenSize.y);
-        // Starts autoscrolling when the cursor is **outside of** this region
-        const marginSize = 44;
-        const autoscrollBoundary = screenRect.grownBy(-marginSize);
-        if (autoscrollBoundary.containsPoint(screenPoint)) {
-            return Vec2.zero;
-        }
-        const closestEdgePoint = autoscrollBoundary.getClosestPointOnBoundaryTo(screenPoint);
-        const distToEdge = closestEdgePoint.distanceTo(screenPoint);
-        const toEdge = closestEdgePoint.minus(screenPoint);
-        // Go faster for points further away from the boundary.
-        const maximumScaleFactor = 1.25;
-        const scaleFactor = Math.min(distToEdge / marginSize, maximumScaleFactor);
-        return toEdge.normalizedOrZero().times(scaleFactor);
-    }
-    start() {
-        this.started = true;
-    }
-    onPointerMove(pointerScreenPosition) {
-        if (!this.started) {
-            return;
-        }
-        if (this.getScrollForPoint(pointerScreenPosition) === Vec2.zero) {
-            this.stopUpdateLoop();
-        }
-        else {
-            this.targetPoint = pointerScreenPosition;
-            this.startUpdateLoop();
-        }
-    }
-    stop() {
-        this.targetPoint = null;
-        this.started = false;
-        this.stopUpdateLoop();
-    }
-    startUpdateLoop() {
-        if (this.updateLoopRunning) {
-            return;
-        }
-        (async () => {
-            this.updateLoopId++;
-            const currentUpdateLoopId = this.updateLoopId;
-            let lastUpdateTime = performance.now();
-            while (this.updateLoopId === currentUpdateLoopId && this.targetPoint) {
-                this.updateLoopRunning = true;
-                const currentTime = performance.now();
-                const deltaTimeMs = currentTime - lastUpdateTime;
-                const scrollDirection = this.getScrollForPoint(this.targetPoint);
-                const screenScrollAmount = scrollDirection.times(this.scrollRate * deltaTimeMs / 1000);
-                this.scrollByCanvasDelta(this.viewport.screenToCanvasTransform.transformVec3(screenScrollAmount));
-                lastUpdateTime = currentTime;
-                await untilNextAnimationFrame();
-            }
-            this.updateLoopRunning = false;
-        })();
-    }
-    stopUpdateLoop() {
-        this.updateLoopId++;
-    }
-}

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

@@ -1,42 +0,0 @@
-import Editor from '../../Editor';
-import { Vec3 } from '@js-draw/math';
-import Selection from './Selection';
-import { ResizeMode } from './types';
-export declare class DragTransformer {
-    private readonly editor;
-    private selection;
-    private dragStartPoint;
-    constructor(editor: Editor, selection: Selection);
-    onDragStart(startPoint: Vec3): void;
-    onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void | Promise<void>;
-}
-export declare class ResizeTransformer {
-    private readonly editor;
-    private selection;
-    private mode;
-    private dragStartPoint;
-    private transformOrigin;
-    private scaleRate;
-    constructor(editor: Editor, selection: Selection);
-    onDragStart(startPoint: Vec3, mode: ResizeMode): void;
-    private computeOriginAndScaleRate;
-    onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void | Promise<void>;
-}
-export declare class RotateTransformer {
-    private readonly editor;
-    private selection;
-    private startAngle;
-    private targetRotation;
-    private maximumDistFromStart;
-    private startPoint;
-    private startTime;
-    constructor(editor: Editor, selection: Selection);
-    private getAngle;
-    private roundAngle;
-    onDragStart(startPoint: Vec3): void;
-    private setRotationTo;
-    onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void | Promise<void>;
-}

package/dist/mjs/tools/SelectionTool/TransformMode.mjs

@@ -1,146 +0,0 @@
-import { Mat33, Vec2 } from '@js-draw/math';
-import  Viewport  from '../../Viewport.mjs';
-import  { ResizeMode }  from './types.mjs';
-export class DragTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-    }
-    onDragStart(startPoint) {
-        this.selection.setTransform(Mat33.identity);
-        this.dragStartPoint = startPoint;
-    }
-    onDragUpdate(canvasPos) {
-        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
-        this.selection.setTransform(Mat33.translation(delta));
-    }
-    onDragEnd() {
-        return this.selection.finalizeTransform();
-    }
-}
-export class ResizeTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-        this.mode = ResizeMode.Both;
-    }
-    onDragStart(startPoint, mode) {
-        this.selection.setTransform(Mat33.identity);
-        this.mode = mode;
-        this.dragStartPoint = startPoint;
-        this.computeOriginAndScaleRate();
-    }
-    computeOriginAndScaleRate() {
-        // Store the index of the furthest corner from startPoint. We'll use that
-        // to determine where the transform considers (0, 0) (where we scale from).
-        const selectionRect = this.selection.preTransformRegion;
-        const selectionBoxCorners = selectionRect.corners;
-        let largestDistSquared = 0;
-        for (let i = 0; i < selectionBoxCorners.length; i++) {
-            const currentCorner = selectionBoxCorners[i];
-            const distSquaredToCurrent = this.dragStartPoint.minus(currentCorner).magnitudeSquared();
-            if (distSquaredToCurrent > largestDistSquared) {
-                largestDistSquared = distSquaredToCurrent;
-                this.transformOrigin = currentCorner;
-            }
-        }
-        // Determine whether moving the mouse to the right increases or decreases the width.
-        let widthScaleRate = 1;
-        let heightScaleRate = 1;
-        if (this.transformOrigin.x > selectionRect.center.x) {
-            widthScaleRate = -1;
-        }
-        if (this.transformOrigin.y > selectionRect.center.y) {
-            heightScaleRate = -1;
-        }
-        this.scaleRate = Vec2.of(widthScaleRate, heightScaleRate);
-    }
-    onDragUpdate(canvasPos) {
-        const canvasDelta = canvasPos.minus(this.dragStartPoint);
-        const origWidth = this.selection.preTransformRegion.width;
-        const origHeight = this.selection.preTransformRegion.height;
-        let scale = Vec2.of(1, 1);
-        if (this.mode === ResizeMode.HorizontalOnly) {
-            const newWidth = origWidth + canvasDelta.x * this.scaleRate.x;
-            scale = Vec2.of(newWidth / origWidth, scale.y);
-        }
-        if (this.mode === ResizeMode.VerticalOnly) {
-            const newHeight = origHeight + canvasDelta.y * this.scaleRate.y;
-            scale = Vec2.of(scale.x, newHeight / origHeight);
-        }
-        if (this.mode === ResizeMode.Both) {
-            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
-            const newWidth = origWidth + delta;
-            scale = Vec2.of(newWidth / origWidth, newWidth / origWidth);
-        }
-        // Round: If this isn't done, scaling can create numbers with long decimal representations.
-        //    long decimal representations => large file sizes.
-        scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
-        if (scale.x !== 0 && scale.y !== 0) {
-            const origin = this.editor.viewport.roundPoint(this.transformOrigin);
-            this.selection.setTransform(Mat33.scaling2D(scale, origin));
-        }
-    }
-    onDragEnd() {
-        return this.selection.finalizeTransform();
-    }
-}
-export class RotateTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-        this.startAngle = 0;
-        this.targetRotation = 0;
-        this.maximumDistFromStart = 0;
-    }
-    getAngle(canvasPoint) {
-        const selectionCenter = this.selection.preTransformRegion.center;
-        const offset = canvasPoint.minus(selectionCenter);
-        return offset.angle();
-    }
-    roundAngle(angle) {
-        // Round angles to the nearest 16th of a turn
-        const roundingFactor = 16 / 2 / Math.PI;
-        return Math.round(angle * roundingFactor) / roundingFactor;
-    }
-    onDragStart(startPoint) {
-        this.startPoint = startPoint;
-        this.selection.setTransform(Mat33.identity);
-        this.startAngle = this.getAngle(startPoint);
-        this.targetRotation = 0;
-        // Used to determine whether the user clicked or not.
-        this.maximumDistFromStart = 0;
-        this.startTime = performance.now();
-    }
-    setRotationTo(angle) {
-        // Transform in canvas space
-        const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
-        const unrounded = Mat33.zRotation(angle);
-        const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
-        const fullRoundedTransform = Mat33
-            .translation(canvasSelCenter)
-            .rightMul(roundedRotationTransform)
-            .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
-        this.selection.setTransform(fullRoundedTransform);
-    }
-    onDragUpdate(canvasPos) {
-        this.targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
-        this.setRotationTo(this.targetRotation);
-        const distFromStart = canvasPos.minus(this.startPoint).magnitude();
-        if (distFromStart > this.maximumDistFromStart) {
-            this.maximumDistFromStart = distFromStart;
-        }
-    }
-    onDragEnd() {
-        // Anything with motion less than this is considered a click
-        const clickThresholdDist = 10;
-        const clickThresholdTime = 0.4; // s
-        const dragTimeSeconds = (performance.now() - this.startTime) / 1000;
-        if (dragTimeSeconds < clickThresholdTime
-            && this.maximumDistFromStart < clickThresholdDist
-            && this.targetRotation === 0) {
-            this.setRotationTo(-Math.PI / 2);
-        }
-        return this.selection.finalizeTransform();
-    }
-}

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

@@ -1,28 +0,0 @@
-import type { Rect2, Point2 } from '@js-draw/math';
-import Pointer from '../../Pointer';
-export declare enum ResizeMode {
-    Both = 0,
-    HorizontalOnly = 1,
-    VerticalOnly = 2
-}
-export declare enum TransformMode {
-    Snap = 0,
-    NoSnap = 1
-}
-/**
- * Represents a child of the selection that should move with the selection
- * and handle events.
- *
- * Although selection children should be `HTMLElement`s, the selection may be
- * hidden behind an invisible element. As such, these elements should handle
- * drag start/update/end events.
- */
-export interface SelectionBoxChild {
-    updatePosition(selectionScreenBBox: Rect2): void;
-    containsPoint(point: Point2): boolean;
-    addTo(container: HTMLElement): void;
-    remove(): void;
-    handleDragStart(pointer: Pointer): boolean;
-    handleDragUpdate(pointer: Pointer): void;
-    handleDragEnd(): void;
-}

package/dist/mjs/tools/SelectionTool/types.mjs

@@ -1,11 +0,0 @@
-export var ResizeMode;
-(function (ResizeMode) {
-    ResizeMode[ResizeMode["Both"] = 0] = "Both";
-    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
-    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
-})(ResizeMode || (ResizeMode = {}));
-export var TransformMode;
-(function (TransformMode) {
-    TransformMode[TransformMode["Snap"] = 0] = "Snap";
-    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
-})(TransformMode || (TransformMode = {}));

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

@@ -1,26 +0,0 @@
-import Editor from '../Editor';
-import { KeyPressEvent, PointerEvt } from '../inputEvents';
-import BaseTool from './BaseTool';
-/**
- * This tool, when enabled, plays a sound representing the color of the portion of the display
- * currently under the cursor. This tool adds a button that can be navigated to with the tab key
- * that enables/disables the tool.
- *
- * This allows the user to explore the content of the display without a working screen.
- */
-export default class SoundUITool extends BaseTool {
-    private editor;
-    private soundFeedback;
-    private toggleButton;
-    private toggleButtonContainer;
-    constructor(editor: Editor, description: string);
-    canReceiveInputInReadOnlyEditor(): boolean;
-    private updateToggleButtonText;
-    setEnabled(enabled: boolean): void;
-    onKeyPress(event: KeyPressEvent): boolean;
-    private lastPointerPos;
-    onPointerDown({ current, allPointers }: PointerEvt): boolean;
-    onPointerMove({ current }: PointerEvt): void;
-    onPointerUp(_event: PointerEvt): void;
-    onGestureCancel(): void;
-}

package/dist/mjs/tools/SoundUITool.mjs

@@ -1,165 +0,0 @@
-import { LineSegment2, Color4 } from '@js-draw/math';
-import  BaseTool  from './BaseTool.mjs';
-class SoundFeedback {
-    constructor() {
-        this.closed = false;
-        // No AudioContext? Exit!
-        if (!window.AudioContext) {
-            console.warn('Accessibility sound UI: Unable to open AudioContext.');
-            this.closed = true;
-            return;
-        }
-        this.ctx = new AudioContext();
-        // Color oscillator and gain
-        this.colorOscHue = this.ctx.createOscillator();
-        this.colorOscValue = this.ctx.createOscillator();
-        this.colorOscSaturation = this.ctx.createOscillator();
-        this.colorOscHue.type = 'triangle';
-        this.colorOscSaturation.type = 'sine';
-        this.colorOscValue.type = 'sawtooth';
-        this.valueGain = this.ctx.createGain();
-        this.colorOscValue.connect(this.valueGain);
-        this.valueGain.gain.setValueAtTime(0.18, this.ctx.currentTime);
-        this.colorGain = this.ctx.createGain();
-        this.colorOscHue.connect(this.colorGain);
-        this.valueGain.connect(this.colorGain);
-        this.colorOscSaturation.connect(this.colorGain);
-        this.colorGain.connect(this.ctx.destination);
-        // Boundary oscillator and gain
-        this.boundaryGain = this.ctx.createGain();
-        this.boundaryOsc = this.ctx.createOscillator();
-        this.boundaryOsc.type = 'sawtooth';
-        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
-        this.boundaryOsc.connect(this.boundaryGain);
-        this.boundaryGain.connect(this.ctx.destination);
-        // Prepare for the first announcement/feedback.
-        this.colorOscHue.start();
-        this.colorOscSaturation.start();
-        this.colorOscValue.start();
-        this.boundaryOsc.start();
-        this.pause();
-    }
-    pause() {
-        if (this.closed)
-            return;
-        this.colorGain.gain.setValueAtTime(0, this.ctx.currentTime);
-        void this.ctx.suspend();
-    }
-    play() {
-        if (this.closed)
-            return;
-        void this.ctx.resume();
-    }
-    setColor(color) {
-        const hsv = color.asHSV();
-        // Choose frequencies that roughly correspond to hue, saturation, and value.
-        const hueFrequency = (-Math.cos(hsv.x / 2)) * 220 + 440;
-        const saturationFrequency = hsv.y * 440 + 220;
-        const valueFrequency = (hsv.z + 0.1) * 440;
-        // Sigmoid with maximum 0.25 * alpha.
-        // Louder for greater value.
-        const gain = 0.25 * Math.min(1, color.a) / (1 + Math.exp(-(hsv.z - 0.5) * 3));
-        this.colorOscHue.frequency.setValueAtTime(hueFrequency, this.ctx.currentTime);
-        this.colorOscSaturation.frequency.setValueAtTime(saturationFrequency, this.ctx.currentTime);
-        this.colorOscValue.frequency.setValueAtTime(valueFrequency, this.ctx.currentTime);
-        this.valueGain.gain.setValueAtTime((1 - hsv.z) * 0.4, this.ctx.currentTime);
-        this.colorGain.gain.setValueAtTime(gain, this.ctx.currentTime);
-    }
-    announceBoundaryCross(boundaryCrossCount) {
-        this.boundaryGain.gain.cancelScheduledValues(this.ctx.currentTime);
-        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
-        this.boundaryGain.gain.linearRampToValueAtTime(0.018, this.ctx.currentTime + 0.1);
-        this.boundaryOsc.frequency.setValueAtTime(440 + Math.atan(boundaryCrossCount / 2) * 100, this.ctx.currentTime);
-        this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
-    }
-    close() {
-        this.ctx.close();
-        this.closed = true;
-    }
-}
-/**
- * This tool, when enabled, plays a sound representing the color of the portion of the display
- * currently under the cursor. This tool adds a button that can be navigated to with the tab key
- * that enables/disables the tool.
- *
- * This allows the user to explore the content of the display without a working screen.
- */
-export default class SoundUITool extends BaseTool {
-    constructor(editor, description) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.soundFeedback = null;
-        // Create a screen-reader-usable method of toggling the tool:
-        this.toggleButtonContainer = document.createElement('div');
-        this.toggleButtonContainer.classList.add('js-draw-sound-ui-toggle');
-        this.toggleButton = document.createElement('button');
-        this.toggleButton.onclick = () => {
-            this.setEnabled(!this.isEnabled());
-        };
-        this.toggleButtonContainer.appendChild(this.toggleButton);
-        this.updateToggleButtonText();
-        editor.createHTMLOverlay(this.toggleButtonContainer);
-    }
-    canReceiveInputInReadOnlyEditor() {
-        return true;
-    }
-    updateToggleButtonText() {
-        const containerEnabledClass = 'sound-ui-tool-enabled';
-        if (this.isEnabled()) {
-            this.toggleButton.innerText = this.editor.localization.disableAccessibilityExploreTool;
-            this.toggleButtonContainer.classList.add(containerEnabledClass);
-        }
-        else {
-            this.toggleButton.innerText = this.editor.localization.enableAccessibilityExploreTool;
-            this.toggleButtonContainer.classList.remove(containerEnabledClass);
-        }
-    }
-    setEnabled(enabled) {
-        super.setEnabled(enabled);
-        if (!this.isEnabled()) {
-            this.soundFeedback?.close();
-            this.soundFeedback = null;
-        }
-        else {
-            this.editor.announceForAccessibility(this.editor.localization.soundExplorerUsageAnnouncement);
-        }
-        this.updateToggleButtonText();
-    }
-    onKeyPress(event) {
-        if (event.code === 'Escape') {
-            this.setEnabled(false);
-            return true;
-        }
-        return false;
-    }
-    onPointerDown({ current, allPointers }) {
-        if (!this.soundFeedback) {
-            this.soundFeedback = new SoundFeedback();
-        }
-        // Allow two-finger gestures to move the screen.
-        if (allPointers.length >= 2) {
-            return false;
-        }
-        // Accept multiple cursors -- some screen readers require multiple (touch) pointers to interact with
-        // an image instead of using the built-in navigation features.
-        this.soundFeedback?.play();
-        this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
-        this.lastPointerPos = current.canvasPos;
-        return true;
-    }
-    onPointerMove({ current }) {
-        this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
-        const pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
-        const collisions = this.editor.image.getElementsIntersectingRegion(pointerMotionLine.bbox).filter(component => component.intersects(pointerMotionLine));
-        this.lastPointerPos = current.canvasPos;
-        if (collisions.length > 0) {
-            this.soundFeedback?.announceBoundaryCross(collisions.length);
-        }
-    }
-    onPointerUp(_event) {
-        this.soundFeedback?.pause();
-    }
-    onGestureCancel() {
-        this.soundFeedback?.pause();
-    }
-}

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

@@ -1,36 +0,0 @@
-import Editor from '../Editor';
-import { Color4 } from '@js-draw/math';
-import { PointerEvt } from '../inputEvents';
-import BaseTool from './BaseTool';
-import { ToolLocalization } from './localization';
-import TextRenderingStyle from '../rendering/TextRenderingStyle';
-import { MutableReactiveValue } from '../util/ReactiveValue';
-export default class TextTool extends BaseTool {
-    private editor;
-    private localizationTable;
-    private textStyleValue;
-    private textStyle;
-    private textEditOverlay;
-    private textInputElem;
-    private textTargetPosition;
-    private textMeasuringCtx;
-    private textRotation;
-    private textScale;
-    private removeExistingCommand;
-    constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
-    private initTextMeasuringCanvas;
-    private getTextAscent;
-    private flushInput;
-    private getTextScaleMatrix;
-    private updateTextInput;
-    private startTextInput;
-    setEnabled(enabled: boolean): void;
-    onPointerDown({ current, allPointers }: PointerEvt): boolean;
-    onGestureCancel(): void;
-    setFontFamily(fontFamily: string): void;
-    setColor(color: Color4): void;
-    setFontSize(size: number): void;
-    getTextStyle(): TextRenderingStyle;
-    getStyleValue(): MutableReactiveValue<TextRenderingStyle>;
-    private setTextStyle;
-}