Merge pull request #60 from Tresjs/bugfix/vector-control-dx

fix: vector control dx
Tresjs · Oct 15, 2023 · e699fdb · e699fdb
2 parents 2a973df + 31d44c5
commit e699fdb
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/src/components/VectorControl.vue b/src/components/VectorControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMouse } from '@vueuse/core'
+import { useKeyModifier, useMouse, useMousePressed } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { isVector2, isVector3, normalizeVectorFlexibleParam } from '../utils/'
 import type { Control } from '../types'
@@ -12,15 +12,37 @@ const props = defineProps<{
 const emit = defineEmits(['change'])
 
 const mouse = useMouse()
+const { pressed } = useMousePressed()
 
 const initialMouseX = ref(0)
 const isMouseDown = ref(false)
 const index = ref(0)
+const focused = ref<number | null>(null) // new ref to track focused input
+const step = ref(1)
+const shiftKeyState = useKeyModifier('Shift')
+const altKeyState = useKeyModifier('Alt')
+
+watch(shiftKeyState, (newValue) => {
+  step.value = newValue ? 10 : 1
+})
+
+watch(altKeyState, (newValue) => {
+  step.value = newValue ? 0.1 : 1
+})
+  
+const onInputFocus = ($index: number) => {
+  focused.value = $index
+}
+
+const onInputBlur = () => {
+  focused.value = null
+}
 
 const onInputMouseDown = (event: MouseEvent, $index: number) => {
   index.value = $index
   initialMouseX.value = event.clientX
   isMouseDown.value = true
+
 }
 
 const onInputMouseUp = (_event: MouseEvent, $index: number) => {
@@ -32,6 +54,12 @@ const onControlMouseUp = () => {
   isMouseDown.value = false
 }
 
+watch(pressed, (newValue) => {
+  if (!newValue) {
+    isMouseDown.value = false
+  }
+})
+
 const calculateSpeed = (diff: number) => Math.floor(Math.abs(diff) / 10)
 
 const vector = computed(() => normalizeVectorFlexibleParam(props.control.value))
@@ -56,10 +84,10 @@ watch(mouse.x, (newValue) => {
     const label = isVector.value ? labels.value[index.value] : index.value
 
     if (diff > 0) {
-      value[label] += 0.1 + speed
+      value[label] += step.value + speed
     }
     else if (diff < 0) {
-      value[label] -= 0.1 + speed
+      value[label] -= step.value + speed
     }
 
     if (props.control.min !== undefined && value < props.control.min) {
@@ -83,22 +111,24 @@ watch(mouse.x, (newValue) => {
     @mouseup="onControlMouseUp()"
   >
     <label class="text-gray-500 w-1/3">{{ label }}</label>
-    <div class="w-2/3 flex justify-between gap-0.5">
+    <div class="relative w-2/3 flex justify-between gap-0.5">
       <div
         v-for="(_subcontrol, $index) in vector"
         :key="label + $index"
         class="flex items-center w-1/3 bg-gray-100 rounded"
+        :class="{ 'w-2/5': focused === $index }" 
       >
         <span
           v-if="labels[$index] && isVector"
           class="font-bold px-1 py-1 text-0.65rem text-gray-300"
         >{{
           labels[$index]
         }}</span>
+
         <input
           :id="`${control.uniqueKey}-${labels[$index]}`"
           type="number"
-          step="0.1"
+          :step="step"
           class="w-full
             px-0
             p-1
@@ -116,6 +146,8 @@ watch(mouse.x, (newValue) => {
           @input="onChange($event, $index)"
           @mousedown="onInputMouseDown($event, $index)"
           @mouseup="onInputMouseUp($event, $index)"
+          @focus="onInputFocus($index)"
+          @blur="onInputBlur"         
         >
       </div>
     </div>

diff --git a/src/components/__snapshots__/Folder.test.ts.snap b/src/components/__snapshots__/Folder.test.ts.snap
@@ -11,10 +11,10 @@ exports[`Folder Controls > should render controls within a folder 1`] = `
       <transition-stub name=\\"slide\\" enteractiveclass=\\" animate-fade-in animate-duration-200 animate-ease-in-out\\" leaveactiveclass=\\" animate-fade-out animate-duration-200 animate-ease-in-out\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
         <div class=\\"bg-white rounded-b pt-4\\" role=\\"menu\\" style=\\"display: none;\\">
           <div class=\\"flex px-4 justify-between gap-1 items-center mb-2\\"><label class=\\"text-gray-500 w-1/3\\">position</label>
-            <div class=\\"w-2/3 flex justify-between gap-0.5\\">
-              <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">x</span><input id=\\"cameraPosition-x\\" type=\\"number\\" step=\\"0.1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
-              <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">y</span><input id=\\"cameraPosition-y\\" type=\\"number\\" step=\\"0.1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
-              <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">z</span><input id=\\"cameraPosition-z\\" type=\\"number\\" step=\\"0.1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
+            <div class=\\"relative w-2/3 flex justify-between gap-0.5\\">
+              <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">x</span><input id=\\"cameraPosition-x\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
+              <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">y</span><input id=\\"cameraPosition-y\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
+              <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">z</span><input id=\\"cameraPosition-z\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
             </div>
           </div>
         </div>

diff --git a/src/components/__snapshots__/VectorControl.test.ts.snap b/src/components/__snapshots__/VectorControl.test.ts.snap
@@ -9,10 +9,10 @@ exports[`Vector Control > should render 3 numeric inputs 1`] = `
     </header>
     <!--v-if-->
     <div class=\\"flex px-4 justify-between gap-1 items-center mb-2\\"><label class=\\"text-gray-500 w-1/3\\">position</label>
-      <div class=\\"w-2/3 flex justify-between gap-0.5\\">
-        <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">x</span><input id=\\"position-x\\" type=\\"number\\" step=\\"0.1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
-        <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">y</span><input id=\\"position-y\\" type=\\"number\\" step=\\"0.1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
-        <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">z</span><input id=\\"position-z\\" type=\\"number\\" step=\\"0.1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
+      <div class=\\"relative w-2/3 flex justify-between gap-0.5\\">
+        <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">x</span><input id=\\"position-x\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
+        <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">y</span><input id=\\"position-y\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
+        <div class=\\"flex items-center w-1/3 bg-gray-100 rounded\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">z</span><input id=\\"position-z\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
       </div>
     </div>
   </div>