From fefe5b6b2a8698d23d408416f51795c197770015 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver.mak@naxos.com>
Date: Fri, 1 Nov 2024 15:17:58 +0800
Subject: [PATCH 01/11] Change to use vue-movable

---
 app/components/DraggableWindow.vue    | 113 ++++++++-----
 app/components/editors/SongEditor.vue |   6 +-
 package.json                          |   1 +
 pnpm-lock.yaml                        | 218 ++++++++++++++++++++++++++
 4 files changed, 294 insertions(+), 44 deletions(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 741dd8d2..8bc4258a 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -1,60 +1,69 @@
 <script setup lang="ts">
+import Moveable from 'vue3-moveable'
+
 interface Props {
   x?: number
   y?: number
   maxInset?: number
+  resizable?: boolean
+  id: string
 }
 const props = withDefaults(defineProps<Props>(), {
   x: 0,
   y: 0,
   maxInset: 0,
+  resizable: false,
 })
 
-let stickRight = false
-let stickBottom = false
+// let stickRight = false
+// let stickBottom = false
 
 const dragWindow = ref<HTMLElement | null>(null)
 const dragHandle = ref<HTMLElement | null>(null)
+const dragContent = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
 
-const { x: dragX, y: dragY, style, isDragging } = useDraggable(dragWindow, {
-  initialValue: { x: props.x, y: props.y },
-  handle: dragHandle,
-  preventDefault: true,
-  onEnd() {
-    stickRight = false
-    stickBottom = false
-    limitPosition()
-  },
-})
+// const { x: dragX, y: dragY, style, isDragging } = useDraggable(dragWindow, {
+//   initialValue: { x: props.x, y: props.y },
+//   handle: dragHandle,
+//   preventDefault: true,
+//   onEnd() {
+//     stickRight = false
+//     stickBottom = false
+//     limitPosition()
+//   },
+// })
 // #endregion
 
 // #region : Avoid the window stayed outside
-const { width: windowWidth, height: windowHeight } = useWindowSize()
-const dragWindowBounding = useElementBounding(dragWindow)
+// const { width: windowWidth, height: windowHeight } = useWindowSize()
+// const dragWindowBounding = useElementBounding(dragWindow)
 
-function limitPosition() {
-  if (dragWindowBounding.left.value < props.maxInset) {
-    dragX.value = props.maxInset
-  }
-  else if (stickRight || dragWindowBounding.right.value > windowWidth.value - props.maxInset) {
-    dragX.value = windowWidth.value - props.maxInset - dragWindowBounding.width.value
-    stickRight = true
-  }
+// function limitPosition() {
+//   if (dragWindowBounding.left.value < props.maxInset) {
+//     dragX.value = props.maxInset
+//   }
+//   else if (stickRight || dragWindowBounding.right.value > windowWidth.value - props.maxInset) {
+//     dragX.value = windowWidth.value - props.maxInset - dragWindowBounding.width.value
+//     stickRight = true
+//   }
 
-  if (dragWindowBounding.top.value < props.maxInset) {
-    dragY.value = props.maxInset
-  }
-  else if (stickBottom || dragWindowBounding.bottom.value > windowHeight.value - props.maxInset) {
-    dragY.value = windowHeight.value - props.maxInset - dragWindowBounding.height.value
-    stickBottom = true
-  }
-}
+//   if (dragWindowBounding.top.value < props.maxInset) {
+//     dragY.value = props.maxInset
+//   }
+//   else if (stickBottom || dragWindowBounding.bottom.value > windowHeight.value - props.maxInset) {
+//     dragY.value = windowHeight.value - props.maxInset - dragWindowBounding.height.value
+//     stickBottom = true
+//   }
+// }
 
-onMounted(() => {
-  const limitPositionDebounced = useDebounceFn(limitPosition, 250)
-  useEventListener('resize', limitPositionDebounced, { passive: true })
-})
+// onMounted(() => {
+//   const limitPositionDebounced = useDebounceFn(limitPosition, 250)
+//   useEventListener('resize', limitPositionDebounced, { passive: true })
+// })
 // #endregion
+
+const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
 </script>
 
 <template>
@@ -64,18 +73,36 @@ onMounted(() => {
     :class="{
       'pointer-events-none': isDragging,
     }"
-    fixed
-    :style
-    z-floating
+    fixed left-0 top-0 z-floating
   >
     <div
-      ref="dragHandle"
-      class="@hover:(bg-gray/10 op100)"
-      flex="~ items-center justify-center"
-      draggable pointer-events-auto mxa w-20 cursor-move rounded-full op25
+      ref="dragContent"
+      class="drag-content"
+      :style="{
+        left: `${x}px`,
+        top: `${y}px`,
+      }"
+      absolute
     >
-      <div i-mdi-drag-horizontal ma text-size-xl />
+      <div
+        ref="dragHandle"
+        class="drag-handle @hover:(bg-gray/10 op100)"
+        flex="~ items-center justify-center"
+        draggable pointer-events-auto mxa w-20 cursor-move rounded-full op25
+      >
+        <div i-mdi-drag-horizontal ma text-size-xl />
+      </div>
+      <slot />
     </div>
-    <slot />
+    <Moveable
+      ref="moveableRef"
+      :draggable="true"
+      :target="dragContent"
+      :drag-target="dragHandle"
+      :origin="false"
+      @drag="e => e.target.style.transform = e.transform"
+      @drag-start="isDragging = true"
+      @drag-end="isDragging = false"
+    />
   </div>
 </template>
diff --git a/app/components/editors/SongEditor.vue b/app/components/editors/SongEditor.vue
index c368cac7..cf0e3f7c 100644
--- a/app/components/editors/SongEditor.vue
+++ b/app/components/editors/SongEditor.vue
@@ -307,7 +307,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <DraggableWindow :x="windowWidth - 32 - 480" :y="60">
+  <DraggableWindow
+    id="yt-video"
+    :x="windowWidth - 32 - 480"
+    :y="60"
+  >
     <div flex="~ col">
       <YouTubePlayer w-120 rounded-lg border="~ base" />
       <div flex="~ gap-2 items-center" mt--2 w-max self-end p1 px2 text-sm floating-glass>
diff --git a/package.json b/package.json
index 18d78279..9ed38597 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "uqr": "^0.1.2",
     "valibot": "^0.42.1",
     "vue-virtual-scroller": "2.0.0-beta.8",
+    "vue3-moveable": "^0.28.0",
     "weq8": "^0.2.2"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b45adf6..98f20250 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       vue-virtual-scroller:
         specifier: 2.0.0-beta.8
         version: 2.0.0-beta.8(vue@3.5.6(typescript@5.6.3))
+      vue3-moveable:
+        specifier: ^0.28.0
+        version: 0.28.0
       weq8:
         specifier: ^0.2.2
         version: 0.2.2
@@ -403,6 +406,9 @@ packages:
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
 
+  '@cfcs/core@0.0.6':
+    resolution: {integrity: sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==}
+
   '@clack/core@0.3.4':
     resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
 
@@ -415,6 +421,9 @@ packages:
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
 
+  '@daybrush/utils@1.13.0':
+    resolution: {integrity: sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==}
+
   '@dprint/formatter@0.3.0':
     resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
 
@@ -424,6 +433,18 @@ packages:
   '@dprint/toml@0.6.2':
     resolution: {integrity: sha512-Mk5unEANsL/L+WHYU3NpDXt1ARU5bNU5k5OZELxaJodDycKG6RoRnSlZXpW6+7UN2PSnETAFVUdKrh937ZwtHA==}
 
+  '@egjs/agent@2.4.4':
+    resolution: {integrity: sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==}
+
+  '@egjs/children-differ@1.0.1':
+    resolution: {integrity: sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==}
+
+  '@egjs/component@3.0.5':
+    resolution: {integrity: sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==}
+
+  '@egjs/list-differ@1.0.1':
+    resolution: {integrity: sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==}
+
   '@es-joy/jsdoccomment@0.48.0':
     resolution: {integrity: sha512-G6QUWIcC+KvSwXNsJyDTHvqUdNoAVJPPgkc3+Uk4WBKqZvoXhlvazOgm9aL0HwihJLQf0l+tOE2UFzXBqCqgDw==}
     engines: {node: '>=16'}
@@ -1579,6 +1600,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@scena/dragscroll@1.4.0':
+    resolution: {integrity: sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==}
+
+  '@scena/event-emitter@1.0.5':
+    resolution: {integrity: sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==}
+
+  '@scena/matrix@1.1.1':
+    resolution: {integrity: sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==}
+
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
@@ -2520,6 +2550,17 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  croact-css-styled@1.1.9:
+    resolution: {integrity: sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==}
+
+  croact-moveable@0.9.0:
+    resolution: {integrity: sha512-fc3bieV6CdqqZFtzsSLi9KmvUMFW3oakUfhPCls1BxKjOfUfn8rktteGED2341A/Qghy8tI3Hm6SdocIc68IKg==}
+    peerDependencies:
+      croact: ^1.0.4
+
+  croact@1.0.4:
+    resolution: {integrity: sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==}
+
   croner@8.1.1:
     resolution: {integrity: sha512-1VdUuRnQP4drdFkS8NKvDR1NBgevm8TOuflcaZEKsxw42CxonjW/2vkj1AKlinJb4ZLwBcuWF9GiPr7FQc6AQA==}
     engines: {node: '>=18.0'}
@@ -2549,6 +2590,12 @@ packages:
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
+  css-styled@1.0.8:
+    resolution: {integrity: sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==}
+
+  css-to-mat@1.1.1:
+    resolution: {integrity: sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==}
+
   css-tree@2.2.1:
     resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -3183,6 +3230,9 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framework-utils@1.1.0:
+    resolution: {integrity: sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==}
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -3219,6 +3269,9 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  gesto@1.19.4:
+    resolution: {integrity: sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -3668,6 +3721,12 @@ packages:
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
+  keycode@2.2.1:
+    resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
+
+  keycon@1.4.0:
+    resolution: {integrity: sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -4051,6 +4110,9 @@ packages:
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
+  moveable@0.53.0:
+    resolution: {integrity: sha512-71jS9zIoQzMhnNvduhg4tUEdm23+fO/40FN7muVMbZvVwbTku2MIxxLhnU4qFvxI4oVxn75l79SbtgjuA+s7Pw==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -4242,6 +4304,9 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  overlap-area@1.1.0:
+    resolution: {integrity: sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==}
+
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -4647,6 +4712,15 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
+  react-css-styled@1.1.9:
+    resolution: {integrity: sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==}
+
+  react-moveable@0.56.0:
+    resolution: {integrity: sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==}
+
+  react-selecto@1.26.3:
+    resolution: {integrity: sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==}
+
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -4796,6 +4870,9 @@ packages:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
 
+  selecto@1.26.3:
+    resolution: {integrity: sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==}
+
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -5605,6 +5682,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-moveable@0.28.0:
+    resolution: {integrity: sha512-vplQO0XkxVEtXMDh2/lZE+c5kMycGXAfYFMvbwFKi8UVYzVk8MTgVHr4fxO9Z+4i4Rb+U/IEIgkhHRMAbx8FJg==}
+
   vue@3.5.6:
     resolution: {integrity: sha512-zv+20E2VIYbcJOzJPUWp03NOGFhMmpCKOfSxVTmCYyYFFko48H9tmuQFzYj7tu4qX1AeXlp9DmhIP89/sSxxhw==}
     peerDependencies:
@@ -6029,6 +6109,10 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@cfcs/core@0.0.6':
+    dependencies:
+      '@egjs/component': 3.0.5
+
   '@clack/core@0.3.4':
     dependencies:
       picocolors: 1.1.0
@@ -6044,12 +6128,24 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@daybrush/utils@1.13.0': {}
+
   '@dprint/formatter@0.3.0': {}
 
   '@dprint/markdown@0.17.5': {}
 
   '@dprint/toml@0.6.2': {}
 
+  '@egjs/agent@2.4.4': {}
+
+  '@egjs/children-differ@1.0.1':
+    dependencies:
+      '@egjs/list-differ': 1.0.1
+
+  '@egjs/component@3.0.5': {}
+
+  '@egjs/list-differ@1.0.1': {}
+
   '@es-joy/jsdoccomment@0.48.0':
     dependencies:
       comment-parser: 1.4.1
@@ -7234,6 +7330,19 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.0':
     optional: true
 
+  '@scena/dragscroll@1.4.0':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+
+  '@scena/event-emitter@1.0.5':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
+  '@scena/matrix@1.1.1':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
   '@sec-ant/readable-stream@0.4.1': {}
 
   '@shikijs/core@1.21.0':
@@ -8498,6 +8607,35 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  croact-css-styled@1.1.9:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
+
+  croact-moveable@0.9.0(croact@1.0.4):
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      croact: 1.0.4
+      croact-css-styled: 1.1.9
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-moveable: 0.56.0
+
+  croact@1.0.4:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/list-differ': 1.0.1
+
   croner@8.1.1: {}
 
   cronstrue@2.50.0: {}
@@ -8522,6 +8660,15 @@ snapshots:
       domutils: 3.1.0
       nth-check: 2.1.1
 
+  css-styled@1.0.8:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
+  css-to-mat@1.1.1:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/matrix': 1.1.1
+
   css-tree@2.2.1:
     dependencies:
       mdn-data: 2.0.28
@@ -9328,6 +9475,8 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framework-utils@1.1.0: {}
+
   fresh@0.5.2: {}
 
   fs-extra@11.2.0:
@@ -9363,6 +9512,11 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  gesto@1.19.4:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+
   get-caller-file@2.0.5: {}
 
   get-func-name@2.0.2: {}
@@ -9819,6 +9973,15 @@ snapshots:
       readable-stream: 2.3.8
       setimmediate: 1.0.5
 
+  keycode@2.2.1: {}
+
+  keycon@1.4.0:
+    dependencies:
+      '@cfcs/core': 0.0.6
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      keycode: 2.2.1
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -10384,6 +10547,14 @@ snapshots:
       pkg-types: 1.2.0
       ufo: 1.5.4
 
+  moveable@0.53.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      croact: 1.0.4
+      croact-moveable: 0.9.0(croact@1.0.4)
+      react-moveable: 0.56.0
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -10769,6 +10940,10 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  overlap-area@1.1.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -11117,6 +11292,31 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.3
 
+  react-css-styled@1.1.9:
+    dependencies:
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
+
+  react-moveable@0.56.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-selecto: 1.26.3
+
+  react-selecto@1.26.3:
+    dependencies:
+      selecto: 1.26.3
+
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -11303,6 +11503,19 @@ snapshots:
       extend-shallow: 2.0.1
       kind-of: 6.0.3
 
+  selecto@1.26.3:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/children-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      css-styled: 1.0.8
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      keycon: 1.4.0
+      overlap-area: 1.1.0
+
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -12202,6 +12415,11 @@ snapshots:
       vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.6(typescript@5.6.3))
       vue-resize: 2.0.0-alpha.1(vue@3.5.6(typescript@5.6.3))
 
+  vue3-moveable@0.28.0:
+    dependencies:
+      framework-utils: 1.1.0
+      moveable: 0.53.0
+
   vue@3.5.6(typescript@5.6.3):
     dependencies:
       '@vue/compiler-dom': 3.5.6

From 4ab79f497231ee3a10919a2ac98736b72da9dda1 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver.mak@naxos.com>
Date: Fri, 1 Nov 2024 17:52:14 +0800
Subject: [PATCH 02/11] Bounding and Relocate when out of screen on resizing
 window

---
 app/components/DraggableWindow.vue | 115 +++++++++++++++--------------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 8bc4258a..77cec478 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Moveable from 'vue3-moveable'
+import Moveable, { type OnDragEnd, type OnDragStart } from 'vue3-moveable'
 
 interface Props {
   x?: number
@@ -15,72 +15,64 @@ const props = withDefaults(defineProps<Props>(), {
   resizable: false,
 })
 
-// let stickRight = false
-// let stickBottom = false
+const posX = ref(props.x)
+const posY = ref(props.y)
 
 const dragWindow = ref<HTMLElement | null>(null)
 const dragHandle = ref<HTMLElement | null>(null)
-const dragContent = ref<HTMLElement | null>(null)
 const isDragging = ref(false)
 
-// const { x: dragX, y: dragY, style, isDragging } = useDraggable(dragWindow, {
-//   initialValue: { x: props.x, y: props.y },
-//   handle: dragHandle,
-//   preventDefault: true,
-//   onEnd() {
-//     stickRight = false
-//     stickBottom = false
-//     limitPosition()
-//   },
-// })
-// #endregion
-
 // #region : Avoid the window stayed outside
-// const { width: windowWidth, height: windowHeight } = useWindowSize()
-// const dragWindowBounding = useElementBounding(dragWindow)
+const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
 
-// function limitPosition() {
-//   if (dragWindowBounding.left.value < props.maxInset) {
-//     dragX.value = props.maxInset
-//   }
-//   else if (stickRight || dragWindowBounding.right.value > windowWidth.value - props.maxInset) {
-//     dragX.value = windowWidth.value - props.maxInset - dragWindowBounding.width.value
-//     stickRight = true
-//   }
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+const dragWindowBounding = useElementBounding(dragWindow)
 
-//   if (dragWindowBounding.top.value < props.maxInset) {
-//     dragY.value = props.maxInset
-//   }
-//   else if (stickBottom || dragWindowBounding.bottom.value > windowHeight.value - props.maxInset) {
-//     dragY.value = windowHeight.value - props.maxInset - dragWindowBounding.height.value
-//     stickBottom = true
-//   }
-// }
+function limitPosition() {
+  let x = dragWindowBounding.left.value
+  let y = dragWindowBounding.top.value
+  if (dragWindowBounding.left.value < props.maxInset) {
+    x = props.maxInset
+  }
+  else if (dragWindowBounding.right.value > windowWidth.value - props.maxInset) {
+    x = Math.max(windowWidth.value - props.maxInset - dragWindowBounding.width.value, 0)
+  }
 
-// onMounted(() => {
-//   const limitPositionDebounced = useDebounceFn(limitPosition, 250)
-//   useEventListener('resize', limitPositionDebounced, { passive: true })
-// })
-// #endregion
+  if (dragWindowBounding.top.value < props.maxInset) {
+    y = props.maxInset
+  }
+  else if (dragWindowBounding.bottom.value > windowHeight.value - props.maxInset) {
+    y = Math.max(windowHeight.value - props.maxInset - dragWindowBounding.height.value, 0)
+  }
+  moveableRef.value?.request('draggable', { x, y }, true)
+}
 
-const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
+function handleDragStart() {
+  isDragging.value = true
+}
+function handleDragEnd() {
+  isDragging.value = false
+}
+
+onMounted(() => {
+  const limitPositionDebounced = useDebounceFn(limitPosition, 250)
+  useEventListener('resize', limitPositionDebounced, { passive: true })
+})
+// #endregion
 </script>
 
 <template>
-  <div
-    ref="dragWindow"
-    class="draggable-window"
-    :class="{
-      'pointer-events-none': isDragging,
-    }"
-    fixed left-0 top-0 z-floating
-  >
+  <Teleport to="body">
     <div
-      ref="dragContent"
-      class="drag-content"
+      ref="dragWindow"
+      class="drag-window"
+      :class="{
+        'pointer-events-none': isDragging,
+        'pointer-events-auto': !isDragging,
+      }"
       :style="{
-        left: `${x}px`,
-        top: `${y}px`,
+        left: `${posX}px`,
+        top: `${posY}px`,
       }"
       absolute
     >
@@ -88,7 +80,7 @@ const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
         ref="dragHandle"
         class="drag-handle @hover:(bg-gray/10 op100)"
         flex="~ items-center justify-center"
-        draggable pointer-events-auto mxa w-20 cursor-move rounded-full op25
+        draggable mxa w-20 cursor-move rounded-full op25
       >
         <div i-mdi-drag-horizontal ma text-size-xl />
       </div>
@@ -97,12 +89,21 @@ const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
     <Moveable
       ref="moveableRef"
       :draggable="true"
-      :target="dragContent"
+      :snappable="true"
+      :target="dragWindow"
       :drag-target="dragHandle"
+      :throttle-drag="3"
       :origin="false"
+      :bounds="{
+        left: 1,
+        right: 1,
+        top: 1,
+        bottom: 1,
+        position: 'css',
+      }"
       @drag="e => e.target.style.transform = e.transform"
