js-draw 1.21.3 → 1.23.1

package/dist/mjs/util/ReactiveValue.mjs

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _ReactiveValueImpl_value, _ReactiveValueImpl_onUpdateListeners;
 const noOpUpdateListenerResult = {
-    remove() { }
+    remove() { },
 };
 /**
  * An update listener that does nothing. Useful for reactive values
@@ -37,8 +37,8 @@ const noOpSetUpdateListener = () => {
 export 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);
             });
@@ -53,7 +53,7 @@ export class ReactiveValue {
         return {
             get: () => value,
             onUpdate: noOpSetUpdateListener,
-            onUpdateAndNow: callback => {
+            onUpdateAndNow: (callback) => {
                 callback(value);
                 return noOpUpdateListenerResult;
             },
@@ -69,7 +69,9 @@ export 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
@@ -88,12 +90,12 @@ export 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) {
@@ -105,16 +107,18 @@ export class ReactiveValue {
     }
     static union(values) {
         return ReactiveValue.fromCallback(() => {
-            return values.map(value => value.get());
+            return values.map((value) => value.get());
         }, values);
     }
 }
 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 = 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]);
@@ -127,7 +131,7 @@ export 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,
@@ -164,7 +168,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/mjs/util/adjustEditorThemeForContrast.mjs

@@ -73,8 +73,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] : Color4.fromString(styles.getPropertyValue(var1));
-        let color2 = updatedColors[var2] ? updatedColors[var2] : Color4.fromString(styles.getPropertyValue(var2));
+        let color1 = updatedColors[var1]
+            ? updatedColors[var1]
+            : Color4.fromString(styles.getPropertyValue(var1));
+        let color2 = updatedColors[var2]
+            ? updatedColors[var2]
+            : Color4.fromString(styles.getPropertyValue(var2));
         // Ensure that color1 has the lesser luminance
         if (color1.relativeLuminance() < color2.relativeLuminance()) {
             const tmp = color1;

package/dist/mjs/util/cloneElementWithStyles.mjs

@@ -10,7 +10,7 @@ const cloneElementWithStyles = (element) => {
         for (let index = 0; index < originalComputedStyle.length; index++) {
             const propertyName = originalComputedStyle.item(index);
             const propertyValue = originalComputedStyle.getPropertyValue(propertyName);
-            clonedElement.style.setProperty(propertyName, propertyValue);
+            clonedElement.style?.setProperty(propertyName, propertyValue);
         }
         for (let i = 0; i < originalElement.children.length; i++) {
             const originalChild = originalElement.children.item(i);

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

@@ -0,0 +1,62 @@
+type ElementTagNames = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
+/**
+ * Maps from known elment tag names to options that can be set with .setAttribute.
+ * New elements/properties should be added as necessary.
+ */
+interface ElementToPropertiesMap {
+    path: {
+        d: string;
+        fill: string;
+        stroke: string;
+        transform: string;
+    };
+    rect: {
+        stroke: string;
+        fill: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        transform: string;
+    };
+    pattern: {
+        viewBox: string;
+        width: string;
+        height: string;
+        patternUnits: 'userSpaceOnUse';
+    };
+    stop: {
+        offset: string;
+        'stop-color': string;
+    };
+    svg: {
+        viewBox: `${number} ${number} ${number} ${number}`;
+    };
+}
+type EmptyObject = Record<never, never>;
+type ElementProperties<Tag extends ElementTagNames> = Tag extends keyof ElementToPropertiesMap ? Partial<ElementToPropertiesMap[Tag]> : EmptyObject;
+/** Contains options for creating an element with tag = `Tag`. */
+type ElementConfig<Tag extends ElementTagNames> = ElementProperties<Tag> & {
+    id?: string;
+    children?: (HTMLElement | SVGElement)[];
+};
+/**
+ * Maps from element tag names (e.g. `Tag='button'`) to the corresponding element type
+ * (e.g. `HTMLButtonElement`).
+ */
+type ElementTagToType<Tag extends ElementTagNames> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : never;
+export declare enum ElementNamespace {
+    Html = "html",
+    Svg = "svg"
+}
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+declare const createElement: <Tag extends ElementTagNames>(tag: Tag, props: ElementConfig<Tag>, elementType?: ElementNamespace) => ElementTagToType<Tag>;
+export declare const createSvgElement: <Tag extends keyof SVGElementTagNameMap>(tag: Tag, props: ElementConfig<Tag>) => ElementTagToType<Tag>;
+export declare const createSvgElements: <Tag extends keyof SVGElementTagNameMap>(tag: Tag, elements: ElementConfig<Tag>[]) => ElementTagToType<Tag>[];
+export declare const createSvgPaths: (...paths: ElementConfig<"path">[]) => SVGPathElement[];
+export default createElement;

