js-draw 1.0.0 → 1.0.1

package/src/tools/PanZoom.ts

@@ -0,0 +1,525 @@
+
+import { Editor } from '../Editor';
+import { Mat33, Vec3, Point2, Vec2 } from '@js-draw/math';
+import Pointer, { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
+import { KeyPressEvent, PointerEvt, WheelEvt } from '../inputEvents';
+import untilNextAnimationFrame from '../util/untilNextAnimationFrame';
+import { Viewport, ViewportTransform } from '../Viewport';
+import BaseTool from './BaseTool';
+import { moveDownKeyboardShortcutId, moveLeftKeyboardShortcutId, moveRightKeyboardShortcutId, moveUpKeyboardShortcutId, rotateClockwiseKeyboardShortcutId, rotateCounterClockwiseKeyboardShortcutId, zoomInKeyboardShortcutId, zoomOutKeyboardShortcutId } from './keybindings';
+
+interface PinchData {
+	canvasCenter: Point2;
+	screenCenter: Point2;
+	angle: number;
+	dist: number;
+}
+
+export enum PanZoomMode {
+	OneFingerTouchGestures = 0x1,
+	TwoFingerTouchGestures = 0x1 << 1,
+	RightClickDrags = 0x1 << 2,
+	SinglePointerGestures = 0x1 << 3,
+	Keyboard = 0x1 << 4,
+
+	RotationLocked = 0x1 << 5,
+}
+
+type ScrollByCallback = (delta: Vec2) => void;
+
+class InertialScroller {
+	private running: boolean = false;
+	private currentVelocity: Vec2;
+
+	public constructor(
+		private initialVelocity: Vec2,
+		private scrollBy: ScrollByCallback,
+		private onComplete: ()=> void
+	) {
+		this.start();
+	}
+
+	private async start() {
+		if (this.running) {
+			return;
+		}
+
+		this.currentVelocity = this.initialVelocity;
+		let lastTime = performance.now();
+		this.running = true;
+
+		const maxSpeed = 5000; // units/s
+		const minSpeed = 200; // units/s
+		if (this.currentVelocity.magnitude() > maxSpeed) {
+			this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
+		}
+
+		while (this.running && this.currentVelocity.magnitude() > minSpeed) {
+			const nowTime = performance.now();
+			const dt = (nowTime - lastTime) / 1000;
+
+			this.currentVelocity = this.currentVelocity.times(Math.pow(1/8, dt));
+			this.scrollBy(this.currentVelocity.times(dt));
+
+			await untilNextAnimationFrame();
+			lastTime = nowTime;
+		}
+
+		if (this.running) {
+			this.stop();
+		}
+	}
+
+	public getCurrentVelocity(): Vec2|null {
+		if (!this.running) {
+			return null;
+		}
+
+		return this.currentVelocity;
+	}
+
+	public stop(): void {
+		if (this.running) {
+			this.running = false;
+			this.onComplete();
+		}
+	}
+}
+
+export default class PanZoom extends BaseTool {
+	private transform: ViewportTransform|null = null;
+
+	// Distance between two touch points at the **start** of a gesture.
+	private startDist: number;
+
+	// Distance between two touch points the last time input data was received.
+	private lastDist: number;
+	private lastScreenCenter: Point2;
+	private lastTimestamp: number;
+	private lastPointerDownTimestamp: number = 0;
+	private initialTouchAngle: number = 0;
+	private initialViewportRotation: number = 0;
+
+	// Set to `true` only when scaling has started (if two fingers are down and have moved
+	// far enough).
+	private isScaling: boolean = false;
+
+	private inertialScroller: InertialScroller|null = null;
+	private velocity: Vec2|null = null;
+
+	public constructor(private editor: Editor, private mode: PanZoomMode, description: string) {
+		super(editor.notifier, description);
+	}
+
+	// Returns information about the pointers in a gesture
+	public computePinchData(p1: Pointer, p2: Pointer): PinchData {
+		// Swap the pointers to ensure consistent ordering.
+		if (p1.id < p2.id) {
+			const tmp = p1;
+			p1 = p2;
+			p2 = tmp;
+		}
+
+		const screenBetween = p2.screenPos.minus(p1.screenPos);
+		const angle = screenBetween.angle();
+		const dist = screenBetween.magnitude();
+		const canvasCenter = p2.canvasPos.plus(p1.canvasPos).times(0.5);
+		const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
+
+		return { canvasCenter, screenCenter, angle, dist };
+	}
+
+	private allPointersAreOfType(pointers: Pointer[], kind: PointerDevice) {
+		return pointers.every(pointer => pointer.device === kind);
+	}
+
+	public override 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);
+
+		if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+			const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
+			this.lastDist = dist;
+			this.startDist = dist;
+			this.lastScreenCenter = screenCenter;
+			this.initialTouchAngle = angle;
+			this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+			this.isScaling = false;
+
+			handlingGesture = true;
+		} else if (pointers.length === 1 && (
+			(this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+			|| (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+			|| (this.mode & PanZoomMode.SinglePointerGestures)
+		)) {
+			this.lastScreenCenter = pointers[0].screenPos;
+			this.isScaling = false;
+			handlingGesture = true;
+		}
+
+		if (handlingGesture) {
+			this.lastTimestamp = performance.now();
+			this.transform ??= Viewport.transformBy(Mat33.identity);
+			this.editor.display.setDraftMode(true);
+		}
+
+		return handlingGesture;
+	}
+
+	private updateVelocity(currentCenter: Point2) {
+		const deltaPos = currentCenter.minus(this.lastScreenCenter);
+		let deltaTime = (performance.now() - 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;
+		}
+
+		// Don't divide by almost zero, either
+		deltaTime = Math.max(deltaTime, 0.01);
+
+		const currentVelocity = deltaPos.times(1 / deltaTime);
+		let smoothedVelocity = currentVelocity;
+
+		if (this.velocity) {
+			smoothedVelocity = this.velocity.lerp(currentVelocity, 0.5);
+		}
+
+		this.velocity = smoothedVelocity;
+	}
+
+	// Returns the change in position of the center of the given group of pointers.
+	// Assumes this.lastScreenCenter has been set appropriately.
+	private getCenterDelta(screenCenter: Point2): Vec2 {
+		// Use transformVec3 to avoid translating the delta
+		const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
+		return delta;
+	}
+
+	//  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
+	// to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
+	// when applied to the viewport, rotates the viewport to 90.0 degrees.
+	//
+	// Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
+	// from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
+	private toSnappedRotationDelta(touchAngle: number) {
+		const deltaAngle = touchAngle - this.initialTouchAngle;
+		let fullRotation = deltaAngle + this.initialViewportRotation;
+
+		const snapToMultipleOf = Math.PI / 2;
+		const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
+
+		// The maximum angle for which we snap the given angle to a multiple of
+		// `snapToMultipleOf`.
+		const maxSnapAngle = 0.07;
+
+		// Snap the rotation
+		if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
+			fullRotation = roundedFullRotation;
+
+			// Work around a rotation/matrix multiply bug.
+			// (See commit after 4abe27ff8e7913155828f98dee77b09c57c51d30).
+			// TODO: Fix the underlying issue and remove this.
+			if (fullRotation !== 0) {
+				fullRotation += 0.0001;
+			}
+		}
+
+		return fullRotation - this.editor.viewport.getRotationAngle();
+	}
+
+	private handleTwoFingerMove(allPointers: Pointer[]) {
+		const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+
+		const delta = this.getCenterDelta(screenCenter);
+		let deltaRotation;
+
+		if (this.isRotationLocked()) {
+			deltaRotation = 0;
+		} else {
+			deltaRotation = this.toSnappedRotationDelta(angle);
+		}
+
+		this.updateVelocity(screenCenter);
+
+		let scaleFactor = 1;
+		if (this.isScaling) {
+			scaleFactor = dist / this.lastDist;
+		} else {
+			const initialScaleFactor = dist / this.startDist;
+
+			// Only start scaling if scaling done so far exceeds some threshold.
+			if (initialScaleFactor > 1.05 || initialScaleFactor < 0.95) {
+				scaleFactor = initialScaleFactor;
+				this.isScaling = true;
+			}
+		}
+
+		const transformUpdate = Mat33.translation(delta)
+			.rightMul(Mat33.scaling2D(scaleFactor, canvasCenter))
+			.rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
+
+		this.lastScreenCenter = screenCenter;
+		this.lastDist = dist;
+		this.transform = Viewport.transformBy(
+			this.transform!.transform.rightMul(transformUpdate)
+		);
+	}
+
+	private handleOneFingerMove(pointer: Pointer) {
+		const delta = this.getCenterDelta(pointer.screenPos);
+		this.transform = Viewport.transformBy(
+			this.transform!.transform.rightMul(
+				Mat33.translation(delta)
+			)
+		);
+		this.updateVelocity(pointer.screenPos);
+		this.lastScreenCenter = pointer.screenPos;
+	}
+
+	public override onPointerMove({ allPointers }: PointerEvt): void {
+		this.transform ??= Viewport.transformBy(Mat33.identity);
+
+		const lastTransform = this.transform;
+		if (allPointers.length === 2) {
+			this.handleTwoFingerMove(allPointers);
+		} else if (allPointers.length === 1) {
+			this.handleOneFingerMove(allPointers[0]);
+		}
+		lastTransform.unapply(this.editor);
+		this.transform.apply(this.editor);
+
+		this.lastTimestamp = performance.now();
+	}
+
+	public override onPointerUp(event: PointerEvt): void {
+		const onComplete = () => {
+			if (this.transform) {
+				this.transform.unapply(this.editor);
+				this.editor.dispatch(this.transform, false);
+			}
+
+			this.editor.display.setDraftMode(false);
+			this.transform = null;
+			this.velocity = Vec2.zero;
+		};
+
+		const minInertialScrollDt = 30;
+		const shouldInertialScroll =
+				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();
+
+			this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta: Vec2) => {
+				if (!this.transform) {
+					return;
+				}
+
+				const canvasDelta = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollDelta);
+
+				// Scroll by scrollDelta
+				this.transform.unapply(this.editor);
+				this.transform = Viewport.transformBy(
+					this.transform.transform.rightMul(
+						Mat33.translation(canvasDelta)
+					)
+				);
+				this.transform.apply(this.editor);
+			}, onComplete);
+		} else {
+			onComplete();
+		}
+	}
+
+	public override onGestureCancel(): void {
+		this.inertialScroller?.stop();
+		this.velocity = Vec2.zero;
+		this.transform?.unapply(this.editor);
+		this.editor.display.setDraftMode(false);
+		this.transform = null;
+	}
+
+	// Applies [transformUpdate] to the editor. This stacks on top of the
+	// current transformation, if it exists.
+	private updateTransform(transformUpdate: Mat33, announce: boolean = false) {
+		let newTransform = transformUpdate;
+		if (this.transform) {
+			newTransform = this.transform.transform.rightMul(transformUpdate);
+		}
+
+		this.transform?.unapply(this.editor);
+		this.transform = Viewport.transformBy(newTransform);
+		this.transform.apply(this.editor);
+
+		if (announce) {
+			this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
+		}
+	}
+
+	public override onWheel({ delta, screenPos }: WheelEvt): boolean {
+		this.inertialScroller?.stop();
+
+		// Reset the transformation -- wheel events are individual events, so we don't
+		// need to unapply/reapply.
+		this.transform = Viewport.transformBy(Mat33.identity);
+
+		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
+		const toCanvas = this.editor.viewport.screenToCanvasTransform;
+
+		// Transform without including translation
+		const translation =
+			toCanvas.transformVec3(
+				Vec3.of(-delta.x, -delta.y, 0)
+			);
+		const pinchZoomScaleFactor = 1.03;
+		const transformUpdate = Mat33.scaling2D(
+			Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos
+		).rightMul(
+			Mat33.translation(translation)
+		);
+		this.updateTransform(transformUpdate, true);
+
+		return true;
+	}
+
+	public override onKeyPress(event: KeyPressEvent): boolean {
+		this.inertialScroller?.stop();
+
+		if (!(this.mode & PanZoomMode.Keyboard)) {
+			return false;
+		}
+
+		// No need to keep the same the transform for keyboard events.
+		this.transform = Viewport.transformBy(Mat33.identity);
+
+		let translation = Vec2.zero;
+		let scale = 1;
+		let rotation = 0;
+
+		// Keyboard shortcut handling
+		const shortcucts = this.editor.shortcuts;
+		if (shortcucts.matchesShortcut(moveLeftKeyboardShortcutId, event)) {
+			translation = Vec2.of(-1, 0);
+		} else if (shortcucts.matchesShortcut(moveRightKeyboardShortcutId, event)) {
+			translation = Vec2.of(1, 0);
+		} else if (shortcucts.matchesShortcut(moveUpKeyboardShortcutId, event)) {
+			translation = Vec2.of(0, -1);
+		} else if (shortcucts.matchesShortcut(moveDownKeyboardShortcutId, event)) {
+			translation = Vec2.of(0, 1);
+		} else if (shortcucts.matchesShortcut(zoomInKeyboardShortcutId, event)) {
+			scale = 1/2;
+		} else if (shortcucts.matchesShortcut(zoomOutKeyboardShortcutId, event)) {
+			scale = 2;
+		} else if (shortcucts.matchesShortcut(rotateClockwiseKeyboardShortcutId, event)) {
+			rotation = 1;
+		} else if (shortcucts.matchesShortcut(rotateCounterClockwiseKeyboardShortcutId, event)) {
+			rotation = -1;
+		} else {
+			return false;
+		}
+
+		// For each keypress,
+		translation = translation.times(30); // Move at most 30 units
+		rotation *= Math.PI / 8; // Rotate at least a sixteenth of a rotation
+
+		// Transform the canvas, not the viewport:
+		translation = translation.times(-1);
+		rotation = rotation * -1;
+		scale = 1 / scale;
+
+		// Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+		// TODO: Figure out why and implement a better solution.
+		if (rotation !== 0) {
+			rotation += 0.0001;
+		}
+
+		if (this.isRotationLocked()) {
+			rotation = 0;
+		}
+
+		const toCanvas = this.editor.viewport.screenToCanvasTransform;
+
+		// Transform without translating (treat toCanvas as a linear instead of
+		// an affine transformation).
+		translation = toCanvas.transformVec3(translation);
+
+		// Rotate/scale about the center of the canvas
+		const transformCenter = this.editor.viewport.visibleRect.center;
+		const transformUpdate = Mat33.scaling2D(
+			scale, transformCenter
+		).rightMul(Mat33.zRotation(
+			rotation, transformCenter
+		)).rightMul(Mat33.translation(
+			translation
+		));
+		this.updateTransform(transformUpdate, true);
+
+		return true;
+	}
+
+	private isRotationLocked(): boolean {
+		return !!(this.mode & PanZoomMode.RotationLocked);
+	}
+
+	// Sets whether the given `mode` is enabled. `mode` should be a single
+	// mode from the `PanZoomMode` enum.
+	public setModeEnabled(mode: PanZoomMode, enabled: boolean) {
+		let newMode = this.mode;
+		if (enabled) {
+			newMode |= mode;
+		} else {
+			newMode &= ~mode;
+		}
+		this.setMode(newMode);
+	}
+
+	public setMode(mode: PanZoomMode) {
+		if (mode !== this.mode) {
+			this.mode = mode;
+
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+		}
+	}
+
+	public getMode(): PanZoomMode {
+		return this.mode;
+	}
+}

