js-draw 0.2.3 → 0.3.1

package/src/math/Path.ts

@@ -47,12 +47,9 @@ interface IntersectionResult {
 
 type GeometryArrayType = Array<LineSegment2|Bezier>;
 export default class Path {
-	private cachedGeometry: GeometryArrayType|null;
 	public readonly bbox: Rect2;
 
 	public constructor(public readonly startPoint: Point2, public readonly parts: PathCommand[]) {
-		this.cachedGeometry = null;
-
 		// Initial bounding box contains one point: the start point.
 		this.bbox = Rect2.bboxOf([startPoint]);
 
@@ -63,6 +60,8 @@ export default class Path {
 		}
 	}
 
+	private cachedGeometry: GeometryArrayType|null = null;
+
 	// Lazy-loads and returns this path's geometry
 	public get geometry(): Array<LineSegment2|Bezier> {
 		if (this.cachedGeometry) {
@@ -106,6 +105,41 @@ export default class Path {
 		return this.cachedGeometry;
 	}
 
+	private cachedPolylineApproximation: LineSegment2[]|null = null;
+
+	// Approximates this path with a group of line segments.
+	public polylineApproximation(): LineSegment2[] {
+		if (this.cachedPolylineApproximation) {
+			return this.cachedPolylineApproximation;
+		}
+
+		const points: Point2[] = [];
+
+		for (const part of this.parts) {
+			switch (part.kind) {
+			case PathCommandType.CubicBezierTo:
+				points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+				break;
+			case PathCommandType.QuadraticBezierTo:
+				points.push(part.controlPoint, part.endPoint);
+				break;
+			case PathCommandType.MoveTo:
+			case PathCommandType.LineTo:
+				points.push(part.point);
+				break;
+			}
+		}
+
+		const result: LineSegment2[] = [];
+		let prevPoint = this.startPoint;
+		for (const point of points) {
+			result.push(new LineSegment2(prevPoint, point));
+			prevPoint = point;
+		}
+
+		return result;
+	}
+
 	public static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2 {
 		const points = [startPoint];
 		let exhaustivenessCheck: never;
@@ -129,6 +163,10 @@ export default class Path {
 	}
 
 	public intersection(line: LineSegment2): IntersectionResult[] {
+		if (!line.bbox.intersects(this.bbox)) {
+			return [];
+		}
+
 		const result: IntersectionResult[] = [];
 		for (const part of this.geometry) {
 			if (part instanceof LineSegment2) {
@@ -229,6 +267,55 @@ export default class Path {
 		]);
 	}
 
+	// Treats this as a closed path and returns true if part of `rect` is roughly within
+	// this path's interior.
+	//
+	// Note: Assumes that this is a closed, non-self-intersecting path.
+	public closedRoughlyIntersects(rect: Rect2): boolean {
+		if (rect.containsRect(this.bbox)) {
+			return true;
+		}
+
+		// Choose a point outside of the path.
+		const startPt = this.bbox.topLeft.minus(Vec2.of(1, 1));
+		const testPts = rect.corners;
+		const polygon = this.polylineApproximation();
+
+		for (const point of testPts) {
+			const testLine = new LineSegment2(point, startPt);
+
+			let intersectionCount = 0;
+			for (const line of polygon) {
+				if (line.intersects(testLine)) {
+					intersectionCount ++;
+				}
+			}
+
+			// Odd? The point is within the polygon!
+			if (intersectionCount % 2 === 1) {
+				return true;
+			}
+		}
+
+		// Grow the rectangle for possible additional precision.
+		const grownRect = rect.grownBy(Math.min(rect.size.x, rect.size.y));
+		const edges = [];
+		for (const subrect of grownRect.divideIntoGrid(4, 4)) {
+			edges.push(...subrect.getEdges());
+		}
+
+		for (const edge of edges) {
+			for (const line of polygon) {
+				if (edge.intersects(line)) {
+					return true;
+				}
+			}
+		}
+
+		// Even? Probably no intersection.
+		return false;
+	}
+
 	// Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
 	// the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
 	// that traces [rect].
@@ -273,6 +360,10 @@ export default class Path {
 	}
 
 	public static fromRenderable(renderable: RenderablePathSpec): Path {
+		if (renderable.path) {
+			return renderable.path;
+		}
+
 		return new Path(renderable.startPoint, renderable.commands);
 	}
 
@@ -281,18 +372,23 @@ export default class Path {
 			startPoint: this.startPoint,
 			style: fill,
 			commands: this.parts,
+			path: this,
 		};
 	}
 
+	private cachedStringVersion: string|null = null;
+
 	public toString(): string {
+		if (this.cachedStringVersion) {
+			return this.cachedStringVersion;
+		}
+
 		// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-		//            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
-		//            it also probably isn't worth it.
-		const makeRelativeCommands =
-			Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
-			&& Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
+		const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
 
-		return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		this.cachedStringVersion = result;
+		return result;
 	}
 
 	public serialize(): string {
@@ -301,7 +397,7 @@ export default class Path {
 
 	// @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
 	//   conversions can lead to smaller output strings, but also take time.
-	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands: boolean = true): string {
+	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string {
 		const result: string[] = [];
 
 		let prevPoint: Point2|undefined;
@@ -561,7 +657,9 @@ export default class Path {
 			}
 		}
 
-		return new Path(startPos ?? Vec2.zero, commands);
+		const result = new Path(startPos ?? Vec2.zero, commands);
+		result.cachedStringVersion = pathString;
+		return result;
 	}
 
 	public static empty: Path = new Path(Vec2.zero, []);

package/src/math/Rect2.ts

@@ -12,7 +12,7 @@ export interface RectTemplate {
 	height?: number;
 }
 
-// invariant: w > 0, h > 0.
+// invariant: w ≥ 0, h ≥ 0.
 export default class Rect2 {
 	// Derived state:
 

package/src/math/Triangle.ts

@@ -0,0 +1,29 @@
+import Mat33 from './Mat33';
+import Vec3 from './Vec3';
+
+export default class Triangle {
+	public constructor(
+        public readonly vertex1: Vec3,
+        public readonly vertex2: Vec3,
+        public readonly vertex3: Vec3,
+	) {}
+
+	public map(mapping: (vertex: Vec3)=>Vec3): Triangle {
+		return new Triangle(
+			mapping(this.vertex1),
+			mapping(this.vertex2),
+			mapping(this.vertex3),
+		);
+	}
+
+	// Transform, treating this as composed of 2D points.
+	public transformed2DBy(affineTransform: Mat33) {
+		return this.map(affineTransform.transformVec2);
+	}
+
+	// Transforms this by a linear transform --- verticies are treated as
+	// 3D points.
+	public transformedBy(linearTransform: Mat33) {
+		return this.map(linearTransform.transformVec3);
+	}
+}

package/src/rendering/Display.ts

@@ -76,9 +76,9 @@ export default class Display {
 				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
 			},
 			blockResolution: cacheBlockResolution,
-			cacheSize: 500 * 500 * 4 * 150,
-			maxScale: 1.5,
-			minComponentsPerCache: 45,
+			cacheSize: 600 * 600 * 4 * 90,
+			maxScale: 1.4,
+			minComponentsPerCache: 20,
 			minComponentsToUseCache: 105,
 		});
 

package/src/rendering/caching/RenderingCacheNode.ts

@@ -221,11 +221,13 @@ export default class RenderingCacheNode {
 			}
 		} else {
 			// Determine whether we already have rendered the items
+			const tooSmallToRender = (rect: Rect2) => rect.w / this.region.w < 1 / this.cacheState.props.blockResolution.x;
+
 			const leaves = [];
 			for (const item of items) {
 				leaves.push(
 					...item.getLeavesIntersectingRegion(
-						this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x,
+						this.region, tooSmallToRender,
 					)
 				);
 			}

package/src/rendering/renderers/AbstractRenderer.ts

@@ -11,6 +11,7 @@ export interface RenderablePathSpec {
 	startPoint: Point2;
 	commands: PathCommand[];
 	style: RenderingStyle;
+	path?: Path;
 }
 
 export default abstract class AbstractRenderer {

package/src/rendering/renderers/CanvasRenderer.ts

@@ -59,13 +59,13 @@ export default class CanvasRenderer extends AbstractRenderer {
 	// Set parameters for lower/higher quality rendering
 	public setDraftMode(draftMode: boolean) {
 		if (draftMode) {
-			this.minSquareCurveApproxDist = 64;
-			this.minRenderSizeBothDimens = 8;
-			this.minRenderSizeAnyDimen = 2;
+			this.minSquareCurveApproxDist = 9;
+			this.minRenderSizeBothDimens = 2;
+			this.minRenderSizeAnyDimen = 0.5;
 		} else {
-			this.minSquareCurveApproxDist = 1;
-			this.minRenderSizeBothDimens = 0.5;
-			this.minRenderSizeAnyDimen = 0;
+			this.minSquareCurveApproxDist = 0.5;
+			this.minRenderSizeBothDimens = 0.3;
+			this.minRenderSizeAnyDimen = 1e-5;
 		}
 	}
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -2,23 +2,19 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
 import Mat33 from '../../math/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { toRoundedString } from '../../math/rounding';
 import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
-	private currentPath: PathCommand[]|null;
-	private pathStart: Point2|null;
-
-	private lastPathStyle: RenderingStyle|null;
-	private lastPath: PathCommand[]|null;
-	private lastPathStart: Point2|null;
+	private lastPathStyle: RenderingStyle|null = null;
+	private lastPathString: string[] = [];
 	private objectElems: SVGElement[]|null = null;
 
 	private overwrittenAttrs: Record<string, string|null> = {};
@@ -58,46 +54,17 @@ export default class SVGRenderer extends AbstractRenderer {
 			}
 		}
 		this.overwrittenAttrs = {};
-	}
-
-	protected beginPath(startPoint: Point2) {
-		this.currentPath = [];
-		this.pathStart = this.canvasToScreen(startPoint);
-		this.lastPathStart ??= this.pathStart;
-	}
-
-	protected endPath(style: RenderingStyle) {
-		if (this.currentPath == null) {
-			throw new Error('No path exists to end! Make sure beginPath was called!');
-		}
-
-		// Try to extend the previous path, if possible
-		if (style.fill.eq(this.lastPathStyle?.fill) && this.lastPath != null) {
-			this.lastPath.push({
-				kind: PathCommandType.MoveTo,
-				point: this.pathStart!,
-			}, ...this.currentPath);
-			this.pathStart = null;
-			this.currentPath = null;
-		} else {
-			this.addPathToSVG();
-			this.lastPathStart = this.pathStart;
-			this.lastPathStyle = style;
-			this.lastPath = this.currentPath;
-
-			this.pathStart = null;
-			this.currentPath = null;
-		}
+		this.lastPathString = [];
 	}
 
 	// Push [this.fullPath] to the SVG
 	private addPathToSVG() {
-		if (!this.lastPathStyle || !this.lastPath) {
+		if (!this.lastPathStyle || this.lastPathString.length === 0) {
 			return;
 		}
 
 		const pathElem = document.createElementNS(svgNameSpace, 'path');
-		pathElem.setAttribute('d', Path.toString(this.lastPathStart!, this.lastPath));
+		pathElem.setAttribute('d', this.lastPathString.join(' '));
 
 		const style = this.lastPathStyle;
 		pathElem.setAttribute('fill', style.fill.toHexString());
@@ -111,6 +78,19 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(pathElem);
 	}
 
+	public drawPath(pathSpec: RenderablePathSpec) {
+		const style = pathSpec.style;
+		const path = Path.fromRenderable(pathSpec);
+
+		// Try to extend the previous path, if possible
+		if (!style.fill.eq(this.lastPathStyle?.fill) || this.lastPathString.length === 0) {
+			this.addPathToSVG();
+			this.lastPathStyle = style;
+			this.lastPathString = [];
+		}
+		this.lastPathString.push(path.toString());
+	}
+
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 
@@ -146,8 +126,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		super.startObject(boundingBox);
 
 		// Only accumulate a path within an object
-		this.lastPath = null;
-		this.lastPathStart = null;
+		this.lastPathString = [];
 		this.lastPathStyle = null;
 		this.objectElems = [];
 	}
@@ -179,49 +158,16 @@ export default class SVGRenderer extends AbstractRenderer {
 		}
 	}
 
-	protected lineTo(point: Point2) {
-		point = this.canvasToScreen(point);
-
-		this.currentPath!.push({
-			kind: PathCommandType.LineTo,
-			point,
-		});
-	}
-
-	protected moveTo(point: Point2) {
-		point = this.canvasToScreen(point);
-
-		this.currentPath!.push({
-			kind: PathCommandType.MoveTo,
-			point,
-		});
-	}
-
+	// Not implemented -- use drawPath instead.
+	private unimplementedMessage() { throw new Error('Not implemenented!'); }
+	protected beginPath(_startPoint: Point2) { this.unimplementedMessage(); }
+	protected endPath(_style: RenderingStyle) { this.unimplementedMessage(); }
+	protected lineTo(_point: Point2) { this.unimplementedMessage(); }
+	protected moveTo(_point: Point2) { this.unimplementedMessage(); }
 	protected traceCubicBezierCurve(
-		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
-	) {
-		controlPoint1 = this.canvasToScreen(controlPoint1);
-		controlPoint2 = this.canvasToScreen(controlPoint2);
-		endPoint = this.canvasToScreen(endPoint);
-
-		this.currentPath!.push({
-			kind: PathCommandType.CubicBezierTo,
-			controlPoint1,
-			controlPoint2,
-			endPoint,
-		});
-	}
-
-	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
-		controlPoint = this.canvasToScreen(controlPoint);
-		endPoint = this.canvasToScreen(endPoint);
-
-		this.currentPath!.push({
-			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint,
-			endPoint,
-		});
-	}
+		_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2
+	) { this.unimplementedMessage(); }
+	protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2) { this.unimplementedMessage(); }
 
 	public drawPoints(...points: Point2[]) {
 		points.map(point => {

package/src/toolbar/HTMLToolbar.ts

@@ -1,32 +1,33 @@
 import Editor from '../Editor';
-import { ToolType } from '../tools/ToolController';
 import { EditorEventType } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import Pen from '../tools/Pen';
-import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import { makeRedoIcon, makeUndoIcon } from './icons';
 import PanZoom from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
-import PenWidget from './widgets/PenWidget';
-import EraserWidget from './widgets/EraserWidget';
-import { SelectionWidget } from './widgets/SelectionWidget';
+import PenToolWidget from './widgets/PenToolWidget';
+import EraserWidget from './widgets/EraserToolWidget';
+import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-
+import BaseWidget from './widgets/BaseWidget';
+import { EraserTool, PenTool } from '../tools/lib';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
+type UpdateColorisCallback = ()=>void;
 
 export default class HTMLToolbar {
 	private container: HTMLElement;
 
 	private static colorisStarted: boolean = false;
+	private updateColoris: UpdateColorisCallback|null = null;
 
+	/** @internal */
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
 		private localizationTable: ToolbarLocalization = defaultToolbarLocalization,
@@ -45,6 +46,12 @@ export default class HTMLToolbar {
 
 	// @internal
 	public setupColorPickers() {
+		// Much of the setup only needs to be done once.
+		if (this.updateColoris) {
+			this.updateColoris();
+			return;
+		}
+
 		const closePickerOverlay = document.createElement('div');
 		closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
 		this.editor.createHTMLOverlay(closePickerOverlay);
@@ -73,6 +80,7 @@ export default class HTMLToolbar {
 			});
 		};
 		initColoris();
+		this.updateColoris = initColoris;
 
 		const addColorToSwatch = (newColor: string) => {
 			let alreadyPresent = false;
@@ -110,6 +118,13 @@ export default class HTMLToolbar {
 		});
 	}
 
+	// Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+	// (i.e. its `addTo` method should not have been called).
+	public addWidget(widget: BaseWidget) {
+		widget.addTo(this.container);
+		this.setupColorPickers();
+	}
+
 	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
 		button.classList.add(`${toolbarCSSPrefix}button`);
@@ -134,7 +149,7 @@ export default class HTMLToolbar {
 		return button;
 	}
 
-	private addUndoRedoButtons() {
+	public addUndoRedoButtons() {
 		const undoRedoGroup = document.createElement('div');
 		undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
 
@@ -166,47 +181,29 @@ export default class HTMLToolbar {
 
 	public addDefaultToolWidgets() {
 		const toolController = this.editor.toolController;
-		for (const tool of toolController.getMatchingTools(ToolType.Pen)) {
-			if (!(tool instanceof Pen)) {
-				throw new Error('All `Pen` tools must have kind === ToolType.Pen');
-			}
-
-			const widget = new PenWidget(
+		for (const tool of toolController.getMatchingTools(PenTool)) {
+			const widget = new PenToolWidget(
 				this.editor, tool, this.localizationTable,
 			);
-			widget.addTo(this.container);
+			this.addWidget(widget);
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.Eraser)) {
-			if (!(tool instanceof Eraser)) {
-				throw new Error('All Erasers must have kind === ToolType.Eraser!');
-			}
-
-			(new EraserWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(EraserTool)) {
+			this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.Selection)) {
-			if (!(tool instanceof SelectionTool)) {
-				throw new Error('All SelectionTools must have kind === ToolType.Selection');
-			}
-
-			(new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(SelectionTool)) {
+			this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.Text)) {
-			if (!(tool instanceof TextTool)) {
-				throw new Error('All text tools must have kind === ToolType.Text');
-			}
-	
-			(new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(TextTool)) {
+			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
-		if (panZoomTool && panZoomTool instanceof PanZoom) {
-			(new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
+		const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+		if (panZoomTool) {
+			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}
-
-		this.setupColorPickers();
 	}
 
 	public addDefaultActionButtons() {

package/src/toolbar/icons.ts

@@ -287,7 +287,11 @@ export const makeTextIcon = (textStyle: TextStyle) => {
 	return icon;
 };
 
-export const makePenIcon = (tipThickness: number, color: string) => {
+export const makePenIcon = (tipThickness: number, color: string|Color4) => {
+	if (color instanceof Color4) {
+		color = color.toHexString();
+	}
+
 	const icon = document.createElementNS(svgNamespace, 'svg');
 	icon.setAttribute('viewBox', '0 0 100 100');
 

package/src/toolbar/lib.ts

@@ -0,0 +1,4 @@
+
+export * from './widgets/lib';
+export * as icons from './icons';
+export * from './makeColorInput';

package/src/toolbar/makeColorInput.ts

@@ -1,7 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import PipetteTool from '../tools/PipetteTool';
-import { ToolType } from '../tools/ToolController';
 import { EditorEventType } from '../types';
 import { makePipetteIcon } from './icons';
 
@@ -77,7 +76,7 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	};
 	updatePipetteIcon();
 
-	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(ToolType.Pipette)[0] as PipetteTool|undefined;
+	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
 	const endColorSelectMode = () => {
 		pipetteTool?.clearColorListener();
 		updatePipetteIcon();

package/src/toolbar/types.ts

@@ -1,9 +1,5 @@
-export enum ToolbarButtonType {
-	ToggleButton,
-	ActionButton,
-}
 
 export interface ActionButtonIcon {
 	icon: Element;
 	label: string;
-}
+}