<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-12 18:00:09
 * @FilePath: /logic-flow2/src/views/theme/index.vue
 * @Description: 主题 Theme
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

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

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

onMounted(() => {
  // 方法1：new LogicFlow时作为配置传入
  const config = {
    domId: "app",
    width: 1000,
    height: 800,
    style: {
      // 设置默认主题样式
      // rect: { ... }, // 矩形样式
      // circle: { ... }, // 圆形样式
      // nodeText: { ... }, // 节点文本样式
      // edgeText: { ... }, // 边文本样式
      // anchor: { ... }, // 锚点样式
      // ...,
    },
  };

  // 方法2： 调用LogicFlow的setTheme方法
  // lf.setTheme({ // 设置默认主题样式
  //   rect: {...}, // 矩形样式
  //   circle: {...}, // 圆形样式
  //   nodeText: {...}, // 节点文本样式
  //   edgeText: {...}, // 边文本样式
  //   anchor: {...}, // 锚点样式
  //   ...
  // })

  lf = new LogicFlow({
    container: container.value,
    grid: true,
  });

  lf.setTheme({
    rect: {
      fill: "#FFFFFF",
      stroke: "rgba(68, 83, 130, 0.25)",
      strokeWidth: 1,
      anchorShow: true, // 强制显示锚点
      anchorHoverShow: true, // 保持 hover 效果
    },
    circle: {
      // 新增圆形节点配置
      anchorShow: true, // 强制显示锚点
      anchorHoverShow: true,
    },
    anchor: {
      stroke: "#4d53e8",
      fill: "#4d53e8",
      r: 3,
      show: true, // 新增：全局显示锚点
      hover: {
        fill: "#949494",
        fillOpacity: 0.5,
        stroke: "#949494",
        r: 10,
      },
    },
  });

  lf.register(CustomEdge);

  // 使用自定义连线类型
  lf.setDefaultEdgeType("custom-edge");

  lf.render({
    nodes: [
      { id: "node1", type: "rect", x: 200, y: 100 },
      { id: "node2", type: "circle", x: 400, y: 100 },
      { id: '7', type: 'html', x: 600, y: 320 },
    ],
    edges: [
      { id: "edge1", sourceNodeId: "node1", targetNodeId: "node2", type: "custom-edge" },
    ],
  });

  lf.on("node:render", (node) => {
    const { nodeConfig } = node;
    // 设定锚点
    nodeConfig.anchors = [
      { x: 0.5, y: 0 }, // 上部中间
      { x: 0.5, y: 1 }, // 下部中间
    ];
    // 也可以设置其他锚点
  });
});
</script>

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

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