js-draw 0.25.1 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.25.1",
+  "version": "1.0.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -14,7 +14,7 @@
       "default": "./src/styles.js"
     },
     "./Editor.css": {
-      "default": "./src/Editor.css"
+      "default": "./dist/Editor.css"
     },
     "./bundle": {
       "types": "./dist/mjs/bundle/bundled.d.ts",
@@ -33,28 +33,17 @@
     },
     "./localization": {
       "types": "./dist/mjs/localization.d.ts",
+      "require": "./dist/cjs/localization.js",
       "default": "./dist/mjs/localization.mjs"
     },
-    "./toolbar/HTMLToolbar": {
-      "types": "./dist/mjs/toolbar/HTMLToolbar.d.ts",
-      "default": "./dist/mjs/toolbar/HTMLToolbar.mjs"
-    },
-    "./math": {
-      "types": "./dist/mjs/math/lib.d.ts",
-      "import": "./dist/mjs/math/lib.mjs",
-      "require": "./dist/cjs/math/lib.js"
-    },
-    "./Color4": {
-      "types": "./dist/mjs/Color4.d.ts",
-      "import": "./dist/mjs/Color4.mjs",
-      "require": "./dist/cjs/Color4.js"
-    },
     "./components": {
       "types": "./dist/mjs/components/lib.d.ts",
+      "require": "./dist/cjs/components/lib.js",
       "default": "./dist/mjs/components/lib.mjs"
     },
     "./commands": {
       "types": "./dist/mjs/commands/lib.d.ts",
+      "require": "./dist/cjs/commands/lib.js",
       "default": "./dist/mjs/commands/lib.mjs"
     }
   },
@@ -68,20 +57,20 @@
   "scripts": {
     "dist-test": "npm run build && cd dist-test/test_imports && npm install && npm run test",
     "dist": "npm run build && npm run dist-test",
-    "build": "rm -rf ./dist && mkdir dist && build-tool build",
-    "watch": "rm -rf ./dist && mkdir dist && build-tool watch",
+    "build": "rm -rf ./dist/* && mkdir -p dist && build-tool build",
+    "watch": "rm -rf ./dist/* && mkdir -p dist && build-tool watch",
     "build-translation-template": "build-tool build-translation-template",
     "prepack": "npm run dist && cd ../../ && npm run test && cd packages/js-draw && ts-node tools/copyREADME.ts copy",
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@melloware/coloris": "0.20.0",
-    "bezier-js": "6.1.3"
+    "@js-draw/math": "^1.0.0",
+    "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^0.25.0",
+    "@js-draw/build-tool": "^1.0.0",
     "@types/bezier-js": "4.1.0",
-    "@types/jest": "29.5.2",
+    "@types/jest": "29.5.3",
     "@types/jsdom": "21.1.1"
   },
   "bugs": {

package/src/Coloris.css

@@ -2,7 +2,7 @@
 /* Imports Coloris' CSS and makes additional changes to the color picker */
 
 #clr-picker {
-    --clr-slider-size: 30px;
+	--clr-slider-size: 30px;
 }
 
 /* Coloris: Try to avoid scrolling instead of updating the color input. */
@@ -24,10 +24,10 @@
 
 /* Also apply to Chrome/iOS */
 #clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {
-    /*
-     Note: This doesn't seem to take effect in iOS if it's combined with the
-           ::-moz-range-thumb rule above
-     */
+	/*
+	 Note: This doesn't seem to take effect in iOS if it's combined with the
+	       ::-moz-range-thumb rule above
+	 */
 	width: var(--clr-slider-size);
 	height: var(--clr-slider-size);
 }
@@ -45,8 +45,8 @@ Debugging: Uncommenting this rule makes Coloris' sliders more
 visible.
 
 #clr-picker.clr-picker input[type="range"] {
-    opacity: 0.5;
-    -webkit-appearance: auto;
-    appearance: auto;
+	opacity: 0.5;
+	-webkit-appearance: auto;
+	appearance: auto;
 }
 */

package/src/Editor.loadFrom.test.ts

