js-draw 0.10.2 → 0.11.0

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -0,0 +1,222 @@
+import ImageComponent from '../../components/ImageComponent';
+import Editor from '../../Editor';
+import Erase from '../../commands/Erase';
+import EditorImage from '../../EditorImage';
+import { SelectionTool, uniteCommands } from '../../lib';
+import Mat33 from '../../math/Mat33';
+import fileToBase64 from '../../util/fileToBase64';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+
+export default class InsertImageWidget extends ActionButtonWidget {
+	private imageSelectionOverlay: HTMLElement;
+	private imagePreview: HTMLImageElement;
+	private imageFileInput: HTMLInputElement;
+	private imageAltTextInput: HTMLInputElement;
+	private statusView: HTMLElement;
+	private imageBase64URL: string|null;
+	private submitButton: HTMLButtonElement;
+
+	public constructor(editor: Editor, localization?: ToolbarLocalization) {
+		localization ??= editor.localization;
+
+		super(editor,
+			'insert-image-widget',
+			() => editor.icons.makeInsertImageIcon(),
+			localization.image,
+			() => this.onClicked()
+		);
+
+		this.imageSelectionOverlay = document.createElement('div');
+		this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
+		this.fillOverlay();
+
+		this.editor.createHTMLOverlay(this.imageSelectionOverlay);
+		this.imageSelectionOverlay.style.display = 'none';
+	}
+
+	private static nextInputId = 0;
+
+	private fillOverlay() {
+		const container = document.createElement('div');
+
+		const chooseImageRow = document.createElement('div');
+		const altTextRow = document.createElement('div');
+		this.imagePreview = document.createElement('img');
+		this.statusView = document.createElement('div');
+		const actionButtonRow = document.createElement('div');
+
+		actionButtonRow.classList.add('action-button-row');
+
+		this.submitButton = document.createElement('button');
+		const cancelButton = document.createElement('button');
+
+		this.imageFileInput = document.createElement('input');
+		this.imageAltTextInput = document.createElement('input');
+		const imageFileInputLabel = document.createElement('label');
+		const imageAltTextLabel = document.createElement('label');
+
+		const fileInputId = `insert-image-file-input-${InsertImageWidget.nextInputId ++}`;
+		const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+
+		this.imageFileInput.setAttribute('id', fileInputId);
+		this.imageAltTextInput.setAttribute('id', altTextInputId);
+		imageAltTextLabel.htmlFor = altTextInputId;
+		imageFileInputLabel.htmlFor = fileInputId;
+
+		this.imageFileInput.accept = 'image/*';
+
+		imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+		imageFileInputLabel.innerText = this.localizationTable.chooseFile;
+
+		this.imageFileInput.type = 'file';
+		this.imageAltTextInput.type = 'text';
+
+		this.statusView.setAttribute('aria-live', 'polite');
+
+		cancelButton.innerText = this.localizationTable.cancel;
+		this.submitButton.innerText = this.localizationTable.submit;
+
+		this.imageFileInput.onchange = async () => {
+			if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+				this.imagePreview.style.display = 'none';
+				this.submitButton.disabled = true;
+				return;
+			}
+
+			this.imagePreview.style.display = 'block';
+
+			const image = this.imageFileInput.files[0];
+
+			let data: string|null = null;
+
+			try {
+				data = await fileToBase64(image);
+			} catch(e) {
+				this.statusView.innerText = this.localizationTable.imageLoadError(e);
+			}
+
+			this.imageBase64URL = data;
+
+			if (data) {
+				this.imagePreview.src = data;
+				this.submitButton.disabled = false;
+				this.updateImageSizeDisplay();
+			} else {
+				this.submitButton.disabled = true;
+				this.statusView.innerText = '';
+			}
+		};
+
+		cancelButton.onclick = () => {
+			this.hideDialog();
+		};
+
+		this.imageSelectionOverlay.onclick = (evt: MouseEvent) => {
+			// If clicking on the backdrop
+			if (evt.target === this.imageSelectionOverlay) {
+				this.hideDialog();
+			}
+		};
+
+		chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+		altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+		actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+
+		container.replaceChildren(
+			chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow
+		);
+
+		this.imageSelectionOverlay.replaceChildren(container);
+	}
+
+	private hideDialog() {
+		this.imageSelectionOverlay.style.display = 'none';
+	}
+
+	private updateImageSizeDisplay() {
+		const imageData = this.imageBase64URL ?? '';
+
+		const sizeInKiB = imageData.length / 1024;
+		const sizeInMiB = sizeInKiB / 1024;
+
+		let units = 'KiB';
+		let size = sizeInKiB;
+
+		if (sizeInMiB >= 1) {
+			size = sizeInMiB;
+			units = 'MiB';
+		}
+
+		this.statusView.innerText = this.localizationTable.imageSize(
+			Math.round(size), units
+		);
+	}
+
+	private clearInputs() {
+		this.imageFileInput.value = '';
+		this.imageAltTextInput.value = '';
+		this.imagePreview.style.display = 'none';
+		this.submitButton.disabled = true;
+		this.statusView.innerText = '';
+	}
+
+	private onClicked() {
+		this.imageSelectionOverlay.style.display = '';
+		this.clearInputs();
+		this.imageFileInput.focus();
+
+		const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+		const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+
+		let editingImage: ImageComponent|null = null;
+		if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
+			editingImage = selectedObjects[0];
+
+			this.imageAltTextInput.value = editingImage.getAltText() ?? '';
+			this.imagePreview.style.display = 'block';
+			this.submitButton.disabled = false;
+
+			this.imageBase64URL = editingImage.getURL();
+			this.imagePreview.src = this.imageBase64URL;
+
+			this.updateImageSizeDisplay();
+		} else {
+			selectionTools.forEach(tool => tool.clearSelection());
+		}
+
+		this.submitButton.onclick = async () => {
+			if (!this.imageBase64URL) {
+				return;
+			}
+
+			const image = new Image();
+			image.src = this.imageBase64URL;
+			image.setAttribute('alt', this.imageAltTextInput.value);
+
+			const component = await ImageComponent.fromImage(image, Mat33.identity);
+
+			if (component.getBBox().area === 0) {
+				this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+				return;
+			}
+
+			this.imageSelectionOverlay.style.display = 'none';
+
+			if (editingImage) {
+				const eraseCommand = new Erase([ editingImage ]);
+
+				await this.editor.dispatch(uniteCommands([
+					EditorImage.addElement(component),
+					component.transformBy(editingImage.getTransformation()),
+					component.setZIndex(editingImage.getZIndex()),
+					eraseCommand,
+				]));
+
+				selectionTools[0]?.setSelection([ component ]);
+			} else {
+				await this.editor.addAndCenterComponents([ component ]);
+			}
+		};
+	}
+}

