js-draw 0.25.1 → 1.0.1

package/src/SVGLoader.ts

@@ -1,4 +1,4 @@
-import Color4 from './Color4';
+import { Color4, Mat33, Path, Rect2, Vec2 } from '@js-draw/math';
 import AbstractComponent from './components/AbstractComponent';
 import BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName } from './components/BackgroundComponent';
 import ImageComponent from './components/ImageComponent';
@@ -6,14 +6,10 @@ import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import TextComponent, { TextTransformMode } from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
-import Mat33 from './math/Mat33';
-import Path from './math/shapes/Path';
-import Rect2 from './math/shapes/Rect2';
-import { Vec2 } from './math/Vec2';
-import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import RenderingStyle from './rendering/RenderingStyle';
 import TextRenderingStyle from './rendering/TextRenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
+import RenderablePathSpec, { pathToRenderable } from './rendering/RenderablePathSpec';
 
 type OnFinishListener = ()=> void;
 
@@ -22,8 +18,14 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 
 // Key to retrieve unrecognised attributes from an AbstractComponent
 export const svgAttributesDataKey = 'svgAttrs';
+
+// Like {@link svgAttributesDataKey}, but for styles
 export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 
+// Key that specifies the ID of an SVG element that contained a given node when the image
+// was first loaded.
+export const svgLoaderAttributeContainerID = 'svgContainerID';
+
 // [key, value]
 export type SVGLoaderUnknownAttribute = [ string, string ];
 
@@ -109,7 +111,7 @@ export default class SVGLoader implements ImageLoader {
 				const current = !isFirst ? `M${part}` : part;
 
 				const path = Path.fromString(current);
-				const spec = path.toRenderable(style);
+				const spec = pathToRenderable(path, style);
 				result.push(spec);
 			}
 
