js-draw - npm Package Compare versions

Comparing version 1.24.2 to 1.25.0

dist/cjs/Editor.d.ts

@@ -124,2 +124,14 @@ import EditorImage from './image/EditorImage';
     } | null;
+    /**
+     * Allows changing how js-draw interacts with the clipboard.
+     *
+     * **Note**: Even when a custom `clipboardApi` is specified, if a `ClipboardEvent` is available
+     * (e.g. from when a user pastes with ctrl+v), the `ClipboardEvent` will be preferred.
+     */
+    clipboardApi: {
+        /** Called to read data to the clipboard. Keys in the result are MIME types. Values are the data associated with that type. */
+        read(): Promise<Map<string, Blob | string>>;
+        /** Called to write data to the clipboard. Keys in `data` are MIME types. Values are the data associated with that type. */
+        write(data: Map<string, Blob | Promise<Blob> | string>): void | Promise<void>;
+    } | null;
 }
@@ -126,0 +138,0 @@ /**

dist/cjs/Editor.js

@@ -162,2 +162,3 @@ "use strict";
             },
+            clipboardApi: settings.clipboardApi ?? null,
         };
@@ -164,0 +165,0 @@ // Validate settings

dist/cjs/testing/sendKeyPressRelease.d.ts

@@ -1,3 +0,3 @@
-import type Editor from '../Editor';
-declare const sendKeyPressRelease: (editor: Editor, key: string) => void;
+import Editor from '../Editor';
+declare const sendKeyPressRelease: (target: Editor | HTMLElement, key: string) => void;
 export default sendKeyPressRelease;

dist/cjs/testing/sendKeyPressRelease.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const Editor_1 = __importDefault(require("../Editor"));
 const inputEvents_1 = require("../inputEvents");
-const sendKeyPressRelease = (editor, key) => {
-    editor.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyPressEvent, key);
-    editor.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyUpEvent, key);
+const guessKeyCodeFromKey_1 = __importDefault(require("../util/guessKeyCodeFromKey"));
+const sendKeyPressRelease = (target, key) => {
+    if (target instanceof Editor_1.default) {
+        target.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyPressEvent, key);
+        target.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyUpEvent, key);
+    }
+    else {
+        const code = (0, guessKeyCodeFromKey_1.default)(key);
+        target.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
+        target.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
+    }
 };
 exports.default = sendKeyPressRelease;

dist/cjs/tools/PasteHandler.d.ts

@@ -18,3 +18,3 @@ import Editor from '../Editor';
     constructor(editor: Editor);
-    onPaste(event: PasteEvent): boolean;
+    onPaste(event: PasteEvent, onComplete?: () => void): boolean;
     private addComponentsFromPaste;
@@ -21,0 +21,0 @@ private doSVGPaste;

dist/cjs/tools/PasteHandler.js

@@ -29,3 +29,3 @@ "use strict";
     // @internal
-    onPaste(event) {
+    onPaste(event, onComplete) {
         const mime = event.mime.toLowerCase();
@@ -36,2 +36,10 @@ const svgData = (() => {
             }
+            // In some environments, it isn't possible to write non-text data to the
+            // clipboard. To support these cases, auto-detect text/plain SVG data.
+            if (mime === 'text/plain') {
+                const trimmedData = event.data.trim();
+                if (trimmedData.startsWith('<svg') && trimmedData.endsWith('</svg>')) {
+                    return trimmedData;
+                }
+            }
             if (mime !== 'text/html') {
@@ -54,11 +62,11 @@ return false;
         if (svgData) {
-            void this.doSVGPaste(svgData);
+            void this.doSVGPaste(svgData).then(onComplete);
             return true;
         }
         else if (mime === 'text/plain') {
-            void this.doTextPaste(event.data);
+            void this.doTextPaste(event.data).then(onComplete);
             return true;
         }
         else if (mime === 'image/png' || mime === 'image/jpeg') {
-            void this.doImagePaste(event.data);
+            void this.doImagePaste(event.data).then(onComplete);
             return true;
@@ -65,0 +73,0 @@ }

dist/cjs/tools/TextTool.js

@@ -177,2 +177,6 @@ "use strict";
         this.textInputElem.onkeyup = (evt) => {
+            // In certain input modes, the <enter> key is used to select characters.
+            // When in this mode, prevent <enter> from submitting:
+            if (evt.isComposing)
+                return;
             if (evt.key === 'Enter' && !evt.shiftKey) {
@@ -179,0 +183,0 @@ this.flushInput();

dist/cjs/util/ClipboardHandler.js

@@ -78,2 +78,3 @@ "use strict";
         const textData = new Map();
+        const editorSettings = editor.getCurrentSettings();
         if (hasEvent) {
@@ -89,2 +90,17 @@ // NOTE: On some browsers, .getData and .files must be used before any async operations.
         }
+        else if (editorSettings.clipboardApi) {
+            const clipboardData = await editorSettings.clipboardApi.read();
+            for (const [type, data] of clipboardData.entries()) {
+                if (typeof data === 'string') {
+                    textData.set(type, data);
+                }
+                else {
+                    let blob = data;
+                    if (blob.type !== type) {
+                        blob = new Blob([blob], { type });
+                    }
+                    files.push(blob);
+                }
+            }
+        }
         else {
@@ -243,3 +259,9 @@ const clipboardData = await navigator.clipboard.read();
         const supportsClipboardApi = typeof ClipboardItem !== 'undefined' && typeof navigator?.clipboard?.write !== 'undefined';
-        if (!__classPrivateFieldGet(this, _ClipboardHandler_preferClipboardEvents, "f") && supportsClipboardApi && (hasNonTextMimeTypes || !event)) {
+        const prefersClipboardApi = !__classPrivateFieldGet(this, _ClipboardHandler_preferClipboardEvents, "f") && supportsClipboardApi && (hasNonTextMimeTypes || !event);
+        const editorSettings = this.editor.getCurrentSettings();
+        if (prefersClipboardApi && editorSettings.clipboardApi) {
+            const writeResult = editorSettings.clipboardApi.write(mimeToData);
+            return writeResult ?? Promise.resolve();
+        }
+        else if (prefersClipboardApi) {
             let clipboardApiPromise = null;
@@ -246,0 +268,0 @@ const fallBackToCopyEvent = (reason) => {

dist/cjs/version.js

@@ -9,3 +9,3 @@ "use strict";
 exports.default = {
-    number: '1.24.2',
+    number: '1.25.0',
 };

dist/mjs/Editor.d.ts

@@ -124,2 +124,14 @@ import EditorImage from './image/EditorImage';
     } | null;
+    /**
+     * Allows changing how js-draw interacts with the clipboard.
+     *
+     * **Note**: Even when a custom `clipboardApi` is specified, if a `ClipboardEvent` is available
+     * (e.g. from when a user pastes with ctrl+v), the `ClipboardEvent` will be preferred.
+     */
+    clipboardApi: {
+        /** Called to read data to the clipboard. Keys in the result are MIME types. Values are the data associated with that type. */
+        read(): Promise<Map<string, Blob | string>>;
+        /** Called to write data to the clipboard. Keys in `data` are MIME types. Values are the data associated with that type. */
+        write(data: Map<string, Blob | Promise<Blob> | string>): void | Promise<void>;
+    } | null;
 }
