js-draw 0.18.1 → 0.18.2

package/src/components/ImageBackground.ts

@@ -0,0 +1,176 @@
+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/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
+
+export enum BackgroundType {
+	SolidColor,
+	None,
+}
+
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+	protected contentBBox: Rect2;
+	private viewportSizeChangeListener: DispatcherEventListener|null = null;
+
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
+	public constructor(
+		private backgroundType: BackgroundType, private mainColor: Color4
+	) {
+		super('image-background', 0);
+		this.contentBBox = Rect2.empty;
+	}
+	
+	public getStyle(): ComponentStyle {
+		let color: Color4|undefined = this.mainColor;
+
+		if (this.backgroundType === BackgroundType.None) {
+			color = undefined;
+		}
+
+		return {
+			color,
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	// @internal
+	public forceStyle(style: ComponentStyle, editor: Editor | null): void {
+		const fill = style.color;
+
+		if (!fill) {
+			return;
+		}
+
+		this.mainColor = fill;
+		if (fill.eq(Color4.transparent)) {
+			this.backgroundType = BackgroundType.None;
+		} else {
+			this.backgroundType = BackgroundType.SolidColor;
+		}
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
+	}
+
+	public onAddToImage(image: EditorImage) {
+		if (this.viewportSizeChangeListener) {
+			console.warn('onAddToImage called when background is already in an image');
+			this.onRemoveFromImage();
+		}
+
+		this.viewportSizeChangeListener = image.notifier.on(
+			EditorImageEventType.ExportViewportChanged, () => {
+				this.recomputeBBox(image);
+			});
+		this.recomputeBBox(image);
+	}
+
+	public onRemoveFromImage(): void {
+		this.viewportSizeChangeListener?.remove();
+		this.viewportSizeChangeListener = null;
+	}
+
+	private recomputeBBox(image: EditorImage) {
+		const importExportRect = image.getImportExportViewport().visibleRect;
+		if (!this.contentBBox.eq(importExportRect)) {
+			this.contentBBox = importExportRect;
+
+			// Re-render this if already added to the EditorImage.
+			image.queueRerenderOf(this);
+		}
+	}
+
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2) {
+		if (this.backgroundType === BackgroundType.None) {
+			return;
+		}
+		canvas.startObject(this.contentBBox);
+
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			// If the rectangle for this region contains the visible rect,
+			// we can fill the entire visible rectangle (which may be more efficient than
+			// filling the entire region for this.)
+			if (visibleRect) {
+				const intersection = visibleRect.intersection(this.contentBBox);
+				if (intersection) {
+					canvas.fillRect(intersection, this.mainColor);
+				}
+			} else {
+				canvas.fillRect(this.contentBBox, this.mainColor);
+			}
+		}
+
+		canvas.endObject(this.getLoadSaveData(), [ imageBackgroundCSSClassName ]);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+	}
+
+	public isSelectable(): boolean {
+		return false;
+	}
+
+	public isBackground(): boolean {
+		return true;
+	}
+
+	protected serializeToJSON() {
+		return {
+			mainColor: this.mainColor.toHexString(),
+			backgroundType: this.backgroundType,
+		};
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33) {
+		// Do nothing — it doesn't make sense to transform the background.
+	}
+
+	public description(localizationTable: ImageComponentLocalization) {
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+		} else {
+			return localizationTable.emptyBackground;
+		}
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageBackground(this.backgroundType, this.mainColor);
+	}
+
+	// @internal
+	public static deserializeFromJSON(json: any) {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		if (typeof json.mainColor !== 'string') {
+			throw new Error('Error deserializing — mainColor must be of type string.');
+		}
+
+		const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+		const mainColor = Color4.fromHex(json.mainColor);
+
+		return new ImageBackground(backgroundType, mainColor);
+	}
+}
+
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/src/components/ImageComponent.ts

