js-draw 1.0.0 → 1.0.1

package/dist/cjs/Editor.js

@@ -1047,7 +1047,7 @@ class Editor {
         const iconLicenseText = this.icons.licenseInfo();
         const notices = [];
         notices.push({
-            heading: { kind: 'link', text: 'js-draw', href: 'https://github.com/personalizedrefrigerator/js-draw' },
+            heading: 'js-draw',
             text: [
                 `v${version_1.default.number}`,
                 '',

package/dist/cjs/Editor.loadFrom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/Editor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/Editor.toSVG.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/EditorImage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/EventDispatcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/SVGLoader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/UndoRedoHistory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/commands/uniteCommands.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/AbstractComponent.transformBy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/BackgroundComponent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Stroke.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/TextComponent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/UnknownSVGObject.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/builders/FreehandLineBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/localizations/getLocalizationTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/rendering/RenderingStyle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/rendering/caching/CacheRecord.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/rendering/caching/RenderingCache.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/rendering/renderers/DummyRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/rendering/renderers/TextOnlyRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shortcuts/KeyBinding.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shortcuts/KeyboardShortcutManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/toolbar/EdgeToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/Eraser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/FindTool.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/InputFilter/InputPipeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/PanZoom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/Pen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/SelectionTool/SelectionTool.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/UndoRedoShortcut.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/util/ReactiveValue.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.0.0',
+    number: '1.0.1',
 };

package/dist/cjs/version.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Editor.loadFrom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Editor.mjs

@@ -1018,7 +1018,7 @@ export class Editor {
         const iconLicenseText = this.icons.licenseInfo();
         const notices = [];
         notices.push({
-            heading: { kind: 'link', text: 'js-draw', href: 'https://github.com/personalizedrefrigerator/js-draw' },
+            heading: 'js-draw',
             text: [
                 `v${version.number}`,
                 '',

package/dist/mjs/Editor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Editor.toSVG.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/EditorImage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/EventDispatcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/SVGLoader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/UndoRedoHistory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/commands/uniteCommands.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/AbstractComponent.transformBy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/BackgroundComponent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/Stroke.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/TextComponent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/UnknownSVGObject.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/components/builders/FreehandLineBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/localizations/getLocalizationTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rendering/RenderingStyle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rendering/caching/CacheRecord.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rendering/caching/RenderingCache.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rendering/renderers/DummyRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rendering/renderers/TextOnlyRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shortcuts/KeyBinding.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shortcuts/KeyboardShortcutManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/EdgeToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/Eraser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/FindTool.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/InputFilter/InputPipeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/PanZoom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/Pen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/SelectionTool/SelectionTool.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/UndoRedoShortcut.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/util/ReactiveValue.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.0.0',
+    number: '1.0.1',
 };

package/dist/mjs/version.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-test/test_imports/package-lock.json

@@ -0,0 +1,13 @@
+{
+	"name": "js-draw-test-imports",
+	"version": "0.0.1",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "js-draw-test-imports",
+			"version": "0.0.1",
+			"license": "MIT"
+		}
+	}
+}

package/dist-test/test_imports/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "js-draw-test-imports",
+	"version": "0.0.1",
+	"description": "Test module and CommonJS imports",
+	"author": "Henry Heino",
+	"license": "MIT",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"test": "node test-imports.js && node test-require.cjs"
+	}
+}

package/dist-test/test_imports/test-imports.js

@@ -0,0 +1,11 @@
+console.log('Testing imports...');
+
+import { TextComponent, StrokeComponent } from 'js-draw/components';
+
+if (!TextComponent.fromLines) {
+	throw new Error('Failed to import module TextComponent');
+}
+
+if (!StrokeComponent.deserializeFromJSON) {
+	throw new Error('Failed to import StrokeComponent');
+}

package/dist-test/test_imports/test-require.cjs

@@ -0,0 +1,14 @@
+console.log('Testing require()...');
+
+// TODO: Test require('js-draw') (requires removing Coloris because
+// Coloris depends on the DOM when first loaded).
+
+const { TextComponent, StrokeComponent } = require('js-draw/components');
+
+if (!TextComponent.fromLines) {
+	throw new Error('Failed to import module TextComponent');
+}
+
+if (!StrokeComponent.deserializeFromJSON) {
+	throw new Error('Failed to import StrokeComponent');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.0.0",
+  "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",
@@ -64,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "1.0.0",
+    "@js-draw/math": "^1.0.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {

package/src/Editor.loadFrom.test.ts

@@ -0,0 +1,24 @@
+import { Color4 } from '@js-draw/math';
+import { imageBackgroundCSSClassName } from './components/BackgroundComponent';
+import { RestyleableComponent } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('Editor.loadFrom', () => {
+	it('should remove existing BackgroundComponents when loading new BackgroundComponents', async () => {
+		const editor = createEditor();
+		await editor.dispatch(editor.setBackgroundColor(Color4.red));
+
+		let backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.red);
+
+		await editor.loadFrom(SVGLoader.fromString(`<svg viewBox='0 0 100 100'>
+			<path class='${imageBackgroundCSSClassName}' d='m0,0 L100,0 L100,100 L0,100 z' fill='#000'/>
+		</svg>`, true));
+
+		backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.black);
+	});
+});

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',
+		}]);
+	});
+});