js-draw 0.15.1 → 0.16.0

package/src/math/Path.ts

@@ -209,39 +209,42 @@ export default class Path {
 		return result;
 	}
 
+	private static mapPathCommand(part: PathCommand, mapping: (point: Point2)=> Point2): PathCommand {
+		switch (part.kind) {
+		case PathCommandType.MoveTo:
+		case PathCommandType.LineTo:
+			return {
+				kind: part.kind,
+				point: mapping(part.point),
+			};
+			break;
+		case PathCommandType.CubicBezierTo:
+			return {
+				kind: part.kind,
+				controlPoint1: mapping(part.controlPoint1),
+				controlPoint2: mapping(part.controlPoint2),
+				endPoint: mapping(part.endPoint),
+			};
+			break;
+		case PathCommandType.QuadraticBezierTo:
+			return {
+				kind: part.kind,
+				controlPoint: mapping(part.controlPoint),
+				endPoint: mapping(part.endPoint),
+			};
+			break;
+		}
+
+		const exhaustivenessCheck: never = part;
+		return exhaustivenessCheck;
+	}
+
 	public mapPoints(mapping: (point: Point2)=>Point2): Path {
 		const startPoint = mapping(this.startPoint);
 		const newParts: PathCommand[] = [];
 
-		let exhaustivenessCheck: never;
 		for (const part of this.parts) {
-			switch (part.kind) {
-			case PathCommandType.MoveTo:
-			case PathCommandType.LineTo:
-				newParts.push({
-					kind: part.kind,
-					point: mapping(part.point),
-				});
-				break;
-			case PathCommandType.CubicBezierTo:
-				newParts.push({
-					kind: part.kind,
-					controlPoint1: mapping(part.controlPoint1),
-					controlPoint2: mapping(part.controlPoint2),
-					endPoint: mapping(part.endPoint),
-				});
-				break;
-			case PathCommandType.QuadraticBezierTo:
-				newParts.push({
-					kind: part.kind,
-					controlPoint: mapping(part.controlPoint),
-					endPoint: mapping(part.endPoint),
-				});
-				break;
-			default:
-				exhaustivenessCheck = part;
-				return exhaustivenessCheck;
-			}
+			newParts.push(Path.mapPathCommand(part, mapping));
 		}
 
 		return new Path(startPoint, newParts);
@@ -431,6 +434,62 @@ export default class Path {
 		};
 	}
 