-      @drag-start="isDragging = true"
-      @drag-end="isDragging = false"
+      @drag-start="handleDragStart"
+      @drag-end="handleDragEnd"
     />
-  </div>
+  </Teleport>
 </template>

From c2bd63ffa18101b1829364510c1bb97f076cfd99 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Sat, 2 Nov 2024 23:22:28 +0800
Subject: [PATCH 03/11] Resizable and Snappable

---
 app/components/DraggableWindow.vue    | 97 +++++++++++++++++++--------
 app/components/editors/SongEditor.vue | 20 ++++--
 2 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 77cec478..b3c02dd5 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -1,25 +1,32 @@
 <script setup lang="ts">
-import Moveable, { type OnDragEnd, type OnDragStart } from 'vue3-moveable'
+import Moveable, { type OnDragEnd, type OnDragStart, type OnResize, type OnResizeEnd, type OnResizeStart } from 'vue3-moveable'
 
 interface Props {
   x?: number
   y?: number
+  initialWidth?: number
+  initialHeight?: number
+  minWidth?: number
+  minHeight?: number
   maxInset?: number
   resizable?: boolean
-  id: string
 }
 const props = withDefaults(defineProps<Props>(), {
   x: 0,
   y: 0,
-  maxInset: 0,
+  initialWidth: 240,
+  initialHeight: 240,
+  maxInset: 7,
   resizable: false,
 })
 
