js-draw 1.21.3 → 1.22.0

package/dist/cjs/tools/TextTool.js

@@ -81,7 +81,7 @@ class TextTool extends BaseTool_1.default {
             return measurement.fontBoundingBoxAscent ?? measurement.actualBoundingBoxAscent;
         }
         // Estimate
-        return style.size * 2 / 3;
+        return (style.size * 2) / 3;
     }
     // Take input from this' textInputElem and add it to the EditorImage.
     // If [removeInput], the HTML input element is removed. Otherwise, its value
@@ -100,7 +100,10 @@ class TextTool extends BaseTool_1.default {
             if (content === '') {
                 return;
             }
-            const textTransform = math_1.Mat33.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(math_1.Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(math_1.Mat33.zRotation(this.textRotation));
+            const textTransform = math_1.Mat33.translation(this.textTargetPosition)
+                .rightMul(this.getTextScaleMatrix())
+                .rightMul(math_1.Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()))
+                .rightMul(math_1.Mat33.zRotation(this.textRotation));
             const textComponent = TextComponent_1.default.fromLines(content.split('\n'), textTransform, this.textStyle);
             const action = EditorImage_1.default.addElement(textComponent);
             if (this.removeExistingCommand) {
@@ -144,8 +147,7 @@ class TextTool extends BaseTool_1.default {
         const vertAdjust = ascent;
         const rotation = this.textRotation + viewport.getRotationAngle();
         const scale = this.getTextScaleMatrix();
-        this.textInputElem.style.transform =
-            `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
+        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${(rotation * 180) / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
         // Match the line height of default rendered text.
         const lineHeight = Math.floor(this.textStyle.size);
@@ -213,11 +215,11 @@ class TextTool extends BaseTool_1.default {
             const halfTestRegionSize = math_1.Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = math_1.Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
-            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent_1.default);
+            let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent_1.default);
             // Don't try to edit text nodes that contain the viewport (this allows us
             // to zoom in on text nodes and add text on top of them.)
             const visibleRect = this.editor.viewport.visibleRect;
-            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
+            targetTextNodes = targetTextNodes.filter((node) => !node.getBBox().containsRect(visibleRect));
             // End any TextNodes we're currently editing.
             this.flushInput();
             if (targetTextNodes.length > 0) {

package/dist/cjs/tools/ToolController.js

@@ -53,13 +53,19 @@ class ToolController {
         this.activeTool = null;
         this.isEditorReadOnly = editor.isReadOnlyReactiveValue();
         this.inputPipeline = new InputPipeline_1.default();
-        this.inputPipeline.setEmitListener(event => this.onEventInternal(event));
+        this.inputPipeline.setEmitListener((event) => this.onEventInternal(event));
         const primaryToolGroup = new ToolEnabledGroup_1.default();
         this.primaryToolGroup = primaryToolGroup;
         const panZoomTool = new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.TwoFingerTouchGestures | PanZoom_1.PanZoomMode.RightClickDrags, localization.touchPanTool);
         const keyboardPanZoomTool = new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.Keyboard, localization.keyboardPanZoom);
-        const primaryPenTool = new Pen_1.default(editor, localization.penTool(1), { color: math_1.Color4.purple, thickness: 8 });
-        const secondaryPenTool = new Pen_1.default(editor, localization.penTool(2), { color: math_1.Color4.clay, thickness: 4 });
+        const primaryPenTool = new Pen_1.default(editor, localization.penTool(1), {
+            color: math_1.Color4.purple,
+            thickness: 8,
+        });
+        const secondaryPenTool = new Pen_1.default(editor, localization.penTool(2), {
+            color: math_1.Color4.clay,
+            thickness: 4,
+        });
         // Stabilize the secondary pen tool.
         secondaryPenTool.setInputMapper(new InputStabilizer_1.default(editor.viewport));
         const eraser = new Eraser_1.default(editor, localization.eraserTool);
@@ -71,7 +77,7 @@ class ToolController {
             new Pen_1.default(editor, localization.penTool(3), {
                 color: math_1.Color4.ofRGBA(1, 1, 0, 0.5),
                 thickness: 40,
-                factory: PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder
+                factory: PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder,
             }),
             eraser,
             new SelectionTool_1.default(editor, localization.selectionTool),
@@ -96,15 +102,15 @@ class ToolController {
             new PasteHandler_1.default(editor),
             new SelectAllShortcutHandler_1.default(editor),
         ];
-        primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
+        primaryTools.forEach((tool) => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
         primaryPenTool.setEnabled(true);
-        editor.notifier.on(types_1.EditorEventType.ToolEnabled, event => {
+        editor.notifier.on(types_1.EditorEventType.ToolEnabled, (event) => {
             if (event.kind === types_1.EditorEventType.ToolEnabled) {
                 editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
             }
         });
-        editor.notifier.on(types_1.EditorEventType.ToolDisabled, event => {
+        editor.notifier.on(types_1.EditorEventType.ToolDisabled, (event) => {
             if (event.kind === types_1.EditorEventType.ToolDisabled) {
                 editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
             }
@@ -138,7 +144,7 @@ class ToolController {
         }
     }
     getPrimaryTools() {
-        return this.tools.filter(tool => {
+        return this.tools.filter((tool) => {
             return tool.getToolGroup() === this.primaryToolGroup;
         });
     }
@@ -180,7 +186,7 @@ class ToolController {
         this.tools = newTools;
     }
     insertTools(insertNear, toolsToInsert, mode) {
-        this.tools = this.tools.filter(tool => !toolsToInsert.includes(tool));
+        this.tools = this.tools.filter((tool) => !toolsToInsert.includes(tool));
         const newTools = [];
         for (const tool of this.tools) {
             if (mode === 'after') {
@@ -292,7 +298,7 @@ class ToolController {
         this.inputPipeline.addToTail(mapper);
     }
     getMatchingTools(type) {
-        return this.tools.filter(tool => tool instanceof type);
+        return this.tools.filter((tool) => tool instanceof type);
     }
     // @internal
     onEditorDestroyed() {

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

@@ -36,6 +36,8 @@ export interface ToolLocalization {
     copyPasteError__heading: string;
     copyPasteError__description: string;
     copyPasteError__pasteRetry: string;
+    copyPasteError__copyRetry: string;
+    copyPasteError__copyMe: string;
     copyPasteError__errorDetails: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;

package/dist/cjs/tools/localization.js

@@ -17,10 +17,12 @@ exports.defaultToolLocalization = {
     selectionMenu__duplicate: 'Duplicate',
     selectionMenu__delete: 'Delete',
     selectionMenu__paste: 'Paste',
-    copyPasteError__heading: 'Error!',
+    copyPasteError__heading: 'Copy/paste',
     copyPasteError__description: 'Something went wrong — this tool may not have clipboard access.',
     copyPasteError__errorDetails: 'Show error',
     copyPasteError__pasteRetry: 'To retry, please paste into the input box below:',
+    copyPasteError__copyRetry: 'To retry, please copy the text in the input box below:',
+    copyPasteError__copyMe: 'Copy me!',
     autocorrectedTo: (strokeDescription) => `Autocorrected to ${strokeDescription}`,
     autocorrectionCanceled: 'Autocorrect cancelled',
     textTool: 'Text',

package/dist/cjs/tools/util/StationaryPenDetector.js

@@ -48,9 +48,9 @@ class StationaryPenDetector {
         const movedOutOfRadius = dxFromStationaryStart.length() > this.config.maxRadius;
         this.hasMovedOutOfRadius ||= movedOutOfRadius;
         // If not stationary
-        if (movedOutOfRadius
-            || this.averageVelocity.length() > this.config.maxSpeed
-            || dtFromStart < this.config.minTimeSeconds) {
+        if (movedOutOfRadius ||
+            this.averageVelocity.length() > this.config.maxSpeed ||
+            dtFromStart < this.config.minTimeSeconds) {
             this.stationaryStartPointer = currentPointer;
             this.lastPointer = currentPointer;
             this.setStationaryTimeout(this.config.minTimeSeconds * 1000);

package/dist/cjs/tools/util/createMenuOverlay.js

@@ -32,7 +32,7 @@ const createMenuOverlay = async (editor, canvasAnchor, options) => {
         await (0, waitForTimeout_1.default)(hideMenuTimeout);
         menuModal.close();
     };
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         let resolved = false;
         let result = null;
         const resolveWithSelectedResult = () => {
@@ -75,7 +75,7 @@ const createMenuOverlay = async (editor, canvasAnchor, options) => {
         // - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role and
         // - https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
         contentElement.addEventListener('keydown', (event) => {
-            const focusedIndex = optionElements.findIndex(item => item === document.activeElement);
+            const focusedIndex = optionElements.findIndex((item) => item === document.activeElement);
             if (focusedIndex === -1)
                 return;
             let newFocusedIndex = focusedIndex;

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

@@ -29,7 +29,7 @@ export default class ClipboardHandler {
      * is to be copied. This is done because `ClipboardEvent`s seem to not support attaching
      * images.
      */
-    copy(event?: ClipboardEvent): Promise<void>;
+    copy(event?: ClipboardEvent | DragEvent): Promise<void>;
     private copyInternal;
 }
 export {};

package/dist/cjs/util/ClipboardHandler.js

@@ -63,20 +63,15 @@ class ClipboardHandler {
         const clipboardData = event?.dataTransfer ?? event?.clipboardData ?? null;
         const hasEvent = !!clipboardData;
         const sendPasteEvent = (mime, data) => {
-            return data && editor.toolController.dispatchInputEvent({
-                kind: inputEvents_1.InputEvtType.PasteEvent,
-                mime,
-                data,
-            });
+            return (data &&
+                editor.toolController.dispatchInputEvent({
+                    kind: inputEvents_1.InputEvtType.PasteEvent,
+                    mime,
+                    data,
+                }));
         };
         // Listed in order of precedence
-        const supportedMIMEs = [
-            'image/svg+xml',
-            'text/html',
-            'image/png',
-            'image/jpeg',
-            'text/plain',
-        ];
+        const supportedMIMEs = ['image/svg+xml', 'text/html', 'image/png', 'image/jpeg', 'text/plain'];
         let files = [];
         const textData = new Map();
         if (hasEvent) {
@@ -110,7 +105,7 @@ class ClipboardHandler {
                 }
             }
             for (const file of files) {
-                const fileType = file.type.toLowerCase();
+                const fileType = file?.type?.toLowerCase();
                 if (fileType !== mime) {
                     continue;
                 }
@@ -186,14 +181,19 @@ class ClipboardHandler {
             event?.preventDefault();
         }
         const mimeTypes = [...mimeToData.keys()];
-        const hasNonTextMimeTypes = mimeTypes.some(mime => !isTextMimeType(mime));
+        const hasNonTextMimeTypes = mimeTypes.some((mime) => !isTextMimeType(mime));
         const copyToEvent = (reason) => {
             if (!event) {
                 throw new Error(`Unable to copy -- no event provided${reason ? `. Original error: ${reason}` : ''}`);
             }
             for (const [key, value] of mimeToData.entries()) {
                 if (typeof value === 'string') {
-                    event.clipboardData?.setData(key, value);
+                    if ('clipboardData' in event) {
+                        event.clipboardData?.setData(key, value);
+                    }
+                    else {
+                        event.dataTransfer?.setData(key, value);
+                    }
                 }
             }
         };
@@ -224,7 +224,9 @@ class ClipboardHandler {
                     // Browser support for ClipboardItem.supports is limited as of mid 2024. However, some browsers
                     // that do support `.supports` throw an exception when attempting to copy an unsupported MIME type
                     // (e.g. Firefox).
-                    const unsupported = 'supports' in ClipboardItem && typeof ClipboardItem.supports === 'function' && !ClipboardItem.supports(key);
+                    const unsupported = 'supports' in ClipboardItem &&
+                        typeof ClipboardItem.supports === 'function' &&
+                        !ClipboardItem.supports(key);
                     if (!unsupported) {
                         filteredMimeToData[key] = data;
                     }
@@ -234,8 +236,7 @@ class ClipboardHandler {
             const browserMimeToData = removeUnsupportedMime(mapInternalDataToBrowserData(mimeToData));
             return navigator.clipboard.write([new ClipboardItem(browserMimeToData)]);
         };
-        const supportsClipboardApi = (typeof ClipboardItem !== 'undefined'
-            && typeof navigator?.clipboard?.write !== 'undefined');
+        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) => {

package/dist/cjs/util/ReactiveValue.js

@@ -14,7 +14,7 @@ var _ReactiveValueImpl_value, _ReactiveValueImpl_onUpdateListeners;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MutableReactiveValue = exports.ReactiveValue = void 0;
 const noOpUpdateListenerResult = {
-    remove() { }
+    remove() { },
 };
 /**
  * An update listener that does nothing. Useful for reactive values
@@ -40,8 +40,8 @@ const noOpSetUpdateListener = () => {
 class ReactiveValue {
     /** Returns a promise that resolves when this value is next changed. */
     waitForNextUpdate() {
-        return new Promise(resolve => {
-            const listener = this.onUpdate(value => {
+        return new Promise((resolve) => {
+            const listener = this.onUpdate((value) => {
                 listener.remove();
                 resolve(value);
             });
@@ -56,7 +56,7 @@ class ReactiveValue {
         return {
             get: () => value,
             onUpdate: noOpSetUpdateListener,
-            onUpdateAndNow: callback => {
+            onUpdateAndNow: (callback) => {
                 callback(value);
                 return noOpUpdateListenerResult;
             },
@@ -72,7 +72,9 @@ class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef ? new window.WeakRef(result) : { deref: () => result };
+        const resultRef = window.WeakRef
+            ? new window.WeakRef(result)
+            : { deref: () => result };
         for (const value of sourceValues) {
             const listener = value.onUpdate(() => {
                 // Use resultRef to allow `result` to be garbage collected
@@ -91,12 +93,12 @@ class ReactiveValue {
     static map(source, map, inverseMap) {
         const result = ReactiveValue.fromInitialValue(map(source.get()));
         let expectedResultValue = result.get();
-        source.onUpdate(newValue => {
+        source.onUpdate((newValue) => {
             expectedResultValue = map(newValue);
             result.set(expectedResultValue);
         });
         if (inverseMap) {
-            result.onUpdate(newValue => {
+            result.onUpdate((newValue) => {
                 // Prevent infinite loops if inverseMap is not a true
                 // inverse.
                 if (newValue !== expectedResultValue) {
@@ -108,7 +110,7 @@ class ReactiveValue {
     }
     static union(values) {
         return ReactiveValue.fromCallback(() => {
-            return values.map(value => value.get());
+            return values.map((value) => value.get());
         }, values);
     }
 }
@@ -116,9 +118,11 @@ exports.ReactiveValue = ReactiveValue;
 class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {
         const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
-        const childRef = window.WeakRef ? new window.WeakRef(child) : { deref: () => child };
+        const childRef = window.WeakRef
+            ? new window.WeakRef(child)
+            : { deref: () => child };
         // When the source is updated...
-        const sourceListener = sourceValue.onUpdate(newValue => {
+        const sourceListener = sourceValue.onUpdate((newValue) => {
             const childValue = childRef.deref();
             if (childValue) {
                 childValue.set(newValue[propertyName]);
@@ -131,7 +135,7 @@ class MutableReactiveValue extends ReactiveValue {
         });
         // When the child is updated, also apply the update to the
         // parent.
-        child.onUpdate(newValue => {
+        child.onUpdate((newValue) => {
             sourceValue.set({
                 ...sourceValue.get(),
                 [propertyName]: newValue,
@@ -169,7 +173,7 @@ class ReactiveValueImpl extends MutableReactiveValue {
         __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").push(listener);
         return {
             remove: () => {
-                __classPrivateFieldSet(this, _ReactiveValueImpl_onUpdateListeners, __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").filter(otherListener => {
+                __classPrivateFieldSet(this, _ReactiveValueImpl_onUpdateListeners, __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").filter((otherListener) => {
                     return otherListener !== listener;
                 }), "f");
             },

package/dist/cjs/util/adjustEditorThemeForContrast.js

@@ -75,8 +75,12 @@ const adjustEditorThemeForContrast = (editor, options) => {
     // true if the variable can be updated
     updateVar1, updateVar2) => {
         // Fetch from updatedColors if available -- styles isn't updated dynamically.
-        let color1 = updatedColors[var1] ? updatedColors[var1] : math_1.Color4.fromString(styles.getPropertyValue(var1));
-        let color2 = updatedColors[var2] ? updatedColors[var2] : math_1.Color4.fromString(styles.getPropertyValue(var2));
+        let color1 = updatedColors[var1]
+            ? updatedColors[var1]
+            : math_1.Color4.fromString(styles.getPropertyValue(var1));
+        let color2 = updatedColors[var2]
+            ? updatedColors[var2]
+            : math_1.Color4.fromString(styles.getPropertyValue(var2));
         // Ensure that color1 has the lesser luminance
         if (color1.relativeLuminance() < color2.relativeLuminance()) {
             const tmp = color1;

package/dist/cjs/util/guessKeyCodeFromKey.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // See https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values for
 // more
 const keyToKeyCode = {
-    'Control': 'ControlLeft',
+    Control: 'ControlLeft',
     '=': 'Equal',
     '-': 'Minus',
     ';': 'Semicolon',

package/dist/cjs/util/listenForKeyboardEventsFrom.js

@@ -21,7 +21,7 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
         return a.key === b.key && a.code === b.code;
     };
     const isKeyDown = (keyEvent) => {
-        return keysDown.some(other => keyEventsMatch(other, keyEvent));
+        return keysDown.some((other) => keyEventsMatch(other, keyEvent));
     };
     const keyEventToRecord = (event) => {
         return {
@@ -47,10 +47,11 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
             }
             callbacks.handleKeyDown(htmlEvent);
         }
-        else { // keyup
+        else {
+            // keyup
             console.assert(htmlEvent.type === 'keyup');
             // Remove the key from keysDown -- it's no longer down.
-            keysDown = keysDown.filter(event => {
+            keysDown = keysDown.filter((event) => {
                 const matches = keyEventsMatch(event, htmlEvent);
                 return !matches;
             });
@@ -60,17 +61,18 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
             callbacks.handleKeyUp(htmlEvent);
         }
     };
-    elem.addEventListener('keydown', htmlEvent => {
+    elem.addEventListener('keydown', (htmlEvent) => {
         handleKeyEvent(htmlEvent);
     });
-    elem.addEventListener('keyup', htmlEvent => {
+    elem.addEventListener('keyup', (htmlEvent) => {
         handleKeyEvent(htmlEvent);
     });
     elem.addEventListener('focusout', (focusEvent) => {
         let stillHasFocus = false;
         if (focusEvent.relatedTarget) {
             const relatedTarget = focusEvent.relatedTarget;
-            stillHasFocus = elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
+            stillHasFocus =
+                elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
         }
         if (!stillHasFocus) {
             for (const event of keysDown) {

package/dist/cjs/util/waitForAll.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 const waitForAll = (results) => {
     // If any are Promises...
-    if (results.some(command => command && command['then'])) {
+    if (results.some((command) => command && command['then'])) {
         // Wait for all commands to finish.
-        return Promise.all(results)
+        return (Promise.all(results)
             // Ensure we return a Promise<void> and not a Promise<void[]>
-            .then(() => { });
+            .then(() => { }));
     }
     return;
 };

package/dist/cjs/util/waitForImageLoaded.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const waitForImageLoad = async (image) => {
     if (!image.complete) {
         await new Promise((resolve, reject) => {
-            image.onload = event => resolve(event);
+            image.onload = (event) => resolve(event);
             // TODO(v2): Return a `new Error(event.message)`
             // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
-            image.onerror = event => reject(event);
+            image.onerror = (event) => reject(event);
             // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
-            image.onabort = event => reject(event);
+            image.onabort = (event) => reject(event);
         });
     }
 };

package/dist/cjs/util/waitForTimeout.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 /** Returns a promise that resolves after `timeout` milliseconds. */
 const waitForTimeout = (timeout) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         setTimeout(() => resolve(), timeout);
     });
 };

package/dist/cjs/version.js

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