@@ -126,0 +138,0 @@ /**

dist/mjs/testing/sendKeyPressRelease.d.ts

@@ -1,3 +0,3 @@
-import type Editor from '../Editor';
-declare const sendKeyPressRelease: (editor: Editor, key: string) => void;
+import Editor from '../Editor';
+declare const sendKeyPressRelease: (target: Editor | HTMLElement, key: string) => void;
 export default sendKeyPressRelease;

dist/mjs/tools/PasteHandler.d.ts

@@ -18,3 +18,3 @@ import Editor from '../Editor';
     constructor(editor: Editor);
-    onPaste(event: PasteEvent): boolean;
+    onPaste(event: PasteEvent, onComplete?: () => void): boolean;
     private addComponentsFromPaste;
@@ -21,0 +21,0 @@ private doSVGPaste;

package.json

 {
 	"name": "js-draw",
-	"version": "1.24.2",
+	"version": "1.25.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
@@ -67,7 +67,7 @@ "types": "./dist/mjs/lib.d.ts",
 	"dependencies": {
-		"@js-draw/math": "^1.24.2",
+		"@js-draw/math": "^1.25.0",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.24.2",
+		"@js-draw/build-tool": "^1.25.0",
 		"@types/jest": "29.5.5",
@@ -90,3 +90,3 @@ "@types/jsdom": "21.1.3"
 	],
-	"gitHead": "32c8db56fc8996c8d485118d1ee37077428344a3"
+	"gitHead": "8ecc7be6d8b1b00c25fe7d3ed6c5fee239451dfa"
 }

README.md

@@ -8,3 +8,3 @@ <div align="center">
 
-[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js_draw.html) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
+[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js-draw.html) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
 
@@ -21,3 +21,3 @@ </div>
 
-A core feature of `js-draw` is its [large zoom range](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js_draw.EditorSettings.html#maxZoom) (from roughly 10⁻¹⁰x to 10¹⁰x).
+A core feature of `js-draw` is its [large zoom range](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorSettings.html#maxZoom) (from roughly 10⁻¹⁰x to 10¹⁰x).
 
@@ -30,3 +30,3 @@ <details open><summary><strong>Demo</strong></summary>
 
-Applications using `js-draw` can adjust this zoom range with custom [EditorSettings](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js_draw.EditorSettings.html).
+Applications using `js-draw` can adjust this zoom range with custom [EditorSettings](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorSettings.html).
 
@@ -43,3 +43,3 @@ ## Touchscreen and stylus support
 
-It's also possible to disable touch drawing. This can be useful when drawing with a stylus and can be done with either [PanZoomTool.setMode](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.PanZoomTool.html#setMode) or, by a user, with the "hand" tool menu:
+It's also possible to disable touch drawing. This can be useful when drawing with a stylus and can be done with either [PanZoomTool.setMode](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.PanZoomTool.html#setMode) or, by a user, with the "hand" tool menu:
 
@@ -75,3 +75,3 @@ <img alt="screenshot: Hand tool menu at the bottom of the screen includes 'lock rotation' and 'touchscreen panning'. 'Touchscreen panning' is highlighted." src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/d96e2df5-6132-4122-954d-d25402754bc2" width="400"/>
 
-To create a new `Editor` and add it as a child of `document.body`, use the [Editor](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#constructor) constructor:
+To create a new `Editor` and add it as a child of `document.body`, use the [Editor](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#constructor) constructor:
 
@@ -124,3 +124,3 @@ ```ts
 
-Save and exit buttons can be added with the [`.addSaveButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addSaveButton) and [`.addExitButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addExitButton) methods:
+Save and exit buttons can be added with the [`.addSaveButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.AbstractToolbar.html#addSaveButton) and [`.addExitButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.AbstractToolbar.html#addExitButton) methods:
 
@@ -204,3 +204,3 @@ ```ts
 
-The background color and style can be customized with [editor.setBackgroundStyle](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setBackgroundStyle). For example,
+The background color and style can be customized with [editor.setBackgroundStyle](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#setBackgroundStyle). For example,
 
@@ -219,5 +219,5 @@ ```ts
 
-Above, we use `editor.dispatch` because `setBackgroundStyle` returns a [`Command`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Command.html), rather than changing the background style directly. `js-draw` uses `Command`s to track actions that can be undone and redone.
+Above, we use `editor.dispatch` because `setBackgroundStyle` returns a [`Command`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Command.html), rather than changing the background style directly. `js-draw` uses `Command`s to track actions that can be undone and redone.
 
-By default, `.dispatch` adds `Command`s to the undo stack. To avoid this, pass `false` for the second parameter to [`.dispatch`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#dispatch):
+By default, `.dispatch` adds `Command`s to the undo stack. To avoid this, pass `false` for the second parameter to [`.dispatch`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#dispatch):
 
@@ -237,3 +237,3 @@ ```ts
 
-By default, the background has a fixed size and marks the region that will be saved by [`.toSVG`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG) or [`.toDataURL`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toDataURL). It's possible to make the background auto-resize to the content of the image with [`editor.image.setAutoresizeEnabled(true)`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.EditorImage.html#setAutoresizeEnabled):
+By default, the background has a fixed size and marks the region that will be saved by [`.toSVG`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#toSVG) or [`.toDataURL`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#toDataURL). It's possible to make the background auto-resize to the content of the image with [`editor.image.setAutoresizeEnabled(true)`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.EditorImage.html#setAutoresizeEnabled):
 
@@ -252,7 +252,7 @@ ```ts
 
-To save as an SVG, use [`editor.toSVG()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG), which returns an `HTMLSVGElement`. Alternatively, if working with very large images that need to be saved in the background, consider using [`editor.toSVGAsync()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG).
+To save as an SVG, use [`editor.toSVG()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#toSVG), which returns an `HTMLSVGElement`. Alternatively, if working with very large images that need to be saved in the background, consider using [`editor.toSVGAsync()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#toSVG).
 
-It's also possible to render the editor to a PNG or JPEG data URL. This can be done with [`editor.toDataURL()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toDataURL).
+It's also possible to render the editor to a PNG or JPEG data URL. This can be done with [`editor.toDataURL()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#toDataURL).
 
-The region of the image that will be saved can be changed by calling [`editor.image.setImportExportRect`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setImportExportRect) or
+The region of the image that will be saved can be changed by calling [`editor.image.setImportExportRect`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.Editor.html#setImportExportRect) or
 
@@ -420,3 +420,3 @@ ## Settings/configuration
 
-See also [adjustEditorThemeForContrast](https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js_draw.adjustEditorThemeForContrast.html).
+See also [adjustEditorThemeForContrast](https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.adjustEditorThemeForContrast.html).
 
@@ -427,3 +427,3 @@ # Examples and resources
 - [How to add a custom pen type](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.CustomizingTools__.html#md:adding-a-new-pen-type)
-- [A material icon theme for js-draw](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js_draw_material_icons.html#md:js-drawmaterial-icons)
+- [A material icon theme for js-draw](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js-draw_material-icons.html#md:js-drawmaterial-icons)
 - [More documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Guides.html)

No alert changes

Improved metrics

Total package byte prevSize

4471173

increased by0.19%

Number of package files

878

increased by0.92%

Lines of code

63272

increased by0.27%

Dependency changes

• Updated@js-draw/math@^1.25.0