fix: 1

src/api/path.ts

@@ -11,26 +11,24 @@ interface ServerPath {
 export interface Path {
   id: string;
   name: string;
-  showName: boolean
+  showName: boolean;
   linePosition?: {
-    loc: SceneLocalPos;
+    position: SceneLocalPos;
     modelId: string;
-    normal: SceneLocalPos
+    normal: SceneLocalPos;
   };
   lineWidth: number;
   lineColor: string;
   lineAltitudeAboveGround: number;
   fontSize: number;
   showDirection: boolean;
-  reverseDirection: boolean
+  reverseDirection: boolean;
   globalVisibility: boolean;
-  visibilityRange: number
+  visibilityRange: number;
   points: {
     name: string;
-    position: {
-      loc: SceneLocalPos;
-      modelId: string;
-    };
+    position: SceneLocalPos;
+    modelId: string;
   }[];
 }
 
@@ -54,10 +52,8 @@ export const fetchPaths = async () => {
       points: [
         {
           name: "点1",
-          position: {
-            loc: { x: 0, y: 0, z: 0 },
-            modelId: "1167",
-          },
+          position: { x: 0, y: 0, z: 0 },
+          modelId: "1167",
         },
       ],
     }),

src/components/path/list.vue

@@ -1,26 +1,44 @@
 <template>
   <template v-for="(path, index) in paths" :key="path.id">
-    <!-- <Sign
+    <Sign
       v-if="getPathIsShow(path) && path.points.length"
       @delete="deletePath(path)"
-      @changePosition="(data: any) => updatePosition(index, data)"
+      @updatePoints="(data) => updatePosition(index, data)"
+      @updateLinePosition="(data) => updateLinePosition(index, data)"
+      :ref="(node: any) => nodes[index] = ({ node, id: path.id })"
       :path="path"
       :key="path.id"
-    /> -->
+    />
   </template>
 </template>
 
 <script lang="ts" setup>
+import { reactive, watchEffect } from "vue";
 import Sign from "./sign.vue";
-import { paths, getPathIsShow } from "@/store";
+import { getPathIsShow, Path } from "@/store";
+import { PathsNode } from "@/sdk/association/path";
+const props = defineProps<{ paths: Path[] }>();
+const nodes = reactive([]) as PathsNode;
 
-import type { Path } from "@/store";
+watchEffect(() => (nodes.length = props.paths.length));
 
 const deletePath = (path: Path) => {
-  const index = paths.value.indexOf(path);
-  paths.value.splice(index, 1);
+  const index = props.paths.indexOf(path);
+  props.paths.splice(index, 1);
 };
-const updatePosition = (ndx: number, data: Path) => {
-  paths.value[ndx] = data;
+const updatePosition = (ndx: number, data: Path["points"]) => {
+  props.paths[ndx].points = data;
 };
+const updateLinePosition = (ndx: number, linePosition: Path["linePosition"]) => {
+  props.paths[ndx].linePosition = linePosition;
+};
+defineExpose(nodes);
+
+setTimeout(() => {
+  console.log("a?");
+  nodes[0] = {
+    id: props.paths[0].id,
+    node: "asd" as any,
+  };
+});
 </script>

src/components/path/sign.vue

@@ -12,16 +12,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch, watchEffect } from "vue";
+import { computed, onUnmounted, ref, watch, watchEffect } from "vue";
 import { sdk } from "@/sdk";
 
 import type { Path } from "@/store";
+import { inRevise } from "bill/utils";
 
 export type SignProps = { path: Path };
 
 const props = defineProps<SignProps>();
 const emit = defineEmits<{
   (e: "delete"): void;
+  (e: "updateLinePosition", val: Path["linePosition"]): void;
   (e: "updatePoints", val: Path["points"]): void;
 }>();
 
