js-draw 0.2.3 → 0.3.1

package/dist/src/tools/PipetteTool.js

@@ -1,11 +1,9 @@
 // @internal @packageDocumentation
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export default class PipetteTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.kind = ToolType.Pipette;
         this.colorPreviewListener = null;
         this.colorSelectListener = null;
     }

package/dist/src/tools/SelectionTool.d.ts

@@ -5,7 +5,6 @@ import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
 import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 declare class Selection {
     startPoint: Point2;
     private editor;
@@ -43,7 +42,6 @@ export default class SelectionTool extends BaseTool {
     private handleOverlay;
     private prevSelectionBox;
     private selectionBox;
-    readonly kind: ToolType;
     constructor(editor: Editor, description: string);
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/dist/src/tools/SelectionTool.js

@@ -1,3 +1,6 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -11,13 +14,11 @@ var _a;
 import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import Mat33 from '../math/Mat33';
-// import Mat33 from "../geometry/Mat33";
 import Rect2 from '../math/Rect2';
 import { Vec2 } from '../math/Vec2';
 import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 import SerializableCommand from '../commands/SerializableCommand';
 const handleScreenSize = 30;
 const styles = `
@@ -409,11 +410,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         return localizationTable.transformedElements(this.currentTransfmCommands.length);
     }
 };
+// {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.kind = ToolType.Selection;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
         editor.addStyleSheet(styles);

package/dist/src/tools/TextTool.d.ts

@@ -4,11 +4,9 @@ import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
-import { ToolType } from './ToolController';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
-    kind: ToolType;
     private textStyle;
     private textEditOverlay;
     private textInputElem;

package/dist/src/tools/TextTool.js

@@ -5,14 +5,12 @@ import Mat33 from '../math/Mat33';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
     constructor(editor, description, localizationTable) {
         super(editor.notifier, description);
         this.editor = editor;
         this.localizationTable = localizationTable;
-        this.kind = ToolType.Text;
         this.textInputElem = null;
         this.textTargetPosition = null;
         this.textMeasuringCtx = null;

package/dist/src/tools/ToolController.d.ts

@@ -1,21 +1,18 @@
 import { InputEvt } from '../types';
 import Editor from '../Editor';
 import BaseTool from './BaseTool';
+import ToolEnabledGroup from './ToolEnabledGroup';
 import { ToolLocalization } from './localization';
-export declare enum ToolType {
-    Pen = 0,
-    Selection = 1,
-    Eraser = 2,
-    PanZoom = 3,
-    Text = 4,
-    UndoRedoShortcut = 5,
-    Pipette = 6,
-    Other = 7
-}
 export default class ToolController {
     private tools;
     private activeTool;
+    private primaryToolGroup;
+    /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
+    setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
+    addPrimaryTool(tool: BaseTool): void;
+    getPrimaryTools(): BaseTool[];
+    addTool(tool: BaseTool): void;
     dispatchInputEvent(event: InputEvt): boolean;
-    getMatchingTools(kind: ToolType): BaseTool[];
+    getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
 }

package/dist/src/tools/ToolController.js

@@ -8,31 +8,24 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
-export var ToolType;
-(function (ToolType) {
-    ToolType[ToolType["Pen"] = 0] = "Pen";
-    ToolType[ToolType["Selection"] = 1] = "Selection";
-    ToolType[ToolType["Eraser"] = 2] = "Eraser";
-    ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
-    ToolType[ToolType["Text"] = 4] = "Text";
-    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
-    ToolType[ToolType["Pipette"] = 6] = "Pipette";
-    ToolType[ToolType["Other"] = 7] = "Other";
-})(ToolType || (ToolType = {}));
+import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 export default class ToolController {
+    /** @internal */
     constructor(editor, localization) {
-        const primaryToolEnabledGroup = new ToolEnabledGroup();
+        this.activeTool = null;
+        const primaryToolGroup = new ToolEnabledGroup();
+        this.primaryToolGroup = primaryToolGroup;
         const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
         const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
         const primaryTools = [
-            new SelectionTool(editor, localization.selectionTool),
-            new Eraser(editor, localization.eraserTool),
             // Three pens
             primaryPenTool,
-            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
+            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
             // Highlighter-like pen with width=64
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new Eraser(editor, localization.eraserTool),
+            new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
@@ -41,8 +34,9 @@ export default class ToolController {
             ...primaryTools,
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
+            new ToolSwitcherShortcut(editor),
         ];
-        primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
+        primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
         primaryPenTool.setEnabled(true);
         editor.notifier.on(EditorEventType.ToolEnabled, event => {
@@ -57,6 +51,31 @@ export default class ToolController {
         });
         this.activeTool = null;
     }
+    // Replaces the current set of tools with `tools`. This should only be done before
+    // the creation of the app's toolbar (if using `HTMLToolbar`).
+    setTools(tools, primaryToolGroup) {
+        this.tools = tools;
+        this.primaryToolGroup = primaryToolGroup !== null && primaryToolGroup !== void 0 ? primaryToolGroup : new ToolEnabledGroup();
+    }
+    // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+    // This should be called before creating the app's toolbar.
+    addPrimaryTool(tool) {
+        tool.setToolGroup(this.primaryToolGroup);
+        if (tool.isEnabled()) {
+            this.primaryToolGroup.notifyEnabled(tool);
+        }
+        this.addTool(tool);
+    }
+    getPrimaryTools() {
+        return this.tools.filter(tool => {
+            return tool.getToolGroup() === this.primaryToolGroup;
+        });
+    }
+    // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+    // This should be called before creating the app's toolbar.
+    addTool(tool) {
+        this.tools.push(tool);
+    }
     // Returns true if the event was handled
     dispatchInputEvent(event) {
         var _a, _b;
@@ -116,7 +135,7 @@ export default class ToolController {
         }
         return handled;
     }
-    getMatchingTools(kind) {
-        return this.tools.filter(tool => tool.kind === kind);
+    getMatchingTools(type) {
+        return this.tools.filter(tool => tool instanceof type);
     }
 }

package/dist/src/tools/ToolEnabledGroup.js

@@ -1,4 +1,4 @@
-// Connects a group of tools -- at most one tool in the group must be enabled.
+// Connects a group of tools -- at most one tool in the group can be enabled.
 export default class ToolEnabledGroup {
     constructor() { }
     notifyEnabled(tool) {

package/dist/src/tools/ToolSwitcherShortcut.d.ts

@@ -0,0 +1,8 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class ToolSwitcherShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key }: KeyPressEvent): boolean;
+}

package/dist/src/tools/ToolSwitcherShortcut.js

@@ -0,0 +1,26 @@
+// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
+// @packageDocumentation
+import BaseTool from './BaseTool';
+// {@inheritDoc ToolSwitcherShortcut!}
+export default class ToolSwitcherShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+    }
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
+        // Map keys 0-9 to primary tools.
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
+        if (keyMatch) {
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
+            targetTool = primaryTools[targetIdx];
+        }
+        if (targetTool) {
+            targetTool.setEnabled(true);
+            return true;
+        }
+        return false;
+    }
+}

package/dist/src/tools/UndoRedoShortcut.d.ts

@@ -1,10 +1,8 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export default class UndoRedoShortcut extends BaseTool {
     private editor;
-    kind: ToolType.UndoRedoShortcut;
     constructor(editor: Editor);
     onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
 }

package/dist/src/tools/UndoRedoShortcut.js

@@ -1,10 +1,11 @@
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+// @packageDocumentation
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
+// {@inheritDoc UndoRedoShortcut!}
 export default class UndoRedoShortcut extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.undoRedoTool);
         this.editor = editor;
-        this.kind = ToolType.UndoRedoShortcut;
     }
     // Activate undo/redo
     onKeyPress({ key, ctrlKey }) {

package/dist/src/tools/lib.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @packageDocumentation
+ */
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+export { default as PenTool, PenStyle } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool';
+export { default as EraserTool } from './Eraser';

package/dist/src/tools/lib.js

@@ -0,0 +1,13 @@
+/**
+ * @packageDocumentation
+ */
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+export { default as PenTool } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool';
+export { default as EraserTool } from './Eraser';

package/dist/src/tools/localization.d.ts

@@ -10,6 +10,7 @@ export interface ToolLocalization {
     rightClickDragPanTool: string;
     textTool: string;
     enterTextToInsert: string;
+    changeTool: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -10,6 +10,7 @@ export const defaultToolLocalization = {
     keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
+    changeTool: 'Change tool',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/src/types.d.ts

@@ -8,6 +8,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
+import { BaseWidget } from './lib';
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
@@ -68,7 +69,8 @@ export declare enum EditorEventType {
     ViewportChanged = 7,
     DisplayResized = 8,
     ColorPickerToggled = 9,
-    ColorPickerColorSelected = 10
+    ColorPickerColorSelected = 10,
+    ToolbarDropdownShown = 11
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -109,7 +111,11 @@ export interface ColorPickerColorSelected {
     readonly kind: EditorEventType.ColorPickerColorSelected;
     readonly color: Color4;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected;
+export interface ToolbarDropdownShownEvent {
+    readonly kind: EditorEventType.ToolbarDropdownShown;
+    readonly parentWidget: BaseWidget;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;

package/dist/src/types.js

@@ -22,4 +22,5 @@ export var EditorEventType;
     EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
     EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
     EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
 })(EditorEventType || (EditorEventType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.2.3",
+	"version": "0.3.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -72,7 +72,7 @@
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
 		"prepare": "husky install && yarn build",
-		"prepack": "yarn build && pinst --disable",
+		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {

package/src/EditorImage.ts

@@ -388,7 +388,6 @@ export class ImageNode {
 	}
 
 	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
-		// Don't render components that are < 0.1% of the viewport.
 		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
 		sortLeavesByZIndex(leaves);
 

package/src/components/Stroke.test.ts

@@ -64,6 +64,11 @@ describe('Stroke', () => {
 				"path": "m0,0 l10,10z"
 			}
 		]`);
+		const path = deserialized.getPath();
+
+		// Should cache the original string representation.
+		expect(deserialized.getPath().toString()).toBe('m0,0 l10,10z');
+		path['cachedStringVersion'] = null;
 		expect(deserialized.getPath().toString()).toBe('M0,0L10,10L0,0');
 	});
 });

