js-draw 0.23.0 → 0.24.0

package/src/EditorImage.test.ts

@@ -0,0 +1,120 @@
+import EditorImage from './EditorImage';
+import Stroke from './components/Stroke';
+import { Vec2 } from './math/Vec2';
+import Path, { PathCommandType } from './math/shapes/Path';
+import Color4 from './Color4';
+import DummyRenderer from './rendering/renderers/DummyRenderer';
+import createEditor from './testing/createEditor';
+import RenderingStyle from './rendering/RenderingStyle';
+import Rect2 from './math/shapes/Rect2';
+import Mat33 from './math/Mat33';
+import { SerializableCommand } from './lib';
+
+describe('EditorImage', () => {
+	const testStroke = new Stroke([
+		{
+			startPoint: Vec2.of(0, 0),
+			commands: [
+				{
+					kind: PathCommandType.MoveTo,
+					point: Vec2.of(3, 3),
+				},
+			],
+			style: {
+				fill: Color4.red,
+			},
+		},
+	]);
+	const testFill: RenderingStyle = { fill: Color4.black };
+	const addTestStrokeCommand = EditorImage.addElement(testStroke);
+
+	it('elements added to the image should be findable', () => {
+		const editor = createEditor();
+		const image = editor.image;
+
+		// We haven't activated the command, so testStroke's parent should be null.
+		expect(image.findParent(testStroke)).toBeNull();
+		addTestStrokeCommand.apply(editor);
+		expect(image.findParent(testStroke)).not.toBeNull();
+	});
+
+	it('should render an element added to the image', () => {
+		const editor = createEditor();
+		const renderer = editor.display.getDryInkRenderer();
+		if (!(renderer instanceof DummyRenderer)) {
+			throw new Error('Wrong display type!');
+		}
+
+		const emptyDocumentPathCount = renderer.renderedPathCount;
+		expect(renderer.objectNestingLevel).toBe(0);
+		editor.dispatch(addTestStrokeCommand);
+		editor.rerender();
+		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBeGreaterThanOrEqual(1);
+
+		// Should not be within objects after finished rendering
+		expect(renderer.objectNestingLevel).toBe(0);
+	});
+
+	it('should have a 1-deep tree if two non-overlapping strokes are added', () => {
+		const editor = createEditor();
+		const image = editor.image;
+
+		const leftmostStroke = new Stroke([
+			Path.fromString('M0,0L1,1L0,1').toRenderable(testFill),
+		]);
+
+		// Lowercase ls: lineTo(Δx, Δy) instead of lineTo(x, y)
+		const rightmostStroke = new Stroke([
+			Path.fromString('M-10,0 l1,1 l0,-1').toRenderable(testFill),
+		]);
+
+		expect(!leftmostStroke.getBBox().intersects(rightmostStroke.getBBox()));
+
+		(EditorImage.addElement(leftmostStroke)).apply(editor);
+
+		// The first node should be at the image's root.
+		let firstParent = image.findParent(leftmostStroke);
+		expect(firstParent).not.toBe(null);
+		expect(firstParent?.getParent()).toBe(null);
+		expect(firstParent?.getBBox()?.corners).toMatchObject(leftmostStroke.getBBox()?.corners);
+
+		(EditorImage.addElement(rightmostStroke)).apply(editor);
+
+		firstParent = image.findParent(leftmostStroke);
+		const secondParent = image.findParent(rightmostStroke);
+
+		expect(firstParent).not.toStrictEqual(secondParent);
+		expect(firstParent?.getParent()).toStrictEqual(secondParent?.getParent());
+		expect(firstParent?.getParent()?.getParent()).toBeNull();
+	});
+
+	it('setImportExportRect should return a serializable command', () => {
+		const editor = createEditor();
+		const image = editor.image;
+
+		const originalRect = editor.getImportExportRect();
+		const newRect = new Rect2(3, 4, 5, 6);
+		const command = image.setImportExportRect(newRect);
+		expect(command.serialize().data).toMatchObject({
+			originalSize: originalRect.size.xy,
+			originalTransform: Mat33.identity.toArray(),
+			newRegion: {
+				x: 3,
+				y: 4,
+				w: 5,
+				h: 6,
+			},
+		});
+
+		expect(editor.getImportExportRect()).objEq(originalRect);
+		command.apply(editor);
+		expect(editor.getImportExportRect()).objEq(newRect);
+
+		const deserializedCommand = SerializableCommand.deserialize(command.serialize(), editor);
+
+		deserializedCommand.unapply(editor);
+		expect(editor.getImportExportRect()).objEq(originalRect);
+		deserializedCommand.apply(editor);
+		expect(editor.getImportExportRect()).objEq(newRect);
+	});
+});

