js-draw 0.25.0 → 1.0.0

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

@@ -1,104 +1,97 @@
-import  Mat33  from '../../math/Mat33.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
+import { Mat33, Vec2 } from '@js-draw/math';
 import  Viewport  from '../../Viewport.mjs';
 import  { ResizeMode }  from './types.mjs';
-var DragTransformer = /** @class */ (function () {
-    function DragTransformer(editor, selection) {
+export class DragTransformer {
+    constructor(editor, selection) {
         this.editor = editor;
         this.selection = selection;
     }
-    DragTransformer.prototype.onDragStart = function (startPoint) {
+    onDragStart(startPoint) {
         this.selection.setTransform(Mat33.identity);
         this.dragStartPoint = startPoint;
-    };
-    DragTransformer.prototype.onDragUpdate = function (canvasPos) {
-        var delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+    }
+    onDragUpdate(canvasPos) {
+        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
         this.selection.setTransform(Mat33.translation(delta));
-    };
-    DragTransformer.prototype.onDragEnd = function () {
+    }
+    onDragEnd() {
         this.selection.finalizeTransform();
-    };
-    return DragTransformer;
-}());
-export { DragTransformer };
-var ResizeTransformer = /** @class */ (function () {
-    function ResizeTransformer(editor, selection) {
+    }
+}
+export class ResizeTransformer {
+    constructor(editor, selection) {
         this.editor = editor;
         this.selection = selection;
         this.mode = ResizeMode.Both;
     }
-    ResizeTransformer.prototype.onDragStart = function (startPoint, mode) {
+    onDragStart(startPoint, mode) {
         this.selection.setTransform(Mat33.identity);
         this.mode = mode;
         this.dragStartPoint = startPoint;
-    };
-    ResizeTransformer.prototype.onDragUpdate = function (canvasPos) {
-        var canvasDelta = canvasPos.minus(this.dragStartPoint);
-        var origWidth = this.selection.preTransformRegion.width;
-        var origHeight = this.selection.preTransformRegion.height;
-        var scale = Vec2.of(1, 1);
+    }
+    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) {
-            var newWidth = origWidth + canvasDelta.x;
+            const newWidth = origWidth + canvasDelta.x;
             scale = Vec2.of(newWidth / origWidth, scale.y);
         }
         if (this.mode === ResizeMode.VerticalOnly) {
-            var newHeight = origHeight + canvasDelta.y;
+            const newHeight = origHeight + canvasDelta.y;
             scale = Vec2.of(scale.x, newHeight / origHeight);
         }
         if (this.mode === ResizeMode.Both) {
-            var delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
-            var newWidth = origWidth + delta;
+            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(function (component) { return Viewport.roundScaleRatio(component, 2); });
+        scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
         if (scale.x !== 0 && scale.y !== 0) {
-            var origin_1 = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
-            this.selection.setTransform(Mat33.scaling2D(scale, origin_1));
+            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            this.selection.setTransform(Mat33.scaling2D(scale, origin));
         }
-    };
-    ResizeTransformer.prototype.onDragEnd = function () {
+    }
+    onDragEnd() {
         this.selection.finalizeTransform();
-    };
-    return ResizeTransformer;
-}());
-export { ResizeTransformer };
-var RotateTransformer = /** @class */ (function () {
-    function RotateTransformer(editor, selection) {
+    }
+}
+export class RotateTransformer {
+    constructor(editor, selection) {
         this.editor = editor;
         this.selection = selection;
         this.startAngle = 0;
     }
-    RotateTransformer.prototype.getAngle = function (canvasPoint) {
-        var selectionCenter = this.selection.preTransformRegion.center;
-        var offset = canvasPoint.minus(selectionCenter);
+    getAngle(canvasPoint) {
+        const selectionCenter = this.selection.preTransformRegion.center;
+        const offset = canvasPoint.minus(selectionCenter);
         return offset.angle();
-    };
-    RotateTransformer.prototype.roundAngle = function (angle) {
+    }
+    roundAngle(angle) {
         // Round angles to the nearest 16th of a turn
-        var roundingFactor = 16 / 2 / Math.PI;
+        const roundingFactor = 16 / 2 / Math.PI;
         return Math.round(angle * roundingFactor) / roundingFactor;
-    };
-    RotateTransformer.prototype.onDragStart = function (startPoint) {
+    }
+    onDragStart(startPoint) {
         this.selection.setTransform(Mat33.identity);
         this.startAngle = this.getAngle(startPoint);
-    };
-    RotateTransformer.prototype.onDragUpdate = function (canvasPos) {
-        var targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+    }
+    onDragUpdate(canvasPos) {
+        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
         // Transform in canvas space
-        var canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
-        var unrounded = Mat33.zRotation(targetRotation);
-        var roundedRotationTransform = unrounded.mapEntries(function (entry) { return Viewport.roundScaleRatio(entry); });
-        var fullRoundedTransform = Mat33
+        const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
+        const unrounded = Mat33.zRotation(targetRotation);
+        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);
-    };
-    RotateTransformer.prototype.onDragEnd = function () {
+    }
+    onDragEnd() {
         this.selection.finalizeTransform();
-    };
-    return RotateTransformer;
-}());
-export { RotateTransformer };
+    }
+}

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

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import { PointerEvt } from '../types';
+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
@@ -16,6 +16,7 @@ export default class SoundUITool extends BaseTool {
     constructor(editor: Editor, description: string);
     private updateToggleButtonText;
     setEnabled(enabled: boolean): void;
+    onKeyPress(event: KeyPressEvent): boolean;
     private lastPointerPos;
     onPointerDown({ current, allPointers }: PointerEvt): boolean;
     onPointerMove({ current }: PointerEvt): void;

package/dist/mjs/tools/SoundUITool.mjs

@@ -1,23 +1,7 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import  Color4  from '../Color4.mjs';
-import  LineSegment2  from '../math/shapes/LineSegment2.mjs';
+import { LineSegment2, Color4 } from '@js-draw/math';
 import  BaseTool  from './BaseTool.mjs';
-var SoundFeedback = /** @class */ (function () {
-    function SoundFeedback() {
+class SoundFeedback {
+    constructor() {
         this.closed = false;
         // No AudioContext? Exit!
         if (!window.AudioContext) {
@@ -55,45 +39,44 @@ var SoundFeedback = /** @class */ (function () {
         this.boundaryOsc.start();
         this.pause();
     }
-    SoundFeedback.prototype.pause = function () {
+    pause() {
         if (this.closed)
             return;
         this.colorGain.gain.setValueAtTime(0, this.ctx.currentTime);
         void this.ctx.suspend();
-    };
-    SoundFeedback.prototype.play = function () {
+    }
+    play() {
         if (this.closed)
             return;
         void this.ctx.resume();
-    };
-    SoundFeedback.prototype.setColor = function (color) {
-        var hsv = color.asHSV();
+    }
+    setColor(color) {
+        const hsv = color.asHSV();
         // Choose frequencies that roughly correspond to hue, saturation, and value.
-        var hueFrequency = (-Math.cos(hsv.x / 2)) * 220 + 440;
-        var saturationFrequency = hsv.y * 440 + 220;
-        var valueFrequency = (hsv.z + 0.1) * 440;
+        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.
-        var gain = 0.25 * Math.min(1, color.a) / (1 + Math.exp(-(hsv.z - 0.5) * 3));
+        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);
-    };
-    SoundFeedback.prototype.announceBoundaryCross = function (boundaryCrossCount) {
+    }
+    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);
-    };
-    SoundFeedback.prototype.close = function () {
+    }
+    close() {
         this.ctx.close();
         this.closed = true;
-    };
-    return SoundFeedback;
-}());
+    }
+}
 /**
  * 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
@@ -101,26 +84,24 @@ var SoundFeedback = /** @class */ (function () {
  *
  * This allows the user to explore the content of the display without a working screen.
  */
-var SoundUITool = /** @class */ (function (_super) {
-    __extends(SoundUITool, _super);
-    function SoundUITool(editor, description) {
-        var _this = _super.call(this, editor.notifier, description) || this;
-        _this.editor = editor;
-        _this.soundFeedback = null;
+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 = function () {
-            _this.setEnabled(!_this.isEnabled());
+        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);
-        return _this;
+        this.toggleButtonContainer.appendChild(this.toggleButton);
+        this.updateToggleButtonText();
+        editor.createHTMLOverlay(this.toggleButtonContainer);
     }
-    SoundUITool.prototype.updateToggleButtonText = function () {
-        var containerEnabledClass = 'sound-ui-tool-enabled';
+    updateToggleButtonText() {
+        const containerEnabledClass = 'sound-ui-tool-enabled';
         if (this.isEnabled()) {
             this.toggleButton.innerText = this.editor.localization.disableAccessibilityExploreTool;
             this.toggleButtonContainer.classList.add(containerEnabledClass);
@@ -129,19 +110,26 @@ var SoundUITool = /** @class */ (function (_super) {
             this.toggleButton.innerText = this.editor.localization.enableAccessibilityExploreTool;
             this.toggleButtonContainer.classList.remove(containerEnabledClass);
         }
-    };
-    SoundUITool.prototype.setEnabled = function (enabled) {
-        var _a;
-        _super.prototype.setEnabled.call(this, enabled);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
         if (!enabled) {
-            (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.close();
+            this.soundFeedback?.close();
             this.soundFeedback = null;
         }
+        else {
+            this.editor.announceForAccessibility(this.editor.localization.soundExplorerUsageAnnouncement);
+        }
         this.updateToggleButtonText();
-    };
-    SoundUITool.prototype.onPointerDown = function (_a) {
-        var _b, _c, _d;
-        var current = _a.current, allPointers = _a.allPointers;
+    }
+    onKeyPress(event) {
+        if (event.code === 'Escape') {
+            this.setEnabled(false);
+            return true;
+        }
+        return false;
+    }
+    onPointerDown({ current, allPointers }) {
         if (!this.soundFeedback) {
             this.soundFeedback = new SoundFeedback();
         }
@@ -151,30 +139,24 @@ var SoundUITool = /** @class */ (function (_super) {
         }
         // Accept multiple cursors -- some screen readers require multiple (touch) pointers to interact with
         // an image instead of using the built-in navigation features.
-        (_b = this.soundFeedback) === null || _b === void 0 ? void 0 : _b.play();
-        (_c = this.soundFeedback) === null || _c === void 0 ? void 0 : _c.setColor((_d = this.editor.display.getColorAt(current.screenPos)) !== null && _d !== void 0 ? _d : Color4.black);
+        this.soundFeedback?.play();
+        this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
         this.lastPointerPos = current.canvasPos;
         return true;
-    };
-    SoundUITool.prototype.onPointerMove = function (_a) {
-        var _b, _c, _d;
-        var current = _a.current;
-        (_b = this.soundFeedback) === null || _b === void 0 ? void 0 : _b.setColor((_c = this.editor.display.getColorAt(current.screenPos)) !== null && _c !== void 0 ? _c : Color4.black);
-        var pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
-        var collisions = this.editor.image.getElementsIntersectingRegion(pointerMotionLine.bbox).filter(function (component) { return component.intersects(pointerMotionLine); });
+    }
+    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) {
-            (_d = this.soundFeedback) === null || _d === void 0 ? void 0 : _d.announceBoundaryCross(collisions.length);
+            this.soundFeedback?.announceBoundaryCross(collisions.length);
         }
-    };
-    SoundUITool.prototype.onPointerUp = function (_event) {
-        var _a;
-        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
-    };
-    SoundUITool.prototype.onGestureCancel = function () {
-        var _a;
-        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
-    };
-    return SoundUITool;
-}(BaseTool));
-export default SoundUITool;
+    }
+    onPointerUp(_event) {
+        this.soundFeedback?.pause();
+    }
+    onGestureCancel() {
+        this.soundFeedback?.pause();
+    }
+}

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

@@ -1,12 +1,14 @@
-import Color4 from '../Color4';
 import Editor from '../Editor';
-import { PointerEvt } from '../types';
+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;
@@ -25,10 +27,10 @@ export default class TextTool extends BaseTool {
     setEnabled(enabled: boolean): void;
     onPointerDown({ current, allPointers }: PointerEvt): boolean;
     onGestureCancel(): void;
-    private dispatchUpdateEvent;
     setFontFamily(fontFamily: string): void;
     setColor(color: Color4): void;
     setFontSize(size: number): void;
     getTextStyle(): TextRenderingStyle;
+    getStyleValue(): MutableReactiveValue<TextRenderingStyle>;
     private setTextStyle;
 }