package/src/components/Stroke.ts

@@ -9,7 +9,6 @@ import { ImageComponentLocalization } from './localization';
 
 interface StrokePart extends RenderablePathSpec {
 	path: Path;
-	bbox: Rect2;
 }
 
 export default class Stroke extends AbstractComponent {
@@ -19,7 +18,7 @@ export default class Stroke extends AbstractComponent {
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
-		this.parts = parts.map(section => {
+		this.parts = parts.map((section): StrokePart => {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
 
@@ -31,7 +30,6 @@ export default class Stroke extends AbstractComponent {
 
 			return {
 				path,
-				bbox: pathBBox,
 
 				// To implement RenderablePathSpec
 				startPoint: path.startPoint,
@@ -54,10 +52,19 @@ export default class Stroke extends AbstractComponent {
 	public render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
 		canvas.startObject(this.getBBox());
 		for (const part of this.parts) {
-			const bbox = part.bbox;
-			if (!visibleRect || bbox.intersects(visibleRect)) {
-				canvas.drawPath(part);
+			const bbox = this.bboxForPart(part.path.bbox, part.style);
+			if (visibleRect) {
+				if (!bbox.intersects(visibleRect)) {
+					continue;
+				}
+
+				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+				if (muchBiggerThanVisible && !part.path.closedRoughlyIntersects(visibleRect)) {
+					continue;
+				}
 			}
+
+			canvas.drawPath(part);
 		}
 		canvas.endObject(this.getLoadSaveData());
 	}
@@ -89,7 +96,6 @@ export default class Stroke extends AbstractComponent {
 
 			return {
 				path: newPath,
-				bbox: newBBox,
 				startPoint: newPath.startPoint,
 				commands: newPath.parts,
 				style: part.style,

package/src/components/builders/FreehandLineBuilder.ts

@@ -12,9 +12,9 @@ import RenderingStyle from '../../rendering/RenderingStyle';
 
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
-	// less than ± 2 px from the curve.
+	// less than ±1 px from the curve.
 	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
-	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
+	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
 
 	return new FreehandLineBuilder(
 		initialPoint, minSmoothingDist, maxSmoothingDist
@@ -180,7 +180,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private roundPoint(point: Point2): Point2 {
-		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth);
+		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
@@ -197,7 +197,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return;
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
+			const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
 			const center = this.roundPoint(this.startPoint.pos);
 
 			// Start on the right, cycle clockwise:
@@ -492,7 +492,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				const dist = proj.minus(point).magnitude();
 
 				const minFit = Math.max(
-					Math.min(this.curveStartWidth, this.curveEndWidth) / 2,
+					Math.min(this.curveStartWidth, this.curveEndWidth) / 3,
 					this.minFitAllowed
 				);
 				if (dist > minFit || dist > this.maxFitAllowed) {
@@ -503,7 +503,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 
 		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
+		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/components/lib.ts

@@ -1,3 +1,6 @@
+export * from './builders/types';
+export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+
 import AbstractComponent from './AbstractComponent';
 import Stroke from './Stroke';
 import Text from './Text';

package/src/lib.ts

@@ -14,7 +14,8 @@
  */
 
 import Editor from './Editor';
-export { EditorEventType } from './types';
+export { default as EditorImage } from './EditorImage';
+export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 
@@ -22,6 +23,9 @@ export { default as Color4 } from './Color4';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
+export * from './tools/lib';
+export * from './toolbar/lib';
+export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 
 export { Editor };

package/src/math/LineSegment2.ts

@@ -126,6 +126,10 @@ export default class LineSegment2 {
 		};
 	}
 
+	public intersects(other: LineSegment2) {
+		return this.intersection(other) !== null;
+	}
+
 	// Returns the closest point on this to [target]
 	public closestPointTo(target: Point2) {
 		// Distance from P1 along this' direction.
@@ -144,4 +148,8 @@ export default class LineSegment2 {
 			return this.p1;
 		}
 	}
+
+	public toString() {
+		return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
+	}
 }

package/src/math/Path.test.ts

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import LineSegment2 from './LineSegment2';
 import Path, { PathCommandType } from './Path';
+import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
 
 describe('Path', () => {
@@ -93,4 +94,56 @@ describe('Path', () => {
 			y: 100,
 		});
 	});
+
+	describe('polylineApproximation', () => {
+		it('should approximate Bézier curves with polylines', () => {
+			const path = Path.fromString('m0,0 l4,4 Q 1,4 4,1z');
+
+			expect(path.polylineApproximation()).toMatchObject([
+				new LineSegment2(Vec2.of(0, 0), Vec2.of(4, 4)),
+				new LineSegment2(Vec2.of(4, 4), Vec2.of(1, 4)),
+				new LineSegment2(Vec2.of(1, 4), Vec2.of(4, 1)),
+				new LineSegment2(Vec2.of(4, 1), Vec2.of(0, 0)),
+			]);
+		});
+	});
+
+	describe('roughlyIntersectsClosed', () => {
+		it('small, line-only path', () => {
+			const path = Path.fromString('m0,0 l10,10 L0,10 z');
+			expect(
+				path.closedRoughlyIntersects(Rect2.fromCorners(Vec2.zero, Vec2.of(20, 20)))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(Rect2.fromCorners(Vec2.zero, Vec2.of(2, 2)))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(10, 1, 1, 1))
+			).toBe(false);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(1, 5, 1, 1))
+			).toBe(true);
+		});
+
+		it('path with Bézier curves', () => {
+			const path = Path.fromString(`
+				M1090,2560
+				L1570,2620
+				Q1710,1300 1380,720
+				Q980,100 -460,-640
+				L-680,-200
+				Q670,470 960,980
+				Q1230,1370 1090,2560
+			`);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(0, 0, 500, 500))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(0, 0, 5, 5))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(-10000, 0, 500, 500))
+			).toBe(false);
+		});
+	});
 });

package/src/math/Path.toString.test.ts

@@ -42,13 +42,15 @@ describe('Path.toString', () => {
 			},
 		]);
 
-		expect(path.toString()).toBe('M1000,2000000L30.0001,40');
+		expect(path.toString()).toBe('M1000,2000000l-970-1999960');
 	});
 
 	it('deserialized path should serialize to the same/similar path, but with rounded components', () => {
 		const path1 = Path.fromString('M100,100 L101,101 Q102,102 90.000000001,89.99999999 Z');
+		path1['cachedStringVersion'] = null; // Clear the cache.
+
 		expect(path1.toString()).toBe([
-			'M100,100', 'L101,101', 'Q102,102 90,90', 'L100,100'
+			'M100,100', 'l1,1', 'q1,1 -11-11', 'l10,10'
 		].join(''));
 	});
 });