js-draw 1.0.1 → 1.1.0

package/src/components/SVGGlobalAttributesObject.ts

@@ -1,79 +0,0 @@
-//
-// Used by `SVGLoader`s to store unrecognised global attributes
-// (e.g. unrecognised XML namespace declarations).
-// @internal
-// @packageDocumentation
-//
-
-import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
-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

@@ -1,137 +0,0 @@
-import { Path, Vec2, Mat33, Color4 } from '@js-draw/math';
-import Stroke from './Stroke';
-import createEditor from '../testing/createEditor';
-import EditorImage from '../EditorImage';
-import AbstractComponent from './AbstractComponent';
-import { DummyRenderer, SerializableCommand } from '../lib';
-import { pathToRenderable } from '../rendering/RenderablePathSpec';
-
-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([
-			pathToRenderable(Path.fromString('m1,1 2,2 3,3 z'), { 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([
-			pathToRenderable(Path.fromString('m1,1 2,2 3,3 z'), { 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

@@ -1,294 +0,0 @@
-import SerializableCommand from '../commands/SerializableCommand';
-import { Mat33, Path, Rect2, LineSegment2 } from '@js-draw/math';
-import Editor from '../Editor';
-import AbstractRenderer 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';
-import RenderablePathSpec, { pathFromRenderable, pathToRenderable } from '../rendering/RenderablePathSpec';
-
-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 = pathFromRenderable(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 pathToRenderable(Path.fromString(part.path), style);
-		});
-		return new Stroke(pathSpec);
-	}
-}
-
-AbstractComponent.registerComponent('stroke', Stroke.deserializeFromJSON);

package/src/components/TextComponent.test.ts

@@ -1,202 +0,0 @@
-import EditorImage from '../EditorImage';
-import { Vec2, Mat33, Color4 } from '@js-draw/math';
-import TextRenderingStyle from '../rendering/TextRenderingStyle';
-import createEditor from '../testing/createEditor';
-import AbstractComponent from './AbstractComponent';
-import TextComponent, { TextTransformMode } from './TextComponent';
-
-
-describe('TextComponent', () => {
-	it('should be serializable', () => {
-		const style: TextRenderingStyle = {
-			size: 12,
-			fontFamily: 'serif',
-			renderingStyle: { fill: Color4.black },
-		};
-		const text = new TextComponent([ 'Foo' ], Mat33.identity, style);
-		const serialized = text.serialize();
-		const deserialized = AbstractComponent.deserialize(serialized) as TextComponent;
-		expect(deserialized.getBBox()).objEq(text.getBBox());
-		expect(deserialized['getText']()).toContain('Foo');
-	});
-
-	it('should be deserializable', () => {
-		const textComponent = TextComponent.deserializeFromString(`{
-			"textObjects": [ { "text": "Foo" } ],
-			"transform": [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ],
-			"style": {
-				"fontFamily": "sans",
-				"size": 10,
-				"renderingStyle": { "fill": "#000" }
-			}
-		}`);
-
-		expect(textComponent.getText()).toBe('Foo');
-		expect(textComponent.getTransform()).objEq(Mat33.identity);
-		expect(textComponent.getStyle().color!).objEq(Color4.black);
-		expect(textComponent.getTextStyle().fontFamily!).toBe('sans');
-	});
-
-	it('should be restylable', () => {
-		const style: TextRenderingStyle = {
-			size: 10,
-			fontFamily: 'sans',
-			renderingStyle: { fill: Color4.red },
-		};
-		const text = new TextComponent([ 'Foo' ], Mat33.identity, style);
-
-		expect(text.getStyle().color).objEq(Color4.red);
-		text.forceStyle({
-			color: Color4.green,
-		}, null);
-		expect(text.getStyle().color).objEq(Color4.green);
-		expect(text.getTextStyle().renderingStyle.fill).objEq(Color4.green);
-
-		const restyleCommand = text.updateStyle({
-			color: Color4.purple,
-		});
-
-		// Should queue a re-render after restyling.
-		const editor = createEditor();
-		EditorImage.addElement(text).apply(editor);
-
-		editor.rerender();
-		expect(editor.isRerenderQueued()).toBe(false);
-		editor.dispatch(restyleCommand);
-		expect(editor.isRerenderQueued()).toBe(true);
-
-		// Undoing should reset to the correct color.
-		expect(text.getStyle().color).objEq(Color4.purple);
-		editor.history.undo();
-		expect(text.getStyle().color).objEq(Color4.green);
-	});
-
-	it('calling forceStyle on the duplicate of a TextComponent should preserve the original\'s style', () => {
-		const originalStyle: TextRenderingStyle = {
-			size: 11,
-			fontFamily: 'sans-serif',
-			renderingStyle: { fill: Color4.purple, },
-		};
-
-		const text1 = new TextComponent([ 'Test' ], Mat33.identity, originalStyle);
-		const text2 = text1.clone() as TextComponent;
-
-		text1.forceStyle({
-			color: Color4.red,
-		}, null);
-
-		expect(text2.getStyle().color).objEq(Color4.purple);
-		expect(text1.getStyle().color).objEq(Color4.red);
-
-		text2.forceStyle({
-			textStyle: originalStyle,
-		}, null);
-
-		expect(text1.getStyle().color).objEq(Color4.red);
-		expect(text2.getTextStyle()).toMatchObject(originalStyle);
-	});
-
-	describe('should position text components relatively or absolutely (bounding box tests)', () => {
-		const baseStyle: TextRenderingStyle = {
-			size: 12,
-			fontFamily: 'sans-serif',
-			renderingStyle: { fill: Color4.red },
-		};
-
-		it('strings should be placed relative to one another', () => {
-			const str1 = 'test';
-			const str2 = 'test2';
-
-			const container = new TextComponent([ str1, str2 ], Mat33.identity, baseStyle);
-
-			// Create separate components for str1 and str2 so we can check their individual bounding boxes
-			const str1Component = new TextComponent([ str1 ], Mat33.identity, baseStyle);
-			const str2Component = new TextComponent([ str2 ], Mat33.identity, baseStyle);
-
-			const widthSum = str1Component.getBBox().width + str2Component.getBBox().width;
-			const maxHeight = Math.max(str1Component.getBBox().height, str2Component.getBBox().height);
-			expect(container.getBBox().size).objEq(Vec2.of(widthSum, maxHeight));
-		});
-
-		it('RELATIVE_X_ABSOLUTE_Y should work (relatively positioned along x, absolutely along y)', () => {
-			const component1 = new TextComponent([ 'test' ], Mat33.identity, baseStyle);
-
-			const componentTranslation = Vec2.of(10, 10);
-			const component2 = new TextComponent(
-				[ 'relatively' ],
-				Mat33.translation(componentTranslation),
-				baseStyle,
-				TextTransformMode.RELATIVE_X_ABSOLUTE_Y
-			);
-
-			const component3 = new TextComponent(
-				[ 'more of a test...' ],
-				Mat33.translation(componentTranslation),
-				baseStyle,
-				TextTransformMode.RELATIVE_X_ABSOLUTE_Y
-			);
-
-
-			const container = new TextComponent([ component1, component2, component3 ], Mat33.identity, baseStyle);
-			const expectedWidth =
-				component1.getBBox().width
-				// x should take the translation from each component into account.
-				+ componentTranslation.x + component2.getBBox().width
-				+ componentTranslation.x + component3.getBBox().width;
-			const expectedHeight = Math.max(
-				component1.getBBox().height,
-
-				// Absolute y: Should *not* take into account both components' y translations
-				componentTranslation.y + component3.getBBox().height
-			);
-			expect(container.getBBox().size).objEq(Vec2.of(expectedWidth, expectedHeight));
-		});
-
-		it('RELATIVE_Y_ABSOLUTE_X should work (relatively positioned along y, absolutely along x)', () => {
-			const firstComponentTranslation = Vec2.of(1000, 1000);
-			const component1 = new TextComponent(
-				[ '...' ],
-
-				// The translation of the first component shouldn't affect the Y size of the bounding box.
-				Mat33.translation(firstComponentTranslation),
-
-				baseStyle);
-
-			const componentTranslation = Vec2.of(10, 20);
-			const component2 = new TextComponent(
-				[ 'Test!' ],
-				Mat33.translation(componentTranslation),
-				baseStyle,
-				TextTransformMode.RELATIVE_Y_ABSOLUTE_X
-			);
-
-			const component3 = new TextComponent(
-				[ 'Even more of a test.' ],
-				Mat33.translation(componentTranslation),
-				baseStyle,
-				TextTransformMode.RELATIVE_Y_ABSOLUTE_X
-			);
-
-
-			const container = new TextComponent([ component1, component2, component3 ], Mat33.identity, baseStyle);
-			const expectedWidth =
-				component1.getBBox().width
-
-				// Space between the start of components 2 and 3 and the start of component 1
-				+ firstComponentTranslation.x - componentTranslation.x;
-
-			const expectedHeight =
-				// Don't include component1.bbox.height: component1 overlaps with component 2 completely in y
-				// similarly, component 2 overlaps completely with component3 in y.
-				//
-				// Note that while relative positioning is relative to the right edge of the baseline of the previous
-				// item (when in left-to-right mode). Thus, x is adjusted automatically by the text width, while
-				// y remains the same (if there is no additional translation).
-				+ componentTranslation.y
-				+ componentTranslation.y
-				+ component3.getBBox().height;
-
-			expect(container.getBBox().size).objEq(Vec2.of(expectedWidth, expectedHeight));
-		});
-	});
-});