js-draw 0.0.1

package/src/Viewport.ts

@@ -0,0 +1,168 @@
+import Command from './commands/Command';
+import { CommandLocalization } from './commands/localization';
+import Editor from './Editor';
+import Mat33 from './geometry/Mat33';
+import Rect2 from './geometry/Rect2';
+import { Point2, Vec2 } from './geometry/Vec2';
+import Vec3 from './geometry/Vec3';
+import { StrokeDataPoint } from './StrokeBuilder';
+import { EditorEventType, EditorNotifier } from './types';
+
+// Returns the base type of some type of point/number
+type PointDataType<T extends Point2|StrokeDataPoint|number> = T extends Point2 ? Point2 : number;
+
+export class Viewport {
+	// Command that translates/scales the viewport.
+	public static ViewportTransform = class implements Command {
+		readonly #inverseTransform: Mat33;
+
+		public constructor(public readonly transform: Mat33) {
+			this.#inverseTransform = transform.inverse();
+		}
+
+		public apply(editor: Editor) {
+			const viewport = editor.viewport;
+			viewport.resetTransform(viewport.transform.rightMul(this.transform));
+			editor.queueRerender();
+		}
+
+		public unapply(editor: Editor) {
+			const viewport = editor.viewport;
+			viewport.resetTransform(viewport.transform.rightMul(this.#inverseTransform));
+			editor.queueRerender();
+		}
+
+		public description(localizationTable: CommandLocalization): string {
+			const result: string[] = [];
+
+			// Describe the transformation's affect on the viewport (note that transformation transforms
+			// the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
+			const origVec = Vec2.unitX;
+			const linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
+			const affineTransformedVec = this.transform.transformVec2(Vec2.unitX);
+
+			const scale = linearTransformedVec.magnitude();
+			const rotation = 180 / Math.PI * linearTransformedVec.angle();
+			const translation = affineTransformedVec.minus(origVec);
+
+			if (scale > 1.2) {
+				result.push(localizationTable.zoomedIn);
+			}
+			else if (scale < 0.8) {
+				result.push(localizationTable.zoomedOut);
+			}
+
+			if (Math.floor(Math.abs(rotation)) > 0) {
+				result.push(localizationTable.rotatedBy(Math.round(rotation)));
+			}
+
+			const minTranslation = 1e-4;
+			if (translation.x > minTranslation) {
+				result.push(localizationTable.movedLeft);
+			} else if (translation.x < -minTranslation) {
+				result.push(localizationTable.movedRight);
+			}
+
+			if (translation.y < minTranslation) {
+				result.push(localizationTable.movedDown);
+			} else if (translation.y > minTranslation) {
+				result.push(localizationTable.movedUp);
+			}
+
+			return result.join('; ');
+		}
+	};
+
+	private transform: Mat33;
+	private inverseTransform: Mat33;
+	private screenRect: Rect2;
+
+	public constructor(private notifier: EditorNotifier) {
+		this.resetTransform(Mat33.identity);
+		this.screenRect = Rect2.empty;
+	}
+
+	public updateScreenSize(screenSize: Vec2) {
+		this.screenRect = this.screenRect.resizedTo(screenSize);
+	}
+
+	public get visibleRect(): Rect2 {
+		return this.screenRect.transformedBoundingBox(this.inverseTransform);
+	}
+
+	// the given point, but in canvas coordinates
+	public screenToCanvas(screenPoint: Point2): Point2 {
+		return this.inverseTransform.transformVec2(screenPoint);
+	}
+
+	public canvasToScreen(canvasPoint: Point2): Point2 {
+		return this.transform.transformVec2(canvasPoint);
+	}
+
+	// Updates the transformation directly. Using ViewportTransform is preferred.
+	// [newTransform] should map from canvas coordinates to screen coordinates.
+	public resetTransform(newTransform: Mat33) {
+		this.transform = newTransform;
+		this.inverseTransform = newTransform.inverse();
+		this.notifier.dispatch(EditorEventType.ViewportChanged, {
+			kind: EditorEventType.ViewportChanged,
+			newTransform,
+		});
+	}
+
+	public get screenToCanvasTransform(): Mat33 {
+		return this.inverseTransform;
+	}
+
+	public get canvasToScreenTransform(): Mat33 {
+		return this.transform;
+	}
+
+	// Returns the amount a vector on the canvas is scaled to become a vector on the screen.
+	public getScaleFactor(): number {
+		// Use transformVec3 to avoid translating the vector
+		return this.transform.transformVec3(Vec3.unitX).magnitude();
+	}
+
+	// Returns the angle of the canvas in radians
+	public getRotationAngle(): number {
+		return this.transform.transformVec3(Vec3.unitX).angle();
+	}
+
+	// Rounds the given [point] to a multiple of 10 such that it is within [tolerance] of
+	// its original location. This is useful for preparing data for base-10 conversion.
+	public static roundPoint<T extends Point2|number>(
+		point: T, tolerance: number,
+	): PointDataType<T>;
+
+	// The separate function type definition seems necessary here.
+	// See https://stackoverflow.com/a/58163623/17055750.
+	// eslint-disable-next-line no-dupe-class-members
+	public static roundPoint(
+		point: Point2|number, tolerance: number
+	): Point2|number {
+		const scaleFactor = 10 ** Math.floor(Math.log10(tolerance));
+		const roundComponent = (component: number): number => {
+			return Math.round(component / scaleFactor) * scaleFactor;
+		};
+
+		if (typeof point === 'number') {
+			return roundComponent(point);
+		}
+
+		return point.map(roundComponent);
+	}
+
+
+	// Round a point with a tolerance of ±1 screen unit.
+	public roundPoint(point: Point2): Point2 {
+		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
+	}
+}
+
+export namespace Viewport { // eslint-disable-line
+	// Needed to allow accessing as a type. See https://stackoverflow.com/a/68201883
+	export type ViewportTransform = typeof Viewport.ViewportTransform.prototype;
+}
+
+export default Viewport;

package/src/commands/Command.ts

@@ -0,0 +1,43 @@
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+
+interface Command {
+	apply(editor: Editor): void;
+	unapply(editor: Editor): void;
+
+	description(localizationTable: EditorLocalization): string;
+}
+
+// eslint-disable-next-line no-redeclare
+namespace Command {
+	export const empty = {
+		apply(_editor: Editor) { },
+		unapply(_editor: Editor) { },
+	};
+
+	export const union = (a: Command, b: Command): Command => {
+		return {
+			apply(editor: Editor) {
+				a.apply(editor);
+				b.apply(editor);
+			},
+			unapply(editor: Editor) {
+				b.unapply(editor);
+				a.unapply(editor);
+			},
+
+			description(localizationTable: EditorLocalization) {
+				const aDescription = a.description(localizationTable);
+				const bDescription = b.description(localizationTable);
+
+				if (aDescription === bDescription) {
+					return aDescription;
+				}
+
+				return `${aDescription}, ${bDescription}`;
+			},
+		};
+	};
+}
+
+export default Command;

package/src/commands/Erase.ts

@@ -0,0 +1,52 @@
+import AbstractComponent from '../components/AbstractComponent';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import { EditorLocalization } from '../localization';
+import Command from './Command';
+
+export default class Erase implements Command {
+	private toRemove: AbstractComponent[];
+
+	public constructor(toRemove: AbstractComponent[]) {
+		// Clone the list
+		this.toRemove = toRemove.map(elem => elem);
+	}
+
+	public apply(editor: Editor): void {
+		for (const part of this.toRemove) {
+			const parent = editor.image.findParent(part);
+
+			if (parent) {
+				parent.remove();
+			}
+		}
+
+		editor.queueRerender();
+	}
+
+	public unapply(editor: Editor): void {
+		for (const part of this.toRemove) {
+			if (!editor.image.findParent(part)) {
+				new EditorImage.AddElementCommand(part).apply(editor);
+			}
+		}
+
+		editor.queueRerender();
+	}
+
+	public description(localizationTable: EditorLocalization): string {
+		if (this.toRemove.length === 0) {
+			return localizationTable.erasedNoElements;
+		}
+
+		let description = this.toRemove[0].description(localizationTable);
+		for (const elem of this.toRemove) {
+			if (elem.description(localizationTable) !== description) {
+				description = localizationTable.elements;
+				break;
+			}
+		}
+
+		return localizationTable.eraseAction(description, this.toRemove.length);
+	}
+}

package/src/commands/localization.ts

@@ -0,0 +1,38 @@
+import Rect2 from '../geometry/Rect2';
+
+export interface CommandLocalization {
+	movedLeft: string;
+	movedUp: string;
+	movedDown: string;
+	movedRight: string;
+	rotatedBy: (degrees: number) => string;
+	zoomedOut: string;
+	zoomedIn: string;
+	erasedNoElements: string;
+	elements: string;
+	updatedViewport: string;
+	transformedElements: (elemCount: number) => string;
+	resizeOutputCommand: (newSize: Rect2) => string;
+	addElementAction: (elemDescription: string) => string;
+	eraseAction: (elemDescription: string, numElems: number) => string;
+
+	selectedElements: (count: number)=>string;
+}
+
+export const defaultCommandLocalization: CommandLocalization = {
+	updatedViewport: 'Transformed Viewport',
+	transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+	resizeOutputCommand: (newSize: Rect2) => `Resized image to ${newSize.w}x${newSize.h}`,
+	addElementAction: (componentDescription: string) => `Added ${componentDescription}`,
+	eraseAction: (componentDescription: string, numElems: number) => `Erased ${numElems} ${componentDescription}`,
+	elements: 'Elements',
+	erasedNoElements: 'Erased nothing',
+	rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
+	movedLeft: 'Moved left',
+	movedUp: 'Moved up',
+	movedDown: 'Moved down',
+	movedRight: 'Moved right',
+	zoomedOut: 'Zoomed out',
+	zoomedIn: 'Zoomed in',
+	selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
+};

package/src/components/AbstractComponent.ts

@@ -0,0 +1,73 @@
+import Command from '../commands/Command';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer from '../rendering/AbstractRenderer';
+import { ImageComponentLocalization } from './localization';
+
+export default abstract class AbstractComponent {
+	protected lastChangedTime: number;
+	protected abstract contentBBox: Rect2;
+	public zIndex: number;
+
+	// Topmost z-index
+	private static zIndexCounter: number = 0;
+
+	protected constructor() {
+		this.lastChangedTime = (new Date()).getTime();
+		this.zIndex = AbstractComponent.zIndexCounter++;
+	}
+
+	public getBBox(): Rect2 {
+		return this.contentBBox;
+	}
+	public abstract render(canvas: AbstractRenderer, visibleRect: Rect2): void;
+	public abstract intersects(lineSegment: LineSegment2): boolean;
+
+	// Private helper for transformBy: Apply the given transformation to all points of this.
+	protected abstract applyTransformation(affineTransfm: Mat33): void;
+
+	// Returns a command that, when applied, transforms this by [affineTransfm] and
+	// updates the editor.
+	public transformBy(affineTransfm: Mat33): Command {
+		const updateTransform = (editor: Editor, newTransfm: Mat33) => {
+			// Any parent should have only one direct child.
+			const parent = editor.image.findParent(this);
+			let hadParent = false;
+			if (parent) {
+				parent.remove();
+				hadParent = true;
+			}
+
+			this.applyTransformation(newTransfm);
+
+			// Add the element back to the document.
+			if (hadParent) {
+				new EditorImage.AddElementCommand(this).apply(editor);
+			}
+		};
+		const origZIndex = this.zIndex;
+
+		return {
+			apply: (editor: Editor) => {
+				this.zIndex = AbstractComponent.zIndexCounter++;
+				updateTransform(editor, affineTransfm);
+				editor.queueRerender();
+			},
+			unapply: (editor: Editor): void => {
+				this.zIndex = origZIndex;
+				updateTransform(
+					editor, affineTransfm.inverse()
+				);
+				editor.queueRerender();
+			},
+			description(localizationTable) {
+				return localizationTable.transformedElements(1);
+			},
+		};
+	}
+
+	public abstract description(localizationTable: ImageComponentLocalization): string;
+}

package/src/components/Stroke.test.ts

@@ -0,0 +1,18 @@
+import Color4 from '../Color4';
+import { Vec2 } from '../geometry/Vec2';
+import Stroke from './Stroke';
+
+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,
+		});
+	});
+});

