js-draw 0.22.0 → 0.23.0

package/dist/mjs/src/tools/SelectionTool/SelectionTool.mjs

@@ -14,6 +14,7 @@ class SelectionTool extends BaseTool {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastEvtTarget = null;
+        this.startPoint = null; // canvas position
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
         this.ctrlKeyPressed = false;
@@ -24,6 +25,9 @@ class SelectionTool extends BaseTool {
         this.handleOverlay.classList.add('handleOverlay');
         editor.notifier.on(EditorEventType.ViewportChanged, _data => {
             var _a;
+            // The selection box could be using the wet ink display if its transformation
+            // hasn't been finalized yet. Clear before updating the UI.
+            this.editor.clearWetInk();
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
@@ -61,6 +65,7 @@ class SelectionTool extends BaseTool {
             current = current.snappedToGrid(this.editor.viewport);
         }
         if (allPointers.length === 1 && current.isPrimary) {
+            this.startPoint = current.canvasPos;
             let transforming = false;
             if (this.lastEvtTarget && this.selectionBox) {
                 if (snapToGrid) {
@@ -86,6 +91,9 @@ class SelectionTool extends BaseTool {
         if (!this.selectionBox)
             return;
         let currentPointer = event.current;
+        if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
+            currentPointer = currentPointer.lockedToXYAxes(this.startPoint, this.editor.viewport);
+        }
         if (this.ctrlKeyPressed) {
             currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
         }

package/dist/mjs/src/util/waitForAll.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+declare const waitForAll: (results: (Promise<void> | void)[]) => Promise<void> | void;
+export default waitForAll;

package/dist/mjs/src/util/waitForAll.mjs

@@ -0,0 +1,15 @@
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+const waitForAll = (results) => {
+    // If any are Promises...
+    if (results.some(command => command && command['then'])) {
+        // Wait for all commands to finish.
+        return Promise.all(results)
+            // Ensure we return a Promise<void> and not a Promise<void[]>
+            .then(() => { });
+    }
+    return;
+};
+export default waitForAll;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.22.0",
+	"version": "0.23.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/src/lib.d.ts",
 	"main": "./dist/cjs/src/lib.js",
@@ -82,32 +82,32 @@
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {
-		"@melloware/coloris": "^0.18.0",
+		"@melloware/coloris": "^0.19.1",
 		"bezier-js": "^6.1.3"
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.5.0",
+		"@types/jest": "^29.5.1",
 		"@types/jsdom": "^21.1.1",
-		"@types/node": "^18.15.11",
-		"@typescript-eslint/eslint-plugin": "^5.57.1",
-		"@typescript-eslint/parser": "^5.57.1",
+		"@types/node": "^20.1.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.2",
+		"@typescript-eslint/parser": "^5.59.2",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.38.0",
+		"eslint": "^8.40.0",
 		"husky": "^8.0.3",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
-		"jsdom": "^21.1.1",
-		"lint-staged": "^13.2.1",
+		"jsdom": "^22.0.0",
+		"lint-staged": "^13.2.2",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.2",
-		"terser-webpack-plugin": "^5.3.7",
+		"terser-webpack-plugin": "^5.3.8",
 		"ts-jest": "^29.1.0",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.24.1",
+		"typedoc": "^0.24.7",
 		"typescript": "^5.0.4",
-		"webpack": "^5.78.0"
+		"webpack": "^5.82.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/toolbar/toolbar.css

@@ -81,6 +81,7 @@
 
 .toolbar-button > label {
 	cursor: inherit;
+	user-select: none;
 }
 
 /* Decrease the font size of labels in the main toolbar if they're long. */
@@ -105,6 +106,7 @@
 
 .toolbar-root .toolbar-icon {
 	flex-shrink: 1;
+	user-select: none;
 
 	width: 100%;
 	min-width: 30px;
@@ -131,7 +133,8 @@
 }
 
 .toolbar-dropdown.hidden,
-.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable)
+		> .toolbar-dropdown:not(.hiding) {
 	display: none;
 }
 
@@ -153,6 +156,37 @@
 	box-shadow: 0px 3px 3px var(--primary-shadow-color);
 }
 
+/* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */
+@keyframes dropdown-transition-in {
+	0% {
+		opacity: 0;
+		transform: scale(1, 0);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dropdown-transition-out {
+	0% {
+		opacity: 1;
+		transform: scale(1, 1);	
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1, 0);
+	}
+}
+
+.toolbar-dropdown {
+	/* Ensure the animation begins from the correct location. */
+	transform-origin: top left;
+
+	--dropdown-show-animation: dropdown-transition-in;
+	--dropdown-hide-animation: dropdown-transition-out;
+}
+
 .toolbar-buttonGroup {
 	display: flex;
 	flex-direction: row;