package/dist/mjs/util/createElement.mjs

@@ -0,0 +1,47 @@
+export var ElementNamespace;
+(function (ElementNamespace) {
+    ElementNamespace["Html"] = "html";
+    ElementNamespace["Svg"] = "svg";
+})(ElementNamespace || (ElementNamespace = {}));
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+const createElement = (tag, props, elementType = ElementNamespace.Html) => {
+    let elem;
+    if (elementType === ElementNamespace.Html) {
+        elem = document.createElement(tag);
+    }
+    else if (elementType === ElementNamespace.Svg) {
+        elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    }
+    else {
+        throw new Error(`Unknown element type ${elementType}`);
+    }
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'children')
+            continue;
+        if (typeof value !== 'string' && typeof value !== 'number') {
+            throw new Error(`Unsupported value type ${typeof value}`);
+        }
+        elem.setAttribute(key, value.toString());
+    }
+    if (props.children) {
+        for (const item of props.children) {
+            elem.appendChild(item);
+        }
+    }
+    return elem;
+};
+export const createSvgElement = (tag, props) => {
+    return createElement(tag, props, ElementNamespace.Svg);
+};
+export const createSvgElements = (tag, elements) => {
+    return elements.map((props) => createSvgElement(tag, props));
+};
+export const createSvgPaths = (...paths) => {
+    return createSvgElements('path', paths);
+};
+export default createElement;

package/dist/mjs/util/guessKeyCodeFromKey.mjs

@@ -1,7 +1,7 @@
 // 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/mjs/util/listenForKeyboardEventsFrom.mjs

@@ -19,7 +19,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 {
@@ -45,10 +45,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;
             });
@@ -58,17 +59,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/mjs/util/waitForAll.mjs

@@ -6,11 +6,11 @@
  */
 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/mjs/util/waitForImageLoaded.mjs

@@ -1,12 +1,12 @@
 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/mjs/util/waitForTimeout.mjs

@@ -1,6 +1,6 @@
 /** Returns a promise that resolves after `timeout` milliseconds. */
 const waitForTimeout = (timeout) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         setTimeout(() => resolve(), timeout);
     });
 };

package/dist/mjs/version.mjs

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

package/package.json