package/src/components/Stroke.ts

@@ -0,0 +1,102 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Path from '../geometry/Path';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+interface StrokePart extends RenderablePathSpec {
+	path: Path;
+	bbox: Rect2;
+}
+
+export default class Stroke extends AbstractComponent {
+	private parts: StrokePart[];
+	protected contentBBox: Rect2;
+
+	public constructor(parts: RenderablePathSpec[]) {
+		super();
+
+		this.parts = parts.map(section => {
+			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);
+			}
+
+			return {
+				path,
+				bbox: pathBBox,
+
+				// To implement RenderablePathSpec
+				startPoint: path.startPoint,
+				style: section.style,
+				commands: path.parts,
+			};
+		});
+		this.contentBBox ??= Rect2.empty;
+	}
+
+	public intersects(line: LineSegment2): boolean {
+		for (const part of this.parts) {
+			if (part.path.intersection(line).length > 0) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	public render(canvas: AbstractRenderer, visibleRect: Rect2): void {
+		canvas.startObject(this.getBBox());
+		for (const part of this.parts) {
+			const bbox = part.bbox;
+			if (bbox.intersects(visibleRect)) {
+				canvas.drawPath(part);
+			}
+		}
+		canvas.endObject();
+	}
+
+	// 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);
+	}
+
+	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 newBBox = this.bboxForPart(newPath.bbox, part.style);
+
+			if (isFirstPart) {
+				this.contentBBox = newBBox;
+				isFirstPart = false;
+			} else {
+				this.contentBBox = this.contentBBox.union(newBBox);
+			}
+
+			return {
+				path: newPath,
+				bbox: newBBox,
+				startPoint: newPath.startPoint,
+				commands: newPath.parts,
+				style: part.style,
+			};
+		});
+	}
+
+	public description(localization: ImageComponentLocalization): string {
+		return localization.stroke;
+	}
+}

