js-draw 0.1.1 → 0.1.2

package/src/geometry/Path.ts

@@ -371,6 +371,7 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let startPos: Point2|null = null;
 		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
@@ -413,19 +414,67 @@ export default class Path {
 				endPoint,
 			});
 		};
+		const commandArgCounts: Record<string, number> = {
+			'm': 1,
+			'l': 1,
+			'c': 3,
+			'q': 2,
+			'z': 0,
+			'h': 1,
+			'v': 1,
+		};
 
 		// Each command: Command character followed by anything that isn't a command character
-		const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+		const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
 		let current;
 		while ((current = commandExp.exec(pathString)) !== null) {
-			const argParts = current[2].trim().split(/[^0-9.-]/).filter(
+			const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(
 				part => part.length > 0
-			);
-			const numericArgs = argParts.map(arg => parseFloat(arg));
+			).reduce((accumualtor: string[], current: string): string[] => {
+				// As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+				// expressions. As such, we need an alternative.
+				// Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+				// we need special cases:
+				current = current.replace(/([^eE])[-]/g, '$1 -');
+				const parts = current.split(' -');
+				if (parts[0] !== '') {
+					accumualtor.push(parts[0]);
+				}
+				accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+				return accumualtor;
+			}, []);
+
+			let numericArgs = argParts.map(arg => parseFloat(arg));
+
+			let commandChar = current[1].toLowerCase();
+			let uppercaseCommand = current[1] !== commandChar;
+
+			// Convert commands that don't take points into commands that do.
+			if (commandChar === 'v' || commandChar === 'h') {
+				numericArgs = numericArgs.reduce((accumulator: number[], current: number): number[] => {
+					if (commandChar === 'v') {
+						return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+					} else {
+						return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+					}
+				}, []);
+				commandChar = 'l';
+			} else if (commandChar === 'z') {
+				if (firstPos) {
+					numericArgs = [ firstPos.x, firstPos.y ];
+					firstPos = lastPos;
+				} else {
+					continue;
+				}
+
+				// 'z' always acts like an uppercase lineTo(startPos)
+				uppercaseCommand = true;
+				commandChar = 'l';
+			}
+
 
-			const commandChar = current[1];
-			const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-			const args = numericArgs.reduce((
+			const commandArgCount: number = commandArgCounts[commandChar] ?? 0;
+			const allArgs = numericArgs.reduce((
 				accumulator: Point2[], current, index, parts
 			): Point2[] => {
 				if (index % 2 !== 0) {
@@ -435,82 +484,65 @@ export default class Path {
 				} else {
 					return accumulator;
 				}
-			}, []).map((coordinate: Vec2): Point2 => {
+			}, []).map((coordinate, index): Point2 => {
 				// Lowercase commands are relative, uppercase commands use absolute
 				// positioning
+				let newPos;
 				if (uppercaseCommand) {
-					lastPos = coordinate;
-					return coordinate;
+					newPos = coordinate;
 				} else {
-					lastPos = lastPos.plus(coordinate);
-					return lastPos;
+					newPos = lastPos.plus(coordinate);
 				}
-			});
-
-			let expectedPointArgCount;
 
-			switch (commandChar.toLowerCase()) {
-			case 'm':
-				expectedPointArgCount = 1;
-				moveTo(args[0]);
-				break;
-			case 'l':
-				expectedPointArgCount = 1;
-				lineTo(args[0]);
-				break;
-			case 'z':
-				expectedPointArgCount = 0;
-				// firstPos can be null if the stroke data is just 'z'.
-				if (firstPos) {
-					lineTo(firstPos);
+				if ((index + 1) % commandArgCount === 0) {
+					lastPos = newPos;
 				}
-				break;
-			case 'c':
-				expectedPointArgCount = 3;
-				cubicBezierTo(args[0], args[1], args[2]);
-				break;
-			case 'q':
-				expectedPointArgCount = 2;
-				quadraticBeierTo(args[0], args[1]);
-				break;
 
-			// Horizontal line
-			case 'h':
-				expectedPointArgCount = 0;
-
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(numericArgs[0], lastPos.y));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-				}
-				break;
+				return newPos;
+			});
+	
+			if (allArgs.length % commandArgCount !== 0) {
+				throw new Error([
+					`Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+					`The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+					`Command: ${current[0]}`,
+				].join('\n'));
+			}
 
-			// Vertical line
-			case 'v':
-				expectedPointArgCount = 0;
+			for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+				const args = allArgs.slice(argPos, argPos + commandArgCount);
 
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
+				switch (commandChar.toLowerCase()) {
+				case 'm':
+					if (argPos === 0) {
+						moveTo(args[0]);
+					} else {
+						lineTo(args[0]);
+					}
+					break;
+				case 'l':
+					lineTo(args[0]);
+					break;
+				case 'c':
+					cubicBezierTo(args[0], args[1], args[2]);
+					break;
+				case 'q':
+					quadraticBeierTo(args[0], args[1]);
+					break;
+				default:
+					throw new Error(`Unknown path command ${commandChar}`);
 				}
-				break;
-			default:
-				throw new Error(`Unknown path command ${commandChar}`);
-			}
 
-			if (args.length !== expectedPointArgCount) {
-				throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+				isFirstCommand = false;
 			}
 
-			if (args.length > 0) {
-				firstPos ??= args[0];
+			if (allArgs.length > 0) {
+				firstPos ??= allArgs[0];
+				startPos ??= firstPos;
+				lastPos = allArgs[allArgs.length - 1];
 			}
-			isFirstCommand = false;
 		}
 
-		return new Path(firstPos ?? Vec2.zero, commands);
+		return new Path(startPos ?? Vec2.zero, commands);
 	}
 }

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -128,7 +129,7 @@ export default abstract class AbstractRenderer {
 		this.objectLevel ++;
 	}
 
