js-draw 0.10.0 → 0.10.2

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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-declare type ColorListener = (color: Color4 | null) => void;
+type ColorListener = (color: Color4 | null) => void;
 export default class PipetteTool extends BaseTool {
     private editor;
     private colorPreviewListener;

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

@@ -6,9 +6,9 @@ export declare enum HandleShape {
     Square = 1
 }
 export declare const handleSize = 30;
-export declare type DragStartCallback = (startPoint: Point2) => void;
-export declare type DragUpdateCallback = (canvasPoint: Point2) => void;
-export declare type DragEndCallback = () => void;
+export type DragStartCallback = (startPoint: Point2) => void;
+export type DragUpdateCallback = (canvasPoint: Point2) => void;
+export type DragEndCallback = () => void;
 export default class SelectionHandle {
     readonly shape: HandleShape;
     private readonly parentSide;

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

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
-declare type KeyPressListener = (event: KeyPressEvent) => boolean;
+type KeyPressListener = (event: KeyPressEvent) => boolean;
 export default class ToolbarShortcutHandler extends BaseTool {
     private listeners;
     constructor(editor: Editor);

package/dist/src/types.d.ts

@@ -68,9 +68,9 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
-export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
-export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,
@@ -85,7 +85,7 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
-declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
     readonly kind: EditorToolEventType;
     readonly tool: BaseTool;
@@ -128,10 +128,10 @@ 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;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
+export type ComponentAddedListener = (component: AbstractComponent) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.10.0",
+	"version": "0.10.2",
 	"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",

package/src/components/AbstractComponent.ts

@@ -70,6 +70,7 @@ export default abstract class AbstractComponent {
 	public getZIndex(): number {
 		return this.zIndex;
 	}
+
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
@@ -94,6 +95,13 @@ export default abstract class AbstractComponent {
 		return true;
 	}
 
+	// @returns an approximation of the proportional time it takes to render this component.
+	// This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+	// a renderingWeight approximately twice that of a stroke with one point.
+	public getProportionalRenderingTime(): number {
+		return 1;
+	}
+
 	private static transformElementCommandId = 'transform-element';
 
 	private static UnresolvedTransformElementCommand = class extends SerializableCommand {

package/src/components/ImageComponent.ts

@@ -88,6 +88,11 @@ export default class ImageComponent extends AbstractComponent {
 		canvas.drawImage(this.image);
 	}
 
+	public getProportionalRenderingTime(): number {
+		// Estimate: Equivalent to a stroke with 10 segments.
+		return 10;
+	}
+
 	public intersects(lineSegment: LineSegment2): boolean {
 		const rect = this.getImageRect();
 		const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));

package/src/components/Stroke.ts

@@ -15,11 +15,16 @@ export default class Stroke extends AbstractComponent {
 	private parts: StrokePart[];
 	protected contentBBox: Rect2;
 
+	// See `getProportionalRenderingTime`
+	private approximateRenderingTime: number;
+
 	// Creates a `Stroke` from the given `parts`.
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
+		this.approximateRenderingTime = 0;
 		this.parts = [];
+
 		for (const section of parts) {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
@@ -38,6 +43,8 @@ export default class Stroke extends AbstractComponent {
 				style: section.style,
 				commands: path.parts,
 			});
+
+			this.approximateRenderingTime += path.parts.length;
 		}
 		this.contentBBox ??= Rect2.empty;
 	}
@@ -71,6 +78,10 @@ export default class Stroke extends AbstractComponent {
 		canvas.endObject(this.getLoadSaveData());
 	}
 
+	public getProportionalRenderingTime(): number {
+		return this.approximateRenderingTime;
+	}
+
 	// Grows the bounding box for a given stroke part based on that part's style.
 	private bboxForPart(origBBox: Rect2, style: RenderingStyle) {
 		if (!style.stroke) {

package/src/components/TextComponent.ts

@@ -121,6 +121,10 @@ export default class TextComponent extends AbstractComponent {
 		canvas.endObject(this.getLoadSaveData());
 	}
 
+	public getProportionalRenderingTime(): number {
+		return this.textObjects.length;
+	}
+
 	public intersects(lineSegment: LineSegment2): boolean {
 
 		// Convert canvas space to internal space.

package/src/components/builders/FreehandLineBuilder.ts

@@ -55,7 +55,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			fill: Color4.transparent,
 			stroke: {
 				color: this.startPoint.color,
-				width: this.roundDistance(this.averageWidth / 2),
+				width: this.roundDistance(this.averageWidth),
 			}
 		};
 	}
@@ -108,7 +108,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private getMinFit(): number {
-		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 5);
+		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
@@ -135,7 +135,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return [];
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 9, Math.min(this.minFitAllowed, this.startPoint.width / 5));
+			// Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
+			const width = Viewport.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
 			const center = this.roundPoint(this.startPoint.pos);
 
 			// Start on the right, cycle clockwise:

package/src/components/builders/PressureSensitiveFreehandLineBuilder.ts

@@ -290,7 +290,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
 				return;
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+			const width = Viewport.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
 			const center = this.roundPoint(this.startPoint.pos);
 
 			// Start on the right, cycle clockwise:

package/src/components/util/StrokeSmoother.ts

@@ -98,6 +98,8 @@ export class StrokeSmoother {
 			this.buffer[this.buffer.length - 2], lastPoint,
 		];
 		this.currentCurve = null;
+
+		this.isFirstSegment = false;
 	}
 
 	// Returns [upper curve, connector, lower curve]
@@ -161,29 +163,30 @@ export class StrokeSmoother {
 		this.lastPoint = newPoint;
 
 		this.buffer.push(newPoint.pos);
-		const pointRadius = newPoint.width / 2;
+		const pointRadius = newPoint.width;
 		const prevEndWidth = this.curveEndWidth;
 		this.curveEndWidth = pointRadius;
 
-		if (this.isFirstSegment) {
-			// The start of a curve often lacks accurate pressure information. Update it.
-			this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-		}
-
 		// recompute bbox
 		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
 
+		// If the last curve just ended or it's the first curve,
 		if (this.currentCurve === null) {
 			const p1 = lastPoint.pos;
 			const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
 			const p3 = newPoint.pos;
 
 			// Quadratic Bézier curve
-			this.currentCurve = new Bezier(
-				p1.xy, p2.xy, p3.xy
-			);
-			this.curveStartWidth = lastPoint.width / 2;
+			this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
 			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+
+			if (this.isFirstSegment) {
+				// The start of a curve often lacks accurate pressure information. Update it.
+				this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+			}
+			else {
+				this.curveStartWidth = prevEndWidth;
+			}
 		}
 
 		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
@@ -271,7 +274,7 @@ export class StrokeSmoother {
 			return true;
 		};
 
-		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
+		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/math/Mat33.ts

@@ -219,6 +219,15 @@ export default class Mat33 {
 		);
 	}
 
+	/** @returns true iff this is the identity matrix. */
+	public isIdentity(): boolean {
+		if (this === Mat33.identity) {
+			return true;
+		}
+
+		return this.eq(Mat33.identity);
+	}
+
 	/** Returns true iff this = other ± fuzz */
 	public eq(other: Mat33, fuzz: number = 0): boolean {
 		for (let i = 0; i < 3; i++) {

package/src/math/Path.ts

@@ -248,6 +248,10 @@ export default class Path {
 	}
 
 	public transformedBy(affineTransfm: Mat33): Path {
+		if (affineTransfm.isIdentity()) {
+			return this;
+		}
+
 		return this.mapPoints(point => affineTransfm.transformVec2(point));
 	}
 

package/src/rendering/Display.ts

@@ -78,8 +78,13 @@ export default class Display {
 			blockResolution: cacheBlockResolution,
 			cacheSize: 600 * 600 * 4 * 90,
 			maxScale: 1.4,
-			minComponentsPerCache: 20,
-			minComponentsToUseCache: 105,
+
+			// Require about 20 strokes with 4 parts each to cache an image in one of the
+			// parts of the cache grid.
+			minProportionalRenderTimePerCache: 20 * 4,
+
+			// Require about 105 strokes with 4 parts each to use the cache at all.
+			minProportionalRenderTimeToUseCache: 105 * 4,
 		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {

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

@@ -347,7 +347,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makePenIcon(tipThickness: number, color: string|Color4): IconType {
+	public makePenIcon(tipThickness: number, color: string|Color4, roundedTip?: boolean): IconType {
 		if (color instanceof Color4) {
 			color = color.toHexString();
 		}
@@ -358,8 +358,20 @@ export default class IconProvider {
 		const halfThickness = tipThickness / 2;
 	
 		// Draw a pen-like shape
-		const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
-		const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+		const penTipLeft = 50 - halfThickness;
+		const penTipRight = 50 + halfThickness;
+
+		let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
+		let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
+
+		if (roundedTip) {
+			tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
+			tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+		}
+
+		const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
+		const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
+
 		icon.innerHTML = `
 		<defs>
 			${checkerboardPatternDef}
@@ -490,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/toolbar/widgets/PenToolWidget.ts

@@ -122,7 +122,9 @@ export default class PenToolWidget extends BaseToolWidget {
 			// Use a square-root scale to prevent the pen's tip from overflowing.
 			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
 			const color = this.tool.getColor();
-			return this.editor.icons.makePenIcon(scale, color.toHexString());
+			const roundedTip = strokeFactory === makeFreehandLineBuilder;
+
+			return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
 		} else {
 			const strokeFactory = this.tool.getStrokeFactory();
 			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);

package/src/tools/PanZoom.ts

@@ -143,15 +143,22 @@ export default class PanZoom extends BaseTool {
 	private updateVelocity(currentCenter: Point2) {
 		const deltaPos = currentCenter.minus(this.lastScreenCenter);
 		const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
-		const currentVelocity = deltaPos.times(1 / deltaTime);
-		let smoothedVelocity = currentVelocity;
 
+		// 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;
+		}
+
+		const currentVelocity = deltaPos.times(1 / deltaTime);
+		let smoothedVelocity = currentVelocity;
+
 		if (this.velocity) {
-			smoothedVelocity = this.velocity.lerp(smoothedVelocity, 0.5);
+			smoothedVelocity = this.velocity.lerp(currentVelocity, 0.5);
 		}
 
 		this.velocity = smoothedVelocity;
@@ -230,6 +237,12 @@ export default class PanZoom extends BaseTool {
 				event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
 
 		if (shouldInertialScroll && this.velocity !== null) {
+			// If the user drags the screen, then stops, then lifts the pointer,
+			// we want the final velocity to reflect the stop at the end (so the velocity
+			// should be near zero). Handle this:
+			this.updateVelocity(event.current.screenPos);
+
+			// Cancel any ongoing inertial scrolling.
 			this.inertialScroller?.stop();
 
 			this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta: Vec2) => {