package/src/components/UnknownSVGObject.ts

@@ -0,0 +1,36 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer from '../rendering/AbstractRenderer';
+import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+export default class UnknownSVGObject extends AbstractComponent {
+	protected contentBBox: Rect2;
+
+	public constructor(private svgObject: SVGElement) {
+		super();
+		this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect: Rect2): void {
+		if (!(canvas instanceof SVGRenderer)) {
+			// Don't draw unrenderable objects if we can't
+			return;
+		}
+
+		canvas.drawSVGElem(this.svgObject);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		return this.contentBBox.getEdges().some(edge => edge.intersection(lineSegment) !== null);
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33): void {
+	}
+
+	public description(localization: ImageComponentLocalization): string {
+		return localization.svgObject;
+	}
+}

package/src/components/localization.ts

@@ -0,0 +1,9 @@
+export interface ImageComponentLocalization {
+	stroke: string;
+    svgObject: string;
+}
+
+export const defaultComponentLocalization: ImageComponentLocalization = {
+	stroke: 'Stroke',
+	svgObject: 'SVG Object',
+};

package/src/editorStyles.js

@@ -0,0 +1,3 @@
+
+import './Editor.css';
+import '@melloware/coloris/dist/coloris.css';

package/src/geometry/LineSegment2.test.ts

