fix: 1

src/components/group-button/index.vue

@@ -5,61 +5,74 @@
       :key="menu.key"
       class="menu"
       :style="menuStyle"
-      :class="{ active: activeKey === menu.key, dire, disabled: disabledMap[menu.key], border: menu.border }"
+      :class="{
+        active: activeKey === menu.key,
+        dire,
+        disabled: disabledMap[menu.key],
+        border: menu.border,
+      }"
       @click="menu.onClick && menu.onClick(menu)"
       v-show="!menu.hide"
     >
       <template v-if="$slots.default">
         <slot :data="menu" />
       </template>
-      <ui-icon :type="menu.icon || 'close'" class="icon" v-else/>
+      <ui-icon :type="menu.icon || 'close'" class="icon" v-else />
+
       <p v-if="menu.text">{{ menu.text }}</p>
     </div>
   </ButtonPane>
 </template>
 
 <script setup lang="ts">
-import ButtonPane from '@/components/button-pane/index.vue'
+import ButtonPane from "@/components/button-pane/index.vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {computed} from "vue";
+import { computed } from "vue";
 
-type Menu =  {
-  key: any,
-  text?: string,
-  hide?: boolean
-  border?: boolean
-  icon?: string,
-  disabled?: boolean | (() => boolean)
-  onClick?: (menu: Menu) => void
-}
+type Menu = {
+  key: any;
+  text?: string;
+  hide?: boolean;
+  border?: boolean;
+  icon?: string;
+  disabled?: boolean | (() => boolean);
+  onClick?: (menu: Menu) => void;
+};
 
 const props = withDefaults(
-  defineProps<{ menus: Menu[], activeKey?: any, dire?: 'row' | 'column', size?: number }>(),
-  {dire: 'row', size: 64}
-)
+  defineProps<{
+    menus: Menu[];
+    activeKey?: any;
+    dire?: "row" | "column";
+    size?: number;
+  }>(),
+  { dire: "row", size: 64 }
+);
 
 const disabledMap = computed(() => {
-  const map = {}
+  const map = {};
   for (let menu of props.menus) {
-    map[menu.key] = !menu.disabled ? false :
-      typeof menu.disabled === "boolean" ? menu.disabled : menu.disabled()
+    map[menu.key] = !menu.disabled
+      ? false
+      : typeof menu.disabled === "boolean"
+      ? menu.disabled
+      : menu.disabled();
   }
-  return map
-})
+  return map;
+});
 
 const menuStyle = computed(() => {
   const offset = props.size / 4;
-  return props.dire === 'row'
+  return props.dire === "row"
     ? {
         padding: `0 10px`,
-        marginRight: '8px'
+        marginRight: "8px",
       }
-    :
-      {
+    : {
         padding: `10px 0 `,
-        marginBottom: '8px'
-      }
-})
+        marginBottom: "8px",
+      };
+});
 </script>
 
 <style lang="scss" scoped>
