js-draw 0.25.0 → 1.0.0

package/src/SVGLoader.ts

@@ -1,610 +0,0 @@
-import Color4 from './Color4';
-import AbstractComponent from './components/AbstractComponent';
-import BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName } from './components/BackgroundComponent';
-import ImageComponent from './components/ImageComponent';
-import Stroke from './components/Stroke';
-import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent, { TextTransformMode } from './components/TextComponent';
-import UnknownSVGObject from './components/UnknownSVGObject';
-import Mat33 from './math/Mat33';
-import Path from './math/shapes/Path';
-import Rect2 from './math/shapes/Rect2';
-import { Vec2 } from './math/Vec2';
-import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
-import RenderingStyle from './rendering/RenderingStyle';
-import TextRenderingStyle from './rendering/TextRenderingStyle';
-import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
-
-type OnFinishListener = ()=> void;
-
-// Size of a loaded image if no size is specified.
-export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
-
-// Key to retrieve unrecognised attributes from an AbstractComponent
-export const svgAttributesDataKey = 'svgAttrs';
-export const svgStyleAttributesDataKey = 'svgStyleAttrs';
-
-// [key, value]
-export type SVGLoaderUnknownAttribute = [ string, string ];
-
-// [key, value, priority]
-export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
-
-
-const supportedStrokeFillStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
-
-// Handles loading images from SVG.
-export default class SVGLoader implements ImageLoader {
-	private onAddComponent: ComponentAddedListener|null = null;
-	private onProgress: OnProgressListener|null = null;
-	private onDetermineExportRect: OnDetermineExportRectListener|null = null;
-
-	private processedCount: number = 0;
-	private totalToProcess: number = 0;
-	private rootViewBox: Rect2|null;
-
-	private constructor(
-		private source: SVGSVGElement, private onFinish?: OnFinishListener, private readonly storeUnknown: boolean = true) {
-	}
-
-	// If [computedStyles] is given, it is preferred to directly accessing node's style object.
-	private getStyle(node: SVGElement, computedStyles?: CSSStyleDeclaration) {
-		let fill = Color4.transparent;
-		let stroke;
-
-		// If possible, use computedStyles (allows property inheritance).
-		const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style.fill;
-		if (fillAttribute) {
-			try {
-				fill = Color4.fromString(fillAttribute);
-			} catch (e) {
-				console.error('Unknown fill color,', fillAttribute);
-			}
-		}
-
-		const strokeAttribute = node.getAttribute('stroke') ?? computedStyles?.stroke ?? node.style.stroke;
-		const strokeWidthAttr = node.getAttribute('stroke-width') ?? computedStyles?.strokeWidth ?? node.style.strokeWidth;
-		if (strokeAttribute && strokeWidthAttr) {
-			try {
-				let width = parseFloat(strokeWidthAttr ?? '1');
-				if (!isFinite(width)) {
-					width = 0;
-				}
-
-				const strokeColor = Color4.fromString(strokeAttribute);
-
-				if (strokeColor.a > 0) {
-					stroke = {
-						width,
-						color: strokeColor,
-					};
-				}
-			} catch (e) {
-				console.error('Error parsing stroke data:', e);
-			}
-		}
-
-		const style: RenderingStyle = {
-			fill,
-			stroke,
-		};
-		return style;
-	}
-
-	private strokeDataFromElem(node: SVGPathElement): RenderablePathSpec[] {
-		const result: RenderablePathSpec[] = [];
-		const pathData = node.getAttribute('d') ?? '';
-		const style = this.getStyle(node);
-
-		// Break the path into chunks at each moveTo ('M') command:
-		const parts = pathData.split('M');
-		let isFirst = true;
-		for (const part of parts) {
-			// Skip effective no-ops -- moveTos without additional commands.
-			const isNoOpMoveTo = /^[0-9., \t\n]+$/.exec(part);
-
-			if (part !== '' && !isNoOpMoveTo) {
-				// We split the path by moveTo commands, so add the 'M' back in
-				// if it was present.
-				const current = !isFirst ? `M${part}` : part;
-
-				const path = Path.fromString(current);
-				const spec = path.toRenderable(style);
-				result.push(spec);
-			}
-
-			isFirst = false;
-		}
-
-		return result;
-	}
-
-	private attachUnrecognisedAttrs(
-		elem: AbstractComponent,
-		node: SVGElement,
-		supportedAttrs: Set<string>,
-		supportedStyleAttrs?: Set<string>
-	) {
-		if (!this.storeUnknown) {
-			return;
-		}
-
-		for (const attr of node.getAttributeNames()) {
-			if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
-				continue;
-			}
-
-			elem.attachLoadSaveData(svgAttributesDataKey,
-				[ attr, node.getAttribute(attr) ] as SVGLoaderUnknownAttribute,
-			);
-		}
-
-		if (supportedStyleAttrs && node.style) {
-			for (const attr of node.style) {
-				if (attr === '' || !attr) {
-					continue;
-				}
-
-				if (supportedStyleAttrs.has(attr)) {
-					continue;
-				}
-
-				// TODO: Do we need special logic for !important properties?
-				elem.attachLoadSaveData(svgStyleAttributesDataKey,
-					{
-						key: attr,
-						value: node.style.getPropertyValue(attr),
-						priority: node.style.getPropertyPriority(attr)
-					} as SVGLoaderUnknownStyleAttribute
-				);
-			}
-		}
-	}
-
-	// Adds a stroke with a single path
-	private async addPath(node: SVGPathElement) {
-		let elem: AbstractComponent;
-		try {
-			const strokeData = this.strokeDataFromElem(node);
-
-			elem = new Stroke(strokeData);
-
-			this.attachUnrecognisedAttrs(
-				elem, node,
-				new Set([ ...supportedStrokeFillStyleAttrs, 'd' ]),
-				new Set(supportedStrokeFillStyleAttrs)
-			);
-		} catch (e) {
-			console.error(
-				'Invalid path in node', node,
-				'\nError:', e,
-				'\nAdding as an unknown object.'
-			);
-
-			if (this.storeUnknown) {
-				elem = new UnknownSVGObject(node);
-			} else {
-				return;
-			}
-		}
-		await this.onAddComponent?.(elem);
-	}
-
-	private async addBackground(node: SVGElement) {
-		// If a grid background,
-		if (node.classList.contains(backgroundTypeToClassNameMap[BackgroundType.Grid])) {
-			let foregroundStr: string|null;
-			let backgroundStr: string|null;
-			let gridStrokeWidthStr: string|null;
-
-			// If a group,
-			if (node.tagName.toLowerCase() === 'g') {
-				// We expect exactly two children. One of these is the solid
-				// background of the grid
-				if (node.children.length !== 2) {
-					await this.addUnknownNode(node);
-					return;
-				}
-
-				const background = node.children[0];
-				const grid = node.children[1];
-
-				backgroundStr = background.getAttribute('fill');
-				foregroundStr = grid.getAttribute('stroke');
-				gridStrokeWidthStr = grid.getAttribute('stroke-width');
-			} else {
-				backgroundStr = node.getAttribute('fill');
-				foregroundStr = node.getAttribute('stroke');
-				gridStrokeWidthStr = node.getAttribute('stroke-width');
-			}
-
-			// Default to a transparent background.
-			backgroundStr ??= Color4.transparent.toHexString();
-
-			// A grid must have a foreground color specified.
-			if (!foregroundStr) {
-				await this.addUnknownNode(node);
-				return;
-			}
-
-			// Extract the grid size from the class name
-			let gridSize: number|undefined = undefined;
-			for (const className of node.classList) {
-				if (className.startsWith(imageBackgroundGridSizeCSSPrefix)) {
-					const sizeStr = className.substring(imageBackgroundGridSizeCSSPrefix.length);
-					gridSize = parseFloat(sizeStr.replace(/p/g, '.'));
-				}
-			}
-
-			let gridStrokeWidth: number|undefined = undefined;
-			if (gridStrokeWidthStr) {
-				gridStrokeWidth = parseFloat(gridStrokeWidthStr);
-			}
-
-			const backgroundColor = Color4.fromString(backgroundStr);
-			let foregroundColor: Color4|undefined = Color4.fromString(foregroundStr);
-
-			// Should the foreground color be determined automatically?
-			if (!node.classList.contains(imageBackgroundNonAutomaticSecondaryColorCSSClassName)) {
-				foregroundColor = undefined;
-			}
-
-			const elem = BackgroundComponent.ofGrid(
-				backgroundColor, gridSize, foregroundColor, gridStrokeWidth
-			);
-			await this.onAddComponent?.(elem);
-		}
-		// Otherwise, if just a <path/>, it's a solid color background.
-		else if (node.tagName.toLowerCase() === 'path') {
-			const fill = Color4.fromString(node.getAttribute('fill') ?? node.style.fill ?? 'black');
-			const elem = new BackgroundComponent(BackgroundType.SolidColor, fill);
-			await this.onAddComponent?.(elem);
-		}
-		else {
-			await this.addUnknownNode(node);
-		}
-	}
-
-	// If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
-	// to prevent storing duplicate transform information when saving the component.
-	private getTransform(elem: SVGElement, supportedAttrs?: string[], computedStyles?: CSSStyleDeclaration): Mat33 {
-		computedStyles ??= window.getComputedStyle(elem);
-
-		let transformProperty = computedStyles.transform;
-		if (transformProperty === '' || transformProperty === 'none') {
-			transformProperty = elem.style.transform || 'none';
-		}
-
-		// Prefer the actual .style.transform
-		// to the computed stylesheet -- in some browsers, the computedStyles version
-		// can have lower precision.
-		let transform;
-		try {
-			transform = Mat33.fromCSSMatrix(elem.style.transform);
-		} catch(_e) {
-			transform = Mat33.fromCSSMatrix(transformProperty);
-		}
-
-		const elemX = elem.getAttribute('x');
-		const elemY = elem.getAttribute('y');
-		if (elemX || elemY) {
-			const x = parseFloat(elemX ?? '0');
-			const y = parseFloat(elemY ?? '0');
-			if (!isNaN(x) && !isNaN(y)) {
-				supportedAttrs?.push('x', 'y');
-				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
-			}
-		}
-
-		return transform;
-	}
-
-	private makeText(elem: SVGTextElement|SVGTSpanElement): TextComponent {
-		const contentList: Array<TextComponent|string> = [];
-		for (const child of elem.childNodes) {
-			if (child.nodeType === Node.TEXT_NODE) {
-				contentList.push(child.nodeValue ?? '');
-			} else if (child.nodeType === Node.ELEMENT_NODE) {
-				const subElem = child as SVGElement;
-				if (subElem.tagName.toLowerCase() === 'tspan') {
-					// FIXME: tspan's (x, y) components are absolute, not relative to the parent.
-					contentList.push(this.makeText(subElem as SVGTSpanElement));
-				} else {
-					throw new Error(`Unrecognized text child element: ${subElem}`);
-				}
-			} else {
-				throw new Error(`Unrecognized text child node: ${child}.`);
-			}
-		}
-
-		// If no content, the content is an empty string.
-		if (contentList.length === 0) {
-			contentList.push('');
-		}
-
-		// Compute styles.
-		const computedStyles = window.getComputedStyle(elem);
-		const fontSizeExp = /^([-0-9.e]+)px/i;
-
-		// In some environments, computedStyles.fontSize can be increased by the system.
-		// Thus, to prevent text from growing on load/save, prefer .style.fontSize.
-		let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
-		if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
-			// Try to inherit the font size of the parent text element.
-			fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
-		}
-
-		// If we still couldn't find a font size, try to use computedStyles (which can be
-		// wrong).
-		if (!fontSizeMatch) {
-			fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
-		}
-
-		const supportedStyleAttrs = [
-			'fontFamily',
-			'transform',
-			...supportedStrokeFillStyleAttrs,
-		];
-		let fontSize = 12;
-		if (fontSizeMatch) {
-			supportedStyleAttrs.push('fontSize');
-			fontSize = parseFloat(fontSizeMatch[1]);
-		}
-		const style: TextRenderingStyle = {
-			size: fontSize,
-			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-			fontWeight: computedStyles.fontWeight || elem.style.fontWeight || undefined,
-			fontStyle: computedStyles.fontStyle || elem.style.fontStyle || undefined,
-			renderingStyle: this.getStyle(elem, computedStyles),
-		};
-
-		const supportedAttrs: string[] = [];
-		let transform = this.getTransform(elem, supportedAttrs, computedStyles);
-		let transformMode = TextTransformMode.ABSOLUTE_XY;
-
-		const elemDX = elem.getAttribute('dx');
-		if (elemDX) {
-			transformMode = TextTransformMode.RELATIVE_X_ABSOLUTE_Y;
-			transform = transform.rightMul(Mat33.translation(Vec2.of(parseFloat(elemDX), 0)));
-			supportedAttrs.push('dx');
-		}
-
-		const elemDY = elem.getAttribute('dy');
-		if (elemDY) {
-			if (transformMode === TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {
-				transformMode = TextTransformMode.RELATIVE_XY;
-			} else {
-				transformMode = TextTransformMode.RELATIVE_Y_ABSOLUTE_X;
-			}
-
-			transform = transform.rightMul(Mat33.translation(Vec2.of(0, parseFloat(elemDY))));
-			supportedAttrs.push('dy');
-		}
-
-		const result = new TextComponent(contentList, transform, style, transformMode);
-		this.attachUnrecognisedAttrs(
-			result,
-			elem,
-			new Set(supportedAttrs),
-			new Set(supportedStyleAttrs)
-		);
-
-		return result;
-	}
-
-	private async addText(elem: SVGTextElement|SVGTSpanElement) {
-		try {
-			const textElem = this.makeText(elem);
-			await this.onAddComponent?.(textElem);
-		} catch (e) {
-			console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
-			this.addUnknownNode(elem);
-		}
-	}
-
-	private async addImage(elem: SVGImageElement) {
-		const image = new Image();
-		image.src = elem.getAttribute('xlink:href') ?? elem.href.baseVal;
-		image.setAttribute('alt', elem.getAttribute('aria-label') ?? '');
-
-		try {
-			const supportedAttrs: string[] = [];
-			const transform = this.getTransform(elem, supportedAttrs);
-			const imageElem = await ImageComponent.fromImage(image, transform);
-			this.attachUnrecognisedAttrs(
-				imageElem,
-				elem,
-				new Set(supportedAttrs),
-				new Set([ 'transform' ])
-			);
-
-			await this.onAddComponent?.(imageElem);
-		} catch (e) {
-			console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
-			await this.addUnknownNode(elem);
-		}
-	}
-
-	private async addUnknownNode(node: SVGElement) {
-		if (this.storeUnknown) {
-			const component = new UnknownSVGObject(node);
-			await this.onAddComponent?.(component);
-		}
-	}
-
-	private updateViewBox(node: SVGSVGElement) {
-		const viewBoxAttr = node.getAttribute('viewBox');
-		if (this.rootViewBox || !viewBoxAttr) {
-			return;
-		}
-
-		const components = viewBoxAttr.split(/[ \t\n,]+/);
-		const x = parseFloat(components[0]);
-		const y = parseFloat(components[1]);
-		const width = parseFloat(components[2]);
-		const height = parseFloat(components[3]);
-
-		if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
-			console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
-			return;
-		}
-
-		this.rootViewBox = new Rect2(x, y, width, height);
-		this.onDetermineExportRect?.(this.rootViewBox);
-	}
-
-	private async updateSVGAttrs(node: SVGSVGElement) {
-		if (this.storeUnknown) {
-			await this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
-		}
-	}
-
-	private async visit(node: Element) {
-		this.totalToProcess += node.childElementCount;
-		let visitChildren = true;
-
-		switch (node.tagName.toLowerCase()) {
-		case 'g':
-			if (node.classList.contains(imageBackgroundCSSClassName)) {
-				await this.addBackground(node as SVGElement);
-				visitChildren = false;
-			}
-			// Otherwise, continue -- visit the node's children.
-			break;
-		case 'path':
-			if (node.classList.contains(imageBackgroundCSSClassName)) {
-				await this.addBackground(node as SVGElement);
-			} else {
-				await this.addPath(node as SVGPathElement);
-			}
-			break;
-		case 'text':
-			await this.addText(node as SVGTextElement);
-			visitChildren = false;
-			break;
-		case 'image':
-			await this.addImage(node as SVGImageElement);
-
-			// Images should not have children.
-			visitChildren = false;
-			break;
-		case 'svg':
-			this.updateViewBox(node as SVGSVGElement);
-			this.updateSVGAttrs(node as SVGSVGElement);
-			break;
-		case 'style':
-			await this.addUnknownNode(node as SVGStyleElement);
-			break;
-		default:
-			console.warn('Unknown SVG element,', node);
-			if (!(node instanceof SVGElement)) {
-				console.warn(
-					'Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.'
-				);
-			}
-
-			await this.addUnknownNode(node as SVGElement);
-			return;
-		}
-
-		if (visitChildren) {
-			for (const child of node.children) {
-				await this.visit(child);
-			}
-		}
-
-		this.processedCount ++;
-		await this.onProgress?.(this.processedCount, this.totalToProcess);
-	}
-
-	// Get SVG element attributes (e.g. xlink=...)
-	private getSourceAttrs(node: SVGSVGElement): Array<[string, string|null]> {
-		return node.getAttributeNames().map(attr => {
-			return [ attr, node.getAttribute(attr) ];
-		});
-	}
-
-	public async start(
-		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener,
-		onDetermineExportRect: OnDetermineExportRectListener|null = null
-	): Promise<void> {
-		this.onAddComponent = onAddComponent;
-		this.onProgress = onProgress;
-		this.onDetermineExportRect = onDetermineExportRect;
-
-		// Estimate the number of tags to process.
-		this.totalToProcess = this.source.childElementCount;
-		this.processedCount = 0;
-
-		this.rootViewBox = null;
-		await this.visit(this.source);
-
-		const viewBox = this.rootViewBox;
-
-		if (!viewBox) {
-			this.onDetermineExportRect?.(defaultSVGViewRect);
-		}
-
-		this.onFinish?.();
-	}
-
-	/**
-	 * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
-	 * iframe with `sandbox="allow-same-origin"`
-	 * [thereby disabling JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
-	 *
-	 * @see {@link Editor.loadFrom}
-	 * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
-	 * @param sanitize - if `true`, don't store unknown attributes.
-	 */
-	public static fromString(text: string, sanitize: boolean = false): SVGLoader {
-		const sandbox = document.createElement('iframe');
-		sandbox.src = 'about:blank';
-		sandbox.setAttribute('sandbox', 'allow-same-origin');
-		sandbox.setAttribute('csp', 'default-src \'about:blank\'');
-		sandbox.style.display = 'none';
-
-		// Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
-		document.body.appendChild(sandbox);
-
-		if (!sandbox.hasAttribute('sandbox')) {
-			sandbox.remove();
-			throw new Error('SVG loading iframe is not sandboxed.');
-		}
-
-		const sandboxDoc = sandbox.contentWindow?.document ?? sandbox.contentDocument;
-		if (sandboxDoc == null) throw new Error('Unable to open a sandboxed iframe!');
-
-		sandboxDoc.open();
-		sandboxDoc.write(`
-			<!DOCTYPE html>
-			<html>
-				<head>
-					<title>SVG Loading Sandbox</title>
-					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
-					<meta charset='utf-8'/>
-				</head>
-				<body style='font-size: 12px;'>
-					<script>
-						console.error('JavaScript should not be able to run here!');
-						throw new Error(
-							'The SVG sandbox is broken! Please double-check the sandboxing setting.'
-						);
-					</script>
-				</body>
-			</html>
-		`);
-		sandboxDoc.close();
-
-		const svgElem = sandboxDoc.createElementNS(
-			'http://www.w3.org/2000/svg', 'svg'
-		);
-		svgElem.innerHTML = text;
-		sandboxDoc.body.appendChild(svgElem);
-
-		return new SVGLoader(svgElem, () => {
-			svgElem.remove();
-			sandbox.remove();
-		}, !sanitize);
-	}
-}

