js-draw 0.18.2 → 0.20.0

package/dist/mjs/src/rendering/lib.d.ts

@@ -3,3 +3,5 @@ export { default as DummyRenderer } from './renderers/DummyRenderer';
 export { default as SVGRenderer } from './renderers/SVGRenderer';
 export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display, RenderingMode } from './Display';
+export { default as TextRenderingStyle } from './TextRenderingStyle';
+export { default as RenderingStyle } from './RenderingStyle';

package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts

@@ -6,7 +6,7 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];
@@ -33,7 +33,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
-    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+    abstract drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     abstract drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;

package/dist/mjs/src/rendering/renderers/CanvasRenderer.d.ts

@@ -4,7 +4,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
@@ -53,7 +53,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
-    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip?: boolean): void;

package/dist/mjs/src/rendering/renderers/CanvasRenderer.mjs

@@ -186,14 +186,16 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     endObject() {
+        // Cache this.objectLevel — it may be decremented by super.endObject.
+        const objectLevel = this.objectLevel;
+        this.currentObjectBBox = null;
+        super.endObject();
         if (!this.ignoringObject && this.clipLevels.length > 0) {
-            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+            if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
                 this.ctx.restore();
                 this.clipLevels.pop();
             }
         }
-        this.currentObjectBBox = null;
-        super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
             this.ignoreObjectsAboveLevel = null;

package/dist/mjs/src/rendering/renderers/DummyRenderer.d.ts

@@ -4,7 +4,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
@@ -25,7 +25,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
-    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;

package/dist/mjs/src/rendering/renderers/SVGRenderer.d.ts

