js-draw 1.24.1 → 1.25.0

package/dist/cjs/Editor.d.ts

@@ -121,6 +121,18 @@ export interface EditorSettings {
          */
         showImagePicker?: ShowCustomFilePickerCallback;
     } | 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;
 }
 /**
  * The main entrypoint for the full editor.

package/dist/cjs/Editor.js

@@ -159,6 +159,7 @@ class Editor {
             image: {
                 showImagePicker: settings.image?.showImagePicker ?? undefined,
             },
+            clipboardApi: settings.clipboardApi ?? null,
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {

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

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

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

@@ -76,6 +76,17 @@ export default class TextComponent extends AbstractComponent implements Restylea
     private static getFontHeight;
     private computeUntransformedBBoxOfPart;
     private recomputeBBox;
+    /**
+     * Renders a TextComponent or a TextComponent child onto a `canvas`.
+     *
+     * `visibleRect` can be provided as a performance optimization. If not the top-level
+     * text node, `baseTransform` (specifies the transformation of the parent text component
+     * in canvas space) should also be provided.
+     *
+     * Note that passing a `baseTransform` is preferable to transforming `visibleRect`. At high
+     * zoom levels, transforming `visibleRect` by the inverse of the parent transform can lead to
+     * inaccuracy due to precision loss.
+     */
     private renderInternal;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;

package/dist/cjs/components/TextComponent.js

@@ -154,11 +154,22 @@ class TextComponent extends AbstractComponent_1.default {
         }
         this.contentBBox = bbox ?? math_1.Rect2.empty;
     }
