js-draw 0.3.1 → 0.4.0

package/src/rendering/renderers/DummyRenderer.ts

@@ -7,7 +7,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 export default class DummyRenderer extends AbstractRenderer {
 	// Variables that track the state of what's been rendered
@@ -17,6 +17,7 @@ export default class DummyRenderer extends AbstractRenderer {
 	public lastPoint: Point2|null = null;
 	public objectNestingLevel: number = 0;
 	public lastText: string|null = null;
+	public lastImage: RenderableImage|null = null;
 
 	// List of points drawn since the last clear.
 	public pointBuffer: Point2[] = [];
@@ -44,6 +45,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.renderedPathCount = 0;
 		this.pointBuffer = [];
 		this.lastText = null;
+		this.lastImage = null;
 
 		// Ensure all objects finished rendering
 		if (this.objectNestingLevel > 0) {
@@ -96,6 +98,9 @@ export default class DummyRenderer extends AbstractRenderer {
 	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
 		this.lastText = text;
 	}
+	public drawImage(image: RenderableImage) {
+		this.lastImage = image;
+	}
 
 	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);

package/src/rendering/renderers/SVGRenderer.ts

@@ -9,7 +9,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
@@ -19,13 +19,18 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	private overwrittenAttrs: Record<string, string|null> = {};
 
-	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
+	// Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+	public constructor(private elem: SVGSVGElement, viewport: Viewport, private sanitize: boolean = false) {
 		super(viewport);
 		this.clear();
 	}
 
 	// Sets an attribute on the root SVG element.
 	public setRootSVGAttribute(name: string, value: string|null) {
+		if (this.sanitize) {
+			return;
+		}
+	
 		// Make the original value of the attribute restorable on clear
 		if (!(name in this.overwrittenAttrs)) {
 			this.overwrittenAttrs[name] = this.elem.getAttribute(name);
@@ -43,18 +48,21 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	public clear() {
-		// Restore all alltributes
-		for (const attrName in this.overwrittenAttrs) {
-			const value = this.overwrittenAttrs[attrName];
-
-			if (value) {
-				this.elem.setAttribute(attrName, value);
-			} else {
-				this.elem.removeAttribute(attrName);
+		this.lastPathString = [];
+
+		if (!this.sanitize) {
+			// Restore all all attributes
+			for (const attrName in this.overwrittenAttrs) {
+				const value = this.overwrittenAttrs[attrName];
+
+				if (value) {
+					this.elem.setAttribute(attrName, value);
+				} else {
+					this.elem.removeAttribute(attrName);
+				}
 			}
+			this.overwrittenAttrs = {};
 		}
-		this.overwrittenAttrs = {};
-		this.lastPathString = [];
 	}
 
 	// Push [this.fullPath] to the SVG
@@ -91,26 +99,31 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPathString.push(path.toString());
 	}
 
-	public drawText(text: string, transform: Mat33, style: TextStyle): void {
-		transform = this.getCanvasToScreenTransform().rightMul(transform);
-
+	// Apply [elemTransform] to [elem].
+	private transformFrom(elemTransform: Mat33, elem: SVGElement) {
+		let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
 		const translation = transform.transformVec2(Vec2.zero);
 		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
 
-		const textElem = document.createElementNS(svgNameSpace, 'text');
-		textElem.appendChild(document.createTextNode(text));
-		textElem.style.transform = `matrix(
+		elem.style.transform = `matrix(
 			${transform.a1}, ${transform.b1},
 			${transform.a2}, ${transform.b2},
 			${transform.a3}, ${transform.b3}
 		)`;
+		elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+		elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+	}
+
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		const textElem = document.createElementNS(svgNameSpace, 'text');
+		textElem.appendChild(document.createTextNode(text));
+		this.transformFrom(transform, textElem);
+
 		textElem.style.fontFamily = style.fontFamily;
 		textElem.style.fontVariant = style.fontVariant ?? '';
 		textElem.style.fontWeight = style.fontWeight ?? '';
 		textElem.style.fontSize = style.size + 'px';
 		textElem.style.fill = style.renderingStyle.fill.toHexString();
-		textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
-		textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
 
 		if (style.renderingStyle.stroke) {
 			const strokeStyle = style.renderingStyle.stroke;
@@ -122,6 +135,18 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(textElem);
 	}
 
+	public drawImage(image: RenderableImage) {
+		const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+		svgImgElem.setAttribute('href', image.base64Url);
+		svgImgElem.setAttribute('width', image.image.getAttribute('width') ?? '');
+		svgImgElem.setAttribute('height', image.image.getAttribute('height') ?? '');
+		svgImgElem.setAttribute('aria-label', image.image.getAttribute('aria-label') ?? image.image.getAttribute('alt') ?? '');
+		this.transformFrom(image.transform, svgImgElem);
+
+		this.elem.appendChild(svgImgElem);
+		this.objectElems?.push(svgImgElem);
+	}
+
 	public startObject(boundingBox: Rect2) {
 		super.startObject(boundingBox);
 
@@ -137,7 +162,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		// Don't extend paths across objects
 		this.addPathToSVG();
 
-		if (loaderData) {
+		if (loaderData && !this.sanitize) {
 			// Restore any attributes unsupported by the app.
 			for (const elem of this.objectElems ?? []) {
 				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
@@ -181,6 +206,10 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	// Renders a **copy** of the given element.
 	public drawSVGElem(elem: SVGElement) {
+		if (this.sanitize) {
+			return;
+		}
+
 		this.elem.appendChild(elem.cloneNode(true));
 	}
 

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -6,7 +6,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 // Outputs a description of what was rendered.
 
@@ -14,6 +14,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	private descriptionBuilder: string[] = [];
 	private pathCount: number = 0;
 	private textNodeCount: number = 0;
+	private imageNodeCount: number = 0;
 
 	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
 		super(viewport);
@@ -33,7 +34,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	public getDescription(): string {
 		return [
 			this.localizationTable.pathNodeCount(this.pathCount),
-			this.localizationTable.textNodeCount(this.textNodeCount),
+			...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
+			...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
 			...this.descriptionBuilder
 		].join('\n');
 	}
@@ -55,6 +57,12 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 		this.descriptionBuilder.push(this.localizationTable.textNode(text));
 		this.textNodeCount ++;
 	}
+	public drawImage(image: RenderableImage) {
+		const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+
+		this.descriptionBuilder.push(label);
+		this.imageNodeCount ++;
+	}
 	public isTooSmallToRender(rect: Rect2): boolean {
 		return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
 	}

package/src/toolbar/HTMLToolbar.ts

@@ -3,19 +3,20 @@ import { EditorEventType } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import { makeRedoIcon, makeUndoIcon } from './icons';
-import PanZoom from '../tools/PanZoom';
+import SelectionTool from '../tools/SelectionTool/SelectionTool';
+import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
+import EraserTool from '../tools/Eraser';
+import PenTool from '../tools/Pen';
 import PenToolWidget from './widgets/PenToolWidget';
 import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
-import { EraserTool, PenTool } from '../tools/lib';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -200,7 +201,7 @@ export default class HTMLToolbar {
 			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+		const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
 		if (panZoomTool) {
 			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import SelectionTool from '../../tools/SelectionTool';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { EditorEventType } from '../../types';
 import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';

package/src/tools/BaseTool.ts

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
 import ToolEnabledGroup from './ToolEnabledGroup';
 
 export default abstract class BaseTool implements PointerEvtListener {
@@ -17,6 +17,14 @@ export default abstract class BaseTool implements PointerEvtListener {
 		return false;
 	}
 
+	public onCopy(_event: CopyEvent): boolean {
+		return false;
+	}
+
+	public onPaste(_event: PasteEvent): boolean {
+		return false;
+	}
+
 	public onKeyPress(_event: KeyPressEvent): boolean {
 		return false;
 	}

package/src/tools/PasteHandler.ts

@@ -0,0 +1,159 @@
+/**
+ * A tool that handles paste events.
+ * @packageDocumentation
+ */
+
+import Editor from '../Editor';
+import { AbstractComponent, TextComponent } from '../components/lib';
+import { Command, uniteCommands } from '../commands/lib';
+import SVGLoader from '../SVGLoader';
+import { PasteEvent } from '../types';
+import { Mat33, Rect2, Vec2 } from '../math/lib';
+import BaseTool from './BaseTool';
+import EditorImage from '../EditorImage';
+import SelectionTool from './SelectionTool/SelectionTool';
+import TextTool from './TextTool';
+import Color4 from '../Color4';
+import { TextStyle } from '../components/Text';
+import ImageComponent from '../components/ImageComponent';
+import Viewport from '../Viewport';
+
+// { @inheritDoc PasteHandler! }
+export default class PasteHandler extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.pasteHandler);
+	}
+
+	public onPaste(event: PasteEvent): boolean {
+		const mime = event.mime.toLowerCase();
+
+		if (mime === 'image/svg+xml') {
+			void this.doSVGPaste(event.data);
+			return true;
+		}
+		else if (mime === 'text/plain') {
+			void this.doTextPaste(event.data);
+			return true;
+		}
+		else if (mime === 'image/png' || mime === 'image/jpeg') {
+			void this.doImagePaste(event.data);
+			return true;
+		}
+
+		return false;
+	}
+
+	private async addComponentsFromPaste(components: AbstractComponent[]) {
+		let bbox: Rect2|null = null;
+		for (const component of components) {
+			if (bbox) {
+				bbox = bbox.union(component.getBBox());
+			} else {
+				bbox = component.getBBox();
+			}
+		}
+
+		if (!bbox) {
+			return;
+		}
+
+		// Find a transform that scales/moves bbox onto the screen.
+		const visibleRect = this.editor.viewport.visibleRect;
+		const scaleRatioX = visibleRect.width / bbox.width;
+		const scaleRatioY = visibleRect.height / bbox.height;
+
+		let scaleRatio = scaleRatioX;
+		if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+			scaleRatio = scaleRatioY;
+		}
+		scaleRatio *= 2 / 3;
+
+		scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+
+		const transfm = Mat33.translation(
+			visibleRect.center.minus(bbox.center)
+		).rightMul(
+			Mat33.scaling2D(scaleRatio, bbox.center)
+		);
+
+		const commands: Command[] = [];
+		for (const component of components) {
+			// To allow deserialization, we need to add first, then transform.
+			commands.push(EditorImage.addElement(component));
+			commands.push(component.transformBy(transfm));
+		}
+
+		const applyChunkSize = 100;
+		this.editor.dispatch(uniteCommands(commands, applyChunkSize), true);
+
+		for (const selectionTool of this.editor.toolController.getMatchingTools(SelectionTool)) {
+			selectionTool.setEnabled(true);
+			selectionTool.setSelection(components);
+		}
+	}
+
+	private async doSVGPaste(data: string) {
+		const sanitize = true;
+		const loader = SVGLoader.fromString(data, sanitize);
+
+		const components: AbstractComponent[] = [];
+
+		await loader.start((component) => {
+			components.push(component);
+		},
+		(_countProcessed: number, _totalToProcess: number) => null);
+
+		await this.addComponentsFromPaste(components);
+	}
+
+	private async doTextPaste(text: string) {
+		const textTools = this.editor.toolController.getMatchingTools(TextTool);
+
+		textTools.sort((a, b) => {
+			if (!a.isEnabled() && b.isEnabled()) {
+				return -1;
+			}
+
+			if (!b.isEnabled() && a.isEnabled()) {
+				return 1;
+			}
+
+			return 0;
+		});
+
+		const defaultTextStyle: TextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+		const pastedTextStyle: TextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
+
+		const lines = text.split('\n');
+		let lastComponent: TextComponent|null = null;
+		const components: TextComponent[] = [];
+
+		for (const line of lines) {
+			let position = Vec2.zero;
+			if (lastComponent) {
+				const lineMargin = Math.floor(pastedTextStyle.size);
+				position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+			}
+
+			const component = new TextComponent([ line ], Mat33.translation(position), pastedTextStyle);
+			components.push(component);
+			lastComponent = component;
+		}
+
+		if (components.length === 1) {
+			await this.addComponentsFromPaste([ components[0] ]);
+		} else {
+			// Wrap the existing `TextComponent`s --- dragging one component should drag all.
+			await this.addComponentsFromPaste([
+				new TextComponent(components, Mat33.identity, pastedTextStyle)
+			]);
+		}
+	}
+
+	private async doImagePaste(dataURL: string) {
+		const image = new Image();
+		image.src = dataURL;
+		const component = await ImageComponent.fromImage(image, Mat33.identity);
+		await this.addComponentsFromPaste([ component ]);
+	}
+}

package/src/tools/Pen.ts

@@ -171,7 +171,7 @@ export default class Pen extends BaseTool {
 		}
 
 		if (newThickness !== undefined) {
-			newThickness = Math.min(Math.max(1, newThickness), 128);
+			newThickness = Math.min(Math.max(1, newThickness), 256);
 			this.setThickness(newThickness);
 			return true;
 		}