js-draw 0.11.2 → 0.11.3

package/dist/src/EditorImage.js

@@ -244,17 +244,7 @@ export class ImageNode {
             this.bbox = this.content.getBBox();
         }
         else {
-            this.bbox = Rect2.empty;
-            let isFirst = true;
-            for (const child of this.children) {
-                if (isFirst) {
-                    this.bbox = child.getBBox();
-                    isFirst = false;
-                }
-                else {
-                    this.bbox = this.bbox.union(child.getBBox());
-                }
-            }
+            this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
             (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);

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

@@ -45,6 +45,7 @@ export default class Rect2 {
     toString(): string;
     static fromCorners(corner1: Point2, corner2: Point2): Rect2;
     static bboxOf(points: Point2[], margin?: number): Rect2;
+    static union(...rects: Rect2[]): Rect2;
     static of(template: RectTemplate): Rect2;
     static empty: Rect2;
     static unitSquare: Rect2;

package/dist/src/math/Rect2.js

@@ -197,6 +197,26 @@ export default class Rect2 {
         }
         return Rect2.fromCorners(Vec2.of(minX - margin, minY - margin), Vec2.of(maxX + margin, maxY + margin));
     }
+    // @returns a rectangle that contains all of the given rectangles, the bounding box
+    //     of the given rectangles.
+    static union(...rects) {
+        if (rects.length === 0) {
+            return Rect2.empty;
+        }
+        const firstRect = rects[0];
+        let minX = firstRect.topLeft.x;
+        let minY = firstRect.topLeft.y;
+        let maxX = firstRect.bottomRight.x;
+        let maxY = firstRect.bottomRight.y;
+        for (let i = 1; i < rects.length; i++) {
+            const rect = rects[i];
+            minX = Math.min(minX, rect.topLeft.x);
+            minY = Math.min(minY, rect.topLeft.y);
+            maxX = Math.max(maxX, rect.bottomRight.x);
+            maxY = Math.max(maxY, rect.bottomRight.y);
+        }
+        return new Rect2(minX, minY, maxX - minX, maxY - minY);
+    }
     static of(template) {
         var _a, _b, _c, _d;
         const width = (_b = (_a = template.width) !== null && _a !== void 0 ? _a : template.w) !== null && _b !== void 0 ? _b : 0;

package/dist/src/toolbar/IconProvider.js

@@ -353,17 +353,19 @@ export default class IconProvider {
         return icon;
     }
     makeIconFromFactory(pen, factory) {
-        const toolThickness = pen.getThickness();
+        // Increase the thickness we use to generate the icon less with larger actual thicknesses.
+        // We want the icon to be recognisable with a large range of thicknesses.
+        const thickness = Math.sqrt(pen.getThickness()) * 3;
         const nowTime = (new Date()).getTime();
         const startPoint = {
             pos: Vec2.of(10, 10),
-            width: toolThickness / 5,
+            width: thickness,
             color: pen.getColor(),
             time: nowTime - 100,
         };
         const endPoint = {
             pos: Vec2.of(90, 90),
-            width: toolThickness / 5,
+            width: thickness,
             color: pen.getColor(),
             time: nowTime,
         };

package/dist/src/tools/TextTool.js

@@ -63,11 +63,19 @@ export default class TextTool extends BaseTool {
         // Estimate
         return style.size * 2 / 3;
     }
-    flushInput() {
+    // Take input from this' textInputElem and add it to the EditorImage.
+    // If [removeInput], the HTML input element is removed. Otherwise, its value
+    // is cleared.
+    flushInput(removeInput = true) {
         if (this.textInputElem && this.textTargetPosition) {
             const content = this.textInputElem.value.trimEnd();
-            this.textInputElem.remove();
-            this.textInputElem = null;
+            if (removeInput) {
+                this.textInputElem.remove();
+                this.textInputElem = null;
+            }
+            else {
+                this.textInputElem.value = '';
+            }
             if (content === '') {
                 return;
             }
@@ -134,9 +142,12 @@ export default class TextTool extends BaseTool {
             }
         };
         this.textInputElem.onblur = () => {
-            // Don't remove the input within the context of a blur event handler.
-            // Doing so causes errors.
-            setTimeout(() => this.flushInput(), 0);
+            // Delay removing the input -- flushInput may be called within a blur()
+            // event handler
+            const removeInput = false;
+            this.flushInput(removeInput);
+            const input = this.textInputElem;
+            setTimeout(() => input === null || input === void 0 ? void 0 : input.remove(), 0);
         };
         this.textInputElem.onkeyup = (evt) => {
             var _a, _b;

package/dist/src/tools/ToolController.js

@@ -21,13 +21,13 @@ export default class ToolController {
         this.primaryToolGroup = primaryToolGroup;
         const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
-        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
+        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
         const primaryTools = [
             // Three pens
             primaryPenTool,
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
-            // Highlighter-like pen with width=64
-            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }, makePressureSensitiveFreehandLineBuilder),
+            // Highlighter-like pen with width=40
+            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, makePressureSensitiveFreehandLineBuilder),
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),

package/package.json

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

@@ -320,17 +320,7 @@ export class ImageNode {
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
 		} else {
-			this.bbox = Rect2.empty;
-			let isFirst = true;
-
-			for (const child of this.children) {
-				if (isFirst) {
-					this.bbox = child.getBBox();
-					isFirst = false;
-				} else {
-					this.bbox = this.bbox.union(child.getBBox());
-				}
-			}
+			this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
 		}
 
 		if (bubbleUp && !oldBBox.eq(this.bbox)) {

package/src/math/Rect2.test.ts

@@ -46,6 +46,28 @@ describe('Rect2', () => {
 		expect(Rect2.empty.union(Rect2.empty)).objEq(Rect2.empty);
 	});
 
+	it('should handle empty unions', () => {
+		expect(Rect2.union()).toStrictEqual(Rect2.empty);
+	});
+
+	it('should correctly union multiple rectangles', () => {
+		expect(Rect2.union(new Rect2(0, 0, 1, 1), new Rect2(1, 1, 2, 2))).objEq(
+			new Rect2(0, 0, 3, 3)
+		);
+
+		expect(
+			Rect2.union(new Rect2(-1, 0, 1, 1), new Rect2(1, 1, 2, 2), new Rect2(1, 10, 1, 0.1))
+		).objEq(
+			new Rect2(-1, 0, 4, 10.1)
+		);
+
+		expect(
+			Rect2.union(new Rect2(-1, 0, 1, 1), new Rect2(1, -11.1, 2, 2), new Rect2(1, 10, 1, 0.1))
+		).objEq(
+			new Rect2(-1, -11.1, 4, 21.2)
+		);
+	});
+
 	it('should contain points that are within a rectangle', () => {
 		expect(new Rect2(-1, -1, 2, 2).containsPoint(Vec2.zero)).toBe(true);
 		expect(new Rect2(-1, -1, 0, 0).containsPoint(Vec2.zero)).toBe(false);

package/src/math/Rect2.ts

@@ -278,6 +278,32 @@ export default class Rect2 {
 		);
 	}
 
+	// @returns a rectangle that contains all of the given rectangles, the bounding box
+	//     of the given rectangles.
+	public static union(...rects: Rect2[]): Rect2 {
+		if (rects.length === 0) {
+			return Rect2.empty;
+		}
+
+		const firstRect = rects[0];
+		let minX: number = firstRect.topLeft.x;
+		let minY: number = firstRect.topLeft.y;
+		let maxX: number = firstRect.bottomRight.x;
+		let maxY: number = firstRect.bottomRight.y;
+
+		for (let i = 1; i < rects.length; i++) {
+			const rect = rects[i];
+			minX = Math.min(minX, rect.topLeft.x);
+			minY = Math.min(minY, rect.topLeft.y);
+			maxX = Math.max(maxX, rect.bottomRight.x);
+			maxY = Math.max(maxY, rect.bottomRight.y);
+		}
+
+		return new Rect2(
+			minX, minY, maxX - minX, maxY - minY,
+		);
+	}
+
 	public static of(template: RectTemplate) {
 		const width = template.width ?? template.w ?? 0;
 		const height = template.height ?? template.h ?? 0;

package/src/toolbar/IconProvider.ts

@@ -407,18 +407,20 @@ export default class IconProvider {
 	}
 	
 	public makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType {
-		const toolThickness = pen.getThickness();
+		// Increase the thickness we use to generate the icon less with larger actual thicknesses.
+		// We want the icon to be recognisable with a large range of thicknesses.
+		const thickness = Math.sqrt(pen.getThickness()) * 3;
 	
 		const nowTime = (new Date()).getTime();
 		const startPoint: StrokeDataPoint = {
 			pos: Vec2.of(10, 10),
-			width: toolThickness / 5,
+			width: thickness,
 			color: pen.getColor(),
 			time: nowTime - 100,
 		};
 		const endPoint: StrokeDataPoint = {
 			pos: Vec2.of(90, 90),
-			width: toolThickness / 5,
+			width: thickness,
 			color: pen.getColor(),
 			time: nowTime,
 		};

package/src/tools/TextTool.ts

@@ -73,11 +73,19 @@ export default class TextTool extends BaseTool {
 		return style.size * 2 / 3;
 	}
 
-	private flushInput() {
+	// Take input from this' textInputElem and add it to the EditorImage.
+	// If [removeInput], the HTML input element is removed. Otherwise, its value
+	// is cleared.
+	private flushInput(removeInput: boolean = true) {
 		if (this.textInputElem && this.textTargetPosition) {
 			const content = this.textInputElem.value.trimEnd();
-			this.textInputElem.remove();
-			this.textInputElem = null;
+
+			if (removeInput) {
+				this.textInputElem.remove();
+				this.textInputElem = null;
+			} else {
+				this.textInputElem.value = '';
+			}
 
 			if (content === '') {
 				return;
@@ -166,9 +174,13 @@ export default class TextTool extends BaseTool {
 			}
 		};
 		this.textInputElem.onblur = () => {
-			// Don't remove the input within the context of a blur event handler.
-			// Doing so causes errors.
-			setTimeout(() => this.flushInput(), 0);
+			// Delay removing the input -- flushInput may be called within a blur()
+			// event handler
+			const removeInput = false;
+			this.flushInput(removeInput);
+
+			const input = this.textInputElem;
+			setTimeout(() => input?.remove(), 0);
 		};
 		this.textInputElem.onkeyup = (evt) => {
 			if (evt.key === 'Enter' && !evt.shiftKey) {

package/src/tools/ToolController.ts

@@ -29,14 +29,14 @@ export default class ToolController {
 		
 		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
 		const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
-		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
+		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
 		const primaryTools = [
 			// Three pens
 			primaryPenTool,
 			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
 			
-			// Highlighter-like pen with width=64
-			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }, makePressureSensitiveFreehandLineBuilder),
+			// Highlighter-like pen with width=40
+			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, makePressureSensitiveFreehandLineBuilder),
 			
 			new Eraser(editor, localization.eraserTool),
 			new SelectionTool(editor, localization.selectionTool),