@@ -29,9 +31,9 @@ const getLineProps = () => ({
   width: props.path.lineWidth,
   color: props.path.lineColor,
   altitudeAboveGround: props.path.lineAltitudeAboveGround,
-  position: props.path.linePosition?.loc || props.path.points[0].position.loc,
+  position: props.path.linePosition?.position || props.path.points[0].position,
   normal: props.path.linePosition?.normal || { x: 0, y: 0, z: 1 },
-  modelId: props.path.linePosition?.modelId || props.path.points[0].position.modelId,
+  modelId: props.path.linePosition?.modelId || props.path.points[0].modelId,
 });
 
 const path = sdk.createPath({
@@ -41,20 +43,10 @@ const path = sdk.createPath({
   showDirection: props.path.showDirection,
   reverseDirection: props.path.reverseDirection,
   line: getLineProps(),
-  points: props.path.points.map((item) => ({
-    name: item.name,
-    position: item.position.loc,
-    modelId: item.position.modelId,
-  })),
+  points: props.path.points,
 });
+path.changeCanEdit(false);
 
-watch(
-  getLineProps,
-  (val) => {
-    path.changeLine(val);
-  },
-  { deep: true }
-);
 watchEffect(() => path.visibilityName(props.path.showName));
 
 const toCameraDistance = ref(path.toCameraDistance);
@@ -66,23 +58,57 @@ const show = computed(
 );
 watchEffect(() => path.visibility(show.value));
 
+let currentPoints = props.path.points;
+let changPointsTimeout: any;
 path.bus.on("changePoints", (points) => {
-  pathPoints.value = points.map((p) => ({
-    localPos: p.position,
+  clearTimeout(changPointsTimeout);
+  currentPoints = points.map((p, ndx) => ({
+    name: `标记点${ndx + 1}`,
+    position: { ...p.position },
     modelId: p.modelId,
   }));
+  emit("updatePoints", currentPoints);
+});
+
+watch(
+  () => props.path.points,
+  (p) => {
+    changPointsTimeout = setTimeout(() => {
+      if (inRevise(p, currentPoints)) {
+        path.changePathPoints(p);
+        currentPoints = p;
+      }
+    }, 16);
+  },
+  { deep: true, flush: "post" }
+);
 
-  emit(
-    "updatePoints",
-    points.map((p, i) => ({
-      ...props.path.points[i],
-      position: {
-        loc: p.position,
-        modelId: p.modelId,
-      },
-    }))
-  );
+let currentLine = getLineProps();
+let changLineTimeout: any;
+watch(
+  getLineProps,
+  (val) => {
+    changLineTimeout = setTimeout(() => {
+      if (inRevise(val, currentLine)) {
+        path.changeLine(val);
+        currentLine = val;
+      }
+    }, 16);
+  },
+  { deep: true }
+);
+path.bus.on("linePositionChange", (position) => {
+  const p = {
+    position: { ...position.pos },
+    normal: { ...position.normal },
+    modelId: position.modelId,
+  };
+  currentLine = { ...getLineProps(), ...p };
+  emit("updateLinePosition", p);
 });
+
+onUnmounted(() => path.destory());
+defineExpose(path);
 </script>
 
 <style lang="scss" scoped></style>

src/components/tagging/list.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive } from "vue";
+import { computed, reactive, watchEffect } from "vue";
 import Sign from "./sign-new.vue";
 import { getTaggingPositions, taggingPositions, getTaggingPositionIsShow } from "@/store";
 
@@ -24,6 +24,9 @@ const props = defineProps<{ tagging: Tagging }>();
 const positions = computed(() => getTaggingPositions(props.tagging));
 const nodes = reactive([]) as TaggingNode;
 
+watchEffect(() => {
+  nodes.length = positions.value.length;
+});
 const deletePosition = (pos: TaggingPosition) => {
   const index = taggingPositions.value.indexOf(pos);
   taggingPositions.value.splice(index, 1);

src/components/tagging/sign-new.vue

@@ -50,7 +50,6 @@ import { custom, getResource } from "@/env";
 
 import type { Tagging, TaggingPosition } from "@/store";
 import { useCameraChange, usePixel } from "@/hook/use-pixel";
-import { useViewStack } from "@/hook";
 import { inRevise } from "bill/utils";
 
 export type SignProps = { tagging: Tagging; scenePos: TaggingPosition; show?: boolean };

src/sdk/association/guide.ts

@@ -1,46 +1,14 @@
-import { sdk } from "../sdk";
+import { SceneGuide, sdk } from "../sdk";
 import { toRaw, ref, watch, watchEffect } from "vue";
 import { viewModeStack, showLeftPanoStack, custom } from "@/env";
 import { togetherCallback, asyncTimeout } from "@/utils";
 import { fuseModels, isEdit, sysBus, fuseModelsLoaded } from "@/store";
 import type { FuseModel, FuseModels, Guide, GuidePath } from "@/store";
 import { analysisPoseInfo } from ".";
+import { fullView, isScenePlayRun, pauseScene, playScene } from "@/utils/full";
 
 // -----------------导览关联--------------------
 
-const fullView = async (fn: () => void) => {
-  const popViewMode = togetherCallback([
-    viewModeStack.push(ref("full")),
-    showLeftPanoStack.push(ref(false)),
-  ]);
-  let isFull = false;
-  try {
-    await document.documentElement.requestFullscreen();
-    isFull = true;
-  } catch {}
-
-  const driving = () => document.fullscreenElement || fn();
-  const stop = (ev: KeyboardEvent) => ev.key == "Escape" && fn();
-
-  if (isFull) {
-    document.addEventListener("fullscreenchange", driving);
-    document.addEventListener("fullscreenerror", fn);
-  } else {
-    document.addEventListener("keyup", stop);
-  }
-
-  return () => {
-    popViewMode();
-    if (isFull) {
-      document.fullscreenElement && document.exitFullscreen();
-      document.removeEventListener("fullscreenchange", driving);
-      document.removeEventListener("fullscreenerror", fn);
-    } else {
-      document.removeEventListener("keyup", stop);
-    }
-  };
-};
-
 export const recovery = async (guide: Guide) => {
   let rFuseModels: (FuseModel & { viewShow: boolean })[];
   try {
@@ -112,67 +80,32 @@ export const recovery = async (guide: Guide) => {
     );
 };
 
-export enum ScenePlayIngEnum {
-  ing = 1,
-  stop = 0,
-  ready = 2,
-}
-export const isScenePlayIng = ref<ScenePlayIngEnum>(ScenePlayIngEnum.stop);
-let pauseRecovery: () => void;
-export const playSceneGuide = async (
+export const playSceneGuide = (
   paths: GuidePath[],
   changeIndexCallback?: (index: number) => void,
   forceFull = false
 ) => {
-  if (isScenePlayIng.value) {
-    throw new Error("导览正在播放");
-  }
-  isScenePlayIng.value = ScenePlayIngEnum.ready;
-  // pauseRecovery = await recovery(guide)
-  isScenePlayIng.value = ScenePlayIngEnum.ing;
-
-  const sceneGuide = sdk.enterSceneGuide(
-    paths.map((path) => ({ ...path, ...analysisPoseInfo(path) }))
-  );
-
-  changeIndexCallback && sceneGuide.bus.on("changePoint", changeIndexCallback);
-
-  const quitHandler = pauseSceneGuide;
-  const clearHandler =
-    !forceFull && isEdit.value ? null : await fullView(quitHandler);
-  if (!clearHandler) {
-    sysBus.on("leave", quitHandler, { last: true });
-    sysBus.on("save", quitHandler, { last: true });
-  }
-
-  sceneGuide.play();
-  const reces = [
-    new Promise((resolve) => sceneGuide.bus.on("playComplete", resolve)),
-    new Promise<void>((resolve) => {
-      const stop = watch(isScenePlayIng, () => {
-        if (!isScenePlayIng.value) {
-          resolve();
-          sceneGuide.pause();
-          stop();
-        }
-      });
-    }),
-  ];
-
-  await Promise.race(reces);
-  pauseSceneGuide();
-
-  if (clearHandler) {
-    clearHandler();
-  } else {
-    sysBus.off("leave", quitHandler);
-    sysBus.off("save", quitHandler);
-  }
-  sceneGuide.clear();
-  sceneGuide.bus.off("changePoint");
-};
+  let sceneGuide: SceneGuide
+  playScene({
+    create: () => {
+      sceneGuide = sdk.enterSceneGuide(
+        paths.map((path) => ({ ...path, ...analysisPoseInfo(path) }))
+      );
+      changeIndexCallback && sceneGuide.bus.on("changePoint", changeIndexCallback);
+    },
+    play: () => {
+      sceneGuide.play();
+      return new Promise((resolve) => sceneGuide.bus.on("playComplete", resolve))
+    },
+    pause: () => {
+      sceneGuide.pause();
+    },
+    clear: () => {
+      sceneGuide.clear();
+      sceneGuide.bus.off("changePoint");
+    }
+  }, forceFull)
+}
 
-export const pauseSceneGuide = () => {
-  isScenePlayIng.value = ScenePlayIngEnum.stop;
-  pauseRecovery! && pauseRecovery();
-};
+export const pauseSceneGuide = pauseScene
+export const isScenePlayIng = isScenePlayRun

src/sdk/association/path.ts

@@ -1,9 +1,88 @@
-import { mount } from "@/utils";
+import { diffArrayChange, mount, shallowWatchArray } from "@/utils";
 import TaggingComponent from "@/components/path/list.vue";
-import { SDK } from "../sdk";
+import { Path as PathData, paths } from "@/store/path";
+import { Path, SDK } from "../sdk";
+import { reactive, watch } from "vue";
+import { groupProxy } from "@/store/group";
+import { isScenePlayRun, pauseScene, playScene } from "@/utils/full";
+
+// -----------------导览线关联--------------------
+export type PathNode = Path;
+export type PathsNode = { node: PathNode; id: PathData["id"] }[];
+
+const pathNodes = reactive(new Map<PathData, PathNode>());
+
+export const getPathNode = (
+  path: PathData | PathData["id"]
+): undefined | PathNode => {
+  if (typeof path !== "object") {
+    path = paths.value.find((item) => item.id === path)!;
+    if (!path) return void 0;
+  }
+  return pathNodes.get(path);
+};
+
+export const taggingsGroup = groupProxy(() => {
+  const nodes = [] as PathNode[];
+  for (const path of paths.value) {
+    const node = getPathNode(path);
+    if (node) {
+      nodes.push(node);
+    }
+  }
+  return nodes;
+});
+
+
+export const playScenePath = (
+  path: PathData,
+  forceFull = false
+) => {
+  const node = getPathNode(path)
+  if (!node) return null;
+
+  playScene({
+    play: () => {
+      return new Promise(resolve => {
+        node.play(resolve)
+      })
+    },
+    pause: () => {
+      node.pause();
+    }
+  }, forceFull)
+}
+
+export const pauseScenePath = pauseScene
+export const isScenePathPlayIng = isScenePlayRun
 
-// -----------------标签关联--------------------
 
 export const associationPaths = (sdk: SDK, el: HTMLDivElement) => {
-  mount(el, TaggingComponent);
+  mount<PathsNode>(el, TaggingComponent, { paths }, (pathsNode) => {
+    watch(
+      () => {
+        pathsNode.forEach(i => !!i?.id)
+        return pathsNode
+      },
+      (nodes, oldNodes = []) => {
+        const { added, deleted } = diffArrayChange<PathsNode>(
+          nodes,
+          oldNodes as PathsNode
+        );
+        for (const add of added) {
+          if (add) {
+            const path = paths.value.find((item) => item.id === add.id)!;
+            pathNodes.set(path, add.node);
+          }
+        }
+        for (const del of deleted) {
+          if (del) {
+            const path = paths.value.find((item) => item.id === del.id)!;
+            pathNodes.delete(path);
+          }
+        }
+      },
+      {immediate: true}
+    );
+  });
 };

src/sdk/sdk.ts

@@ -234,13 +234,25 @@ export type Path = {
     enter: void;
     // 鼠标移出标注事件
     leave: void;
-    // 顶部标注中心点像素位置更改事件， 传出像素位置
-    lineTopPositionChange: SceneLocalPos
+    // 线段坐标更改事件
+    linePositionChange: {
+      pos: SceneLocalPos,
+      normal: SceneLocalPos,
+      modelId: string
+    }
     // 路径点位置变更
     changePoints: PathProps['points']
     // 距离相机位置变更
     toCameraDistanceChange: number
   }>;
+  // 飞向路径
+  fly: () => void,
+  // 更改路径点
+  changePathPoints: (points: PathProps['points']) => void
+  // 播放路径，相机沿着路径运动，传入播放完毕回调
+  play: (playedHandler: () => void) => void
+  // 停止播放路径
+  pause: () => void
   // 是否可编辑
   changeCanEdit: (canMove: boolean) => void
   // 可见性

src/store/group.ts

@@ -12,7 +12,7 @@ export const groupProxy = <T extends object>(
     {
       get(_, key) {
         const group = getter();
-        const res = group.map((item: any) => item[key]) as any[];
+        const res = group.filter(item => !!item).map((item: any) => item[key]) as any[];
         if (!res.length || typeof res[0] !== "function") {
           return res;
         }

src/utils/full.ts

@@ -0,0 +1,96 @@
+import { showLeftPanoStack, viewModeStack } from "@/env";
+import { togetherCallback } from ".";
+import { ref, watch } from "vue";
+import { isEdit, sysBus } from "@/store";
+
+export const fullView = async (fn: () => void) => {
+  const popViewMode = togetherCallback([
+    viewModeStack.push(ref("full")),
+    showLeftPanoStack.push(ref(false)),
+  ]);
+  let isFull = false;
+  try {
+    await document.documentElement.requestFullscreen();
+    isFull = true;
+  } catch {}
+
+  const driving = () => document.fullscreenElement || fn();
+  const stop = (ev: KeyboardEvent) => ev.key == "Escape" && fn();
+
+  if (isFull) {
+    document.addEventListener("fullscreenchange", driving);
+    document.addEventListener("fullscreenerror", fn);
+  } else {
+    document.addEventListener("keyup", stop);
+  }
+
+  return () => {
+    popViewMode();
+    if (isFull) {
+      document.fullscreenElement && document.exitFullscreen();
+      document.removeEventListener("fullscreenchange", driving);
+      document.removeEventListener("fullscreenerror", fn);
+    } else {
+      document.removeEventListener("keyup", stop);
+    }
+  };
+};
+
+export enum ScenePlayIngEnum {
+  ing = 1,
+  stop = 0,
+  ready = 2,
+}
+export const isScenePlayRun = ref<ScenePlayIngEnum>(ScenePlayIngEnum.stop);
+export type playHooks = {
+  create?: () => void;
+  play: () => Promise<void>;
+  pause: () => void;
+  clear?: () => void;
+};
+export const playScene = async (hook: playHooks, forceFull = false) => {
+  if (isScenePlayRun.value) {
+    throw new Error("正在播放");
+  }
+  isScenePlayRun.value = ScenePlayIngEnum.ready;
+  // pauseRecovery = await recovery(guide)
+  isScenePlayRun.value = ScenePlayIngEnum.ing;
+
+  hook.create && hook.create();
+
+  const quitHandler = pauseScene;
+  const clearHandler =
+    !forceFull && isEdit.value ? null : await fullView(quitHandler);
+  if (!clearHandler) {
+    sysBus.on("leave", quitHandler, { last: true });
+    sysBus.on("save", quitHandler, { last: true });
+  }
+
+  const reces = [
+    hook.play(),
+    new Promise<void>((resolve) => {
+      const stop = watch(isScenePlayRun, () => {
+        if (!isScenePlayRun.value) {
+          resolve();
+          hook.pause();
+          stop();
+        }
+      });
+    }),
+  ];
+
+  await Promise.race(reces);
+  pauseScene();
+
+  if (clearHandler) {
+    clearHandler();
+  } else {
+    sysBus.off("leave", quitHandler);
+    sysBus.off("save", quitHandler);
+  }
+  hook.clear && hook.clear();
+};
+
+export const pauseScene = () => {
+  isScenePlayRun.value = ScenePlayIngEnum.stop;
+};

src/views/guide/path/edit-path.vue

@@ -94,12 +94,22 @@
           </SignItem>
         </ui-group-option>
       </ui-group>
-      <Button block type="primary" ghost size="large"> 预览路径 </Button>
+      <Button
+        block
+        type="primary"
+        ghost
+        size="large"
+        @click="switchPlay"
+        v-if="data.points.length"
+      >
+        {{ isScenePathPlayIng ? "停止" : "" }} 预览路径
+      </Button>
     </RightFillPano>
 
     <span
       @click="unKeepAdding ? unKeepAdding() : keepAdding()"
       class="pin-position strengthen fun-ctrl"
+      v-if="node"
     >
       <ui-icon
         :style="{ color: unKeepAdding ? 'var(--color-main-normal)' : 'currentColor' }"
@@ -117,7 +127,7 @@ import {
   showRightCtrlPanoStack,
   showRightPanoStack,
 } from "@/env";
-import { onUnmounted, ref, shallowRef } from "vue";
+import { computed, onUnmounted, ref, shallowRef, watch, watchEffect } from "vue";
 import { isTemploraryID, Path } from "@/store";
 import { RightFillPano } from "@/layout";
 import { useViewStack } from "@/hook";
@@ -125,6 +135,12 @@ import { togetherCallback } from "@/utils";
 import { Switch, Slider, Button, InputNumber } from "ant-design-vue";
 import SignItem from "@/views/tagging-position/sign-item.vue";
 import { Message } from "bill/expose-common";
+import {
+  getPathNode,
+  isScenePathPlayIng,
+  pauseScenePath,
+  playScenePath,
+} from "@/sdk/association/path";
 
 const props = defineProps<{ data: Path }>();
 
@@ -132,12 +148,21 @@ defineEmits<{
   (e: "applyGlobal", k: string | string[]): void;
 }>();
 
+const node = computed(() => getPathNode(props.data.id));
+watch(node, () => {
+  if (props.data.points.length) {
+    node.value?.fly();
+  }
+});
+
 let unKeepAdding = shallowRef<() => void>();
 const keepAdding = () => {
   unKeepAdding.value && unKeepAdding.value();
+  node.value?.changeCanEdit(true);
   const hide = Message.show({ msg: "请在模型上单击选择路径点位置", type: "warning" });
 
   unKeepAdding.value = () => {
+    node.value?.changeCanEdit(false);
     hide();
     unKeepAdding.value = void 0;
   };
@@ -152,6 +177,14 @@ useViewStack(() =>
     showRightCtrlPanoStack.push(ref(false)),
   ])
 );
+
+const switchPlay = () => {
+  if (isScenePathPlayIng.value) {
+    pauseScenePath();
+  } else {
+    playScenePath(props.data);
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/views/guide/path/sign.vue

@@ -4,7 +4,13 @@
       <div class="guide-cover">
         <span class="img"></span>
         <!-- @click="playSceneGuide(paths, undefined, true)" -->
-        <ui-icon type="preview" class="icon" ctrl v-if="path.points.length" />
+        <ui-icon
+          type="preview"
+          class="icon"
+          ctrl
+          @click="playScenePath(path, true)"
+          v-if="path.points.length"
+        />
       </div>
       <div>
         <p>{{ path.name }}</p>
@@ -23,6 +29,7 @@
 <script setup lang="ts">
 import { Path } from "@/store";
 import { playSceneGuide } from "@/sdk";
+import { playScenePath } from "@/sdk/association/path";
 
 const props = withDefaults(defineProps<{ path: Path; edit?: boolean }>(), {
   edit: true,