feat(ui): make color picker movable (#577)

Signed-off-by: Mathis Mensing <[email protected]>
fluidd-core · Mar 16, 2022 · a8c16af · a8c16af
1 parent 4cf6f43
commit a8c16af
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/src/components/ui/AppColorPicker.vue b/src/components/ui/AppColorPicker.vue
@@ -28,7 +28,17 @@
         $circle
       </v-icon>
     </template>
-    <v-card>
+    <v-card ref="card">
+      <v-card-title
+        v-if="title"
+        class="card-heading mb-2"
+        style="cursor: move"
+        @mousedown="startMouseDrag"
+        @touchstart="startTouchDrag"
+        @touchmove="pointerMove"
+      >
+        {{ title }}
+      </v-card-title>
       <v-card-text>
         <v-icon
           :color="primaryColor.hexString"
@@ -120,7 +130,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
 import iro from '@jaames/iro'
 import { IroColor } from '@irojs/iro-core'
@@ -136,6 +146,11 @@ interface AppColor {
   rgb: RgbwColor;
 }
 
+interface PointerPosition {
+  x: number;
+  y: number;
+}
+
 @Component({
   components: {}
 })
@@ -155,6 +170,12 @@ export default class AppColorPicker extends Vue {
 
   menu = false
 
+  @Ref('card')
+  card!: Vue
+
+  dragging = false
+  lastPointerPosition: PointerPosition = { x: 0, y: 0 }
+
   primaryColor: AppColor = {
     hexString: '#ffffff',
     rgb: { r: 255, g: 255, b: 255 }
@@ -262,6 +283,59 @@ export default class AppColorPicker extends Vue {
   debouncedChange (channel: string, color: IroColor) {
     this.$emit('change', { channel, color })
   }
+
+  startMouseDrag (event: MouseEvent) {
+    this.dragging = true
+    this.lastPointerPosition = { x: event.clientX, y: event.clientY }
+  }
+
+  stopMouseDrag () {
+    this.dragging = false
+  }
+
+  startTouchDrag (event: TouchEvent) {
+    this.lastPointerPosition = { x: event.touches[0].clientX, y: event.touches[0].clientY }
+  }
+
+  relativeMove (newPosition: PointerPosition) {
+    const parent = this.card.$el.parentElement as HTMLElement
+
+    parent.style.left = (parseFloat(parent.style.left) + (newPosition.x - this.lastPointerPosition.x)) + 'px'
+    parent.style.top = (parseFloat(parent.style.top) + (newPosition.y - this.lastPointerPosition.y)) + 'px'
+  }
+
+  pointerMove (event: TouchEvent | MouseEvent) {
+    let newPosition
+    if (event instanceof TouchEvent) {
+      event.preventDefault()
+      newPosition = { x: event.touches[0].clientX, y: event.touches[0].clientY }
+    } else if (this.dragging) {
+      newPosition = { x: event.clientX, y: event.clientY }
+    } else {
+      return
+    }
+
+    this.relativeMove(newPosition)
+    this.lastPointerPosition = newPosition
+  }
+
+  preventSelection (event: Event) {
+    if (this.dragging) {
+      event.preventDefault()
+    }
+  }
+
+  mounted () {
+    window.addEventListener('mousemove', this.pointerMove)
+    window.addEventListener('mouseup', this.stopMouseDrag)
+    window.addEventListener('selectstart', this.preventSelection)
+  }
+
+  beforeUnmount () {
+    window.removeEventListener('mousemove', this.pointerMove)
+    window.removeEventListener('mouseup', this.stopMouseDrag)
+    window.removeEventListener('selectstart', this.preventSelection)
+  }
 }
 </script>
 

diff --git a/src/components/widgets/outputs/OutputLed.vue b/src/components/widgets/outputs/OutputLed.vue
@@ -14,6 +14,7 @@
       <app-color-picker
         :primary="primaryColor"
         :white="whiteColor"
+        :title="led.prettyName"
         dot
         @change="handleColorChange"
       />