js-draw 1.25.0 → 1.27.1

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

@@ -1,5 +1,9 @@
 import type { Rect2, Point2 } from '@js-draw/math';
 import Pointer from '../../Pointer';
+export declare enum SelectionMode {
+    Lasso = "lasso",
+    Rectangle = "rect"
+}
 export declare enum ResizeMode {
     Both = 0,
     HorizontalOnly = 1,

package/dist/mjs/tools/SelectionTool/types.mjs

@@ -1,3 +1,8 @@
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["Lasso"] = "lasso";
+    SelectionMode["Rectangle"] = "rect";
+})(SelectionMode || (SelectionMode = {}));
 export var ResizeMode;
 (function (ResizeMode) {
     ResizeMode[ResizeMode["Both"] = 0] = "Both";

package/dist/mjs/tools/TextTool.mjs

@@ -158,12 +158,15 @@ 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);
@@ -203,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/tools/lib.d.ts

@@ -7,7 +7,7 @@ export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
-export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectionTool, SelectionMode } from './SelectionTool/SelectionTool';
 export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool, EraserMode } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';

package/dist/mjs/tools/lib.mjs

@@ -7,7 +7,7 @@ export  { default as ToolSwitcherShortcut }  from './ToolSwitcherShortcut.mjs';
 export  { default as PanZoomTool, PanZoomMode }  from './PanZoom.mjs';
 export  { default as PenTool }  from './Pen.mjs';
 export  { default as TextTool }  from './TextTool.mjs';
-export  { default as SelectionTool }  from './SelectionTool/SelectionTool.mjs';
+export  { default as SelectionTool, SelectionMode }  from './SelectionTool/SelectionTool.mjs';
 export  { default as SelectAllShortcutHandler }  from './SelectionTool/SelectAllShortcutHandler.mjs';
 export  { default as EraserTool, EraserMode }  from './Eraser.mjs';
 export  { default as PasteHandler }  from './PasteHandler.mjs';

package/dist/mjs/util/ReactiveValue.mjs

@@ -69,9 +69,7 @@ export class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef
-            ? new window.WeakRef(result)
-            : { deref: () => result };
+        const resultRef = typeof WeakRef !== 'undefined' ? new WeakRef(result) : { deref: () => result };
         for (const value of sourceValues) {
             const listener = value.onUpdate(() => {
                 // Use resultRef to allow `result` to be garbage collected
@@ -114,9 +112,7 @@ export class ReactiveValue {
 export 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 = typeof WeakRef !== 'undefined' ? new WeakRef(child) : { deref: () => child };
         // When the source is updated...
         const sourceListener = sourceValue.onUpdate((newValue) => {
             const childValue = childRef.deref();

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.25.0',
+    number: '1.27.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.25.0",
+	"version": "1.27.1",
 	"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.25.0",
+		"@js-draw/math": "^1.27.1",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.25.0",
+		"@js-draw/build-tool": "^1.27.1",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "8ecc7be6d8b1b00c25fe7d3ed6c5fee239451dfa"
+	"gitHead": "e11574b7b329e7867358c400457a3d99b1d2c469"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -340,7 +340,7 @@
 		transition: 0.2s ease box-shadow;
 
 		&:not(:disabled):hover {
-			box-shadow: 0 1px 2px var(--shadow-color);
+			box-shadow: 0 0px 2px var(--shadow-color);
 		}
 
 		&:disabled {
@@ -360,6 +360,11 @@
 		@include labelVisibleOnHover.label-visible-on-hover('label > .button-label-text');
 	}
 
+	.toolbar-button-grid button {
+		--button-label-hover-offset-y: 0;
+		@include labelVisibleOnHover.label-visible-on-hover('label');
+	}
+
 	.toolbar-help-overlay-button {
 		align-items: last baseline;
 	}

package/src/toolbar/widgets/components/components.scss

@@ -4,3 +4,4 @@
 @use './makeFileInput.scss';
 @use './makeGridSelector.scss';
 @use './makeSnappedList.scss';
+@use './makeButtonGrid.scss';

package/src/toolbar/widgets/components/makeButtonGrid.scss

@@ -0,0 +1,25 @@
+.toolbar-button-grid {
+	display: grid;
+	grid-template-columns: repeat(var(--column-count), 1fr);
+	justify-items: center;
+	--button-size: 30px;
+
+	> .button {
+		font-size: 1em;
+		width: min-content;
+
+		> .icon {
+			max-width: var(--button-size);
+			max-height: var(--button-size);
+
+			// Ensures that all icons have the same base size
+			width: 48px;
+			height: 48px;
+		}
+
+		> label {
+			display: block;
+			font-weight: normal;
+		}
+	}
+}

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%;
+		}
 	}
 }
 
@@ -146,6 +156,7 @@
 
 		&.-empty {
 			opacity: 0;
+			display: none;
 		}
 
 		&.-hide-handles .selection-tool-handle {

package/src/tools/util/createMenuOverlay.scss

@@ -31,7 +31,8 @@
 
 		overflow: clip;
 		border-radius: 6px;
-		box-shadow: 0px 1px 2px var(--shadow-color);
+		box-shadow: 0px 0px 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;
 
@@ -65,9 +66,10 @@
 		width: 1em;
 		height: 1em;
 		flex-shrink: 0;
+		align-self: center;
 
 		// RTL support:
 		margin-inline-start: 0em;
-		margin-inline-end: 0.25em;
+		margin-inline-end: 0.32em;
 	}
 }