package/src/toolbar/widgets/lib.ts

@@ -8,3 +8,5 @@ export { default as TextToolWidget } from './TextToolWidget';
 export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
+
+export { default as InsertImageWidget } from './InsertImageWidget';

package/src/tools/PanZoom.test.ts

@@ -0,0 +1,65 @@
+
+import Editor from '../Editor';
+import { Mat33, Pointer, PointerDevice, Vec2 } from '../lib';
+import createEditor from '../testing/createEditor';
+import { InputEvtType } from '../types';
+import waitForTimeout from '../util/waitForTimeout';
+import PanZoom from './PanZoom';
+
+const selectPanZom = (editor: Editor): PanZoom => {
+	const primaryTools = editor.toolController.getPrimaryTools();
+	const panZoom = primaryTools.filter(tool => tool instanceof PanZoom)[0] as PanZoom;
+	panZoom.setEnabled(true);
+	return panZoom;
+};
+
+const sendTouchEvent = (
+	editor: Editor,
+	eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
+	screenPos: Vec2,
+) => {
+	const canvasPos = editor.viewport.screenToCanvas(screenPos);
+
+	const ptrId = 0;
+	const mainPointer = Pointer.ofCanvasPoint(
+		canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch
+	);
+
+	editor.toolController.dispatchInputEvent({
+		kind: eventType,
+		allPointers: [
+			mainPointer,
+		],
+		current: mainPointer,
+	});
+};
+
+describe('PanZoom', () => {
+	it('touch and drag should pan, then inertial scroll', async () => {
+		const editor = createEditor();
+		selectPanZom(editor);
+		editor.viewport.resetTransform(Mat33.identity);
+
+		const origTranslation = editor.viewport.canvasToScreen(Vec2.zero);
+
+		sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 1; i <= 10; i++) {
+			jest.advanceTimersByTime(10);
+			sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+		}
+
+		// Use real timers -- we need to be able to start the inertial scroller.
+		jest.useRealTimers();
+		sendTouchEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(100, 0));
+
+		const updatedTranslation = editor.viewport.canvasToScreen(Vec2.zero);
+		expect(updatedTranslation.minus(origTranslation).magnitude()).toBe(100);
+
+		await waitForTimeout(600); // ms
+		jest.useFakeTimers();
+
+		// Should inertial scroll
+		const afterDelayTranslation = editor.viewport.canvasToScreen(Vec2.zero);
+		expect(afterDelayTranslation.minus(updatedTranslation).magnitude()).toBeGreaterThan(0);
+	});
+});

