js-draw 0.23.0 → 0.24.0

package/src/components/BackgroundComponent.ts

@@ -0,0 +1,353 @@
+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 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';
+
+export enum BackgroundType {
+	SolidColor,
+	Grid,
+	None,
+}
+
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+
+// Class name prefix indicating the size of the background's grid cells (if present).
+export const imageBackgroundGridSizeCSSPrefix = 'js-draw-image-background-grid-';
+
+// Flag included in rendered SVGs (etc) that indicates that the secondary color of the
+// background has been manually set.
+export const imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
+
+export const backgroundTypeToClassNameMap = {
+	[BackgroundType.Grid]: 'js-draw-image-background-grid',
+	[BackgroundType.SolidColor]: imageBackgroundCSSClassName,
+	[BackgroundType.None]: '',
+};
+
+// Represents the background of the editor's canvas.
+export default class BackgroundComponent extends AbstractComponent implements RestyleableComponent {
+	protected contentBBox: Rect2;
+	private viewportSizeChangeListener: DispatcherEventListener|null = null;
+
+	private gridSize: number = Viewport.getGridSize(2);
+	private gridStrokeWidth: number = 0.7;
+	private secondaryColor: Color4|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 static ofGrid(
+		backgroundColor: Color4, gridSize?: number, gridColor?: Color4, gridStrokeWidth?: number
+	) {
+		const background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
+
+		if (gridSize !== undefined) {
+			background.gridSize = gridSize;
+		}
+
+		if (gridColor !== undefined) {
+			background.secondaryColor = gridColor;
+		}
+
+		if (gridStrokeWidth !== undefined) {
+			background.gridStrokeWidth = gridStrokeWidth;
+		}
+
+		return background;
+	}
+
+	public getBackgroundType() {
+		return this.backgroundType;
+	}
+
+	// @internal
+	public getMainColor() {
+		return this.mainColor;
+	}
+
+	// @internal
+	public getSecondaryColor() {
+		return this.secondaryColor;
+	}
+
+	// @internal
+	public getGridSize() {
+		return this.gridSize;
+	}
+
+	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;
+
+		// A solid background and transparent fill is equivalent to no background.
+		if (fill.eq(Color4.transparent) && this.backgroundType === BackgroundType.SolidColor) {
+			this.backgroundType = BackgroundType.None;
+		} else if (this.backgroundType === BackgroundType.None) {
+			this.backgroundType = BackgroundType.SolidColor;
+		}
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
+	}
+
+	public override 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 override 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);
+		}
+	}
+
+	private generateGridPath(visibleRect?: Rect2) {
+		const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(this.contentBBox) ?? this.contentBBox;
+
+		const roundDownToGrid = (coord: number) => Math.floor(coord / this.gridSize) * this.gridSize;
+		const roundUpToGrid = (coord: number) => Math.ceil(coord / this.gridSize) * this.gridSize;
+
+		const startY = roundUpToGrid(targetRect.y);
+		const endY = roundDownToGrid(targetRect.y + targetRect.h);
+		const startX = roundUpToGrid(targetRect.x);
+		const endX = roundDownToGrid(targetRect.x + targetRect.w);
+
+		const result: PathCommand[] = [];
+
+		// Don't generate grids with a huge number of rows/columns -- such grids
+		// take a long time to render and are likely invisible due to the number of
+		// cells.
+		const rowCount = (endY - startY) / this.gridSize;
+		const colCount = (endX - startX) / this.gridSize;
+		const maxGridCols = 1000;
+		const maxGridRows = 1000;
+		if (rowCount > maxGridRows || colCount > maxGridCols) {
+			return Path.empty;
+		}
+
+		const startPoint = Vec2.of(targetRect.x, startY);
+		for (let y = startY; y <= endY; y += this.gridSize) {
+			result.push({
+				kind: PathCommandType.MoveTo,
+				point: Vec2.of(targetRect.x, y),
+			});
+			result.push({
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(targetRect.x + targetRect.w, y),
+			});
+		}
+
+		for (let x = startX; x <= endX; x += this.gridSize) {
+			result.push({
+				kind: PathCommandType.MoveTo,
+				point: Vec2.of(x, targetRect.y),
+			});
+			result.push({
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(x, targetRect.y + targetRect.h)
+			});
+		}
+
+		return new Path(startPoint, result);
+	}
+
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2) {
+		if (this.backgroundType === BackgroundType.None) {
+			return;
+		}
+		const clip = this.backgroundType === BackgroundType.Grid;
+		canvas.startObject(this.contentBBox, clip);
+
+		if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
+			// 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);
+			}
+		}
+
+		if (this.backgroundType === BackgroundType.Grid) {
+			let gridColor = this.secondaryColor;
+			gridColor ??= Color4.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2);
+
+			// If the background fill is completely transparent, ensure visibility on otherwise light
+			// and dark backgrounds.
+			if (this.mainColor.a === 0) {
+				gridColor = Color4.ofRGBA(0.5, 0.5, 0.5, 0.2);
+			}
+
+			const style = {
+				fill: Color4.transparent,
+				stroke: { width: this.gridStrokeWidth, color: gridColor }
+			};
+			canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+		}
+
+		const backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];
+		const classNames = [ imageBackgroundCSSClassName ];
+
+		if (backgroundTypeCSSClass !== imageBackgroundCSSClassName) {
+			classNames.push(backgroundTypeCSSClass);
+
+			const gridSizeStr = toRoundedString(this.gridSize).replace(/[.]/g, 'p');
+			classNames.push(imageBackgroundGridSizeCSSPrefix + gridSizeStr);
+		}
+
+		if (this.secondaryColor !== null) {
+			classNames.push(imageBackgroundNonAutomaticSecondaryColorCSSClassName);
+		}
+
+		canvas.endObject(this.getLoadSaveData(), classNames);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+	}
+
+	public override isSelectable(): boolean {
+		return false;
+	}
+
+	public override isBackground(): boolean {
+		return true;
+	}
+
+	protected serializeToJSON() {
+		return {
+			mainColor: this.mainColor.toHexString(),
+			secondaryColor: this.secondaryColor?.toHexString(),
+			backgroundType: this.backgroundType,
+			gridSize: this.gridSize,
+			gridStrokeWidth: this.gridStrokeWidth,
+		};
+	}
+
+	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 if (this.backgroundType === BackgroundType.None) {
+			return localizationTable.emptyBackground;
+		} else if (this.backgroundType === BackgroundType.Grid) {
+			return localizationTable.gridBackground;
+		} else {
+			const exhaustivenessCheck: never = this.backgroundType;
+			return exhaustivenessCheck;
+		}
+	}
+
+	protected createClone(): AbstractComponent {
+		return new BackgroundComponent(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.');
+		}
+
+		let backgroundType;
+		const jsonBackgroundType = json.backgroundType as BackgroundType;
+
+		if (
+			jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
+			|| jsonBackgroundType === BackgroundType.SolidColor
+		) {
+			backgroundType = jsonBackgroundType;
+		} else {
+			const exhaustivenessCheck: never = jsonBackgroundType;
+			return exhaustivenessCheck;
+		}
+
+		const mainColor = Color4.fromHex(json.mainColor);
+		const secondaryColor = json.secondaryColor ? Color4.fromHex(json.secondaryColor) : null;
+		const gridSize: number|undefined = json.gridSize ?? undefined;
+		const gridStrokeWidth: number|undefined = json.gridStrokeWidth ?? undefined;
+
+		const result = new BackgroundComponent(backgroundType, mainColor);
+		result.secondaryColor = secondaryColor;
+		if (gridSize) {
+			result.gridSize = gridSize;
+		}
+		if (gridStrokeWidth) {
+			result.gridStrokeWidth = gridStrokeWidth;
+		}
+
+		return result;
+	}
+}
+
+AbstractComponent.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

