js-draw 0.5.0 → 0.6.0

package/dist/src/toolbar/widgets/TextToolWidget.js

@@ -1,6 +1,5 @@
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeTextIcon } from '../icons';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 export default class TextToolWidget extends BaseToolWidget {
@@ -21,7 +20,7 @@ export default class TextToolWidget extends BaseToolWidget {
     }
     createIcon() {
         const textStyle = this.tool.getTextStyle();
-        return makeTextIcon(textStyle);
+        return this.editor.icons.makeTextIcon(textStyle);
     }
     fillDropdown(dropdown) {
         const fontRow = document.createElement('div');

package/dist/src/tools/PanZoom.d.ts

@@ -35,7 +35,7 @@ export default class PanZoom extends BaseTool {
     onGestureCancel(): void;
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
-    onKeyPress({ key }: KeyPressEvent): boolean;
+    onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean;
     setMode(mode: PanZoomMode): void;
     getMode(): PanZoomMode;
 }

package/dist/src/tools/PanZoom.js

@@ -134,10 +134,13 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate, true);
         return true;
     }
-    onKeyPress({ key }) {
+    onKeyPress({ key, ctrlKey, altKey }) {
         if (!(this.mode & PanZoomMode.Keyboard)) {
             return false;
         }
+        if (ctrlKey || altKey) {
+            return false;
+        }
         // No need to keep the same the transform for keyboard events.
         this.transform = Viewport.transformBy(Mat33.identity);
         let translation = Vec2.zero;

package/dist/src/tools/SelectionTool/SelectionTool.d.ts

@@ -10,6 +10,8 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     private lastEvtTarget;
+    private expandingSelectionBox;
+    private shiftKeyPressed;
     constructor(editor: Editor, description: string);
     private makeSelectionBox;
     private selectionBoxHandlingEvt;
@@ -26,6 +28,7 @@ export default class SelectionTool extends BaseTool {
     onCopy(event: CopyEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    getSelectedObjects(): AbstractComponent[];
     setSelection(objects: AbstractComponent[]): void;
     clearSelection(): void;
 }

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -16,6 +16,8 @@ export default class SelectionTool extends BaseTool {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastEvtTarget = null;
+        this.expandingSelectionBox = false;
+        this.shiftKeyPressed = false;
         this.selectionBoxHandlingEvt = false;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
@@ -34,10 +36,13 @@ export default class SelectionTool extends BaseTool {
         });
     }
     makeSelectionBox(selectionStartPos) {
+        var _a;
         this.prevSelectionBox = this.selectionBox;
         this.selectionBox = new Selection(selectionStartPos, this.editor);
-        // Remove any previous selection rects
-        this.handleOverlay.replaceChildren();
+        if (!this.expandingSelectionBox) {
+            // Remove any previous selection rects
+            (_a = this.prevSelectionBox) === null || _a === void 0 ? void 0 : _a.cancelSelection();
+        }
         this.selectionBox.addTo(this.handleOverlay);
     }
     onPointerDown(event) {
@@ -45,8 +50,11 @@ export default class SelectionTool extends BaseTool {
         if (event.allPointers.length === 1 && event.current.isPrimary) {
             if (this.lastEvtTarget && ((_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragStart(event.current, this.lastEvtTarget))) {
                 this.selectionBoxHandlingEvt = true;
+                this.expandingSelectionBox = false;
             }
             else {
+                // Shift key: Combine the new and old selection boxes at the end of the gesture.
+                this.expandingSelectionBox = this.shiftKeyPressed;
                 this.makeSelectionBox(event.current.canvasPos);
             }
             return true;
@@ -81,6 +89,7 @@ export default class SelectionTool extends BaseTool {
             this.selectionBox = null;
         }
     }
+    // Called after a gestureCancel and a pointerUp
     onGestureEnd() {
         this.lastEvtTarget = null;
         if (!this.selectionBox)
@@ -105,7 +114,19 @@ export default class SelectionTool extends BaseTool {
         if (!this.selectionBox)
             return;
         this.selectionBox.setToPoint(event.current.canvasPos);
-        this.onGestureEnd();
+        // Were we expanding the previous selection?
+        if (this.expandingSelectionBox && this.prevSelectionBox) {
+            // If so, finish expanding.
+            this.expandingSelectionBox = false;
+            this.selectionBox.resolveToObjects();
+            this.setSelection([
+                ...this.selectionBox.getSelectedObjects(),
+                ...this.prevSelectionBox.getSelectedObjects(),
+            ]);
+        }
+        else {
+            this.onGestureEnd();
+        }
     }
     onGestureCancel() {
         var _a, _b, _c;
@@ -118,8 +139,28 @@ export default class SelectionTool extends BaseTool {
             this.selectionBox = this.prevSelectionBox;
             (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
         }
+        this.expandingSelectionBox = false;
     }
     onKeyPress(event) {
+        if (this.selectionBox && event.ctrlKey && event.key === 'd') {
+            // Handle duplication on key up — we don't want to accidentally duplicate
+            // many times.
+            return true;
+        }
+        else if (event.key === 'a' && event.ctrlKey) {
+            // Handle ctrl+A on key up.
+            // Return early to prevent 'a' from moving the selection/view.
+            return true;
+        }
+        else if (event.ctrlKey) {
+            // Don't transform the selection with, for example, ctrl+i.
+            // Pass it to another tool, if apliccable.
+            return false;
+        }
+        else if (event.key === 'Shift') {
+            this.shiftKeyPressed = true;
+            return true;
+        }
         let rotationSteps = 0;
         let xTranslateSteps = 0;
         let yTranslateSteps = 0;
@@ -194,6 +235,20 @@ export default class SelectionTool extends BaseTool {
         return handled;
     }
     onKeyUp(evt) {
+        if (evt.key === 'Shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
+        else if (evt.ctrlKey) {
+            if (this.selectionBox && evt.key === 'd') {
+                this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+                return true;
+            }
+            else if (evt.key === 'a') {
+                this.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
             return true;
@@ -244,10 +299,18 @@ export default class SelectionTool extends BaseTool {
         }
     }
     // Get the object responsible for displaying this' selection.
+    // @internal
     getSelection() {
         return this.selectionBox;
     }
+    getSelectedObjects() {
+        var _a, _b;
+        return (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedObjects()) !== null && _b !== void 0 ? _b : [];
+    }
+    // Select the given `objects`. Any non-selectable objects in `objects` are ignored.
     setSelection(objects) {
+        // Only select selectable objects.
+        objects = objects.filter(obj => obj.isSelectable());
         let bbox = null;
         for (const object of objects) {
             if (bbox) {

package/dist/src/tools/ToolController.js

@@ -29,6 +29,7 @@ export default class ToolController {
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
+            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
         ];
         this.tools = [
             new PipetteTool(editor, localization.pipetteTool),

package/dist/src/tools/localization.d.ts

@@ -12,6 +12,7 @@ export interface ToolLocalization {
     enterTextToInsert: string;
     changeTool: string;
     pasteHandler: string;
+    anyDevicePanning: string;
     copied: (count: number, description: string) => string;
     pasted: (count: number, description: string) => string;
     toolEnabledAnnouncement: (toolName: string) => string;

package/dist/src/tools/localization.js

@@ -12,6 +12,7 @@ export const defaultToolLocalization = {
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',
     pasteHandler: 'Copy paste handler',
+    anyDevicePanning: 'Any device panning',
     copied: (count, description) => `Copied ${count} ${description}`,
     pasted: (count, description) => `Pasted ${count} ${description}`,
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.ts

@@ -37,6 +37,7 @@ import Mat33 from './math/Mat33';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
+import IconProvider from './toolbar/IconProvider';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -58,6 +59,8 @@ export interface EditorSettings {
 	/** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
 	minZoom: number,
 	maxZoom: number,
+
+	iconProvider: IconProvider,
 }
 
 // { @inheritDoc Editor! }
@@ -101,22 +104,23 @@ export class Editor {
 	 * editor.dispatch(addElementCommand);
 	 * ```
 	 */
-	public image: EditorImage;
+	public readonly image: EditorImage;
 
 	/** Viewport for the exported/imported image. */
 	private importExportViewport: Viewport;
 
 	/** @internal */
-	public localization: EditorLocalization;
+	public readonly localization: EditorLocalization;
 
-	public viewport: Viewport;
-	public toolController: ToolController;
+	public readonly icons: IconProvider;
+	public readonly viewport: Viewport;
+	public readonly toolController: ToolController;
 
 	/**
 	 * Global event dispatcher/subscriber.
 	 * @see {@link types.EditorEventType}
 	 */
-	public notifier: EditorNotifier;
+	public readonly notifier: EditorNotifier;
 
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
@@ -164,7 +168,9 @@ export class Editor {
 			localization: this.localization,
 			minZoom: settings.minZoom ?? 2e-10,
 			maxZoom: settings.maxZoom ?? 1e12,
+			iconProvider: settings.iconProvider ?? new IconProvider(),
 		};
+		this.icons = this.settings.iconProvider;
 
 		this.container = document.createElement('div');
 		this.renderingRegion = document.createElement('div');

package/src/EditorImage.ts

@@ -54,6 +54,15 @@ export default class EditorImage {
 		}
 	}
 
+	/** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+	public getAllElements() {
+		const leaves = this.root.getLeaves();
+		sortLeavesByZIndex(leaves);
+
+		return leaves.map(leaf => leaf.getContent()!);
+	}
+
+	/** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
 	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
 		const leaves = this.root.getLeavesIntersectingRegion(region);
 		sortLeavesByZIndex(leaves);

package/src/SVGLoader.test.ts

@@ -0,0 +1,37 @@
+import { Rect2, TextComponent, Vec2 } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('SVGLoader', () => {
+	it('should correctly load x/y-positioned text nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>Testing...</text>
+				<text y=100>Test 2...</text>
+				<text x=100>Test 3...</text>
+				<text x=100 y=100>Test 3...</text>
+		
+				<!-- Transform matrix: translate by (100,0) -->
+				<text style='transform: matrix(1,0,0,1,100,0);'>Test 3...</text>
+			</svg>
+		`, true));
+		const elems = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent);
+		expect(elems).toHaveLength(5);
+		const topLefts = elems.map(elem => elem.getBBox().topLeft);
+
+		// Top-left of Testing... should be (0, 0) ± 10 pixels (objects are aligned based on baseline)
+		expect(topLefts[0]).objEq(Vec2.of(0, 0), 10);
+
+		expect(topLefts[1].y - topLefts[0].y).toBe(100);
+		expect(topLefts[1].x - topLefts[0].x).toBe(0);
+
+		expect(topLefts[2].y - topLefts[0].y).toBe(0);
+		expect(topLefts[2].x - topLefts[0].x).toBe(100);
+
+		expect(topLefts[4].x - topLefts[0].x).toBe(100);
+		expect(topLefts[4].y - topLefts[0].y).toBe(0);
+	});
+});

package/src/SVGLoader.ts

@@ -124,7 +124,7 @@ export default class SVGLoader implements ImageLoader {
 			);
 		}
 
-		if (supportedStyleAttrs) {
+		if (supportedStyleAttrs && node.style) {
 			for (const attr of node.style) {
 				if (attr === '' || !attr) {
 					continue;
@@ -198,9 +198,9 @@ export default class SVGLoader implements ImageLoader {
 
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');
-		if (elemX && elemY) {
-			const x = parseFloat(elemX);
-			const y = parseFloat(elemY);
+		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)));
@@ -245,7 +245,7 @@ export default class SVGLoader implements ImageLoader {
 			size: fontSize,
 			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
 			renderingStyle: {
-				fill: Color4.fromString(computedStyles.fill)
+				fill: Color4.fromString(computedStyles.fill || elem.style.fill || '#000')
 			},
 		};
 
@@ -406,7 +406,6 @@ export default class SVGLoader implements ImageLoader {
 		this.onFinish?.();
 	}
 
-	// TODO: Handling unsafe data! Tripple-check that this is secure!
 	// @param sanitize - if `true`, don't store unknown attributes.
 	public static fromString(text: string, sanitize: boolean = false): SVGLoader {
 		const sandbox = document.createElement('iframe');

package/src/components/AbstractComponent.ts

@@ -89,6 +89,11 @@ export default abstract class AbstractComponent {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
 	}
 
+	// @returns true iff this component can be selected (e.g. by the selection tool.)
+	public isSelectable(): boolean {
+		return true;
+	}
+
 	private static transformElementCommandId = 'transform-element';
 
 	private static UnresolvedTransformElementCommand = class extends SerializableCommand {

package/src/components/SVGGlobalAttributesObject.ts

@@ -43,6 +43,10 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	public isSelectable() {
+		return false;
+	}
+
 	protected createClone() {
 		return new SVGGlobalAttributesObject(this.attrs);
 	}

package/src/components/Text.test.ts

@@ -1,21 +1,8 @@
 import Color4 from '../Color4';
 import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
 import Text, { TextStyle } from './Text';
 
-const estimateTextBounds = (text: string, style: TextStyle): Rect2 => {
-	const widthEst = text.length * style.size;
-	const heightEst = style.size;
-
-	// Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
-	// be above (0, 0).
-	return new Rect2(0, -heightEst * 2/3, widthEst, heightEst);
-};
-
-// Don't use the default Canvas-based text bounding code. The canvas-based code may not work
-// with jsdom.
-AbstractComponent.registerComponent('text', (data: string) => Text.deserializeFromString(data, estimateTextBounds));
 
 describe('Text', () => {
 	it('should be serializable', () => {
@@ -24,9 +11,7 @@ describe('Text', () => {
 			fontFamily: 'serif',
 			renderingStyle: { fill: Color4.black },
 		};
-		const text = new Text(
-			[ 'Foo' ], Mat33.identity, style, estimateTextBounds
-		);
+		const text = new Text([ 'Foo' ], Mat33.identity, style);
 		const serialized = text.serialize();
 		const deserialized = AbstractComponent.deserialize(serialized) as Text;
 		expect(deserialized.getBBox()).objEq(text.getBBox());

package/src/components/Text.ts

@@ -14,8 +14,6 @@ export interface TextStyle {
 	renderingStyle: RenderingStyle;
 }
 
-type GetTextDimensCallback = (text: string, style: TextStyle) => Rect2;
-
 const componentTypeId = 'text';
 export default class Text extends AbstractComponent {
 	protected contentBBox: Rect2;
@@ -24,10 +22,6 @@ export default class Text extends AbstractComponent {
 		protected readonly textObjects: Array<string|Text>,
 		private transform: Mat33,
 		private readonly style: TextStyle,
-
-		// If not given, an HtmlCanvasElement is used to determine text boundaries.
-		// @internal
-		private readonly getTextDimens: GetTextDimensCallback = Text.getTextDimens,
 	) {
 		super(componentTypeId);
 		this.recomputeBBox();
@@ -47,9 +41,25 @@ export default class Text extends AbstractComponent {
 		ctx.textAlign = 'left';
 	}
 
-	private static textMeasuringCtx: CanvasRenderingContext2D;
+	private static textMeasuringCtx: CanvasRenderingContext2D|null = null;
+
+	// Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
+	private static estimateTextDimens(text: string, style: TextStyle): Rect2 {
+		const widthEst = text.length * style.size;
+		const heightEst = style.size;
+
+		// Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
+		// be above (0, 0).
+		return new Rect2(0, -heightEst * 2/3, widthEst, heightEst);
+	}
+
+	// Returns the bounding box of `text`. This is approximate if no Canvas is available.
 	private static getTextDimens(text: string, style: TextStyle): Rect2 {
-		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
+		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d') ?? null;
+		if (!Text.textMeasuringCtx) {
+			return this.estimateTextDimens(text, style);
+		}
+
 		const ctx = Text.textMeasuringCtx;
 		Text.applyTextStyles(ctx, style);
 
@@ -63,7 +73,7 @@ export default class Text extends AbstractComponent {
 
 	private computeBBoxOfPart(part: string|Text) {
 		if (typeof part === 'string') {
-			const textBBox = this.getTextDimens(part, this.style);
+			const textBBox = Text.getTextDimens(part, this.style);
 			return textBBox.transformedBoundingBox(this.transform);
 		} else {
 			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
@@ -178,7 +188,7 @@ export default class Text extends AbstractComponent {
 		};
 	}
 
-	public static deserializeFromString(json: any, getTextDimens: GetTextDimensCallback = Text.getTextDimens): Text {
+	public static deserializeFromString(json: any): Text {
 		const style: TextStyle = {
 			renderingStyle: styleFromJSON(json.style.renderingStyle),
 			size: json.style.size,
@@ -203,7 +213,7 @@ export default class Text extends AbstractComponent {
 		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
-		return new Text(textObjects, transform, style, getTextDimens);
+		return new Text(textObjects, transform, style);
 	}
 }
 

package/src/components/UnknownSVGObject.ts

@@ -37,6 +37,10 @@ export default class UnknownSVGObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	public isSelectable() {
+		return false;
+	}
+
 	protected createClone(): AbstractComponent {
 		return new UnknownSVGObject(this.svgObject.cloneNode(true) as SVGElement);
 	}

package/src/components/builders/FreehandLineBuilder.ts

@@ -415,8 +415,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 
 		let enteringVec = this.lastExitingVec;
 		if (!enteringVec) {
-			let sampleIdx = Math.ceil(this.buffer.length / 3);
-			if (sampleIdx === 0) {
+			let sampleIdx = Math.ceil(this.buffer.length / 2);
+			if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
 				sampleIdx = this.buffer.length - 1;
 			}
 

package/src/testing/beforeEachFile.ts

@@ -1,3 +1,8 @@
 import loadExpectExtensions from './loadExpectExtensions';
 loadExpectExtensions();
-jest.useFakeTimers();
+jest.useFakeTimers();
+
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/src/toolbar/HTMLToolbar.ts

@@ -5,7 +5,6 @@ import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
-import { makeRedoIcon, makeUndoIcon } from './icons';
 import SelectionTool from '../tools/SelectionTool/SelectionTool';
 import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
@@ -156,13 +155,13 @@ export default class HTMLToolbar {
 
 		const undoButton = this.addActionButton({
 			label: this.localizationTable.undo,
-			icon: makeUndoIcon()
+			icon: this.editor.icons.makeUndoIcon()
 		}, () => {
 			this.editor.history.undo();
 		}, undoRedoGroup);
 		const redoButton = this.addActionButton({
 			label: this.localizationTable.redo,
-			icon: makeRedoIcon(),
+			icon: this.editor.icons.makeRedoIcon(),
 		}, () => {
 			this.editor.history.redo();
 		}, undoRedoGroup);