js-draw 0.23.0 → 0.24.0

package/src/tools/SoundUITool.ts

@@ -0,0 +1,212 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import LineSegment2 from '../math/shapes/LineSegment2';
+import { Point2 } from '../math/Vec2';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+
+class SoundFeedback {
+	private ctx: AudioContext;
+
+	// Feedback for the current color under the cursor
+	private colorOscHue: OscillatorNode;
+	private colorOscValue: OscillatorNode;
+	private colorOscSaturation: OscillatorNode;
+	private valueGain: GainNode;
+	private colorGain: GainNode;
+
+	// Feedback for when the cursor crosses the boundary of some
+	// component of the image.
+	private boundaryOsc: OscillatorNode;
+	private boundaryGain: GainNode;
+
+	private closed: boolean = false;
+
+	public constructor() {
+		// 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();
+	}
+
+	public pause() {
+		if (this.closed) return;
+		this.colorGain.gain.setValueAtTime(0, this.ctx.currentTime);
+		void this.ctx.suspend();
+	}
+
+	public play() {
+		if (this.closed) return;
+		void this.ctx.resume();
+	}
+
+	public setColor(color: Color4) {
+		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);
+	}
+
+	public announceBoundaryCross(boundaryCrossCount: number) {
+		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);
+	}
+
+	public 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 {
+	private soundFeedback: SoundFeedback|null = null;
+	private toggleButton: HTMLElement;
+	private toggleButtonContainer: HTMLElement;
+
+	public constructor(
+		private editor: Editor,
+		description: string,
+	) {
+		super(editor.notifier, description);
+
+
+		// 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);
+	}
+
+	private 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);
+		}
+	}
+
+	public override setEnabled(enabled: boolean): void {
+		super.setEnabled(enabled);
+
+		if (!enabled) {
+			this.soundFeedback?.close();
+			this.soundFeedback = null;
+		}
+
+		this.updateToggleButtonText();
+	}
+
+	private lastPointerPos: Point2;
+
+	public override onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (!this.soundFeedback) {
+			this.soundFeedback = new SoundFeedback();
+		}
+
+		// Allow two-finger gestures to move the screen.
+		if (allPointers.length >= 2) {
+			return false;
+		}
+
+		// Accept multiple cursors -- some screen readers require multiple (touch) pointers to interact with
+		// an image instead of using the built-in navigation features.
+
+		this.soundFeedback?.play();
+		this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
+		this.lastPointerPos = current.canvasPos;
+		return true;
+	}
+
+	public override onPointerMove({ current }: PointerEvt): void {
+		this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
+
+		const pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
+		const collisions = this.editor.image.getElementsIntersectingRegion(pointerMotionLine.bbox).filter(
+			component => component.intersects(pointerMotionLine)
+		);
+		this.lastPointerPos = current.canvasPos;
+
+		if (collisions.length > 0) {
+			this.soundFeedback?.announceBoundaryCross(collisions.length);
+		}
+	}
+
+	public override onPointerUp(_event: PointerEvt): void {
+		this.soundFeedback?.pause();
+	}
+
+	public override onGestureCancel(): void {
+		this.soundFeedback?.pause();
+	}
+}

package/src/tools/TextTool.ts

