js-draw 1.24.2 → 1.26.0

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -72,13 +72,13 @@ class Selection {
             side: Vec2.of(0.5, 0),
             icon: this.editor.icons.makeRotateIcon(),
         }, this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
-        const menuToggleButton = new SelectionMenuShortcut(this, this.editor.viewport, showContextMenu, this.editor.localization);
+        const menuToggleButton = new SelectionMenuShortcut(this, this.editor.viewport, this.editor.icons.makeOverflowIcon(), showContextMenu, this.editor.localization);
         this.childwidgets = [
+            menuToggleButton,
             resizeBothHandle,
             ...resizeHorizontalHandles,
             resizeVerticalHandle,
             rotationHandle,
-            menuToggleButton,
         ];
         for (const widget of this.childwidgets) {
             widget.addTo(this.backgroundElem);
@@ -454,6 +454,7 @@ class Selection {
         if (!wasTransforming) {
             this.runSelectionDuplicatedAnimation();
         }
+        let command;
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
@@ -463,16 +464,20 @@ class Selection {
             await tmpApplyCommand.apply(this.editor);
             // Show items again
             this.addRemoveSelectionFromImage(true);
-        }
-        const duplicateCommand = new Duplicate(this.selectedElems);
-        if (wasTransforming) {
+            // With the transformation applied, create the duplicates
+            command = uniteCommands(this.selectedElems.map((elem) => {
+                return EditorImage.addElement(elem.clone());
+            }));
             // Move the selected objects back to the correct location.
             await tmpApplyCommand?.unapply(this.editor);
             this.addRemoveSelectionFromImage(false);
             this.previewTransformCmds();
             this.updateUI();
         }
-        return duplicateCommand;
+        else {
+            command = new Duplicate(this.selectedElems);
+        }
+        return command;
     }
     setHandlesVisible(showHandles) {
         if (!showHandles) {

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

@@ -11,10 +11,12 @@ type OnShowContextMenu = (anchor: Point2) => void;
 export default class SelectionMenuShortcut implements SelectionBoxChild {
     private readonly parent;
     private readonly viewport;
+    private readonly icon;
     private localization;
     private element;
+    private button;
     private onClick;
-    constructor(parent: Selection, viewport: Viewport, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
+    constructor(parent: Selection, viewport: Viewport, icon: Element, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
     private initUI;
     addTo(container: HTMLElement): void;
     remove(): void;

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -2,15 +2,17 @@ import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
 const verticalOffset = 40;
 export default class SelectionMenuShortcut {
-    constructor(parent, viewport, showContextMenu, localization) {
+    constructor(parent, viewport, icon, showContextMenu, localization) {
         this.parent = parent;
         this.viewport = viewport;
+        this.icon = icon;
         this.localization = localization;
         this.lastDragPointer = null;
         this.element = document.createElement('div');
         this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}selection-menu`);
         this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
         this.onClick = () => {
+            this.button?.focus({ preventScroll: true });
             const anchor = this.getBBoxCanvasCoords().center;
             showContextMenu(anchor);
         };
@@ -19,16 +21,22 @@ export default class SelectionMenuShortcut {
     }
     initUI() {
         const button = document.createElement('button');
-        button.textContent = '...';
+        this.icon.classList.add('icon');
+        button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;
+        this.button = button;
         // To prevent editor event handlers from conflicting with those for the button,
         // don't register a [click] handler. An onclick handler can be fired incorrectly
         // in this case (in Chrome) after onClick is fired in onDragEnd, leading to a double
         // on-click action.
         button.onkeydown = (event) => {
-            if (event.key === 'Enter')
+            if (event.key === 'Enter') {
+                // .preventDefault prevents [Enter] from activating the first item in the
+                // selection menu.
+                event.preventDefault();
                 this.onClick();
+            }
         };
         this.element.appendChild(button);
         // Update the bounding box of this in response to the new button.
@@ -58,7 +66,8 @@ export default class SelectionMenuShortcut {
         const contentCanvasSize = this.getElementScreenSize().times(toCanvasScale);
         const handleSizeCanvas = verticalOffset / this.viewport.getScaleFactor();
         const topLeft = Vec2.of(parentCanvasRect.x, parentCanvasRect.y - handleSizeCanvas);
-        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y);
+        const minSize = Vec2.of(48, 48).times(toCanvasScale);
+        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y).grownToSize(minSize);
     }
     updatePosition() {
         const bbox = this.getBBoxParentCoords();

package/dist/mjs/tools/TextTool.mjs

@@ -158,17 +158,24 @@ export default class TextTool extends BaseTool {
             }
         };
         this.textInputElem.onblur = () => {
+            const input = this.textInputElem;
             // Delay removing the input -- flushInput may be called within a blur()
             // event handler
             const removeInput = false;
-            const input = this.textInputElem;
             this.flushInput(removeInput);
             this.textInputElem = null;
+            if (input) {
+                input.classList.add('-hiding');
+            }
             setTimeout(() => {
                 input?.remove();
             }, 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();
@@ -199,7 +206,7 @@ export default class TextTool extends BaseTool {
         if (allPointers.length === 1) {
             // Are we clicking on a text node?
             const canvasPos = current.canvasPos;
-            const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const halfTestRegionSize = Vec2.of(4, 4).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
             let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent);

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/util/assertions.d.ts

@@ -2,7 +2,7 @@
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-export declare const assertUnreachable: (key: never) => never;
+export declare function assertUnreachable(key: never): never;
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -13,15 +13,16 @@ export declare const assertUnreachable: (key: never) => never;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value is number;
+export declare function assertIsNumber(value: unknown, allowNaN?: boolean): asserts value is number;
+export declare function assertIsArray(values: unknown): asserts values is unknown[];
 /**
  * Throws if any of `values` is not of type number.
  */
-export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+export declare function assertIsNumberArray(values: unknown, allowNaN?: boolean): asserts values is number[];
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-export declare const assertIsBoolean: (value: any) => value is boolean;
+export declare function assertIsBoolean(value: unknown): asserts value is boolean;
+export declare function assertTruthy<T>(value: T | null | undefined | false | 0): asserts value is T;
+export declare function assertIsObject(value: unknown): asserts value is Record<string, unknown>;

package/dist/mjs/util/assertions.mjs

@@ -1,11 +1,13 @@
+// Note: Arrow functions cannot be used for type assertions. See
+// https://github.com/microsoft/TypeScript/issues/34523
 /**
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-export const assertUnreachable = (key) => {
+export function assertUnreachable(key) {
     // See https://stackoverflow.com/a/39419171/17055750
     throw new Error(`Should be unreachable. Key: ${key}.`);
-};
+}
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -16,40 +18,42 @@ export const assertUnreachable = (key) => {
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-export const assertIsNumber = (value, allowNaN = false) => {
+export function assertIsNumber(value, allowNaN = false) {
     if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
         throw new Error('Given value is not a number');
-        // return false;
     }
-    return true;
-};
+}
+export function assertIsArray(values) {
+    if (!Array.isArray(values)) {
+        throw new Error('Asserting isArray: Given entity is not an array');
+    }
+}
 /**
  * Throws if any of `values` is not of type number.
  */
-export const assertIsNumberArray = (values, allowNaN = false) => {
-    if (typeof values !== 'object') {
-        throw new Error('Asserting isNumberArray: Given entity is not an array');
-    }
-    if (!assertIsNumber(values['length'])) {
-        return false;
-    }
+export function assertIsNumberArray(values, allowNaN = false) {
+    assertIsArray(values);
+    assertIsNumber(values.length);
     for (const value of values) {
-        if (!assertIsNumber(value, allowNaN)) {
-            return false;
-        }
+        assertIsNumber(value, allowNaN);
     }
-    return true;
-};
+}
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-export const assertIsBoolean = (value) => {
+export function assertIsBoolean(value) {
     if (typeof value !== 'boolean') {
         throw new Error('Given value is not a boolean');
-        // return false;
     }
-    return true;
-};
+}
+export function assertTruthy(value) {
+    if (!value) {
+        throw new Error(`${JSON.stringify(value)} is not truthy`);
+    }
+}
+export function assertIsObject(value) {
+    if (typeof value !== 'object') {
+        throw new Error(`AssertIsObject: Given entity is not an object (type = ${typeof value})`);
+    }
+}

package/dist/mjs/version.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.24.2",
+	"version": "1.26.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.2",
+		"@js-draw/math": "^1.26.0",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.24.2",
+		"@js-draw/build-tool": "^1.26.0",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "32c8db56fc8996c8d485118d1ee37077428344a3"
+	"gitHead": "6529cad584ca93a992f2576a43f25af48da3d707"
 }

package/src/tools/SelectionTool/SelectionTool.scss

@@ -85,12 +85,17 @@
 	> button {
 		max-height: var(--vertical-offset);
 		background-color: var(--background-color-1);
+
+		width: 24px;
+		height: 24px;
+		padding: 6px;
 		font-size: 14px;
+		user-select: none;
+		-webkit-user-select: none;
 
 		color: var(--foreground-color-1);
 		border: 0.5px solid var(--foreground-color-1);
 		border-radius: 3px;
-		padding: 3px;
 		opacity: 0.8;
 
 		&:hover,
@@ -102,6 +107,11 @@
 		}
 
 		transition: 0.2s ease opacity;
+
+		> .icon {
+			width: 100%;
+			height: 100%;
+		}
 	}
 }
 

package/src/tools/util/createMenuOverlay.scss

@@ -32,6 +32,7 @@
 		overflow: clip;
 		border-radius: 6px;
 		box-shadow: 0px 1px 2px var(--shadow-color);
+		background-color: var(--background-color-1);
 	}
 
 	&::backdrop {
@@ -47,7 +48,7 @@
 	padding-top: 6px;
 	padding-bottom: 6px;
 
-	background-color: var(--background-color-1);
+	background-color: transparent;
 	color: var(--foreground-color-1);
 	--icon-color: currentColor;