@@ -77,7 +90,7 @@ const menuStyle = computed(() => {
   cursor: pointer;
   height: 100%;
   text-align: center;
-  transition: color .3s ease;
+  transition: color 0.3s ease;
   color: #fff;
   border-radius: 4px;
   align-items: center;
@@ -100,7 +113,7 @@ const menuStyle = computed(() => {
   }
 
   &.active {
-    background: rgba(255, 255, 255, 0.1);;
+    background: rgba(255, 255, 255, 0.1);
   }
 
   .icon {
@@ -108,7 +121,6 @@ const menuStyle = computed(() => {
     align-items: center;
     justify-content: center;
     font-size: 20px;
-
   }
 
   p {
@@ -117,7 +129,7 @@ const menuStyle = computed(() => {
     margin-top: 4px;
     line-height: 17px;
     font-size: 14px;
-    white-space:nowrap;
+    white-space: nowrap;
   }
 }
 </style>

src/graphic/Renderer/Draw.js

@@ -509,12 +509,15 @@ export default class Draw {
     }
 
     this.drawRoadEdge(vector, isTemp);
-    vector.leftLanes &&
-      vector.leftLanes.forEach((g) => this.drawLan(g, !!label));
-    vector.rightLanes &&
-      vector.rightLanes.forEach((g) => this.drawLan(g, !!label));
-    vector.singleLanes &&
-      vector.singleLanes.forEach((g) => this.drawLan(g, !!label));
+    if (vector.way === "oneWay") {
+      vector.singleLanes &&
+        vector.singleLanes.forEach((g) => this.drawLan(g, !!label));
+    } else {
+      vector.leftLanes &&
+        vector.leftLanes.forEach((g) => this.drawLan(g, !!label));
+      vector.rightLanes &&
+        vector.rightLanes.forEach((g) => this.drawLan(g, !!label));
+    }
   }
 
   drawLan(lan, focus) {
@@ -920,20 +923,23 @@ export default class Draw {
 
         imgBound = [left, top, size, size];
       } else {
-        const size = help.getReal(style.target.realRadius);
         const backImg = dataService.getBackgroundImg();
+        const size = help.getReal(style.target.realRadius);
         img = backImg.imageData;
         const imgCenter = coordinate.getScreenXY(backImg.center);
+        const width = img.width * backImg.scale;
+        const height = img.height * backImg.scale;
         const start = {
-          x: imgCenter.x - help.getReal(img.width) / 2,
-          y: imgCenter.y - help.getReal(img.height) / 2,
+          x: imgCenter.x - help.getReal(width) / 2,
+          y: imgCenter.y - help.getReal(height) / 2,
         };
-        const ro = img.width / help.getReal(img.width);
+        const pts = pt;
+        const ro = width / help.getReal(width);
         imgBound = [
-          (pt.x - start.x - size) * ro,
-          (pt.y - start.y - size) * ro,
-          size * 2 * ro,
-          size * 2 * ro,
+          ((pts.x - start.x - size) * ro) / backImg.scale,
+          ((pts.y - start.y - size) * ro) / backImg.scale,
+          (size * 2 * ro) / backImg.scale,
+          (size * 2 * ro) / backImg.scale,
         ];
       }
       const size = style.target.radius;
@@ -1009,6 +1015,7 @@ export default class Draw {
   }
 
   drawPoint(vector, screenSave) {
+    console.log(vector);
     const screenNotDrawTypes = [VectorCategory.Point.NormalPoint];
     if (!screenSave) {
       if (
@@ -1137,6 +1144,7 @@ export default class Draw {
 
   // 文字
   drawText(vector) {
+    console.log(vector);
     this.context.save();
     help.setVectorStyle(this.context, vector);
     this.context.fillStyle = vector.color;

src/views/scene/covers/basePoints.vue

@@ -3,29 +3,34 @@
     v-for="point in basePoints"
     :key="point.id"
     :pos="point.pos"
-    @change-pos="pos => point.pos = pos"
+    @change-pos="(pos) => (point.pos = pos)"
     :active="customMap.activeBasePoint === point"
-    @blur="() => customMap.activeBasePoint = customMap.activeBasePoint === point ? null : customMap.activeBasePoint"
-    @focus="() => customMap.activeBasePoint = point"
+    @blur="
+      () =>
+        (customMap.activeBasePoint =
+          customMap.activeBasePoint === point ? null : customMap.activeBasePoint)
+    "
+    @focus="() => (customMap.activeBasePoint = point)"
   />
 
-<!--  <ActionsPanel :menus="activeActionMenus" v-if="active" />-->
+  <!--  <ActionsPanel :menus="activeActionMenus" v-if="active" />-->
   <div ref="menu" @touchstart.stop class="action-menus">
     <ActionMenus
-        v-if="customMap.activeBasePoint"
-        :menus="activeActionMenus"
-        dire="row"
+      v-if="customMap.activeBasePoint"
+      :menus="activeActionMenus"
+      :active-key="customMap.activeBasePoint"
+      dire="row"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { basePoints } from '@/store/basePoint'
-import BasePoint from './basePoint.vue'
-import {ref} from "vue";
-import {FixPoint} from "@/store/fixPoint";
+import { basePoints } from "@/store/basePoint";
+import BasePoint from "./basePoint.vue";
+import { ref } from "vue";
+import { FixPoint } from "@/store/fixPoint";
 import ActionsPanel from "@/views/scene/covers/actions.vue";
-import {customMap} from "@/hook";
+import { customMap } from "@/hook";
 import ActionMenus from "@/components/group-button/index.vue";
 
 const activeActionMenus = [
@@ -36,19 +41,18 @@ const activeActionMenus = [
     color: "#FF4D4F",
     iconColor: "#fff",
     onClick() {
-      const index = basePoints.value.indexOf(customMap.activeBasePoint)
-      console.log(index)
+      const index = basePoints.value.indexOf(customMap.activeBasePoint);
+      console.log(index);
       if (~index) {
-        basePoints.value.splice(index, 1)
-        customMap.activeBasePoint = null
+        basePoints.value.splice(index, 1);
+        customMap.activeBasePoint = null;
       }
-    }
-  }
-]
+    },
+  },
+];
 </script>
 
 <style scoped>
-
 .action-menus {
   position: absolute;
   bottom: var(--boundMargin);

src/views/scene/covers/fixPoints.vue

@@ -4,34 +4,43 @@
     :key="point.id"
     :data="point"
     :active="point === customMap.activeFixPoint"
-    @change-pos="pos => point.pos = pos"
-    @focus="() => customMap.activeFixPoint = point"
-    @blur="() => customMap.activeFixPoint = customMap.activeFixPoint === point ? null : customMap.activeFixPoint"
+    @change-pos="(pos) => (point.pos = pos)"
+    @focus="() => (customMap.activeFixPoint = point)"
+    @blur="
+      () =>
+        (customMap.activeFixPoint =
+          customMap.activeFixPoint === point ? null : customMap.activeFixPoint)
+    "
   />
 
   <div ref="menu" @touchstart.stop class="action-menus">
-<!--    <ActionsPanel :menus="activeActionMenus" v-show="customMap.activeFixPoint" />-->
+    <!--    <ActionsPanel :menus="activeActionMenus" v-show="customMap.activeFixPoint" />-->
     <ActionMenus
-        v-if="customMap.activeFixPoint"
-        :menus="activeActionMenus"
-        :active-key="edit ? 'edit' : null"
-        dire="row"
+      v-if="customMap.activeFixPoint"
+      :menus="activeActionMenus"
+      :active-key="edit ? 'edit' : null"
+      dire="row"
     />
   </div>
 
-  <div class="edit-fix-point" v-if="edit" ref="dom"  @touchstart.stop>
+  <div class="edit-fix-point" v-if="edit" ref="dom" @touchstart.stop>
     <div class="header">
       <h3>添加名称</h3>
       <ui-icon type="close" ctrl @click="edit = null" />
     </div>
-    <ui-input type="text" v-model="edit.text" width="100%" maxlength="20" />
+    <ui-input
+      type="text"
+      v-model="edit.text"
+      width="100%"
+      maxlength="20"
+      class="search-fix"
+    />
     <div class="select">
       <span>常用名称</span>
       <p
         v-for="option in options"
         :key="option"
-        class="fun-ctrl"
-        :class="{active: option === edit.text}"
+        :class="{ active: option === edit.text }"
         @click="edit.text = option"
       >
         {{ option }}
@@ -41,15 +50,15 @@
 </template>
 
 <script setup lang="ts">
-import { fixPoints, FixPoint } from '@/store/fixPoint'
-import FixPointPanel from './fixPoint.vue'
-import {ref, watch, watchEffect} from "vue";
-import {customMap} from '@/hook'
+import { fixPoints, FixPoint } from "@/store/fixPoint";
+import FixPointPanel from "./fixPoint.vue";
+import { ref, watch, watchEffect } from "vue";
+import { customMap } from "@/hook";
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiInput from "@/components/base/components/input/index.vue";
 import ActionMenus from "@/components/group-button/index.vue";
 
-const edit = ref<FixPoint>()
+const edit = ref<FixPoint>();
 const options = [
   "轿车 / 平面",
   "客车 / 平面",
@@ -63,7 +72,7 @@ const options = [
   "散落物",
   "岗台",
   "桥",
-]
+];
 const activeActionMenus = [
   {
     key: "edit",
@@ -72,8 +81,9 @@ const activeActionMenus = [
     color: "#161A1A",
     iconColor: "#2F8FFF",
     onClick() {
-      edit.value = edit.value === customMap.activeFixPoint ? null : customMap.activeFixPoint
-    }
+      edit.value =
+        edit.value === customMap.activeFixPoint ? null : customMap.activeFixPoint;
+    },
   },
   {
     key: "delete",
@@ -82,35 +92,34 @@ const activeActionMenus = [
     color: "#FF4D4F",
     iconColor: "#fff",
     onClick() {
-      const index = fixPoints.value.indexOf(customMap.activeFixPoint)
+      const index = fixPoints.value.indexOf(customMap.activeFixPoint);
       if (~index) {
-        fixPoints.value.splice(index, 1)
-        edit.value = null
-        customMap.activeFixPoint = null
+        fixPoints.value.splice(index, 1);
+        edit.value = null;
+        customMap.activeFixPoint = null;
       }
-    }
-  }
-]
+    },
+  },
+];
 
-const dom = ref<HTMLDivElement>()
-const menu = ref<HTMLDivElement>()
+const dom = ref<HTMLDivElement>();
+const menu = ref<HTMLDivElement>();
 watchEffect((onCleanup) => {
   if (edit.value && dom.value) {
     const handler = (ev) => {
-      console.log(ev.target)
+      console.log(ev.target);
       if (!dom.value.contains(ev.target) && !menu.value.contains(ev.target)) {
-        edit.value = null
+        edit.value = null;
       }
-    }
+    };
     // document.documentElement.addEventListener("click", handler)
-    document.documentElement.addEventListener("touchstart", handler)
+    document.documentElement.addEventListener("touchstart", handler);
     onCleanup(() => {
       // document.documentElement.removeEventListener("click", handler)
-      document.documentElement.removeEventListener("touchstart", handler)
-    })
+      document.documentElement.removeEventListener("touchstart", handler);
+    });
   }
-})
-
+});
 </script>
 
 <style lang="scss" scoped>
@@ -121,7 +130,7 @@ watchEffect((onCleanup) => {
   bottom: 0;
   overflow-y: auto;
   z-index: 2;
-  background-color: #161A1A;
+  background-color: #161a1a;
   width: 240px;
   padding: 10px;
 
@@ -137,12 +146,20 @@ watchEffect((onCleanup) => {
   }
 
   .select {
-    span, p {
+    span,
+    p {
       color: #fff;
     }
     p {
       padding: 14px 6px;
       font-size: 14px;
+      position: relative;
+
+      &.active {
+        background: var(--colors-primary-base);
+        margin: 0 -10px;
+        padding: 14px 16px;
+      }
     }
     span {
       display: inline-block;
@@ -169,4 +186,8 @@ watchEffect((onCleanup) => {
 .action-menus .menu.active {
   background: none;
 }
+
+.search-fix.ui-input .text.suffix input {
+  padding-right: 50px;
+}
 </style>