js-draw 0.0.9 → 0.1.1

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

@@ -1,3 +1,4 @@
+import Command from '../commands/Command';
 import Editor from '../Editor';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
@@ -30,6 +31,7 @@ declare class Selection {
     private recomputeBoxRotation;
     getSelectedItemCount(): number;
     updateUI(): void;
+    deleteSelectedObjects(): Command;
 }
 export default class SelectionTool extends BaseTool {
     private editor;
@@ -45,5 +47,6 @@ export default class SelectionTool extends BaseTool {
     onGestureCancel(): void;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    clearSelection(): void;
 }
 export {};

package/dist/src/tools/SelectionTool.js

@@ -7,12 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import Erase from '../commands/Erase';
 import Mat33 from '../geometry/Mat33';
 // import Mat33 from "../geometry/Mat33";
 import Rect2 from '../geometry/Rect2';
 import { Vec2 } from '../geometry/Vec2';
 import { EditorEventType } from '../types';
-import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 const handleScreenSize = 30;
@@ -114,7 +114,7 @@ const makeDraggable = (element, onDrag, onDragEnd) => {
     element.addEventListener('pointercancel', onPointerEnd);
 };
 // Maximum number of strokes to transform without a re-render.
-const updateChunkSize = 50;
+const updateChunkSize = 100;
 class Selection {
     constructor(startPoint, editor) {
         this.startPoint = startPoint;
@@ -284,10 +284,13 @@ class Selection {
             if (this.region.containsRect(elem.getBBox())) {
                 return true;
             }
-            else if (this.region.getEdges().some(edge => elem.intersects(edge))) {
-                return true;
+            // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+            // As such, test with more lines than just this' edges.
+            const testLines = [];
+            for (const subregion of this.region.divideIntoGrid(2, 2)) {
+                testLines.push(...subregion.getEdges());
             }
-            return false;
+            return testLines.some(edge => elem.intersects(edge));
         });
         // Find the bounding box of all selected elements.
         if (!this.recomputeRegion()) {
@@ -344,6 +347,9 @@ class Selection {
         this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
         this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
     }
+    deleteSelectedObjects() {
+        return new Erase(this.selectedElems);
+    }
 }
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
@@ -388,26 +394,9 @@ export default class SelectionTool extends BaseTool {
             tool: this,
         });
         if (hasSelection) {
-            const visibleRect = this.editor.viewport.visibleRect;
-            const selectionRect = this.selectionBox.region;
             this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
-            // Try to move the selection within the center 2/3rds of the viewport.
-            const targetRect = visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
-            // Ensure that the selection fits within the target
-            if (targetRect.w < selectionRect.w || targetRect.h < selectionRect.h) {
-                const multiplier = Math.max(selectionRect.w / targetRect.w, selectionRect.h / targetRect.h);
-                const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
-                const viewportContentTransform = visibleRectTransform.inverse();
-                (new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-            }
-            // Ensure that the top left is visible
-            if (!targetRect.containsRect(selectionRect)) {
-                // target position - current position
-                const translation = selectionRect.center.minus(targetRect.center);
-                const visibleRectTransform = Mat33.translation(translation);
-                const viewportContentTransform = visibleRectTransform.inverse();
-                (new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-            }
+            const selectionRect = this.selectionBox.region;
+            this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
         }
     }
     onPointerUp(event) {
@@ -434,4 +423,13 @@ export default class SelectionTool extends BaseTool {
     getSelection() {
         return this.selectionBox;
     }
+    clearSelection() {
+        this.handleOverlay.replaceChildren();
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = null;
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
 }

package/dist/src/types.d.ts

@@ -89,8 +89,9 @@ export interface ColorPickerToggled {
 export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
 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;
 export interface ImageLoader {
-    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener): Promise<Rect2>;
+    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }
 export interface StrokeDataPoint {
     pos: Point2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -9,9 +9,9 @@ import EventDispatcher from './EventDispatcher';
 import { Point2, Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/AbstractRenderer';
-import Display, { RenderingMode } from './Display';
-import SVGRenderer from './rendering/SVGRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import Display, { RenderingMode } from './rendering/Display';
+import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
@@ -311,6 +311,7 @@ export class Editor {
 	private async asyncApplyOrUnapplyCommands(
 		commands: Command[], apply: boolean, updateChunkSize: number
 	) {
+		this.display.setDraftMode(true);
 		for (let i = 0; i < commands.length; i += updateChunkSize) {
 			this.showLoadingWarning(i / commands.length);
 
@@ -332,6 +333,7 @@ export class Editor {
 				});
 			}
 		}
+		this.display.setDraftMode(false);
 		this.hideLoadingWarning();
 	}
 
@@ -378,7 +380,8 @@ export class Editor {
 			);
 		}
 
-		this.image.render(renderer, this.viewport);
+		//this.image.render(renderer, this.viewport);
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}
 
@@ -461,22 +464,28 @@ export class Editor {
 
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
-		const imageRect = await loader.start((component) => {
+		this.display.setDraftMode(true);
+
+		await loader.start((component) => {
 			(new EditorImage.AddElementCommand(component)).apply(this);
 		}, (countProcessed: number, totalToProcess: number) => {
-			if (countProcessed % 100 === 0) {
+			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);
-				this.rerender(false);
+				this.rerender();
 				return new Promise(resolve => {
 					requestAnimationFrame(() => resolve());
 				});
 			}
 
 			return null;
+		}, (importExportRect: Rect2) => {
+			this.setImportExportRect(importExportRect).apply(this);
+			this.viewport.zoomTo(importExportRect).apply(this);
 		});
 		this.hideLoadingWarning();
 
-		this.setImportExportRect(imageRect).apply(this);
+		this.display.setDraftMode(false);
+		this.queueRerender();
 	}
 
 	// Returns the size of the visible region of the output SVG

package/src/EditorImage.test.ts

@@ -5,8 +5,8 @@ import Stroke from './components/Stroke';
 import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
-import DummyRenderer from './rendering/DummyRenderer';
-import { RenderingStyle } from './rendering/AbstractRenderer';
+import DummyRenderer from './rendering/renderers/DummyRenderer';
+import { RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import createEditor from './testing/createEditor';
 
 describe('EditorImage', () => {

package/src/EditorImage.ts

@@ -1,10 +1,15 @@
 import Editor from './Editor';
-import AbstractRenderer from './rendering/AbstractRenderer';
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Command from './commands/Command';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
+import RenderingCache from './rendering/caching/RenderingCache';
+
+export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
+	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
+};
 
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
@@ -20,7 +25,7 @@ export default class EditorImage {
 
 	// Returns the parent of the given element, if it exists.
 	public findParent(elem: AbstractComponent): ImageNode|null {
-		const candidates = this.root.getLeavesInRegion(elem.getBBox());
+		const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
 		for (const candidate of candidates) {
 			if (candidate.getContent() === elem) {
 				return candidate;
@@ -29,25 +34,18 @@ export default class EditorImage {
 		return null;
 	}
 
-	private sortLeaves(leaves: ImageNode[]) {
-		leaves.sort((a, b) => a.getContent()!.zIndex - b.getContent()!.zIndex);
+	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
+		cache.render(screenRenderer, this.root, viewport);
 	}
 
-	public render(renderer: AbstractRenderer, viewport: Viewport, minFraction: number = 0.001) {
-		// Don't render components that are < 0.1% of the viewport.
-		const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
-		this.sortLeaves(leaves);
-
-		for (const leaf of leaves) {
-			// Leaves by definition have content
-			leaf.getContent()!.render(renderer, viewport.visibleRect);
-		}
+	public render(renderer: AbstractRenderer, viewport: Viewport) {
+		this.root.render(renderer, viewport.visibleRect);
 	}
 
 	// Renders all nodes, even ones not within the viewport
 	public renderAll(renderer: AbstractRenderer) {
 		const leaves = this.root.getLeaves();
-		this.sortLeaves(leaves);
+		sortLeavesByZIndex(leaves);
 
 		for (const leaf of leaves) {
 			leaf.getContent()!.render(renderer, leaf.getBBox());
@@ -55,8 +53,9 @@ export default class EditorImage {
 	}
 
 	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
-		const leaves = this.root.getLeavesInRegion(region);
-		this.sortLeaves(leaves);
+		const leaves = this.root.getLeavesIntersectingRegion(region);
+		sortLeavesByZIndex(leaves);
+
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
@@ -100,15 +99,17 @@ export default class EditorImage {
 }
 
 export type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
 
-
+// TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
 export class ImageNode {
 	private content: AbstractComponent|null;
 	private bbox: Rect2;
 	private children: ImageNode[];
 	private targetChildCount: number = 30;
-	private minZIndex: number|null;
-	private maxZIndex: number|null;
+
+	private id: number;
+	private static idCounter: number = 0;
 
 	public constructor(
 		private parent: ImageNode|null = null
@@ -117,8 +118,15 @@ export class ImageNode {
 		this.bbox = Rect2.empty;
 		this.content = null;
 
-		this.minZIndex = null;
-		this.maxZIndex = null;
+		this.id = ImageNode.idCounter++;
+	}
+
+	public getId() {
+		return this.id;
+	}
+
+	public onContentChange() {
+		this.id = ImageNode.idCounter++;
 	}
 
 	public getContent(): AbstractComponent|null {
@@ -129,18 +137,25 @@ export class ImageNode {
 		return this.parent;
 	}
 
-	private getChildrenInRegion(region: Rect2): ImageNode[] {
+	private getChildrenIntersectingRegion(region: Rect2): ImageNode[] {
 		return this.children.filter(child => {
 			return child.getBBox().intersects(region);
 		});
 	}
 
+	public getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[] {
+		if (this.content) {
+			return [this];
+		}
+		return this.getChildrenIntersectingRegion(region);
+	}
+
 	// Returns a list of `ImageNode`s with content (and thus no children).
-	public getLeavesInRegion(region: Rect2, minFractionOfRegion: number = 0): ImageNode[] {
+	public getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[] {
 		const result: ImageNode[] = [];
 
 		// Don't render if too small
-		if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+		if (isTooSmall?.(this.bbox)) {
 			return [];
 		}
 
@@ -148,9 +163,9 @@ export class ImageNode {
 			result.push(this);
 		}
 
-		const children = this.getChildrenInRegion(region);
+		const children = this.getChildrenIntersectingRegion(region);
 		for (const child of children) {
-			result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+			result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
 		}
 
 		return result;
@@ -172,6 +187,8 @@ export class ImageNode {
 	}
 
 	public addLeaf(leaf: AbstractComponent): ImageNode {
+		this.onContentChange();
+
 		if (this.content === null && this.children.length === 0) {
 			this.content = leaf;
 			this.recomputeBBox(true);
@@ -239,12 +256,8 @@ export class ImageNode {
 		const oldBBox = this.bbox;
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
-			this.minZIndex = this.content.zIndex;
-			this.maxZIndex = this.content.zIndex;
 		} else {
 			this.bbox = Rect2.empty;
-			this.minZIndex = null;
-			this.maxZIndex = null;
 			let isFirst = true;
 
 			for (const child of this.children) {
@@ -254,15 +267,6 @@ export class ImageNode {
 				} else {
 					this.bbox = this.bbox.union(child.getBBox());
 				}
-
-				this.minZIndex ??= child.minZIndex;
-				this.maxZIndex ??= child.maxZIndex;
-				if (child.minZIndex !== null && this.minZIndex !== null) {
-					this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
-				}
-				if (child.maxZIndex !== null && this.maxZIndex !== null) {
-					this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
-				}
 			}
 		}
 
@@ -295,9 +299,6 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
-		this.minZIndex = null;
-		this.maxZIndex = null;
-
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];
@@ -322,4 +323,15 @@ export class ImageNode {
 		this.parent = null;
 		this.children = [];
 	}
+
+	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);
+
+		for (const leaf of leaves) {
+			// Leaves by definition have content
+			leaf.getContent()!.render(renderer, visibleRect);
+		}
+	}
 }

package/src/SVGLoader.ts

@@ -5,8 +5,8 @@ import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
-import { RenderablePathSpec, RenderingStyle } from './rendering/AbstractRenderer';
-import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 type OnFinishListener = ()=> void;
 
@@ -16,6 +16,8 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
+	private onDetermineExportRect: OnDetermineExportRectListener|null = null;
+
 	private processedCount: number = 0;
 	private totalToProcess: number = 0;
 	private rootViewBox: Rect2|null;
@@ -126,6 +128,7 @@ export default class SVGLoader implements ImageLoader {
 		}
 
 		this.rootViewBox = new Rect2(x, y, width, height);
+		this.onDetermineExportRect?.(this.rootViewBox);
 	}
 
 	private updateSVGAttrs(node: SVGSVGElement) {
@@ -172,10 +175,12 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	public async start(
-		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener
-	): Promise<Rect2> {
+		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener,
+		onDetermineExportRect: OnDetermineExportRectListener|null = null
+	): Promise<void> {
 		this.onAddComponent = onAddComponent;
 		this.onProgress = onProgress;
+		this.onDetermineExportRect = onDetermineExportRect;
 
 		// Estimate the number of tags to process.
 		this.totalToProcess = this.source.childElementCount;
@@ -185,14 +190,12 @@ export default class SVGLoader implements ImageLoader {
 		await this.visit(this.source);
 
 		const viewBox = this.rootViewBox;
-		let result = defaultSVGViewRect;
 
-		if (viewBox) {
-			result = Rect2.of(viewBox);
+		if (!viewBox) {
+			this.onDetermineExportRect?.(defaultSVGViewRect);
 		}
 
 		this.onFinish?.();
-		return result;
 	}
 
 	// TODO: Handling unsafe data! Tripple-check that this is secure!

package/src/Viewport.ts

@@ -118,12 +118,20 @@ export class Viewport {
 		return this.transform;
 	}
 
+	public getResolution(): Vec2 {
+		return this.screenRect.size;
+	}
+
 	// Returns the amount a vector on the canvas is scaled to become a vector on the screen.
 	public getScaleFactor(): number {
 		// Use transformVec3 to avoid translating the vector
 		return this.transform.transformVec3(Vec3.unitX).magnitude();
 	}
 
+	public getSizeOfPixelOnCanvas(): number {
+		return 1/this.getScaleFactor();
+	}
+
 	// Returns the angle of the canvas in radians
 	public getRotationAngle(): number {
 		return this.transform.transformVec3(Vec3.unitX).angle();
@@ -158,6 +166,54 @@ export class Viewport {
 	public roundPoint(point: Point2): Point2 {
 		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
 	}
+
+	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
+	// centered in the viewport.
+	// Returns null if no transformation is necessary
+	public zoomTo(toMakeVisible: Rect2): Command {
+		let transform = Mat33.identity;
+
+		// Try to move the selection within the center 2/3rds of the viewport.
+		const recomputeTargetRect = () => {
+			// transform transforms objects on the canvas. As such, we need to invert it
+			// to transform the viewport.
+			const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+			return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+		};
+
+		let targetRect = recomputeTargetRect();
+		const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+
+		// Ensure that toMakeVisible is at least 1/8th of the visible region.
+		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+
+		if (largerThanTarget || muchSmallerThanTarget) {
+			// If larger than the target, ensure that the longest axis is visible.
+			// If smaller, shrink the visible rectangle as much as possible
+			const multiplier = (largerThanTarget ? Math.max : Math.min)(
+				toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h
+			);
+			const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+			const viewportContentTransform = visibleRectTransform.inverse();
+
+			transform = transform.rightMul(viewportContentTransform);
+		}
+
+		targetRect = recomputeTargetRect();
+
+		// Ensure that the center of the region is visible
+		if (!targetRect.containsRect(toMakeVisible)) {
+			// target position - current position
+			const translation = toMakeVisible.center.minus(targetRect.center);
+			const visibleRectTransform = Mat33.translation(translation);
+			const viewportContentTransform = visibleRectTransform.inverse();
+
+			transform = transform.rightMul(viewportContentTransform);
+		}
+		
+
+		return new Viewport.ViewportTransform(transform);
+	}
 }
 
 export namespace Viewport { // eslint-disable-line

package/src/components/AbstractComponent.ts

@@ -4,13 +4,13 @@ import EditorImage from '../EditorImage';
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 
 export default abstract class AbstractComponent {
 	protected lastChangedTime: number;
 	protected abstract contentBBox: Rect2;
-	public zIndex: number;
+	private zIndex: number;
 
 	// Topmost z-index
 	private static zIndexCounter: number = 0;
@@ -20,6 +20,10 @@ export default abstract class AbstractComponent {
 		this.zIndex = AbstractComponent.zIndexCounter++;
 	}
 
+	public getZIndex(): number {
+		return this.zIndex;
+	}
+
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}

package/src/components/SVGGlobalAttributesObject.ts

@@ -1,8 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
-import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/Stroke.ts

@@ -2,7 +2,7 @@ import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Path from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/UnknownSVGObject.ts

@@ -1,8 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
-import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/builders/ArrowBuilder.ts

@@ -1,6 +1,6 @@
 import { PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Rect2 from '../../geometry/Rect2';
 import { PathCommand, PathCommandType } from '../../geometry/Path';
@@ -212,7 +212,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const lowerBoundary = computeBoundaryCurve(-1, halfVec);
 
 		// If the boundaries have two intersections, increasing the half vector's length could fix this.
-		if (upperBoundary.intersects(lowerBoundary).length === 2) {
+		if (upperBoundary.intersects(lowerBoundary).length > 0) {
 			halfVec = halfVec.times(2);
 		}
 

package/src/components/builders/LineBuilder.ts

@@ -1,6 +1,6 @@
 import { PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/RectangleBuilder.ts

@@ -1,6 +1,6 @@
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';