js-draw 0.23.1 → 0.24.0

package/src/components/SVGGlobalAttributesObject.ts

@@ -0,0 +1,81 @@
+//
+// Used by `SVGLoader`s to store unrecognised global attributes
+// (e.g. unrecognised XML namespace declarations).
+// @internal
+// @packageDocumentation
+//
+
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/shapes/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+type GlobalAttrsList = Array<[string, string|null]>;
+
+const componentKind = 'svg-global-attributes';
+
+// Stores global SVG attributes (e.g. namespace identifiers.)
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+	protected contentBBox: Rect2;
+	public constructor(private readonly attrs: GlobalAttrsList) {
+		super(componentKind);
+		this.contentBBox = Rect2.empty;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		if (!(canvas instanceof SVGRenderer)) {
+			// Don't draw unrenderable objects if we can't
+			return;
+		}
+
+		for (const [ attr, value ] of this.attrs) {
+			canvas.setRootSVGAttribute(attr, value);
+		}
+	}
+
+	public intersects(_lineSegment: LineSegment2): boolean {
+		return false;
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33): void {
+	}
+
+	public override isSelectable() {
+		return false;
+	}
+
+	protected createClone() {
+		return new SVGGlobalAttributesObject(this.attrs);
+	}
+
+	public description(localization: ImageComponentLocalization): string {
+		return localization.svgObject;
+	}
+
+	protected serializeToJSON(): string | null {
+		return JSON.stringify(this.attrs);
+	}
+
+	public static deserializeFromString(data: string): AbstractComponent {
+		const json = JSON.parse(data) as GlobalAttrsList;
+		const attrs: GlobalAttrsList = [];
+
+		const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+
+		// Don't deserialize all attributes, just those that should be safe.
+		for (const [ key, val ] of json) {
+			if (key === 'viewBox' || key === 'width' || key === 'height') {
+				if (val && numericAndSpaceContentExp.exec(val)) {
+					attrs.push([key, val]);
+				}
+			}
+		}
+
+		return new SVGGlobalAttributesObject(attrs);
+	}
+}
+
+AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

package/src/components/Stroke.test.ts

@@ -0,0 +1,139 @@
+import Color4 from '../Color4';
+import Path from '../math/shapes/Path';
+import { Vec2 } from '../math/Vec2';
+import Stroke from './Stroke';
+import createEditor from '../testing/createEditor';
+import Mat33 from '../math/Mat33';
+import EditorImage from '../EditorImage';
+import AbstractComponent from './AbstractComponent';
+import { DummyRenderer, SerializableCommand } from '../lib';
+
+describe('Stroke', () => {
+	it('empty stroke should have an empty bounding box', () => {
+		const stroke = new Stroke([{
+			startPoint: Vec2.zero,
+			commands: [],
+			style: {
+				fill: Color4.blue,
+			},
+		}]);
+		expect(stroke.getBBox()).toMatchObject({
+			x: 0, y: 0, w: 0, h: 0,
+		});
+	});
+
+	it('cloned strokes should have the same points', () => {
+		const stroke = new Stroke([
+			Path.fromString('m1,1 2,2 3,3 z').toRenderable({ fill: Color4.red })
+		]);
+		const clone = stroke.clone();
+
+		expect(
+			(clone as Stroke).getPath().toString()
+		).toBe(
+			stroke.getPath().toString()
+		);
+	});
+
+	it('transforming a cloned stroke should not affect the original', () => {
+		const editor = createEditor();
+		const stroke = new Stroke([
+			Path.fromString('m1,1 2,2 3,3 z').toRenderable({ fill: Color4.red })
+		]);
+		const origBBox = stroke.getBBox();
+		expect(origBBox).toMatchObject({
+			x: 1, y: 1,
+			w: 5, h: 5,
+		});
+
+		const copy = stroke.clone();
+		expect(copy.getBBox()).objEq(origBBox);
+
+		stroke.transformBy(
+			Mat33.scaling2D(Vec2.of(10, 10))
+		).apply(editor);
+
+		expect(stroke.getBBox()).not.objEq(origBBox);
+		expect(copy.getBBox()).objEq(origBBox);
+	});
+
+	it('strokes should deserialize from JSON data', () => {
+		const deserialized = Stroke.deserializeFromJSON(`[
+			{
+				"style": { "fill": "#f00" },
+				"path": "m0,0 l10,10z"
+			}
+		]`);
+		const path = deserialized.getPath();
+
+		// Should cache the original string representation.
+		expect(deserialized.getPath().toString()).toBe('m0,0 l10,10z');
+		path['cachedStringVersion'] = null;
+		expect(deserialized.getPath().toString()).toBe('M0,0L10,10L0,0');
+	});
+
+	it('strokes should load from just-serialized JSON data', () => {
+		const deserialized = Stroke.deserializeFromJSON(`[
+			{
+				"style": { "fill": "#f00" },
+				"path": "m0,0 l10,10z"
+			}
+		]`);
+
+		const redeserialized = AbstractComponent.deserialize(deserialized.serialize()) as Stroke;
+		expect(redeserialized.getPath().toString()).toBe(deserialized.getPath().toString());
+		expect(redeserialized.getStyle().color).objEq(deserialized.getStyle().color!);
+	});
+
+	it('strokes should be restylable', () => {
+		const stroke = Stroke.deserializeFromJSON(`[
+			{
+				"style": { "fill": "#f00" },
+				"path": "m0,0 l10,10z"
+			},
+			{
+				"style": { "fill": "#f00" },
+				"path": "m10,10 l100,10z"
+			}
+		]`);
+
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#f00'));
+
+		// Should restyle even if no editor
+		stroke.forceStyle({
+			color: Color4.fromHex('#0f0')
+		}, null);
+
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+
+		const editor = createEditor();
+		EditorImage.addElement(stroke).apply(editor);
+
+		// Re-rendering should render with the new color
+		const renderer = new DummyRenderer(editor.viewport);
+		stroke.render(renderer);
+		expect(renderer.lastFillStyle!.fill).toBe(stroke.getStyle().color);
+
+		// Calling updateStyle should have similar results.
+		const updateStyleCommand = stroke.updateStyle({
+			color: Color4.fromHex('#00f'),
+		});
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+
+		updateStyleCommand.apply(editor);
+		expect(editor.isRerenderQueued()).toBe(true);
+
+		// Should do and undo correclty
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#00f'));
+		updateStyleCommand.unapply(editor);
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+
+		// As should a deserialized updateStyle.
+		const deserializedUpdateStyle = SerializableCommand.deserialize(updateStyleCommand.serialize(), editor);
+		deserializedUpdateStyle.apply(editor);
+
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#00f'));
+		updateStyleCommand.unapply(editor);
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+	});
+});

