js-draw 0.1.6 → 0.1.7

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