js-draw 0.2.1 → 0.2.3

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

@@ -8,9 +8,8 @@ import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, 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.
-    const canvasTransform = viewport.screenToCanvasTransform;
-    const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
-    const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
     return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
@@ -27,6 +26,7 @@ export default class FreehandLineBuilder {
         this.isFirstSegment = true;
         this.pathStartConnector = null;
         this.mostRecentConnector = null;
+        this.lastExitingVec = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
         this.upperSegments = [];
@@ -34,6 +34,7 @@ export default class FreehandLineBuilder {
         this.buffer = [this.startPoint.pos];
         this.momentum = Vec2.zero;
         this.currentCurve = null;
+        this.curveStartWidth = startPoint.width;
         this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
     }
     getBBox() {
@@ -122,7 +123,11 @@ export default class FreehandLineBuilder {
         return this.previewStroke();
     }
     roundPoint(point) {
-        return Viewport.roundPoint(point, this.minFitAllowed);
+        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth);
+        if (minFit < 1e-10) {
+            minFit = this.minFitAllowed;
+        }
+        return Viewport.roundPoint(point, minFit);
     }
     finalizeCurrentCurve() {
         // Case where no points have been added
@@ -227,10 +232,13 @@ export default class FreehandLineBuilder {
         const computeBoundaryCurve = (direction, halfVec) => {
             return new Bezier(startPt.plus(startVec.times(direction)), controlPoint.plus(halfVec.times(direction)), endPt.plus(endVec.times(direction)));
         };
-        const upperBoundary = computeBoundaryCurve(1, halfVec);
-        const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+        const boundariesIntersect = () => {
+            const upperBoundary = computeBoundaryCurve(1, halfVec);
+            const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+            return upperBoundary.intersects(lowerBoundary).length > 0;
+        };
         // If the boundaries have two intersections, increasing the half vector's length could fix this.
-        if (upperBoundary.intersects(lowerBoundary).length > 0) {
+        if (boundariesIntersect()) {
             halfVec = halfVec.times(2);
         }
         // Each starts at startPt ± startVec
@@ -274,7 +282,7 @@ export default class FreehandLineBuilder {
                 console.warn('Discarding NaN point.', newPoint);
                 return;
             }
-            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
+            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
             const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
                 && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
@@ -361,7 +369,8 @@ export default class FreehandLineBuilder {
             }
             return true;
         };
-        if (this.buffer.length > 3) {
+        const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
+        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

package/dist/src/toolbar/HTMLToolbar.js

@@ -88,7 +88,7 @@ export default class HTMLToolbar {
     }
     addActionButton(title, command, parent) {
         const button = document.createElement('button');
-        button.classList.add(`${toolbarCSSPrefix}toolButton`);
+        button.classList.add(`${toolbarCSSPrefix}button`);
         if (typeof title === 'string') {
             button.innerText = title;
         }

package/dist/src/tools/Pen.js

@@ -49,10 +49,15 @@ export default class Pen extends BaseTool {
         this.previewStroke();
     }
     onPointerDown({ current, allPointers }) {
-        if (current.device === PointerDevice.Eraser) {
-            return false;
+        const isEraser = current.device === PointerDevice.Eraser;
+        let anyDeviceIsStylus = false;
+        for (const pointer of allPointers) {
+            if (pointer.device === PointerDevice.Pen) {
+                anyDeviceIsStylus = true;
+                break;
+            }
         }
-        if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
+        if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
             this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
             return true;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"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/builders/FreehandLineBuilder.ts

@@ -2,7 +2,7 @@ import { Bezier } from 'bezier-js';
 import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Rect2 from '../../math/Rect2';
-import { LinePathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/Path';
+import { LinePathCommand, PathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/Path';
 import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
@@ -13,9 +13,8 @@ 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.
-	const canvasTransform = viewport.screenToCanvasTransform;
-	const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
-	const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
 
 	return new FreehandLineBuilder(
 		initialPoint, minSmoothingDist, maxSmoothingDist
@@ -24,16 +23,16 @@ export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: S
 
 type CurrentSegmentToPathResult = {
 	upperCurve: QuadraticBezierPathCommand,
-	lowerToUpperConnector: LinePathCommand,
-	upperToLowerConnector: LinePathCommand,
+	lowerToUpperConnector: PathCommand,
+	upperToLowerConnector: PathCommand,
 	lowerCurve: QuadraticBezierPathCommand,
 };
 
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder implements ComponentBuilder {
 	private isFirstSegment: boolean = true;
-	private pathStartConnector: LinePathCommand|null = null;
-	private mostRecentConnector: LinePathCommand|null = null;
+	private pathStartConnector: PathCommand|null = null;
+	private mostRecentConnector: PathCommand|null = null;
 
 	//    Beginning of the list of lower parts
 	//        ↓
@@ -53,7 +52,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
-	private lastExitingVec: Vec2;
+	private lastExitingVec: Vec2|null = null;
 	private currentCurve: Bezier|null = null;
 	private curveStartWidth: number;
 	private curveEndWidth: number;
@@ -79,6 +78,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		this.buffer = [this.startPoint.pos];
 		this.momentum = Vec2.zero;
 		this.currentCurve = null;
+		this.curveStartWidth = startPoint.width;
 
 		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
 	}
@@ -96,8 +96,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	private previewPath(): RenderablePathSpec|null {
 		let upperPath: QuadraticBezierPathCommand[];
 		let lowerPath: QuadraticBezierPathCommand[];
-		let lowerToUpperCap: LinePathCommand;
-		let pathStartConnector: LinePathCommand;
+		let lowerToUpperCap: PathCommand;
+		let pathStartConnector: PathCommand;
 		if (this.currentCurve) {
 			const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
 			upperPath = this.upperSegments.concat(upperCurve);
@@ -180,7 +180,13 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private roundPoint(point: Point2): Point2 {
-		return Viewport.roundPoint(point, this.minFitAllowed);
+		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth);
+
+		if (minFit < 1e-10) {
+			minFit = this.minFitAllowed;
+		}
+
+		return Viewport.roundPoint(point, minFit);
 	}
 
 	private finalizeCurrentCurve() {
@@ -317,11 +323,14 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			);
 		};
 
-		const upperBoundary = computeBoundaryCurve(1, halfVec);
-		const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+		const boundariesIntersect = () => {
+			const upperBoundary = computeBoundaryCurve(1, halfVec);
+			const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+			return upperBoundary.intersects(lowerBoundary).length > 0;
+		};
 
 		// If the boundaries have two intersections, increasing the half vector's length could fix this.
-		if (upperBoundary.intersects(lowerBoundary).length > 0) {
+		if (boundariesIntersect()) {
 			halfVec = halfVec.times(2);
 		}
 
@@ -372,7 +381,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return;
 			}
 			
-			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
+			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
 			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
 				&& this.isFirstSegment;
 			
@@ -493,7 +502,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return true;
 		};
 
-		if (this.buffer.length > 3) {
+		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
+		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/toolbar/HTMLToolbar.ts

@@ -112,7 +112,7 @@ export default class HTMLToolbar {
 
 	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
-		button.classList.add(`${toolbarCSSPrefix}toolButton`);
+		button.classList.add(`${toolbarCSSPrefix}button`);
 
 		if (typeof title === 'string') {
 			button.innerText = title;

package/src/toolbar/toolbar.css

@@ -22,7 +22,8 @@
 
 .toolbar-root > .toolbar-toolContainer > .toolbar-button,
 .toolbar-root > .toolbar-toolContainer > * > button,
-.toolbar-root > .toolbar-buttonGroup > button {
+.toolbar-root > .toolbar-buttonGroup > button,
+.toolbar-root > .toolbar-button {
 	width: min-content;
 	white-space: pre;
 	height: min(20vh, 60px);

package/src/tools/Pen.ts

@@ -67,11 +67,17 @@ export default class Pen extends BaseTool {
 	}
 
 	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
-		if (current.device === PointerDevice.Eraser) {
-			return false;
+		const isEraser = current.device === PointerDevice.Eraser;
+
+		let anyDeviceIsStylus = false;
+		for (const pointer of allPointers) {
+			if (pointer.device === PointerDevice.Pen) {
+				anyDeviceIsStylus = true;
+				break;
+			}
 		}
 
-		if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
+		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
 			this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
 			return true;
 		}