@@ -1,4 +1,4 @@
-import Color4 from './Color4';
+import { Color4 } from '@js-draw/math';
 import { imageBackgroundCSSClassName } from './components/BackgroundComponent';
 import { RestyleableComponent } from './lib';
 import SVGLoader from './SVGLoader';

package/src/Editor.scss

@@ -0,0 +1,148 @@
+
+@use './toolbar/toolbar.scss';
+@use './tools/tools.scss';
+@use './dialogs/dialogs.scss';
+@use './Coloris.css';
+
+/* Deafult colors for the editor */
+.imageEditorContainer {
+	// The primary background/foreground colors are used for
+	// unselected buttons and dialog text.
+	--background-color-1: white;
+	--foreground-color-1: black;
+
+	// The secondary foreground/background colors are used for some menu/toolbar
+	// backgrounds.
+	--background-color-2: #f5f5f5;
+	--foreground-color-2: #2c303a;
+
+	// The tertiary foreground/background colors are also used for some
+	// menu/toolbar backgrounds.
+	--background-color-3: #e5e5e5;
+	--foreground-color-3: #1c202a;
+
+	// The selection background/foreground colors are used for selected
+	// buttons.
+	--selection-background-color: #cbdaf1;
+	--selection-foreground-color: #2c303a;
+
+	// Used for dialog backgrounds
+	--background-color-transparent: rgba(105, 100, 100, 0.5);
+
+	// Used for shadows
+	--shadow-color: rgba(0, 0, 0, 0.5);
+
+	// Color used for some button/input foregrounds
+	--primary-action-foreground-color: #15b;
+}
+
+@media (prefers-color-scheme: dark) {
+	.imageEditorContainer {
+		--background-color-1: #151515;
+		--foreground-color-1: white;
+
+		--background-color-2: #222;
+		--foreground-color-2: #efefef;
+
+		--background-color-3: #272627;
+		--foreground-color-3: #eee;
+
+		--selection-background-color: #607;
+		--selection-foreground-color: white;
+		--shadow-color: rgba(250, 250, 250, 0.5);
+		--background-color-transparent: rgba(50, 50, 50, 0.5);
+
+		--primary-action-foreground-color: #7ae;
+	}
+}
+
+.imageEditorContainer {
+	color: var(--foreground-color-1);
+	font-family: system-ui, -apple-system, sans-serif;
+	background-color: var(--background-color-1);
+	
+	// Set the width/height to a value that's independent of its content -- avoids
+	// ResizeObserver errors: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+	width: 100%;
+	height: 400px;
+	min-height: 220px;
+	min-width: 100px;
+
+	box-sizing: border-box;
+
+	display: flex;
+	flex-direction: column-reverse;
+
+	input {
+		accent-color: var(--primary-action-foreground-color);
+	}
+}
+
+.imageEditorContainer .imageEditorRenderArea {
+	display: grid;
+	grid-template-columns: 1fr;
+	flex-grow: 2;
+	flex-shrink: 1;
+	min-height: 100px;
+	min-width: 0;
+	width: 100%;
+	height:	100%;
+}
+
+.imageEditorContainer .imageEditorRenderArea canvas {
+	/* Stack all canvases on top of each other */
+	grid-row: 1 / 1;
+	grid-column: 1 / 1;
+	touch-action: none;
+
+	/* Fill the container */
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+
+	/* Allow the canvas to shrink (needed in Chrome) */
+	min-width: 0;
+	max-width: inherit;
+	min-height: 0px;
+	max-height: inherit;
+}
+
+.imageEditorContainer .loadingMessage {
+	position: fixed;
+	text-align: center;
+	font-size: 2em;
+
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.imageEditorContainer .accessibilityAnnouncement {
+	opacity: 0;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+.imageEditorContainer .textRendererOutputContainer {
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+.imageEditorContainer .textRendererOutputContainer:focus-within {
+	overflow: visible;
+	z-index: 5;
+}
+
+@media print {
+	.imageEditorContainer .loadingMessage {
+		display: none;
+	}
+
+	.imageEditorContainer .imageEditorRenderArea canvas {
+		width: 100%;
+		height: initial;
+	}
+}

package/src/Editor.test.ts

@@ -0,0 +1,107 @@
+import { BaseTool, InputEvtType } from './lib';
+import createEditor from './testing/createEditor';
+
+describe('Editor', () => {
+	it('should fire keyup events when the editor loses focus', () => {
+		const editor = createEditor();
+		const rootElem = editor.getRootElement();
+
+		const inputArea = rootElem.querySelector('textarea')! as HTMLTextAreaElement;
+
+		// Set the only tool to a tool that reports which keys are pressed.
+		const keyPressMock = jest.fn(() => true);
+		const keyReleaseMock = jest.fn();
+		editor.toolController.setTools([
+			new (class extends BaseTool {
+				public constructor() {
+					super(editor.notifier, 'test');
+				}
+
+				public override onKeyPress = keyPressMock;
+				public override onKeyUp = keyReleaseMock;
+			})()
+		]);
+
+		inputArea.focus();
+
+		// Sends a keyboard event to the editor
+		const dispatchKeyEvent = (kind: 'keydown'|'keyup', code: string, key: string) => {
+			const event = new KeyboardEvent(kind, {
+				bubbles: true,
+				key,
+				code,
+				shiftKey: false,
+				ctrlKey: false,
+				metaKey: false,
+			});
+			inputArea.dispatchEvent(event);
+		};
+
+		// Press the A key
+		dispatchKeyEvent('keydown', 'KeyA', 'a');
+
+		const keyAEvent = {
+			kind: InputEvtType.KeyPressEvent,
+			key: 'a',
+			code: 'KeyA',
+			ctrlKey: false,
+			altKey: false,
+			shiftKey: false,
+		};
+		expect(keyPressMock).toHaveBeenLastCalledWith(keyAEvent);
+		expect(keyPressMock).toHaveBeenCalledTimes(1);
+
+		// Press it again
+		dispatchKeyEvent('keydown', 'KeyA', 'a');
+
+		expect(keyPressMock).toHaveBeenLastCalledWith(keyAEvent);
+		expect(keyPressMock).toHaveBeenCalledTimes(2);
+
+		// Pressing a different key should send a different keydownb event to the toolbar
+		dispatchKeyEvent('keydown', 'KeyB', 'b');
+
+		expect(keyPressMock).not.toHaveBeenLastCalledWith(keyAEvent);
+		expect(keyPressMock).toHaveBeenCalledTimes(3);
+
+		// Press yet another key (and multiple times) -- if this key is still down when the
+		// editor is blured, a keyup event should only be fired once.
+		dispatchKeyEvent('keydown', 'KeyF', 'f');
+		expect(keyPressMock).toHaveBeenCalledTimes(4);
+
+		dispatchKeyEvent('keydown', 'KeyF', 'f');
+		expect(keyPressMock).toHaveBeenCalledTimes(5);
+
+		dispatchKeyEvent('keyup', 'KeyA', 'a');
+		expect(keyPressMock).toHaveBeenCalledTimes(5);
+		expect(keyReleaseMock).toHaveBeenCalledTimes(1);
+		expect(keyReleaseMock).toHaveBeenLastCalledWith({
+			...keyAEvent,
+			kind: InputEvtType.KeyUpEvent
+		});
+
+		// Defocus the input --- this should fire a key up event for the keys still down
+		inputArea.blur();
+		inputArea.dispatchEvent(new Event('blur', { bubbles: true }));
+
+		const focusable = document.createElement('button');
+		document.body.appendChild(focusable);
+		focusable.focus();
+
+		expect(keyReleaseMock).toHaveBeenCalledTimes(3);
+
+		// Events for both keys that were still down should have been fired:
+		const secondToLastCall = keyReleaseMock.mock.calls[keyReleaseMock.mock.calls.length - 2];
+		const lastCall = keyReleaseMock.mock.lastCall;
+
+		expect(secondToLastCall).toMatchObject([{
+			kind: InputEvtType.KeyUpEvent,
+			key: 'b',
+			code: 'KeyB',
+		}]);
+		expect(lastCall).toMatchObject([{
+			kind: InputEvtType.KeyUpEvent,
+			key: 'f',
+			code: 'KeyF',
+		}]);
+	});
+});

package/src/Editor.toSVG.test.ts

@@ -1,4 +1,4 @@
-import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
+import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2, StrokeComponent, SelectionTool, sendPenEvent, InputEvtType } from './lib';
 import TextRenderingStyle from './rendering/TextRenderingStyle';
 import SVGLoader from './SVGLoader';
 import createEditor from './testing/createEditor';
@@ -108,4 +108,187 @@ describe('Editor.toSVG', () => {
 		//  tspan to work around a loading bug.
 		//expect(secondChild.outerHTML).toBe(`<tspan x="0" y="72">${thirdLineText}</tspan>`);
 	});
+
+	it('should preserve group elements', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+				<style id="js-draw-style-sheet">
+					path {
+						stroke-linecap:round;
+						stroke-linejoin:round;
+					}
+				</style>
+				<g id='main-group'>
+					<g id='sub-group-1'>
+						<path d='M0,0 L10,10 0,10' fill='#f00'/>
+						<path d='M20,0 L10,10 0,10'/>
+					</g>
+					<g id='empty-group-2'></g>
+				</g>
+				<g id='empty-group-3'></g>
+
+				<!-- Groups without IDs should also be preserved -->
+				<g><g><g id='marker-1'></g></g></g>
+				<g class='test'><g id='marker-2'/></g>
+
+				<!-- Groups with duplicate IDs should preserved (though IDs)
+					may be changed -->
+				<g id='empty-group-2'/>
+				<g id='empty-group-2'><g id='empty-group-2'/></g>
+			</svg>
+		`));
+
+		// Both paths should exist.
+		expect(
+			editor.image
+				.getElementsIntersectingRegion(new Rect2(-10, -10, 100, 100))
+				.filter(elem => elem instanceof StrokeComponent)
+		).toHaveLength(2);
+
+		const outputSVG = editor.toSVG();
+
+		// Should still have the expected number of groups
+		expect(outputSVG.querySelectorAll('g')).toHaveLength(12);
+
+		// Should preserve the empty group.
+		expect(outputSVG.querySelectorAll('g#empty-group-2')).toHaveLength(1);
+
+		// The empty group should still have the correct parent
+		expect(outputSVG.querySelectorAll('g#main-group > g#empty-group-2')).toHaveLength(1);
+
+		// Paths should still be children of sub-group-1
+		expect(outputSVG.querySelectorAll('g#sub-group-1 > path')).toHaveLength(2);
+
+		// sub-group-1 should have the correct parent
+		expect(outputSVG.querySelectorAll('g#main-group > g#sub-group-1')).toHaveLength(1);
+
+		// And these should be the only paths.
+		expect(outputSVG.querySelectorAll('path')).toHaveLength(2);
+
+		// Should also preserve groups without IDs
+		// Selector ref: https://stackoverflow.com/a/18607777
+		expect(outputSVG.querySelectorAll('svg > g > g > g#marker-1')).toHaveLength(1);
+		expect(outputSVG.querySelectorAll('svg > g > g#marker-2')).toHaveLength(1);
+
+		// Should preserve class names on `g` objects:
+		expect(outputSVG.querySelectorAll('svg > g.test > g#marker-2')).toHaveLength(1);
+
+		// Should preserve groups that had duplicate IDs
+		expect(outputSVG.querySelectorAll('svg > g#empty-group-2--1')).toHaveLength(1);
+		expect(outputSVG.querySelectorAll('svg > g#empty-group-2--2')).toHaveLength(1);
+		expect(outputSVG.querySelectorAll('svg > g#empty-group-2--2 > g#empty-group-2--3')).toHaveLength(1);
+	});
+
+	describe('should not preserve group elements when doing so would change the z order', () => {
+		it('in an image with few items', async () => {
+			const editor = createEditor();
+			await editor.loadFrom(SVGLoader.fromString(`
+				<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+					<g id='main-group-1'>
+						<path d='M0,0 L-10,10 0,10' fill='#f00'/>
+						<path d='M20,0 L10,10 0,10'/>
+					</g>
+					<path d='M40,40 l10,10 0,10'/>
+				</svg>
+			`));
+
+			// All paths should exist.
+			expect(
+				editor.image
+					.getElementsIntersectingRegion(new Rect2(-10, -10, 100, 100))
+					.filter(elem => elem instanceof StrokeComponent)
+			).toHaveLength(3);
+
+			// Before modifying, both paths should be within the main-group-1 group
+			expect(editor.toSVG().querySelectorAll('svg > g#main-group-1 > path')).toHaveLength(2);
+
+			const selectionTool = editor.toolController.getMatchingTools(SelectionTool)[0];
+			selectionTool.setEnabled(true);
+
+			// Select the bottommost stroke
+			sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(-11, 9));
+			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(-9, 10));
+			sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(-9, 10));
+
+			// The stroke should be selected
+			expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+			expect(selectionTool.getSelectedObjects()[0].getBBox())
+				.objEq(new Rect2(-10, 0, 10, 10));
+
+			// Drag the selection (moves the selected item to the top)
+			sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(-11, 9));
+			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(0, 0));
+			sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0, 0));
+
+			expect(selectionTool.getSelectedObjects()[0].getBBox())
+				.not.objEq(new Rect2(-10, 0, 10, 10));
+			selectionTool.setEnabled(false);
+
+			// One of the items should have been moved out of the main group
+			const outputSVG = editor.toSVG();
+			expect(outputSVG.querySelectorAll('svg > path')).toHaveLength(2);
+			expect(outputSVG.querySelectorAll('svg > g#main-group-1 > path')).toHaveLength(1);
+		});
+
+		it('in an image with many items in nested groups', async () => {
+			const editor = createEditor();
+			await editor.loadFrom(SVGLoader.fromString(`
+				<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+					<path d='M-100,-100 l 2,2 0,2'/>
+					<g id='group-1'>
+						<path d='M0,0 L-10,10 0,10' fill='#f00'/>
+						<path d='M20,0 L10,10 0,10'/>
+
+						<g id='group-2'>
+							<path d='M100,100 l 2,2 0,2'/>
+						</g>
+					</g>
+					<path d='M40,40 l10,10 0,10'/>
+				</svg>
+			`));
+
+			// .expects that all paths have their original parent groups.
+			const expectGroupParentsToBeOriginal = () => {
+				expect(
+					editor.image
+						.getAllElements()
+						.filter(elem => elem instanceof StrokeComponent)
+				).toHaveLength(5);
+
+				const output = editor.toSVG();
+				expect(
+					output.querySelectorAll('svg > g#group-1 path')
+				).toHaveLength(3);
+				expect(
+					output.querySelectorAll('svg > g#group-1 > g > path')
+				).toHaveLength(1);
+			};
+
+			expectGroupParentsToBeOriginal();
+
+			const nudgePathNear = async (pos: Vec2) => {
+				const targetElems = editor.image.getElementsIntersectingRegion(Rect2.bboxOf([ pos ], 5));
+
+				expect(targetElems).toHaveLength(1);
+
+				// Move the path to the top
+				const target = targetElems[0];
+				await editor.dispatch(target.transformBy(Mat33.scaling2D(1.01)));
+			};
+
+			// Moving a path that's below all groups should not change group parentings.
+			nudgePathNear(Vec2.of(-100, -100));
+			expectGroupParentsToBeOriginal();
+
+			// Moving a path that's within nested groups should move the path out of that group.
+			nudgePathNear(Vec2.of(100, 100));
+
+			const outputSVG = editor.toSVG();
+			expect(outputSVG.querySelectorAll('svg > path')).toHaveLength(3);
+			expect(outputSVG.querySelectorAll('svg > g#group-1 > path')).toHaveLength(2);
+			expect(outputSVG.querySelectorAll('svg > g#group-1 > g')).toHaveLength(1);
+			expect(outputSVG.querySelectorAll('svg > g#group-1 > g > *')).toHaveLength(0);
+		});
+	});
 });