js-draw 0.1.5 → 0.1.8

package/src/components/Text.ts

@@ -1,7 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 
@@ -13,12 +14,21 @@ export interface TextStyle {
 	renderingStyle: RenderingStyle;
 }
 
+type GetTextDimensCallback = (text: string, style: TextStyle) => Rect2;
 
+const componentTypeId = 'text';
 export default class Text extends AbstractComponent {
 	protected contentBBox: Rect2;
 
-	public constructor(protected textObjects: Array<string|Text>, private transform: Mat33, private style: TextStyle) {
-		super();
+	public constructor(
+		protected readonly textObjects: Array<string|Text>,
+		private transform: Mat33,
+		private readonly style: TextStyle,
+
+		// If not given, an HtmlCanvasElement is used to determine text boundaries.
+		private readonly getTextDimens: GetTextDimensCallback = Text.getTextDimens,
+	) {
+		super(componentTypeId);
 		this.recomputeBBox();
 	}
 
@@ -52,7 +62,7 @@ export default class Text extends AbstractComponent {
 
 	private computeBBoxOfPart(part: string|Text) {
 		if (typeof part === 'string') {
-			const textBBox = Text.getTextDimens(part, this.style);
+			const textBBox = this.getTextDimens(part, this.style);
 			return textBBox.transformedBoundingBox(this.transform);
 		} else {
 			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
@@ -120,6 +130,10 @@ export default class Text extends AbstractComponent {
 		this.recomputeBBox();
 	}
 
+	protected createClone(): AbstractComponent {
+		return new Text(this.textObjects, this.transform, this.style);
+	}
+
 	private getText() {
 		const result: string[] = [];
 
@@ -137,4 +151,65 @@ export default class Text extends AbstractComponent {
 	public description(localizationTable: ImageComponentLocalization): string {
 		return localizationTable.text(this.getText());
 	}
-}
+
+	protected serializeToString(): string {
+		const serializableStyle = {
+			...this.style,
+			renderingStyle: styleToJSON(this.style.renderingStyle),
+		};
+
+		const textObjects = this.textObjects.map(text => {
+			if (typeof text === 'string') {
+				return {
+					text,
+				};
+			} else {
+				return {
+					json: text.serializeToString(),
+				};
+			}
+		});
+
+		return JSON.stringify({
+			textObjects,
+			transform: this.transform.toArray(),
+			style: serializableStyle,
+		});
+	}
+
+	public static deserializeFromString(data: string, getTextDimens: GetTextDimensCallback = Text.getTextDimens): Text {
+		const json = JSON.parse(data);
+
+		const style: TextStyle = {
+			renderingStyle: styleFromJSON(json.style.renderingStyle),
+			size: json.style.size,
+			fontWeight: json.style.fontWeight,
+			fontVariant: json.style.fontVariant,
+			fontFamily: json.style.fontFamily,
+		};
+
+		const textObjects: Array<string|Text> = json.textObjects.map((data: any) => {
+			if ((data.text ?? null) !== null) {
+				return data.text;
+			}
+
+			return Text.deserializeFromString(data.json);
+		});
+
+		json.transform = json.transform.filter((elem: any) => typeof elem === 'number');
+		if (json.transform.length !== 9) {
+			throw new Error(`Unable to deserialize transform, ${json.transform}.`);
+		}
+
+		const transformData = json.transform as [
+			number, number, number,
+			number, number, number,
+			number, number, number,
+		];
+		const transform = new Mat33(...transformData);
+
+		return new Text(textObjects, transform, style, getTextDimens);
+	}
+}
+
+AbstractComponent.registerComponent(componentTypeId, (data: string) => Text.deserializeFromString(data));

package/src/components/UnknownSVGObject.test.ts

@@ -0,0 +1,10 @@
+import AbstractComponent from './AbstractComponent';
+import UnknownSVGObject from './UnknownSVGObject';
+
+describe('UnknownSVGObject', () => {
+	it('should not be deserializable', () => {
+		const obj = new UnknownSVGObject(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
+		const serialized = obj.serialize();
+		expect(() => AbstractComponent.deserialize(serialized)).toThrow(/.*cannot be deserialized.*/);
+	});
+});

package/src/components/UnknownSVGObject.ts

@@ -6,11 +6,12 @@ import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 
+const componentId = 'unknown-svg-object';
 export default class UnknownSVGObject extends AbstractComponent {
 	protected contentBBox: Rect2;
 
 	public constructor(private svgObject: SVGElement) {
-		super();
+		super(componentId);
 		this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
 	}
 
@@ -30,7 +31,20 @@ export default class UnknownSVGObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	protected createClone(): AbstractComponent {
+		return new UnknownSVGObject(this.svgObject.cloneNode(true) as SVGElement);
+	}
+
 	public description(localization: ImageComponentLocalization): string {
 		return localization.svgObject;
 	}
+
+	protected serializeToString(): string | null {
+		return JSON.stringify({
+			html: this.svgObject.outerHTML,
+		});
+	}
 }
+
+// null: Do not deserialize UnknownSVGObjects.
+AbstractComponent.registerComponent(componentId, null);

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Rect2 from '../../geometry/Rect2';
 import { PathCommand, PathCommandType } from '../../geometry/Path';
@@ -8,6 +8,7 @@ import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
+import RenderingStyle from '../../rendering/RenderingStyle';
 
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if

package/src/components/builders/RectangleBuilder.ts

@@ -1,3 +1,4 @@
+import Mat33 from '../../geometry/Mat33';
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
@@ -7,18 +8,22 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new RectangleBuilder(initialPoint, true);
+export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, true, viewport);
 };
 
-export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new RectangleBuilder(initialPoint, false);
+export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, false, viewport);
 };
 
 export default class RectangleBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint, private filled: boolean) {
+	public constructor(
+		private readonly startPoint: StrokeDataPoint,
+		private filled: boolean,
+		private viewport: Viewport,
+	) {
 		// Initially, the start and end points are the same.
 		this.endPoint = startPoint;
 	}
@@ -29,11 +34,21 @@ export default class RectangleBuilder implements ComponentBuilder {
 	}
 
 	private buildPreview(): Stroke {
-		const startPoint = this.startPoint.pos;
-		const endPoint = this.endPoint.pos;
+		const canvasAngle = this.viewport.getRotationAngle();
+		const rotationMat = Mat33.zRotation(-canvasAngle);
+
+		// Adjust startPoint and endPoint such that applying [rotationMat] to them
+		// brings them to this.startPoint and this.endPoint.
+		const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+		const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+
+		const rect = Rect2.fromCorners(startPoint, endPoint);
 		const path = Path.fromRect(
-			Rect2.fromCorners(startPoint, endPoint),
+			rect,
 			this.filled ? null : this.endPoint.width,
+		).transformedBy(
+			// Rotate the canvas rectangle so that its rotation matches the screen
+			rotationMat
 		);
 
 		const preview = new Stroke([

package/src/components/util/describeComponentList.ts

@@ -0,0 +1,18 @@
+import AbstractComponent from '../AbstractComponent';
+import { ImageComponentLocalization } from '../localization';
+
+// Returns the description of all given elements, if identical, otherwise,
+// returns null.
+export default (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => {
+	if (elems.length === 0) {
+		return null;
+	}
+
+	const description = elems[0].description(localizationTable);
+	for (const elem of elems) {
+		if (elem.description(localizationTable) !== description) {
+			return null;
+		}
+	}
+	return description;
+};

package/src/geometry/Path.ts

@@ -1,5 +1,6 @@
 import { Bezier } from 'bezier-js';
-import { RenderingStyle, RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+import { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+import RenderingStyle from '../rendering/RenderingStyle';
 import LineSegment2 from './LineSegment2';
 import Mat33 from './Mat33';
 import Rect2 from './Rect2';
@@ -282,6 +283,10 @@ export default class Path {
 		return Path.toString(this.startPoint, this.parts);
 	}
 
+	public serialize(): string {
+		return this.toString();
+	}
+
 	public static toString(startPoint: Point2, parts: PathCommand[]): string {
 		const result: string[] = [];
 
@@ -555,4 +560,6 @@ export default class Path {
 
 		return new Path(startPos ?? Vec2.zero, commands);
 	}
+
+	public static empty: Path = new Path(Vec2.zero, []);
 }

package/src/rendering/Display.ts

@@ -3,9 +3,10 @@ import CanvasRenderer from './renderers/CanvasRenderer';
 import { Editor } from '../Editor';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
-import { Vec2 } from '../geometry/Vec2';
+import { Point2, Vec2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
 import TextOnlyRenderer from './renderers/TextOnlyRenderer';
+import Color4 from '../Color4';
 
 export enum RenderingMode {
 	DummyRenderer,
@@ -88,6 +89,10 @@ export default class Display {
 		return this.cache;
 	}
 
+	public getColorAt = (_screenPos: Point2): Color4|null => {
+		return null;
+	};
+
 	private initializeCanvasRendering() {
 		const dryInkCanvas = document.createElement('canvas');
 		const wetInkCanvas = document.createElement('canvas');
@@ -132,6 +137,17 @@ export default class Display {
 		this.flattenCallback = () => {
 			dryInkCtx.drawImage(wetInkCanvas, 0, 0);
 		};
+
+		this.getColorAt = (screenPos: Point2) => {
+			const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+			const data = pixel?.data;
+
+			if (data) {
+				const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+				return color;
+			}
+			return null;
+		};
 	}
 
 	private initializeTextRendering() {

package/src/rendering/RenderingStyle.test.ts

@@ -0,0 +1,68 @@
+
+import Color4 from '../Color4';
+import RenderingStyle, { styleFromJSON, stylesEqual, styleToJSON } from './RenderingStyle';
+
+
+describe('RenderingStyle', () => {
+	it('identical styles should be equal', () => {
+		const redFill: RenderingStyle = {
+			fill: Color4.red,
+		};
+		expect(stylesEqual(redFill, redFill)).toBe(true);
+		expect(stylesEqual(
+			{ fill: Color4.ofRGB(1, 0, 0.3), },
+			{ fill: Color4.ofRGB(1, 0, 0.3), },
+		)).toBe(true);
+		expect(stylesEqual(
+			{ fill: Color4.red },
+			{ fill: Color4.blue },
+		)).toBe(false);
+
+		expect(stylesEqual(
+			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
+			{ fill: Color4.red },
+		)).toBe(false);
+		expect(stylesEqual(
+			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
+			{ fill: Color4.red, stroke: { width: 1, color: Color4.blue }},
+		)).toBe(false);
+		expect(stylesEqual(
+			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
+			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
+		)).toBe(true);
+		expect(stylesEqual(
+			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
+			{ fill: Color4.red, stroke: { width: 2, color: Color4.red }},
+		)).toBe(false);
+	});
+
+	it('styles should be convertable to JSON', () => {
+		expect(styleToJSON({
+			fill: Color4.red,
+		})).toMatchObject({
+			fill: '#ff0000',
+			stroke: undefined,
+		});
+
+		expect(styleToJSON({
+			fill: Color4.blue,
+			stroke: {
+				width: 4,
+				color: Color4.red,
+			}
+		})).toMatchObject({
+			fill: '#0000ff',
+			stroke: {
+				width: 4,
+				color: '#ff0000'
+			},
+		});
+	});
+
+	it('JSON should be convertable into styles', () => {
+		const redFillJSON = { fill: '#ff0000', };
+		const redFillBlueStrokeJSON = { fill: '#ff0000', stroke: { width: 4, color: '#0000ff' }};
+		expect(styleToJSON(styleFromJSON(redFillJSON))).toMatchObject(redFillJSON);
+		expect(styleToJSON(styleFromJSON(redFillBlueStrokeJSON))).toMatchObject(redFillBlueStrokeJSON);
+	});
+});

package/src/rendering/RenderingStyle.ts

@@ -0,0 +1,46 @@
+import Color4 from '../Color4';
+
+interface RenderingStyle {
+	fill: Color4;
+	stroke?: {
+		color: Color4;
+		width: number;
+	};
+}
+
+export default RenderingStyle;
+
+export const stylesEqual = (a: RenderingStyle, b: RenderingStyle): boolean => {
+	const result = a === b || (a.fill.eq(b.fill)
+		&& (a.stroke == undefined) === (b.stroke == undefined)
+        && (a.stroke?.color?.eq(b.stroke?.color) ?? true)
+		&& a.stroke?.width === b.stroke?.width);
+    
+	// Map undefined/null -> false
+	return result ?? false;
+};
+
+// Returns an object that can be converted to a JSON string with
+// JSON.stringify.
+export const styleToJSON = (style: RenderingStyle) => {
+	const stroke = !style.stroke ? undefined : {
+		color: style.stroke.color.toHexString(),
+		width: style.stroke.width,
+	};
+
+	return {
+		fill: style.fill.toHexString(),
+		stroke,
+	};
+};
+
+export const styleFromJSON = (json: Record<string, any>) => {
+	const stroke = json.stroke ? {
+		color: Color4.fromHex(json.stroke.color),
+		width: json.stroke.width,
+	} : undefined;
+	return {
+		fill: Color4.fromHex(json.fill),
+		stroke,
+	};
+};

package/src/rendering/caching/RenderingCache.test.ts

@@ -28,7 +28,7 @@ describe('RenderingCache', () => {
 		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
 		expect(lastRenderer).toBeNull();
 
-		editor.dispatch(new EditorImage.AddElementCommand(testStroke));
+		editor.dispatch(EditorImage.addElement(testStroke));
 		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
 
 		expect(allocdRenderers).toBeGreaterThanOrEqual(1);

package/src/rendering/caching/RenderingCacheNode.ts

@@ -65,6 +65,11 @@ export default class RenderingCacheNode {
 		if (this.instantiatedChildren.length === 0) {
 			const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
 
+			if (this.region.size.x === 0 || this.region.size.y === 0) {
+				console.warn('Cache element has zero size! Not generating children.');
+				return;
+			}
+
 			for (const rect of childRects) {
 				const child = new RenderingCacheNode(rect, this.cacheState);
 				child.parent = this;
@@ -357,7 +362,7 @@ export default class RenderingCacheNode {
 
 	private checkRep() {
 		if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
-			throw new Error('Repcheck: Wrong number of children');
+			throw new Error(`Repcheck: Wrong number of children. Got ${this.instantiatedChildren.length}`);
 		}
 
 		if (this.renderedIds[1] !== undefined && this.renderedIds[0] >= this.renderedIds[1]) {

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,4 +1,3 @@
-import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
@@ -6,14 +5,7 @@ import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Viewport from '../../Viewport';
-
-export interface RenderingStyle {
-	fill: Color4;
-	stroke?: {
-		color: Color4;
-		width: number;
-	};
-}
+import RenderingStyle, { stylesEqual } from '../RenderingStyle';
 
 export interface RenderablePathSpec {
 	startPoint: Point2;
@@ -21,12 +13,6 @@ export interface RenderablePathSpec {
 	style: RenderingStyle;
 }
 
-const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
-	return a === b || (a.fill.eq(b.fill)
-		&& a.stroke?.color?.eq(b.stroke?.color)
-		&& a.stroke?.width === b.stroke?.width);
-};
-
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;

package/src/rendering/renderers/CanvasRenderer.ts

@@ -5,7 +5,8 @@ import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Vec3 from '../../geometry/Vec3';
 import Viewport from '../../Viewport';
-import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
 
 export default class CanvasRenderer extends AbstractRenderer {
 	private ignoreObjectsAboveLevel: number|null = null;

package/src/rendering/renderers/DummyRenderer.ts

@@ -6,7 +6,8 @@ import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Vec3 from '../../geometry/Vec3';
 import Viewport from '../../Viewport';
-import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
 
 export default class DummyRenderer extends AbstractRenderer {
 	// Variables that track the state of what's been rendered

package/src/rendering/renderers/SVGRenderer.ts

@@ -7,7 +7,8 @@ import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
-import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -5,7 +5,8 @@ import { Vec2 } from '../../geometry/Vec2';
 import Vec3 from '../../geometry/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
-import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
 
 // Outputs a description of what was rendered.