@@ -4,7 +4,7 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
 /**
@@ -36,7 +36,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private textContainer;
     private textContainerTransform;
     private textParentStyle;
-    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;

package/dist/mjs/src/rendering/renderers/SVGRenderer.mjs

@@ -3,6 +3,7 @@ import  Path  from '../../math/Path.mjs';
 import  { toRoundedString }  from '../../math/rounding.mjs';
 import  { Vec2 }  from '../../math/Vec2.mjs';
 import  { svgAttributesDataKey, svgStyleAttributesDataKey }  from '../../SVGLoader.mjs';
+import  { stylesEqual }  from '../RenderingStyle.mjs';
 import  AbstractRenderer  from './AbstractRenderer.mjs';
 export const renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -108,11 +109,10 @@ export default class SVGRenderer extends AbstractRenderer {
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     drawPath(pathSpec) {
-        var _a;
         const style = pathSpec.style;
         const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
-        if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
+        if (this.lastPathString.length === 0 || !this.lastPathStyle || !stylesEqual(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -226,7 +226,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.objectElems = [];
     }
     endObject(loaderData, elemClassNames) {
-        var _a, _b;
+        var _a;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -248,9 +248,18 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         // Add class names to the object, if given.
-        if (elemClassNames) {
-            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
-                elem.classList.add(...elemClassNames);
+        if (elemClassNames && this.objectElems) {
+            if (this.objectElems.length === 1) {
+                this.objectElems[0].classList.add(...elemClassNames);
+            }
+            else {
+                const wrapper = document.createElementNS(svgNameSpace, 'g');
+                wrapper.classList.add(...elemClassNames);
+                for (const elem of this.objectElems) {
+                    elem.remove();
+                    wrapper.appendChild(elem);
+                }
+                this.elem.appendChild(wrapper);
             }
         }
     }

package/dist/mjs/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -4,7 +4,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
@@ -22,7 +22,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     protected moveTo(_point: Vec3): void;
     protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
     protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
-    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     isTooSmallToRender(rect: Rect2): boolean;
     drawPoints(..._points: Vec3[]): void;

package/dist/mjs/src/toolbar/IconProvider.d.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import TextStyle from '../rendering/TextRenderingStyle';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import Pen from '../tools/Pen';
 export type IconType = HTMLImageElement | SVGElement;
 /**
@@ -47,7 +47,7 @@ export default class IconProvider {
     makeZoomIcon(): IconType;
     makeRotationLockIcon(): IconType;
     makeInsertImageIcon(): IconType;
-    makeTextIcon(textStyle: TextStyle): IconType;
+    makeTextIcon(textStyle: TextRenderingStyle): IconType;
     makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;

package/dist/mjs/src/toolbar/localization.d.ts

@@ -14,7 +14,7 @@ export interface ToolbarLocalization {
     submit: string;
     freehandPen: string;
     pressureSensitiveFreehandPen: string;
-    selectObjectType: string;
+    selectPenType: string;
     colorLabel: string;
     pen: string;
     eraser: string;
@@ -37,6 +37,7 @@ export interface ToolbarLocalization {
     backgroundColor: string;
     imageWidthOption: string;
     imageHeightOption: string;
+    useGridOption: string;
     toggleOverflow: string;
     errorImageHasZeroSize: string;
     dropdownShown: (toolName: string) => string;

package/dist/mjs/src/toolbar/localization.mjs

@@ -20,14 +20,15 @@ export const defaultToolbarLocalization = {
     duplicateSelection: 'Duplicate selection',
     undo: 'Undo',
     redo: 'Redo',
-    selectObjectType: 'Object type: ',
+    selectPenType: 'Pen type: ',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
-    documentProperties: 'Document',
+    documentProperties: 'Page',
     backgroundColor: 'Background Color: ',
     imageWidthOption: 'Width: ',
     imageHeightOption: 'Height: ',
+    useGridOption: 'Grid: ',
     toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',

package/dist/mjs/src/toolbar/widgets/BaseWidget.mjs

@@ -122,7 +122,7 @@ export default class BaseWidget {
     }
     // Add a listener that is triggered when a key is pressed.
     // Listeners will fire regardless of whether this widget is selected and require that
-    // {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+    // {@link Editor.toolController} to have an enabled {@link ToolbarShortcutHandler} tool.
     onKeyPress(_event) {
         return false;
     }

package/dist/mjs/src/toolbar/widgets/DocumentPropertiesWidget.d.ts

@@ -12,6 +12,11 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     private updateDropdown;
     private setBackgroundColor;
     private getBackgroundColor;
+    private removeBackgroundComponents;
+    /** Replace existing background components with a background of the given type. */
+    private setBackgroundType;
+    /** Returns the type of the topmost background component */
+    private getBackgroundType;
     private updateImportExportRectSize;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;

package/dist/mjs/src/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -1,3 +1,6 @@
+import  Erase  from '../../commands/Erase.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  BackgroundComponent, { BackgroundType }  from '../../components/BackgroundComponent.mjs';
 import  { EditorImageEventType }  from '../../EditorImage.mjs';
 import  Rect2  from '../../math/Rect2.mjs';
 import  { EditorEventType }  from '../../types.mjs';
@@ -6,7 +9,7 @@ import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 export default class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
-        super(editor, 'zoom-widget', localizationTable);
+        super(editor, 'document-properties-widget', localizationTable);
         this.updateDropdownContent = () => { };
         this.dropdownUpdateQueued = false;
         // Make it possible to open the dropdown, even if this widget isn't selected.
@@ -46,6 +49,33 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     getBackgroundColor() {
         return this.editor.estimateBackgroundColor();
     }
