js-draw 0.10.1 → 0.10.3

package/src/rendering/caching/RenderingCache.ts

@@ -48,8 +48,16 @@ export default class RenderingCache {
 
 		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
 
-		const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
-		if (visibleLeaves.length > this.sharedState.props.minComponentsToUseCache) {
+		const visibleLeaves = image.getLeavesIntersectingRegion(
+			viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect)
+		);
+
+		let approxVisibleRenderTime = 0;
+		for (const leaf of visibleLeaves) {
+			approxVisibleRenderTime += leaf.getContent()!.getProportionalRenderingTime();
+		}
+
+		if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
 			this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
 		} else {
 			image.render(screenRenderer, visibleRect);

package/src/rendering/caching/RenderingCacheNode.ts

@@ -250,9 +250,13 @@ export default class RenderingCacheNode {
 					return;
 				}
 
+				let leafApproxRenderTime = 0;
+				for (const leaf of leavesByIds) {
+					leafApproxRenderTime += leaf.getContent()!.getProportionalRenderingTime();
+				}
+
 				// Is it worth it to render the items?
-				// TODO: Consider replacing this with something performace based.
-				if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
+				if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
 					let fullRerenderNeeded = true;
 					if (!this.cachedRenderer) {
 						this.cachedRenderer = this.cacheState.recordManager.allocCanvas(

package/src/rendering/caching/testUtils.ts

@@ -23,8 +23,8 @@ export const createCache = (onRenderAlloc?: RenderAllocCallback, cacheOptions?:
 		blockResolution: Vec2.of(500, 500),
 		cacheSize: 500 * 10 * 4,
 		maxScale: 2,
-		minComponentsPerCache: 0,
-		minComponentsToUseCache: 0,
+		minProportionalRenderTimePerCache: 0,
+		minProportionalRenderTimeToUseCache: 0,
 		...cacheOptions
 	});
 

package/src/rendering/caching/types.ts

@@ -20,11 +20,11 @@ export interface CacheProps {
     maxScale: number;
 
     // Minimum component count to cache, rather than just re-render each time.
-    minComponentsPerCache: number;
+    minProportionalRenderTimePerCache: number;
 
     // Minimum number of strokes/etc. to use the cache to render, isntead of
     // rendering directly.
-    minComponentsToUseCache: number;
+    minProportionalRenderTimeToUseCache: number;
 }
 
 export interface CacheState {

package/src/toolbar/IconProvider.ts

@@ -502,6 +502,19 @@ export default class IconProvider {
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
 	}
+
+	public makePasteIcon(): IconType {
+		const icon = this.makeIconFromPath(`
+			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z
+			M 10 15 L 10 115 L 110 115 L 110 15 L 85 15 L 83 20 L 105 20 L 105 110 L 15 110 L 15 20 L 32 20 L 30 15 L 10 15 z
+			M 25 35 L 90 35 L 90 40 L 25 40 L 25 35 z
+			M 25 45 L 90 45 L 90 50 L 25 50 L 25 45 z
+			M 25 55 L 85 55 L 85 60 L 25 60 L 25 55 z
+			M 25 65 L 90 65 L 90 70 L 25 70 L 25 65 z 
+		`);
+		icon.setAttribute('viewBox', '0 0 120 120');
+		return icon;
+	}
 	
 	public makeDeleteSelectionIcon(): IconType {
 		const strokeWidth = '5px';

package/src/toolbar/localization.ts

@@ -28,6 +28,7 @@ export interface ToolbarLocalization {
 	zoom: string;
 	resetView: string;
 	selectionToolKeyboardShortcuts: string;
+	paste: string;
 
 	dropdownShown: (toolName: string)=> string;
 	dropdownHidden: (toolName: string)=> string;
@@ -66,6 +67,8 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	filledRectanglePen: 'Filled rectangle',
 	lockRotation: 'Lock rotation',
 
+	paste: 'Paste',
+
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
 	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,

package/src/tools/PanZoom.ts

@@ -30,6 +30,7 @@ type ScrollByCallback = (delta: Vec2) => void;
 
 class InertialScroller {
 	private running: boolean = false;
+	private currentVelocity: Vec2;
 
 	public constructor(
 		private initialVelocity: Vec2,
@@ -44,22 +45,22 @@ class InertialScroller {
 			return;
 		}
 
-		let currentVelocity = this.initialVelocity;
+		this.currentVelocity = this.initialVelocity;
 		let lastTime = (new Date()).getTime();
 		this.running = true;
 
-		const maxSpeed = 8000; // units/s
+		const maxSpeed = 5000; // units/s
 		const minSpeed = 200; // units/s
-		if (currentVelocity.magnitude() > maxSpeed) {
-			currentVelocity = currentVelocity.normalized().times(maxSpeed);
+		if (this.currentVelocity.magnitude() > maxSpeed) {
+			this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
 		}
 
-		while (this.running && currentVelocity.magnitude() > minSpeed) {
+		while (this.running && this.currentVelocity.magnitude() > minSpeed) {
 			const nowTime = (new Date()).getTime();
 			const dt = (nowTime - lastTime) / 1000;
 
-			currentVelocity = currentVelocity.times(Math.pow(1/8, dt));
-			this.scrollBy(currentVelocity.times(dt));
+			this.currentVelocity = this.currentVelocity.times(Math.pow(1/8, dt));
+			this.scrollBy(this.currentVelocity.times(dt));
 
 			await untilNextAnimationFrame();
 			lastTime = nowTime;
@@ -70,6 +71,14 @@ class InertialScroller {
 		}
 	}
 
+	public getCurrentVelocity(): Vec2|null {
+		if (!this.running) {
+			return null;
+		}
+
+		return this.currentVelocity;
+	}
+
 	public stop(): void {
 		if (this.running) {
 			this.running = false;
@@ -85,6 +94,7 @@ export default class PanZoom extends BaseTool {
 	private lastDist: number;
 	private lastScreenCenter: Point2;
 	private lastTimestamp: number;
+	private lastPointerDownTimestamp: number = 0;
 
 	private inertialScroller: InertialScroller|null = null;
 	private velocity: Vec2|null = null;
@@ -108,10 +118,14 @@ export default class PanZoom extends BaseTool {
 		return pointers.every(pointer => pointer.device === kind);
 	}
 
-	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
+	public onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean {
 		let handlingGesture = false;
 
+		const inertialScrollerVelocity = this.inertialScroller?.getCurrentVelocity() ?? Vec2.zero;
 		this.inertialScroller?.stop();
+		this.velocity = inertialScrollerVelocity;
+
+		this.lastPointerDownTimestamp = currentPointer.timeStamp;
 
 		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
 		const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
@@ -142,17 +156,19 @@ export default class PanZoom extends BaseTool {
 
 	private updateVelocity(currentCenter: Point2) {
 		const deltaPos = currentCenter.minus(this.lastScreenCenter);
-		const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+		let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
 
+		// Ignore duplicate events, unless there has been enough time between them.
+		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
+			return;
+		}
 		// We divide by deltaTime. Don't divide by zero.
 		if (deltaTime === 0) {
 			return;
 		}
 
-		// Ignore duplicate events, unless there has been enough time between them.
-		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
-			return;
-		}
+		// Don't divide by almost zero, either
+		deltaTime = Math.max(deltaTime, 0.01);
 
 		const currentVelocity = deltaPos.times(1 / deltaTime);
 		let smoothedVelocity = currentVelocity;
@@ -233,8 +249,12 @@ export default class PanZoom extends BaseTool {
 			this.velocity = Vec2.zero;
 		};
 
+		const minInertialScrollDt = 30;
 		const shouldInertialScroll =
-				event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+				event.current.device === PointerDevice.Touch
+				&& event.allPointers.length === 1
+				&& this.velocity !== null
+				&& event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
 
 		if (shouldInertialScroll && this.velocity !== null) {
 			// If the user drags the screen, then stops, then lifts the pointer,