@@ -0,0 +1,340 @@
+import Color4 from '../Color4';
+import TextComponent from '../components/TextComponent';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import Rect2 from '../math/shapes/Rect2';
+import Mat33 from '../math/Mat33';
+import { Vec2 } from '../math/Vec2';
+import { PointerDevice } from '../Pointer';
+import { EditorEventType, PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import Erase from '../commands/Erase';
+import uniteCommands from '../commands/uniteCommands';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
+
+const overlayCSSClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+	private textStyle: TextRenderingStyle;
+
+	private textEditOverlay: HTMLElement;
+	private textInputElem: HTMLTextAreaElement|null = null;
+	private textTargetPosition: Vec2|null = null;
+	private textMeasuringCtx: CanvasRenderingContext2D|null = null;
+	private textRotation: number;
+	private textScale: Vec2 = Vec2.of(1, 1);
+
+	private removeExistingCommand: Erase|null = null;
+
+	public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
+		super(editor.notifier, description);
+		this.textStyle = {
+			size: 32,
+			fontFamily: 'sans-serif',
+			renderingStyle: {
+				fill: Color4.purple,
+			},
+		};
+
+		this.textEditOverlay = document.createElement('div');
+		this.textEditOverlay.classList.add(overlayCSSClass);
+		this.editor.addStyleSheet(`
+			.${overlayCSSClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCSSClass} textarea {
+				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+				overflow: hidden;
+
+				padding: 0;
+				margin: 0;
+				border: none;
+				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
+			}
+		`);
+		this.editor.createHTMLOverlay(this.textEditOverlay);
+		this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+	}
+
+	private initTextMeasuringCanvas() {
+		this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
+	}
+
+	private getTextAscent(text: string, style: TextRenderingStyle): number {
+		this.initTextMeasuringCanvas();
+		if (this.textMeasuringCtx) {
+			this.textMeasuringCtx.textBaseline = 'alphabetic';
+			TextComponent.applyTextStyles(this.textMeasuringCtx, style);
+			const measurement = this.textMeasuringCtx.measureText(text);
+			return measurement.fontBoundingBoxAscent ?? measurement.actualBoundingBoxAscent;
+		}
+
+		// Estimate
+		return style.size * 2 / 3;
+	}
+
+	// Take input from this' textInputElem and add it to the EditorImage.
+	// If [removeInput], the HTML input element is removed. Otherwise, its value
+	// is cleared.
+	private flushInput(removeInput: boolean = true) {
+		if (this.textInputElem && this.textTargetPosition) {
+			const content = this.textInputElem.value.trimEnd();
+
+			this.textInputElem.value = '';
+
+			if (removeInput) {
+				// In some browsers, .remove() triggers a .blur event (synchronously).
+				// Clear this.textInputElem before removal
+				const input = this.textInputElem;
+				this.textInputElem = null;
+				input.remove();
+			}
+
+			if (content === '') {
+				return;
+			}
+
+			const textTransform = Mat33.translation(
+				this.textTargetPosition
+			).rightMul(
+				this.getTextScaleMatrix()
+			).rightMul(
+				Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
+			).rightMul(
+				Mat33.zRotation(this.textRotation)
+			);
+
+			const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
+
+			const action = EditorImage.addElement(textComponent);
+			if (this.removeExistingCommand) {
+				// Unapply so that `removeExistingCommand` can be added to the undo stack.
+				this.removeExistingCommand.unapply(this.editor);
+
+				this.editor.dispatch(uniteCommands([ this.removeExistingCommand, action ]));
+				this.removeExistingCommand = null;
+			} else {
+				this.editor.dispatch(action);
+			}
+		}
+	}
+
+	private getTextScaleMatrix() {
+		return Mat33.scaling2D(this.textScale.times(1/this.editor.viewport.getSizeOfPixelOnCanvas()));
+	}
+
+	private updateTextInput() {
+		if (!this.textInputElem || !this.textTargetPosition) {
+			this.textInputElem?.remove();
+			return;
+		}
+
+		const viewport = this.editor.viewport;
+		const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
+		this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
+		this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
+		this.textInputElem.style.fontStyle = this.textStyle.fontStyle ?? '';
+		this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
+		this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
+		this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
+		this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
+
+		this.textInputElem.style.position = 'relative';
+		this.textInputElem.style.left = `${textScreenPos.x}px`;
+		this.textInputElem.style.top = `${textScreenPos.y}px`;
+		this.textInputElem.style.margin = '0';
+
+		this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+		this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+
+		// Get the ascent based on the font, using a string of characters
+		// that is tall in most fonts.
+		const tallText = 'Testing!';
+		const ascent = this.getTextAscent(tallText, this.textStyle);
+		const vertAdjust = ascent;
+
+		const rotation = this.textRotation + viewport.getRotationAngle();
+		const scale: Mat33 = this.getTextScaleMatrix();
+		this.textInputElem.style.transform =
+			`${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
+		this.textInputElem.style.transformOrigin = 'top left';
+
+		// Match the line height of default rendered text.
+		const lineHeight = Math.floor(this.textStyle.size);
+		this.textInputElem.style.lineHeight = `${lineHeight}px`;
+	}
+
+	private startTextInput(textCanvasPos: Vec2, initialText: string) {
+		this.flushInput();
+
+		this.textInputElem = document.createElement('textarea');
+		this.textInputElem.value = initialText;
+		this.textInputElem.style.display = 'inline-block';
+		this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
+		this.textRotation = -this.editor.viewport.getRotationAngle();
+		this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+		this.updateTextInput();
+
+		// Update the input size/position/etc. after the placeHolder has had time to appear.
+		setTimeout(() => this.updateTextInput(), 0);
+
+		this.textInputElem.oninput = () => {
+			if (this.textInputElem) {
+				this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+				this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+			}
+		};
+		this.textInputElem.onblur = () => {
+			// Delay removing the input -- flushInput may be called within a blur()
+			// event handler
+			const removeInput = false;
+			const input = this.textInputElem;
+
+			this.flushInput(removeInput);
+			this.textInputElem = null;
+			setTimeout(() => {
+				input?.remove();
+			}, 0);
+		};
+		this.textInputElem.onkeyup = (evt) => {
+			if (evt.key === 'Enter' && !evt.shiftKey) {
+				this.flushInput();
+				this.editor.focus();
+			} else if (evt.key === 'Escape') {
+				// Cancel input.
+				this.textInputElem?.remove();
+				this.textInputElem = null;
+				this.editor.focus();
+
+				this.removeExistingCommand?.unapply(this.editor);
+				this.removeExistingCommand = null;
+			}
+		};
+
+		this.textEditOverlay.replaceChildren(this.textInputElem);
+		setTimeout(() => this.textInputElem?.focus(), 0);
+	}
+
+	public override setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		if (!enabled) {
+			this.flushInput();
+		}
+
+		this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+	}
+
+	public override onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (current.device === PointerDevice.Eraser) {
+			return false;
+		}
+
+		if (allPointers.length === 1) {
+
+			// Are we clicking on a text node?
+			const canvasPos = current.canvasPos;
+			const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+			const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+			const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+			let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent) as TextComponent[];
+
+			// Don't try to edit text nodes that contain the viewport (this allows us
+			// to zoom in on text nodes and add text on top of them.)
+			const visibleRect = this.editor.viewport.visibleRect;
+			targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
+
+			// End any TextNodes we're currently editing.
+			this.flushInput();
+
+			if (targetTextNodes.length > 0) {
+				const targetNode = targetTextNodes[targetTextNodes.length - 1];
+				this.setTextStyle(targetNode.getTextStyle());
+
+				// Create and temporarily apply removeExistingCommand.
+				this.removeExistingCommand = new Erase([ targetNode ]);
+				this.removeExistingCommand.apply(this.editor);
+
+				this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+
+				const transform = targetNode.getTransform();
+				this.textRotation = transform.transformVec3(Vec2.unitX).angle();
+				const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
+				this.textScale = Vec2.of(1, 1).times(scaleFactor);
+				this.updateTextInput();
+			} else {
+				this.removeExistingCommand = null;
+				this.startTextInput(current.canvasPos, '');
+			}
+			return true;
+		}
+
+		return false;
+	}
+
+	public override onGestureCancel(): void {
+		this.flushInput();
+		this.editor.focus();
+	}
+
+	private dispatchUpdateEvent() {
+		this.updateTextInput();
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
+
+	public setFontFamily(fontFamily: string) {
+		if (fontFamily !== this.textStyle.fontFamily) {
+			this.textStyle = {
+				...this.textStyle,
+				fontFamily: fontFamily,
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public setColor(color: Color4) {
+		if (!color.eq(this.textStyle.renderingStyle.fill)) {
+			this.textStyle = {
+				...this.textStyle,
+				renderingStyle: {
+					...this.textStyle.renderingStyle,
+					fill: color,
+				},
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public setFontSize(size: number) {
+		if (size !== this.textStyle.size) {
+			this.textStyle = {
+				...this.textStyle,
+				size,
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public getTextStyle(): TextRenderingStyle {
+		return this.textStyle;
+	}
+
+	private setTextStyle(style: TextRenderingStyle) {
+		// Copy the style — we may change parts of it.
+		this.textStyle = { ...style, renderingStyle: { ...style.renderingStyle } };
+		this.dispatchUpdateEvent();
+	}
+}