js-draw 0.1.0 → 0.1.1

package/dist/src/EditorImage.d.ts

@@ -40,7 +40,7 @@ export declare class ImageNode {
     onContentChange(): void;
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
-    getChildrenInRegion(region: Rect2): ImageNode[];
+    private getChildrenIntersectingRegion;
     getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
     getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getLeaves(): ImageNode[];

package/dist/src/EditorImage.js

@@ -107,7 +107,7 @@ export class ImageNode {
     getParent() {
         return this.parent;
     }
-    getChildrenInRegion(region) {
+    getChildrenIntersectingRegion(region) {
         return this.children.filter(child => {
             return child.getBBox().intersects(region);
         });
@@ -116,7 +116,7 @@ export class ImageNode {
         if (this.content) {
             return [this];
         }
-        return this.getChildrenInRegion(region);
+        return this.getChildrenIntersectingRegion(region);
     }
     // Returns a list of `ImageNode`s with content (and thus no children).
     getLeavesIntersectingRegion(region, isTooSmall) {
@@ -128,7 +128,7 @@ export class ImageNode {
         if (this.content !== null && this.getBBox().intersects(region)) {
             result.push(this);
         }
-        const children = this.getChildrenInRegion(region);
+        const children = this.getChildrenIntersectingRegion(region);
         for (const child of children) {
             result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
         }

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -160,7 +160,7 @@ export default class FreehandLineBuilder {
         const upperBoundary = computeBoundaryCurve(1, halfVec);
         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);
         }
         const pathCommands = [

package/dist/src/geometry/Rect2.js

@@ -38,20 +38,31 @@ export default class Rect2 {
             && this.bottomRight.y >= other.bottomRight.y;
     }
     intersects(other) {
-        return this.intersection(other) !== null;
+        // Project along x/y axes.
+        const thisMinX = this.x;
+        const thisMaxX = thisMinX + this.w;
+        const otherMinX = other.x;
+        const otherMaxX = other.x + other.w;
+        if (thisMaxX < otherMinX || thisMinX > otherMaxX) {
+            return false;
+        }
+        const thisMinY = this.y;
+        const thisMaxY = thisMinY + this.h;
+        const otherMinY = other.y;
+        const otherMaxY = other.y + other.h;
+        if (thisMaxY < otherMinY || thisMinY > otherMaxY) {
+            return false;
+        }
+        return true;
     }
     // Returns the overlap of this and [other], or null, if no such
     //          overlap exists
     intersection(other) {
-        const topLeft = this.topLeft.zip(other.topLeft, Math.max);
-        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
-        // The intersection can't be outside of this rectangle
-        if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
-            return null;
-        }
-        else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+        if (!this.intersects(other)) {
             return null;
         }
+        const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
         return Rect2.fromCorners(topLeft, bottomRight);
     }
     // Returns a new rectangle containing both [this] and [other].

package/dist/src/rendering/Display.js

@@ -23,7 +23,7 @@ export default class Display {
         else {
             throw new Error(`Unknown rendering mode, ${mode}!`);
         }
-        const cacheBlockResolution = Vec2.of(500, 500);
+        const cacheBlockResolution = Vec2.of(600, 600);
         this.cache = new RenderingCache({
             createRenderer: () => {
                 if (mode === RenderingMode.DummyRenderer) {
@@ -45,8 +45,9 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 500 * 500 * 4 * 200,
-            maxScale: 1.4,
-            minComponentsPerCache: 10,
+            maxScale: 1.5,
+            minComponentsPerCache: 50,
+            minComponentsToUseCache: 120,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {
             var _a;

package/dist/src/rendering/caching/CacheRecord.js

@@ -11,7 +11,7 @@ export default class CacheRecord {
         this.allocd = true;
     }
     startRender() {
-        this.lastUsedCycle = this.cacheState.currentRenderingCycle++;
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         if (!this.allocd) {
             throw new Error('Only alloc\'d canvases can be rendered to');
         }
@@ -33,6 +33,7 @@ export default class CacheRecord {
         }
         this.allocd = true;
         this.onBeforeDeallocCallback = newDeallocCallback;
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
     }
     getLastUsedCycle() {
         return this.lastUsedCycle;

package/dist/src/rendering/caching/CacheRecordManager.js

@@ -25,15 +25,7 @@ export class CacheRecordManager {
     }
     // Returns null if there are no cache records. Returns an unalloc'd record if one exists.
     getLeastRecentlyUsedRecord() {
-        let lruSoFar = null;
-        for (const rec of this.cacheRecords) {
-            if (!rec.isAllocd()) {
-                return rec;
-            }
-            if (!lruSoFar || rec.getLastUsedCycle() < lruSoFar.getLastUsedCycle()) {
-                lruSoFar = rec;
-            }
-        }
-        return lruSoFar;
+        this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+        return this.cacheRecords[0];
     }
 }

package/dist/src/rendering/caching/RenderingCache.js

@@ -22,15 +22,21 @@ export default class RenderingCache {
             return;
         }
         if (!this.rootNode) {
-            // Ensure that the node is just big enough to contain the entire viewport.
-            const rootNodeSize = visibleRect.maxDimension;
+            // Adjust the node so that it has the correct aspect ratio
+            const res = this.partialSharedState.props.blockResolution;
             const topLeft = visibleRect.topLeft;
-            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, rootNodeSize, rootNodeSize), this.getSharedState());
+            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, res.x, res.y), this.getSharedState());
         }
         while (!this.rootNode.region.containsRect(visibleRect)) {
             this.rootNode = this.rootNode.generateParent();
         }
         this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
-        this.rootNode.renderItems(screenRenderer, [image], viewport);
+        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+        if (visibleLeaves.length > this.partialSharedState.props.minComponentsToUseCache) {
+            this.rootNode.renderItems(screenRenderer, [image], viewport);
+        }
+        else {
+            image.render(screenRenderer, visibleRect);
+        }
     }
 }

package/dist/src/rendering/caching/RenderingCacheNode.js

@@ -133,7 +133,11 @@ export default class RenderingCacheNode {
         const newItems = [];
         // Divide [items] until nodes are leaves or smaller than this
         for (const item of items) {
-            if (item.getBBox().maxDimension >= this.region.maxDimension) {
+            const bbox = item.getBBox();
+            if (!bbox.intersects(this.region)) {
+                continue;
+            }
+            if (bbox.maxDimension >= this.region.maxDimension) {
                 newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
             }
             else {
@@ -146,6 +150,9 @@ export default class RenderingCacheNode {
             items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
             return;
         }
+        if (debugMode) {
+            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+        }
         // Could we render direclty from [this] or do we need to recurse?
         const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
         if (!couldRender) {
@@ -159,7 +166,7 @@ export default class RenderingCacheNode {
             // Determine whether we already have rendered the items
             const leaves = [];
             for (const item of items) {
-                leaves.push(...item.getLeavesIntersectingRegion(this.region));
+                leaves.push(...item.getLeavesIntersectingRegion(this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x));
             }
             sortLeavesByZIndex(leaves);
             const leavesByIds = this.computeSortedByLeafIds(leaves);
@@ -213,7 +220,7 @@ export default class RenderingCacheNode {
                                 }
                             }
                             if (debugMode) {
-                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
                             }
                         }
                     }

package/dist/src/rendering/caching/testUtils.js

@@ -12,7 +12,7 @@ export const createCache = (onRenderAlloc, cacheOptions) => {
         },
         isOfCorrectType(renderer) {
             return renderer instanceof DummyRenderer;
-        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0 }, cacheOptions));
+        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0, minComponentsToUseCache: 0 }, cacheOptions));
     return {
         cache,
         editor

package/dist/src/rendering/caching/types.d.ts

@@ -10,6 +10,7 @@ export interface CacheProps {
     cacheSize: number;
     maxScale: number;
     minComponentsPerCache: number;
+    minComponentsToUseCache: number;
 }
 export interface PartialCacheState {
     currentRenderingCycle: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.0",
+  "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/EditorImage.ts

@@ -137,7 +137,7 @@ export class ImageNode {
 		return this.parent;
 	}
 
-	public getChildrenInRegion(region: Rect2): ImageNode[] {
+	private getChildrenIntersectingRegion(region: Rect2): ImageNode[] {
 		return this.children.filter(child => {
 			return child.getBBox().intersects(region);
 		});
@@ -147,7 +147,7 @@ export class ImageNode {
 		if (this.content) {
 			return [this];
 		}
-		return this.getChildrenInRegion(region);
+		return this.getChildrenIntersectingRegion(region);
 	}
 
 	// Returns a list of `ImageNode`s with content (and thus no children).
@@ -163,7 +163,7 @@ export class ImageNode {
 			result.push(this);
 		}
 
-		const children = this.getChildrenInRegion(region);
+		const children = this.getChildrenIntersectingRegion(region);
 		for (const child of children) {
 			result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
 		}

package/src/components/builders/FreehandLineBuilder.ts

@@ -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/geometry/Rect2.test.ts

@@ -148,4 +148,13 @@ describe('Rect2', () => {
 			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
 		});
 	});
+
+	it('division of rectangle', () => {
+		expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
+			[
+				new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
+				new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
+			]
+		);
+	});
 });

package/src/geometry/Rect2.ts

@@ -67,22 +67,39 @@ export default class Rect2 {
 	}
 
 	public intersects(other: Rect2): boolean {
-		return this.intersection(other) !== null;
+		// Project along x/y axes.
+		const thisMinX = this.x;
+		const thisMaxX = thisMinX + this.w;
+		const otherMinX = other.x;
+		const otherMaxX = other.x + other.w;
+
+		if (thisMaxX < otherMinX || thisMinX > otherMaxX) {
+			return false;
+		}
+
+
+		const thisMinY = this.y;
+		const thisMaxY = thisMinY + this.h;
+		const otherMinY = other.y;
+		const otherMaxY = other.y + other.h;
+
+		if (thisMaxY < otherMinY || thisMinY > otherMaxY) {
+			return false;
+		}
+
+		return true;
 	}
 
 	// Returns the overlap of this and [other], or null, if no such
 	//          overlap exists
 	public intersection(other: Rect2): Rect2|null {
-		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
-		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
-
-		// The intersection can't be outside of this rectangle
-		if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
-			return null;
-		} else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+		if (!this.intersects(other)) {
 			return null;
 		}
 
+		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
+
 		return Rect2.fromCorners(topLeft, bottomRight);
 	}
 

package/src/rendering/Display.ts

@@ -31,7 +31,7 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
-		const cacheBlockResolution = Vec2.of(500, 500);
+		const cacheBlockResolution = Vec2.of(600, 600);
 		this.cache = new RenderingCache({
 			createRenderer: () => {
 				if (mode === RenderingMode.DummyRenderer) {
@@ -54,8 +54,9 @@ export default class Display {
 			},
 			blockResolution: cacheBlockResolution,
 			cacheSize: 500 * 500 * 4 * 200,
-			maxScale: 1.4,
-			minComponentsPerCache: 10,
+			maxScale: 1.5,
+			minComponentsPerCache: 50,
+			minComponentsToUseCache: 120,
 		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {

package/src/rendering/caching/CacheRecord.ts

@@ -21,7 +21,7 @@ export default class CacheRecord {
 	}
 
 	public startRender(): AbstractRenderer {
-		this.lastUsedCycle = this.cacheState.currentRenderingCycle++;
+		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
 		if (!this.allocd) {
 			throw new Error('Only alloc\'d canvases can be rendered to');
 		}
@@ -45,6 +45,7 @@ export default class CacheRecord {
 		}
 		this.allocd = true;
 		this.onBeforeDeallocCallback = newDeallocCallback;
+		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
 	}
 
 	public getLastUsedCycle(): number {

package/src/rendering/caching/CacheRecordManager.ts

@@ -39,17 +39,7 @@ export class CacheRecordManager {
 
 	// Returns null if there are no cache records. Returns an unalloc'd record if one exists.
 	private getLeastRecentlyUsedRecord(): CacheRecord|null {
-		let lruSoFar: CacheRecord|null = null;
-		for (const rec of this.cacheRecords) {
-			if (!rec.isAllocd()) {
-				return rec;
-			}
-
-			if (!lruSoFar || rec.getLastUsedCycle() < lruSoFar.getLastUsedCycle()) {
-				lruSoFar = rec;
-			}
-		}
-
-		return lruSoFar;
+		this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+		return this.cacheRecords[0];
 	}
 }

package/src/rendering/caching/RenderingCache.test.ts

@@ -10,7 +10,7 @@ import Viewport from '../../Viewport';
 import Mat33 from '../../geometry/Mat33';
 
 describe('RenderingCache', () => {
-	const testPath = Path.fromString('M0,0 l100,500 l-20,20');
+	const testPath = Path.fromString('M0,0 l100,500 l-20,20 L-100,-100');
 	const testStroke = new Stroke([ testPath.toRenderable({ fill: Color4.purple }) ]);
 
 	it('should create a root node large enough to contain the viewport', () => {

package/src/rendering/caching/RenderingCache.ts

@@ -37,11 +37,12 @@ export default class RenderingCache {
 		}
 
 		if (!this.rootNode) {
-			// Ensure that the node is just big enough to contain the entire viewport.
-			const rootNodeSize = visibleRect.maxDimension;
+			// Adjust the node so that it has the correct aspect ratio
+			const res = this.partialSharedState.props.blockResolution;
+
 			const topLeft = visibleRect.topLeft;
 			this.rootNode = new RenderingCacheNode(
-				new Rect2(topLeft.x, topLeft.y, rootNodeSize, rootNodeSize),
+				new Rect2(topLeft.x, topLeft.y, res.x, res.y),
 				this.getSharedState()
 			);
 		}
@@ -51,6 +52,12 @@ export default class RenderingCache {
 		}
 
 		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
-        this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
+
+		const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+		if (visibleLeaves.length > this.partialSharedState.props.minComponentsToUseCache) {
+			this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
+		} else {
+			image.render(screenRenderer, visibleRect);
+		}
 	}
 }

package/src/rendering/caching/RenderingCacheNode.ts

@@ -172,7 +172,12 @@ export default class RenderingCacheNode {
 		const newItems = [];
 		// Divide [items] until nodes are leaves or smaller than this
 		for (const item of items) {
-			if (item.getBBox().maxDimension >= this.region.maxDimension) {
+			const bbox = item.getBBox();
+			if (!bbox.intersects(this.region)) {
+				continue;
+			}
+
+			if (bbox.maxDimension >= this.region.maxDimension) {
 				newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
 			} else {
 				newItems.push(item);
@@ -186,6 +191,10 @@ export default class RenderingCacheNode {
 			return;
 		}
 
+		if (debugMode) {
+			screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+		}
+
 		// Could we render direclty from [this] or do we need to recurse?
 		const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
 		if (!couldRender) {
@@ -198,7 +207,11 @@ export default class RenderingCacheNode {
 			// Determine whether we already have rendered the items
 			const leaves = [];
 			for (const item of items) {
-				leaves.push(...item.getLeavesIntersectingRegion(this.region));
+				leaves.push(
+					...item.getLeavesIntersectingRegion(
+						this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x,
+					)
+				);
 			}
 			sortLeavesByZIndex(leaves);
 			const leavesByIds = this.computeSortedByLeafIds(leaves);
@@ -266,7 +279,7 @@ export default class RenderingCacheNode {
 							}
 
 							if (debugMode) {
-								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
 							}
 						}
 					}

package/src/rendering/caching/testUtils.ts

@@ -24,6 +24,7 @@ export const createCache = (onRenderAlloc?: RenderAllocCallback, cacheOptions?:
 		cacheSize: 500 * 10 * 4,
 		maxScale: 2,
 		minComponentsPerCache: 0,
+		minComponentsToUseCache: 0,
 		...cacheOptions
 	});
 

package/src/rendering/caching/types.ts

@@ -21,6 +21,10 @@ export interface CacheProps {
 
     // Minimum component count to cache, rather than just re-render each time.
     minComponentsPerCache: number;
+
+    // Minimum number of strokes/etc. to use the cache to render, isntead of
+    // rendering directly.
+    minComponentsToUseCache: number;
 }
 
 // CacheRecordManager relies on a partial copy of the shared state. Thus,