+	/**
+	 * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+	 */
+	public static visualEquivalent(renderablePath: RenderablePathSpec, visibleRect: Rect2): RenderablePathSpec {
+		const path = Path.fromRenderable(renderablePath);
+		const strokeWidth = renderablePath.style.stroke?.width ?? 0;
+		const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+
+		// Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+		const expandedRect = visibleRect.grownBy(strokeWidth)
+			.transformedBoundingBox(Mat33.scaling2D(2, visibleRect.center));
+
+		// TODO: Handle simplifying very small paths.
+		if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+			return renderablePath;
+		}
+		const parts: PathCommand[] = [];
+		let startPoint = path.startPoint;
+
+		for (const part of path.parts) {
+			const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+			let endPoint;
+
+			if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+				endPoint = part.point;
+			} else {
+				endPoint = part.endPoint;
+			}
+
+			const intersectsVisible = partBBox.intersects(visibleRect);
+
+			if (intersectsVisible) {
+				// TODO: Can we trim parts of paths that intersect the visible rectangle?
+				parts.push(part);
+			} else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+				// We're stroking (not filling) and the path doesn't intersect the bounding box.
+				// Don't draw it, but preserve the endpoints.
+				parts.push({
+					kind: PathCommandType.MoveTo,
+					point: endPoint,
+				});
+			}
+			else {
+				// Otherwise, we may be filling. Try to roughly preserve the filled region.
+				parts.push({
+					kind: PathCommandType.LineTo,
+					point: endPoint,
+				});
+			}
+
+			startPoint = endPoint;
+		}
+
+		return new Path(path.startPoint, parts).toRenderable(renderablePath.style);
+	}
+
 	private cachedStringVersion: string|null = null;
 
 	public toString(useNonAbsCommands?: boolean): string {

package/src/math/Vec3.test.ts

@@ -31,6 +31,10 @@ describe('Vec3', () => {
 		expect(Vec3.zero.orthog().dot(Vec3.zero)).toBe(0);
 	});
 
+	it('.minus should return the difference between two vectors', () => {
+		expect(Vec3.of(1, 2, 3).minus(Vec3.of(4, 5, 6))).objEq(Vec3.of(1 - 4, 2 - 5, 3 - 6));
+	});
+
 	it('.orthog should return a unit vector', () => {
 		expect(Vec3.zero.orthog().magnitude()).toBe(1);
 		expect(Vec3.unitZ.orthog().magnitude()).toBe(1);

package/src/math/Vec3.ts

@@ -77,7 +77,7 @@ export default class Vec3 {
 	}
 
 	public minus(v: Vec3): Vec3 {
-		return this.plus(v.times(-1));
+		return Vec3.of(this.x - v.x, this.y - v.y, this.z - v.z);
 	}
 
 	public dot(other: Vec3): number {

package/src/rendering/Display.ts

@@ -74,7 +74,7 @@ export default class Display {
 			},
 			blockResolution: cacheBlockResolution,
 			cacheSize: 600 * 600 * 4 * 90,
-			maxScale: 1.4,
+			maxScale: 1.3,
 
 			// Require about 20 strokes with 4 parts each to cache an image in one of the
 			// parts of the cache grid.

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,3 +1,4 @@
+import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../math/Path';
@@ -122,21 +123,37 @@ export default abstract class AbstractRenderer {
 		}
 	}
 
-	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+	// Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
 	// This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
 	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle) {
 		const path = Path.fromRect(rect, lineWidth);
 		this.drawPath(path.toRenderable(lineFill));
 	}
 
-	// Note the start/end of an object with the given bounding box.
+	// Fills a rectangle.
+	public fillRect(rect: Rect2, fill: Color4) {
+		const path = Path.fromRect(rect);
+		this.drawPath(path.toRenderable({ fill }));
+	}
+
+	// Note the start of an object with the given bounding box.
 	// Renderers are not required to support [clip]
 	public startObject(_boundingBox: Rect2, _clip?: boolean) {
 		this.currentPaths = [];
 		this.objectLevel ++;
 	}
 
-	public endObject(_loaderData?: LoadSaveDataTable) {
+	/**
+	 * Notes the end of an object.
+	 * @param _loaderData - a map from strings to JSON-ifyable objects
+	 * and contains properties attached to the object by whatever loader loaded the image. This
+	 * is used to preserve attributes not supported by js-draw when loading/saving an image.
+	 * Renderers may ignore this.
+	 *
+	 * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+	 * Renderers may ignore this.
+	 */
+	public endObject(_loaderData?: LoadSaveDataTable, _objectTags?: string[]) {
 		// Render the paths all at once
 		this.flushPath();
 		this.currentPaths = null;

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,6 +1,7 @@
 import Color4 from '../../Color4';
 import TextComponent from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
+import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
@@ -12,6 +13,7 @@ import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './Abstrac
 export default class CanvasRenderer extends AbstractRenderer {
 	private ignoreObjectsAboveLevel: number|null = null;
 	private ignoringObject: boolean = false;
+	private currentObjectBBox: Rect2|null = null;
 
 	// Minimum square distance of a control point from the line between the end points
 	// for the curve not to be drawn as a line.
@@ -65,15 +67,15 @@ export default class CanvasRenderer extends AbstractRenderer {
 			this.minRenderSizeAnyDimen = 0.5;
 		} else {
 			this.minSquareCurveApproxDist = 0.5;
-			this.minRenderSizeBothDimens = 0.3;
-			this.minRenderSizeAnyDimen = 1e-5;
+			this.minRenderSizeBothDimens = 0.2;
+			this.minRenderSizeAnyDimen = 1e-6;
 		}
 	}
 
 	public displaySize(): Vec2 {
 		return Vec2.of(
 			this.ctx.canvas.clientWidth,
-			this.ctx.canvas.clientHeight
+			this.ctx.canvas.clientHeight,
 		);
 	}
 
@@ -149,6 +151,15 @@ export default class CanvasRenderer extends AbstractRenderer {
 			return;
 		}
 
+		// If part of a huge object, it might be worth trimming the path
+		if (this.currentObjectBBox?.containsRect(this.getViewport().visibleRect)) {
+			// Try to trim/remove parts of the path outside of the bounding box.
+			path = Path.visualEquivalent(
+				path,
+				this.getViewport().visibleRect
+			);
+		}
+
 		super.drawPath(path);
 	}
 
@@ -181,13 +192,14 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	private clipLevels: number[] = [];
-	public startObject(boundingBox: Rect2, clip: boolean) {
+	public startObject(boundingBox: Rect2, clip?: boolean) {
 		if (this.isTooSmallToRender(boundingBox)) {
 			this.ignoreObjectsAboveLevel = this.getNestingLevel();
 			this.ignoringObject = true;
 		}
 
 		super.startObject(boundingBox);
+		this.currentObjectBBox = boundingBox;
 
 		if (!this.ignoringObject && clip) {
 			this.clipLevels.push(this.objectLevel);
@@ -209,6 +221,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 			}
 		}
 
+		this.currentObjectBBox = null;
 		super.endObject();
 
 		// If exiting an object with a too-small-to-draw bounding box,

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -1,12 +1,11 @@
 
-import EventDispatcher from '../../EventDispatcher';
 import Mat33 from '../../math/Mat33';
 import { Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import DummyRenderer from './DummyRenderer';
 
 const makeRenderer = (): [DummyRenderer, Viewport] => {
-	const viewport = new Viewport(new EventDispatcher());
+	const viewport = new Viewport(() => {});
 	return [ new DummyRenderer(viewport), viewport ];
 };
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -248,7 +248,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems = [];
 	}
 
-	public endObject(loaderData?: LoadSaveDataTable) {
+	public endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]) {
 		super.endObject(loaderData);
 
 		// Don't extend paths across objects
@@ -273,6 +273,13 @@ export default class SVGRenderer extends AbstractRenderer {
 				}
 			}
 		}
+
+		// Add class names to the object, if given.
+		if (elemClassNames) {
+			for (const elem of this.objectElems ?? []) {
+				elem.classList.add(...elemClassNames);
+			}
+		}
 	}
 
 	// Not implemented -- use drawPath instead.

package/src/testing/sendTouchEvent.ts

@@ -0,0 +1,43 @@
+import Editor from '../Editor';
+import { Vec2 } from '../math/Vec2';
+import Pointer, { PointerDevice } from '../Pointer';
+import { InputEvtType } from '../types';
+
+
+const sendTouchEvent = (
+	editor: Editor,
+	eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
+	screenPos: Vec2,
+	allOtherPointers?: Pointer[]
+) => {
+	const canvasPos = editor.viewport.screenToCanvas(screenPos);
+
+	let ptrId = 0;
+	let maxPtrId = 0;
+
+	// Get a unique ID for the main pointer
+	// (try to use id=0, but don't use it if it's already in use).
+	for (const pointer of allOtherPointers ?? []) {
+		maxPtrId = Math.max(pointer.id, maxPtrId);
+		if (pointer.id === ptrId) {
+			ptrId = maxPtrId + 1;
+		}
+	}
+
+	const mainPointer = Pointer.ofCanvasPoint(
+		canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch
+	);
+
+	editor.toolController.dispatchInputEvent({
+		kind: eventType,
+		allPointers: [
+			...(allOtherPointers ?? []),
+			mainPointer,
+		],
+		current: mainPointer,
+	});
+
+	return mainPointer;
+};
+
+export default sendTouchEvent;

package/src/toolbar/HTMLToolbar.ts

@@ -18,6 +18,9 @@ import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
 import ActionButtonWidget from './widgets/ActionButtonWidget';
 import InsertImageWidget from './widgets/InsertImageWidget';
+import DocumentPropertiesWidget from './widgets/DocumentPropertiesWidget';
+import OverflowWidget from './widgets/OverflowWidget';
+import { DispatcherEventListener } from '../EventDispatcher';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -37,8 +40,14 @@ interface SpacerOptions {
 
 export default class HTMLToolbar {
 	private container: HTMLElement;
+	private resizeObserver: ResizeObserver;
+	private listeners: DispatcherEventListener[] = [];
 
-	private widgets: Record<string, BaseWidget> = {};
+	private widgetsById: Record<string, BaseWidget> = {};
+	private widgetList: Array<BaseWidget> = [];
+
+	// Widget to toggle overflow menu.
+	private overflowWidget: OverflowWidget|null = null;
 
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
@@ -58,6 +67,15 @@ export default class HTMLToolbar {
 			HTMLToolbar.colorisStarted = true;
 		}
 		this.setupColorPickers();
+
+		if ('ResizeObserver' in window) {
+			this.resizeObserver = new ResizeObserver((_entries) => {
+				this.reLayout();
+			});
+			this.resizeObserver.observe(this.container);
+		} else {
+			console.warn('ResizeObserver not supported. Toolbar will not resize.');
+		}
 	}
 
 	// @internal
@@ -116,7 +134,7 @@ export default class HTMLToolbar {
 			}
 		};
 
-		this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+		this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
 			if (event.kind !== EditorEventType.ColorPickerToggled) {
 				return;
 			}
@@ -124,14 +142,102 @@ export default class HTMLToolbar {
 			// Show/hide the overlay. Making the overlay visible gives users a surface to click
 			// on that shows/hides the color picker.
 			closePickerOverlay.style.display = event.open ? 'block' : 'none';
-		});
+		}));
 
 		// Add newly-selected colors to the swatch.