package/src/components/ImageComponent.ts

@@ -0,0 +1,178 @@
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33, { Mat33Array } from '../math/Mat33';
+import Rect2 from '../math/shapes/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import { assertIsNumber, assertIsNumberArray } from '../util/assertions';
+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 override render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
+		canvas.drawImage(this.image);
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	public override getProportionalRenderingTime(): number {
+		// Estimate: Equivalent to a stroke with 10 segments.
+		return 10;
+	}
+
+	public override 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 applyTransformation(affineTransfm: Mat33) {
+		this.image.transform = affineTransfm.rightMul(this.image.transform);
+		this.recomputeBBox();
+	}
+
+	public override 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 override createClone(): AbstractComponent {
+		return new ImageComponent({
+			...this.image,
+		});
+	}
+
+	protected override 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(),
+		};
+	}
+
+	public static deserializeFromJSON(data: any): ImageComponent {
+		if (!(typeof data.src === 'string')) {
+			throw new Error(`${data} has invalid format! Expected src property.`);
+		}
+
+		assertIsNumberArray(data.transform);
+		assertIsNumber(data.width);
+		assertIsNumber(data.height);
+
+		const image = new Image();
+		image.src = data.src;
+		image.width = data.width;
+		image.height = data.height;
+
+		const transform = new Mat33(...(data.transform as Mat33Array));
+
+		return new ImageComponent({
+			image: image,
+			base64Url: data.src,
+			label: data.label,
+			transform,
+		});
+	}
+}
+
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

package/src/components/RestylableComponent.ts

@@ -0,0 +1,161 @@
+import Color4 from '../Color4';
+import SerializableCommand from '../commands/SerializableCommand';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import TextRenderingStyle, { textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
+import AbstractComponent from './AbstractComponent';
+
+export interface ComponentStyle {
+	color?: Color4;
+	textStyle?: TextRenderingStyle;
+}
+
+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;
+};
+
+/**
+ * An interface to be implemented by components with a changable color or {@link TextRenderingStyle}.
+ *
+ * All such classes must have a member variable, `isRestylableComponent` that is set to `true`
+ * to allow testing whether the class is a `RestylableComponent` (see {@link isRestylableComponent}).
+ */
+export interface RestyleableComponent extends AbstractComponent {
+	/**
+	 * @returns a partial representation of this component's style.
+	 */
+	getStyle(): ComponentStyle;
+
+	/**
+	 * Returns a {@link Command} that updates portions of this component's style
+	 * to the given `style`.
+	 *
+	 * @example
+	 * For some component and editor,
+	 * ```ts
+	 * editor.dispatch(component.updateStyle({ color: Color4.red }));
+	 * ```
+	 */
+	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,
+			);
+		});
+	}
+}