js-draw 0.0.10 → 0.1.2

package/src/SVGLoader.ts

@@ -5,17 +5,25 @@ import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
-import { RenderablePathSpec, RenderingStyle } from './rendering/AbstractRenderer';
-import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 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;
+	private onDetermineExportRect: OnDetermineExportRectListener|null = null;
+
 	private processedCount: number = 0;
 	private totalToProcess: number = 0;
 	private rootViewBox: Rect2|null;
@@ -86,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,
@@ -126,6 +153,7 @@ export default class SVGLoader implements ImageLoader {
 		}
 
 		this.rootViewBox = new Rect2(x, y, width, height);
+		this.onDetermineExportRect?.(this.rootViewBox);
 	}
 
 	private updateSVGAttrs(node: SVGSVGElement) {
@@ -172,10 +200,12 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	public async start(
-		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener
-	): Promise<Rect2> {
+		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener,
+		onDetermineExportRect: OnDetermineExportRectListener|null = null
+	): Promise<void> {
 		this.onAddComponent = onAddComponent;
 		this.onProgress = onProgress;
+		this.onDetermineExportRect = onDetermineExportRect;
 
 		// Estimate the number of tags to process.
 		this.totalToProcess = this.source.childElementCount;
@@ -185,14 +215,12 @@ export default class SVGLoader implements ImageLoader {
 		await this.visit(this.source);
 
 		const viewBox = this.rootViewBox;
-		let result = defaultSVGViewRect;
 
-		if (viewBox) {
-			result = Rect2.of(viewBox);
+		if (!viewBox) {
+			this.onDetermineExportRect?.(defaultSVGViewRect);
 		}
 
 		this.onFinish?.();
-		return result;
 	}
 
 	// TODO: Handling unsafe data! Tripple-check that this is secure!
@@ -211,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

@@ -118,12 +118,20 @@ export class Viewport {
 		return this.transform;
 	}
 
+	public getResolution(): Vec2 {
+		return this.screenRect.size;
+	}
+
 	// Returns the amount a vector on the canvas is scaled to become a vector on the screen.
 	public getScaleFactor(): number {
 		// Use transformVec3 to avoid translating the vector
 		return this.transform.transformVec3(Vec3.unitX).magnitude();
 	}
 
+	public getSizeOfPixelOnCanvas(): number {
+		return 1/this.getScaleFactor();
+	}
+
 	// Returns the angle of the canvas in radians
 	public getRotationAngle(): number {
 		return this.transform.transformVec3(Vec3.unitX).angle();
@@ -158,6 +166,66 @@ export class Viewport {
 	public roundPoint(point: Point2): Point2 {
 		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
 	}
+
+	// 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 {
+		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
+			// to transform the viewport.
+			const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+			return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+		};
+
+		let targetRect = recomputeTargetRect();
+		const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+
+		// Ensure that toMakeVisible is at least 1/8th of the visible region.
+		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+
+		if (largerThanTarget || muchSmallerThanTarget) {
+			// 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)(
+				toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h
+			);
+			const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+			const viewportContentTransform = visibleRectTransform.inverse();
+
+			transform = transform.rightMul(viewportContentTransform);
+		}
+
+		targetRect = recomputeTargetRect();
+
+		// Ensure that the center of the region is visible
+		if (!targetRect.containsRect(toMakeVisible)) {
+			// target position - current position
+			const translation = toMakeVisible.center.minus(targetRect.center);
+			const visibleRectTransform = Mat33.translation(translation);
+			const viewportContentTransform = visibleRectTransform.inverse();
+
+			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);
+	}
 }
 
 export namespace Viewport { // eslint-disable-line

package/src/components/AbstractComponent.ts

@@ -4,13 +4,16 @@ import EditorImage from '../EditorImage';
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+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;
-	public zIndex: number;
+	private zIndex: number;
 
 	// Topmost z-index
 	private static zIndexCounter: number = 0;
@@ -20,9 +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

@@ -1,8 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
-import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/Stroke.ts

@@ -2,7 +2,7 @@ import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Path from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 
@@ -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/components/UnknownSVGObject.ts

@@ -1,8 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
-import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/builders/ArrowBuilder.ts

@@ -1,6 +1,6 @@
 import { PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Rect2 from '../../geometry/Rect2';
 import { PathCommand, PathCommandType } from '../../geometry/Path';
@@ -212,7 +212,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const lowerBoundary = computeBoundaryCurve(-1, halfVec);
 
 		// If the boundaries have two intersections, increasing the half vector's length could fix this.
-		if (upperBoundary.intersects(lowerBoundary).length === 2) {
+		if (upperBoundary.intersects(lowerBoundary).length > 0) {
 			halfVec = halfVec.times(2);
 		}
 

package/src/components/builders/LineBuilder.ts

@@ -1,6 +1,6 @@
 import { PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/RectangleBuilder.ts

@@ -1,6 +1,6 @@
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/types.ts

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/geometry/Mat33.ts

@@ -7,6 +7,9 @@ import Vec3 from './Vec3';
 export default class Mat33 {
 	private readonly rows: Vec3[];
 
+	// ⎡ a1 a2 a3 ⎤
+	// ⎢ b1 b2 b3 ⎥
+	// ⎣ c1 c2 c3 ⎦
 	public constructor(
 		public readonly a1: number,
 		public readonly a2: number,

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));
+	});
 });

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

@@ -19,13 +19,23 @@ describe('Path.toString', () => {
 	});
 
 	it('should fix rounding errors', () => {
-		const path = new Path(Vec2.of(0.100001, 0.199999), [
+		const path = new Path(Vec2.of(0.10000001, 0.19999999), [
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(9999, -10.999999995),
-				endPoint: Vec2.of(0.000300001, 1.400002),
+				endPoint: Vec2.of(0.000300001, 1.40000002),
 			},
 		]);
 		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
 	});
+
+	it('should not remove trailing zeroes before decimal points', () => {
+		const path = new Path(Vec2.of(1000, 2_000_000), [
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(30.0001, 40.000000001),
+			},
+		]);
+		expect(path.toString()).toBe('M1000,2000000L30.0001,40');
+	});
 });