js-draw 0.9.3 → 0.10.0

package/src/components/builders/FreehandLineBuilder.ts

@@ -55,7 +55,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			fill: Color4.transparent,
 			stroke: {
 				color: this.startPoint.color,
-				width: this.roundDistance(this.averageWidth),
+				width: this.roundDistance(this.averageWidth / 2),
 			}
 		};
 	}
@@ -108,7 +108,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private getMinFit(): number {
-		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
+		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 5);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
@@ -135,7 +135,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return [];
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+			const width = Viewport.roundPoint(this.startPoint.width / 9, Math.min(this.minFitAllowed, this.startPoint.width / 5));
 			const center = this.roundPoint(this.startPoint.pos);
 
 			// Start on the right, cycle clockwise:

package/src/components/builders/PressureSensitiveFreehandLineBuilder.ts

@@ -205,7 +205,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
 	}
 
 	private roundPoint(point: Point2): Point2 {
-		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;

package/src/rendering/renderers/SVGRenderer.ts

@@ -150,13 +150,29 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	private textContainer: SVGTextElement|null = null;
 	private textContainerTransform: Mat33|null = null;
+	private textParentStyle: TextStyle|null = null;
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		const applyTextStyles = (elem: SVGTextElement|SVGTSpanElement, style: TextStyle) => {
-			elem.style.fontFamily = style.fontFamily;
-			elem.style.fontVariant = style.fontVariant ?? '';
-			elem.style.fontWeight = style.fontWeight ?? '';
-			elem.style.fontSize = style.size + 'px';
-			elem.style.fill = style.renderingStyle.fill.toHexString();
+			if (style.fontFamily !== this.textParentStyle?.fontFamily) {
+				elem.style.fontFamily = style.fontFamily;
+			}
+			if (style.fontVariant !== this.textParentStyle?.fontVariant) {
+				elem.style.fontVariant = style.fontVariant ?? '';
+			}
+			if (style.fontWeight !== this.textParentStyle?.fontWeight) {
+				elem.style.fontWeight = style.fontWeight ?? '';
+			}
+			if (style.size !== this.textParentStyle?.size) {
+				elem.style.fontSize = style.size + 'px';
+			}
+			
+			const fillString = style.renderingStyle.fill.toHexString();
+			// TODO: Uncomment at some future major version release --- currently causes incompatibility due
+			//       to an SVG parsing bug in older versions.
+			//const parentFillString = this.textParentStyle?.renderingStyle?.fill?.toHexString();
+			//if (fillString !== parentFillString) {
+			elem.style.fill = fillString;
+			//}
 
 			if (style.renderingStyle.stroke) {
 				const strokeStyle = style.renderingStyle.stroke;
@@ -181,6 +197,7 @@ export default class SVGRenderer extends AbstractRenderer {
 			if (this.objectLevel > 0) {
 				this.textContainer = container;
 				this.textContainerTransform = transform;
+				this.textParentStyle = style;
 			}
 		} else {
 			const elem = document.createElementNS(svgNameSpace, 'tspan');
@@ -218,6 +235,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPathString = [];
 		this.lastPathStyle = null;
 		this.textContainer = null;
+		this.textParentStyle = null;
 		this.objectElems = [];
 	}
 

package/src/toolbar/HTMLToolbar.ts

@@ -16,6 +16,7 @@ import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
+import { ActionButtonWidget } from './lib';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -158,57 +159,59 @@ export default class HTMLToolbar {
 		}
 	}
 
-	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
-		const button = document.createElement('button');
-		button.classList.add(`${toolbarCSSPrefix}button`);
-
-		if (typeof title === 'string') {
-			button.innerText = title;
-		} else {
-			const iconElem = title.icon.cloneNode(true) as HTMLElement;
-			const labelElem = document.createElement('label');
-
-			// Use the label to describe the icon -- no additional description should be necessary.
-			iconElem.setAttribute('alt', '');
-			labelElem.innerText = title.label;
-			iconElem.classList.add('toolbar-icon');
-
-			button.replaceChildren(iconElem, labelElem);
-		}
+	/**
+	 * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+	 * 
+	 * @return The added button.
+	 */
+	public addActionButton(title: string|ActionButtonIcon, command: ()=> void): BaseWidget {
+		const titleString = typeof title === 'string' ? title : title.label;
+		const widgetId = 'action-button';
+
+		const makeIcon = () => {
+			if (typeof title === 'string') {
+				return null;
+			}
 
-		button.onclick = command;
-		(parent ?? this.container).appendChild(button);
+			return title.icon;
+		};
 
-		return button;
+		const widget = new ActionButtonWidget(
+			this.editor,
+			widgetId,
+			makeIcon,
+			titleString,
+			command,
+			this.editor.localization
+		);
+
+		this.addWidget(widget);
+		return widget;
 	}
 
 	public addUndoRedoButtons() {
-		const undoRedoGroup = document.createElement('div');
-		undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
-
 		const undoButton = this.addActionButton({
 			label: this.localizationTable.undo,
 			icon: this.editor.icons.makeUndoIcon()
 		}, () => {
 			this.editor.history.undo();
-		}, undoRedoGroup);
+		});
 		const redoButton = this.addActionButton({
 			label: this.localizationTable.redo,
 			icon: this.editor.icons.makeRedoIcon(),
 		}, () => {
 			this.editor.history.redo();
-		}, undoRedoGroup);
-		this.container.appendChild(undoRedoGroup);
+		});
 
