js-draw 0.1.1 → 0.1.4

package/dist/src/tools/ToolController.js

@@ -6,19 +6,20 @@ import Eraser from './Eraser';
 import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
+import TextTool from './TextTool';
 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["Pen"] = 0] = "Pen";
+    ToolType[ToolType["Selection"] = 1] = "Selection";
+    ToolType[ToolType["Eraser"] = 2] = "Eraser";
+    ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
+    ToolType[ToolType["Text"] = 4] = "Text";
     ToolType[ToolType["UndoRedoShortcut"] = 5] = "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),
@@ -28,15 +29,15 @@ export default class ToolController {
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
             // Highlighter-like pen with width=64
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new TextTool(editor, localization.textTool, localization),
         ];
         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,10 +1,13 @@
 export interface ToolLocalization {
+    rightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+    textTool: string;
+    enterTextToInsert: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

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

package/dist-test/test-dist-bundle.html

@@ -27,9 +27,16 @@
 				wheelEventsEnabled: false,
 			});
 			editor1.addToolbar();
+			editor1.loadFromSVG('<svg><text>Wheel events disabled.</text></svg>');
 
-			const editor2 = new jsdraw.Editor(document.body);
+			const editor2 = new jsdraw.Editor(document.body, {
+				wheelEventsEnabled: 'only-if-focused',
+			});
 			editor2.addToolbar();
+			editor2.loadFromSVG('<svg><text>Wheel events enabled, only if focused.</text></svg>');
+
+			const editor3 = new jsdraw.Editor(document.body);
+			editor3.addToolbar();
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "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.css

@@ -8,6 +8,7 @@
     --secondary-background-color: #faf;
     --primary-foreground-color: black;
     --secondary-foreground-color: black;
+	--primary-shadow-color: rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -17,6 +18,7 @@
 		--secondary-background-color: #607;
 		--primary-foreground-color: white;
 		--secondary-foreground-color: white;
+		--primary-shadow-color: rgba(250, 250, 250, 0.5);
 	}
 }
 

package/src/Editor.ts