package/src/tools/PanZoom.ts

@@ -30,6 +30,7 @@ type ScrollByCallback = (delta: Vec2) => void;
 
 class InertialScroller {
 	private running: boolean = false;
+	private currentVelocity: Vec2;
 
 	public constructor(
 		private initialVelocity: Vec2,
@@ -44,22 +45,22 @@ class InertialScroller {
 			return;
 		}
 
-		let currentVelocity = this.initialVelocity;
+		this.currentVelocity = this.initialVelocity;
 		let lastTime = (new Date()).getTime();
 		this.running = true;
 
-		const maxSpeed = 8000; // units/s
+		const maxSpeed = 5000; // units/s
 		const minSpeed = 200; // units/s
-		if (currentVelocity.magnitude() > maxSpeed) {
-			currentVelocity = currentVelocity.normalized().times(maxSpeed);
+		if (this.currentVelocity.magnitude() > maxSpeed) {
+			this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
 		}
 
-		while (this.running && currentVelocity.magnitude() > minSpeed) {
+		while (this.running && this.currentVelocity.magnitude() > minSpeed) {
 			const nowTime = (new Date()).getTime();
 			const dt = (nowTime - lastTime) / 1000;
 
-			currentVelocity = currentVelocity.times(Math.pow(1/8, dt));
-			this.scrollBy(currentVelocity.times(dt));
+			this.currentVelocity = this.currentVelocity.times(Math.pow(1/8, dt));
+			this.scrollBy(this.currentVelocity.times(dt));
 
 			await untilNextAnimationFrame();
 			lastTime = nowTime;
@@ -70,6 +71,14 @@ class InertialScroller {
 		}
 	}
 
+	public getCurrentVelocity(): Vec2|null {
+		if (!this.running) {
+			return null;
+		}
+
+		return this.currentVelocity;
+	}
+
 	public stop(): void {
 		if (this.running) {
 			this.running = false;
@@ -85,6 +94,7 @@ export default class PanZoom extends BaseTool {
 	private lastDist: number;
 	private lastScreenCenter: Point2;
 	private lastTimestamp: number;
+	private lastPointerDownTimestamp: number = 0;
 
 	private inertialScroller: InertialScroller|null = null;
 	private velocity: Vec2|null = null;
@@ -108,10 +118,14 @@ export default class PanZoom extends BaseTool {
 		return pointers.every(pointer => pointer.device === kind);
 	}
 
-	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
+	public onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean {
 		let handlingGesture = false;
 
+		const inertialScrollerVelocity = this.inertialScroller?.getCurrentVelocity() ?? Vec2.zero;
 		this.inertialScroller?.stop();
+		this.velocity = inertialScrollerVelocity;
+
+		this.lastPointerDownTimestamp = currentPointer.timeStamp;
 
 		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
 		const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
@@ -142,17 +156,19 @@ export default class PanZoom extends BaseTool {
 
 	private updateVelocity(currentCenter: Point2) {
 		const deltaPos = currentCenter.minus(this.lastScreenCenter);
-		const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+		let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
 
+		// Ignore duplicate events, unless there has been enough time between them.
+		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
+			return;
+		}
 		// We divide by deltaTime. Don't divide by zero.
 		if (deltaTime === 0) {
 			return;
 		}
 
-		// Ignore duplicate events, unless there has been enough time between them.
-		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
-			return;
-		}
+		// Don't divide by almost zero, either
+		deltaTime = Math.max(deltaTime, 0.01);
 
 		const currentVelocity = deltaPos.times(1 / deltaTime);
 		let smoothedVelocity = currentVelocity;
@@ -233,15 +249,31 @@ export default class PanZoom extends BaseTool {
 			this.velocity = Vec2.zero;
 		};
 
+		const minInertialScrollDt = 30;
 		const shouldInertialScroll =
-				event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+				event.current.device === PointerDevice.Touch
+				&& event.allPointers.length === 1
+				&& this.velocity !== null
+				&& event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
 
 		if (shouldInertialScroll && this.velocity !== null) {
+			const oldVelocity = this.velocity;
+
 			// If the user drags the screen, then stops, then lifts the pointer,
 			// we want the final velocity to reflect the stop at the end (so the velocity
 			// should be near zero). Handle this:
 			this.updateVelocity(event.current.screenPos);
 
+			// Work around an input issue. Some devices that disable the touchscreen when a stylus
+			// comes near the screen fire a touch-end event at the position of the stylus when a
+			// touch gesture is canceled. Because the stylus is often far away from the last touch,
+			// this causes a great displacement between the second-to-last (from the touchscreen) and
+			// last (from the pen that is now near the screen) events. Only allow velocity to decrease
+			// to work around this:
+			if (oldVelocity.magnitude() < this.velocity.magnitude()) {
+				this.velocity = oldVelocity;
+			}
+
 			// Cancel any ongoing inertial scrolling.
 			this.inertialScroller?.stop();
 

package/src/tools/PasteHandler.ts

@@ -5,18 +5,14 @@
 
 import Editor from '../Editor';
 import { AbstractComponent, TextComponent } from '../components/lib';
-import { Command, uniteCommands } from '../commands/lib';
 import SVGLoader from '../SVGLoader';
 import { PasteEvent } from '../types';
-import { Mat33, Rect2 } from '../math/lib';
+import { Mat33 } from '../math/lib';
 import BaseTool from './BaseTool';
-import EditorImage from '../EditorImage';
-import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import { TextStyle } from '../components/TextComponent';
 import ImageComponent from '../components/ImageComponent';
-import Viewport from '../Viewport';
 
 // { @inheritDoc PasteHandler! }
 export default class PasteHandler extends BaseTool {
@@ -44,52 +40,7 @@ export default class PasteHandler extends BaseTool {
 	}
 
 	private async addComponentsFromPaste(components: AbstractComponent[]) {
-		let bbox: Rect2|null = null;
-		for (const component of components) {
-			if (bbox) {
-				bbox = bbox.union(component.getBBox());
-			} else {
-				bbox = component.getBBox();
-			}
-		}
-
-		if (!bbox) {
-			return;
-		}
-
-		// Find a transform that scales/moves bbox onto the screen.
-		const visibleRect = this.editor.viewport.visibleRect;
-		const scaleRatioX = visibleRect.width / bbox.width;
-		const scaleRatioY = visibleRect.height / bbox.height;
-
-		let scaleRatio = scaleRatioX;
-		if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
-			scaleRatio = scaleRatioY;
-		}
-		scaleRatio *= 2 / 3;
-
-		scaleRatio = Viewport.roundScaleRatio(scaleRatio);
-
-		const transfm = Mat33.translation(
-			visibleRect.center.minus(bbox.center)
-		).rightMul(
-			Mat33.scaling2D(scaleRatio, bbox.center)
-		);
-
-		const commands: Command[] = [];
-		for (const component of components) {
-			// To allow deserialization, we need to add first, then transform.
-			commands.push(EditorImage.addElement(component));
-			commands.push(component.transformBy(transfm));
-		}
-
-		const applyChunkSize = 100;
-		this.editor.dispatch(uniteCommands(commands, applyChunkSize), true);
-
-		for (const selectionTool of this.editor.toolController.getMatchingTools(SelectionTool)) {
-			selectionTool.setEnabled(true);
-			selectionTool.setSelection(components);
-		}
+		await this.editor.addAndCenterComponents(components);
 	}
 
 	private async doSVGPaste(data: string) {

package/src/util/fileToBase64.ts

@@ -0,0 +1,18 @@
+
+type ProgressListener = (evt: ProgressEvent<FileReader>)=> void;
+const fileToBase64 = (file: File, onprogress?: ProgressListener): Promise<string|null> => {
+	const reader = new FileReader();
+
+	return new Promise((resolve: (result: string|null)=>void, reject) => {
+		reader.onload = () => resolve(reader.result as string|null);
+		reader.onerror = reject;
+		reader.onabort = reject;
+		reader.onprogress = (evt) => {
+			onprogress?.(evt);
+		};
+
+		reader.readAsDataURL(file);
+	});
+};
+
+export default fileToBase64;

package/src/util/waitForTimeout.ts

@@ -0,0 +1,9 @@
+
+// Returns a promise that resolves after `timeout` milliseconds.
+const waitForTimeout = (timeout: number): Promise<void> => {
+	return new Promise(resolve => {
+		setTimeout(() => resolve(), timeout);
+	});
+};
+
+export default waitForTimeout;