js-draw 0.23.1 → 0.24.1

package/dist/mjs/src/tools/SelectionTool/SelectionTool.mjs

@@ -1,407 +0,0 @@
-import  Mat33  from '../../math/Mat33.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  { EditorEventType }  from '../../types.mjs';
-import  Viewport  from '../../Viewport.mjs';
-import  BaseTool  from '../BaseTool.mjs';
-import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
-import  Selection  from './Selection.mjs';
-import  TextComponent  from '../../components/TextComponent.mjs';
-export const cssPrefix = 'selection-tool-';
-// Allows users to select/transform portions of the `EditorImage`.
-// With respect to `extend`ing, `SelectionTool` is not stable.
-class SelectionTool extends BaseTool {
-    constructor(editor, description) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.lastEvtTarget = null;
-        this.startPoint = null; // canvas position
-        this.expandingSelectionBox = false;
-        this.shiftKeyPressed = false;
-        this.ctrlKeyPressed = false;
-        this.selectionBoxHandlingEvt = false;
-        this.handleOverlay = document.createElement('div');
-        editor.createHTMLOverlay(this.handleOverlay);
-        this.handleOverlay.style.display = 'none';
-        this.handleOverlay.classList.add('handleOverlay');
-        editor.notifier.on(EditorEventType.ViewportChanged, _data => {
-            var _a;
-            // The selection box could be using the wet ink display if its transformation
-            // hasn't been finalized yet. Clear before updating the UI.
-            this.editor.clearWetInk();
-            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
-        });
-        this.editor.handleKeyEventsFrom(this.handleOverlay);
-        this.editor.handlePointerEventsFrom(this.handleOverlay, (eventName, htmlEvent) => {
-            if (eventName === 'pointerdown') {
-                this.lastEvtTarget = htmlEvent.target;
-            }
-            return true;
-        });
-    }
-    makeSelectionBox(selectionStartPos) {
-        var _a;
-        this.prevSelectionBox = this.selectionBox;
-        this.selectionBox = new Selection(selectionStartPos, this.editor);
-        if (!this.expandingSelectionBox) {
-            // Remove any previous selection rects
-            (_a = this.prevSelectionBox) === null || _a === void 0 ? void 0 : _a.cancelSelection();
-        }
-        this.selectionBox.addTo(this.handleOverlay);
-    }
-    snapSelectionToGrid() {
-        if (!this.selectionBox)
-            throw new Error('No selection to snap!');
-        // Snap the top left corner of what we have selected.
-        const topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
-        const snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
-        const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
-        const oldTransform = this.selectionBox.getTransform();
-        this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDelta)));
-        this.selectionBox.finalizeTransform();
-    }
-    onPointerDown({ allPointers, current }) {
-        const snapToGrid = this.ctrlKeyPressed;
-        if (snapToGrid) {
-            current = current.snappedToGrid(this.editor.viewport);
-        }
-        if (allPointers.length === 1 && current.isPrimary) {
-            this.startPoint = current.canvasPos;
-            let transforming = false;
-            if (this.lastEvtTarget && this.selectionBox) {
-                if (snapToGrid) {
-                    this.snapSelectionToGrid();
-                }
-                const dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
-                if (dragStartResult) {
-                    transforming = true;
-                    this.selectionBoxHandlingEvt = true;
-                    this.expandingSelectionBox = false;
-                }
-            }
-            if (!transforming) {
-                // Shift key: Combine the new and old selection boxes at the end of the gesture.
-                this.expandingSelectionBox = this.shiftKeyPressed;
-                this.makeSelectionBox(current.canvasPos);
-            }
-            return true;
-        }
-        return false;
-    }
-    onPointerMove(event) {
-        if (!this.selectionBox)
-            return;
-        let currentPointer = event.current;
-        if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
-            currentPointer = currentPointer.lockedToXYAxes(this.startPoint, this.editor.viewport);
-        }
-        if (this.ctrlKeyPressed) {
-            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
-        }
-        if (this.selectionBoxHandlingEvt) {
-            this.selectionBox.onDragUpdate(currentPointer);
-        }
-        else {
-            this.selectionBox.setToPoint(currentPointer.canvasPos);
-        }
-    }
-    onSelectionUpdated() {
-        var _a, _b;
-        // Note that the selection has changed
-        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-            kind: EditorEventType.ToolUpdated,
-            tool: this,
-        });
-        const selectedItemCount = (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedItemCount()) !== null && _b !== void 0 ? _b : 0;
-        if (selectedItemCount > 0) {
-            this.editor.announceForAccessibility(this.editor.localization.selectedElements(selectedItemCount));
-            this.zoomToSelection();
-        }
-        else if (this.selectionBox) {
-            this.selectionBox.cancelSelection();
-            this.prevSelectionBox = this.selectionBox;
-            this.selectionBox = null;
-        }
-    }
-    // Called after a gestureCancel and a pointerUp
-    onGestureEnd() {
-        this.lastEvtTarget = null;
-        if (!this.selectionBox)
-            return;
-        if (!this.selectionBoxHandlingEvt) {
-            // Expand/shrink the selection rectangle, if applicable
-            this.selectionBox.resolveToObjects();
-            this.onSelectionUpdated();
-        }
-        else {
-            this.selectionBox.onDragEnd();
-        }
-        this.selectionBoxHandlingEvt = false;
-    }
-    zoomToSelection() {
-        if (this.selectionBox) {
-            const selectionRect = this.selectionBox.region;
-            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
-        }
-    }
-    onPointerUp(event) {
-        if (!this.selectionBox)
-            return;
-        let currentPointer = event.current;
-        if (this.ctrlKeyPressed) {
-            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
-        }
-        this.selectionBox.setToPoint(currentPointer.canvasPos);
-        // Were we expanding the previous selection?
-        if (this.expandingSelectionBox && this.prevSelectionBox) {
-            // If so, finish expanding.
-            this.expandingSelectionBox = false;
-            this.selectionBox.resolveToObjects();
-            this.setSelection([
-                ...this.selectionBox.getSelectedObjects(),
-                ...this.prevSelectionBox.getSelectedObjects(),
-            ]);
-        }
-        else {
-            this.onGestureEnd();
-        }
-    }
-    onGestureCancel() {
-        var _a, _b, _c, _d;
-        if (this.selectionBoxHandlingEvt) {
-            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
-        }
-        else {
-            // Revert to the previous selection, if any.
-            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
-            this.selectionBox = this.prevSelectionBox;
-            (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
-            (_d = this.selectionBox) === null || _d === void 0 ? void 0 : _d.recomputeRegion();
-            this.prevSelectionBox = null;
-        }
-        this.expandingSelectionBox = false;
-    }
-    onKeyPress(event) {
-        if (event.key === 'Control' || event.key === 'Meta') {
-            this.ctrlKeyPressed = true;
-            return true;
-        }
-        if (this.selectionBox && event.ctrlKey && event.key === 'd') {
-            // Handle duplication on key up — we don't want to accidentally duplicate
-            // many times.
-            return true;
-        }
-        else if (event.key === 'a' && event.ctrlKey) {
-            this.setSelection(this.editor.image.getAllElements());
-            return true;
-        }
-        else if (event.ctrlKey) {
-            // Don't transform the selection with, for example, ctrl+i.
-            // Pass it to another tool, if apliccable.
-            return false;
-        }
-        else if (event.key === 'Shift') {
-            this.shiftKeyPressed = true;
-            return true;
-        }
-        let rotationSteps = 0;
-        let xTranslateSteps = 0;
-        let yTranslateSteps = 0;
-        let xScaleSteps = 0;
-        let yScaleSteps = 0;
-        switch (event.key) {
-            case 'a':
-            case 'h':
-            case 'ArrowLeft':
-                xTranslateSteps -= 1;
-                break;
-            case 'd':
-            case 'l':
-            case 'ArrowRight':
-                xTranslateSteps += 1;
-                break;
-            case 'q':
-            case 'k':
-            case 'ArrowUp':
-                yTranslateSteps -= 1;
-                break;
-            case 'e':
-            case 'j':
-            case 'ArrowDown':
-                yTranslateSteps += 1;
-                break;
-            case 'r':
-                rotationSteps += 1;
-                break;
-            case 'R':
-                rotationSteps -= 1;
-                break;
-            case 'i':
-                xScaleSteps -= 1;
-                break;
-            case 'I':
-                xScaleSteps += 1;
-                break;
-            case 'o':
-                yScaleSteps -= 1;
-                break;
-            case 'O':
-                yScaleSteps += 1;
-                break;
-        }
-        let handled = xTranslateSteps !== 0
-            || yTranslateSteps !== 0
-            || rotationSteps !== 0
-            || xScaleSteps !== 0
-            || yScaleSteps !== 0;
-        if (!this.selectionBox) {
-            handled = false;
-        }
-        else if (handled) {
-            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
-            const rotateStepSize = Math.PI / 8;
-            const scaleStepSize = 5 / 4;
-            const region = this.selectionBox.region;
-            const scaleFactor = Vec2.of(Math.pow(scaleStepSize, xScaleSteps), Math.pow(scaleStepSize, yScaleSteps));
-            const rotationMat = Mat33.zRotation(rotationSteps * rotateStepSize);
-            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport.roundScaleRatio(component));
-            const regionCenter = this.editor.viewport.roundPoint(region.center);
-            const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33.translation(regionCenter.times(-1)))).rightMul(Mat33.translation(this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
-            const oldTransform = this.selectionBox.getTransform();
-            this.selectionBox.setTransform(oldTransform.rightMul(transform));
-        }
-        if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
-            this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
-            this.clearSelection();
-            handled = true;
-        }
-        return handled;
-    }
-    onKeyUp(evt) {
-        if (evt.key === 'Control' || evt.key === 'Meta') {
-            this.ctrlKeyPressed = false;
-            return true;
-        }
-        if (evt.key === 'Shift') {
-            this.shiftKeyPressed = false;
-            return true;
-        }
-        else if (evt.ctrlKey) {
-            if (this.selectionBox && evt.key === 'd') {
-                this.selectionBox.duplicateSelectedObjects().then(command => {
-                    this.editor.dispatch(command);
-                });
-                return true;
-            }
-            if (evt.key === 'a' || evt.key === 'r') {
-                // Selected all in onKeyDown. Don't finalizeTransform.
-                return true;
-            }
-        }
-        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
-            this.selectionBox.finalizeTransform();
-            return true;
-        }
-        return false;
-    }
-    onCopy(event) {
-        if (!this.selectionBox) {
-            return false;
-        }
-        const selectedElems = this.selectionBox.getSelectedObjects();
-        const bbox = this.selectionBox.region;
-        if (selectedElems.length === 0) {
-            return false;
-        }
-        const exportViewport = new Viewport(() => { });
-        exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
-        exportViewport.resetTransform(Mat33.translation(bbox.topLeft.times(-1)));
-        const sanitize = true;
-        const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer.fromViewport(exportViewport, sanitize);
-        const text = [];
-        for (const elem of selectedElems) {
-            elem.render(svgRenderer);
-            if (elem instanceof TextComponent) {
-                text.push(elem.getText());
-            }
-        }
-        event.setData('image/svg+xml', svgExportElem.outerHTML);
-        event.setData('text/html', svgExportElem.outerHTML);
-        if (text.length > 0) {
-            event.setData('text/plain', text.join('\n'));
-        }
-        return true;
-    }
-    setEnabled(enabled) {
-        super.setEnabled(enabled);
-        // Clear the selection
-        this.handleOverlay.replaceChildren();
-        this.selectionBox = null;
-        this.shiftKeyPressed = false;
-        this.ctrlKeyPressed = false;
-        this.handleOverlay.style.display = enabled ? 'block' : 'none';
-        if (enabled) {
-            this.handleOverlay.tabIndex = 0;
-            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
-        }
-        else {
-            this.handleOverlay.tabIndex = -1;
-        }
-    }
-    // Get the object responsible for displaying this' selection.
-    // @internal
-    getSelection() {
-        return this.selectionBox;
-    }
-    getSelectedObjects() {
-        var _a, _b;
-        return (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedObjects()) !== null && _b !== void 0 ? _b : [];
-    }
-    // Select the given `objects`. Any non-selectable objects in `objects` are ignored.
-    setSelection(objects) {
-        // Only select selectable objects.
-        objects = objects.filter(obj => obj.isSelectable());
-        // Sort by z-index
-        objects.sort((a, b) => a.getZIndex() - b.getZIndex());
-        // Remove duplicates
-        objects = objects.filter((current, idx) => {
-            if (idx > 0) {
-                return current !== objects[idx - 1];
-            }
-            return true;
-        });
-        let bbox = null;
-        for (const object of objects) {
-            if (bbox) {
-                bbox = bbox.union(object.getBBox());
-            }
-            else {
-                bbox = object.getBBox();
-            }
-        }
-        if (!bbox) {
-            return;
-        }
-        this.clearSelection();
-        if (!this.selectionBox) {
-            this.makeSelectionBox(bbox.topLeft);
-        }
-        this.selectionBox.setSelectedObjects(objects, bbox);
-        this.onSelectionUpdated();
-    }
-    clearSelection() {
-        this.handleOverlay.replaceChildren();
-        this.prevSelectionBox = this.selectionBox;
-        this.selectionBox = null;
-        this.onSelectionUpdated();
-    }
-}
-SelectionTool.handleableKeys = [
-    'a', 'h', 'ArrowLeft',
-    'd', 'l', 'ArrowRight',
-    'q', 'k', 'ArrowUp',
-    'e', 'j', 'ArrowDown',
-    'r', 'R',
-    'i', 'I', 'o', 'O',
-    'Control', 'Meta',
-];
-export default SelectionTool;

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

