From 1315b3a36b7318cc36570b5eec45f335abf7da08 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sat, 11 Dec 2021 08:43:21 -0500
Subject: [PATCH] [+] Color picker window dragging

---
 src/views/Projects.vue          |  2 +-
 src/views/color/ColorPicker.vue | 27 +++++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 9d64d6d..6e20d55 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="Projects">
-        <ColorPicker style="margin-top: 10px" v-model:color="color"></ColorPicker>
+        <ColorPicker v-model:color="color"></ColorPicker>
         <button @click="log"></button>
     </div>
 </template>
diff --git a/src/views/color/ColorPicker.vue b/src/views/color/ColorPicker.vue
index d1b438e..74b9c37 100644
--- a/src/views/color/ColorPicker.vue
+++ b/src/views/color/ColorPicker.vue
@@ -1,7 +1,7 @@
 <template>
-    <div id="ColorPicker">
+    <div id="ColorPicker" ref="window">
         <div id="title-colors" class="fbox-h">
-            <div>Colors</div>
+            <div @mousedown="windowDrag">Colors</div>
             <input v-model="colorInput" spellcheck="false" @change="colorModel = colorInput">
         </div>
         <ColorPicker id="picker" :isWidget="true" pickerType="chrome" v-model:pureColor="colorModel"
@@ -48,6 +48,29 @@ export default class MyColorPicker extends Vue
         this.$emit('updateColor', c)
     }
 
+    /**
+     * Window dragging
+     */
+    windowDrag(e: MouseEvent): void
+    {
+        e.preventDefault()
+
+        const el = this.$refs.window as HTMLElement
+        let lastX = e.clientX, lastY = e.clientY
+
+        document.onmouseup = () => {document.onmousemove = null; document.onmouseup = null}
+        document.onmousemove = (e) =>
+        {
+            const dx = lastX - e.clientX, dy = lastY - e.clientY
+            lastX = e.clientX; lastY = e.clientY
+            el.style.left = (el.offsetLeft - dx) + 'px'
+            el.style.top = (el.offsetTop - dy) + 'px'
+        }
+    }
+
+    /**
+     * Left click to override
+     */
     setPalette(i: number, j: number): void
     {
         this.palette[i][j] = this.colorModel