traffic-laser/src/views/graphic/geos/roadEdge.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";

const props = defineProps<{ geo: FocusVector }>();
const vector = computed(() => dataService.getRoadEdge(props.geo.vectorId));
console.error(vector.value);

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),
  },
  // {
  //   hide: props.geo.type === VectorType.CurveRoadEdge,
  //   key: VectorStyle.DoubleSolidLine,
  //   icon: "line_df",
  //   text: "双实线",
  //   onClick: clickHandlerFactory(VectorStyle.DoubleSolidLine),
  // },
  // {
  //   hide: props.geo.type === VectorType.CurveRoadEdge,
  //   key: VectorStyle.DoubleDashedLine,
  //   icon: "line_dd",
  //   text: "双虚线",
  //   onClick: clickHandlerFactory(VectorStyle.DoubleDashedLine),
  // },
  // {
  //   hide: props.geo.type === VectorType.CurveRoadEdge,
  //   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.Thinning)();
      menus.value[1] = lineWidthMenu[1];
    },
  },
  {
    key: VectorWeight.Thinning,
    icon: "l_thin",
    text: "宽度",
    onClick: () => {
      clickHandlerFactory(VectorWeight.Bold)();
      menus.value[1] = lineWidthMenu[0];
    },
  },
];

const appendMenus =
  props.geo.type === VectorType.CurveRoadEdge
    ? [
        // {
        //   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>>();
// console.log(vector.value)
const menus = ref([
  {
    key: UITypeExtend.lineType,
    text: "单实线",
    icon: "line",
    onClick() {
      childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu;
    },
  },
  vector.value?.weight === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
  ...appendMenus,
]);

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>