修改需求

src/components/fill-slide/index.vue

@@ -12,7 +12,6 @@
           @change="index => $emit('update:active', data[index])"
       >
         <template v-slot="{raw}">
-          {{data.indexOf(active)}}
           <template v-if="$slots.default">
             <slot :data="raw" />
           </template>

src/graphic/Renderer/Draw.js

@@ -684,12 +684,13 @@ export default class Draw {
 
     const pt = coordinate.getScreenXY(position);
     const textCenter = help.getTextCenter(ctx, txt);
-    pt.x -= textCenter.x;
-    pt.y -= textCenter.y;
+    // pt.x -= textCenter.x;
+    // pt.y -= textCenter.y;
 
     if (angle) {
       ctx.translate(pt.x, pt.y);
       ctx.rotate(angle);
+      ctx.translate(-textCenter.x, -textCenter.y);
       ctx.fillText(txt, 0, 0);
     } else {
       ctx.fillText(txt, pt.x, pt.y);
@@ -699,13 +700,14 @@ export default class Draw {
 
   // 文字
   drawText(vector) {
+    console.log(vector)
     help.setVectorStyle(this.context, vector);
     this.context.fillStyle = vector.color;
     const oldFont = this.context.font;
     this.context.font = `${
       vector.fontSize * coordinate.ratio
     }px Microsoft YaHei`;
-    this.drawTextByInfo(vector.center, vector.value, (vector.angle || 0) *(Math.PI / 180), false);
+    this.drawTextByInfo(vector.center, vector.value, (vector.angle || 0), false);
 
     const ctx = this.context;
     const pt = coordinate.getScreenXY(vector.center);

src/sdk/types/sdk.ts

@@ -74,6 +74,7 @@ export type Measure = {
   getDatasetId: () => string;
   getDatasetLocations: () => Array<Pos3D>;
   highlight: (isHight: boolean) => void;
+  selected: (isHight: boolean) => void;
 };
 
 export type StartMeasure = Measure & {

src/views/accidents/index.vue

@@ -26,6 +26,7 @@
         <p class="type-title">{{ typePhoto.type }}</p>
         <Photos
             class="type-photos-content"
+            :class="{max: typePhoto.photos.length > 4}"
             v-model:active="active"
             v-model:selects="selects"
             :select-mode="selectMode"
@@ -224,4 +225,30 @@ const gotoDraw = () => {
   transform: translateX(-50%);
   bottom: var(--boundMargin);
 }
+</style>
+
+<style lang="scss">
+.photos-layout.type-photos-content {
+  overflow-x: auto;
+  width: 100%;
+  margin-bottom: 14px;
+
+  .photos {
+    display: flex;
+    padding-bottom: 10px;
+    .photo {
+      flex: none;
+      width: calc(calc(100% - 24px * 3) / 4);
+
+    }
+
+    &.max:after {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1px;
+      flex: none;
+    }
+  }
+}
 </style>

src/views/photos/index.vue

@@ -44,7 +44,7 @@ import ActionMenus from "@/components/group-button/index.vue";
 import {useConfirm} from "@/hook";
 import {accidentPhotos} from "@/store/accidentPhotos";
 
-const sortPhotos = computed(() => photos.value.reverse())
+const sortPhotos = computed(() => [...photos.value].reverse())
 const active = ref<PhotoRaw>()
 const selectMode = ref(false)
 const selects = ref<PhotoRaw[]>([])

src/views/roads/index.vue

@@ -66,7 +66,7 @@ import UiIcon from "@/components/base/components/icon/index.vue";
 import {useConfirm} from "@/hook";
 
 
-const sortPhotos = computed(() => roadPhotos.value.reverse())
+const sortPhotos = computed(() => [...roadPhotos.value].reverse())
 const active = ref<RoadPhoto>()
 const selectMode = ref(false)
 const selects = ref<RoadPhoto[]>([])

src/views/scene/covers/actions.vue

@@ -3,7 +3,7 @@
     <ButtonPane
         v-for="menu in menus"
         :key="menu.key"
-        @click="menu.action"
+        @touchstart.stop="menu.action"
         class="action"
         :style="{backgroundColor: menu.color}">
       <UiIcon :type="menu.icon" class="icon" :style="{color: menu.iconColor}"/>

src/views/scene/covers/cover.vue

@@ -1,11 +1,11 @@
 <template>
   <div
       class="cover-layout"
-      @click="clickHandler"
-      @mousedown.stop.prevent="downHandler"
-      @touchstart.stop.prevent="downHandler"
+      @mousedown="downHandler"
+      @touchstart="downHandler"
       :class="{ move: move }"
       :style="style"
+      v-show="style"
       ref="dom"
   >
     <slot />
@@ -50,6 +50,7 @@ updatePos()
 
 const move = ref(false)
 const downHandler = (sev: MouseEvent | TouchEvent) => {
+  const start = new Date().getTime()
   const el = sev.target as HTMLElement
   const mountEl = document.documentElement
   const preset = {
@@ -78,7 +79,7 @@ const downHandler = (sev: MouseEvent | TouchEvent) => {
       y: (ev instanceof TouchEvent ? ev.touches[0].pageY : ev.pageY) + preset.y,
       inDrag: true
     })
-    if (pos.position) {
+    if (pos?.position) {
       emit('changePos', pos.position);
     }
   }
@@ -88,6 +89,9 @@ const downHandler = (sev: MouseEvent | TouchEvent) => {
     mountEl.removeEventListener('touchmove', moveHandler)
     mountEl.removeEventListener('touchend', upHandler)
     move.value = false
+    if (new Date().getTime() - start < 300) {
+      clickHandler(ev)
+    }
   }
 
   mountEl.addEventListener('mousemove', moveHandler)
@@ -100,12 +104,15 @@ const clickHandler = ev => {
   emit("focus")
 
   const handler = (ev: MouseEvent) => {
+    console.log("????????")
     if (!dom.value.contains(ev.target as HTMLElement) && ev.target !== dom.value) {
       emit("blur")
-      document.documentElement.removeEventListener("click", handler)
+      // document.documentElement.removeEventListener("click", handler)
+      document.documentElement.removeEventListener("touchstart", handler)
     }
   }
-  document.documentElement.addEventListener("click", handler, { passive: true })
+  // document.documentElement.addEventListener("click", handler, { passive: true })
+  document.documentElement.addEventListener("touchstart", handler, { passive: true })
 }
 
 onUnmounted(() => {

src/views/scene/covers/fixPoints.vue

@@ -4,13 +4,15 @@
     :key="point.id"
     :data="point"
     @change-pos="pos => point.pos = pos"
-    @blur="() => active = active === point ? null : active"
     @focus="() => active = point"
+    @blur="() => active = active === point ? null : active"
   />
 
-  <ActionsPanel :menus="activeActionMenus" v-if="active" />
+  <div ref="menu" @touchstart.stop>
+    <ActionsPanel :menus="activeActionMenus" v-show="active" />
+  </div>
 
-  <div class="edit-fix-point" v-if="edit">
+  <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" />
@@ -35,7 +37,7 @@
 import { fixPoints, FixPoint } from '@/store/fixPoint'
 import FixPointPanel from './fixPoint.vue'
 import ActionsPanel from './actions.vue'
-import {ref} from "vue";
+import {ref, watchEffect} from "vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiInput from "@/components/base/components/input/index.vue";
 
@@ -74,10 +76,31 @@ const activeActionMenus = [
       const index = fixPoints.value.indexOf(active.value)
       if (~index) {
         fixPoints.value.splice(index, 1)
+        edit.value = null
+        active.value = null
       }
     }
   }
 ]
+
+const dom = ref<HTMLDivElement>()
+const menu = ref<HTMLDivElement>()
+watchEffect((onCleanup) => {
+  if (edit.value && dom.value) {
+    const handler = (ev) => {
+      console.log(ev.target)
+      if (!dom.value.contains(ev.target) && !menu.value.contains(ev.target)) {
+        edit.value = null
+      }
+    }
+    // document.documentElement.addEventListener("click", handler)
+    document.documentElement.addEventListener("touchstart", handler)
+    onCleanup(() => {
+      // document.documentElement.removeEventListener("click", handler)
+      document.documentElement.removeEventListener("touchstart", handler)
+    })
+  }
+})
 </script>
 
 <style lang="scss" scoped>

src/views/scene/covers/measure.vue

@@ -3,7 +3,7 @@
 <script setup lang="ts">
 import {useSDK} from "@/hook";
 import { MeasureAtom } from '@/store/measure'
-import {computed, watchEffect} from "vue";
+import {computed, onActivated, onDeactivated, onMounted, onUnmounted, watchEffect} from "vue";
 
 const props = defineProps<{ data: MeasureAtom }>()
 const emit = defineEmits<{
@@ -22,7 +22,6 @@ const measure = computed(() => {
 watchEffect(() => {
   if (measure.value) {
     measure.value.bus.on("selected", (focus) => {
-      console.error("measure highlight")
       if (focus) {
         emit('focus')
       } else {
@@ -31,9 +30,23 @@ watchEffect(() => {
     })
 
     measure.value.bus.on("update", () => {
-      console.error("measure update", measure.value.getPoints())
       emit("changePoints", measure.value.getPoints())
     })
   }
 })
+
+const clickHandler = ev => {
+  const $canvas = document.querySelector(".scene-canvas > canvas")
+  if (!$canvas.contains(ev.target)) {
+    emit("blur")
+    // measure.value.selected(false)
+  }
+}
+onMounted(() => {
+  console.error("????????")
+  document.querySelector("#app").addEventListener("touchstart", clickHandler)
+})
+onUnmounted(() => {
+  document.querySelector("#app").removeEventListener("touchstart", clickHandler)
+})
 </script>

src/views/scene/menus/menus.ts

@@ -85,15 +85,14 @@ export const menus: MenuRaw[] = [
       console.log("push")
       modeDisabled.push(ref(true))
       doms.forEach(dom => dom.style.display = "none");
-      // sdk.enterTopView()
+      // sdk.scene.enterTopView()
 
-      console.log(modeDisabled.current.value.value)
       return () => {
         doms.forEach(dom => dom.style.display = "block");
         laserModeStack.pop()
         console.log("pop")
         modeDisabled.pop()
-        // sdk.leaveTopView()
+        // sdk.scene.leaveTopView()
       }
     },
     children: [

src/views/scene/photo.vue

@@ -89,7 +89,9 @@ const photo = genUseLoading(async () => {
       baseLines: baseLines.value
         .map(data => getCurrentScreens(data.points))
         .filter(poss => poss.length),
-      fixPoints: fixPoints.value.map(data => ({ text: data.text, pos: getCurrentScreen(data.pos) })),
+      fixPoints: fixPoints.value
+        .map(data => ({ text: data.text, pos: getCurrentScreen(data.pos) }))
+        .filter(data => !!data.pos),
       basePoints: getCurrentScreens(basePoints.value.map(data => data.pos))
     })
     showCoverUrl.value = await api.getFile(url)