js-draw 0.4.0 → 0.4.1

package/dist/src/Editor.js

@@ -607,7 +607,9 @@ export class Editor {
     }
     // Dispatch a pen event to the currently selected tool.
     // Intended primarially for unit tests.
-    sendPenEvent(eventType, point, allPointers) {
+    sendPenEvent(eventType, point, 
+    // @deprecated
+    allPointers) {
         const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, this.viewport);
         this.toolController.dispatchInputEvent({
             kind: eventType,

package/dist/src/components/AbstractComponent.js

@@ -48,6 +48,7 @@ export default class AbstractComponent {
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this);
     }
+    // Returns a copy of this component.
     clone() {
         const clone = this.createClone();
         for (const attachmentKey in this.loadSaveData) {

package/dist/src/components/Stroke.js

@@ -6,7 +6,8 @@ export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
         super('stroke');
-        this.parts = parts.map((section) => {
+        this.parts = [];
+        for (const section of parts) {
             const path = Path.fromRenderable(section);
             const pathBBox = this.bboxForPart(path.bbox, section.style);
             if (!this.contentBBox) {
@@ -15,14 +16,14 @@ export default class Stroke extends AbstractComponent {
             else {
                 this.contentBBox = this.contentBBox.union(pathBBox);
             }
-            return {
+            this.parts.push({
                 path,
                 // To implement RenderablePathSpec
                 startPoint: path.startPoint,
                 style: section.style,
                 commands: path.parts,
-            };
-        });
+            });
+        }
         (_a = this.contentBBox) !== null && _a !== void 0 ? _a : (this.contentBBox = Rect2.empty);
     }
     intersects(line) {
@@ -80,11 +81,16 @@ export default class Stroke extends AbstractComponent {
         });
     }
     getPath() {
-        var _a;
-        return (_a = this.parts.reduce((accumulator, current) => {
-            var _a;
-            return (_a = accumulator === null || accumulator === void 0 ? void 0 : accumulator.union(current.path)) !== null && _a !== void 0 ? _a : current.path;
-        }, null)) !== null && _a !== void 0 ? _a : Path.empty;
+        let result = null;
+        for (const part of this.parts) {
+            if (result) {
+                result = result.union(part.path);
+            }
+            else {
+                result !== null && result !== void 0 ? result : (result = part.path);
+            }
+        }
+        return result !== null && result !== void 0 ? result : Path.empty;
     }
     description(localization) {
         return localization.stroke;

package/dist/src/components/Text.d.ts

@@ -29,7 +29,7 @@ export default class Text extends AbstractComponent {
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(affineTransfm: Mat33): void;
     protected createClone(): AbstractComponent;
-    private getText;
+    getText(): string;
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
     static deserializeFromString(json: any, getTextDimens?: GetTextDimensCallback): Text;

package/dist/src/components/Text.js

@@ -113,7 +113,7 @@ export default class Text extends AbstractComponent {
                 result.push(textObject.getText());
             }
         }
-        return result.join(' ');
+        return result.join('\n');
     }
     description(localizationTable) {
         return localizationTable.text(this.getText());

package/dist/src/components/builders/FreehandLineBuilder.d.ts

@@ -29,6 +29,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;
+    private approxCurrentCurveLength;
     private finalizeCurrentCurve;
     private currentSegmentToPath;
     private computeExitingVec;

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

@@ -117,7 +117,7 @@ export default class FreehandLineBuilder {
         }
     }
     build() {
-        if (this.lastPoint) {
+        if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
             this.finalizeCurrentCurve();
         }
         return this.previewStroke();
@@ -129,6 +129,18 @@ export default class FreehandLineBuilder {
         }
         return Viewport.roundPoint(point, minFit);
     }
+    // Returns the distance between the start, control, and end points of the curve.
+    approxCurrentCurveLength() {
+        if (!this.currentCurve) {
+            return 0;
+        }
+        const startPt = Vec2.ofXY(this.currentCurve.points[0]);
+        const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
+        const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+        const toControlDist = startPt.minus(controlPt).length();
+        const toEndDist = endPt.minus(controlPt).length();
+        return toControlDist + toEndDist;
+    }
     finalizeCurrentCurve() {
         // Case where no points have been added
         if (!this.currentCurve) {
@@ -204,10 +216,8 @@ export default class FreehandLineBuilder {
         let endVec = Vec2.ofXY(this.currentCurve.normal(1)).normalized();
         startVec = startVec.times(this.curveStartWidth / 2);
         endVec = endVec.times(this.curveEndWidth / 2);
-        if (isNaN(startVec.magnitude())) {
-            // TODO: This can happen when events are too close together. Find out why and
-            // 		 fix.
-            console.error('startVec is NaN', startVec, endVec, this.currentCurve);
+        if (!isFinite(startVec.magnitude())) {
+            console.error('Warning: startVec is NaN or ∞', startVec, endVec, this.currentCurve);
             startVec = endVec;
         }
         const startPt = Vec2.ofXY(this.currentCurve.get(0));
@@ -224,28 +234,18 @@ export default class FreehandLineBuilder {
             }
         }
         const halfVecT = projectionT;
-        let halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
+        const halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
             .normalized().times(this.curveStartWidth / 2 * halfVecT
             + this.curveEndWidth / 2 * (1 - halfVecT));
-        // Computes a boundary curve. [direction] should be either +1 or -1 (determines the side
-        // of the center curve to place the boundary).
-        const computeBoundaryCurve = (direction, halfVec) => {
-            return new Bezier(startPt.plus(startVec.times(direction)), controlPoint.plus(halfVec.times(direction)), endPt.plus(endVec.times(direction)));
-        };
-        const boundariesIntersect = () => {
-            const upperBoundary = computeBoundaryCurve(1, halfVec);
-            const lowerBoundary = computeBoundaryCurve(-1, halfVec);
-            return upperBoundary.intersects(lowerBoundary).length > 0;
-        };
-        // If the boundaries have intersections, increasing the half vector's length could fix this.
-        if (boundariesIntersect()) {
-            halfVec = halfVec.times(1.1);
-        }
         // Each starts at startPt ± startVec
+        const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
+        const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
+        const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
+        const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
         const lowerCurve = {
             kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-            endPoint: this.roundPoint(endPt.plus(endVec)),
+            controlPoint: lowerCurveControlPoint,
+            endPoint: lowerCurveEndPoint,
         };
         // From the end of the upperCurve to the start of the lowerCurve:
         const upperToLowerConnector = {
@@ -255,11 +255,11 @@ export default class FreehandLineBuilder {
         // From the end of lowerCurve to the start of upperCurve:
         const lowerToUpperConnector = {
             kind: PathCommandType.LineTo,
-            point: this.roundPoint(endPt.minus(endVec))
+            point: upperCurveStartPoint,
         };
         const upperCurve = {
             kind: PathCommandType.QuadraticBezierTo,
-            controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+            controlPoint: upperCurveControlPoint,
             endPoint: this.roundPoint(startPt.minus(startVec)),
         };
         return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
@@ -275,7 +275,6 @@ export default class FreehandLineBuilder {
             const fuzzEq = 1e-10;
             const deltaTime = newPoint.time - this.lastPoint.time;
             if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
-                console.warn('Discarding identical point');
                 return;
             }
             else if (isNaN(newPoint.pos.magnitude())) {
@@ -321,35 +320,35 @@ export default class FreehandLineBuilder {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2;
+        const maxRelativeLength = 3;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
         const maxControlPointDist = maxRelativeLength * startEndDist;
         // Exit in cases where we would divide by zero
-        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || isNaN(exitingVec.magnitude())) {
+        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
             return;
         }
-        console.assert(!isNaN(enteringVec.magnitude()));
+        console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
         enteringVec = enteringVec.normalized();
         exitingVec = exitingVec.normalized();
-        console.assert(!isNaN(enteringVec.magnitude()));
+        console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
         const lineFromStart = new LineSegment2(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
         const lineFromEnd = new LineSegment2(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
         const intersection = lineFromEnd.intersection(lineFromStart);
         // Position the control point at this intersection
-        let controlPoint;
+        let controlPoint = null;
         if (intersection) {
             controlPoint = intersection.point;
         }
-        else {
+        // No intersection or the intersection is one of the end points?
+        if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
             // Position the control point closer to the first -- the connecting
             // segment will be roughly a line.
             controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
         }
-        if (isNaN(controlPoint.magnitude()) || isNaN(segmentStart.magnitude())) {
-            console.error('controlPoint is NaN', intersection, 'Start:', segmentStart, 'End:', segmentEnd, 'in:', enteringVec, 'out:', exitingVec);
-        }
+        console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
+        console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
         const prevCurve = this.currentCurve;
         this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
         if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
@@ -369,8 +368,7 @@ export default class FreehandLineBuilder {
             }
             return true;
         };
-        const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
+        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

package/dist/src/math/Vec3.d.ts

@@ -97,7 +97,7 @@ export default class Vec3 {
      * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
      * ```
      */
-    eq(other: Vec3, fuzz: number): boolean;
+    eq(other: Vec3, fuzz?: number): boolean;
     toString(): string;
     static unitX: Vec3;
     static unitY: Vec3;

package/dist/src/math/Vec3.js

@@ -156,7 +156,7 @@ export default class Vec3 {
      * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
      * ```
      */
-    eq(other, fuzz) {
+    eq(other, fuzz = 1e-10) {
         for (let i = 0; i < 3; i++) {
             if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
                 return false;

package/dist/src/testing/beforeEachFile.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/testing/beforeEachFile.js

@@ -0,0 +1,3 @@
+import loadExpectExtensions from './loadExpectExtensions';
+loadExpectExtensions();
+jest.useFakeTimers();

package/dist/src/testing/createEditor.d.ts

@@ -1,3 +1,4 @@
 import Editor from '../Editor';
+/** Creates an editor. Should only be used in test files. */
 declare const _default: () => Editor;
 export default _default;

package/dist/src/testing/createEditor.js

@@ -1,3 +1,9 @@
 import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
-export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+/** Creates an editor. Should only be used in test files. */
+export default () => {
+    if (jest === undefined) {
+        throw new Error('Files in the testing/ folder should only be used in tests!');
+    }
+    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+};

package/dist/src/testing/loadExpectExtensions.d.ts

@@ -1,17 +1,2 @@
 export declare const loadExpectExtensions: () => void;
-export interface CustomMatchers<R = unknown> {
-    objEq(expected: {
-        eq: (other: any, ...args: any) => boolean;
-    }, ...opts: any): R;
-}
-declare global {
-    export namespace jest {
-        interface Expect extends CustomMatchers {
-        }
-        interface Matchers<R> extends CustomMatchers<R> {
-        }
-        interface AsyncAsymmetricMatchers extends CustomMatchers {
-        }
-    }
-}
 export default loadExpectExtensions;

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -8,6 +8,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
+import TextComponent from '../../components/Text';
 export const cssPrefix = 'selection-tool-';
 // {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {
@@ -215,10 +216,17 @@ export default class SelectionTool extends BaseTool {
         const exportElem = document.createElementNS(svgNameSpace, 'svg');
         const sanitize = true;
         const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+        const text = [];
         for (const elem of selectedElems) {
             elem.render(renderer);
+            if (elem instanceof TextComponent) {
+                text.push(elem.getText());
+            }
         }
         event.setData('image/svg+xml', exportElem.outerHTML);
+        if (text.length > 0) {
+            event.setData('text/plain', text.join('\n'));
+        }
         return true;
     }
     setEnabled(enabled) {

package/jest.config.js

@@ -10,6 +10,10 @@ const config = {
 		'js',
 	],
 
+	testPathIgnorePatterns: [
+		'<rootDir>/dist/', '<rootDir>/node_modules/'
+	],
+
 	// Mocks.
 	// See https://jestjs.io/docs/webpack#handling-static-assets
 	moduleNameMapper: {
@@ -19,6 +23,7 @@ const config = {
 	},
 	
 	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: [ '<rootDir>/src/testing/beforeEachFile.ts' ],
 };
 
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"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",
@@ -71,36 +71,37 @@
 		"lint": "eslint .",
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
+		"lint-ci": "eslint . --max-warnings=0 --ext .js --ext .ts",
 		"prepare": "husky install && yarn build",
 		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {
-		"@melloware/coloris": "^0.16.0",
+		"@melloware/coloris": "^0.16.1",
 		"bezier-js": "^6.1.0"
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^28.1.7",
+		"@types/jest": "^29.0.3",
 		"@types/jsdom": "^20.0.0",
-		"@types/node": "^18.7.15",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
-		"@typescript-eslint/parser": "^5.36.2",
+		"@types/node": "^18.7.23",
+		"@typescript-eslint/eslint-plugin": "^5.38.1",
+		"@typescript-eslint/parser": "^5.38.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.23.0",
+		"eslint": "^8.24.0",
 		"husky": "^8.0.1",
-		"jest": "^28.1.3",
-		"jest-environment-jsdom": "^29.0.2",
+		"jest": "^29.0.3",
+		"jest-environment-jsdom": "^29.0.3",
 		"jsdom": "^20.0.0",
 		"lint-staged": "^13.0.3",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
-		"terser-webpack-plugin": "^5.3.5",
-		"ts-jest": "^28.0.8",
-		"ts-loader": "^9.3.1",
+		"terser-webpack-plugin": "^5.3.6",
+		"ts-jest": "^29.0.2",
+		"ts-loader": "^9.4.1",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.14",
-		"typescript": "^4.8.2",
+		"typedoc": "^0.23.15",
+		"typescript": "^4.8.3",
 		"webpack": "^5.74.0"
 	},
 	"bugs": {

package/src/Editor.ts

@@ -797,6 +797,8 @@ export class Editor {
 	public sendPenEvent(
 		eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
 		point: Point2,
+
+		// @deprecated
 		allPointers?: Pointer[]
 	) {
 		const mainPointer = Pointer.ofCanvasPoint(

package/src/components/AbstractComponent.ts

@@ -206,8 +206,10 @@ export default abstract class AbstractComponent {
 
 	public abstract description(localizationTable: ImageComponentLocalization): string;
 
+	// Component-specific implementation of {@link clone}.
 	protected abstract createClone(): AbstractComponent;
 
+	// Returns a copy of this component.
 	public clone() {
 		const clone = this.createClone();
 

package/src/components/Stroke.test.ts

@@ -2,12 +2,9 @@ import Color4 from '../Color4';
 import Path from '../math/Path';
 import { Vec2 } from '../math/Vec2';
 import Stroke from './Stroke';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import createEditor from '../testing/createEditor';
 import Mat33 from '../math/Mat33';
 
-loadExpectExtensions();
-
 describe('Stroke', () => {
 	it('empty stroke should have an empty bounding box', () => {
 		const stroke = new Stroke([{

package/src/components/Stroke.ts

@@ -18,7 +18,8 @@ export default class Stroke extends AbstractComponent {
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
-		this.parts = parts.map((section): StrokePart => {
+		this.parts = [];
+		for (const section of parts) {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
 
@@ -28,15 +29,15 @@ export default class Stroke extends AbstractComponent {
 				this.contentBBox = this.contentBBox.union(pathBBox);
 			}
 
-			return {
+			this.parts.push({
 				path,
 
 				// To implement RenderablePathSpec
 				startPoint: path.startPoint,
 				style: section.style,
 				commands: path.parts,
-			};
-		});
+			});
+		}
 		this.contentBBox ??= Rect2.empty;
 	}
 
@@ -104,9 +105,15 @@ export default class Stroke extends AbstractComponent {
 	}
 
 	public getPath() {
-		return this.parts.reduce((accumulator: Path|null, current: StrokePart) => {
-			return accumulator?.union(current.path) ?? current.path;
-		}, null) ?? Path.empty;
+		let result: Path|null = null;
+		for (const part of this.parts) {
+			if (result) {
+				result = result.union(part.path);
+			} else {
+				result ??= part.path;
+			}
+		}
+		return result ?? Path.empty;
 	}
 
 	public description(localization: ImageComponentLocalization): string {

package/src/components/Text.test.ts

@@ -3,9 +3,6 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
 import Text, { TextStyle } from './Text';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
-
-loadExpectExtensions();
 
 const estimateTextBounds = (text: string, style: TextStyle): Rect2 => {
 	const widthEst = text.length * style.size;

package/src/components/Text.ts

@@ -135,7 +135,7 @@ export default class Text extends AbstractComponent {
 		return new Text(this.textObjects, this.transform, this.style);
 	}
 
-	private getText() {
+	public getText() {
 		const result: string[] = [];
 
 		for (const textObject of this.textObjects) {
@@ -146,7 +146,7 @@ export default class Text extends AbstractComponent {
 			}
 		}
 
-		return result.join(' ');
+		return result.join('\n');
 	}
 
 	public description(localizationTable: ImageComponentLocalization): string {