@@ -140,7 +142,11 @@ export default class SVGLoader implements ImageLoader {
 		}
 
 		if (supportedStyleAttrs && node.style) {
-			for (const attr of node.style) {
+			// Use a for loop instead of an iterator: js-dom seems to not
+			// support using node.style as an iterator.
+			for (let i = 0; i < node.style.length; i ++) {
+				const attr = node.style[i];
+
 				if (attr === '' || !attr) {
 					continue;
 				}
@@ -187,7 +193,7 @@ export default class SVGLoader implements ImageLoader {
 				return;
 			}
 		}
-		await this.onAddComponent?.(elem);
+		await this.addComponent(elem);
 	}
 
 	private async addBackground(node: SVGElement) {
@@ -252,13 +258,13 @@ export default class SVGLoader implements ImageLoader {
 			const elem = BackgroundComponent.ofGrid(
 				backgroundColor, gridSize, foregroundColor, gridStrokeWidth
 			);
-			await this.onAddComponent?.(elem);
+			await this.addComponent(elem);
 		}
 		// Otherwise, if just a <path/>, it's a solid color background.
 		else if (node.tagName.toLowerCase() === 'path') {
 			const fill = Color4.fromString(node.getAttribute('fill') ?? node.style.fill ?? 'black');
 			const elem = new BackgroundComponent(BackgroundType.SolidColor, fill);
-			await this.onAddComponent?.(elem);
+			await this.addComponent(elem);
 		}
 		else {
 			await this.addUnknownNode(node);
@@ -395,7 +401,7 @@ export default class SVGLoader implements ImageLoader {
 	private async addText(elem: SVGTextElement|SVGTSpanElement) {
 		try {
 			const textElem = this.makeText(elem);
-			await this.onAddComponent?.(textElem);
+			await this.addComponent(textElem);
 		} catch (e) {
 			console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
 			this.addUnknownNode(elem);
@@ -418,7 +424,7 @@ export default class SVGLoader implements ImageLoader {
 				new Set([ 'transform' ])
 			);
 
-			await this.onAddComponent?.(imageElem);
+			await this.addComponent(imageElem);
 		} catch (e) {
 			console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
 			await this.addUnknownNode(elem);
@@ -428,10 +434,60 @@ export default class SVGLoader implements ImageLoader {
 	private async addUnknownNode(node: SVGElement) {
 		if (this.storeUnknown) {
 			const component = new UnknownSVGObject(node);
-			await this.onAddComponent?.(component);
+			await this.addComponent(component);
 		}
 	}
 
+	private containerGroupIDs: string[] = [];
+	private encounteredIDs: string[] = [];
+	private async startGroup(node: SVGGElement) {
+		node = node.cloneNode(false) as SVGGElement;
+
+		// Select a unique ID based on the node's ID property (if it exists).
+		// Use `||` and not `??` so that empty string IDs are also replaced.
+		let id = node.id || `id-${this.encounteredIDs.length}`;
+
+		// Make id unique.
+		let idSuffixCounter = 0;
+		let suffix = '';
+		while (this.encounteredIDs.includes(id + suffix)) {
+			idSuffixCounter ++;
+			suffix = '--' + idSuffixCounter;
+		}
+		id += suffix;
+
+		// Remove all children from the node -- children will be handled separately
+		// (not removing children here could cause duplicates in the result, when rendered).
+		node.replaceChildren();
+
+		node.id = id;
+
+		const component = new UnknownSVGObject(node);
+		this.addComponent(component);
+
+		// Add to IDs after -- we don't want the <g> element to be marked
+		// as its own container.
+		this.containerGroupIDs.push(node.id);
+		this.encounteredIDs.push(node.id);
+	}
+
+	// Ends the most recent group started by .startGroup
+	private async endGroup() {
+		this.containerGroupIDs.pop();
+	}
+
+	private async addComponent(component: AbstractComponent) {
+		// Attach the stack of container IDs
+		if (this.containerGroupIDs.length > 0) {
+			component.attachLoadSaveData(
+				svgLoaderAttributeContainerID,
+				[ ...this.containerGroupIDs ]
+			);
+		}
+
+		await this.onAddComponent?.(component);
+	}
+
 	private updateViewBox(node: SVGSVGElement) {
 		const viewBoxAttr = node.getAttribute('viewBox');
 		if (this.rootViewBox || !viewBoxAttr) {
@@ -468,6 +524,8 @@ export default class SVGLoader implements ImageLoader {
 			if (node.classList.contains(imageBackgroundCSSClassName)) {
 				await this.addBackground(node as SVGElement);
 				visitChildren = false;
+			} else {
+				await this.startGroup(node as SVGGElement);
 			}
 			// Otherwise, continue -- visit the node's children.
 			break;
@@ -496,7 +554,7 @@ export default class SVGLoader implements ImageLoader {
 			await this.addUnknownNode(node as SVGStyleElement);
 			break;
 		default:
-			console.warn('Unknown SVG element,', node);
+			console.warn('Unknown SVG element,', node, node.tagName);
 			if (!(node instanceof SVGElement)) {
 				console.warn(
 					'Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.'
@@ -511,6 +569,10 @@ export default class SVGLoader implements ImageLoader {
 			for (const child of node.children) {
 				await this.visit(child);
 			}
+
+			if (node.tagName.toLowerCase() === 'g') {
+				await this.endGroup();
+			}
 		}
 
 		this.processedCount ++;

package/src/UndoRedoHistory.test.ts

@@ -1,11 +1,12 @@
 
 import { Color4, EditorImage, Path, Stroke, Mat33, Vec2 } from './lib';
+import { pathToRenderable } from './rendering/RenderablePathSpec';
 import createEditor from './testing/createEditor';
 
 describe('UndoRedoHistory', () => {
 	it('should keep history size below maximum', () => {
 		const editor = createEditor();
-		const stroke = new Stroke([ Path.fromString('m0,0 10,10').toRenderable({ fill: Color4.red }) ]);
+		const stroke = new Stroke([ pathToRenderable(Path.fromString('m0,0 10,10'), { fill: Color4.red }) ]);
 		editor.dispatch(EditorImage.addElement(stroke));
 
 		for (let i = 0; i < editor.history['maxUndoRedoStackSize'] + 10; i++) {

package/src/Viewport.ts

@@ -1,10 +1,7 @@
 import Command from './commands/Command';
 import { CommandLocalization } from './commands/localization';
 import Editor from './Editor';
-import Mat33 from './math/Mat33';
-import Rect2 from './math/shapes/Rect2';
-import { Point2, Vec2 } from './math/Vec2';
-import Vec3 from './math/Vec3';
+import { Mat33, Rect2, Point2, Vec2, Vec3 } from '@js-draw/math';
 import { StrokeDataPoint } from './types';
 
 // Returns the base type of some type of point/number

package/src/commands/Erase.ts

@@ -42,6 +42,7 @@ export default class Erase extends SerializableCommand {
 			const parent = editor.image.findParent(part);
 
 			if (parent) {
+				editor.image.onDestroyElement(part);
 				parent.remove();
 			}
 		}

package/src/commands/localization.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 
 export interface CommandLocalization {
 	movedLeft: string;

package/src/commands/uniteCommands.test.ts

@@ -1,12 +1,12 @@
-
 import { Color4, EditorImage, Mat33, Path, SerializableCommand, StrokeComponent, Vec2 } from '../lib';
 import uniteCommands from './uniteCommands';
 import createEditor from '../testing/createEditor';
+import { pathToRenderable } from '../rendering/RenderablePathSpec';
 
 describe('uniteCommands', () => {
 	it('should be serializable and deserializable', () => {
 		const editor = createEditor();
-		const stroke = new StrokeComponent([ Path.fromString('m0,0 l10,10 h-2 z').toRenderable({ fill: Color4.red }) ]);
+		const stroke = new StrokeComponent([ pathToRenderable(Path.fromString('m0,0 l10,10 h-2 z'), { fill: Color4.red }) ]);
 		const union = uniteCommands([
 			EditorImage.addElement(stroke),
 			stroke.transformBy(Mat33.translation(Vec2.of(1, 10))),
@@ -20,4 +20,4 @@ describe('uniteCommands', () => {
 		expect(lookupResult?.getBBox().topLeft).toMatchObject(Vec2.of(1, 10));
 		expect(lookupResult?.getBBox().bottomRight).toMatchObject(Vec2.of(11, 20));
 	});
-});
+});

package/src/components/AbstractComponent.transformBy.test.ts

@@ -1,11 +1,12 @@
 import { Color4, EditorImage, Mat33, Path, Rect2, Vec2 } from '../lib';
+import { pathToRenderable } from '../rendering/RenderablePathSpec';
 import createEditor from '../testing/createEditor';
 import Stroke from './Stroke';
 
 describe('AbstractComponent.transformBy', () => {
 	it('should restore the component\'s z-index on undo', () => {
 		const editor = createEditor();
-		const component = new Stroke([ Path.fromRect(Rect2.unitSquare).toRenderable({ fill: Color4.red }) ]);
+		const component = new Stroke([ pathToRenderable(Path.fromRect(Rect2.unitSquare), { fill: Color4.red }) ]);
 		EditorImage.addElement(component).apply(editor);
 
 		const origZIndex = component.getZIndex();

package/src/components/AbstractComponent.ts

@@ -1,9 +1,7 @@
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33, { Mat33Array } from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { LineSegment2, Mat33, Mat33Array, Rect2 } from '@js-draw/math';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
@@ -116,6 +114,16 @@ export default abstract class AbstractComponent {
 	public onAddToImage(_image: EditorImage): void { }
 	public onRemoveFromImage(): void { }
 
+	/**
+	 * Renders this component onto the given `canvas`.
+	 *
+	 * If `visibleRect` is given, it should be the region of `canvas` that is visible --
+	 * rendering anything outside of `visibleRect` should have no visible effect on the
+	 * resultant image.
+	 *
+	 * For optimal performance, implementers should call `canvas.startObject` and `canvas.endObject`
+	 * before and after rendering.
+	 */
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 
 	/** @return true if `lineSegment` intersects this component. */
@@ -152,6 +160,7 @@ export default abstract class AbstractComponent {
 
 	// Returns a command that, when applied, transforms this by [affineTransfm] and
 	// updates the editor.
+	// This also increases the element's z-index so that it is on top.
 	public transformBy(affineTransfm: Mat33): SerializableCommand {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
 	}

package/src/components/BackgroundComponent.test.ts

@@ -1,5 +1,4 @@
-import Color4 from '../Color4';
-import { Path, Rect2 } from '../math/lib';
+import { Path, Rect2, Color4 } from '@js-draw/math';
 import createEditor from '../testing/createEditor';
 import AbstractComponent from './AbstractComponent';
 import BackgroundComponent, { BackgroundType, imageBackgroundCSSClassName } from './BackgroundComponent';

package/src/components/BackgroundComponent.ts

@@ -1,19 +1,14 @@
-import Color4 from '../Color4';
 import Editor from '../Editor';
 import EditorImage, { EditorImageEventType } from '../EditorImage';
 import { DispatcherEventListener } from '../EventDispatcher';
 import SerializableCommand from '../commands/SerializableCommand';
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { LineSegment2, Mat33, Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2, PathCommand } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
-import Path, { PathCommand, PathCommandType } from '../math/shapes/Path';
-import { Vec2 } from '../math/Vec2';
 import Viewport from '../Viewport';
-import { toRoundedString } from '../math/rounding';
+import { pathToRenderable } from '../rendering/RenderablePathSpec';
 
 export enum BackgroundType {
 	SolidColor,
@@ -246,7 +241,7 @@ export default class BackgroundComponent extends AbstractComponent implements Re
 				fill: Color4.transparent,
 				stroke: { width: this.gridStrokeWidth, color: gridColor }
 			};
-			canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+			canvas.drawPath(pathToRenderable(this.generateGridPath(visibleRect), style));
 		}
 
 		const backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];

package/src/components/ImageComponent.ts

@@ -1,6 +1,4 @@
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33, { Mat33Array } from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { Mat33Array, Rect2, Mat33, LineSegment2 } from '@js-draw/math';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import { assertIsNumber, assertIsNumberArray } from '../util/assertions';
 import AbstractComponent from './AbstractComponent';

package/src/components/RestylableComponent.ts

@@ -1,4 +1,4 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 import SerializableCommand from '../commands/SerializableCommand';
 import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 import Editor from '../Editor';

package/src/components/SVGGlobalAttributesObject.ts

@@ -5,9 +5,7 @@
 // @packageDocumentation
 //
 
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';

package/src/components/Stroke.test.ts

@@ -1,12 +1,10 @@
-import Color4 from '../Color4';
-import Path from '../math/shapes/Path';
-import { Vec2 } from '../math/Vec2';
+import { Path, Vec2, Mat33, Color4 } from '@js-draw/math';
 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';
+import { pathToRenderable } from '../rendering/RenderablePathSpec';
 
 describe('Stroke', () => {
 	it('empty stroke should have an empty bounding box', () => {
@@ -24,7 +22,7 @@ describe('Stroke', () => {
 
 	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 })
+			pathToRenderable(Path.fromString('m1,1 2,2 3,3 z'), { fill: Color4.red })
 		]);
 		const clone = stroke.clone();
 
@@ -38,7 +36,7 @@ describe('Stroke', () => {
 	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 })
+			pathToRenderable(Path.fromString('m1,1 2,2 3,3 z'), { fill: Color4.red })
 		]);
 		const origBBox = stroke.getBBox();
 		expect(origBBox).toMatchObject({

package/src/components/Stroke.ts

@@ -1,14 +1,12 @@
 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 { Mat33, Path, Rect2, LineSegment2 } from '@js-draw/math';
 import Editor from '../Editor';
-import AbstractRenderer, { RenderablePathSpec } 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';
 import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
+import RenderablePathSpec, { pathFromRenderable, pathToRenderable } from '../rendering/RenderablePathSpec';
 
 interface StrokePart extends RenderablePathSpec {
 	path: Path;
@@ -64,7 +62,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
 		this.parts = [];
 
 		for (const section of parts) {
-			const path = Path.fromRenderable(section);
+			const path = pathFromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
 
 			if (!this.contentBBox) {
@@ -287,7 +285,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
 
 		const pathSpec: RenderablePathSpec[] = json.map((part: any) => {
 			const style = styleFromJSON(part.style);
-			return Path.fromString(part.path).toRenderable(style);
+			return pathToRenderable(Path.fromString(part.path), style);
 		});
 		return new Stroke(pathSpec);
 	}

package/src/components/TextComponent.test.ts

@@ -1,7 +1,5 @@
-import Color4 from '../Color4';
 import EditorImage from '../EditorImage';
-import Mat33 from '../math/Mat33';
-import { Vec2 } from '../math/Vec2';
+import { Vec2, Mat33, Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import createEditor from '../testing/createEditor';
 import AbstractComponent from './AbstractComponent';

package/src/components/TextComponent.ts

@@ -1,9 +1,6 @@
 import SerializableCommand from '../commands/SerializableCommand';
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33, { Mat33Array } from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
 import Editor from '../Editor';
-import { Vec2 } from '../math/Vec2';
+import { Vec2, LineSegment2, Rect2, Mat33, Mat33Array } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { cloneTextStyle, TextRenderingStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';

package/src/components/UnknownSVGObject.ts

@@ -4,9 +4,7 @@
 // @packageDocumentation
 //
 
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -27,7 +25,9 @@ export default class UnknownSVGObject extends AbstractComponent {
 			return;
 		}
 
+		canvas.startObject(this.contentBBox);
 		canvas.drawSVGElem(this.svgObject);
+		canvas.endObject(this.getLoadSaveData());
 	}
 
 	public override intersects(lineSegment: LineSegment2): boolean {

package/src/components/builders/ArrowBuilder.ts

@@ -1,5 +1,4 @@
-import Path, { PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
+import { Path, PathCommandType, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/builders/CircleBuilder.ts

@@ -1,13 +1,11 @@
-import { Vec2 } from '../../math/Vec2';
-import Path, { PathCommand, PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
+import { Vec2, Path, PathCommand, PathCommandType, Rect2, Color4 } from '@js-draw/math';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { pathToRenderable } from '../../rendering/RenderablePathSpec';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
-import Color4 from '../../Color4';
 
 export const makeOutlinedCircleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	return new CircleBuilder(initialPoint, viewport);
@@ -76,7 +74,7 @@ class CircleBuilder implements ComponentBuilder {
 			.mapPoints(point => this.viewport.roundPoint(point));
 
 		const preview = new Stroke([
-			path.toRenderable({
+			pathToRenderable(path, {
 				fill: Color4.transparent,
 				stroke: {
 					width: strokeWidth,

package/src/components/builders/FreehandLineBuilder.test.ts

@@ -1,6 +1,5 @@
-import Color4 from '../../Color4';
 import Viewport from '../../Viewport';
-import { Vec2 } from '../../math/Vec2';
+import { Vec2, Color4 } from '@js-draw/math';
 import { StrokeDataPoint } from '../../types';
 import { makeFreehandLineBuilder } from './FreehandLineBuilder';
 
@@ -10,7 +9,7 @@ describe('FreehandLineBuilder', () => {
 		const startPoint: StrokeDataPoint = {
 			pos: Vec2.zero,
 			width: 1,
-			time: (new Date()).getTime(),
+			time: performance.now(),
 			color: Color4.red,
 		};
 		const lineBuilder = makeFreehandLineBuilder(startPoint, viewport);

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,14 +1,12 @@
-import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/shapes/Rect2';
-import { PathCommand, PathCommandType } from '../../math/shapes/Path';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import RenderablePathSpec from '../../rendering/RenderablePathSpec';
+import { Point2, Vec2, Rect2, Color4, PathCommand, PathCommandType } from '@js-draw/math';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 import RenderingStyle from '../../rendering/RenderingStyle';
 import { StrokeSmoother, Curve } from '../util/StrokeSmoother';
-import Color4 from '../../Color4';
 
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	// Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if

package/src/components/builders/LineBuilder.ts

@@ -1,6 +1,6 @@
-import Path, { PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
+import { Path, PathCommandType, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { pathToRenderable } from '../../rendering/RenderablePathSpec';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
@@ -57,7 +57,7 @@ export default class LineBuilder implements ComponentBuilder {
 		]).mapPoints(point => this.viewport.roundPoint(point));
 
 		const preview = new Stroke([
-			path.toRenderable({ fill: this.startPoint.color })
+			pathToRenderable(path, { fill: this.startPoint.color })
 		]);
 
 		return preview;

package/src/components/builders/PressureSensitiveFreehandLineBuilder.ts

@@ -1,8 +1,7 @@
 import { Bezier } from 'bezier-js';
-import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/shapes/Rect2';
-import { LinePathCommand, PathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/shapes/Path';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import RenderablePathSpec from '../../rendering/RenderablePathSpec';
+import { Point2, Vec2, Rect2, PathCommand, PathCommandType, QuadraticBezierPathCommand, LinePathCommand } from '@js-draw/math';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';

package/src/components/builders/RectangleBuilder.ts

@@ -1,7 +1,6 @@
-import Mat33 from '../../math/Mat33';
-import Path from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
+import { Mat33, Rect2, Path } from '@js-draw/math';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import { pathToRenderable } from '../../rendering/RenderablePathSpec';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
@@ -52,7 +51,7 @@ export default class RectangleBuilder implements ComponentBuilder {
 		).mapPoints(point => this.viewport.roundPoint(point));
 
 		const preview = new Stroke([
-			path.toRenderable({
+			pathToRenderable(path, {
 				fill: this.endPoint.color
 			}),
 		]);

package/src/components/builders/types.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/lib.ts

@@ -22,7 +22,7 @@ export {
 
 	TextComponent,
 
-	// @deprecated
+	/** @deprecated use {@link TextComponent} */
 	TextComponent as Text,
 
 	Stroke as StrokeComponent,