js-draw 0.25.0 → 1.0.0

package/src/components/BackgroundComponent.ts

@@ -1,353 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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,
-			);
-		});
-	}
-}