@@ -1,90 +1,90 @@
 {
-  "name": "js-draw",
-  "version": "1.21.3",
-  "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",
-  "exports": {
-    ".": {
-      "types": "./dist/mjs/lib.d.ts",
-      "import": "./dist/mjs/lib.mjs",
-      "require": "./dist/cjs/lib.js"
-    },
-    "./styles": {
-      "default": "./src/styles.js"
-    },
-    "./Editor.css": {
-      "default": "./dist/Editor.css"
-    },
-    "./bundle": {
-      "types": "./dist/mjs/bundle/bundled.d.ts",
-      "default": "./dist/bundle.js"
-    },
-    "./bundledStyles": {
-      "default": "./dist/bundledStyles.js"
-    },
-    "./Editor": {
-      "types": "./dist/mjs/Editor.d.ts",
-      "require": "./dist/cjs/Editor.js",
-      "default": "./dist/mjs/Editor.mjs"
-    },
-    "./types": {
-      "types": "./dist/mjs/types.d.ts",
-      "default": "./dist/mjs/types.mjs"
-    },
-    "./localization": {
-      "types": "./dist/mjs/localization.d.ts",
-      "require": "./dist/cjs/localization.js",
-      "default": "./dist/mjs/localization.mjs"
-    },
-    "./components": {
-      "types": "./dist/mjs/components/lib.d.ts",
-      "require": "./dist/cjs/components/lib.js",
-      "default": "./dist/mjs/components/lib.mjs"
-    },
-    "./commands": {
-      "types": "./dist/mjs/commands/lib.d.ts",
-      "require": "./dist/cjs/commands/lib.js",
-      "default": "./dist/mjs/commands/lib.mjs"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/personalizedrefrigerator/js-draw.git"
-  },
-  "author": "Henry Heino",
-  "license": "MIT",
-  "scripts": {
-    "dist-test": "cd dist-test/test_imports && yarn install && yarn run test",
-    "dist": "yarn run build && yarn run dist-test",
-    "build": "build-tool build",
-    "watch": "build-tool watch",
-    "build-translation-templates": "build-tool build-translation-templates",
-    "prepack": "yarn run dist && cd ../../ && yarn run test && cd packages/js-draw && ts-node tools/copyREADME.ts copy",
-    "postpack": "ts-node tools/copyREADME.ts revert"
-  },
-  "dependencies": {
-    "@js-draw/math": "^1.21.3",
-    "@melloware/coloris": "0.22.0"
-  },
-  "devDependencies": {
-    "@js-draw/build-tool": "^1.21.3",
-    "@types/jest": "29.5.5",
-    "@types/jsdom": "21.1.3"
-  },
-  "bugs": {
-    "url": "https://github.com/personalizedrefrigerator/js-draw/issues"
-  },
-  "homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
-  "directories": {
-    "doc": "docs"
-  },
-  "keywords": [
-    "ink",
-    "drawing",
-    "pen",
-    "freehand",
-    "svg"
-  ],
-  "gitHead": "2b11a1efafeeb3b84effb7d849343d273df371f8"
+	"name": "js-draw",
+	"version": "1.23.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",
+	"exports": {
+		".": {
+			"types": "./dist/mjs/lib.d.ts",
+			"import": "./dist/mjs/lib.mjs",
+			"require": "./dist/cjs/lib.js"
+		},
+		"./styles": {
+			"default": "./src/styles.js"
+		},
+		"./Editor.css": {
+			"default": "./dist/Editor.css"
+		},
+		"./bundle": {
+			"types": "./dist/mjs/bundle/bundled.d.ts",
+			"default": "./dist/bundle.js"
+		},
+		"./bundledStyles": {
+			"default": "./dist/bundledStyles.js"
+		},
+		"./Editor": {
+			"types": "./dist/mjs/Editor.d.ts",
+			"require": "./dist/cjs/Editor.js",
+			"default": "./dist/mjs/Editor.mjs"
+		},
+		"./types": {
+			"types": "./dist/mjs/types.d.ts",
+			"default": "./dist/mjs/types.mjs"
+		},
+		"./localization": {
+			"types": "./dist/mjs/localization.d.ts",
+			"require": "./dist/cjs/localization.js",
+			"default": "./dist/mjs/localization.mjs"
+		},
+		"./components": {
+			"types": "./dist/mjs/components/lib.d.ts",
+			"require": "./dist/cjs/components/lib.js",
+			"default": "./dist/mjs/components/lib.mjs"
+		},
+		"./commands": {
+			"types": "./dist/mjs/commands/lib.d.ts",
+			"require": "./dist/cjs/commands/lib.js",
+			"default": "./dist/mjs/commands/lib.mjs"
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/personalizedrefrigerator/js-draw.git"
+	},
+	"author": "Henry Heino",
+	"license": "MIT",
+	"scripts": {
+		"dist-test": "cd dist-test/test_imports && yarn install && yarn run test",
+		"dist": "yarn run build && yarn run dist-test",
+		"build": "build-tool build",
+		"watch": "build-tool watch",
+		"build-translation-templates": "build-tool build-translation-templates",
+		"prepack": "yarn run dist && cd ../../ && yarn run test && cd packages/js-draw && ts-node tools/copyREADME.ts copy",
+		"postpack": "ts-node tools/copyREADME.ts revert"
+	},
+	"dependencies": {
+		"@js-draw/math": "^1.23.1",
+		"@melloware/coloris": "0.22.0"
+	},
+	"devDependencies": {
+		"@js-draw/build-tool": "^1.23.1",
+		"@types/jest": "29.5.5",
+		"@types/jsdom": "21.1.3"
+	},
+	"bugs": {
+		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"
+	},
+	"homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
+	"directories": {
+		"doc": "docs"
+	},
+	"keywords": [
+		"ink",
+		"drawing",
+		"pen",
+		"freehand",
+		"svg"
+	],
+	"gitHead": "e0bb3336d5f3a94533c823906778d39a4880f4cf"
 }

package/src/Coloris.css

@@ -1,4 +1,3 @@
-
 /* Imports Coloris' CSS and makes additional changes to the color picker */
 
 #clr-picker {
@@ -6,7 +5,8 @@
 }
 
 /* Coloris: Try to avoid scrolling instead of updating the color input. */
-#clr-picker #clr-color-area, #clr-picker .clr_hue {
+#clr-picker #clr-color-area,
+#clr-picker .clr_hue {
 	touch-action: none;
 }
 
