js-draw 0.24.1 → 0.25.1

package/dist/mjs/tools/Pen.mjs

@@ -42,6 +42,7 @@ var Pen = /** @class */ (function (_super) {
         _this.builder = null;
         _this.lastPoint = null;
         _this.startPoint = null;
+        _this.currentDeviceType = null;
         _this.snapToGridEnabled = false;
         _this.angleLockEnabled = false;
         return _this;
@@ -98,8 +99,8 @@ var Pen = /** @class */ (function (_super) {
         this.lastPoint = point;
         this.previewStroke();
     };
-    Pen.prototype.onPointerDown = function (_a) {
-        var current = _a.current, allPointers = _a.allPointers;
+    Pen.prototype.onPointerDown = function (event) {
+        var current = event.current, allPointers = event.allPointers;
         var isEraser = current.device === PointerDevice.Eraser;
         var anyDeviceIsStylus = false;
         for (var _i = 0, allPointers_1 = allPointers; _i < allPointers_1.length; _i++) {
@@ -109,24 +110,54 @@ var Pen = /** @class */ (function (_super) {
                 break;
             }
         }
+        // Avoid canceling an existing stroke
+        if (this.builder && !this.eventCanCancelStroke(event)) {
+            return true;
+        }
         if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
             this.startPoint = this.toStrokePoint(current);
             this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
+            this.currentDeviceType = current.device;
             return true;
         }
         return false;
     };
+    Pen.prototype.eventCanCancelStroke = function (event) {
+        var _a, _b;
+        // If there has been a delay since the last input event,
+        // it's always okay to cancel
+        var lastInputTime = (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.time) !== null && _b !== void 0 ? _b : 0;
+        if (event.current.timeStamp - lastInputTime > 1000) {
+            return true;
+        }
+        var isPenStroke = this.currentDeviceType === PointerDevice.Pen;
+        var isTouchEvent = event.current.device === PointerDevice.Touch;
+        // Don't allow pen strokes to be cancelled by touch events.
+        if (isPenStroke && isTouchEvent) {
+            return false;
+        }
+        return true;
+    };
+    Pen.prototype.eventCanBeDeliveredToNonActiveTool = function (event) {
+        return this.eventCanCancelStroke(event);
+    };
     Pen.prototype.onPointerMove = function (_a) {
         var current = _a.current;
         if (!this.builder)
             return;
+        if (current.device !== this.currentDeviceType)
+            return;
         this.addPointToStroke(this.toStrokePoint(current));
     };
     Pen.prototype.onPointerUp = function (_a) {
         var _b, _c;
         var current = _a.current;
-        if (!this.builder) {
-            return;
+        if (!this.builder)
+            return false;
+        if (current.device !== this.currentDeviceType) {
+            // this.builder still exists, so we're handling events from another
+            // device type.
+            return true;
         }
         // onPointerUp events can have zero pressure. Use the last pressure instead.
         var currentPoint = this.toStrokePoint(current);
@@ -135,8 +166,10 @@ var Pen = /** @class */ (function (_super) {
         if (current.isPrimary) {
             this.finalizeStroke();
         }
+        return false;
     };
     Pen.prototype.onGestureCancel = function () {
+        this.builder = null;
         this.editor.clearWetInk();
     };
     Pen.prototype.finalizeStroke = function () {

package/dist/mjs/tools/ToolController.mjs

@@ -106,8 +106,15 @@ var ToolController = /** @class */ (function () {
         var _a, _b;
         var handled = false;
         if (event.kind === InputEvtType.PointerDownEvt) {
+            var canOnlySendToActiveTool = false;
+            if (this.activeTool && !this.activeTool.eventCanBeDeliveredToNonActiveTool(event)) {
+                canOnlySendToActiveTool = true;
+            }
             for (var _i = 0, _c = this.tools; _i < _c.length; _i++) {
                 var tool = _c[_i];
+                if (canOnlySendToActiveTool && tool !== this.activeTool) {
+                    continue;
+                }
                 if (tool.isEnabled() && tool.onPointerDown(event)) {
                     if (this.activeTool !== tool) {
                         (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.onGestureCancel();
@@ -119,8 +126,13 @@ var ToolController = /** @class */ (function () {
             }
         }
         else if (event.kind === InputEvtType.PointerUpEvt) {
-            (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
-            this.activeTool = null;
+            var upResult = (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
+            var continueHandlingEvents = upResult && event.allPointers.length > 1;
+            // Should the active tool continue handling events (without an additional pointer down?)
+            if (!continueHandlingEvents) {
+                // No -- Remove the current tool
+                this.activeTool = null;
+            }
             handled = true;
         }
         else if (event.kind === InputEvtType.PointerMoveEvt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.24.1",
+  "version": "0.25.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -79,7 +79,7 @@
     "bezier-js": "6.1.3"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^0.24.0",
+    "@js-draw/build-tool": "^0.25.0",
     "@types/bezier-js": "4.1.0",
     "@types/jest": "29.5.2",
     "@types/jsdom": "21.1.1"

package/src/Pointer.ts

@@ -122,9 +122,12 @@ export default class Pointer {
 		if (device === PointerDevice.PrimaryButtonMouse) {
 			if (evt.buttons & 0x2) {
 				device = PointerDevice.RightButtonMouse;
-			} else if (!(evt.buttons & 0x1)) {
-				device = PointerDevice.Other;
 			}
+			// Commented out to work around a bug in old versions of Chrome:
+			// Left mouse up events were being given type "other".
+			// else if (!(evt.buttons & 0x1)) {
+			//	device = PointerDevice.Other;
+			//}
 		}
 
 		return new Pointer(

package/src/localizations/de.ts

@@ -38,8 +38,8 @@ const localization: EditorLocalization = {
 	anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
 
 	selectPenType: 'Objekt-Typ: ',
-	freehandPen: 'Freihand',
-	pressureSensitiveFreehandPen: 'Stift (druckempfindlich)',
+	roundedTipPen: 'Freihand',
+	flatTipPen: 'Stift (druckempfindlich)',
 	arrowPen: 'Pfeil',
 	linePen: 'Linie',
 	outlinedRectanglePen: 'Umrissenes Rechteck',

package/src/localizations/es.ts

@@ -30,7 +30,7 @@ const localization: EditorLocalization = {
 	filledRectanglePen: 'Rectángulo sin borde',
 	linePen: 'Línea',
 	arrowPen: 'Flecha',
-	freehandPen: 'Dibuja sin restricción de forma',
+	roundedTipPen: 'Lapiz Redondeado',
 	selectPenType: 'Forma de dibuja:',
 	handTool: 'Mover',
 	zoom: 'Zoom',

package/src/rendering/renderers/CanvasRenderer.ts

@@ -116,6 +116,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected endPath(style: RenderingStyle) {
+		this.ctx.save();
 		this.ctx.fillStyle = style.fill.toHexString();
 		this.ctx.fill();
 
@@ -128,6 +129,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		}
 
 		this.ctx.closePath();
+		this.ctx.restore();
 	}
 
 	protected lineTo(point: Point2) {

package/src/rendering/renderers/SVGRenderer.ts

@@ -104,10 +104,11 @@ export default class SVGRenderer extends AbstractRenderer {
 		}
 	}
 
-	// Push [this.fullPath] to the SVG
-	private addPathToSVG() {
+	// Push `this.fullPath` to the SVG. Returns the path added to the SVG, if any.
+	// @internal
+	protected addPathToSVG() {
 		if (!this.lastPathStyle || this.lastPathString.length === 0) {
-			return;
+			return null;
 		}
 
 		const pathElem = document.createElementNS(svgNameSpace, 'path');
@@ -127,6 +128,8 @@ export default class SVGRenderer extends AbstractRenderer {
 
 		this.elem.appendChild(pathElem);
 		this.objectElems?.push(pathElem);
+
+		return pathElem;
 	}
 
 	public override drawPath(pathSpec: RenderablePathSpec) {

package/src/testing/getUniquePointerId.ts

@@ -0,0 +1,18 @@
+import Pointer from '../Pointer';
+
+/** Returns the smallest ID not used by the pointers in the given list. */
+const getUniquePointerId = (pointers: Pointer[]) => {
+	let ptrId = 0;
+
+	const pointerIds = pointers.map(ptr => ptr.id);
+	pointerIds.sort();
+	for (const pointerId of pointerIds) {
+		if (ptrId === pointerId) {
+			ptrId = pointerId + 1;
+		}
+	}
+
+	return ptrId;
+};
+
+export default getUniquePointerId;

package/src/testing/sendPenEvent.ts

@@ -2,6 +2,7 @@ import Editor from '../Editor';
 import { Point2 } from '../math/Vec2';
 import Pointer from '../Pointer';
 import { InputEvtType } from '../types';
+import getUniquePointerId from './getUniquePointerId';
 
 /**
  * Dispatch a pen event to the currently selected tool.
@@ -16,8 +17,10 @@ const sendPenEvent = (
 
 	allPointers?: Pointer[]
 ) => {
+	const id = getUniquePointerId(allPointers ?? []);
+
 	const mainPointer = Pointer.ofCanvasPoint(
-		point, eventType !== InputEvtType.PointerUpEvt, editor.viewport
+		point, eventType !== InputEvtType.PointerUpEvt, editor.viewport, id
 	);
 
 	editor.toolController.dispatchInputEvent({
@@ -27,5 +30,7 @@ const sendPenEvent = (
 		],
 		current: mainPointer,
 	});
+
+	return mainPointer;
 };
 export default sendPenEvent;

package/src/testing/sendTouchEvent.ts

@@ -2,6 +2,7 @@ import Editor from '../Editor';
 import { Vec2 } from '../math/Vec2';
 import Pointer, { PointerDevice } from '../Pointer';
 import { InputEvtType } from '../types';
+import getUniquePointerId from './getUniquePointerId';
 
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
@@ -47,17 +48,9 @@ const sendTouchEvent = (
 ) => {
 	const canvasPos = editor.viewport.screenToCanvas(screenPos);
 
-	let ptrId = 0;
-	let maxPtrId = 0;
-
 	// Get a unique ID for the main pointer
 	// (try to use id=0, but don't use it if it's already in use).
-	for (const pointer of allOtherPointers ?? []) {
-		maxPtrId = Math.max(pointer.id, maxPtrId);
-		if (pointer.id === ptrId) {
-			ptrId = maxPtrId + 1;
-		}
-	}
+	const ptrId = getUniquePointerId(allOtherPointers ?? []);
 
 	const mainPointer = Pointer.ofCanvasPoint(
 		canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch

package/src/toolbar/IconProvider.ts

@@ -16,20 +16,28 @@ const iconColorFill = `
 const iconColorStrokeFill = `
 	style='fill: var(--icon-color); stroke: var(--icon-color);'
 `;
-const checkerboardPatternDef = `
-	<pattern
-		id='checkerboard'
-		viewBox='0,0,10,10'
-		width='20%'
-		height='20%'
-		patternUnits='userSpaceOnUse'
-	>
-		<rect x=0 y=0 width=10 height=10 fill='white'/>
-		<rect x=0 y=0 width=5 height=5 fill='gray'/>
-		<rect x=5 y=5 width=5 height=5 fill='gray'/>
-	</pattern>
-`;
-const checkerboardPatternRef = 'url(#checkerboard)';
+
+let checkerboardIdCounter = 0;
+const makeCheckerboardPattern = () => {
+	const id = `checkerboard-${checkerboardIdCounter++}`;
+	const patternDef = `
+		<pattern
+			id='${id}'
+			viewBox='0,0,10,10'
+			width='20%'
+			height='20%'
+			patternUnits='userSpaceOnUse'
+		>
+			<rect x=0 y=0 width=10 height=10 fill='white'/>
+			<rect x=0 y=0 width=5 height=5 fill='gray'/>
+			<rect x=5 y=5 width=5 height=5 fill='gray'/>
+		</pattern>
+	`;
+	const patternRef = `url(#${id})`;
+
+	return { patternDef, patternRef };
+};
+
 
 /**
  * Provides icons that can be used in the toolbar, etc.
@@ -451,13 +459,15 @@ export default class IconProvider {
 			Color4.fromString(color), tipThickness / 40 - 0.1
 		).toHexString();
 
+		const checkerboardPattern = makeCheckerboardPattern();
+
 		const ink = `
 			<path
-				fill="${checkerboardPatternRef}"
+				fill="${checkerboardPattern.patternRef}"
 				d="${inkTipPath}"
 			/>
 			<path
-				fill="${checkerboardPatternRef}"
+				fill="${checkerboardPattern.patternRef}"
 				d="${inkTrailPath}"
 			/>
 			<path
@@ -472,7 +482,7 @@ export default class IconProvider {
 
 		const penTip = `
 			<path
-				fill="${checkerboardPatternRef}"
+				fill="${checkerboardPattern.patternRef}"
 				d="${penTipPath}"
 			/>
 			<path
@@ -500,7 +510,7 @@ export default class IconProvider {
 
 			<!-- color bubble -->
 			<path
-				fill="${checkerboardPatternRef}"
+				fill="${checkerboardPattern.patternRef}"
 				d="${colorBubblePath}"
 			/>
 			<path
@@ -511,7 +521,7 @@ export default class IconProvider {
 
 		icon.innerHTML = `
 		<defs>
-			${checkerboardPatternDef}
+			${checkerboardPattern.patternDef}
 		</defs>
 		<g>
 			${ink}
@@ -522,7 +532,13 @@ export default class IconProvider {
 		return icon;
 	}
 
-	public makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType {
+	public makeIconFromFactory(
+		pen: Pen,
+		factory: ComponentBuilderFactory,
+
+		// If true, attempts to guess the location of a transparency grid
+		includeTransparencyGrid: boolean = false
+	): IconType {
 		// 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;
@@ -549,9 +565,60 @@ export default class IconProvider {
 		icon.setAttribute('viewBox', '0 0 100 100');
 		viewport.updateScreenSize(Vec2.of(100, 100));
 
-		const renderer = new SVGRenderer(icon, viewport);
+		let renderer;
+
+		if (includeTransparencyGrid) {
+			const checkerboardPattern = makeCheckerboardPattern();
+
+			const defs = document.createElementNS(svgNamespace, 'defs');
+			defs.innerHTML = checkerboardPattern.patternDef;
+			icon.appendChild(defs);
+
+			const background = document.createElementNS(svgNamespace, 'g');
+			icon.appendChild(background);
+
+			renderer = new class extends SVGRenderer {
+				public constructor() {
+					super(icon, viewport);
+				}
+
+				protected override addPathToSVG() {
+					const addedPath = super.addPathToSVG();
+
+					if (addedPath) {
+						// Add a copy of the path on the background
+						const copy = addedPath.cloneNode(true) as SVGPathElement;
+						copy.style.zIndex = '-1';
+
+						// Make the
+						if (copy.hasAttribute('fill')
+								&& copy.getAttribute('fill') !== 'transparent'
+								&& copy.getAttribute('fill') !== 'none') {
+							copy.setAttribute('fill', checkerboardPattern.patternRef);
+						}
+
+						if (copy.hasAttribute('stroke')) {
+							copy.setAttribute('stroke', checkerboardPattern.patternRef);
+						}
+
+						background.appendChild(copy);
+					}
+
+					return addedPath;
+				}
+			}();
+		} else {
+			renderer = new SVGRenderer(icon, viewport);
+		}
 		builder.preview(renderer);
 
+		// If only a single path was rendered, try to give it a checkerboard background to
+		// emphasize transparency. TODO: This is very fragile
+
+
+		const bbox = builder.getBBox();
+		icon.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h}`);
+
 		return icon;
 	}
 
@@ -583,8 +650,10 @@ export default class IconProvider {
 		pipette.style.fill = 'var(--icon-color)';
 
 		if (color) {
+			const checkerboardPattern = makeCheckerboardPattern();
+
 			const defs = document.createElementNS(svgNamespace, 'defs');
-			defs.innerHTML = checkerboardPatternDef;
+			defs.innerHTML = checkerboardPattern.patternDef;
 			icon.appendChild(defs);
 
 			const fluidBackground = document.createElementNS(svgNamespace, 'path');
@@ -598,7 +667,7 @@ export default class IconProvider {
 			fluidBackground.setAttribute('d', fluidPathData);
 
 			fluid.style.fill = color.toHexString();
-			fluidBackground.style.fill = checkerboardPatternRef;
+			fluidBackground.style.fill = checkerboardPattern.patternRef;
 
 			icon.appendChild(fluidBackground);
 			icon.appendChild(fluid);

package/src/toolbar/localization.ts

@@ -15,8 +15,8 @@ export interface ToolbarLocalization {
 	chooseFile: string;
 	cancel: string;
 	submit: string;
-	freehandPen: string;
-	pressureSensitiveFreehandPen: string;
+	roundedTipPen: string;
+	flatTipPen: string;
 	selectPenType: string;
 	colorLabel: string;
 	pen: string;
@@ -92,8 +92,8 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 
 	touchPanning: 'Touchscreen panning',
 
-	freehandPen: 'Freehand',
-	pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+	roundedTipPen: 'Rounded Tip',
+	flatTipPen: 'Flat Tip',
 	arrowPen: 'Arrow',
 	linePen: 'Line',
 	outlinedRectanglePen: 'Outlined rectangle',

package/src/toolbar/toolbar.css

@@ -1,5 +1,6 @@
 @import url(./widgets/InsertImageWidget.css);
 @import url(./widgets/OverflowWidget.css);
+@import url(./widgets/PenToolWidget.css);
 
 
 .toolbar-root {

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -1,6 +1,6 @@
 import Editor from '../../Editor';
 import BaseTool from '../../tools/BaseTool';
-import { EditorEventType } from '../../types';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 
@@ -47,6 +47,15 @@ export default abstract class BaseToolWidget extends BaseWidget {
 		}
 	}
 
+	protected override onKeyPress(event: KeyPressEvent): boolean {
+		if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
+			this.handleClick();
+			return true;
+		}
+
+		return false;
+	}
+
 	public override addTo(parent: HTMLElement) {
 		const result = super.addTo(parent);
 		this.setSelected(this.targetTool.isEnabled());

package/src/toolbar/widgets/PenToolWidget.css

@@ -0,0 +1,53 @@
+
+.toolbar-pen-type-selector > div {
+	display: flex;
+	flex-direction: row;
+
+	max-width: 350px;
+	flex-wrap: wrap;
+
+	--button-size: 56px;
+}
+
+.toolbar-pen-type-selector .pen-type-button {
+	display: flex;
+	flex-direction: column-reverse;
+	box-sizing: border-box;
+
+	flex-shrink: 1;
+	margin: 2px;
+}
+
+.toolbar-pen-type-selector .pen-type-button:focus-within {
+	outline: 2px solid var(--primary-foreground-color);
+}
+
+.toolbar-pen-type-selector .pen-type-button input {
+	opacity: 0;
+	height: 0;
+}
+
+.toolbar-pen-type-selector .pen-type-button label {
+	display: flex;
+	flex-direction: column;
+
+	width: var(--button-size);
+	height: var(--button-size);
+
+	font-size: 0.7rem;
+	align-items: center;
+	justify-content: center;
+	padding: 4px;
+}
+
+
+.toolbar-pen-type-selector .pen-type-button .icon {
+	flex-grow: 1;
+	flex-shrink: 1;
+	width: 100%;
+}
+
+.toolbar-pen-type-selector .pen-type-button.checked {
+	background-color: var(--secondary-background-color);
+	color: var(--secondary-foreground-color);
+}