-		this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
+		this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
 			if (event.kind === EditorEventType.ColorPickerColorSelected) {
 				addColorToSwatch(event.color.toHexString());
 			}
-		});
+		}));
+	}
+
+	private reLayoutQueued: boolean = false;
+	private queueReLayout() {
+		if (!this.reLayoutQueued) {
+			this.reLayoutQueued = true;
+			requestAnimationFrame(() => this.reLayout());
+		}
+	}
+
+	private reLayout() {
+		this.reLayoutQueued = false;
+
+		if (!this.overflowWidget) {
+			return;
+		}
+
+		const getTotalWidth = (widgetList: Array<BaseWidget>) => {
+			let totalWidth = 0;
+			for (const widget of widgetList) {
+				if (!widget.isHidden()) {
+					totalWidth += widget.getButtonWidth();
+				}
+			}
+
+			return totalWidth;
+		};
+
+		let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
+		let shownWidgetWidth = getTotalWidth(this.widgetList) - overflowWidgetsWidth;
+		let availableWidth = this.container.clientWidth * 0.87;
+
+		// If on a device that has enough vertical space, allow
+		// showing two rows of buttons.
+		// TODO: Fix magic numbers
+		if (window.innerHeight > availableWidth * 1.75) {
+			availableWidth *= 1.75;
+		}
+
+		let updatedChildren = false;
+
+		if (shownWidgetWidth + overflowWidgetsWidth <= availableWidth) {
+			// Move widgets to the main menu.
+			const overflowChildren = this.overflowWidget.clearChildren();
+
+			for (const child of overflowChildren) {
+				child.addTo(this.container);
+				child.setIsToplevel(true);
+
+				if (!child.isHidden()) {
+					shownWidgetWidth += child.getButtonWidth();
+				}
+			}
+
+			this.overflowWidget.setHidden(true);
+			overflowWidgetsWidth = 0;
+
+			updatedChildren = true;
+		}
+
+		if (shownWidgetWidth >= availableWidth) {
+			// Move widgets to the overflow menu.
+			this.overflowWidget.setHidden(false);
+
+			// Start with the rightmost widget, move to the leftmost
+			for (
+				let i = this.widgetList.length - 1;
+				i >= 0 && shownWidgetWidth >= availableWidth;
+				i--
+			) {
+				const child = this.widgetList[i];
+
+				if (this.overflowWidget.hasAsChild(child)) {
+					continue;
+				}
+
+				if (child.canBeInOverflowMenu()) {
+					shownWidgetWidth -= child.getButtonWidth();
+					this.overflowWidget.addToOverflow(child);
+				}
+			}
+
+			updatedChildren = true;
+		}
+
+		if (updatedChildren) {
+			this.setupColorPickers();
+		}
 	}
 
 	/**
@@ -147,14 +253,21 @@ export default class HTMLToolbar {
 	 */
 	public addWidget(widget: BaseWidget) {
 		// Prevent name collisions
-		const id = widget.getUniqueIdIn(this.widgets);
+		const id = widget.getUniqueIdIn(this.widgetsById);
 
 		// Add the widget
-		this.widgets[id] = widget;
+		this.widgetsById[id] = widget;
+		this.widgetList.push(widget);
 
 		// Add HTML elements.
-		widget.addTo(this.container);
+		const container = widget.addTo(this.container);
 		this.setupColorPickers();
+
+		// Ensure that the widget gets displayed in the correct
+		// place in the toolbar, even if it's removed and re-added.
+		container.style.order = `${this.widgetList.length}`;
+
+		this.queueReLayout();
 	}
 
 	/**
@@ -200,8 +313,8 @@ export default class HTMLToolbar {
 	public serializeState(): string {
 		const result: Record<string, any> = {};
 
-		for (const widgetId in this.widgets) {
-			result[widgetId] = this.widgets[widgetId].serializeState();
+		for (const widgetId in this.widgetsById) {
+			result[widgetId] = this.widgetsById[widgetId].serializeState();
 		}
 
 		return JSON.stringify(result);
@@ -215,11 +328,11 @@ export default class HTMLToolbar {
 		const data = JSON.parse(state);
 
 		for (const widgetId in data) {
-			if (!(widgetId in this.widgets)) {
+			if (!(widgetId in this.widgetsById)) {
 				console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
 			}
 
-			this.widgets[widgetId].deserializeFrom(data[widgetId]);
+			this.widgetsById[widgetId].deserializeFrom(data[widgetId]);
 		}
 	}
 
@@ -228,7 +341,11 @@ export default class HTMLToolbar {
 	 * 
 	 * @return The added button.
 	 */