-    renderInternal(canvas, visibleRect) {
+    /**
+     * Renders a TextComponent or a TextComponent child onto a `canvas`.
+     *
+     * `visibleRect` can be provided as a performance optimization. If not the top-level
+     * text node, `baseTransform` (specifies the transformation of the parent text component
+     * in canvas space) should also be provided.
+     *
+     * Note that passing a `baseTransform` is preferable to transforming `visibleRect`. At high
+     * zoom levels, transforming `visibleRect` by the inverse of the parent transform can lead to
+     * inaccuracy due to precision loss.
+     */
+    renderInternal(canvas, visibleRect, baseTransform = math_1.Mat33.identity) {
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const textObject of this.textObjects) {
             const { transform, bbox } = cursor.update(textObject);
-            if (visibleRect && !visibleRect.intersects(bbox)) {
+            if (visibleRect && !visibleRect.intersects(bbox.transformedBoundingBox(baseTransform))) {
                 continue;
             }
             if (typeof textObject === 'string') {
@@ -166,7 +177,7 @@ class TextComponent extends AbstractComponent_1.default {
             }
             else {
                 canvas.pushTransform(transform);
-                textObject.renderInternal(canvas, visibleRect?.transformedBoundingBox(transform.inverse()));
+                textObject.renderInternal(canvas, visibleRect, baseTransform.rightMul(transform));
                 canvas.popTransform();
             }
         }

package/dist/cjs/testing/fillHtmlInput.d.ts

@@ -0,0 +1,6 @@
+interface Options {
+    clear?: boolean;
+}
+/** Sets the content of the given `input` or textarea to be `text`. */
+declare const fillInput: (input: HTMLInputElement | HTMLTextAreaElement, text: string, { clear }?: Options) => void;
+export default fillInput;

package/dist/cjs/testing/fillHtmlInput.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const sendKeyPressRelease_1 = __importDefault(require("./sendKeyPressRelease"));
+/** Sets the content of the given `input` or textarea to be `text`. */
+const fillInput = (input, text, { clear = false } = {}) => {
+    const dispatchUpdate = () => {
+        input.dispatchEvent(new InputEvent('input'));
+    };
+    if (clear) {
+        input.value = '';
+        dispatchUpdate();
+    }
+    for (const character of text.split('')) {
+        input.value += character;
+        (0, sendKeyPressRelease_1.default)(input, character);
+        dispatchUpdate();
+    }
+};
+exports.default = fillInput;

package/dist/cjs/testing/sendKeyPressRelease.d.ts

@@ -1,3 +1,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;

package/dist/cjs/testing/sendKeyPressRelease.js

@@ -1,8 +1,20 @@
 "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;

package/dist/cjs/tools/PasteHandler.d.ts

@@ -15,7 +15,7 @@ import BaseTool from './BaseTool';
 export default class PasteHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);
-    onPaste(event: PasteEvent): boolean;
+    onPaste(event: PasteEvent, onComplete?: () => void): boolean;
     private addComponentsFromPaste;
     private doSVGPaste;
     private doTextPaste;

package/dist/cjs/tools/PasteHandler.js

@@ -26,12 +26,20 @@ class PasteHandler extends BaseTool_1.default {
         this.editor = editor;
     }
     // @internal
-    onPaste(event) {
+    onPaste(event, onComplete) {
         const mime = event.mime.toLowerCase();
         const svgData = (() => {
             if (mime === 'image/svg+xml') {
                 return event.data;
             }
+            // 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') {
                 return false;
             }
@@ -49,15 +57,15 @@ class PasteHandler extends BaseTool_1.default {
             return event.data.substring(event.data.search(/<svg/i), svgEnd);
         })();
         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;
         }
         return false;

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

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

package/dist/cjs/tools/TextTool.js

@@ -174,6 +174,10 @@ class TextTool extends BaseTool_1.default {
             }, 0);
         };
         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) {
                 this.flushInput();
                 this.editor.focus();

package/dist/cjs/util/ClipboardHandler.js

@@ -75,6 +75,7 @@ class ClipboardHandler {
         const supportedMIMEs = ['image/svg+xml', 'text/html', 'image/png', 'image/jpeg', 'text/plain'];
         let files = [];
         const textData = new Map();
+        const editorSettings = editor.getCurrentSettings();
         if (hasEvent) {
             // NOTE: On some browsers, .getData and .files must be used before any async operations.
             files = [...clipboardData.files];
@@ -85,6 +86,21 @@ class ClipboardHandler {
                 }
             }
         }
+        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 {
             const clipboardData = await navigator.clipboard.read();
             for (const item of clipboardData) {
@@ -238,7 +254,13 @@ class ClipboardHandler {
             return navigator.clipboard.write([new ClipboardItem(browserMimeToData)]);
         };
         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;
             const fallBackToCopyEvent = (reason) => {
                 console.warn('Unable to copy to the clipboard API. Future calls to .copy will use ClipboardEvents if possible.', reason);

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.24.1',
+    number: '1.25.0',
 };

package/dist/mjs/Editor.d.ts

@@ -121,6 +121,18 @@ export interface EditorSettings {
          */
         showImagePicker?: ShowCustomFilePickerCallback;
     } | 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;
 }
 /**
  * The main entrypoint for the full editor.

package/dist/mjs/Editor.mjs

@@ -120,6 +120,7 @@ export class Editor {
             image: {
                 showImagePicker: settings.image?.showImagePicker ?? undefined,
             },
+            clipboardApi: settings.clipboardApi ?? null,
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {

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

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

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

@@ -76,6 +76,17 @@ export default class TextComponent extends AbstractComponent implements Restylea
     private static getFontHeight;
     private computeUntransformedBBoxOfPart;
     private recomputeBBox;
+    /**
+     * Renders a TextComponent or a TextComponent child onto a `canvas`.
+     *
+     * `visibleRect` can be provided as a performance optimization. If not the top-level
+     * text node, `baseTransform` (specifies the transformation of the parent text component
+     * in canvas space) should also be provided.
+     *
+     * Note that passing a `baseTransform` is preferable to transforming `visibleRect`. At high
+     * zoom levels, transforming `visibleRect` by the inverse of the parent transform can lead to
+     * inaccuracy due to precision loss.
+     */
     private renderInternal;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;

package/dist/mjs/components/TextComponent.mjs

@@ -148,11 +148,22 @@ class TextComponent extends AbstractComponent {
         }
         this.contentBBox = bbox ?? Rect2.empty;
     }
-    renderInternal(canvas, visibleRect) {
+    /**
+     * Renders a TextComponent or a TextComponent child onto a `canvas`.
+     *
+     * `visibleRect` can be provided as a performance optimization. If not the top-level
+     * text node, `baseTransform` (specifies the transformation of the parent text component
+     * in canvas space) should also be provided.
+     *
+     * Note that passing a `baseTransform` is preferable to transforming `visibleRect`. At high
+     * zoom levels, transforming `visibleRect` by the inverse of the parent transform can lead to
+     * inaccuracy due to precision loss.
+     */
+    renderInternal(canvas, visibleRect, baseTransform = Mat33.identity) {
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const textObject of this.textObjects) {
             const { transform, bbox } = cursor.update(textObject);
-            if (visibleRect && !visibleRect.intersects(bbox)) {
+            if (visibleRect && !visibleRect.intersects(bbox.transformedBoundingBox(baseTransform))) {
                 continue;
             }
             if (typeof textObject === 'string') {
@@ -160,7 +171,7 @@ class TextComponent extends AbstractComponent {
             }
             else {
                 canvas.pushTransform(transform);
-                textObject.renderInternal(canvas, visibleRect?.transformedBoundingBox(transform.inverse()));
+                textObject.renderInternal(canvas, visibleRect, baseTransform.rightMul(transform));
                 canvas.popTransform();
             }
         }

package/dist/mjs/testing/fillHtmlInput.d.ts

@@ -0,0 +1,6 @@
+interface Options {
+    clear?: boolean;
+}
+/** Sets the content of the given `input` or textarea to be `text`. */
+declare const fillInput: (input: HTMLInputElement | HTMLTextAreaElement, text: string, { clear }?: Options) => void;
+export default fillInput;

package/dist/mjs/testing/fillHtmlInput.mjs

@@ -0,0 +1,17 @@
+import  sendKeyPressRelease  from './sendKeyPressRelease.mjs';
+/** Sets the content of the given `input` or textarea to be `text`. */
+const fillInput = (input, text, { clear = false } = {}) => {
+    const dispatchUpdate = () => {
+        input.dispatchEvent(new InputEvent('input'));
+    };
+    if (clear) {
+        input.value = '';
+        dispatchUpdate();
+    }
+    for (const character of text.split('')) {
+        input.value += character;
+        sendKeyPressRelease(input, character);
+        dispatchUpdate();
+    }
+};
+export default fillInput;

package/dist/mjs/testing/sendKeyPressRelease.d.ts

@@ -1,3 +1,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;

package/dist/mjs/testing/sendKeyPressRelease.mjs

@@ -1,6 +1,15 @@
+import  Editor  from '../Editor.mjs';
 import  { InputEvtType }  from '../inputEvents.mjs';
-const sendKeyPressRelease = (editor, key) => {
-    editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, key);
-    editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, key);
+import  guessKeyCodeFromKey  from '../util/guessKeyCodeFromKey.mjs';
+const sendKeyPressRelease = (target, key) => {
+    if (target instanceof Editor) {
+        target.sendKeyboardEvent(InputEvtType.KeyPressEvent, key);
+        target.sendKeyboardEvent(InputEvtType.KeyUpEvent, key);
+    }
+    else {
+        const code = guessKeyCodeFromKey(key);
+        target.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
+        target.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
+    }
 };
 export default sendKeyPressRelease;

package/dist/mjs/tools/PasteHandler.d.ts

@@ -15,7 +15,7 @@ import BaseTool from './BaseTool';
 export default class PasteHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);
-    onPaste(event: PasteEvent): boolean;
+    onPaste(event: PasteEvent, onComplete?: () => void): boolean;
     private addComponentsFromPaste;
     private doSVGPaste;
     private doTextPaste;

package/dist/mjs/tools/PasteHandler.mjs

@@ -21,12 +21,20 @@ export default class PasteHandler extends BaseTool {
         this.editor = editor;
     }
     // @internal
-    onPaste(event) {
+    onPaste(event, onComplete) {
         const mime = event.mime.toLowerCase();
         const svgData = (() => {
             if (mime === 'image/svg+xml') {
                 return event.data;
             }
+            // 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') {
                 return false;
             }
@@ -44,15 +52,15 @@ export default class PasteHandler extends BaseTool {
             return event.data.substring(event.data.search(/<svg/i), svgEnd);
         })();
         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;
         }
         return false;

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

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

package/dist/mjs/tools/TextTool.mjs

@@ -169,6 +169,10 @@ export default class TextTool extends BaseTool {
             }, 0);
         };
         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) {
                 this.flushInput();
                 this.editor.focus();

package/dist/mjs/util/ClipboardHandler.mjs

@@ -70,6 +70,7 @@ class ClipboardHandler {
         const supportedMIMEs = ['image/svg+xml', 'text/html', 'image/png', 'image/jpeg', 'text/plain'];
         let files = [];
         const textData = new Map();
+        const editorSettings = editor.getCurrentSettings();
         if (hasEvent) {
             // NOTE: On some browsers, .getData and .files must be used before any async operations.
             files = [...clipboardData.files];
@@ -80,6 +81,21 @@ class ClipboardHandler {
                 }
             }
         }
+        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 {
             const clipboardData = await navigator.clipboard.read();
             for (const item of clipboardData) {
@@ -233,7 +249,13 @@ class ClipboardHandler {
             return navigator.clipboard.write([new ClipboardItem(browserMimeToData)]);
         };
         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;
             const fallBackToCopyEvent = (reason) => {
                 console.warn('Unable to copy to the clipboard API. Future calls to .copy will use ClipboardEvents if possible.', reason);

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.24.1',
+    number: '1.25.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.24.1",
+	"version": "1.25.0",
 	"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,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.24.1",
+		"@js-draw/math": "^1.25.0",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.24.1",
+		"@js-draw/build-tool": "^1.25.0",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "ef847374748e32d6d96d993a2236a99d9109a32c"
+	"gitHead": "8ecc7be6d8b1b00c25fe7d3ed6c5fee239451dfa"
 }