-const posX = ref(props.x)
-const posY = ref(props.y)
+const pos = readonly({
+  x: props.x,
+  y: props.y,
+})
 
-const dragWindow = ref<HTMLElement | null>(null)
-const dragHandle = ref<HTMLElement | null>(null)
+const dragWindow = useTemplateRef<HTMLElement>('dragWindow')
+const dragHandle = useTemplateRef<HTMLElement>('dragHandle')
 const isDragging = ref(false)
 
 // #region : Avoid the window stayed outside
@@ -47,18 +54,22 @@ function limitPosition() {
   moveableRef.value?.request('draggable', { x, y }, true)
 }
 
-function handleDragStart() {
-  isDragging.value = true
-}
-function handleDragEnd() {
-  isDragging.value = false
-}
-
 onMounted(() => {
   const limitPositionDebounced = useDebounceFn(limitPosition, 250)
   useEventListener('resize', limitPositionDebounced, { passive: true })
 })
 // #endregion
+
+// #region : Resizable
+function handleResize(e: OnResize) {
+  e.target.style.width = `${e.width}px`
+  e.target.style.height = `${e.height}px`
+  e.target.style.transform = e.drag.transform
+}
+function handleResizeStart(e: OnResizeStart) {
+  e.setMin([240, 160])
+}
+// #endregion
 </script>
 
 <template>