@@ -1,98 +0,0 @@
-import  Mat33  from '../../math/Mat33.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  Viewport  from '../../Viewport.mjs';
-import  { ResizeMode }  from './types.mjs';
-export class DragTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-    }
-    onDragStart(startPoint) {
-        this.selection.setTransform(Mat33.identity);
-        this.dragStartPoint = startPoint;
-    }
-    onDragUpdate(canvasPos) {
-        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
-        this.selection.setTransform(Mat33.translation(delta));
-    }
-    onDragEnd() {
-        this.selection.finalizeTransform();
-    }
-}
-export class ResizeTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-        this.mode = ResizeMode.Both;
-    }
-    onDragStart(startPoint, mode) {
-        this.selection.setTransform(Mat33.identity);
-        this.mode = mode;
-        this.dragStartPoint = startPoint;
-    }
-    onDragUpdate(canvasPos) {
-        const canvasDelta = canvasPos.minus(this.dragStartPoint);
-        const origWidth = this.selection.preTransformRegion.width;
-        const origHeight = this.selection.preTransformRegion.height;
-        let scale = Vec2.of(1, 1);
-        if (this.mode === ResizeMode.HorizontalOnly) {
-            const newWidth = origWidth + canvasDelta.x;
-            scale = Vec2.of(newWidth / origWidth, scale.y);
-        }
-        if (this.mode === ResizeMode.VerticalOnly) {
-            const newHeight = origHeight + canvasDelta.y;
-            scale = Vec2.of(scale.x, newHeight / origHeight);
-        }
-        if (this.mode === ResizeMode.Both) {
-            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
-            const newWidth = origWidth + delta;
-            scale = Vec2.of(newWidth / origWidth, newWidth / origWidth);
-        }
-        // Round: If this isn't done, scaling can create numbers with long decimal representations.
-        //    long decimal representations => large file sizes.
-        scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
-        if (scale.x !== 0 && scale.y !== 0) {
-            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
-            this.selection.setTransform(Mat33.scaling2D(scale, origin));
-        }
-    }
-    onDragEnd() {
-        this.selection.finalizeTransform();
-    }
-}
-export class RotateTransformer {
-    constructor(editor, selection) {
-        this.editor = editor;
-        this.selection = selection;
-        this.startAngle = 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.selection.setTransform(Mat33.identity);
-        this.startAngle = this.getAngle(startPoint);
-    }
-    onDragUpdate(canvasPos) {
-        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
-        // Transform in canvas space
-        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);
-    }
-    onDragEnd() {
-        this.selection.finalizeTransform();
-    }
-}

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

@@ -1,158 +0,0 @@
-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();
-    }
-}