js-draw 0.3.0 → 0.3.2

package/src/toolbar/types.ts

@@ -2,4 +2,4 @@
 export interface ActionButtonIcon {
 	icon: Element;
 	label: string;
-}
+}

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import { InputEvtType } from '../../types';
+import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
@@ -14,6 +14,7 @@ export default abstract class BaseWidget {
 	#hasDropdown: boolean;
 	private disabled: boolean = false;
 	private subWidgets: BaseWidget[] = [];
+	private toplevel: boolean = true;
 
 	public constructor(
 		protected editor: Editor,
@@ -46,6 +47,7 @@ export default abstract class BaseWidget {
 
 		for (const widget of this.subWidgets) {
 			widget.addTo(dropdown);
+			widget.setIsToplevel(false);
 		}
 		return true;
 	}
@@ -103,6 +105,7 @@ export default abstract class BaseWidget {
 	}
 
 	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
+	// @internal
 	public addTo(parent: HTMLElement) {
 		this.label.innerText = this.getTitle();
 
@@ -119,6 +122,19 @@ export default abstract class BaseWidget {
 			this.dropdownIcon = this.createDropdownIcon();
 			this.button.appendChild(this.dropdownIcon);
 			this.container.appendChild(this.dropdownContainer);
+
+			this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+				if (
+					evt.kind === EditorEventType.ToolbarDropdownShown
+					&& evt.parentWidget !== this
+
+					// Don't hide if a submenu wash shown (it might be a submenu of
+					// the current menu).
+					&& evt.parentWidget.toplevel
+				) {
+					this.setDropdownVisible(false);
+				}
+			});
 		}
 
 		this.setDropdownVisible(false);
@@ -171,6 +187,11 @@ export default abstract class BaseWidget {
 			this.editor.announceForAccessibility(
 				this.localizationTable.dropdownShown(this.getTitle())
 			);
+
+			this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+				kind: EditorEventType.ToolbarDropdownShown,
+				parentWidget: this,
+			});
 		} else {
 			this.dropdownContainer.classList.add('hidden');
 			this.container.classList.remove('dropdownVisible');
@@ -195,6 +216,11 @@ export default abstract class BaseWidget {
 		}
 	}
 
+	/** Set whether the widget is contained within another. @internal */
+	protected setIsToplevel(toplevel: boolean) {
+		this.toplevel = toplevel;
+	}
+
 	protected isDropdownVisible(): boolean {
 		return !this.dropdownContainer.classList.contains('hidden');
 	}

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;
 	}
@@ -56,5 +64,13 @@ export default abstract class BaseTool implements PointerEvtListener {
 
 		this.group = group;
 	}
+
+	public getToolGroup(): ToolEnabledGroup|null {
+		if (this.group) {
+			return this.group;
+		}
+
+		return null;
+	}
 }
 

package/src/tools/PasteHandler.ts

