js-draw 0.9.2 → 0.10.0

package/src/rendering/renderers/SVGRenderer.ts

@@ -102,7 +102,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 		if (style.stroke) {
 			pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-			pathElem.setAttribute('stroke-width', style.stroke.width.toString());
+			pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
 		}
 
 		this.elem.appendChild(pathElem);
@@ -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/localization.ts

@@ -2,6 +2,7 @@
 
 export interface ToolbarLocalization {
 	fontLabel: string;
+	textSize: string;
 	touchPanning: string;
 	lockRotation: string;
 	outlinedRectanglePen: string;
@@ -44,6 +45,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',
+	textSize: 'Size: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
 	duplicateSelection: 'Duplicate selection',

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/toolbar/widgets/TextToolWidget.ts

@@ -34,10 +34,14 @@ export default class TextToolWidget extends BaseToolWidget {
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const fontRow = document.createElement('div');
 		const colorRow = document.createElement('div');
+		const sizeRow = document.createElement('div');
 
 		const fontInput = document.createElement('select');
 		const fontLabel = document.createElement('label');
 
+		const sizeInput = document.createElement('input');
+		const sizeLabel = document.createElement('label');
+
 		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
 			this.tool.setColor(color);
 		});
@@ -52,12 +56,20 @@ export default class TextToolWidget extends BaseToolWidget {
 			fontsInInput.add(fontName);
 		};
 
+		sizeInput.setAttribute('type', 'number');
+		sizeInput.min = '1';
+		sizeInput.max = '128';
+
 		fontLabel.innerText = this.localizationTable.fontLabel;
 		colorLabel.innerText = this.localizationTable.colorLabel;
+		sizeLabel.innerText = this.localizationTable.textSize;
 
 		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
 		colorLabel.setAttribute('for', colorInput.id);
 
+		sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+		sizeLabel.setAttribute('for', sizeInput.id);
+
 		addFontToInput('monospace');
 		addFontToInput('serif');
 		addFontToInput('sans-serif');
@@ -68,12 +80,22 @@ export default class TextToolWidget extends BaseToolWidget {
 			this.tool.setFontFamily(fontInput.value);
 		};
 
+		sizeInput.onchange = () => {
+			const size = parseInt(sizeInput.value);
+			if (!isNaN(size) && size > 0) {
+				this.tool.setFontSize(size);
+			}
+		};
+
 		colorRow.appendChild(colorLabel);
 		colorRow.appendChild(colorInputContainer);
 
 		fontRow.appendChild(fontLabel);
 		fontRow.appendChild(fontInput);
 
+		sizeRow.appendChild(sizeLabel);
+		sizeRow.appendChild(sizeInput);
+
 		this.updateDropdownInputs = () => {
 			const style = this.tool.getTextStyle();
 			setColorInputValue(style.renderingStyle.fill);
@@ -82,10 +104,11 @@ export default class TextToolWidget extends BaseToolWidget {
 				addFontToInput(style.fontFamily);
 			}
 			fontInput.value = style.fontFamily;
+			sizeInput.value = `${style.size}`;
 		};
 		this.updateDropdownInputs();
 
-		dropdown.replaceChildren(colorRow, fontRow);
+		dropdown.replaceChildren(colorRow, sizeRow, fontRow);
 		return true;
 	}
 
@@ -96,6 +119,7 @@ export default class TextToolWidget extends BaseToolWidget {
 			...super.serializeState(),
 
 			fontFamily: textStyle.fontFamily,
+			textSize: textStyle.size,
 			color: textStyle.renderingStyle.fill.toHexString(),
 		};
 	}
@@ -109,6 +133,10 @@ export default class TextToolWidget extends BaseToolWidget {
 			this.tool.setColor(Color4.fromHex(state.color));
 		}
 
+		if (state.textSize && typeof(state.textSize) === 'number') {
+			this.tool.setFontSize(state.textSize);
+		}
+
 		super.deserializeFrom(state);
 	}
 }

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/tools/TextTool.ts

@@ -135,8 +135,11 @@ export default class TextTool extends BaseTool {
 		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 character that is tall in most fonts.
+		const tallCharacter = '⎢';
+		const ascent = this.getTextAscent(tallCharacter, this.textStyle);
+
 		const rotation = this.textRotation + viewport.getRotationAngle();
-		const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
 		const scale: Mat33 = this.getTextScaleMatrix();
 		this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
 		this.textInputElem.style.transformOrigin = 'top left';
@@ -208,7 +211,12 @@ export default class TextTool extends BaseTool {
 			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);
-			const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent) as TextComponent[];
+			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();

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;