package/src/UndoRedoHistory.test.ts

@@ -1,33 +0,0 @@
-
-import { Color4, EditorImage, Path, Stroke, Mat33, Vec2 } from './lib';
-import createEditor from './testing/createEditor';
-
-describe('UndoRedoHistory', () => {
-	it('should keep history size below maximum', () => {
-		const editor = createEditor();
-		const stroke = new Stroke([ Path.fromString('m0,0 10,10').toRenderable({ fill: Color4.red }) ]);
-		editor.dispatch(EditorImage.addElement(stroke));
-
-		for (let i = 0; i < editor.history['maxUndoRedoStackSize'] + 10; i++) {
-			editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(1, 1))));
-		}
-
-		expect(editor.history.undoStackSize).toBeLessThan(editor.history['maxUndoRedoStackSize']);
-		expect(editor.history.undoStackSize).toBeGreaterThan(editor.history['maxUndoRedoStackSize'] / 10);
-		expect(editor.history.redoStackSize).toBe(0);
-
-		const origUndoStackSize = editor.history.undoStackSize;
-		while (editor.history.undoStackSize > 0) {
-			editor.history.undo();
-		}
-
-		// After undoing as much as possible, the stroke should still be present
-		expect(editor.image.findParent(stroke)).not.toBe(null);
-
-		// Undoing again shouldn't cause issues.
-		editor.history.undo();
-		expect(editor.image.findParent(stroke)).not.toBe(null);
-
-		expect(editor.history.redoStackSize).toBe(origUndoStackSize);
-	});
-});