From 52052a2cf3e32fd6501bd6636ca4baee35fca2a1 Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Tue, 25 Jul 2023 20:53:08 +0800
Subject: [PATCH] fix(rate): movable

---
 src/divider/index.vue    |  2 ++
 src/graphics/index.vue   |  2 ++
 src/grid-guide/index.vue |  2 ++
 src/icon/index.vue       |  2 ++
 src/input/index.vue      |  2 ++
 src/rate/index.vue       | 22 ++++++++++++++--------
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/divider/index.vue b/src/divider/index.vue
index 082ccb3..55aa438 100644
--- a/src/divider/index.vue
+++ b/src/divider/index.vue
@@ -19,6 +19,8 @@ const {
   vertical?: boolean,
 } & GraphicsProps>()
 
+defineSlots<{}>()
+
 const getReactionState = useReactionState(toRef(() => reactions))
 
 function draw(rc: RoughSVG, svg: SVGSVGElement) {
diff --git a/src/graphics/index.vue b/src/graphics/index.vue
index a1c07b7..77dfd01 100644
--- a/src/graphics/index.vue
+++ b/src/graphics/index.vue
@@ -26,6 +26,8 @@ const emit = defineEmits<{
   (event: 'draw', rc: T extends 'canvas' ? RoughCanvas : RoughSVG, element: T extends 'canvas' ? HTMLCanvasElement : SVGSVGElement): void,
 }>()
 
+defineSlots<{}>()
+
 let root = $ref<T extends 'canvas' ? HTMLCanvasElement : SVGSVGElement>()
 
 const parent = $(useParentElement())
diff --git a/src/grid-guide/index.vue b/src/grid-guide/index.vue
index 86ace08..d58ce37 100644
--- a/src/grid-guide/index.vue
+++ b/src/grid-guide/index.vue
@@ -20,6 +20,8 @@ const {
   sectionCells?: number,
 } & ReactionProps>()
 
+defineSlots<{}>()
+
 const getReactionState = useReactionState(toRef(() => reactions))
 
 const root = $ref<HTMLCanvasElement>()
diff --git a/src/icon/index.vue b/src/icon/index.vue
index bb7387b..4a72513 100644
--- a/src/icon/index.vue
+++ b/src/icon/index.vue
@@ -24,6 +24,8 @@ const {
   name: string,
 } & GraphicsProps>()
 
+defineSlots<{}>()
+
 const svgAttrs: Partial<Record<keyof SVGSVGElement, string>> = {
   viewBox: '0 0 24 24',
 }
diff --git a/src/input/index.vue b/src/input/index.vue
index 783b4d4..0a63549 100644
--- a/src/input/index.vue
+++ b/src/input/index.vue
@@ -68,6 +68,8 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: typeof modelValue): void,
 }>()
 
+defineSlots<{}>()
+
 const formItemName = $(inject(nameInjection, ref()))
 
 const name = $computed(() => {
diff --git a/src/rate/index.vue b/src/rate/index.vue
index aee31a9..5978d32 100644
--- a/src/rate/index.vue
+++ b/src/rate/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import '../common/style.scss'
+import { useMouseInElement, useMousePressed } from '@vueuse/core'
 import type { RoughSVG } from 'roughjs/bin/svg'
 import { toRef, watch, watchEffect } from 'vue'
 import { useReactionState } from '../common/utils'
@@ -25,6 +26,8 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: typeof modelValue): void,
 }>()
 
+defineSlots<{}>()
+
 let internalModelValue = $ref(modelValue)
 
 watchEffect(() => {
@@ -77,13 +80,16 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   }
 }
 
+let root = $ref<HTMLLabelElement>()
 let input = $ref<HTMLInputElement>()
 
-function click(event: MouseEvent) {
-  const target = event.target as HTMLLabelElement
-  const width = target.clientWidth
-  const height = target.clientHeight
-  const cursorX = event.offsetX
+const { pressed } = $(useMousePressed({ target: $$(root) }))
+const { elementX } = $(useMouseInElement($$(root)))
+
+watchEffect(() => {
+  if (!root || !pressed) return
+  const width = root.clientWidth
+  const height = root.clientHeight
 
   const baseWidth = 48
   const baseHeight = 45
@@ -91,15 +97,15 @@ function click(event: MouseEvent) {
   const shapeSizeByWidth = (width - padding * 2) / 7
   const shapeSizeByHeight = height - padding * 2 * baseWidth / baseHeight
   const shapeSize = Math.min(shapeSizeByWidth, shapeSizeByHeight)
-  internalModelValue = Math.ceil((cursorX - padding) / (shapeSize * 1.5))
+  internalModelValue = Math.ceil((elementX - padding) / (shapeSize * 1.5))
   if (input) {
     input.focus()
   }
-}
+})
 </script>
 
 <template>
-  <label class="r-rate" @click.self="click">
+  <label ref="root" class="r-rate">
     <input
       ref="input"
       v-model.number="internalModelValue"