@@ -71,16 +82,20 @@ onMounted(() => {
         'pointer-events-auto': !isDragging,
       }"
       :style="{
-        left: `${posX}px`,
-        top: `${posY}px`,
+        '--moveable-left': `${pos.x}px`,
+        '--moveable-top': `${pos.y}px`,
+        '--moveable-width': resizable ? `${props.initialWidth}px` : undefined,
+        '--moveable-height': resizable ? `${props.initialHeight}px` : undefined,
       }"
-      absolute
+      absolute h-full w-full
+      v-bind="$attrs"
     >
       <div
         ref="dragHandle"
-        class="drag-handle @hover:(bg-gray/10 op100)"
+        class="drag-handle left-50% top-0 transform-translate-x--50% transform-translate-y--100% @hover:(bg-gray/10 op100)"
         flex="~ items-center justify-center"
-        draggable mxa w-20 cursor-move rounded-full op25
+
+        draggable absolute mxa h-6 w-20 cursor-move rounded-full op25
       >
         <div i-mdi-drag-horizontal ma text-size-xl />
       </div>
@@ -88,22 +103,48 @@ onMounted(() => {
     </div>
     <Moveable
       ref="moveableRef"
-      :draggable="true"
-      :snappable="true"
       :target="dragWindow"
+      :origin="false"
+      :draggable="true"
       :drag-target="dragHandle"
       :throttle-drag="3"
-      :origin="false"
+      :resizable="true"
+      :throttle-resize="3"
+      :snappable="true"
       :bounds="{
-        left: 1,
-        right: 1,
-        top: 1,
-        bottom: 1,
+        left: 7,
+        right: 7,
+        top: 31,
+        bottom: 7,
         position: 'css',
       }"
+      :style="{
+        '--bounds-color': 'transparent',
+        '--moveable-color': 'transparent',
+        'opacity': 'var(--moveable-control-opacity, 0)',
+        'transition': 'opacity .15s ease',
+      }"
+      @resize="handleResize"
+      @resize-start="handleResizeStart"
       @drag="e => e.target.style.transform = e.transform"