-	public addActionButton(title: string|ActionButtonIcon, command: ()=> void): BaseWidget {
+	public addActionButton(
+		title: string|ActionButtonIcon,
+		command: ()=> void,
+		mustBeToplevel: boolean = true
+	): BaseWidget {
 		const titleString = typeof title === 'string' ? title : title.label;
 		const widgetId = 'action-button';
 
@@ -246,7 +363,8 @@ export default class HTMLToolbar {
 			makeIcon,
 			titleString,
 			command,
-			this.editor.localization
+			this.editor.localization,
+			mustBeToplevel,
 		);
 
 		this.addWidget(widget);
@@ -300,27 +418,57 @@ export default class HTMLToolbar {
 			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
-
 		const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
 		if (panZoomTool) {
 			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}
+
+		this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
 	}
 
 	public addDefaultActionButtons() {
+		this.addWidget(new DocumentPropertiesWidget(this.editor, this.localizationTable));
 		this.addUndoRedoButtons();
 	}
 
+	/**
+	 * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
+	 * that this widget is in the correct space (if shown).
+	 * 
+	 * @example
+	 * ```ts
+	 * toolbar.addDefaultToolWidgets();
+	 * toolbar.addOverflowWidget();
+	 * toolbar.addDefaultActionButtons();
+	 * ```
+	 * shows the overflow widget between the default tool widgets and the default action buttons,
+	 * if shown.
+	 */
+	public addOverflowWidget() {
+		this.overflowWidget = new OverflowWidget(this.editor, this.localizationTable);
+		this.addWidget(this.overflowWidget);
+	}
+
 	/**
 	 * Adds both the default tool widgets and action buttons. Equivalent to
 	 * ```ts
 	 * toolbar.addDefaultToolWidgets();
+	 * toolbar.addOverflowWidget();
 	 * toolbar.addDefaultActionButtons();
 	 * ```
 	 */
 	public addDefaults() {
 		this.addDefaultToolWidgets();
+		this.addOverflowWidget();
 		this.addDefaultActionButtons();
 	}
+
+	public remove() {
+		this.container.remove();
+		this.resizeObserver.disconnect();
+
+		for (const listener of this.listeners) {
+			listener.remove();
+		}
+	}
 }