js-draw 1.20.3 → 1.21.2

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

@@ -1,155 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RotateTransformer = exports.ResizeTransformer = exports.DragTransformer = void 0;
-const math_1 = require("@js-draw/math");
-const Viewport_1 = __importDefault(require("../../Viewport"));
-const types_1 = require("./types");
-class DragTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-    }
-    onDragStart(startPoint) {
-        this.selection.setTransform(math_1.Mat33.identity);
-        this.dragStartPoint = startPoint;
-    }
-    onDragUpdate(canvasPos) {
-        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
-        this.selection.setTransform(math_1.Mat33.translation(delta));
-    }
-    onDragEnd() {
-        return this.selection.finalizeTransform();
-    }
-}
-exports.DragTransformer = DragTransformer;
-class ResizeTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-        this.mode = types_1.ResizeMode.Both;
-    }
-    onDragStart(startPoint, mode) {
-        this.selection.setTransform(math_1.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 = math_1.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 = math_1.Vec2.of(1, 1);
-        if (this.mode === types_1.ResizeMode.HorizontalOnly) {
-            const newWidth = origWidth + canvasDelta.x * this.scaleRate.x;
-            scale = math_1.Vec2.of(newWidth / origWidth, scale.y);
-        }
-        if (this.mode === types_1.ResizeMode.VerticalOnly) {
-            const newHeight = origHeight + canvasDelta.y * this.scaleRate.y;
-            scale = math_1.Vec2.of(scale.x, newHeight / origHeight);
-        }
-        if (this.mode === types_1.ResizeMode.Both) {
-            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
-            const newWidth = origWidth + delta;
-            scale = math_1.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_1.default.roundScaleRatio(component, 2));
-        if (scale.x !== 0 && scale.y !== 0) {
-            const origin = this.editor.viewport.roundPoint(this.transformOrigin);
-            this.selection.setTransform(math_1.Mat33.scaling2D(scale, origin));
-        }
-    }
-    onDragEnd() {
-        return this.selection.finalizeTransform();
-    }
-}
-exports.ResizeTransformer = ResizeTransformer;
-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(math_1.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 = math_1.Mat33.zRotation(angle);
-        const roundedRotationTransform = unrounded.mapEntries(entry => Viewport_1.default.roundScaleRatio(entry));
-        const fullRoundedTransform = math_1.Mat33
-            .translation(canvasSelCenter)
-            .rightMul(roundedRotationTransform)
-            .rightMul(math_1.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();
-    }
-}
-exports.RotateTransformer = RotateTransformer;

package/dist/cjs/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/cjs/tools/SelectionTool/types.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransformMode = exports.ResizeMode = void 0;
-var ResizeMode;
-(function (ResizeMode) {
-    ResizeMode[ResizeMode["Both"] = 0] = "Both";
-    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
-    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
-})(ResizeMode || (exports.ResizeMode = ResizeMode = {}));
-var TransformMode;
-(function (TransformMode) {
-    TransformMode[TransformMode["Snap"] = 0] = "Snap";
-    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
-})(TransformMode || (exports.TransformMode = TransformMode = {}));

package/dist/cjs/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/cjs/tools/SoundUITool.js

@@ -1,171 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const math_1 = require("@js-draw/math");
-const BaseTool_1 = __importDefault(require("./BaseTool"));
-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.
- */
-class SoundUITool extends BaseTool_1.default {
-    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) ?? math_1.Color4.black);
-        this.lastPointerPos = current.canvasPos;
-        return true;
-    }
-    onPointerMove({ current }) {
-        this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? math_1.Color4.black);
-        const pointerMotionLine = new math_1.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();
-    }
-}
-exports.default = SoundUITool;

package/dist/cjs/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;
-}