-      @drag-start="handleDragStart"
-      @drag-end="handleDragEnd"
+      @drag-start="isDragging = true"
+      @drag-end="isDragging = false"
     />
   </Teleport>
 </template>
+
+<style>
+.drag-window {
+  left: var(--moveable-left);
+  top: var(--moveable-top);
+  width: var(--moveable-width);
+  height: var(--moveable-height);
+}
+.drag-window:hover + .moveable-control-box,
+.moveable-control-box:hover {
+  --moveable-control-opacity: 1;
+}
+.moveable-control-box .moveable-control {
+  background: rgba(0 0 0 / 0.5) !important;
+}
+</style>
diff --git a/app/components/editors/SongEditor.vue b/app/components/editors/SongEditor.vue
index cf0e3f7c..47247207 100644
--- a/app/components/editors/SongEditor.vue
+++ b/app/components/editors/SongEditor.vue
@@ -308,13 +308,16 @@ onMounted(() => {
 
 <template>
   <DraggableWindow
-    id="yt-video"
+    id="editor-video"
     :x="windowWidth - 32 - 480"
-    :y="60"
+    :y="84"
+    :initial-width="480"
+    :initial-height="300"
+    resizable
   >
-    <div flex="~ col">
-      <YouTubePlayer w-120 rounded-lg border="~ base" />
-      <div flex="~ gap-2 items-center" mt--2 w-max self-end p1 px2 text-sm floating-glass>
+    <div flex="~ col" relative h-full w-full pb-6.5>
+      <YouTubePlayer h-full w-full rounded-lg border="~ base" />
+      <div flex="~ gap-2 items-center" absolute bottom-0 mt--2 self-end p1 px2 text-sm floating-glass>
         <!-- <IconButton
           :icon="controls.status.value === 'playing' ? 'i-uil-pause' : 'i-uil-play'"
           @click="controls.toggle()"
@@ -488,3 +491,10 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style>
+#editor-video iframe {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

From f89524f2b9c8abf21e6d211f7a6a949b94060283 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Sat, 2 Nov 2024 23:31:25 +0800
Subject: [PATCH 04/11] Able to reset on double click handle

---
 app/components/DraggableWindow.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index b3c02dd5..0121bc84 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Moveable, { type OnDragEnd, type OnDragStart, type OnResize, type OnResizeEnd, type OnResizeStart } from 'vue3-moveable'
+import Moveable, { type OnDrag, type OnDragEnd, type OnDragStart, type OnResize, type OnResizeEnd, type OnResizeStart } from 'vue3-moveable'
 
 interface Props {
   x?: number
@@ -27,7 +27,14 @@ const pos = readonly({
 
 const dragWindow = useTemplateRef<HTMLElement>('dragWindow')
 const dragHandle = useTemplateRef<HTMLElement>('dragHandle')
+
+// #region : Draggable
 const isDragging = ref(false)
+function handleDrag(e: OnDrag) {
+  isDragging.value = true
+  e.target.style.transform = e.transform
+}
+// #endregion
 
 // #region : Avoid the window stayed outside
 const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
@@ -70,6 +77,19 @@ function handleResizeStart(e: OnResizeStart) {
   e.setMin([240, 160])
 }
 // #endregion
+
+// #region : Reset
+function reset() {
+  if (!dragWindow.value || !moveableRef.value)
+    return
+  dragWindow.value.style.top = ''
+  dragWindow.value.style.left = ''
+  dragWindow.value.style.width = ''
+  dragWindow.value.style.height = ''
+  dragWindow.value.style.transform = ''
+  moveableRef.value.updateRect()
+}
+// #endregion
 </script>
 
 <template>
@@ -96,6 +116,7 @@ function handleResizeStart(e: OnResizeStart) {
         flex="~ items-center justify-center"
 
         draggable absolute mxa h-6 w-20 cursor-move rounded-full op25
+        @dblclick.left="reset"
       >
         <div i-mdi-drag-horizontal ma text-size-xl />
       </div>
@@ -126,8 +147,7 @@ function handleResizeStart(e: OnResizeStart) {
       }"
       @resize="handleResize"
       @resize-start="handleResizeStart"
-      @drag="e => e.target.style.transform = e.transform"
-      @drag-start="isDragging = true"
+      @drag="handleDrag"
       @drag-end="isDragging = false"
     />
   </Teleport>

From 5c74378da5598ba21974e8ae07eb923c119a0db0 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Sat, 2 Nov 2024 23:33:09 +0800
Subject: [PATCH 05/11] Update resize control style

---
 app/components/DraggableWindow.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 0121bc84..76265f20 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -160,7 +160,9 @@ function reset() {
   width: var(--moveable-width);
   height: var(--moveable-height);
 }
-.drag-window:hover + .moveable-control-box,
+.drag-window:hover + .moveable-control-box {
+  --moveable-control-opacity: 0.2;
+}
 .moveable-control-box:hover {
   --moveable-control-opacity: 1;
 }

From 903e61a02947c2d476effd3429740ee40d80946a Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Sat, 2 Nov 2024 23:39:48 +0800
Subject: [PATCH 06/11] Fix `resizable` prop not functional

---
 app/components/DraggableWindow.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 76265f20..57fa4547 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -104,8 +104,8 @@ function reset() {
       :style="{
         '--moveable-left': `${pos.x}px`,
         '--moveable-top': `${pos.y}px`,
-        '--moveable-width': resizable ? `${props.initialWidth}px` : undefined,
-        '--moveable-height': resizable ? `${props.initialHeight}px` : undefined,
+        '--moveable-width': `${props.initialWidth}px`,
+        '--moveable-height': `${props.initialHeight}px`,
       }"
       absolute h-full w-full
       v-bind="$attrs"
@@ -114,7 +114,6 @@ function reset() {
         ref="dragHandle"
         class="drag-handle left-50% top-0 transform-translate-x--50% transform-translate-y--100% @hover:(bg-gray/10 op100)"
         flex="~ items-center justify-center"
-
         draggable absolute mxa h-6 w-20 cursor-move rounded-full op25
         @dblclick.left="reset"
       >
@@ -129,7 +128,7 @@ function reset() {
       :draggable="true"
       :drag-target="dragHandle"
       :throttle-drag="3"
-      :resizable="true"
+      :resizable="resizable"
       :throttle-resize="3"
       :snappable="true"
       :bounds="{

From 8a099a2793bbfc8ffd9b49750beac8e8a632de1f Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Sat, 2 Nov 2024 23:46:15 +0800
Subject: [PATCH 07/11] Remove unused import

---
 app/components/DraggableWindow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 57fa4547..5d62ceea 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Moveable, { type OnDrag, type OnDragEnd, type OnDragStart, type OnResize, type OnResizeEnd, type OnResizeStart } from 'vue3-moveable'
+import Moveable, { type OnDrag, type OnResize, type OnResizeStart } from 'vue3-moveable'
 
 interface Props {
   x?: number

From 4f09af5afed95e59ec4a584132108279cfa44a1a Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Mon, 4 Nov 2024 02:06:45 +0800
Subject: [PATCH 08/11] Revise the hovering style

---
 app/components/DraggableWindow.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 5d62ceea..b2814659 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -141,8 +141,6 @@ function reset() {
       :style="{
         '--bounds-color': 'transparent',
         '--moveable-color': 'transparent',
-        'opacity': 'var(--moveable-control-opacity, 0)',
-        'transition': 'opacity .15s ease',
       }"
       @resize="handleResize"
       @resize-start="handleResizeStart"
@@ -159,13 +157,16 @@ function reset() {
   width: var(--moveable-width);
   height: var(--moveable-height);
 }
-.drag-window:hover + .moveable-control-box {
-  --moveable-control-opacity: 0.2;
-}
+.drag-window:hover + .moveable-control-box,
 .moveable-control-box:hover {
-  --moveable-control-opacity: 1;
+  --moveable-control-opacity: 0.2;
 }
 .moveable-control-box .moveable-control {
+  opacity: var(--moveable-control-opacity, 0);
   background: rgba(0 0 0 / 0.5) !important;
+  transition: opacity 150ms ease;
+}
+.moveable-control-box .moveable-control:hover {
+  --moveable-control-opacity: 1;
 }
 </style>

From acdfab5762ac6de9fe844e41f5d1155a5b2b963c Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Wed, 6 Nov 2024 02:18:44 +0800
Subject: [PATCH 09/11] Change to `position: fixed`

---
 app/components/DraggableWindow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index b2814659..cac8d3ab 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -107,7 +107,7 @@ function reset() {
         '--moveable-width': `${props.initialWidth}px`,
         '--moveable-height': `${props.initialHeight}px`,
       }"
-      absolute h-full w-full
+      fixed h-full w-full
       v-bind="$attrs"
     >
       <div

From 0175c6aa1b1987297259066e3a66ae54d15bd444 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Wed, 6 Nov 2024 02:23:04 +0800
Subject: [PATCH 10/11] Limit max width and height

---
 app/components/DraggableWindow.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index cac8d3ab..27fedc36 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -156,6 +156,9 @@ function reset() {
   top: var(--moveable-top);
   width: var(--moveable-width);
   height: var(--moveable-height);
+  max-width: calc(100vw - 14px);
+  max-height: calc(100vh - 38px);
+  max-height: calc(100dvh - 38px);
 }
 .drag-window:hover + .moveable-control-box,
 .moveable-control-box:hover {

From c327c47cec31c03b6c35d190d7c113ea79d31d20 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver139.working@gmail.com>
Date: Wed, 6 Nov 2024 02:27:51 +0800
Subject: [PATCH 11/11] Avoid the window place outside on resetting

---
 app/components/DraggableWindow.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 27fedc36..bed4658a 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -87,6 +87,7 @@ function reset() {
   dragWindow.value.style.width = ''
   dragWindow.value.style.height = ''
   dragWindow.value.style.transform = ''
+  limitPosition()
   moveableRef.value.updateRect()
 }
 // #endregion