<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-13 12:26:00
 * @FilePath: /logic-flow2/src/views/adv-edge/animation/index.vue
 * @Description: 动画
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
    <button @click="edgeAnimation">动画</button>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import customEdge from "./customEdge";
import data from "./data";

const container = ref(null);
let lf = null;

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    adjustEdgeStartAndEnd: true, // 开启两端的调整连线功能
    edgeGenerator: (sourceNode) => {
      if (sourceNode.type === "circle") {
        return "line";
      }
    },
  });

  lf.register(customEdge);
  lf.setDefaultEdgeType("custom-edge");

  lf.render(data);
  lf.translateCenter();
});

const edgeAnimation = () => {
  const { edges } = lf?.getGraphRawData();
  edges?.forEach(({ id }) => {
    lf?.openEdgeAnimation(id);
  });
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>