js-draw 1.0.1 → 1.1.0

package/src/tools/PanZoom.ts

@@ -1,525 +0,0 @@
-
-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

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