UPD: Refine pixel bar

src/components/device-gui/PixelBarTest.vue

@@ -2,6 +2,10 @@
 import { ref, computed } from 'vue'
 import { Input } from '@/components/ui/input'
 
+const model = defineModel()
+
+const bar = ref(null);
+
 const width = ref(160)
 const count = ref(40)
 const percent = ref(60)
@@ -13,55 +17,70 @@ const rect_width = computed(() => {
   return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
 })
 const current_pos = computed(() => {
-  return Math.round((percent.value / 100) * count.value)
+  return Math.round((percent.value / 100) * (count.value - 1))
 })
+function onMouseDown() {
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+function onMouseMove(e) {
+  const rect = bar.value.getBoundingClientRect()
+  percent.value = Math.max(0, Math.min(Math.round((e.clientX - rect.left - 9) / (width.value - 6) * 100), 100))
+  model.value = percent.value
+}
+function onMouseUp() {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+}
 </script>
 
 <template>
   <div class="flex-1 flex flex-col justify-center items-center my-2">
     {{ current_pos }}
-    <svg xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
+    <span @mousedown="onMouseDown">
-      <g>
+      <svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
-        <rect
+        <g>
-          v-for="(_, i) in count"
-          :key="`key${i}`"
-          :style="`fill:${i < current_pos ? '#fff' : '#4a4a4a'}`"
-          :width="rect_width"
-          :height="i===0 || i===count-1 ? 8 : 5"
-          :x="6+gap_width+i*(rect_width+gap_width)"
-          y="0" />
-        <g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
           <rect
-            style="fill:#000"
+            v-for="(_, i) in count"
-            :width="6"
+            :key="`key${i}`"
-            height="13"
+            :style="`fill:${i < current_pos ? '#fff' : '#4a4a4a'}`"
-            x="0"
+            :width="rect_width"
-            y="0"
+            :height="i===0 || i===count-1 ? 8 : 5"
-          />
+            :x="6+gap_width+i*(rect_width+gap_width)"
-          <rect
+            y="0" />
-            style="fill:#c66936"
+          <g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
-            :width="2"
+            <rect
-            height="11"
+              style="fill:#000"
-            :x="2"
+              :width="6"
-            y="0"
+              height="13"
-          />
+              x="0"
-          <rect
+              y="0"
-            style="fill:#c66936"
+            />
-            :width="2"
+            <rect
-            :height="2"
+              style="fill:#c66936"
-            x="0"
+              :width="2"
-            y="11"
+              height="11"
-          />
+              :x="2"
-          <rect
+              y="0"
-            style="fill:#c66936"
+            />
-            :width="2"
+            <rect
-            :height="2"
+              style="fill:#c66936"
-            :x="4"
+              :width="2"
-            y="11"
+              :height="2"
-          />
+              x="0"
+              y="11"
+            />
+            <rect
+              style="fill:#c66936"
+              :width="2"
+              :height="2"
+              :x="4"
+              y="11"
+            />
+          </g>
         </g>
-      </g>
+      </svg>
-    </svg>
+    </span>
     <div v-if="show_controls  ">
       <Input v-model="percent" type="number" min="0" max="100" placeholder="Fill" class="m-2" />
       <Input v-model="count" type="number" min="1" placeholder="Count" class="m-2" />