package/src/components/Stroke.ts

@@ -0,0 +1,296 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/shapes/Path';
+import Rect2 from '../math/shapes/Rect2';
+import Editor from '../Editor';
+import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
+
+interface StrokePart extends RenderablePathSpec {
+	path: Path;
+}
+
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
+export default class Stroke extends AbstractComponent implements RestyleableComponent {
+	private parts: StrokePart[];
+	protected contentBBox: Rect2;
+
+	// @internal
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
+	// See `getProportionalRenderingTime`
+	private approximateRenderingTime: number;
+
+	/**
+	 * Creates a `Stroke` from the given `parts`. All parts should have the
+	 * same color.
+	 *
+	 * @example
+	 * ```ts
+	 * // A path that starts at (1,1), moves to the right by (2, 0),
+	 * // then moves down and right by (3, 3)
+	 * const path = Path.fromString('m1,1 2,0 3,3');
+	 *
+	 * const stroke = new Stroke([
+	 *     // Fill with red
+	 *     path.toRenderable({ fill: Color4.red })
+	 * ]);
+	 * ```
+	 */
+	public constructor(parts: RenderablePathSpec[]) {
+		super('stroke');
+
+		this.approximateRenderingTime = 0;
+		this.parts = [];
+
+		for (const section of parts) {
+			const path = Path.fromRenderable(section);
+			const pathBBox = this.bboxForPart(path.bbox, section.style);
+
+			if (!this.contentBBox) {
+				this.contentBBox = pathBBox;
+			} else {
+				this.contentBBox = this.contentBBox.union(pathBBox);
+			}
+
+			this.parts.push({
+				path,
+
+				// To implement RenderablePathSpec
+				startPoint: path.startPoint,
+				style: section.style,
+				commands: path.parts,
+			});
+
+			this.approximateRenderingTime += path.parts.length;
+		}
+		this.contentBBox ??= Rect2.empty;
+	}
+
+	public getStyle(): ComponentStyle {
+		if (this.parts.length === 0) {
+			return { };
+		}
+		const firstPart = this.parts[0];
+
+		if (
+			firstPart.style.stroke === undefined
+			|| firstPart.style.stroke.width === 0
+		) {
+			return {
+				color: firstPart.style.fill,
+			};
+		}
+
+		return {
+			color: firstPart.style.stroke.color,
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	public forceStyle(style: ComponentStyle, editor: Editor|null): void {
+		if (!style.color) {
+			return;
+		}
+
+		this.parts = this.parts.map((part) => {
+			const newStyle = {
+				...part.style,
+				stroke: part.style.stroke ? {
+					...part.style.stroke,
+				} : undefined,
+			};
+
+			// Change the stroke color if a stroked shape. Else,
+			// change the fill.
+			if (newStyle.stroke && newStyle.stroke.width > 0) {
+				newStyle.stroke.color = style.color!;
+			} else {
+				newStyle.fill = style.color!;
+			}
+
+			return {
+				path: part.path,
+				startPoint: part.startPoint,
+				commands: part.commands,
+				style: newStyle,
+			};
+		});
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
+	}
+
+	public override intersects(line: LineSegment2): boolean {
+		for (const part of this.parts) {
+			const strokeWidth = part.style.stroke?.width;
+			const strokeRadius = strokeWidth ? strokeWidth / 2 : undefined;
+
+			if (part.path.intersection(line, strokeRadius).length > 0) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	public override render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
+		canvas.startObject(this.getBBox());
+		for (const part of this.parts) {
+			const bbox = this.bboxForPart(part.path.bbox, part.style);
+			if (visibleRect) {
+				if (!bbox.intersects(visibleRect)) {
+					continue;
+				}
+
+				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 3 || bbox.size.y > visibleRect.size.y * 3;
+				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
+					continue;
+				}
+			}
+
+			canvas.drawPath(part);
+		}
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	public override getProportionalRenderingTime(): number {
+		return this.approximateRenderingTime;
+	}
+
+	// Grows the bounding box for a given stroke part based on that part's style.
+	private bboxForPart(origBBox: Rect2, style: RenderingStyle) {
+		if (!style.stroke) {
+			return origBBox;
+		}
+
+		return origBBox.grownBy(style.stroke.width / 2);
+	}
+
+	public override getExactBBox(): Rect2 {
+		let bbox: Rect2|null = null;
+
+		for (const { path, style } of this.parts) {
+			// Paths' default .bbox can be
+			const partBBox = this.bboxForPart(path.getExactBBox(), style);
+			bbox ??= partBBox;
+
+			bbox = bbox.union(partBBox);
+		}
+
+		return bbox ?? Rect2.empty;
+	}
+
+	protected applyTransformation(affineTransfm: Mat33): void {
+		this.contentBBox = Rect2.empty;
+		let isFirstPart = true;
+
+		// Update each part
+		this.parts = this.parts.map((part) => {
+			const newPath = part.path.transformedBy(affineTransfm);
+			const newStyle = {
+				...part.style,
+				stroke: part.style.stroke ? {
+					...part.style.stroke,
+				} : undefined,
+			};
+
+			// Approximate the scale factor.
+			if (newStyle.stroke) {
+				const scaleFactor = affineTransfm.getScaleFactor();
+				newStyle.stroke.width *= scaleFactor;
+			}
+
+			const newBBox = this.bboxForPart(newPath.bbox, newStyle);
+
+			if (isFirstPart) {
+				this.contentBBox = newBBox;
+				isFirstPart = false;
+			} else {
+				this.contentBBox = this.contentBBox.union(newBBox);
+			}
+
+			return {
+				path: newPath,
+				startPoint: newPath.startPoint,
+				commands: newPath.parts,
+				style: newStyle,
+			};
+		});
+	}
+
+	/**
+	 * @returns the {@link Path.union} of all paths that make up this stroke.
+	 */
+	public getPath() {
+		let result: Path|null = null;
+		for (const part of this.parts) {
+			if (result) {
+				result = result.union(part.path);
+			} else {
+				result ??= part.path;
+			}
+		}
+		return result ?? Path.empty;
+	}
+
+	public override description(localization: ImageComponentLocalization): string {
+		return localization.stroke;
+	}
+
+	protected override createClone(): AbstractComponent {
+		return new Stroke(this.parts);
+	}
+
+	protected override serializeToJSON() {
+		return this.parts.map(part => {
+			return {
+				style: styleToJSON(part.style),
+				path: part.path.serialize(),
+			};
+		});
+	}
+
+	/** @internal */
+	public static deserializeFromJSON(json: any): Stroke {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		if (typeof json !== 'object' || typeof json.length !== 'number') {
+			throw new Error(`${json} is missing required field, parts, or parts is of the wrong type.`);
+		}
+
+		const pathSpec: RenderablePathSpec[] = json.map((part: any) => {
+			const style = styleFromJSON(part.style);
+			return Path.fromString(part.path).toRenderable(style);
+		});
+		return new Stroke(pathSpec);
+	}
+}
+
+AbstractComponent.registerComponent('stroke', Stroke.deserializeFromJSON);