js-draw 1.3.0 → 1.4.0

package/dist/mjs/util/ReactiveValue.mjs

@@ -56,7 +56,7 @@ export class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef ? new 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
@@ -94,7 +94,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 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 childValue = childRef.deref();

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.3.0',
+    number: '1.4.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.3.0",
+  "version": "1.4.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",
@@ -59,16 +59,16 @@
     "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-translation-template": "build-tool build-translation-template",
+    "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.3.0",
+    "@js-draw/math": "^1.4.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.0.2",
+    "@js-draw/build-tool": "^1.4.0",
     "@types/jest": "29.5.3",
     "@types/jsdom": "21.1.1"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "46b3d8f819f8e083f6e3e1d01e027e4311355456"
+  "gitHead": "b520078c16a4d23d9bed4531eafda87bfce3f6b1"
 }

package/src/Editor.scss

@@ -56,6 +56,12 @@
 	}
 }
 
+// Derived colors
+.imageEditorContainer {
+	// Default icon color
+	--icon-color: var(--foreground-color-1);
+}
+
 .imageEditorContainer {
 	color: var(--foreground-color-1);
 	font-family: system-ui, -apple-system, sans-serif;

package/src/toolbar/EdgeToolbar.scss

@@ -118,11 +118,19 @@
 	box-sizing: border-box;
 
 	// Don't allow multiple lines when over a certain width (prefer scrolling)
-	@media screen and (min-width: 610px) {
+	@media screen and (min-width: 540px) {
 		flex-wrap: nowrap;
 
 		> .toolbar-action-row {
 			max-width: 50vw;
+
+			// Because the items are in the same row and a ResizeObserver
+			// can change the size of the other row, we need to ensure that
+			// this component doesn't re-trigger the ResizeObserver callback.
+			//
+			// As such, disable flex grow/shrink:
+			flex-grow: 0;
+			flex-shrink: 0;
 		}
 	}
 
@@ -131,7 +139,7 @@
 		&.one-row > * > .toolbar-toolContainer.label-inline {
 			font-size: 0.9em;
 
-			.toolbar-button {
+			& > .toolbar-button {
 				label {
 					opacity: 0;
 
@@ -145,6 +153,15 @@
 				}
 
 				@include label-visible-on-hover(label);
+
+				// Clear additional margins added because of the left/right side labels.
+				// (Repeat selector to increase specificity).
+				& > .toolbar-icon.toolbar-icon {
+					margin-left: 0;
+					margin-right: 0;
+				}
+
+				width: var(--toolbar-button-size);
 			}
 		}
 	}

package/src/tools/SelectionTool/SelectionTool.scss

@@ -0,0 +1,74 @@
+
+.selection-tool-selection-background {
+	background-color: var(--selection-background-color);
+	opacity: 0.5;
+	overflow: visible;
+	position: absolute;
+}
+
+.selection-tool-handle {
+	border: 1px solid var(--foreground-color-1);
+	background: var(--background-color-1);
+	position: absolute;
+
+	box-sizing: border-box;
+	padding: 3px;
+
+	& .icon {
+		width: 100%;
+		height: 100%;
+	}
+
+	&.selection-tool-circle {
+		border-radius: 100%;
+	}
+
+	&.selection-tool-rotate {
+		cursor: grab;
+	}
+}
+
+.selection-tool-handle {
+	&.selection-tool-resize-x {
+		cursor: ew-resize;
+	}
+
+	&.selection-tool-resize-y {
+		cursor: ns-resize;
+	}
+
+	&.selection-tool-resize-xy {
+		cursor: nw-resize;
+	}
+}
+
+.selection-tool-rotated-near-perpendicular .selection-tool-handle {
+	&.selection-tool-resize-x {
+		cursor: ns-resize;
+	}
+
+	&.selection-tool-resize-y {
+		cursor: ew-resize;
+	}
+
+	&.selection-tool-resize-xy {
+		cursor: sw-resize;
+	}
+}
+
+.overlay.handleOverlay {
+	height: 0;
+	overflow: visible;
+}
+
+@keyframes selection-duplicated-animation {
+	0% { scale: 1 1; }
+	50% { scale: 1.02 1.02; }
+	100% { scale: 1 1; }
+}
+
+/* Do not run the animation when the user has disabled motion animations. */
+@media (prefers-reduced-motion: reduce) {
+	@keyframes selection-duplicated-animation {
+	}
+}

package/src/tools/tools.scss

@@ -1,5 +1,5 @@
 
 @use "./ScrollbarTool.scss";
-@use "./SelectionTool/SelectionTool.css";
+@use "./SelectionTool/SelectionTool.scss";
 @use "./FindTool.css";
 @use "./SoundUITool.scss";

package/src/tools/SelectionTool/SelectionTool.css

@@ -1,35 +0,0 @@
-
-.selection-tool-selection-background {
-	background-color: var(--selection-background-color);
-	opacity: 0.5;
-	overflow: visible;
-	position: absolute;
-}
-
-.selection-tool-handle {
-	border: 1px solid var(--foreground-color-1);
-	background: var(--background-color-1);
-	position: absolute;
-	cursor: grab;
-}
-
-.selection-tool-handle.selection-tool-circle {
-	border-radius: 100%;
-}
-
-.overlay.handleOverlay {
-	height: 0;
-	overflow: visible;
-}
-
-@keyframes selection-duplicated-animation {
-	0% { transform: scale(1, 1); }
-	50% { transform: scale(1.02, 1.02); }
-	100% { transform: scale(1, 1); }
-}
-
-/* Do not run the animation when the user has disabled motion animations. */
-@media (prefers-reduced-motion: reduce) {
-	@keyframes selection-duplicated-animation {
-	}
-}