@@ -17,13 +17,13 @@
 }
 
 /* Increase size of input thumb to make it easier to select colors. */
-#clr-picker.clr-picker input[type="range"]::-moz-range-thumb {
+#clr-picker.clr-picker input[type='range']::-moz-range-thumb {
 	width: var(--clr-slider-size);
 	height: var(--clr-slider-size);
 }
 
 /* Also apply to Chrome/iOS */
-#clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {
+#clr-picker.clr-picker input[type='range']::-webkit-slider-thumb {
 	/*
 	 Note: This doesn't seem to take effect in iOS if it's combined with the
 	       ::-moz-range-thumb rule above
@@ -32,11 +32,11 @@
 	height: var(--clr-slider-size);
 }
 
-#clr-picker.clr-picker input[type="range"]::-webkit-slider-runnable-track {
+#clr-picker.clr-picker input[type='range']::-webkit-slider-runnable-track {
 	height: var(--clr-slider-size);
 }
 
-#clr-picker.clr-picker input[type="range"]::-moz-range-track {
+#clr-picker.clr-picker input[type='range']::-moz-range-track {
 	height: var(--clr-slider-size);
 }
 

package/src/Editor.scss

@@ -1,4 +1,3 @@
-
 @use './toolbar/toolbar.scss';
 @use './tools/tools.scss';
 @use './dialogs/dialogs.scss';
@@ -64,9 +63,12 @@
 
 .imageEditorContainer {
 	color: var(--foreground-color-1);
-	font-family: system-ui, -apple-system, sans-serif;
+	font-family:
+		system-ui,
+		-apple-system,
+		sans-serif;
 	background-color: var(--background-color-1);
-	
+
 	// Set the width/height to a value that's independent of its content -- avoids
 	// ResizeObserver errors: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
 	width: 100%;
@@ -99,7 +101,7 @@
 	min-height: 100px;
 	min-width: 0;
 	width: 100%;
-	height:	100%;
+	height: 100%;
 }
 
 .imageEditorContainer .imageEditorRenderArea canvas {
@@ -180,4 +182,4 @@
 		width: 100%;
 		height: initial;
 	}
-}
+}

package/src/dialogs/dialogs.scss

@@ -1,4 +1,3 @@
-
 @use './makeAboutDialog.scss';
 @use './makeMessageDialog.scss';
 
@@ -8,7 +7,7 @@
 		color: var(--foreground-color-1);
 		border: none;
 		outline: none;
-	
+
 		box-shadow: 0 0 2px var(--shadow-color);
 		border-radius: 8px;
 
@@ -19,7 +18,7 @@
 		&::backdrop {
 			backdrop-filter: blur(5px);
 			-webkit-backdrop-filter: blur(5px);
-			background-color: var( --background-color-transparent);
+			background-color: var(--background-color-transparent);
 		}
 	}
-}
+}

package/src/dialogs/makeAboutDialog.scss

@@ -1,4 +1,3 @@
-
 .about-dialog-content > .scroll {
 	white-space: pre-wrap;
 	font-family: monospace;
@@ -7,7 +6,8 @@
 		cursor: pointer;
 	}
 
-	& > h2, & > details > summary {
+	& > h2,
+	& > details > summary {
 		margin-top: 15px;
 
 		font-size: 1.2em;