+    removeBackgroundComponents() {
+        const previousBackgrounds = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
+            if (component instanceof BackgroundComponent) {
+                previousBackgrounds.push(component);
+            }
+        }
+        return new Erase(previousBackgrounds);
+    }
+    /** Replace existing background components with a background of the given type. */
+    setBackgroundType(backgroundType) {
+        const prevBackgroundColor = this.editor.estimateBackgroundColor();
+        const newBackground = new BackgroundComponent(backgroundType, prevBackgroundColor);
+        const addBackgroundCommand = this.editor.image.addElement(newBackground);
+        return uniteCommands([this.removeBackgroundComponents(), addBackgroundCommand]);
+    }
+    /** Returns the type of the topmost background component */
+    getBackgroundType() {
+        const backgroundComponents = this.editor.image.getBackgroundComponents();
+        for (let i = backgroundComponents.length - 1; i >= 0; i--) {
+            const component = backgroundComponents[i];
+            if (component instanceof BackgroundComponent) {
+                return component.getBackgroundType();
+            }
+        }
+        return BackgroundType.None;
+    }
     updateImportExportRectSize(size) {
         const filterDimension = (dim) => {
             if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
@@ -74,6 +104,27 @@ export default class DocumentPropertiesWidget extends BaseWidget {
         colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
         backgroundColorLabel.htmlFor = colorInput.id;
         backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        const useGridRow = document.createElement('div');
+        const useGridLabel = document.createElement('label');
+        const useGridCheckbox = document.createElement('input');
+        useGridCheckbox.id = `${toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
+        useGridLabel.htmlFor = useGridCheckbox.id;
+        useGridCheckbox.type = 'checkbox';
+        useGridLabel.innerText = this.localizationTable.useGridOption;
+        useGridCheckbox.oninput = () => {
+            const prevBackgroundType = this.getBackgroundType();
+            const wasGrid = prevBackgroundType === BackgroundType.Grid;
+            if (wasGrid === useGridCheckbox.checked) {
+                // Already the requested background type.
+                return;
+            }
+            let newBackgroundType = BackgroundType.SolidColor;
+            if (useGridCheckbox.checked) {
+                newBackgroundType = BackgroundType.Grid;
+            }
+            this.editor.dispatch(this.setBackgroundType(newBackgroundType));
+        };
+        useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
         const addDimensionRow = (labelContent, onChange) => {
             const row = document.createElement('div');
             const label = document.createElement('label');
@@ -110,9 +161,10 @@ export default class DocumentPropertiesWidget extends BaseWidget {
             const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
+            useGridCheckbox.checked = this.getBackgroundType() === BackgroundType.Grid;
         };
         this.updateDropdownContent();
-        container.replaceChildren(backgroundColorRow, imageWidthRow.element, imageHeightRow.element);
+        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element);
         dropdown.replaceChildren(container);
         return true;
     }

package/dist/mjs/src/toolbar/widgets/PenToolWidget.mjs

@@ -110,7 +110,7 @@ export default class PenToolWidget extends BaseToolWidget {
         objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
         thicknessLabel.innerText = this.localizationTable.thicknessLabel;
         thicknessLabel.setAttribute('for', thicknessInput.id);
-        objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+        objectSelectLabel.innerText = this.localizationTable.selectPenType;
         objectSelectLabel.setAttribute('for', objectTypeSelect.id);
         // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
         const inverseThicknessInputFn = (t) => Math.log10(t);

package/dist/mjs/src/tools/FindTool.mjs

@@ -1,4 +1,4 @@
-// Displays a find dialog that allows the user to search for and focus text. 
+// Displays a find dialog that allows the user to search for and focus text.
 //
 // @packageDocumentation
 import  TextComponent  from '../components/TextComponent.mjs';

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

@@ -0,0 +1,24 @@
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+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);
+    private updateToggleButtonText;
+    setEnabled(enabled: boolean): void;
+    private lastPointerPos;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+}

package/dist/mjs/src/tools/SoundUITool.mjs

@@ -0,0 +1,158 @@
+import  Color4  from '../Color4.mjs';
+import  LineSegment2  from '../math/LineSegment2.mjs';
+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);
+    }
+    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) {
+        var _a;
+        super.setEnabled(enabled);
+        if (!enabled) {
+            (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.close();
+            this.soundFeedback = null;
+        }
+        this.updateToggleButtonText();
+    }
+    onPointerDown({ current, allPointers }) {
+        var _a, _b, _c;
+        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.
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.play();
+        (_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);
+        this.lastPointerPos = current.canvasPos;
+        return true;
+    }
+    onPointerMove({ current }) {
+        var _a, _b, _c;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.setColor((_b = this.editor.display.getColorAt(current.screenPos)) !== null && _b !== void 0 ? _b : 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) {
+            (_c = this.soundFeedback) === null || _c === void 0 ? void 0 : _c.announceBoundaryCross(collisions.length);
+        }
+    }
+    onPointerUp(_event) {
+        var _a;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    onGestureCancel() {
+        var _a;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+}

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

@@ -3,7 +3,7 @@ import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
-import TextStyle from '../rendering/TextRenderingStyle';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
@@ -28,6 +28,6 @@ export default class TextTool extends BaseTool {
     setFontFamily(fontFamily: string): void;
     setColor(color: Color4): void;
     setFontSize(size: number): void;
-    getTextStyle(): TextStyle;
+    getTextStyle(): TextRenderingStyle;
     private setTextStyle;
 }

package/dist/mjs/src/tools/ToolController.mjs

@@ -14,6 +14,7 @@ import  ToolbarShortcutHandler  from './ToolbarShortcutHandler.mjs';
 import  { makePressureSensitiveFreehandLineBuilder }  from '../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
 import  FindTool  from './FindTool.mjs';
 import  SelectAllShortcutHandler  from './SelectionTool/SelectAllShortcutHandler.mjs';
+import  SoundUITool  from './SoundUITool.mjs';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -32,10 +33,14 @@ export default class ToolController {
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
-            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
+            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
         ];
+        // Accessibility tools
+        const soundExplorer = new SoundUITool(editor, localization.soundExplorer);
+        soundExplorer.setEnabled(false);
         this.tools = [
             new PipetteTool(editor, localization.pipetteTool),
+            soundExplorer,
             panZoomTool,
             ...primaryTools,
             keyboardPanZoomTool,

package/dist/mjs/src/tools/lib.d.ts

@@ -13,4 +13,5 @@ export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
+export { default as SoundUITool } from './SoundUITool';
 export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/mjs/src/tools/lib.mjs

@@ -13,4 +13,5 @@ export  { default as SelectionTool }  from './SelectionTool/SelectionTool.mjs';
 export  { default as SelectAllShortcutHandler }  from './SelectionTool/SelectAllShortcutHandler.mjs';
 export  { default as EraserTool }  from './Eraser.mjs';
 export  { default as PasteHandler }  from './PasteHandler.mjs';
+export  { default as SoundUITool }  from './SoundUITool.mjs';
 export  { default as ToolbarShortcutHandler }  from './ToolbarShortcutHandler.mjs';

package/dist/mjs/src/tools/localization.d.ts

@@ -13,6 +13,9 @@ export interface ToolLocalization {
     enterTextToInsert: string;
     changeTool: string;
     pasteHandler: string;
+    soundExplorer: string;
+    disableAccessibilityExploreTool: string;
+    enableAccessibilityExploreTool: string;
     findLabel: string;
     toNextMatch: string;
     closeFindDialog: string;

package/dist/mjs/src/tools/localization.mjs

@@ -13,6 +13,9 @@ export const defaultToolLocalization = {
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',
     pasteHandler: 'Copy paste handler',
+    soundExplorer: 'Sound-based image exploration',
+    disableAccessibilityExploreTool: 'Disable sound-based exploration',
+    enableAccessibilityExploreTool: 'Enable sound-based exploration',
     findLabel: 'Find',
     toNextMatch: 'Next',
     closeFindDialog: 'Close',

package/jest.config.js

@@ -21,7 +21,7 @@ const config = {
 		'\\.(css|lessc)': '<rootDir>/__mocks__/styleMock.js',
 		'@melloware/coloris': '<rootDir>/__mocks__/coloris.ts',
 	},
-	
+
 	testEnvironment: 'jsdom',
 	setupFilesAfterEnv: [ '<rootDir>/src/testing/beforeEachFile.ts' ],
 };