js-draw 0.1.4 → 0.1.7

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/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/localization.ts

@@ -1,10 +1,11 @@
 import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
+import { defaultTextRendererLocalization, TextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization, ToolLocalization } from './tools/localization';
 
 
-export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
 	undoAnnouncement: (actionDescription: string)=> string;
 	redoAnnouncement: (actionDescription: string)=> string;
 	doneLoading: string;
@@ -17,6 +18,7 @@ export const defaultEditorLocalization: EditorLocalization = {
 	...defaultToolLocalization,
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,
+	...defaultTextRendererLocalization,
 	loading: (percentage: number) => `Loading ${percentage}%...`,
 	imageEditor: 'Image Editor',
 	doneLoading: 'Done loading',

package/src/rendering/Display.ts

@@ -3,8 +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,
@@ -15,6 +17,7 @@ export enum RenderingMode {
 export default class Display {
 	private dryInkRenderer: AbstractRenderer;
 	private wetInkRenderer: AbstractRenderer;
+	private textRenderer: TextOnlyRenderer;
 	private cache: RenderingCache;
 	private resizeSurfacesCallback?: ()=> void;
 	private flattenCallback?: ()=> void;
@@ -31,6 +34,9 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
+		this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+		this.initializeTextRendering();
+
 		const cacheBlockResolution = Vec2.of(600, 600);
 		this.cache = new RenderingCache({
 			createRenderer: () => {
@@ -83,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');
@@ -127,6 +137,38 @@ 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() {
+		const textRendererOutputContainer = document.createElement('div');
+		textRendererOutputContainer.classList.add('textRendererOutputContainer');
+
+		const rerenderButton = document.createElement('button');
+		rerenderButton.classList.add('rerenderButton');
+		rerenderButton.innerText = this.editor.localization.rerenderAsText;
+
+		const rerenderOutput = document.createElement('div');
+		rerenderOutput.ariaLive = 'polite';
+
+		rerenderButton.onclick = () => {
+			this.textRenderer.clear();
+			this.editor.image.render(this.textRenderer, this.editor.viewport);
+			rerenderOutput.innerText = this.textRenderer.getDescription();
+		};
+
+		textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+		this.editor.createHTMLOverlay(textRendererOutputContainer);
 	}
 
 	// Clears the drawing surfaces and otherwise prepares for a rerender.

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/localization.ts

@@ -0,0 +1,10 @@
+
+export interface TextRendererLocalization {
+    textNode(content: string): string;
+    rerenderAsText: string;
+}
+
+export const defaultTextRendererLocalization: TextRendererLocalization = {
+	textNode: (content: string) => `Text: ${content}`,
+	rerenderAsText: 'Re-render as text',
+};

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

@@ -0,0 +1,52 @@
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
+
+// Outputs a description of what was rendered.
+
+export default class TextOnlyRenderer extends AbstractRenderer {
+	private descriptionBuilder: string[] = [];
+	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
+		super(viewport);
+	}
+
+	public displaySize(): Vec3 {
+		// We don't have a graphical display, export a reasonable size.
+		return Vec2.of(500, 500);
+	}
+
+	public clear(): void {
+		this.descriptionBuilder = [];
+	}
+
+	public getDescription(): string {
+		return this.descriptionBuilder.join('\n');
+	}
+
+	protected beginPath(_startPoint: Vec3): void {
+	}
+	protected endPath(_style: RenderingStyle): void {
+	}
+	protected lineTo(_point: Vec3): void {
+	}
+	protected moveTo(_point: Vec3): void {
+	}
+	protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void {
+	}
+	protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void {
+	}
+	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
+		this.descriptionBuilder.push(this.localizationTable.textNode(text));
+	}
+	public isTooSmallToRender(rect: Rect2): boolean {
+		return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+	}
+	public drawPoints(..._points: Vec3[]): void {
+	}
+}