From 0ce535fa671bab13f6c1b5cefea69a8d1db5bb27 Mon Sep 17 00:00:00 2001
From: s3xysteak <s3xysteak@outlook.com>
Date: Fri, 11 Oct 2024 18:00:08 +0800
Subject: [PATCH] feat: make options `placement` and `offset` of `useLocated`
 reactive

---
 src/core/components/Located/demo.vue     | 14 ++++++++++++++
 src/core/components/Located/index.vue    | 16 +++++++++++-----
 src/core/composables/useLocated/index.ts | 20 +++++++++++---------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/core/components/Located/demo.vue b/src/core/components/Located/demo.vue
index 9ecfa67..a6d8326 100644
--- a/src/core/components/Located/demo.vue
+++ b/src/core/components/Located/demo.vue
@@ -33,6 +33,9 @@ viewer.entities.add({
     disableDepthTestDistance: Number.POSITIVE_INFINITY,
   },
 })
+
+const left = ref(0)
+const top = ref(0)
 </script>
 
 <template>
@@ -55,6 +58,16 @@ viewer.entities.add({
     <button ml-4 btn @click="state = !state">
       Now {{ state ? 'Show' : 'Hide' }}
     </button>
+
+    <label>
+      left :
+      <input v-model="left" type="number">
+    </label>
+
+    <label>
+      top :
+      <input v-model="top" type="number">
+    </label>
   </div>
 
   <Located
@@ -62,6 +75,7 @@ viewer.entities.add({
     :as="MyButton"
     placement="top"
     :coordinate="coordinate"
+    :offset="{ left, top }"
   >
     <div>
       Hello world!
diff --git a/src/core/components/Located/index.vue b/src/core/components/Located/index.vue
index 757b4a2..eb0b108 100644
--- a/src/core/components/Located/index.vue
+++ b/src/core/components/Located/index.vue
@@ -3,7 +3,7 @@ import type { Nullable } from '@s3xysteak/utils'
 import type { MaybeCoordinates } from '~shared/coordinate'
 import type { Cartesian3 } from 'cesium'
 import { type Component, ref } from 'vue'
-import { useLocated, type UseLocatedOptions } from '~/index'
+import { useLocated, type UseLocatedPlacement } from '~/index'
 
 defineOptions({
   name: 'Located',
@@ -12,9 +12,12 @@ defineOptions({
 const props = withDefaults(defineProps<{
   coordinate: Nullable<Cartesian3 | MaybeCoordinates>
 
-  placement?: UseLocatedOptions['placement']
+  placement?: Nullable<UseLocatedPlacement>
 
-  offset?: UseLocatedOptions['offset']
+  offset?: {
+    left?: Nullable<number>
+    top?: Nullable<number>
+  }
 
   as?: string | Component
 }>(), {
@@ -28,8 +31,11 @@ const el = ref()
 const { style, show } = useLocated(el, {
   state,
   coordinate: () => props.coordinate,
-  offset: props.offset,
-  placement: props.placement,
+  offset: {
+    left: () => props.offset?.left,
+    top: () => props.offset?.top,
+  },
+  placement: () => props.placement,
 })
 </script>
 
diff --git a/src/core/composables/useLocated/index.ts b/src/core/composables/useLocated/index.ts
index c0137e3..6fcd045 100644
--- a/src/core/composables/useLocated/index.ts
+++ b/src/core/composables/useLocated/index.ts
@@ -5,7 +5,7 @@ import { toRefs, useElementBounding } from '@vueuse/core'
 import { computed, type MaybeRefOrGetter, type Ref, ref, toValue } from 'vue'
 import { toCartesian3, useEventHandler, useViewer } from '~/index'
 
-type Placement =
+export type UseLocatedPlacement =
   | 'topLeft'
   | 'top'
   | 'topRight'
@@ -27,10 +27,10 @@ export interface UseLocatedOptions {
   /**
    * @default 'bottomRight'
    */
-  placement: Placement
+  placement: MaybeRefOrGetter<Nullable<UseLocatedPlacement>>
   offset: {
-    left?: number
-    top?: number
+    left?: MaybeRefOrGetter<Nullable<number>>
+    top?: MaybeRefOrGetter<Nullable<number>>
   }
 }
 
@@ -40,11 +40,13 @@ export interface UseLocatedOptions {
  * Component version please use `import { Located } from 'cesium-use'`
  */
 export function useLocated(el: MaybeRefOrGetter<Nullable<HTMLElement>>, options: Partial<UseLocatedOptions> = {}) {
+  const defaultPlacement = 'bottomRight'
+
   const {
     state: _state,
     coordinate: _coordinate,
     initialValue = true,
-    placement = 'bottomRight',
+    placement,
     offset = {},
   } = options
 
@@ -57,7 +59,7 @@ export function useLocated(el: MaybeRefOrGetter<Nullable<HTMLElement>>, options:
 
   const { width, height } = useElementBounding(el)
 
-  const placementMap: Record<Placement, (rect: { width: number, height: number }) => { width: number, height: number }> = {
+  const placementMap: Record<UseLocatedPlacement, (rect: { width: number, height: number }) => { width: number, height: number }> = {
     topLeft: rect => ({
       width: -rect.width,
       height: -rect.height,
@@ -91,14 +93,14 @@ export function useLocated(el: MaybeRefOrGetter<Nullable<HTMLElement>>, options:
     }
     __show.value = true
 
-    const offsetPlacement = placementMap[placement]({
+    const offsetPlacement = placementMap[toValue(placement) ?? defaultPlacement]({
       width: width.value,
       height: height.value,
     })
 
     position.value = {
-      x: pos.x + (offsetPlacement.width ?? 0) + (offset.left ?? 0),
-      y: pos.y + (offsetPlacement.height ?? 0) + (offset.top ?? 0),
+      x: pos.x + (offsetPlacement.width ?? 0) + (toValue(offset.left) ?? 0),
+      y: pos.y + (offsetPlacement.height ?? 0) + (toValue(offset.top) ?? 0),
     }
   })