-		undoButton.disabled = true;
-		redoButton.disabled = true;
+		undoButton.setDisabled(true);
+		redoButton.setDisabled(true);
 		this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, event => {
 			if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
 				throw new Error('Wrong event type!');
 			}
 
-			undoButton.disabled = event.undoStackSize === 0;
-			redoButton.disabled = event.redoStackSize === 0;
+			undoButton.setDisabled(event.undoStackSize === 0);
+			redoButton.setDisabled(event.redoStackSize === 0);
 		});
 	}
 

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -7,7 +7,7 @@ export default class ActionButtonWidget extends BaseWidget {
 		editor: Editor,
 		id: string,
 
-        protected makeIcon: ()=> Element,
+        protected makeIcon: ()=> Element|null,
 		protected title: string,
         protected clickAction: ()=>void,
 
@@ -24,7 +24,7 @@ export default class ActionButtonWidget extends BaseWidget {
 		return this.title;
 	}
 
-	protected createIcon(): Element {
+	protected createIcon(): Element|null {
 		return this.makeIcon();
 	}
 

package/src/toolbar/widgets/BaseWidget.ts

@@ -78,7 +78,7 @@ export default abstract class BaseWidget {
 	}
 
 	protected abstract getTitle(): string;
-	protected abstract createIcon(): Element;
+	protected abstract createIcon(): Element|null;
 
 	// Add content to the widget's associated dropdown menu.
 	// Returns true if such a menu should be created, false otherwise.
@@ -200,9 +200,14 @@ export default abstract class BaseWidget {
 
 	protected updateIcon() {
 		const newIcon = this.createIcon();
-		this.icon?.replaceWith(newIcon);
-		this.icon = newIcon;
-		this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+
+		if (newIcon) {
+			this.icon?.replaceWith(newIcon);
+			this.icon = newIcon;
+			this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+		} else {
+			this.icon?.remove();
+		}
 	}
 
 	public setDisabled(disabled: boolean) {

package/src/tools/PanZoom.ts

@@ -5,6 +5,7 @@ import { Point2, Vec2 } from '../math/Vec2';
 import Vec3 from '../math/Vec3';
 import Pointer, { PointerDevice } from '../Pointer';
 import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import untilNextAnimationFrame from '../util/untilNextAnimationFrame';
 import { Viewport, ViewportTransform } from '../Viewport';
 import BaseTool from './BaseTool';
 
@@ -25,12 +26,68 @@ export enum PanZoomMode {
 	RotationLocked = 0x1 << 5,
 }
 
+type ScrollByCallback = (delta: Vec2) => void;
+
+class InertialScroller {
+	private running: boolean = false;
+
+	public constructor(
+		private initialVelocity: Vec2,
+		private scrollBy: ScrollByCallback,
+		private onComplete: ()=> void
+	) {
+		this.start();
+	}
+
+	private async start() {
+		if (this.running) {
+			return;
+		}
+
+		let currentVelocity = this.initialVelocity;
+		let lastTime = (new Date()).getTime();
+		this.running = true;
+
+		const maxSpeed = 8000; // units/s
+		const minSpeed = 200; // units/s
+		if (currentVelocity.magnitude() > maxSpeed) {
+			currentVelocity = currentVelocity.normalized().times(maxSpeed);
+		}
+
+		while (this.running && 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));
+
+			await untilNextAnimationFrame();
+			lastTime = nowTime;
+		}
+
+		if (this.running) {
+			this.stop();
+		}
+	}
+
+	public stop(): void {
+		if (this.running) {
+			this.running = false;
+			this.onComplete();
+		}
+	}
+}
+
 export default class PanZoom extends BaseTool {
 	private transform: ViewportTransform|null = null;
 
 	private lastAngle: number;
 	private lastDist: number;
 	private lastScreenCenter: Point2;
+	private lastTimestamp: number;
+
+	private inertialScroller: InertialScroller|null = null;
+	private velocity: Vec2|null = null;
 
 	public constructor(private editor: Editor, private mode: PanZoomMode, description: string) {
 		super(editor.notifier, description);
@@ -54,6 +111,8 @@ export default class PanZoom extends BaseTool {
 	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
 		let handlingGesture = false;
 
+		this.inertialScroller?.stop();
+
 		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
 		const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
 
@@ -73,6 +132,7 @@ export default class PanZoom extends BaseTool {
 		}
 
 		if (handlingGesture) {
+			this.lastTimestamp = (new Date()).getTime();
 			this.transform ??= Viewport.transformBy(Mat33.identity);
 			this.editor.display.setDraftMode(true);
 		}
@@ -80,6 +140,23 @@ export default class PanZoom extends BaseTool {
 		return handlingGesture;
 	}
 
+	private updateVelocity(currentCenter: Point2) {
+		const deltaPos = currentCenter.minus(this.lastScreenCenter);
+		const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+		const currentVelocity = deltaPos.times(1 / deltaTime);
+		let smoothedVelocity = currentVelocity;
+
+		if (deltaTime === 0) {
+			return;
+		}
+
+		if (this.velocity) {
+			smoothedVelocity = this.velocity.lerp(smoothedVelocity, 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 {
@@ -98,6 +175,8 @@ export default class PanZoom extends BaseTool {
 			rotation = 0;
 		}
 
+		this.updateVelocity(screenCenter);
+
 		const transformUpdate = Mat33.translation(delta)
 			.rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
 			.rightMul(Mat33.zRotation(rotation, canvasCenter));
@@ -116,6 +195,7 @@ export default class PanZoom extends BaseTool {
 				Mat33.translation(delta)
 			)
 		);
+		this.updateVelocity(pointer.screenPos);
 		this.lastScreenCenter = pointer.screenPos;
 	}
 
@@ -130,19 +210,52 @@ export default class PanZoom extends BaseTool {
 		}
 		lastTransform.unapply(this.editor);
 		this.transform.apply(this.editor);
+
+		this.lastTimestamp = (new Date()).getTime();
 	}
 
-	public onPointerUp(_event: PointerEvt): void {
-		if (this.transform) {
-			this.transform.unapply(this.editor);
-			this.editor.dispatch(this.transform, false);
+	public 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 shouldInertialScroll =
+				event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+
+		if (shouldInertialScroll && this.velocity !== null) {
+			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();
 		}
-
-		this.editor.display.setDraftMode(false);
-		this.transform = null;
 	}
 
 	public onGestureCancel(): void {
+		this.inertialScroller?.stop();
+		this.velocity = Vec2.zero;
 		this.transform?.unapply(this.editor);
 		this.editor.display.setDraftMode(false);
 		this.transform = null;
@@ -166,6 +279,8 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public 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);
@@ -190,6 +305,8 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean {
+		this.inertialScroller?.stop();
+
 		if (!(this.mode & PanZoomMode.Keyboard)) {
 			return false;
 		}

package/src/tools/SelectionTool/SelectionHandle.ts

@@ -1,4 +1,4 @@
-import { assertUnreachable } from '../../language/assertions';
+import { assertUnreachable } from '../../util/assertions';
 import { Point2, Vec2 } from '../../math/Vec2';
 import { cssPrefix } from './SelectionTool';
 import Selection from './Selection';

package/src/{language → util}/assertions.ts

@@ -1,6 +1,7 @@
 
 // Compile-time assertion that a branch of code is unreachable.
 // See https://stackoverflow.com/a/39419171/17055750
+// @internal
 export const assertUnreachable = (key: never): never => {
 	throw new Error(`Should be unreachable. Key: ${key}.`);
 };

package/src/util/untilNextAnimationFrame.ts

@@ -0,0 +1,9 @@
+
+/** @internal */
+const untilNextAnimationFrame = (): Promise<void> => {
+	return new Promise((resolve) => {
+		requestAnimationFrame(() => resolve());
+	});
+};
+
+export default untilNextAnimationFrame;