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

<template>
  <GeoTeleport :menus="menus" class="geo-teleport-use" :active="typeMenus && menus[1]">
    <template v-slot="{ data }">
      <template v-if="data.key === 'color'">
        <Color v-model:color="color">
          <span class="color" :style="{backgroundColor: color}"></span>
        </Color>
      </template>
    </template>
  </GeoTeleport>
  <GeoTeleport :menus="typeMenus" v-if="typeMenus" class="type-geo" :active="typeMenus.find(menu => menu.key === type)" />
</template>

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

const props = defineProps<{geo: FocusVector}>()
const vector = computed(() => dataService.getLine(props.geo.vectorId))
const color = ref("#000000")
const type = ref(props.geo.category || "SingleArrowLine")
useChange(() => {
  color.value = vector.value.color
  type.value = vector.value.category
})


const syncVector = ([color, type]) => {
  vector.value.setColor(color)
  vector.value.setCategory(type)
  drawRef.value.renderer.autoRedraw()
  drawRef.value.history.save()
}

watch(() => [color.value, type.value], debounce(syncVector, 500))


const typeMenus = ref<UnwrapRef<typeof menus>>()
const menus = ref([
  {
    key: 'color',
    icon: 'del',
    text: "颜色"
  },
  {
    key: "type",
    icon: "del",
    text: "类型",
    onClick: () => {
      typeMenus.value = !typeMenus.value
        ? [
          {
            key: 'SingleArrowLine',
            icon: 'arrows_s',
            text: "单向",
            onClick: () => type.value = "SingleArrowLine"
          },
          {
            key: 'DoubleArrowLine',
            icon: 'arrows_d',
            text: "双向",
            onClick: () => type.value = "DoubleArrowLine"
          },
        ]
      : null
    }
  },
  {
    key: 'copy',
    icon: 'copy',
    text: "复制",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.CopyAction)
    }
  },
  {
    key: 'del',
    icon: 'del',
    text: "删除",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)
    }
  }
])

watchEffect(() => {
  menus.value[1].icon = type.value === "SingleArrowLine" ? "arrows_s" : "arrows_d"
})
if (props.geo.category === VectorCategory.Line.NormalLine) {
  menus.value.shift()
}

</script>

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

.icon {
  font-size: 16px;
}

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

.type-geo {
  margin-bottom: 74px;
}

</style>

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