-	public endObject() {
+	public endObject(_loaderData?: LoadSaveDataTable) {
 		// Render the paths all at once
 		this.flushPath();
 		this.currentPaths = null;

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,7 +1,9 @@
 
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey, SVGLoaderUnknownAttribute } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
@@ -13,8 +15,8 @@ export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStyle: RenderingStyle|null;
 	private lastPath: PathCommand[]|null;
 	private lastPathStart: Point2|null;
+	private objectElems: SVGElement[]|null = null;
 
-	private mainGroup: SVGGElement;
 	private overwrittenAttrs: Record<string, string|null> = {};
 
 	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
@@ -41,8 +43,6 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	public clear() {
-		this.mainGroup = document.createElementNS(svgNameSpace, 'g');
-
 		// Restore all alltributes
 		for (const attrName in this.overwrittenAttrs) {
 			const value = this.overwrittenAttrs[attrName];
@@ -54,9 +54,6 @@ export default class SVGRenderer extends AbstractRenderer {
 			}
 		}
 		this.overwrittenAttrs = {};
-
-		// Remove all children
-		this.elem.replaceChildren(this.mainGroup);
 	}
 
 	protected beginPath(startPoint: Point2) {
@@ -106,7 +103,8 @@ export default class SVGRenderer extends AbstractRenderer {
 			pathElem.setAttribute('stroke-width', style.stroke.width.toString());
 		}
 
-		this.mainGroup.appendChild(pathElem);
+		this.elem.appendChild(pathElem);
+		this.objectElems?.push(pathElem);
 	}
 
 	public startObject(boundingBox: Rect2) {
@@ -116,13 +114,27 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPath = null;
 		this.lastPathStart = null;
 		this.lastPathStyle = null;
+		this.objectElems = [];
 	}
 
-	public endObject() {
-		super.endObject();
+	public endObject(loaderData?: LoadSaveDataTable) {
+		super.endObject(loaderData);
 
 		// Don't extend paths across objects
 		this.addPathToSVG();
+
+		if (loaderData) {
+			// Restore any attributes unsupported by the app.
+			for (const elem of this.objectElems ?? []) {
+				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
+
+				if (attrs) {
+					for (const [ attr, value ] of attrs) {
+						elem.setAttribute(attr, value);
+					}
+				}
+			}
+		}
 	}
 
 	protected lineTo(point: Point2) {
@@ -175,7 +187,7 @@ export default class SVGRenderer extends AbstractRenderer {
 			elem.setAttribute('cx', `${point.x}`);
 			elem.setAttribute('cy', `${point.y}`);
 			elem.setAttribute('r', '15');
-			this.mainGroup.appendChild(elem);
+			this.elem.appendChild(elem);
 		});
 	}