修改道路交互

src/graphic/CanvasStyle/focus.js

@@ -118,7 +118,7 @@ const TestPoint = {
 };
 const BaseLine = {
   strokeStyle: "#3290FF",
-  lineWidth: 1 * coordinate.ratio,
+  lineWidth: 3 * coordinate.ratio,
 };
 
 const SVG = {

src/graphic/CanvasStyle/select.js

@@ -26,7 +26,7 @@ const MeasureLine = {
 
 const BaseLine = {
   strokeStyle: "#3290FF",
-  lineWidth: 1 * coordinate.ratio,
+  lineWidth: 3 * coordinate.ratio,
 };
 const NormalLine = {
   ...def.NormalLine,

src/graphic/Renderer/Draw.js

@@ -462,9 +462,9 @@ export default class Draw {
     vector.rightLanesCurves &&
       vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
-    if (import.meta.env.DEV) {
+    // if (import.meta.env.DEV) {
       vector.points.forEach(this.drawPoint.bind(this));
-    }
+    // }
   }
 
   drawCurveRoadEdge(vector, isTemp) {
@@ -490,12 +490,12 @@ export default class Draw {
     help.drawCoves(ctx, coves);
     ctx.restore();
 
-    if (import.meta.env.DEV) {
+    // if (import.meta.env.DEV) {
       lines.map((line) => {
         this.drawPoint(line.start);
         this.drawPoint(line.end);
       });
-    }
+    // }
   }
 
   drawRoadPoint(vector) {
@@ -664,9 +664,9 @@ export default class Draw {
         return;
       }
       const [_, attr] = help.getVectorStyle(line);
-      if (!attr) {
-        return;
-      }
+      // if (!attr) {
+      //   return;
+      // }
     }
 
     if (vector.color) {
@@ -697,6 +697,8 @@ export default class Draw {
         },
       };
     }
+
+
     draw(style);
     if (style.out) {
       draw(style.out);
@@ -905,7 +907,6 @@ export default class Draw {
         break;
       case VectorCategory.Line.BaseLine:
         this.drawBaseLineLabel(vector);
-        drawPoints();
         break;
       case VectorCategory.Line.MeasureLine:
       case VectorCategory.Line.PositionLine:

src/views/graphic/geos/index.ts

@@ -6,6 +6,7 @@ import magnifier from './magnifier.vue'
 import Del from './del.vue'
 import RoadEdge from './roadEdge.vue'
 import Road from './road.vue'
+import NormalLine from './normalLine.vue'
 import VectorCategory from "@/graphic/enum/VectorCategory";
 
 
@@ -19,8 +20,8 @@ export default {
   [VectorType.SingleArrowLine]: Arrow,
   [VectorType.DoubleArrowLine]: Arrow,
   // [VectorCategory.Line.MeasureLine]: Arrow,
-  [VectorCategory.Line.NormalLine]: Arrow,
+  [VectorCategory.Line.NormalLine]: NormalLine,
   [VectorType.Text]: Text,
   [VectorType.Circle]: Circle,
   [VectorType.Magnifier]: magnifier
-}
+}

src/views/graphic/geos/normalLine.vue

@@ -0,0 +1,155 @@
+<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";
+
+
+const props = defineProps<{ geo: FocusVector }>()
+const vector = computed(() => dataService.getLine(props.geo.vectorId))
+console.error(props.geo)
+
+const clickHandlerFactory = (key) => {
+  return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
+}
+
+const lineTypeMenu = [
+  {
+    key: VectorStyle.SingleSolidLine,
+    icon: "line",
+    text: "单实线",
+    onClick: clickHandlerFactory(VectorStyle.SingleSolidLine)
+  },
+  {
+    key: VectorStyle.SingleDashedLine,
+    icon: "line",
+    text: "单虚线",
+    onClick: clickHandlerFactory(VectorStyle.SingleDashedLine)
+  },
+  {
+    key: VectorStyle.DoubleSolidLine,
+    icon: "line",
+    text: "双实线",
+    onClick: clickHandlerFactory(VectorStyle.DoubleSolidLine)
+  },
+  {
+    key: VectorStyle.DoubleDashedLine,
+    icon: "line",
+    text: "双虚线",
+    onClick: clickHandlerFactory(VectorStyle.DoubleDashedLine)
+  },
+  {key: VectorStyle.BrokenLine, icon: "line", text: "折线", onClick: clickHandlerFactory(VectorStyle.BrokenLine)},
+  {
+    key: VectorStyle.PointDrawLine,
+    icon: "line",
+    text: "点画线",
+    onClick: clickHandlerFactory(VectorStyle.PointDrawLine)
+  },
+  {key: VectorStyle.Greenbelt, icon: "line", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
+]
+const lineWidthMenu = [
+  {key: VectorStyle.Bold, icon: 'l_thick', text: "粗", onClick: clickHandlerFactory(VectorStyle.Bold)},
+  {key: VectorStyle.Thinning, icon: 'l_thin', text: "细", onClick: clickHandlerFactory(VectorStyle.Thinning)},
+]
+
+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>>()
+const menus = ref([
+  {
+    key: UITypeExtend.lineType,
+    text: "单实线",
+    icon: "line",
+    onClick() {
+      childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
+    }
+  },
+  {
+    key: UITypeExtend.width,
+    text: "宽度",
+    icon: 'l_thick',
+    onClick() {
+      childMenus.value = toRaw(childMenus.value) === lineWidthMenu ? null : lineWidthMenu
+    }
+  },
+  ...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>

src/views/graphic/geos/roadEdge.vue

@@ -95,23 +95,7 @@ const menus = ref([
       childMenus.value = toRaw(childMenus.value) === lineWidthMenu ? null : lineWidthMenu
     }
   },
-  ...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)
-    }
-  }
+  ...appendMenus
 ])
 
 const active = computed(() =>

src/views/graphic/header.vue

@@ -26,7 +26,7 @@
           v-model="(data as AccidentPhoto).type"
           v-if="options"
       />
-      <ui-button width="100px" type="primary" class="save" @click="saveHandler">
+      <ui-button width="100px" class="save" @click="saveHandler">
         保存
       </ui-button>
       <ui-button width="100px" type="primary" class="save" @click="createTable" v-if="isRoad">
@@ -70,7 +70,7 @@ watchEffect(() => {
 const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>(() => {
   const menus = [
     {
-      text: "回退",
+      text: "",
       icon: "backout",
       disable: !graphicState.value.canRevoke,
       onClick: () => {
@@ -79,7 +79,7 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
       }
     },
     {
-      text: "前进",
+      text: "",
       icon: "redo",
       disable: !graphicState.value.canRecovery,
       onClick: () => {
@@ -88,8 +88,8 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
       }
     },
     {
-      text: "清除",
-      icon: "reset",
+      text: "",
+      icon: "clear",
       onClick: () => {
         drawRef.value.uiControl.menu_clear()
         changeStore()
@@ -97,15 +97,15 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
     },
     {
       icon: "recover",
-      text: "恢复",
+      text: "",
       onClick: () => drawRef.value.uiControl.menu_view_reset()
     }
   ]
 
   if (isRoad.value) {
     menus.push({
-      icon: "map",
-      text: `底图${graphicState.value.showBackImage ? '关' : '开'}`,
+      icon: graphicState.value.showBackImage ? "map" : "recover",
+      text: ``,
       onClick: () => backImageChang(!graphicState.value.showBackImage)
     })
   }
@@ -192,4 +192,4 @@ const createTable = async () => {
 }
 
 
-</style>
+</style>

src/views/graphic/menus.ts

@@ -137,13 +137,13 @@ export const mainMenusRaw: MenusRaw = [
     text: "道路",
     icon: "road",
     children: [
-      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "单向单车道直路" },
-      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "单向双车道直路" },
-      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "单向三车道直路" },
-      { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "双向单车道直路" },
-      { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "双向双车道直路" },
-      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "双向三车道直路" },
-      { key: UIType.CurveRoad, icon: "road_wl", text: "弯路" },
+      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "" },
+      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "" },
+      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "" },
+      { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "" },
+      { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "" },
+      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "" },
+      { key: UIType.CurveRoad, icon: "road_wl", text: "" },
       { key: UITypeExtend.structure, icon: "r_template", text: "道路结构", extend: structureMenusRaw },
       { key: UITypeExtend.template, icon: "r_structure", text: "道路模板", extend: templateMenusRaw },
     ]

src/views/sys/menu/item/item.vue

@@ -53,16 +53,18 @@ const emit = defineEmits<{
 .menu-children {
   backdrop-filter: blur(4px);
   background-color: var(--editor-menu-back);
-  transform: scaleY(0);
-  opacity: 0;
-  transform-origin: center top;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transform: translateX(-100%);
+  transform-origin: left center;
+  transition: all 0.3s ease;
   height: calc(100% - var(--editor-head-height));
   top: var(--editor-head-height) !important;
+  z-index: -3 !important;
+
 }
 
 .menu-children.show {
-  transform: scaleY(1);
-  opacity: 1;
+  transform: translateX(0);
+  z-index: 1 !important;
+  /*pointer-events: all;*/
 }
 </style>