fuse-code/src/components/path/list.vue

<template>
  <template v-for="(path, index) in paths" :key="path.id">
    <Sign
      v-if="getPathIsShow(path) && false"
      @delete="deletePath(path)"
      @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 { getPathIsShow, Path } from "@/store";
import { PathsNode } from "@/sdk/association/path";
const props = defineProps<{ paths: Path[] }>();
const nodes = reactive([]) as PathsNode;

watchEffect(() => (nodes.length = props.paths.length));

const deletePath = (path: Path) => {
  const index = props.paths.indexOf(path);
  props.paths.splice(index, 1);
};
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);
</script>