@@ -0,0 +1,156 @@
+/**
+ * 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';
+import TextTool from './TextTool';
+import Color4 from '../Color4';
+import { TextStyle } from '../components/Text';
+import ImageComponent from '../components/ImageComponent';
+
+// { @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;
+
+		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

@@ -3,7 +3,7 @@ import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Pointer, { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { EditorEventType, PointerEvt, StrokeDataPoint } from '../types';
+import { EditorEventType, KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 
@@ -159,4 +159,23 @@ export default class Pen extends BaseTool {
 	public getThickness() { return this.style.thickness; }
 	public getColor() { return this.style.color; }
 	public getStrokeFactory() { return this.builderFactory; }
+
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		key = key.toLowerCase();
+
+		let newThickness: number|undefined;
+		if (key === '-' || key === '_') {
+			newThickness = this.getThickness() * 2/3;
+		} else if (key === '+' || key === '=') {
+			newThickness = this.getThickness() * 3/2;
+		}
+
+		if (newThickness !== undefined) {
+			newThickness = Math.min(Math.max(1, newThickness), 128);
+			this.setThickness(newThickness);
+			return true;
+		}
+
+		return false;
+	}
 }

package/src/tools/SelectionTool.ts

@@ -11,10 +11,11 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
 import { EditorLocalization } from '../localization';
-import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
+import { CopyEvent, EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import SerializableCommand from '../commands/SerializableCommand';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 
 const handleScreenSize = 30;
 const styles = `
@@ -381,6 +382,16 @@ class Selection {
 		this.region = Rect2.empty;
 	}
 
+	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
+		this.region = bbox;
+		this.selectedElems = objects;
+		this.updateUI();
+	}
+
+	public getSelectedObjects(): AbstractComponent[] {
+		return this.selectedElems;
+	}
+
 	// Find the objects corresponding to this in the document,
 	// select them.
 	// Returns false iff nothing was selected.
@@ -528,15 +539,19 @@ export default class SelectionTool extends BaseTool {
 		this.editor.handleKeyEventsFrom(this.handleOverlay);
 	}
 
+	private makeSelectionBox(selectionStartPos: Point2) {
+		this.prevSelectionBox = this.selectionBox;
+		this.selectionBox = new Selection(
+			selectionStartPos, this.editor
+		);
+		// Remove any previous selection rects
+		this.handleOverlay.replaceChildren();
+		this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+	}
+
 	public onPointerDown(event: PointerEvt): boolean {
 		if (event.allPointers.length === 1 && event.current.isPrimary) {
-			this.prevSelectionBox = this.selectionBox;
-			this.selectionBox = new Selection(
-				event.current.canvasPos, this.editor
-			);
-			// Remove any previous selection rects
-			this.handleOverlay.replaceChildren();
-			this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+			this.makeSelectionBox(event.current.canvasPos);
 
 			return true;
 		}
@@ -679,6 +694,12 @@ export default class SelectionTool extends BaseTool {
 			this.selectionBox.transformPreview(transform);
 		}
 
+		if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
+			this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
+			this.clearSelection();
+			handled = true;
+		}
+
 		return handled;
 	}
 
@@ -690,6 +711,35 @@ export default class SelectionTool extends BaseTool {
 		return false;
 	}
 
+	public onCopy(event: CopyEvent): boolean {
+		if (!this.selectionBox) {
+			return false;
+		}
+
+		const selectedElems = this.selectionBox.getSelectedObjects();
+		const bbox = this.selectionBox.region;
+		if (selectedElems.length === 0) {
+			return false;
+		}
+
+		const exportViewport = new Viewport(this.editor.notifier);
+		exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
+		exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
+
+		const svgNameSpace = 'http://www.w3.org/2000/svg';
+		const exportElem = document.createElementNS(svgNameSpace, 'svg');
+
+		const sanitize = true;
+		const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+
+		for (const elem of selectedElems) {
+			elem.render(renderer);
+		}
+
+		event.setData('image/svg+xml', exportElem.outerHTML);
+		return true;
+	}
+
 	public setEnabled(enabled: boolean) {
 		super.setEnabled(enabled);
 
@@ -712,6 +762,28 @@ export default class SelectionTool extends BaseTool {
 		return this.selectionBox;
 	}
 
+	public setSelection(objects: AbstractComponent[]) {
+		let bbox: Rect2|null = null;
+		for (const object of objects) {
+			if (bbox) {
+				bbox = bbox.union(object.getBBox());
+			} else {
+				bbox = object.getBBox();
+			}
+		}
+
+		if (!bbox) {
+			return;
+		}
+
+		this.clearSelection();
+		if (!this.selectionBox) {
+			this.makeSelectionBox(bbox.topLeft);
+		}
+
+		this.selectionBox!.setSelectedObjects(objects, bbox);
+	}
+
 	public clearSelection() {
 		this.handleOverlay.replaceChildren();
 		this.prevSelectionBox = this.selectionBox;

package/src/tools/ToolController.ts

@@ -11,31 +11,32 @@ import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
+import ToolSwitcherShortcut from './ToolSwitcherShortcut';
+import PasteHandler from './PasteHandler';
 
 export default class ToolController {
 	private tools: BaseTool[];
 	private activeTool: BaseTool|null = null;
 	private primaryToolGroup: ToolEnabledGroup;
-
+	
 	/** @internal */
 	public constructor(editor: Editor, localization: ToolLocalization) {
 		const primaryToolGroup = new ToolEnabledGroup();
 		this.primaryToolGroup = primaryToolGroup;
-
+		
 		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
 		const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
 		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
 		const primaryTools = [
-			new SelectionTool(editor, localization.selectionTool),
-			new Eraser(editor, localization.eraserTool),
-
 			// Three pens
 			primaryPenTool,
 			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
-
+			
 			// Highlighter-like pen with width=64
 			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
-
+			
+			new Eraser(editor, localization.eraserTool),
+			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
 		];
 		this.tools = [
@@ -44,11 +45,13 @@ export default class ToolController {
 			...primaryTools,
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
+			new ToolSwitcherShortcut(editor),
+			new PasteHandler(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
 		panZoomTool.setEnabled(true);
 		primaryPenTool.setEnabled(true);
-
+		
 		editor.notifier.on(EditorEventType.ToolEnabled, event => {
 			if (event.kind === EditorEventType.ToolEnabled) {
 				editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
@@ -59,17 +62,17 @@ export default class ToolController {
 				editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
 			}
 		});
-
+		
 		this.activeTool = null;
 	}
-
+	
 	// Replaces the current set of tools with `tools`. This should only be done before
 	// the creation of the app's toolbar (if using `HTMLToolbar`).
 	public setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup) {
 		this.tools = tools;
 		this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
 	}
-
+	
 	// Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
 	// This should be called before creating the app's toolbar.
 	public addPrimaryTool(tool: BaseTool) {
@@ -77,16 +80,22 @@ export default class ToolController {
 		if (tool.isEnabled()) {
 			this.primaryToolGroup.notifyEnabled(tool);
 		}
-
+		
 		this.addTool(tool);
 	}
-
+	
+	public getPrimaryTools(): BaseTool[] {
+		return this.tools.filter(tool => {
+			return tool.getToolGroup() === this.primaryToolGroup;
+		});
+	}
+	
 	// Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
 	// This should be called before creating the app's toolbar.
 	public addTool(tool: BaseTool) {
 		this.tools.push(tool);
 	}
-
+	
 	// Returns true if the event was handled
 	public dispatchInputEvent(event: InputEvt): boolean {
 		let handled = false;
@@ -96,7 +105,7 @@ export default class ToolController {
 					if (this.activeTool !== tool) {
 						this.activeTool?.onGestureCancel();
 					}
-
+					
 					this.activeTool = tool;
 					handled = true;
 					break;
@@ -106,49 +115,54 @@ export default class ToolController {
 			this.activeTool?.onPointerUp(event);
 			this.activeTool = null;
 			handled = true;
-		} else if (
-			event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent || event.kind === InputEvtType.KeyUpEvent
-		) {
-			const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
-			const isKeyReleaseEvt = event.kind === InputEvtType.KeyUpEvent;
-			const isWheelEvt = event.kind === InputEvtType.WheelEvt;
+		} else if (event.kind === InputEvtType.PointerMoveEvt) {
+			if (this.activeTool !== null) {
+				this.activeTool.onPointerMove(event);
+				handled = true;
+			}
+		} else if (event.kind === InputEvtType.GestureCancelEvt) {
+			if (this.activeTool !== null) {
+				this.activeTool.onGestureCancel();
+				this.activeTool = null;	
+			}
+		} else {
+			let allCasesHandledGuard: never;
+
 			for (const tool of this.tools) {
 				if (!tool.isEnabled()) {
 					continue;
 				}
-
-				const wheelResult = isWheelEvt && tool.onWheel(event);
-				const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
-				const keyReleaseResult = isKeyReleaseEvt && tool.onKeyUp(event);
-				handled = keyPressResult || wheelResult || keyReleaseResult;
+				
+				switch (event.kind) {
+				case InputEvtType.KeyPressEvent:
+					handled = tool.onKeyPress(event);
+					break;
+				case InputEvtType.KeyUpEvent:
+					handled = tool.onKeyUp(event);
+					break;
+				case InputEvtType.WheelEvt:
+					handled = tool.onWheel(event);
+					break;
+				case InputEvtType.CopyEvent:
+					handled = tool.onCopy(event);
+					break;
+				case InputEvtType.PasteEvent:
+					handled = tool.onPaste(event);
+					break;
+				default:
+					allCasesHandledGuard = event;
+					return allCasesHandledGuard;
+				}
 
 				if (handled) {
 					break;
 				}
 			}
-		} else if (this.activeTool !== null) {
-			let allCasesHandledGuard: never;
-
-			switch (event.kind) {
-			case InputEvtType.PointerMoveEvt:
-				this.activeTool.onPointerMove(event);
-				break;
-			case InputEvtType.GestureCancelEvt:
-				this.activeTool.onGestureCancel();
-				this.activeTool = null;
-				break;
-			default:
-				allCasesHandledGuard = event;
-				return allCasesHandledGuard;
-			}
-			handled = true;
-		} else {
-			handled = false;
 		}
-
+		
 		return handled;
 	}
-
+	
 	public getMatchingTools<Type extends BaseTool>(type: new (...args: any[])=>Type): Type[] {
 		return this.tools.filter(tool => tool instanceof type) as Type[];
 	}

package/src/tools/ToolSwitcherShortcut.ts

@@ -0,0 +1,34 @@
+// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
+// @packageDocumentation
+
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+// {@inheritDoc ToolSwitcherShortcut!}
+export default class ToolSwitcherShortcut extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.changeTool);
+	}
+	
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		const toolController = this.editor.toolController;
+		const primaryTools = toolController.getPrimaryTools();
+
+		// Map keys 0-9 to primary tools.
+		const keyMatch = /^[0-9]$/.exec(key);
+
+		let targetTool: BaseTool|undefined;
+		if (keyMatch) {
+			const targetIdx = parseInt(keyMatch[0], 10) - 1;
+			targetTool = primaryTools[targetIdx];
+		}
+
+		if (targetTool) {
+			targetTool.setEnabled(true);
+			return true;
+		}
+
+		return false;
+	}
+}

package/src/tools/lib.ts

@@ -8,10 +8,12 @@ export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
 
 export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';