js-draw 0.18.2 → 0.20.0

package/src/components/ImageBackground.ts

@@ -1,176 +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/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

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

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

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

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