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

<template>
  <template v-for="(path, index) in paths" :key="path.id">
    <Sign
      v-if="getPathIsShow(path)"
      @delete="deletePath(path)"
      @updatePoints="(data) => updatePosition(index, data)"
      @updateLinePosition="(data) => updateLinePosition(index, data)"
      :ref="(node: any) => nodeHandler(index, node)"
      :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"]) => {
  if (props.paths[ndx].linePosition) {
    Object.assign(props.paths[ndx].linePosition, linePosition);
  } else {
    props.paths[ndx].linePosition = linePosition;
  }
};
const nodeHandler = (index: number, node: any) => {
  if (index < props.paths.length) {
    nodes[index] = { node, id: props.paths[index].id };
  }
};

defineExpose(nodes);
</script>