js-draw 1.16.1 → 1.17.0

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

@@ -12,6 +12,12 @@ export default class ToolController implements InputEventListener {
     private isEditorReadOnly;
     /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
+    /**
+     * Replaces the current set of tools with `tools`. This should only be done before
+     * the creation of the app's toolbar (if using `AbstractToolbar`).
+     *
+     * If no `primaryToolGroup` is given, an empty one will be created.
+     */
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
     /**
      * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
@@ -22,7 +28,17 @@ export default class ToolController implements InputEventListener {
      */
     addPrimaryTool(tool: BaseTool): void;
     getPrimaryTools(): BaseTool[];
-    addTool(tool: BaseTool): void;
+    /**
+     * Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+     * This should be called before creating the app's toolbar.
+     *
+     * If `options.addToFront`, the tool is added to the beginning of this' tool list.
+     *
+     * Does nothing if the tool is already present.
+     */
+    addTool(tool: BaseTool, options?: {
+        addToFront: boolean;
+    }): void;
     /**
      * Removes **and destroys** all tools in `tools` from this.
      */

package/dist/mjs/tools/ToolController.mjs

@@ -81,8 +81,12 @@ export default class ToolController {
         });
         this.activeTool = null;
     }
-    // Replaces the current set of tools with `tools`. This should only be done before
-    // the creation of the app's toolbar (if using `AbstractToolbar`).
+    /**
+     * Replaces the current set of tools with `tools`. This should only be done before
+     * the creation of the app's toolbar (if using `AbstractToolbar`).
+     *
+     * If no `primaryToolGroup` is given, an empty one will be created.
+     */
     setTools(tools, primaryToolGroup) {
         this.tools = tools;
         this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
@@ -108,14 +112,23 @@ export default class ToolController {
             return tool.getToolGroup() === this.primaryToolGroup;
         });
     }
