js-draw 0.25.1 → 1.0.1

package/src/rendering/caching/types.ts

@@ -1,6 +1,6 @@
-import { Vec2 } from '../../math/Vec2';
-import AbstractRenderer from '../renderers/AbstractRenderer';
-import { CacheRecordManager } from './CacheRecordManager';
+import type { Vec2 } from '@js-draw/math';
+import type AbstractRenderer from '../renderers/AbstractRenderer';
+import type { CacheRecordManager } from './CacheRecordManager';
 
 
 export type CacheAddress = number;

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,19 +1,9 @@
-import Color4 from '../../Color4';
+import { Color4, Mat33, Point2, Vec2, Rect2, Path, PathCommandType } from '@js-draw/math';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import Mat33 from '../../math/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle, { stylesEqual } from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';
-
-export interface RenderablePathSpec {
-	startPoint: Point2;
-	commands: PathCommand[];
-	style: RenderingStyle;
-	path?: Path;
-}
+import RenderablePathSpec, { pathToRenderable } from '../RenderablePathSpec';
 
 export interface RenderableImage {
 	transform: Mat33;
@@ -138,13 +128,13 @@ export default abstract class AbstractRenderer {
 	// This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
 	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle) {
 		const path = Path.fromRect(rect, lineWidth);
-		this.drawPath(path.toRenderable(lineFill));
+		this.drawPath(pathToRenderable(path, lineFill));
 	}
 
 	/** Draws a filled rectangle. */
 	public fillRect(rect: Rect2, fill: Color4) {
 		const path = Path.fromRect(rect);
-		this.drawPath(path.toRenderable({ fill }));
+		this.drawPath(pathToRenderable(path, { fill }));
 	}
 
 	/**

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,14 +1,10 @@
-import Color4 from '../../Color4';
 import TextComponent from '../../components/TextComponent';
-import Mat33 from '../../math/Mat33';
-import Path from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
+import { Mat33, Rect2, Point2, Vec2, Vec3, Color4 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
+import RenderablePathSpec, { visualEquivalent } from '../RenderablePathSpec';
 
 /**
  * Renders onto a `CanvasRenderingContext2D`.
@@ -116,9 +112,15 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected endPath(style: RenderingStyle) {
-		this.ctx.save();
-		this.ctx.fillStyle = style.fill.toHexString();
-		this.ctx.fill();
+		// Saving and restoring can be slow in some browsers
+		// (e.g. 0.50ms). Avoid.
+		//this.ctx.save();
+
+		// If not a transparent fill
+		if (style.fill.a > 0) {
+			this.ctx.fillStyle = style.fill.toHexString();
+			this.ctx.fill();
+		}
 
 		if (style.stroke) {
 			this.ctx.strokeStyle = style.stroke.color.toHexString();
@@ -126,10 +128,12 @@ export default class CanvasRenderer extends AbstractRenderer {
 			this.ctx.lineCap = 'round';
 			this.ctx.lineJoin = 'round';
 			this.ctx.stroke();
+
+			this.ctx.lineWidth = 1;
 		}
 
 		this.ctx.closePath();
-		this.ctx.restore();
+		//this.ctx.restore();
 	}
 
 	protected lineTo(point: Point2) {
@@ -181,7 +185,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		// If part of a huge object, it might be worth trimming the path
 		if (this.currentObjectBBox?.containsRect(this.getViewport().visibleRect)) {
 			// Try to trim/remove parts of the path outside of the bounding box.
-			path = Path.visualEquivalent(
+			path = visualEquivalent(
 				path,
 				this.getViewport().visibleRect
 			);
@@ -281,6 +285,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 				1.0,
 				0.5 + Math.cos(i * 0.2) / 4, 0.5
 			).toHexString();
+			this.ctx.lineWidth = 2;
 			this.ctx.fill();
 			this.ctx.stroke();
 			this.ctx.closePath();

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -1,6 +1,5 @@
 
-import Mat33 from '../../math/Mat33';
-import { Vec2 } from '../../math/Vec2';
+import { Mat33, Vec2 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import DummyRenderer from './DummyRenderer';
 

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,7 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
+import { Mat33, Rect2, Point2, Vec2, Vec3 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,15 +1,12 @@
-
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import Mat33 from '../../math/Mat33';
-import Path from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
-import { toRoundedString } from '../../math/rounding';
-import { Point2, Vec2 } from '../../math/Vec2';
-import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
+import { Mat33, Rect2, Point2, Vec2, toRoundedString } from '@js-draw/math';
+import { svgAttributesDataKey, svgLoaderAttributeContainerID, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle, { stylesEqual } from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
+import RenderablePathSpec, { pathFromRenderable } from '../RenderablePathSpec';
+import listPrefixMatch from '../../util/listPrefixMatch';
 
 export const renderedStylesheetId = 'js-draw-style-sheet';
 
@@ -28,6 +25,10 @@ const defaultTextStyle: Partial<TextRenderingStyle> = {
 export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStyle: RenderingStyle|null = null;
 	private lastPathString: string[] = [];
+	private lastContainerIDList: string[] = [];
+
+	// Elements that make up the current object (as created by startObject)
+	// if any.
 	private objectElems: SVGElement[]|null = null;
 
 	private overwrittenAttrs: Record<string, string|null> = {};
@@ -88,6 +89,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	public clear() {
 		this.lastPathString = [];
+		this.lastContainerIDList = [];
 
 		if (!this.sanitize) {
 			// Restore all all attributes
@@ -134,7 +136,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	public override drawPath(pathSpec: RenderablePathSpec) {
 		const style = pathSpec.style;
-		const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
+		const path = pathFromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
 
 		// Try to extend the previous path, if possible
 		if (
@@ -278,9 +280,14 @@ export default class SVGRenderer extends AbstractRenderer {
 		// Don't extend paths across objects
 		this.addPathToSVG();
 
+		// If empty/not an object, stop.
+		if (!this.objectElems) {
+			return;
+		}
+
 		if (loaderData && !this.sanitize) {
 			// Restore any attributes unsupported by the app.
-			for (const elem of this.objectElems ?? []) {
+			for (const elem of this.objectElems) {
 				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
 				const styleAttrs = loaderData[svgStyleAttributesDataKey] as SVGLoaderUnknownStyleAttribute[]|undefined;
 
@@ -296,6 +303,54 @@ export default class SVGRenderer extends AbstractRenderer {
 					}
 				}
 			}
+
+			// Update the parent
+			const containerIDData = loaderData[svgLoaderAttributeContainerID];
+			let containerIDList: string[] = [];
+			if (containerIDData && containerIDData[0]) {
+				// If a string list,
+				if ((containerIDData[0] as any).length) {
+					containerIDList = containerIDData[0] as string[];
+				}
+			}
+
+			if (
+				containerIDList.length > 0
+				// containerIDList must share a prefix with the last ID list
+				// otherwise, the z order of elements may have been changed from
+				// the original image.
+				// In the case that the z order has been changed, keep the current
+				// element as a child of the root to preserve z order.
+				&& listPrefixMatch(this.lastContainerIDList, containerIDList)
+
+				// The component can add at most one more parent than the previous item.
+				&& this.lastContainerIDList.length >= containerIDList.length - 1
+			) {
+				// Select the last
+				const containerID = containerIDList[containerIDList.length - 1];
+
+				const containerCandidates = this.elem.querySelectorAll(`g#${containerID}`);
+				if (containerCandidates.length >= 1) {
+					const container = containerCandidates[0];
+
+					// If this is the first time we're entering the group, the
+					// group should be empty.
+					// Otherwise, this may be a case that would break z-ordering.
+					if (container.children.length === 0 || this.lastContainerIDList.length >= containerIDList.length) {
+						// Move all objectElems to the found container
+						for (const elem of this.objectElems) {
+							elem.remove();
+							container.appendChild(elem);
+						}
+					} else {
+						containerIDList = [];
+					}
+				}
+			} else {
+				containerIDList = [];
+			}
+
+			this.lastContainerIDList = containerIDList;
 		}
 
 		// Add class names to the object, if given.
@@ -348,7 +403,9 @@ export default class SVGRenderer extends AbstractRenderer {
 			return;
 		}
 
-		this.elem.appendChild(elem.cloneNode(true));
+		const elemToDraw = elem.cloneNode(true) as SVGElement;
+		this.elem.appendChild(elemToDraw);
+		this.objectElems?.push(elemToDraw);
 	}
 
 	public isTooSmallToRender(_rect: Rect2): boolean {

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,7 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import { Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
+import { Vec2, Vec3, Rect2, Mat33 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';

package/src/shortcuts/KeyBinding.test.ts

@@ -48,4 +48,14 @@ describe('KeyBinding', ()  => {
 		expect(ctrl1.matchesEvent({ key: '1', shiftKey: true, ctrlKey: true })).toBe(true);
 		expect(ctrl1.matchesEvent({ key: '1', shiftKey: true, ctrlKey: false })).toBe(false);
 	});
+
+	it('ctrl-KeyA should match ctrl + event with code KeyA', () => {
+		const ctrlA = KeyBinding.fromString('ctrl-KeyA');
+
+		expect(ctrlA.matchesEvent({ code: 'KeyA', shiftKey: false, ctrlKey: true })).toBe(true);
+		expect(ctrlA.matchesEvent({ key: 'a', code: 'KeyA', shiftKey: false, ctrlKey: true })).toBe(true);
+		expect(ctrlA.matchesEvent({ key: 'a', code: 'KeyA', shiftKey: false, ctrlKey: false })).toBe(false);
+		expect(ctrlA.matchesEvent({ code: 'KeyB', shiftKey: false, ctrlKey: true })).toBe(false);
+		expect(ctrlA.matchesEvent({ code: 'KeyA', shiftKey: true, ctrlKey: true })).toBe(false);
+	});
 });

package/src/shortcuts/KeyBinding.ts

@@ -3,6 +3,12 @@ export interface KeyCombination {
 	/** A key (e.g. `a`, `b`, `control`). */
 	readonly key: string;
 
+	/**
+	 * The layout-independent name of the key being pressed. For example,
+	 * KeyA for the `a` key.
+	 */
+	readonly code?: string;
+
 	/**
 	 * Whether the shift key must be pressed to trigger the shortcut.
 	 */
@@ -21,6 +27,18 @@ export interface KeyCombination {
 	readonly controlOrMeta: boolean;
 }
 
+const isUppercaseLetter = (text: string) => {
+	return text.toUpperCase() === text
+		&& text.toLowerCase() !== text
+		&& text.length === 1;
+};
+
+const isLowercaseLetter = (text: string) => {
+	return text.toLowerCase() === text
+		&& text.toUpperCase() !== text
+		&& text.length === 1;
+};
+
 /** Represents a key combination that can trigger a keyboard shortcut. */
 export default class KeyBinding implements KeyCombination {
 	/** @inheritdoc */
@@ -57,12 +75,8 @@ export default class KeyBinding implements KeyCombination {
 		const lowercaseKey = keyEvent.key?.toLowerCase();
 
 		// Determine whether the input is an upper case letter or not.
-		const isUpperCaseKey = keyEvent.key?.toUpperCase() === keyEvent.key
-			&& keyEvent.key?.toLowerCase() !== keyEvent.key
-			&& keyEvent.key?.length === 1;
-		const isLowercaseKey = keyEvent.key?.toLowerCase() === keyEvent.key
-			&& !isUpperCaseKey
-			&& keyEvent.key?.length === 1;
+		const isUpperCaseKey = isUppercaseLetter(keyEvent.key ?? '');
+		const isLowercaseKey = isLowercaseLetter(keyEvent.key ?? '');
 
 		const ctrlKey = (keyEvent.ctrlKey ?? false) || lowercaseKey === 'control';
 		const altKey = (keyEvent.altKey ?? false) || lowercaseKey === 'alt';
@@ -72,20 +86,23 @@ export default class KeyBinding implements KeyCombination {
 		const keyEventHasCtrlOrMeta =
 				keyEvent.controlOrMeta || keyEvent.ctrlKey || keyEvent.metaKey || false;
 
-		// Different keys entirely? They don't match.
-		if (this.key.toLowerCase() !== lowercaseKey) {
-			return false;
-		}
-
-		// If a case where the ASCII case of the given key might matter,
-		// compare.
-		if ((isUpperCaseKey || isLowercaseKey) && this.key !== keyEvent.key) {
-			// this.shiftKey may be interpreted as allowing this shortcut to be uppercased.
-			// If so, try making this.key uppercase and matching the shortcut.
-			const uppercaseKeyMatches = this.shiftKey === true && this.key.toUpperCase() === keyEvent.key;
-			if (!uppercaseKeyMatches) {
+		// If we're not working with key codes,
+		if (this.key !== keyEvent.code) {
+			// Different keys entirely? They don't match.
+			if (this.key.toLowerCase() !== lowercaseKey) {
 				return false;
 			}
+
+			// If a case where the ASCII case of the given key might matter,
+			// compare.
+			if ((isUpperCaseKey || isLowercaseKey) && this.key !== keyEvent.key) {
+				// this.shiftKey may be interpreted as allowing this shortcut to be uppercased.
+				// If so, try making this.key uppercase and matching the shortcut.
+				const uppercaseKeyMatches = this.shiftKey === true && this.key.toUpperCase() === keyEvent.key;
+				if (!uppercaseKeyMatches) {
+					return false;
+				}
+			}
 		}
 
 		const shortcutControlOrMeta = this.controlOrMeta;
@@ -135,25 +152,46 @@ export default class KeyBinding implements KeyCombination {
 	 * and returns the corresponding `KeyboardShortcut`.
 	 */
 	public static fromString(shortcutStr: string): KeyBinding {
-		const hasNoModifiers = shortcutStr.search(/[-+]/) === -1 || shortcutStr.length === 1;
-		if (hasNoModifiers) {
-			const lowercaseKey = shortcutStr.toLowerCase();
-
-			// undefined: don't require or not require shift.
+		const getDefaultModifiers = (key: string) => {
+			// Unless a letter, as long as the given key matches, it shouldn't matter whether
+			// the shift key is pressed.
 			let shiftKey: boolean|undefined = undefined;
 
+			if (isUppercaseLetter(key)) {
+				shiftKey = true;
+			}
+			else if (isLowercaseLetter(key)) {
+				shiftKey = false;
+			}
+			// If not just a single character (e.g. a key code like KeyA), shift must
+			// be specified manually.
+			else if (key.length > 1) {
+				shiftKey = false;
+			}
+
+			const lowercaseKey = key.toLowerCase();
+
 			// shiftKey should always be true if the key is 'shift'
 			if (lowercaseKey === 'shift') {
 				shiftKey = true;
 			}
 
-			return new KeyBinding({
-				key: shortcutStr,
-				shiftKey: shiftKey,
+			return {
+				shiftKey,
 				ctrlKey: lowercaseKey === 'control' || lowercaseKey === 'ctrl',
 				altKey: lowercaseKey === 'alt',
 				metaKey: lowercaseKey === 'meta',
 				controlOrMeta: lowercaseKey === 'control or meta' || lowercaseKey === 'ctrlormeta',
+			};
+		};
+
+		const hasNoModifiers = shortcutStr.search(/[-+]/) === -1 || shortcutStr.length === 1;
+		if (hasNoModifiers) {
+			const modifiers = getDefaultModifiers(shortcutStr);
+
+			return new KeyBinding({
+				key: shortcutStr,
+				...modifiers,
 			});
 		}
 
@@ -165,15 +203,16 @@ export default class KeyBinding implements KeyCombination {
 		}
 
 		const key = match[2];
-		const modifiers = (match[1] ?? '').split(/[-+]/);
+		const defaultModifiers = getDefaultModifiers(key);
+		const modifierStrings = (match[1] ?? '').split(/[-+]/);
 
-		let shiftKey = undefined;
-		let ctrlKey = false;
-		let altKey = false;
-		let metaKey = false;
-		let controlOrMeta = false;
+		let shiftKey = defaultModifiers.shiftKey;
+		let ctrlKey = defaultModifiers.ctrlKey;
+		let altKey = defaultModifiers.altKey;
+		let metaKey = defaultModifiers.metaKey;
+		let controlOrMeta = defaultModifiers.controlOrMeta;
 
-		for (const modifier of modifiers) {
+		for (const modifier of modifierStrings) {
 			if (modifier === '') {
 				continue;
 			}
@@ -182,8 +221,8 @@ export default class KeyBinding implements KeyCombination {
 			case 'shift':
 				shiftKey = true;
 				break;
-			case 'noshift':
-				shiftKey = false;
+			case 'anyshift':
+				shiftKey = undefined;
 				break;
 			case 'ctrl':
 			case 'control':

package/src/shortcuts/KeyboardShortcutManager.test.ts

@@ -8,7 +8,7 @@ describe('KeyboardShortcutManager', () => {
 				KeyboardShortcutManager.getShortcutDefaultKeybindings(undoKeyboardShortcutId);
 		expect(defaultUndoShortcutKeybinds.length).toBeGreaterThanOrEqual(1);
 		expect(defaultUndoShortcutKeybinds.some(shortcut => {
-			return shortcut.key === 'z' && shortcut.controlOrMeta;
+			return shortcut.key === 'KeyZ' && shortcut.controlOrMeta;
 		})).toBe(true);
 	});
 

package/src/styles.js

@@ -3,5 +3,5 @@
  * @packageDocumentation
  */
 
-import './Editor.css';
+import './Editor.scss';
 import '@melloware/coloris/dist/coloris.css';

package/src/testing/sendPenEvent.ts

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
-import { Point2 } from '../math/Vec2';
+import { Point2 } from '@js-draw/math';
 import Pointer from '../Pointer';
-import { InputEvtType } from '../types';
+import { InputEvtType } from '../inputEvents';
 import getUniquePointerId from './getUniquePointerId';
 
 /**

package/src/testing/sendTouchEvent.ts

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
-import { Vec2 } from '../math/Vec2';
+import { Vec2 } from '@js-draw/math';
 import Pointer, { PointerDevice } from '../Pointer';
-import { InputEvtType } from '../types';
+import { InputEvtType } from '../inputEvents';
 import getUniquePointerId from './getUniquePointerId';
 
 /**