@@ -0,0 +1,77 @@
+import LineSegment2 from './LineSegment2';
+import { loadExpectExtensions } from '../testing/loadExpectExtensions';
+import { Vec2 } from './Vec2';
+
+loadExpectExtensions();
+
+describe('Line2', () => {
+	it('x and y axes should intersect at (0, 0)', () => {
+		const xAxis = new LineSegment2(Vec2.of(-10, 0), Vec2.of(10, 0));
+		const yAxis = new LineSegment2(Vec2.of(0, -10), Vec2.of(0, 10));
+		expect(xAxis.intersection(yAxis)?.point).objEq(Vec2.zero);
+		expect(yAxis.intersection(xAxis)?.point).objEq(Vec2.zero);
+	});
+
+	it('y = -2x + 2 and y = 2x - 2 should intersect at (1,0)', () => {
+		// y = -2x + 2
+		const line1 = new LineSegment2(Vec2.of(0, 2), Vec2.of(1, -2));
+		// y = 2x - 2
+		const line2 = new LineSegment2(Vec2.of(0, -2), Vec2.of(1, 2));
+
+		expect(line1.intersection(line2)?.point).objEq(Vec2.of(1, 0));
+		expect(line2.intersection(line1)?.point).objEq(Vec2.of(1, 0));
+	});
+
+	it('line from (10, 10) to (-100, 10) should intersect with the y-axis at t = 10', () => {
+		const line1 = new LineSegment2(Vec2.of(10, 10), Vec2.of(-10, 10));
+		// y = 2x - 2
+		const line2 = new LineSegment2(Vec2.of(0, -2), Vec2.of(0, 200));
+
+		expect(line1.intersection(line2)?.point).objEq(Vec2.of(0, 10));
+
+		// t=10 implies 10 units along he line from (10, 10) to (-10, 10)
+		expect(line1.intersection(line2)?.t).toBe(10);
+
+		// Similarly, t = 12 implies 12 units above (0, -2) in the direction of (0, 200)
+		expect(line2.intersection(line1)?.t).toBe(12);
+	});
+
+	it('y=2 and y=0 should not intersect', () => {
+		const line1 = new LineSegment2(Vec2.of(-10, 2), Vec2.of(10, 2));
+		const line2 = new LineSegment2(Vec2.of(-10, 0), Vec2.of(10, 0));
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('x=2 and x=-1 should not intersect', () => {
+		const line1 = new LineSegment2(Vec2.of(2, -10), Vec2.of(2, 10));
+		const line2 = new LineSegment2(Vec2.of(-1, 10), Vec2.of(-1, -10));
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('Line from (0, 0) to (1, 0) should not intersect line from (1.1, 0) to (2, 0)', () => {
+		const line1 = new LineSegment2(Vec2.of(0, 0), Vec2.of(1, 0));
+		const line2 = new LineSegment2(Vec2.of(1.1, 0), Vec2.of(2, 0));
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('Line segment from (1, 1) to (3, 1) should have length 2', () => {
+		const segment = new LineSegment2(Vec2.of(1, 1), Vec2.of(3, 1));
+		expect(segment.length).toBe(2);
+	});
+
+	it('(769.612,221.037)->(770.387,224.962) should not intersect (763.359,223.667)->(763.5493, 223.667)', () => {
+		// Points taken from issue observed directly in editor
+		const p1 = Vec2.of(769.6126045442547, 221.037877485765);
+		const p2 = Vec2.of(770.3873954557453, 224.962122514235);
+		const p3 = Vec2.of( 763.3590010920082, 223.66723995850086);
+		const p4 = Vec2.of(763.5494167642871, 223.66723995850086);
+
+		const line1 = new LineSegment2(p1, p2);
+		const line2 = new LineSegment2(p3, p4);
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+});