package/src/EditorImage.ts

@@ -0,0 +1,603 @@
+import Editor from './Editor';
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
+import Viewport from './Viewport';
+import AbstractComponent from './components/AbstractComponent';
+import Rect2 from './math/shapes/Rect2';
+import { EditorLocalization } from './localization';
+import RenderingCache from './rendering/caching/RenderingCache';
+import SerializableCommand from './commands/SerializableCommand';
+import EventDispatcher from './EventDispatcher';
+import { Vec2 } from './math/Vec2';
+import Mat33, { Mat33Array } from './math/Mat33';
+import { assertIsNumber, assertIsNumberArray } from './util/assertions';
+
+// @internal Sort by z-index, low to high
+export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
+	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
+};
+
+export enum EditorImageEventType {
+	ExportViewportChanged
+}
+
+export type EditorImageNotifier = EventDispatcher<EditorImageEventType, { image: EditorImage }>;
+
+// Handles lookup/storage of elements in the image
+export default class EditorImage {
+	private root: ImageNode;
+	private background: ImageNode;
+	private componentsById: Record<string, AbstractComponent>;
+
+	/** Viewport for the exported/imported image. */
+	private importExportViewport: Viewport;
+
+	// @internal
+	public readonly notifier: EditorImageNotifier;
+
+	// @internal
+	public constructor() {
+		this.root = new ImageNode();
+		this.background = new ImageNode();
+		this.componentsById = {};
+
+		this.notifier = new EventDispatcher();
+		this.importExportViewport = new Viewport(() => {
+			this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+				image: this,
+			});
+		});
+
+		// Default to a 500x500 image
+		this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
+	}
+
+	// Returns all components that make up the background of this image. These
+	// components are rendered below all other components.
+	public getBackgroundComponents(): AbstractComponent[] {
+		const result = [];
+
+		const leaves = this.background.getLeaves();
+		sortLeavesByZIndex(leaves);
+
+		for (const leaf of leaves) {
+			const content = leaf.getContent();
+
+			if (content) {
+				result.push(content);
+			}
+		}
+		return result;
+	}
+
+	// Returns the parent of the given element, if it exists.
+	public findParent(elem: AbstractComponent): ImageNode|null {
+		return this.background.getChildWithContent(elem) ?? this.root.getChildWithContent(elem);
+	}
+
+	// Forces a re-render of `elem` when the image is next re-rendered as a whole.
+	// Does nothing if `elem` is not in this.
+	public queueRerenderOf(elem: AbstractComponent) {
+		// TODO: Make more efficient (e.g. increase IDs of all parents,
+		// make cache take into account last modified time instead of IDs, etc.)
+		const parent = this.findParent(elem);
+
+		if (parent) {
+			parent.remove();
+			this.addElementDirectly(elem);
+		}
+	}
+
+	/** @internal */
+	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
+		this.background.render(screenRenderer, viewport.visibleRect);
+		cache.render(screenRenderer, this.root, viewport);
+	}
+
+	/**
+	 * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
+	 *
+	 * `viewport` is used to improve rendering performance. If given, it must match
+	 * the viewport used by the `renderer` (if any).
+	 */
+	public render(renderer: AbstractRenderer, viewport: Viewport|null) {
+		this.background.render(renderer, viewport?.visibleRect);
+		this.root.render(renderer, viewport?.visibleRect);
+	}
+
+	/** Renders all nodes, even ones not within the viewport. @internal */
+	public renderAll(renderer: AbstractRenderer) {
+		this.render(renderer, null);
+	}
+
+	/** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+	public getAllElements() {
+		const leaves = this.root.getLeaves();
+		sortLeavesByZIndex(leaves);
+
+		return leaves.map(leaf => leaf.getContent()!);
+	}
+
+	/** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
+	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
+		const leaves = this.root.getLeavesIntersectingRegion(region);
+		sortLeavesByZIndex(leaves);
+
+		return leaves.map(leaf => leaf.getContent()!);
+	}
+
+	/** @internal */
+	public onDestroyElement(elem: AbstractComponent) {
+		delete this.componentsById[elem.getId()];
+	}
+
+	/**
+	 * @returns the AbstractComponent with `id`, if it exists.
+	 *
+	 * @see {@link AbstractComponent.getId}
+	 */
+	public lookupElement(id: string): AbstractComponent|null {
+		return this.componentsById[id] ?? null;
+	}
+
+	private addElementDirectly(elem: AbstractComponent): ImageNode {
+		elem.onAddToImage(this);
+
+		this.componentsById[elem.getId()] = elem;
+
+		// If a background component, add to the background. Else,
+		// add to the normal component tree.
+		const parentTree = elem.isBackground() ? this.background : this.root;
+		return parentTree.addLeaf(elem);
+	}
+
+	private removeElementDirectly(element: AbstractComponent) {
+		const container = this.findParent(element);
+		container?.remove();
+
+		if (container) {
+			this.onDestroyElement(element);
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns a command that adds the given element to the `EditorImage`.
+	 * If `applyByFlattening` is true, the content of the wet ink renderer is
+	 * rendered onto the main rendering canvas instead of doing a full re-render.
+	 *
+	 * @see {@link Display.flatten}
+	 */
+	public static addElement(elem: AbstractComponent, applyByFlattening: boolean = false): SerializableCommand {
+		return new EditorImage.AddElementCommand(elem, applyByFlattening);
+	}
+
+	/** @see EditorImage.addElement */
+	public addElement(elem: AbstractComponent, applyByFlattening?: boolean) {
+		return EditorImage.addElement(elem, applyByFlattening);
+	}
+
+	// A Command that can access private [EditorImage] functionality
+	private static AddElementCommand = class extends SerializableCommand {
+		private serializedElem: any|null = null;
+
+		// If [applyByFlattening], then the rendered content of this element
+		// is present on the display's wet ink canvas. As such, no re-render is necessary
+		// the first time this command is applied (the surfaces are joined instead).
+		public constructor(
+			private element: AbstractComponent,
+			private applyByFlattening: boolean = false
+		) {
+			super('add-element');
+
+			// FIXME: The serialized version of this command may be inaccurate if this is
+			//        serialized when this command is not on the top of the undo stack.
+			//
+			// Caching the element's serialized data leads to additional memory usage *and*
+			// sometimes incorrect behavior in collaborative editing.
+			this.serializedElem = null;
+
+			if (isNaN(element.getBBox().area)) {
+				throw new Error('Elements in the image cannot have NaN bounding boxes');
+			}
+		}
+
+		public apply(editor: Editor) {
+			editor.image.addElementDirectly(this.element);
+
+			if (!this.applyByFlattening) {
+				editor.queueRerender();
+			} else {
+				this.applyByFlattening = false;
+				editor.display.flatten();
+			}
+		}
+
+		public unapply(editor: Editor) {
+			editor.image.removeElementDirectly(this.element);
+			editor.queueRerender();
+		}
+
+		public description(_editor: Editor, localization: EditorLocalization) {
+			return localization.addElementAction(this.element.description(localization));
+		}
+
+		protected serializeToJSON() {
+			return {
+				elemData: this.serializedElem ?? this.element.serialize(),
+			};
+		}
+
+		static {
+			SerializableCommand.register('add-element', (json: any, editor: Editor) => {
+				const id = json.elemData.id;
+				const foundElem = editor.image.lookupElement(id);
+				const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
+				const result = new EditorImage.AddElementCommand(elem);
+				result.serializedElem = json.elemData;
+				return result;
+			});
+		}
+	};
+
+
+
+	/**
+	 * @returns a `Viewport` for rendering the image when importing/exporting.
+	 */
+	public getImportExportViewport() {
+		return this.importExportViewport;
+	}
+
+	public setImportExportRect(imageRect: Rect2): SerializableCommand {
+		const importExportViewport = this.getImportExportViewport();
+		const origSize = importExportViewport.visibleRect.size;
+		const origTransform = importExportViewport.canvasToScreenTransform;
+
+		return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+	}
+
+	// Handles resizing the background import/export region of the image.
+	private static SetImportExportRectCommand = class extends SerializableCommand {
+		private static commandId = 'set-import-export-rect';
+
+		public constructor(
+			private originalSize: Vec2,
+			private originalTransform: Mat33,
+			private finalRect: Rect2,
+		) {
+			super(EditorImage.SetImportExportRectCommand.commandId);
+		}
+
+		public apply(editor: Editor) {
+			const viewport = editor.image.getImportExportViewport();
+			viewport.updateScreenSize(this.finalRect.size);
+			viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
+			editor.queueRerender();
+		}
+
+		public unapply(editor: Editor) {
+			const viewport = editor.image.getImportExportViewport();
+			viewport.updateScreenSize(this.originalSize);
+			viewport.resetTransform(this.originalTransform);
+			editor.queueRerender();
+		}
+
+		public description(_editor: Editor, localization: EditorLocalization) {
+			return localization.resizeOutputCommand(this.finalRect);
+		}
+
+		protected serializeToJSON() {
+			return {
+				originalSize: this.originalSize.xy,
+				originalTransform: this.originalTransform.toArray(),
+				newRegion: {
+					x: this.finalRect.x,
+					y: this.finalRect.y,
+					w: this.finalRect.w,
+					h: this.finalRect.h,
+				},
+			};
+		}
+
+		static {
+			const commandId = this.commandId;
+			SerializableCommand.register(commandId, (json: any, _editor: Editor) => {
+				assertIsNumber(json.originalSize.x);
+				assertIsNumber(json.originalSize.y);
+				assertIsNumberArray(json.originalTransform);
+				assertIsNumberArray([
+					json.newRegion.x,
+					json.newRegion.y,
+					json.newRegion.w,
+					json.newRegion.h,
+				]);
+
+				const originalSize = Vec2.ofXY(json.originalSize);
+				const originalTransform = new Mat33(...(json.originalTransform as Mat33Array));
+				const finalRect = new Rect2(
+					json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h
+				);
+				return new EditorImage.SetImportExportRectCommand(
+					originalSize, originalTransform, finalRect
+				);
+			});
+		}
+	};
+}
+
+type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
+
+/** Part of the Editor's image. @internal */
+export class ImageNode {
+	private content: AbstractComponent|null;
+	private bbox: Rect2;
+	private children: ImageNode[];
+	private targetChildCount: number = 30;
+
+	private id: number;
+	private static idCounter: number = 0;
+
+	public constructor(
+		private parent: ImageNode|null = null
+	) {
+		this.children = [];
+		this.bbox = Rect2.empty;
+		this.content = null;
+
+		this.id = ImageNode.idCounter++;
+	}
+
+	public getId() {
+		return this.id;
+	}
+
+	public onContentChange() {
+		this.id = ImageNode.idCounter++;
+	}
+
+	public getContent(): AbstractComponent|null {
+		return this.content;
+	}
+
+	public getParent(): ImageNode|null {
+		return this.parent;
+	}
+
+	private getChildrenIntersectingRegion(region: Rect2): ImageNode[] {
+		return this.children.filter(child => {
+			return child.getBBox().intersects(region);
+		});
+	}
+
+	public getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[] {
+		if (this.content) {
+			return [this];
+		}
+		return this.getChildrenIntersectingRegion(region);
+	}
+
+	// Returns a list of `ImageNode`s with content (and thus no children).
+	public getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[] {
+		const result: ImageNode[] = [];
+		let current: ImageNode|undefined;
+		const workList: ImageNode[] = [];
+
+		workList.push(this);
+		const toNext = () => {
+			current = undefined;
+
+			const next = workList.pop();
+			if (next && !isTooSmall?.(next.bbox)) {
+				current = next;
+
+				if (current.content !== null && current.getBBox().intersection(region)) {
+					result.push(current);
+				}
+
+				workList.push(
+					...current.getChildrenIntersectingRegion(region)
+				);
+			}
+		};
+
+		while (workList.length > 0) {
+			toNext();
+		}
+
+		return result;
+	}
+
+	// Returns the child of this with the target content or `null` if no
+	// such child exists.
+	public getChildWithContent(target: AbstractComponent): ImageNode|null {
+		const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+		for (const candidate of candidates) {
+			if (candidate.getContent() === target) {
+				return candidate;
+			}
+		}
+
+		return null;
+	}
+
+	// Returns a list of leaves with this as an ancestor.
+	// Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
+	public getLeaves(): ImageNode[] {
+		if (this.content) {
+			return [this];
+		}
+
+		const result: ImageNode[] = [];
+		for (const child of this.children) {
+			result.push(...child.getLeaves());
+		}
+
+		return result;
+	}
+
+	public addLeaf(leaf: AbstractComponent): ImageNode {
+		this.onContentChange();
+
+		if (this.content === null && this.children.length === 0) {
+			this.content = leaf;
+			this.recomputeBBox(true);
+
+			return this;
+		}
+
+		if (this.content !== null) {
+			console.assert(this.children.length === 0);
+
+			const contentNode = new ImageNode(this);
+			contentNode.content = this.content;
+			this.content = null;
+			this.children.push(contentNode);
+			contentNode.recomputeBBox(false);
+		}
+
+		// If this node is contained within the leaf, make this and the leaf
+		// share a parent.
+		const leafBBox = leaf.getBBox();
+		if (leafBBox.containsRect(this.getBBox())) {
+			const nodeForNewLeaf = new ImageNode(this);
+
+			if (this.children.length < this.targetChildCount) {
+				this.children.push(nodeForNewLeaf);
+			} else {
+				const nodeForChildren = new ImageNode(this);
+
+				nodeForChildren.children = this.children;
+				this.children = [nodeForNewLeaf, nodeForChildren];
+				nodeForChildren.recomputeBBox(true);
+				nodeForChildren.updateParents();
+			}
+			return nodeForNewLeaf.addLeaf(leaf);
+		}
+
+		const containingNodes = this.children.filter(
+			child => child.getBBox().containsRect(leafBBox)
+		);
+
+		// Does the leaf already fit within one of the children?
+		if (containingNodes.length > 0 && this.children.length >= this.targetChildCount) {
+			// Sort the containers in ascending order by area
+			containingNodes.sort((a, b) => a.getBBox().area - b.getBBox().area);
+
+			// Choose the smallest child that contains the new element.
+			const result = containingNodes[0].addLeaf(leaf);
+			result.rebalance();
+			return result;
+		}
+
+
+		const newNode = new ImageNode(this);
+		this.children.push(newNode);
+		newNode.content = leaf;
+		newNode.recomputeBBox(true);
+
+		return newNode;
+	}
+
+	public getBBox(): Rect2 {
+		return this.bbox;
+	}
+
+	// Recomputes this' bounding box. If [bubbleUp], also recompute
+	// this' ancestors bounding boxes. This also re-computes this' bounding box
+	// in the z-direction (z-indicies).
+	public recomputeBBox(bubbleUp: boolean) {
+		const oldBBox = this.bbox;
+		if (this.content !== null) {
+			this.bbox = this.content.getBBox();
+		} else {
+			this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
+		}
+
+		if (bubbleUp && !oldBBox.eq(this.bbox)) {
+			this.parent?.recomputeBBox(true);
+		}
+	}
+
+	private updateParents(recursive: boolean = false) {
+		for (const child of this.children) {
+			child.parent = this;
+
+			if (recursive) {
+				child.updateParents(recursive);
+			}
+		}
+	}
+
+	private rebalance() {
+		// If the current node is its parent's only child,
+		if (this.parent && this.parent.children.length === 1) {
+			console.assert(this.parent.content === null);
+			console.assert(this.parent.children[0] === this);
+
+			// Remove this' parent, if this' parent isn't the root.
+			const oldParent = this.parent;
+			if (oldParent.parent !== null) {
+				oldParent.children = [];
+				this.parent = oldParent.parent;
+				this.parent.children.push(this);
+				oldParent.parent = null;
+				this.parent.recomputeBBox(false);
+			} else if (this.content === null) {
+				// Remove this and transfer this' children to the parent.
+				this.parent.children = this.children;
+				this.parent.updateParents();
+				this.parent = null;
+			}
+		}
+	}
+
+	// Remove this node and all of its children
+	public remove() {
+		this.content?.onRemoveFromImage();
+
+		if (!this.parent) {
+			this.content = null;
+			this.children = [];
+
+			return;
+		}
+
+		const oldChildCount = this.parent.children.length;
+		this.parent.children = this.parent.children.filter(node => {
+			return node !== this;
+		});
+
+		console.assert(
+			this.parent.children.length === oldChildCount - 1,
+			`${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`
+		);
+
+		this.parent.children.forEach(child => {
+			child.rebalance();
+		});
+
+		this.parent.recomputeBBox(true);
+
+		// Invalidate/disconnect this.
+		this.content = null;
+		this.parent = null;
+		this.children = [];
+	}
+
+	public render(renderer: AbstractRenderer, visibleRect?: Rect2) {
+		let leaves;
+		if (visibleRect) {
+			leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+		} else {
+			leaves = this.getLeaves();
+		}
+		sortLeavesByZIndex(leaves);
+
+		for (const leaf of leaves) {
+			// Leaves by definition have content
+			leaf.getContent()!.render(renderer, visibleRect);
+		}
+	}
+}