fix: 1

src/components/path/list.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-for="(path, index) in paths" :key="path.id">
     <Sign
-      v-if="getPathIsShow(path)"
+      v-if="getPathIsShow(path) && false"
       @delete="deletePath(path)"
       @updatePoints="(data) => updatePosition(index, data)"
       @updateLinePosition="(data) => updateLinePosition(index, data)"
@@ -33,12 +33,4 @@ 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

@@ -63,26 +63,41 @@ let changPointsTimeout: any;
 path.bus.on("changePoints", (points) => {
   clearTimeout(changPointsTimeout);
   currentPoints = points.map((p, ndx) => ({
-    name: `标记点${ndx + 1}`,
+    name: p.name || `标记点${ndx + 1}`,
     position: { ...p.position },
     modelId: p.modelId,
   }));
   emit("updatePoints", currentPoints);
 });
+watchEffect(() => {
+  path.changeName(props.path.name);
+});
 
 watch(
-  () => props.path.points,
+  () => props.path.points.map((i) => ({ modelId: i.modelId, position: i.position })),
   (p) => {
     changPointsTimeout = setTimeout(() => {
-      if (inRevise(p, currentPoints)) {
+      if (inRevise(props.path.points, currentPoints)) {
         path.changePathPoints(p);
-        currentPoints = p;
+        currentPoints = props.path.points;
       }
     }, 16);
   },
   { deep: true, flush: "post" }
 );
 
+watchEffect(() => {
+  for (const point of props.path.points) {
+    watchEffect(() => {
+      const ndx = props.path.points.indexOf(point);
+      if (~ndx) {
+        path.changePointName(ndx, point.name);
+        currentPoints[ndx].name = point.name;
+      }
+    });
+  }
+});
+
 let currentLine = getLineProps();
 let changLineTimeout: any;
 watch(

src/sdk/sdk.ts

@@ -228,6 +228,7 @@ export type PathProps = {
 }
 export type Path = {
   bus: Emitter<{
+    activePoint: number
     // 标注点击事件
     click: void;
     // 鼠标移入标注事件
@@ -245,10 +246,11 @@ export type Path = {
     // 距离相机位置变更
     toCameraDistanceChange: number
   }>;
+  changePointName: (index: number, name: string) => void
   // 飞向路径
   fly: () => void,
   // 更改路径点
-  changePathPoints: (points: PathProps['points']) => void
+  changePathPoints: (points: Omit<PathProps['points'][number], 'name'>[]) => void
   // 播放路径，相机沿着路径运动，传入播放完毕回调
   play: (playedHandler: () => void) => void
   // 停止播放路径
@@ -261,6 +263,8 @@ export type Path = {
   visibilityName: (visibility: boolean) => void
   // 更改标题气泡属性
   changeLine: (props: Partial<PathProps['line']>) => void
+  // 更改标题气泡属性
+  changeName: (name: string) => void
   // 距离相机位置
   toCameraDistance: number
   // 线段销毁

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

@@ -1,109 +1,138 @@
 <template>
   <Teleport to="#layout-app">
     <RightFillPano class="edit-path-point">
-      <ui-group :title="`${isTemploraryID(data.id) ? '创建' : '编辑'}路线`" borderBottom>
-        <ui-group-option class="item">
-          <span class="label">路径名称</span>
-          <span class="oper"> <Switch v-model:checked="data.showName" /> </span>
-        </ui-group-option>
-        <ui-group-option class="item">
-          <ui-input
-            width="100%"
-            type="text"
-            placeholder="路径名称"
-            v-model="data.name"
-            :maxlength="60"
-          />
-        </ui-group-option>
-        <ui-group-option class="item">
-          <span class="label">路径粗细</span>
-          <span class="oper">
-            <InputNumber
-              style="width: 120px"
-              v-model:value="data.lineWidth"
-              :max="100"
-              :min="1"
-              :controls="false"
-            >
-              <template #addonBefore>
-                <span
-                  class="fun-ctrl"
-                  @click="data.lineWidth = Math.max(1, data.lineWidth - 1)"
-                  >-</span
-                >
-              </template>
-              <template #addonAfter>
-                <span
-                  class="fun-ctrl"
-                  @click="data.lineWidth = Math.min(100, data.lineWidth + 1)"
-                  >+</span
-                >
-              </template>
-            </InputNumber>
-          </span>
-        </ui-group-option>
-        <ui-group-option class="item">
-          <span class="label">路径颜色</span>
-          <span class="oper">
-            <ui-input type="color" width="24px" height="24px" v-model="data.lineColor" />
-          </span>
-        </ui-group-option>
-        <ui-group-option class="item">
-          <span class="label">路径箭头</span>
-          <span class="oper">
-            <Switch v-model:checked="data.showDirection" />
-          </span>
-        </ui-group-option>
-        <ui-group-option class="item" v-if="data.showDirection">
-          <span class="label">箭头反向</span>
-          <span class="oper"> <Switch v-model:checked="data.reverseDirection" /> </span>
-        </ui-group-option>
-      </ui-group>
-      <ui-group borderBottom>
-        <ui-group-option>
-          <span>文字大小</span>
-          <Slider v-model:value="data.fontSize" :min="12" :max="60" :step="0.1" />
-        </ui-group-option>
-      </ui-group>
-      <ui-group borderBottom>
-        <ui-group-option>
-          <SignItem
-            label="可见范围"
-            v-if="!data.globalVisibility"
-            @apply-global="$emit('applyGlobal', 'visibilityRange')"
-          >
-            <Slider
-              v-model:value="data.visibilityRange"
-              :min="1"
-              :max="1000"
-              :step="0.1"
+      <div v-show="!~activePointNdx">
+        <ui-group
+          :title="`${isTemploraryID(data.id) ? '创建' : '编辑'}路线`"
+          borderBottom
+        >
+          <ui-group-option class="item">
+            <span class="label">路径名称</span>
+            <span class="oper"> <Switch v-model:checked="data.showName" /> </span>
+          </ui-group-option>
+          <ui-group-option class="item">
+            <ui-input
+              width="100%"
+              type="text"
+              placeholder="路径名称"
+              v-model="data.name"
+              :maxlength="60"
             />
-          </SignItem>
-        </ui-group-option>
-
-        <ui-group-option>
-          <SignItem @apply-global="$emit('applyGlobal', 'globalVisibility')">
-            <template v-slot:label>
+          </ui-group-option>
+          <ui-group-option class="item">
+            <span class="label">路径粗细</span>
+            <span class="oper">
+              <InputNumber
+                style="width: 120px"
+                v-model:value="data.lineWidth"
+                :max="100"
+                :min="1"
+                :controls="false"
+              >
+                <template #addonBefore>
+                  <span
+                    class="fun-ctrl"
+                    @click="data.lineWidth = Math.max(1, data.lineWidth - 1)"
+                    >-</span
+                  >
+                </template>
+                <template #addonAfter>
+                  <span
+                    class="fun-ctrl"
+                    @click="data.lineWidth = Math.min(100, data.lineWidth + 1)"
+                    >+</span
+                  >
+                </template>
+              </InputNumber>
+            </span>
+          </ui-group-option>
+          <ui-group-option class="item">
+            <span class="label">路径颜色</span>
+            <span class="oper">
               <ui-input
-                type="checkbox"
-                label="全部范围可见"
-                :modelValue="!!data.globalVisibility"
-                @update:modelValue="(v: boolean) => data.globalVisibility = v"
+                type="color"
+                width="24px"
+                height="24px"
+                v-model="data.lineColor"
               />
-            </template>
-          </SignItem>
-        </ui-group-option>
-      </ui-group>
-      <Button
-        block
-        type="primary"
-        ghost
-        size="large"
-        @click="switchPlay"
-        v-if="data.points.length"
-      >
-        {{ isScenePathPlayIng ? "停止" : "" }} 预览路径
-      </Button>
+            </span>
+          </ui-group-option>
+          <ui-group-option class="item">
+            <span class="label">路径箭头</span>
+            <span class="oper">
+              <Switch v-model:checked="data.showDirection" />
+            </span>
+          </ui-group-option>
+          <ui-group-option class="item" v-if="data.showDirection">
+            <span class="label">箭头反向</span>
+            <span class="oper"> <Switch v-model:checked="data.reverseDirection" /> </span>
+          </ui-group-option>
+        </ui-group>
+        <ui-group borderBottom>
+          <ui-group-option>
+            <span>文字大小</span>
+            <Slider v-model:value="data.fontSize" :min="12" :max="60" :step="0.1" />
+          </ui-group-option>
+        </ui-group>
+        <ui-group borderBottom>
+          <ui-group-option>
+            <SignItem
+              label="可见范围"
+              v-if="!data.globalVisibility"
+              @apply-global="$emit('applyGlobal', 'visibilityRange')"
+            >
+              <Slider
+                v-model:value="data.visibilityRange"
+                :min="1"
+                :max="1000"
+                :step="0.1"
+              />
+            </SignItem>
+          </ui-group-option>
+
+          <ui-group-option>
+            <SignItem @apply-global="$emit('applyGlobal', 'globalVisibility')">
+              <template v-slot:label>
+                <ui-input
+                  type="checkbox"
+                  label="全部范围可见"
+                  :modelValue="!!data.globalVisibility"
+                  @update:modelValue="(v: boolean) => data.globalVisibility = v"
+                />
+              </template>
+            </SignItem>
+          </ui-group-option>
+        </ui-group>
+        <Button
+          block
+          type="primary"
+          ghost
+          size="large"
+          @click="switchPlay"
+          v-if="data.points.length"
+        >
+          {{ isScenePathPlayIng ? "停止" : "" }} 预览路径
+        </Button>
+      </div>
+      <div v-if="~activePointNdx">
+        <ui-group title="编辑点" borderBottom>
+          <ui-group-option>描述：</ui-group-option>
+          <ui-group-option>
+            <ui-input
+              class="input"
+              width="100%"
+              height="158px"
+              v-model="data.points[activePointNdx].name"
+              placeholder="特征描述："
+              type="richtext"
+              :maxlength="200"
+            />
+          </ui-group-option>
+        </ui-group>
+        <Button block danger type="primary" ghost size="large" @click="deletePoint">
+          删除
+        </Button>
+      </div>
     </RightFillPano>
 
     <span
@@ -155,6 +184,22 @@ watch(node, () => {
   }
 });
 
+const activePointNdx = ref(-1);
+watchEffect((onCleanup) => {
+  if (!node.value) return;
+  const $node = node.value;
+  const handler = (ndx: number) => {
+    activePointNdx.value = ndx;
+  };
+  $node.bus.on("activePoint", handler);
+  onCleanup(() => $node.bus.off("activePoint", handler));
+});
+
+const deletePoint = () => {
+  props.data.points.splice(activePointNdx.value, 1);
+  activePointNdx.value = -1;
+};
+
 let unKeepAdding = shallowRef<() => void>();
 const keepAdding = () => {
   unKeepAdding.value && unKeepAdding.value();