-    // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
-    // This should be called before creating the app's toolbar.
-    //
-    // A tool should only be added once.
-    addTool(tool) {
+    /**
+     * Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+     * This should be called before creating the app's toolbar.
+     *
+     * If `options.addToFront`, the tool is added to the beginning of this' tool list.
+     *
+     * Does nothing if the tool is already present.
+     */
+    addTool(tool, options) {
         // Only add if not already present.
         if (!this.tools.includes(tool)) {
-            this.tools.push(tool);
+            if (options?.addToFront) {
+                this.tools.splice(0, 0, tool);
+            }
+            else {
+                this.tools.push(tool);
+            }
         }
     }
     /**

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

@@ -26,8 +26,8 @@ export interface ToolLocalization {
     findDialogHidden: string;
     focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;
     anyDevicePanning: string;
-    copied: (count: number, description: string) => string;
-    pasted: (count: number, description: string) => string;
+    copied: (count: number) => string;
+    pasted: (count: number) => string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/mjs/tools/localization.mjs

@@ -26,8 +26,8 @@ export const defaultToolLocalization = {
     findDialogHidden: 'Find dialog hidden',
     focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Any device panning',
-    copied: (count, description) => `Copied ${count} ${description}`,
-    pasted: (count, description) => `Pasted ${count} ${description}`,
+    copied: (count) => `Copied ${count} item(s)`,
+    pasted: (count) => `Pasted ${count} item(s)`,
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/mjs/util/ClipboardHandler.d.ts

@@ -0,0 +1,27 @@
+import { Editor } from '../Editor';
+/**
+ * Handles conversion between the browser clipboard APIs and internal
+ * js-draw clipboard events.
+ */
+export default class ClipboardHandler {
+    #private;
+    private editor;
+    constructor(editor: Editor);
+    /**
+     * Pastes data from the clipboard into the editor associated with
+     * this handler.
+     *
+     * @param event Optional -- a clipboard/drag event. If not provided,
+     * 				`navigator.clipboard` will be used instead.
+     * @returns true if the paste event was handled by the editor.
+     */
+    paste(event?: DragEvent | ClipboardEvent): Promise<boolean>;
+    /**
+     * Copies text from the editor associated with this.
+     *
+     * Even if `event` is provided, the `navigator.clipboard` API may be used if image data
+     * is to be copied. This is done because `ClipboardEvent`s seem to not support attaching
+     * images.
+     */
+    copy(event?: ClipboardEvent): Promise<void>;
+}

package/dist/mjs/util/ClipboardHandler.mjs

@@ -0,0 +1,200 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ClipboardHandler_preferClipboardEvents;
+import  { InputEvtType }  from '../inputEvents.mjs';
+import  fileToBase64Url  from './fileToBase64Url.mjs';
+const isTextMimeType = (mime) => 
+// +xml: Handles image/svg+xml
+mime.endsWith('+xml') || mime.startsWith('text/');
+/**
+ * Handles conversion between the browser clipboard APIs and internal
+ * js-draw clipboard events.
+ */
+class ClipboardHandler {
+    constructor(editor) {
+        this.editor = editor;
+        _ClipboardHandler_preferClipboardEvents.set(this, false);
+    }
+    /**
+     * Pastes data from the clipboard into the editor associated with
+     * this handler.
+     *
+     * @param event Optional -- a clipboard/drag event. If not provided,
+     * 				`navigator.clipboard` will be used instead.
+     * @returns true if the paste event was handled by the editor.
+     */
+    async paste(event) {
+        const editor = this.editor;
+        const clipboardData = event?.dataTransfer ?? event?.clipboardData ?? null;
+        const hasEvent = !!clipboardData;
+        const sendPasteEvent = (mime, data) => {
+            return data && editor.toolController.dispatchInputEvent({
+                kind: InputEvtType.PasteEvent,
+                mime,
+                data,
+            });
+        };
+        // Listed in order of precedence
+        const supportedMIMEs = [
+            'image/svg+xml',
+            'text/html',
+            'image/png',
+            'image/jpeg',
+            'text/plain',
+        ];
+        let files = [];
+        const textData = new Map();
+        if (hasEvent) {
+            // NOTE: On some browsers, .getData and .files must be used before any async operations.
+            files = [...clipboardData.files];
+            for (const mime of supportedMIMEs) {
+                const data = clipboardData.getData(mime);
+                if (data) {
+                    textData.set(mime, data);
+                }
+            }
+        }
+        else {
+            const clipboardData = await navigator.clipboard.read();
+            for (const item of clipboardData) {
+                for (const mime of item.types) {
+                    if (supportedMIMEs.includes(mime)) {
+                        files.push(await item.getType(mime));
+                    }
+                }
+            }
+        }
+        // Returns true if handled
+        const handleMIME = async (mime) => {
+            const isTextFormat = isTextMimeType(mime);
+            if (isTextFormat) {
+                const data = textData.get(mime);
+                if (sendPasteEvent(mime, data)) {
+                    event?.preventDefault();
+                    return true;
+                }
+            }
+            for (const file of files) {
+                const fileType = file.type.toLowerCase();
+                if (fileType !== mime) {
+                    continue;
+                }
+                if (isTextFormat) {
+                    const text = await file.text();
+                    if (sendPasteEvent(mime, text)) {
+                        event?.preventDefault();
+                        return true;
+                    }
+                }
+                else {
+                    editor.showLoadingWarning(0);
+                    const onprogress = (evt) => {
+                        editor.showLoadingWarning(evt.loaded / evt.total);
+                    };
+                    try {
+                        const data = await fileToBase64Url(file, { onprogress });
+                        if (sendPasteEvent(mime, data)) {
+                            event?.preventDefault();
+                            editor.hideLoadingWarning();
+                            return true;
+                        }
+                    }
+                    catch (e) {
+                        console.error('Error reading image:', e);
+                    }
+                    editor.hideLoadingWarning();
+                }
+            }
+            return false;
+        };
+        for (const mime of supportedMIMEs) {
+            if (await handleMIME(mime)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Copies text from the editor associated with this.
+     *
+     * Even if `event` is provided, the `navigator.clipboard` API may be used if image data
+     * is to be copied. This is done because `ClipboardEvent`s seem to not support attaching
+     * images.
+     */
+    copy(event) {
+        const mimeToData = Object.create(null);
+        if (this.editor.toolController.dispatchInputEvent({
+            kind: InputEvtType.CopyEvent,
+            setData: (mime, data) => {
+                mimeToData[mime] = data;
+            },
+        })) {
+            event?.preventDefault();
+        }
+        const mimeTypes = Object.keys(mimeToData);
+        const hasNonTextMimeTypes = mimeTypes.some(mime => !isTextMimeType(mime));
+        const copyToEvent = () => {
+            if (!event) {
+                throw new Error('Unable to paste -- no event provided.');
+            }
+            for (const key in mimeToData) {
+                const value = mimeToData[key];
+                if (typeof value === 'string') {
+                    event.clipboardData?.setData(key, value);
+                }
+            }
+        };
+        const copyToClipboardApi = () => {
+            const mappedMimeToData = Object.create(null);
+            const mimeMapping = {
+                // image/svg+xml is unsupported in Chrome.
+                'image/svg+xml': 'text/html',
+            };
+            for (const key in mimeToData) {
+                const data = mimeToData[key];
+                const mappedKey = mimeMapping[key] || key;
+                if (typeof data === 'string') {
+                    mappedMimeToData[mappedKey] = new Blob([new TextEncoder().encode(data)], { type: mappedKey });
+                }
+                else {
+                    mappedMimeToData[mappedKey] = data;
+                }
+            }
+            return navigator.clipboard.write([new ClipboardItem(mappedMimeToData)]);
+        };
+        const supportsClipboardApi = (typeof ClipboardItem !== 'undefined'
+            && typeof navigator?.clipboard?.write !== 'undefined');
+        if (!__classPrivateFieldGet(this, _ClipboardHandler_preferClipboardEvents, "f") && supportsClipboardApi && (hasNonTextMimeTypes || !event)) {
+            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);
+                __classPrivateFieldSet(this, _ClipboardHandler_preferClipboardEvents, true, "f");
+                copyToEvent();
+            };
+            try {
+                clipboardApiPromise = copyToClipboardApi();
+            }
+            catch (error) {
+                fallBackToCopyEvent(error);
+            }
+            if (clipboardApiPromise) {
+                return clipboardApiPromise.catch(fallBackToCopyEvent);
+            }
+        }
+        else {
+            copyToEvent();
+        }
+        return Promise.resolve();
+    }
+}
+_ClipboardHandler_preferClipboardEvents = new WeakMap();
+export default ClipboardHandler;

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

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

package/dist/mjs/version.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Contains the current version of the library -- used
+ * internaly (e.g. for documentation).
+ * @internal
+ */
 declare const _default: {
     number: string;
 };

package/dist/mjs/version.mjs

@@ -1,3 +1,8 @@
+/**
+ * Contains the current version of the library -- used
+ * internaly (e.g. for documentation).
+ * @internal
+ */
 export default {
-    number: '1.16.1',
+    number: '1.17.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.16.1",
+  "version": "1.17.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",
@@ -57,18 +57,18 @@
   "scripts": {
     "dist-test": "cd dist-test/test_imports && npm install && npm run test",
     "dist": "npm run build && npm run dist-test",
-    "build": "rm -rf ./dist/* && mkdir -p dist && build-tool build",
-    "watch": "rm -rf ./dist/* && mkdir -p dist && build-tool watch",
+    "build": "rm -rf ./dist/* && build-tool build",
+    "watch": "build-tool watch",
     "build-translation-templates": "build-tool build-translation-templates",
     "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": {
-    "@js-draw/math": "^1.16.0",
+    "@js-draw/math": "^1.17.0",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.11.1",
+    "@js-draw/build-tool": "^1.17.0",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "7a1d4ea8bae0a2549494fce672b9d43ce97a68a8"
+  "gitHead": "d0eff585750ab5670af3acda8ddff090e8825bd3"
 }