js-draw 0.25.0 → 1.0.0

package/src/components/SVGGlobalAttributesObject.ts

@@ -1,81 +0,0 @@
-//
-// 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

@@ -1,139 +0,0 @@
-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

@@ -1,296 +0,0 @@
-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);