js-draw 0.18.2 → 0.20.0

package/dist/cjs/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/cjs/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/cjs/src/toolbar/localization.js

@@ -23,14 +23,15 @@ exports.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/cjs/src/toolbar/widgets/BaseWidget.js

@@ -127,7 +127,7 @@ 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/cjs/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/cjs/src/toolbar/widgets/DocumentPropertiesWidget.js

@@ -1,8 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const Erase_1 = __importDefault(require("../../commands/Erase"));
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
+const BackgroundComponent_1 = __importStar(require("../../components/BackgroundComponent"));
 const EditorImage_1 = require("../../EditorImage");
 const Rect2_1 = __importDefault(require("../../math/Rect2"));
 const types_1 = require("../../types");
@@ -11,7 +37,7 @@ const makeColorInput_1 = __importDefault(require("../makeColorInput"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 class DocumentPropertiesWidget extends BaseWidget_1.default {
     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.
@@ -51,6 +77,33 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
     getBackgroundColor() {
         return this.editor.estimateBackgroundColor();
     }
+    removeBackgroundComponents() {
+        const previousBackgrounds = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
+            if (component instanceof BackgroundComponent_1.default) {
+                previousBackgrounds.push(component);
+            }
+        }
+        return new Erase_1.default(previousBackgrounds);
+    }
+    /** Replace existing background components with a background of the given type. */
+    setBackgroundType(backgroundType) {
+        const prevBackgroundColor = this.editor.estimateBackgroundColor();
+        const newBackground = new BackgroundComponent_1.default(backgroundType, prevBackgroundColor);
+        const addBackgroundCommand = this.editor.image.addElement(newBackground);
+        return (0, uniteCommands_1.default)([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_1.default) {
+                return component.getBackgroundType();
+            }
+        }
+        return BackgroundComponent_1.BackgroundType.None;
+    }
     updateImportExportRectSize(size) {
         const filterDimension = (dim) => {
             if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
@@ -79,6 +132,27 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         colorInput.id = `${HTMLToolbar_1.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 = `${HTMLToolbar_1.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 === BackgroundComponent_1.BackgroundType.Grid;
+            if (wasGrid === useGridCheckbox.checked) {
+                // Already the requested background type.
+                return;
+            }
+            let newBackgroundType = BackgroundComponent_1.BackgroundType.SolidColor;
+            if (useGridCheckbox.checked) {
+                newBackgroundType = BackgroundComponent_1.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');
@@ -115,9 +189,10 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
+            useGridCheckbox.checked = this.getBackgroundType() === BackgroundComponent_1.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/cjs/src/toolbar/widgets/PenToolWidget.js

@@ -115,7 +115,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
         objectTypeSelect.id = `${HTMLToolbar_1.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/cjs/src/tools/FindTool.js

@@ -1,5 +1,5 @@
 "use strict";
-// 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
 var __importDefault = (this && this.__importDefault) || function (mod) {

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

@@ -0,0 +1,164 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color4_1 = __importDefault(require("../Color4"));
+const LineSegment2_1 = __importDefault(require("../math/LineSegment2"));
+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);
+    }
+    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_1.default.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_1.default.black);
+        const pointerMotionLine = new LineSegment2_1.default(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();
+    }
+}
+exports.default = SoundUITool;

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

@@ -42,6 +42,7 @@ const ToolbarShortcutHandler_1 = __importDefault(require("./ToolbarShortcutHandl
 const PressureSensitiveFreehandLineBuilder_1 = require("../components/builders/PressureSensitiveFreehandLineBuilder");
 const FindTool_1 = __importDefault(require("./FindTool"));
 const SelectAllShortcutHandler_1 = __importDefault(require("./SelectionTool/SelectAllShortcutHandler"));
+const SoundUITool_1 = __importDefault(require("./SoundUITool"));
 class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -60,10 +61,14 @@ class ToolController {
             new Eraser_1.default(editor, localization.eraserTool),
             new SelectionTool_1.default(editor, localization.selectionTool),
             new TextTool_1.default(editor, localization.textTool, localization),
-            new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
+            new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
         ];
+        // Accessibility tools
+        const soundExplorer = new SoundUITool_1.default(editor, localization.soundExplorer);
+        soundExplorer.setEnabled(false);
         this.tools = [
             new PipetteTool_1.default(editor, localization.pipetteTool),
+            soundExplorer,
             panZoomTool,
             ...primaryTools,
             keyboardPanZoomTool,

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

@@ -6,7 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarShortcutHandler = exports.PasteHandler = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = void 0;
+exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = void 0;
 var BaseTool_1 = require("./BaseTool");
 Object.defineProperty(exports, "BaseTool", { enumerable: true, get: function () { return __importDefault(BaseTool_1).default; } });
 var ToolController_1 = require("./ToolController");
@@ -32,5 +32,7 @@ var Eraser_1 = require("./Eraser");
 Object.defineProperty(exports, "EraserTool", { enumerable: true, get: function () { return __importDefault(Eraser_1).default; } });
 var PasteHandler_1 = require("./PasteHandler");
 Object.defineProperty(exports, "PasteHandler", { enumerable: true, get: function () { return __importDefault(PasteHandler_1).default; } });
+var SoundUITool_1 = require("./SoundUITool");
+Object.defineProperty(exports, "SoundUITool", { enumerable: true, get: function () { return __importDefault(SoundUITool_1).default; } });
 var ToolbarShortcutHandler_1 = require("./ToolbarShortcutHandler");
 Object.defineProperty(exports, "ToolbarShortcutHandler", { enumerable: true, get: function () { return __importDefault(ToolbarShortcutHandler_1).default; } });

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

@@ -16,6 +16,9 @@ exports.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/dist/mjs/src/Color4.d.ts

@@ -1,3 +1,4 @@
+import Vec3 from './math/Vec3';
 export default class Color4 {
     /** Red component. Should be in the range [0, 1]. */
     readonly r: number;
@@ -36,6 +37,13 @@ export default class Color4 {
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
     static average(colors: Color4[]): Color4;
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV(): Vec3;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/mjs/src/Color4.mjs

@@ -1,3 +1,4 @@
+import  Vec3  from './math/Vec3.mjs';
 export default class Color4 {
     constructor(
     /** Red component. Should be in the range [0, 1]. */
@@ -147,6 +148,69 @@ export default class Color4 {
         }
         return new Color4(averageR, averageG, averageB, averageA);
     }
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV() {
+        // Ref: https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        //
+        // HUE:
+        // First, consider the unit cube. Rotate it such that one vertex is at the origin
+        // of a plane and its three neighboring vertices are equidistant from that plane:
+        //
+        //         /\
+        //       /  | \
+        //   2 /    3   \ 1
+        //     \    |   /
+        //       \  | /
+        //   .     \/      .
+        //
+        //        .
+        //
+        // Let z be up and (x, y, 0) be in the plane.
+        //
+        // Label vectors 1,2,3 with R, G, and B, respectively. Let R's projection into the plane
+        // lie along the x axis.
+        //
+        // Because R is a unit vector and R, G, B are equidistant from the plane, they must
+        // form 30-60-90 triangles, which have side lengths proportional to (1, √3, 2)
+        //
+        //       /|
+        //    1/  | (√3)/2
+        //    /   |
+        //      1/2
+        //
+        const minComponent = Math.min(this.r, this.g, this.b);
+        const maxComponent = Math.max(this.r, this.g, this.b);
+        const chroma = maxComponent - minComponent;
+        let hue;
+        // See https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        if (chroma === 0) {
+            hue = 0;
+        }
+        else if (this.r >= this.g && this.r >= this.b) {
+            hue = ((this.g - this.b) / chroma) % 6;
+        }
+        else if (this.g >= this.r && this.g >= this.b) {
+            hue = (this.b - this.r) / chroma + 2;
+        }
+        else {
+            hue = (this.r - this.g) / chroma + 4;
+        }
+        // Convert to degree representation, then to radians.
+        hue *= 60;
+        hue *= Math.PI / 180;
+        // Ensure positivity.
+        if (hue < 0) {
+            hue += Math.PI * 2;
+        }
+        const value = maxComponent;
+        const saturation = value > 0 ? chroma / value : 0;
+        return Vec3.of(hue, saturation, value);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

package/dist/mjs/src/Editor.d.ts

@@ -53,7 +53,7 @@ export interface EditorSettings {
 export declare class Editor {
     private container;
     private renderingRegion;
-    /** Manages drawing surfaces/{@link lib!AbstractRenderer}s. */
+    /** Manages drawing surfaces/{@link AbstractRenderer}s. */
     display: Display;
     /**
      * Handles undo/redo.
@@ -95,7 +95,7 @@ export declare class Editor {
     readonly viewport: Viewport;
     /** @internal */
     readonly localization: EditorLocalization;
-    /** {@link lib!EditorSettings.iconProvider} */
+    /** {@link EditorSettings.iconProvider} */
     readonly icons: IconProvider;
     /**
      * Controls the list of tools. See

package/dist/mjs/src/Editor.mjs

@@ -31,7 +31,7 @@ import  fileToBase64  from './util/fileToBase64.mjs';
 import  uniteCommands  from './commands/uniteCommands.mjs';
 import  SelectionTool  from './tools/SelectionTool/SelectionTool.mjs';
 import  Erase  from './commands/Erase.mjs';
-import  ImageBackground, { BackgroundType }  from './components/ImageBackground.mjs';
+import  BackgroundComponent, { BackgroundType }  from './components/BackgroundComponent.mjs';
 import  sendPenEvent  from './testing/sendPenEvent.mjs';
 /**
  * The main entrypoint for the full editor.
@@ -229,8 +229,8 @@ export class Editor {
             if (evt.ctrlKey || evt.metaKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
-            // Ensure that `pos` is relative to `this.container`
-            const bbox = this.container.getBoundingClientRect();
+            // Ensure that `pos` is relative to `this.renderingRegion`
+            const bbox = this.renderingRegion.getBoundingClientRect();
             const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
@@ -816,7 +816,7 @@ export class Editor {
         // Find a background component, if one exists.
         // Use the last (topmost) background component if there are multiple.
         for (const component of this.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground) {
+            if (component instanceof BackgroundComponent) {
                 background = component;
             }
         }
@@ -829,7 +829,7 @@ export class Editor {
         let background = this.getTopmostBackgroundComponent();
         if (!background) {
             const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
-            background = new ImageBackground(backgroundType, color);
+            background = new BackgroundComponent(backgroundType, color);
             return this.image.addElement(background);
         }
         else {
@@ -844,7 +844,7 @@ export class Editor {
         var _a;
         const backgroundColors = [];
         for (const component of this.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground) {
+            if (component instanceof BackgroundComponent) {
                 backgroundColors.push((_a = component.getStyle().color) !== null && _a !== void 0 ? _a : Color4.transparent);
             }
         }