js-draw 0.1.1 → 0.1.2

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

@@ -11,22 +11,23 @@ interface PinchData {
     dist: number;
 }
 export declare enum PanZoomMode {
-    OneFingerGestures = 1,
-    TwoFingerGestures = 2,
-    AnyDevice = 4
+    OneFingerTouchGestures = 1,
+    TwoFingerTouchGestures = 2,
+    RightClickDrags = 4,
+    SinglePointerGestures = 8
 }
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
-    readonly kind: ToolType.PanZoom | ToolType.TouchPanZoom;
+    readonly kind: ToolType.PanZoom;
     private transform;
     private lastAngle;
     private lastDist;
     private lastScreenCenter;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
-    private pointersHaveCorrectDeviceType;
-    onPointerDown({ allPointers }: PointerEvt): boolean;
+    private allPointersAreOfType;
+    onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
     private getCenterDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
@@ -36,5 +37,7 @@ export default class PanZoom extends BaseTool {
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress({ key }: KeyPressEvent): boolean;
+    setMode(mode: PanZoomMode): void;
+    getMode(): PanZoomMode;
 }
 export {};

package/dist/src/tools/PanZoom.js

@@ -2,17 +2,16 @@ import Mat33 from '../geometry/Mat33';
 import { Vec2 } from '../geometry/Vec2';
 import Vec3 from '../geometry/Vec3';
 import { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 export var PanZoomMode;
 (function (PanZoomMode) {
-    // Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
-    PanZoomMode[PanZoomMode["OneFingerGestures"] = 1] = "OneFingerGestures";
-    // Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
-    PanZoomMode[PanZoomMode["TwoFingerGestures"] = 2] = "TwoFingerGestures";
-    // / Handle gestures from any device, rather than just touch
-    PanZoomMode[PanZoomMode["AnyDevice"] = 4] = "AnyDevice";
+    PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
+    PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -21,9 +20,6 @@ export default class PanZoom extends BaseTool {
         this.mode = mode;
         this.kind = ToolType.PanZoom;
         this.transform = null;
-        if (mode === PanZoomMode.OneFingerGestures) {
-            this.kind = ToolType.TouchPanZoom;
-        }
     }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
@@ -34,24 +30,25 @@ export default class PanZoom extends BaseTool {
         const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
         return { canvasCenter, screenCenter, angle, dist };
     }
-    pointersHaveCorrectDeviceType(pointers) {
-        return this.mode & PanZoomMode.AnyDevice || pointers.every(pointer => pointer.device === PointerDevice.Touch);
+    allPointersAreOfType(pointers, kind) {
+        return pointers.every(pointer => pointer.device === kind);
     }
-    onPointerDown({ allPointers }) {
+    onPointerDown({ allPointers: pointers }) {
         var _a;
         let handlingGesture = false;
-        if (!this.pointersHaveCorrectDeviceType(allPointers)) {
-            handlingGesture = false;
-        }
-        else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
-            const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+        const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+        const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
+        if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+            const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
             this.lastAngle = angle;
             this.lastDist = dist;
             this.lastScreenCenter = screenCenter;
             handlingGesture = true;
         }
-        else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
-            this.lastScreenCenter = allPointers[0].screenPos;
+        else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+            || (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+            || (this.mode & PanZoomMode.SinglePointerGestures))) {
+            this.lastScreenCenter = pointers[0].screenPos;
             handlingGesture = true;
         }
         if (handlingGesture) {
@@ -87,10 +84,10 @@ export default class PanZoom extends BaseTool {
         var _a;
         (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
         const lastTransform = this.transform;
-        if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+        if (allPointers.length === 2) {
             this.handleTwoFingerMove(allPointers);
         }
-        else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+        else if (allPointers.length === 1) {
             this.handleOneFingerMove(allPointers[0]);
         }
         lastTransform.unapply(this.editor);
@@ -191,4 +188,16 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate);
         return true;
     }
+    setMode(mode) {
+        if (mode !== this.mode) {
+            this.mode = mode;
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        }
+    }
+    getMode() {
+        return this.mode;
+    }
 }

package/dist/src/tools/Pen.js

@@ -66,9 +66,14 @@ export default class Pen extends BaseTool {
         if (this.builder && current.isPrimary) {
             const stroke = this.builder.build();
             this.previewStroke();
-            const canFlatten = true;
-            const action = new EditorImage.AddElementCommand(stroke, canFlatten);
-            this.editor.dispatch(action);
+            if (stroke.getBBox().area > 0) {
+                const canFlatten = true;
+                const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+                this.editor.dispatch(action);
+            }
+            else {
+                console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+            }
         }
         this.builder = null;
         this.editor.clearWetInk();

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

@@ -3,12 +3,11 @@ import Editor from '../Editor';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 export declare enum ToolType {
-    TouchPanZoom = 0,
-    Pen = 1,
-    Selection = 2,
-    Eraser = 3,
-    PanZoom = 4,
-    UndoRedoShortcut = 5
+    Pen = 0,
+    Selection = 1,
+    Eraser = 2,
+    PanZoom = 3,
+    UndoRedoShortcut = 4
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -8,17 +8,16 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 export var ToolType;
 (function (ToolType) {
-    ToolType[ToolType["TouchPanZoom"] = 0] = "TouchPanZoom";
-    ToolType[ToolType["Pen"] = 1] = "Pen";
-    ToolType[ToolType["Selection"] = 2] = "Selection";
-    ToolType[ToolType["Eraser"] = 3] = "Eraser";
-    ToolType[ToolType["PanZoom"] = 4] = "PanZoom";
-    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
+    ToolType[ToolType["Pen"] = 0] = "Pen";
+    ToolType[ToolType["Selection"] = 1] = "Selection";
+    ToolType[ToolType["Eraser"] = 2] = "Eraser";
+    ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
+    ToolType[ToolType["UndoRedoShortcut"] = 4] = "UndoRedoShortcut";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
         const primaryToolEnabledGroup = new ToolEnabledGroup();
-        const touchPanZoom = new PanZoom(editor, PanZoomMode.OneFingerGestures, localization.touchPanTool);
+        const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
         const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
         const primaryTools = [
             new SelectionTool(editor, localization.selectionTool),
@@ -30,13 +29,12 @@ export default class ToolController {
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
         ];
         this.tools = [
-            touchPanZoom,
+            panZoomTool,
             ...primaryTools,
-            new PanZoom(editor, PanZoomMode.TwoFingerGestures | PanZoomMode.AnyDevice, localization.twoFingerPanZoomTool),
             new UndoRedoShortcut(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
-        touchPanZoom.setEnabled(false);
+        panZoomTool.setEnabled(true);
         primaryPenTool.setEnabled(true);
         editor.notifier.on(EditorEventType.ToolEnabled, event => {
             if (event.kind === EditorEventType.ToolEnabled) {

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

@@ -1,4 +1,5 @@
 export interface ToolLocalization {
+    RightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;

package/dist/src/tools/localization.js

@@ -5,6 +5,7 @@ export const defaultToolLocalization = {
     touchPanTool: 'Touch Panning',
     twoFingerPanZoomTool: 'Panning and Zooming',
     undoRedoTool: 'Undo/Redo',
+    RightClickDragPanTool: 'Right-click drag',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -165,6 +165,10 @@ export class Editor {
 		// May be required to prevent text selection on iOS/Safari:
 		// See https://stackoverflow.com/a/70992717/17055750
 		this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
+		this.renderingRegion.addEventListener('contextmenu', evt => {
+			// Don't show a context menu
+			evt.preventDefault();
+		});
 
 		this.renderingRegion.addEventListener('pointerdown', evt => {
 			const pointer = Pointer.ofEvent(evt, true, this.viewport);

package/src/EditorImage.ts

@@ -73,6 +73,10 @@ export default class EditorImage {
 		) {
 			this.#element = element;
 			this.#applyByFlattening = applyByFlattening;
+
+			if (isNaN(this.#element.getBBox().area)) {
+				throw new Error('Elements in the image cannot have NaN bounding boxes');
+			}
 		}
 
 		public apply(editor: Editor) {

package/src/Pointer.ts

@@ -5,7 +5,8 @@ export enum PointerDevice {
 	Pen,
 	Eraser,
 	Touch,
-	Mouse,
+	PrimaryButtonMouse,
+	RightButtonMouse,
 	Other,
 }
 
@@ -31,7 +32,7 @@ export default class Pointer {
         public readonly id: number,
 
         // Numeric timestamp (milliseconds, as from (new Date).getTime())
-        public readonly timeStamp: number
+        public readonly timeStamp: number,
 	) {
 	}
 
@@ -39,7 +40,7 @@ export default class Pointer {
 		const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
 
 		const pointerTypeToDevice: Record<string, PointerDevice> = {
-			'mouse': PointerDevice.Mouse,
+			'mouse': PointerDevice.PrimaryButtonMouse,
 			'pen': PointerDevice.Pen,
 			'touch': PointerDevice.Touch,
 		};
@@ -53,6 +54,14 @@ export default class Pointer {
 		const timeStamp = (new Date()).getTime();
 		const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
 
+		if (device === PointerDevice.PrimaryButtonMouse) {
+			if (evt.buttons & 0x2) {
+				device = PointerDevice.RightButtonMouse;
+			} else if (!(evt.buttons & 0x1)) {
+				device = PointerDevice.Other;
+			}
+		} 
+
 		return new Pointer(
 			screenPos,
 			canvasPos,
@@ -61,7 +70,7 @@ export default class Pointer {
 			isDown,
 			device,
 			evt.pointerId,
-			timeStamp
+			timeStamp,
 		);
 	}
 

package/src/SVGLoader.ts

@@ -13,6 +13,12 @@ type OnFinishListener = ()=> void;
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 
+// Key to retrieve unrecognised attributes from an AbstractComponent
+export const svgAttributesDataKey = 'svgAttrs';
+
+// [key, value]
+export type SVGLoaderUnknownAttribute = [ string, string ];
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -88,12 +94,31 @@ export default class SVGLoader implements ImageLoader {
 		return result;
 	}
 
+	private attachUnrecognisedAttrs(
+		elem: AbstractComponent,
+		node: SVGElement,
+		supportedAttrs: Set<string>
+	) {
+		for (const attr of node.getAttributeNames()) {
+			if (supportedAttrs.has(attr)) {
+				continue;
+			}
+
+			elem.attachLoadSaveData(svgAttributesDataKey,
+				[ attr, node.getAttribute(attr) ] as SVGLoaderUnknownAttribute,
+			);
+		}
+	}
+
 	// Adds a stroke with a single path
 	private addPath(node: SVGPathElement) {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
 			elem = new Stroke(strokeData);
+			this.attachUnrecognisedAttrs(
+				elem, node, new Set([ 'stroke', 'fill', 'stroke-width', 'd' ]),
+			);
 		} catch (e) {
 			console.error(
 				'Invalid path in node', node,
@@ -214,9 +239,7 @@ export default class SVGLoader implements ImageLoader {
 			throw new Error('SVG loading iframe is not sandboxed.');
 		}
 
-		// Try running JavaScript within the iframe
 		const sandboxDoc = sandbox.contentWindow?.document ?? sandbox.contentDocument;
-
 		if (sandboxDoc == null) throw new Error('Unable to open a sandboxed iframe!');
 
 		sandboxDoc.open();

package/src/Viewport.ts

@@ -173,6 +173,14 @@ export class Viewport {
 	public zoomTo(toMakeVisible: Rect2): Command {
 		let transform = Mat33.identity;
 
+		if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
+			throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
+		}
+
+		if (isNaN(toMakeVisible.size.magnitude())) {
+			throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
+		}
+
 		// Try to move the selection within the center 2/3rds of the viewport.
 		const recomputeTargetRect = () => {
 			// transform transforms objects on the canvas. As such, we need to invert it
@@ -210,7 +218,11 @@ export class Viewport {
 
 			transform = transform.rightMul(viewportContentTransform);
 		}
-		
+
+		if (!transform.invertable()) {
+			console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
+			transform = Mat33.identity;
+		}
 
 		return new Viewport.ViewportTransform(transform);
 	}

package/src/components/AbstractComponent.ts

@@ -7,6 +7,9 @@ import Rect2 from '../geometry/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 
+type LoadSaveData = unknown;
+export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+
 export default abstract class AbstractComponent {
 	protected lastChangedTime: number;
 	protected abstract contentBBox: Rect2;
@@ -20,13 +23,25 @@ export default abstract class AbstractComponent {
 		this.zIndex = AbstractComponent.zIndexCounter++;
 	}
 
+	// Get and manage data attached by a loader.
+	private loadSaveData: LoadSaveDataTable = {};
+	public attachLoadSaveData(key: string, data: LoadSaveData) {
+		if (!this.loadSaveData[key]) {
+			this.loadSaveData[key] = [];
+		}
+		this.loadSaveData[key].push(data);
+	}
+	public getLoadSaveData(): LoadSaveDataTable {
+		return this.loadSaveData;
+	}
+
 	public getZIndex(): number {
 		return this.zIndex;
 	}
-
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
+
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 

package/src/components/Stroke.ts

@@ -58,7 +58,7 @@ export default class Stroke extends AbstractComponent {
 				canvas.drawPath(part);
 			}
 		}
-		canvas.endObject();
+		canvas.endObject(this.getLoadSaveData());
 	}
 
 	// Grows the bounding box for a given stroke part based on that part's style.

package/src/geometry/Path.fromString.test.ts

@@ -90,15 +90,38 @@ describe('Path.fromString', () => {
 		]);
 	});
 
+	it('should break compoents at -s', () => {
+		const path = Path.fromString('m1-1 L-1-1-3-4-5-6,5-1');
+		expect(path.parts.length).toBe(4);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-1, -1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-5, -6),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(5, -1),
+			},
+		]);
+	});
+
 	it('should properly handle cubic Bézier curves', () => {
-		const path = Path.fromString('c1,1 0,-3 4 5 C1,1 0.1, 0.1 0, 0');
+		const path = Path.fromString('m1,1 c1,1 0-3 4 5 C1,1 0.1, 0.1 0, 0');
 		expect(path.parts.length).toBe(2);
 		expect(path.parts).toMatchObject([
 			{
 				kind: PathCommandType.CubicBezierTo,
-				controlPoint1: Vec2.of(1, 1),
+				controlPoint1: Vec2.of(2, 2),
 				controlPoint2: Vec2.of(1, -2),
-				endPoint: Vec2.of(5, 3),
+				endPoint: Vec2.of(5, 6),
 			},
 			{
 				kind: PathCommandType.CubicBezierTo,
@@ -120,7 +143,7 @@ describe('Path.fromString', () => {
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(1, 1),
-				endPoint: Vec2.of(-2, -3),
+				endPoint: Vec2.of(-1, -1),
 			},
 			{
 				kind: PathCommandType.QuadraticBezierTo,
@@ -130,4 +153,71 @@ describe('Path.fromString', () => {
 		]);
 		expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
 	});
+
+	it('should correctly handle a command followed by multiple sets of arguments', () => {
+		// Commands followed by multiple sets of arguments, for example,
+		//  l 5,10 5,4 3,2,
+		// should be interpreted as multiple commands. Our example, is therefore equivalent to,
+		//  l 5,10 l 5,4 l 3,2
+		
+		const path = Path.fromString(`
+			L5,10 1,1
+			 2,2 -3,-1
+			q 1,2 1,1
+			  -1,-1 -3,-4
+			h -4 -1
+			V 3 5 1
+		`);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(1, 1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(2, 2),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -1),
+			},
+
+			// q 1,2 1,1    -1,-1 -3,-4
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-2, 1),
+				endPoint: Vec2.of(-2, 0),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-3, -1),
+				endPoint: Vec2.of(-5, -4),
+			},
+
+			// h -4 -1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-9, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, -4),
+			},
+
+			// V 3 5 1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 3),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 5),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 1),
+			},
+		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(5, 10));
+	});
 });