fix: requestPointerLock prevented clicks on arrow buttons

Mentioned in #118

apps/chrome-extension/package.json

@@ -8,7 +8,7 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "esbuild": "^0.17.16",
+    "esbuild": "^0.17.18",
     "esbuild-svelte": "^0.7.3",
     "pixi-panel": "workspace:*",
     "rimraf": "^5.0.0",

apps/example-phaser-project/package.json

@@ -6,6 +6,6 @@
   },
   "dependencies": {
     "phaser": "^3.60.0",
-    "vite": "^4.2.1"
+    "vite": "^4.3.3"
   }
 }

apps/example-pixi-project/package.json

@@ -6,6 +6,6 @@
   },
   "dependencies": {
     "pixi.js": "^7.2.4",
-    "vite": "^4.2.1"
+    "vite": "^4.3.3"
   }
 }

apps/firefox-extension/package.json

@@ -12,13 +12,13 @@
   },
   "devDependencies": {
     "concurrently": "^8.0.1",
-    "esbuild": "^0.17.16",
+    "esbuild": "^0.17.18",
     "esbuild-svelte": "^0.7.3",
     "pixi-panel": "workspace:*",
     "rimraf": "^5.0.0",
     "svelte": "^3.58.0"
   },
   "dependencies": {
-    "web-ext": "^7.6.1"
+    "web-ext": "^7.6.2"
   }
 }

package.json

@@ -30,13 +30,13 @@
     ]
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.231",
+    "@types/chrome": "^0.0.233",
     "@types/firefox-webext-browser": "^111.0.1",
-    "@types/node": "^18.15.11",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.58.0",
+    "@types/node": "^18.16.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "concurrently": "^8.0.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
@@ -47,11 +47,11 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-svelte3": "^4.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.1",
+    "lint-staged": "^13.2.2",
     "only-allow": "^1.1.1",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.62.0",
+    "sass": "^1.62.1",
     "svelte": "^3.58.0",
     "svelte-check": "^3.2.0",
     "svelte-preprocess": "^5.0.3",

packages/blender-elements/package.json

@@ -10,9 +10,9 @@
   },
   "devDependencies": {
     "@histoire/plugin-svelte": "^0.16.1",
-    "@sveltejs/vite-plugin-svelte": "^2.0.4",
+    "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "histoire": "^0.16.1",
     "svelte": "^3.58.0",
-    "vite": "^4.2.1"
+    "vite": "^4.3.3"
   }
 }

packages/blender-elements/src/NumberField/NumberField.svelte

@@ -105,22 +105,7 @@
   }
 </script>
 
-<div
-  class="number-field"
-  class:active
-  class:focused
-  data-location={location}
-  use:numberDrag={{
-    value,
-    step,
-    min,
-    max,
-    onChange,
-    onClick,
-    onDown,
-    onUp,
-  }}
->
+<div class="number-field" class:active class:focused data-location={location}>
   <input
     class="input"
     {id}
@@ -133,9 +118,22 @@
     on:blur={onBlur}
   />
   {#if !focused && step}
-    <div class="drag" />
-    <button class="arrow left" on:click={onStepDown} />
-    <button class="arrow right" on:click={onStepUp} />
+    <div
+      class="drag"
+      use:numberDrag={{
+        value,
+        step,
+        min,
+        max,
+        onChange,
+        onClick,
+        onDown,
+        onUp,
+      }}
+    >
+      <button class="arrow left" on:click={onStepDown} />
+      <button class="arrow right" on:click={onStepUp} />
+    </div>
   {/if}
 </div>
 

packages/blender-elements/src/actions/numberDrag.ts

@@ -31,7 +31,9 @@ export default function numberDrag(el: HTMLElement, config: Config) {
         ts: Date.now(),
       };
       document.addEventListener("mousemove", onMousemove);
-      requestPointerLock(el);
+      if (e.target === el) {
+        requestPointerLock(el);
+      }
     }
   }