@@ -29,7 +29,7 @@ export interface EditorSettings {
 	// True if touchpad/mousewheel scrolling should scroll the editor instead of the document.
 	// This does not include pinch-zoom events.
 	// Defaults to true.
-	wheelEventsEnabled: boolean;
+	wheelEventsEnabled: boolean|'only-if-focused';
 }
 
 export class Editor {
@@ -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);
@@ -241,16 +245,26 @@ export class Editor {
 				ctrlKey: evt.ctrlKey,
 			})) {
 				evt.preventDefault();
+			} else if (evt.key === 'Escape') {
+				this.renderingRegion.blur();
 			}
 		});
 
 		this.container.addEventListener('wheel', evt => {
 			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
 
-			// Process wheel events if the ctrl key is down -- we do want to handle
+			// Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
 			// pinch-zooming.
-			if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
-				return;
+			if (!evt.ctrlKey) {
+				if (!this.settings.wheelEventsEnabled) {
+					return;
+				} else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+					const focusedChild = this.container.querySelector(':focus');
+
+					if (!focusedChild) {
+						return;
+					}
+				}
 			}
 
 			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
@@ -370,9 +384,11 @@ export class Editor {
 		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
+
 		if (showImageBounds) {
 			const exportRectFill = { fill: Color4.fromHex('#44444455') };
-			const exportRectStrokeWidth = 12;
+			const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
 			renderer.drawRect(
 				this.importExportViewport.visibleRect,
 				exportRectStrokeWidth,
@@ -380,8 +396,6 @@ export class Editor {
 			);
 		}
 
-		//this.image.render(renderer, this.viewport);
-		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}
 
@@ -395,6 +409,11 @@ export class Editor {
 		this.display.getWetInkRenderer().clear();
 	}
 
+	// Focuses the region used for text input
+	public focus() {
+		this.renderingRegion.focus();
+	}
+
 	public createHTMLOverlay(overlay: HTMLElement) {
 		overlay.classList.add('overlay');
 		this.container.appendChild(overlay);

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

@@ -2,9 +2,12 @@ import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
+import Text, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
+import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
+import { Vec2 } from './geometry/Vec2';
 import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
@@ -13,6 +16,16 @@ 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';
+export const svgStyleAttributesDataKey = 'svgStyleAttrs';
+
+// [key, value]
+export type SVGLoaderUnknownAttribute = [ string, string ];
+
+// [key, value, priority]
+export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -88,12 +101,58 @@ export default class SVGLoader implements ImageLoader {
 		return result;
 	}
 
+	private attachUnrecognisedAttrs(
+		elem: AbstractComponent,
+		node: SVGElement,
+		supportedAttrs: Set<string>,
+		supportedStyleAttrs?: Set<string>
+	) {
+		for (const attr of node.getAttributeNames()) {
+			if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
+				continue;
+			}
+
+			elem.attachLoadSaveData(svgAttributesDataKey,
+				[ attr, node.getAttribute(attr) ] as SVGLoaderUnknownAttribute,
+			);
+		}
+
+		if (supportedStyleAttrs) {
+			for (const attr of node.style) {
+				if (attr === '' || !attr) {
+					continue;
+				}
+
+				if (supportedStyleAttrs.has(attr)) {
+					continue;
+				}
+
+				// TODO: Do we need special logic for !important properties?
+				elem.attachLoadSaveData(svgStyleAttributesDataKey, 
+					{
+						key: attr,
+						value: node.style.getPropertyValue(attr),
+						priority: node.style.getPropertyPriority(attr)
+					} as SVGLoaderUnknownStyleAttribute
+				);
+			}
+		}
+	}
+
 	// Adds a stroke with a single path
 	private addPath(node: SVGPathElement) {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
+
 			elem = new Stroke(strokeData);
+
+			const supportedStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
+			this.attachUnrecognisedAttrs(
+				elem, node,
+				new Set([ ...supportedStyleAttrs, 'd' ]),
+				new Set(supportedStyleAttrs)
+			);
 		} catch (e) {
 			console.error(
 				'Invalid path in node', node,
@@ -106,6 +165,80 @@ export default class SVGLoader implements ImageLoader {
 		this.onAddComponent?.(elem);
 	}
 
+	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
+		const contentList: Array<Text|string> = [];
+		for (const child of elem.childNodes) {
+			if (child.nodeType === Node.TEXT_NODE) {
+				contentList.push(child.nodeValue ?? '');
+			} else if (child.nodeType === Node.ELEMENT_NODE) {
+				const subElem = child as SVGElement;
+				if (subElem.tagName.toLowerCase() === 'tspan') {
+					contentList.push(this.makeText(subElem as SVGTSpanElement));
+				} else {
+					throw new Error(`Unrecognized text child element: ${subElem}`);
+				}
+			} else {
+				throw new Error(`Unrecognized text child node: ${child}.`);
+			}
+		}
+
+		// Compute styles.
+		const computedStyles = window.getComputedStyle(elem);
+		const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+
+		const supportedStyleAttrs = [
+			'fontFamily',
+			'fill',
+			'transform'
+		];
+		let fontSize = 12;
+		if (fontSizeMatch) {
+			supportedStyleAttrs.push('fontSize');
+			fontSize = parseFloat(fontSizeMatch[1]);
+		}
+		const style: TextStyle = {
+			size: fontSize,
+			fontFamily: computedStyles.fontFamily || 'sans-serif',
+			renderingStyle: {
+				fill: Color4.fromString(computedStyles.fill)
+			},
+		};
+
+		// Compute transform matrix
+		let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+		const supportedAttrs = [];
+		const elemX = elem.getAttribute('x');
+		const elemY = elem.getAttribute('y');
+		if (elemX && elemY) {
+			const x = parseFloat(elemX);
+			const y = parseFloat(elemY);
+			if (!isNaN(x) && !isNaN(y)) {
+				supportedAttrs.push('x', 'y');
+				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+			}
+		}
+
+		const result = new Text(contentList, transform, style);
+		this.attachUnrecognisedAttrs(
+			result,
+			elem,
+			new Set(supportedAttrs),
+			new Set(supportedStyleAttrs)
+		);
+
+		return result;
+	}
+
+	private addText(elem: SVGTextElement|SVGTSpanElement) {
+		try {
+			const textElem = this.makeText(elem);
+			this.onAddComponent?.(textElem);
+		} catch (e) {
+			console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+			this.addUnknownNode(elem);
+		}
+	}
+
 	private addUnknownNode(node: SVGElement) {
 		const component = new UnknownSVGObject(node);
 		this.onAddComponent?.(component);
@@ -117,13 +250,14 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		const components = viewBoxAttr.split(/[ \t,]/);
+		const components = viewBoxAttr.split(/[ \t\n,]+/);
 		const x = parseFloat(components[0]);
 		const y = parseFloat(components[1]);
 		const width = parseFloat(components[2]);
 		const height = parseFloat(components[3]);
 
 		if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+			console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
 			return;
 		}
 
@@ -137,6 +271,7 @@ export default class SVGLoader implements ImageLoader {
 
 	private async visit(node: Element) {
 		this.totalToProcess += node.childElementCount;
+		let visitChildren = true;
 
 		switch (node.tagName.toLowerCase()) {
 		case 'g':
@@ -145,6 +280,10 @@ export default class SVGLoader implements ImageLoader {
 		case 'path':
 			this.addPath(node as SVGPathElement);
 			break;
+		case 'text':
+			this.addText(node as SVGTextElement);
+			visitChildren = false;
+			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
 			this.updateSVGAttrs(node as SVGSVGElement);
@@ -159,8 +298,10 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		for (const child of node.children) {
-			await this.visit(child);
+		if (visitChildren) {
+			for (const child of node.children) {
+				await this.visit(child);
+			}
 		}
 
 		this.processedCount ++;
@@ -214,9 +355,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();
@@ -242,8 +381,10 @@ export default class SVGLoader implements ImageLoader {
 			'http://www.w3.org/2000/svg', 'svg'
 		);
 		svgElem.innerHTML = text;
+		sandboxDoc.body.appendChild(svgElem);
 
 		return new SVGLoader(svgElem, () => {
+			svgElem.remove();
 			sandbox.remove();
 		});
 	}

package/src/Viewport.ts

@@ -170,9 +170,17 @@ export class Viewport {
 	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
 	// centered in the viewport.
 	// Returns null if no transformation is necessary
-	public zoomTo(toMakeVisible: Rect2): Command {
+	public zoomTo(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): 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
@@ -187,7 +195,7 @@ export class Viewport {
 		// Ensure that toMakeVisible is at least 1/8th of the visible region.
 		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
 
-		if (largerThanTarget || muchSmallerThanTarget) {
+		if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
 			// If larger than the target, ensure that the longest axis is visible.
 			// If smaller, shrink the visible rectangle as much as possible
 			const multiplier = (largerThanTarget ? Math.max : Math.min)(
@@ -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/SVGGlobalAttributesObject.ts

@@ -20,7 +20,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 			return;
 		}
 
-		console.log('Rendering to SVG.', this.attrs);
 		for (const [ attr, value ] of this.attrs) {
 			canvas.setRootSVGAttribute(attr, value);
 		}

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.