package/src/tools/PasteHandler.ts

@@ -0,0 +1,94 @@
+import Editor from '../Editor';
+import AbstractComponent from '../components/AbstractComponent';
+import TextComponent from '../components/TextComponent';
+import SVGLoader from '../SVGLoader';
+import { PasteEvent } from '../inputEvents';
+import { Mat33, Color4 } from '@js-draw/math';
+import BaseTool from './BaseTool';
+import TextTool from './TextTool';
+import ImageComponent from '../components/ImageComponent';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
+
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
+export default class PasteHandler extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.pasteHandler);
+	}
+
+	// @internal
+	public override onPaste(event: PasteEvent): boolean {
+		const mime = event.mime.toLowerCase();
+
+		if (mime === 'image/svg+xml') {
+			void this.doSVGPaste(event.data);
+			return true;
+		}
+		else if (mime === 'text/plain') {
+			void this.doTextPaste(event.data);
+			return true;
+		}
+		else if (mime === 'image/png' || mime === 'image/jpeg') {
+			void this.doImagePaste(event.data);
+			return true;
+		}
+
+		return false;
+	}
+
+	private async addComponentsFromPaste(components: AbstractComponent[]) {
+		await this.editor.addAndCenterComponents(components);
+	}
+
+	private async doSVGPaste(data: string) {
+		const sanitize = true;
+		const loader = SVGLoader.fromString(data, sanitize);
+
+		const components: AbstractComponent[] = [];
+
+		await loader.start((component) => {
+			components.push(component);
+		},
+		(_countProcessed: number, _totalToProcess: number) => null);
+
+		await this.addComponentsFromPaste(components);
+	}
+
+	private async doTextPaste(text: string) {
+		const textTools = this.editor.toolController.getMatchingTools(TextTool);
+
+		textTools.sort((a, b) => {
+			if (!a.isEnabled() && b.isEnabled()) {
+				return -1;
+			}
+
+			if (!b.isEnabled() && a.isEnabled()) {
+				return 1;
+			}
+
+			return 0;
+		});
+
+		const defaultTextStyle: TextRenderingStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+		const pastedTextStyle: TextRenderingStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
+
+		const lines = text.split('\n');
+		await this.addComponentsFromPaste([ TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle) ]);
+	}
+
+	private async doImagePaste(dataURL: string) {
+		const image = new Image();
+		image.src = dataURL;
+		const component = await ImageComponent.fromImage(image, Mat33.identity);
+		await this.addComponentsFromPaste([ component ]);
+	}
+}