<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-12 15:25:22
 * @FilePath: /logic-flow2/src/views/edge/text.vue
 * @Description: 自定义边文本位置
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

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

const SilentConfig = {
  stopScrollGraph: true,
  stopMoveGraph: true,
  stopZoomGraph: true,
};

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

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    ...SilentConfig,
    // 手动设置默认边
    edgeType: "bezier",
    // 移动已有边时会有 currentEdge 信息, 否则为空
    edgeGenerator: (sourceNode, targetNode, currentEdge) => {
      // 起始节点类型 rect 时使用 自定义的边 custom-edge
      if (sourceNode.type === "rect") return "custom-edge";
    },
  });

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

  lf.setTheme({
    edgeText: {
      textWidth: 100,
      overflowMode: "autoWrap",
      fontSize: 14,
      background: {
        fill: "red",
      },
    },
    arrow: {
      offset: 4, // 箭头垂线长度
      verticalLength: 2, // 箭头底线长度
    },
  });

  lf.render(data);
  lf.translateCenter();
});
</script>

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

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
}

:deep(.custom-text) {
  font-size: 14px !important;
  fill: #333 !important; /* 使用 fill 替代 color */
  background-color: #fff !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
}
</style>