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

<template>
  <GeoTeleport :menus="menus" class="geo-teleport-use" :active="active"/>
  <GeoTeleport :menus="childMenus" v-if="childMenus" class="type-geo"/>
</template>

<script setup lang="ts">
import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
import {drawRef, FocusVector, VectorType} from '@/hook/useGraphic'
import {computed, ref, toRaw, UnwrapRef} from "vue";
import {dataService} from "@/graphic/Service/DataService";
import GeoActions from "@/graphic/enum/GeoActions"
import {UITypeExtend} from "@/views/graphic/menus";
import VectorEvents from "@/graphic/enum/VectorEvents";
import VectorStyle from "@/graphic/enum/VectorStyle";
import VectorWeight from "@/graphic/enum/VectorWeight";
import VectorCategory from "@/graphic/enum/VectorCategory";


const props = defineProps<{ geo: FocusVector }>()
const vector = computed(() => dataService.getLine(props.geo.vectorId))

const clickHandlerFactory = (key) => {
  return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
}

const lineTypeMenu = [
  {
    key: VectorStyle.SingleSolidLine,
    icon: "line_sf",
    text: "单实线",
    onClick: clickHandlerFactory(VectorStyle.SingleSolidLine)
  },
  {
    key: VectorStyle.SingleDashedLine,
    icon: "line_sd",
    text: "单虚线",
    onClick: clickHandlerFactory(VectorStyle.SingleDashedLine)
  },
  {
    key: VectorStyle.DoubleSolidLine,
    icon: "line_df",
    text: "双实线",
    onClick: clickHandlerFactory(VectorStyle.DoubleSolidLine)
  },
  {
    key: VectorStyle.DoubleDashedLine,
    icon: "line_dd",
    text: "双虚线",
    onClick: clickHandlerFactory(VectorStyle.DoubleDashedLine)
  },
  {key: VectorStyle.BrokenLine, icon: "line_broken", text: "折线", onClick: clickHandlerFactory(VectorStyle.BrokenLine)},
  {
    key: VectorStyle.PointDrawLine,
    icon: "line_dot",
    text: "点画线",
    onClick: clickHandlerFactory(VectorStyle.PointDrawLine)
  },
  {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
]
const lineWidthMenu = [
  {
    key: VectorWeight.Bold,
    icon: 'l_thick',
    text: "宽度",
    onClick: () => {
      clickHandlerFactory(VectorWeight.Bold)()
      menus.value[1] = lineWidthMenu[1]
    }
  },
  {
    key: VectorWeight.Thinning,
    icon: 'l_thin',
    text: "宽度",
    onClick: () => {
      clickHandlerFactory(VectorWeight.Thinning)()
      menus.value[1] = lineWidthMenu[0]
    }
  },
]

const appendMenus = props.geo.category === VectorCategory.Line.NormalLine
  ? [
    {
      key: VectorEvents.AddCrossPoint,
      icon: "control_a",
      text: "加控制点",
      onClick: clickHandlerFactory(VectorEvents.AddCrossPoint)
    },
    {
      key: VectorEvents.MinusCrossPoint,
      icon: "control_d",
      text: "减控制点",
      onClick: clickHandlerFactory(VectorEvents.MinusCrossPoint)
    },
  ]
  : []
const childMenus = ref<UnwrapRef<typeof menus>>()
const menus = ref([
  {
    key: UITypeExtend.lineType,
    text: "单实线",
    icon: "line",
    onClick() {
      childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
    }
  },
  vector.value?.style === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
  ...appendMenus,
  {
    key: 'copy',
    icon: 'copy',
    text: "复制",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.CopyAction)
    }
  },
  {
    key: 'del',
    icon: 'del',
    text: "删除",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)
    }
  }
])

const active = computed(() =>
  toRaw(childMenus.value) === lineTypeMenu ? menus.value[0]
    : toRaw(childMenus.value) === lineWidthMenu ? menus.value[1] : null
)

</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;
}

.type-geo {
  margin-bottom: 74px;
}
</style>

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