traffic-laser/src/views/graphic/geos/arrow.vue

<template>
  <GeoTeleport :menus="menus" class="geo-teleport-use">
    <template v-slot="{ data }">
      <template v-if="data.key === 'color'">
        <ui-input type="color" class="geo-input" v-model="color" />
        <span class="color" :style="{backgroundColor: color}"></span>
      </template>
      <ui-icon type="del" class="icon" v-if="data.key === 'del'" />
      <ui-icon type="del" class="icon" v-if="data.key === 'copy'" />
    </template>

  </GeoTeleport>
</template>

<script setup lang="ts">
import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
import UiInput from "@/components/base/components/input/index.vue";
import UiIcon from "@/components/base/components/icon/index.vue";
import {drawRef, FocusVector, uiType, UIType} from '@/hook/useGraphic'
import {computed, ref, watch, watchEffect} from "vue";
import {dataService} from "@/graphic/Service/DataService";
import GeoActions from "@/graphic/enum/GeoActions"
import {debounce} from "@/utils";

const props = defineProps<{geo: FocusVector}>()
const vector = computed(() => dataService.getLine(props.geo.vectorId))
const color = ref("#000000")
watchEffect(() => {
  color.value = vector.value.arrowColor
})
watch(
  () => [color.value],
  debounce(([color]) => {
    vector.value.setArrowColor(color)
    drawRef.value.renderer.autoRedraw()
  }, 500)
)

const menus = [
  {
    key: 'color',
    text: "颜色"
  },
  {
    key: 'copy',
    text: "复制",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.CopyAction)
      uiType.change(UIType.Copy)
    }
  },
  {
    key: 'del',
    text: "删除",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)
      uiType.change(UIType.Delete)
    }
  }
]

</script>

<style scoped lang="scss">
.color {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.icon {
  font-size: 16px;
}

.geo-input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
}
</style>

<style lang="scss">
.select-floating.select-float.dire-top {
  margin-top: -10px;
}
</style>