@@ -0,0 +1,171 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33, { Mat33Array } from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+// Represents a raster image.
+export default class ImageComponent extends AbstractComponent {
+	protected contentBBox: Rect2;
+	private image: RenderableImage;
+
+	public constructor(image: RenderableImage) {
+		super('image-component');
+		this.image = {
+			...image,
+			label: image.label ?? image.image.getAttribute('alt') ?? image.image.getAttribute('aria-label') ?? undefined,
+		};
+
+		const isHTMLImageElem = (elem: HTMLCanvasElement|HTMLImageElement): elem is HTMLImageElement => {
+			return elem.getAttribute('src') !== undefined;
+		};
+		if (isHTMLImageElem(image.image) && !image.image.complete) {
+			image.image.onload = () => this.recomputeBBox();
+		}
+
+		this.recomputeBBox();
+	}
+
+	private getImageRect() {
+		return new Rect2(0, 0, this.image.image.width, this.image.image.height);
+	}
+
+	private recomputeBBox() {
+		this.contentBBox = this.getImageRect();
+		this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
+	}
+
+	// Load from an image. Waits for the image to load if incomplete.
+	public static async fromImage(elem: HTMLImageElement, transform: Mat33) {
+		if (!elem.complete) {
+			await new Promise((resolve, reject) => {
+				elem.onload = resolve;
+				elem.onerror = reject;
+				elem.onabort = reject;
+			});
+		}
+
+		let width, height;
+		if (
+			typeof elem.width === 'number' && typeof elem.height === 'number'
+			&& elem.width !== 0 && elem.height !== 0
+		) {
+			width = elem.width as number;
+			height = elem.height as number;
+		} else {
+			width = elem.clientWidth;
+			height = elem.clientHeight;
+		}
+
+		let image;
+		let url = elem.src ?? '';
+		if (!url.startsWith('data:image/')) {
+			// Convert to a data URL:
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+
+			const ctx = canvas.getContext('2d')!;
+			ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+			url = canvas.toDataURL();
+			image = canvas;
+		} else {
+			image = new Image();
+			image.src = url;
+			image.width = width;
+			image.height = height;
+		}
+
+		image.setAttribute('alt', elem.getAttribute('alt') ?? '');
+		image.setAttribute('aria-label', elem.getAttribute('aria-label') ?? '');
+
+		return new ImageComponent({
+			image,
+			base64Url: url,
+			transform: transform,
+		});
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
+		canvas.drawImage(this.image);
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	public getProportionalRenderingTime(): number {
+		// Estimate: Equivalent to a stroke with 10 segments.
+		return 10;
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		const rect = this.getImageRect();
+		const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+		for (const edge of edges) {
+			if (edge.intersects(lineSegment)) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	protected serializeToJSON() {
+		return {
+			src: this.image.base64Url,
+			label: this.image.label,
+
+			// Store the width and height for bounding box computations while the image is loading.
+			width: this.image.image.width,
+			height: this.image.image.height,
+
+			transform: this.image.transform.toArray(),
+		};
+	}
+
+	protected applyTransformation(affineTransfm: Mat33) {
+		this.image.transform = affineTransfm.rightMul(this.image.transform);
+		this.recomputeBBox();
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+	}
+
+	public getAltText() {
+		return this.image.label;
+	}
+
+	public getURL() {
+		return this.image.base64Url;
+	}
+
+	public getTransformation(): Mat33 {
+		return this.image.transform;
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageComponent({
+			...this.image,
+		});
+	}
+
+	public static deserializeFromJSON(data: any): ImageComponent {
+		if (!(typeof data.src === 'string')) {
+			throw new Error(`${data} has invalid format! Expected src property.`);
+		}
+
+		const image = new Image();
+		image.src = data.src;
+		image.width = data.width;
+		image.height = data.height;
+
+		return new ImageComponent({
+			image: image,
+			base64Url: image.src,
+			label: data.label,
+			transform: new Mat33(...(data.transform as Mat33Array)),
+		});
+	}
+}
+
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

package/src/components/RestylableComponent.ts

@@ -0,0 +1,142 @@
+import Color4 from '../Color4';
+import SerializableCommand from '../commands/SerializableCommand';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import TextStyle, { textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
+import AbstractComponent from './AbstractComponent';
+
+export interface ComponentStyle {
+	color?: Color4;
+	textStyle?: TextStyle;
+}
+
+const serializeComponentStyle = (style: ComponentStyle) => {
+	const result: Record<string, any> = { };
+	
+	if (style.color) {
+		result.color = style.color.toHexString();
+	}
+
+	if (style.textStyle) {
+		result.textStyle = textStyleToJSON(style.textStyle);
+	}
+
+	return result;
+};
+
+const deserializeComponentStyle = (json: Record<string, any>|any): ComponentStyle => {
+	const color = json.color ? Color4.fromHex(json.color) : undefined;
+	const textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
+
+	return {
+		color,
+		textStyle,
+	};
+};
+
+// For internal use by Components implementing `updateStyle`:
+export const createRestyleComponentCommand = (
+	initialStyle: ComponentStyle,
+	newStyle: ComponentStyle,
+	component: RestyleableComponent,
+): SerializableCommand => {
+	return new DefaultRestyleComponentCommand(
+		initialStyle, newStyle, component.getId(), component
+	);
+};
+
+
+// Returns true if `component` is a `RestylableComponent`.
+export const isRestylableComponent = (component: AbstractComponent): component is RestyleableComponent => {
+	const hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+	if (!hasMethods) {
+		return false;
+	}
+
+	if (!('isRestylableComponent' in component) || !(component as any)['isRestylableComponent']) {
+		return false;
+	}
+
+	return true;
+};
+
+export interface RestyleableComponent extends AbstractComponent {
+	getStyle(): ComponentStyle;
+
+	updateStyle(style: ComponentStyle): SerializableCommand;
+
+	/**
+	 * Set the style of this component in a way that can't be undone/redone
+	 * (does not create a command).
+	 * 
+	 * Prefer `updateStyle(style).apply(editor)`.
+	 */
+	forceStyle(style: ComponentStyle, editor: Editor|null): void;
+
+	isRestylableComponent: true;
+}
+
+export default RestyleableComponent;
+
+
+const defaultRestyleComponentCommandId = 'default-restyle-element';
+
+class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
+	public constructor(
+		private originalStyle: ComponentStyle,
+		private newStyle: ComponentStyle,
+		componentID: string,
+		component?: RestyleableComponent,
+	) {
+		super(defaultRestyleComponentCommandId, componentID, component);
+	}
+
+	private getComponent(editor: Editor): RestyleableComponent {
+		this.resolveComponent(editor.image);
+
+		const component = this.component as any;
+		if (!component || !component['forceStyle'] || !component['updateStyle']) {
+			throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
+		}
+
+		return component;
+	}
+
+	public apply(editor: Editor) {
+		this.getComponent(editor).forceStyle(this.newStyle, editor);
+	}
+
+	public unapply(editor: Editor) {
+		this.getComponent(editor).forceStyle(this.originalStyle, editor);
+	}
+
+	public description(editor: Editor, localizationTable: EditorLocalization): string {
+		return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
+	}
+
+	protected serializeToJSON() {
+		return {
+			id: this.componentID,
+			originalStyle: serializeComponentStyle(this.originalStyle),
+			newStyle: serializeComponentStyle(this.newStyle),
+		};
+	}
+
+	static {
+		SerializableCommand.register(defaultRestyleComponentCommandId, (json: any, _editor: Editor) => {
+			const origStyle = deserializeComponentStyle(json.originalStyle);
+			const newStyle = deserializeComponentStyle(json.newStyle);
+			const id = json.id;
+			if (typeof json.id !== 'string') {
+				throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
+			}
+
+			return new DefaultRestyleComponentCommand(
+				origStyle,
+				newStyle,
+				id,
+			);
+		});
+	}
+}

package/src/components/SVGGlobalAttributesObject.ts

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

@@ -0,0 +1,139 @@
+import Color4 from '../Color4';
+import Path from '../math/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'));
+	});
+});