<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-12 20:18:28
 * @FilePath: /logic-flow2/src/views/adv-node/rule/index.vue
 * @Description: 连接规则
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import CustomHexagon from "./customHexagon";
import data from "./connectData";

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

const styleConfig = {
  style: {
    rect: {
      rx: 5,
      ry: 5,
      strokeWidth: 2,
    },
    circle: {
      fill: "#f5f5f5",
      stroke: "#666",
    },
    ellipse: {
      fill: "#dae8fc",
      stroke: "#6c8ebf",
    },
    polygon: {
      fill: "#d5e8d4",
      stroke: "#82b366",
    },
    diamond: {
      fill: "#ffe6cc",
      stroke: "#d79b00",
    },
    text: {
      color: "#b85450",
      fontSize: 12,
    },
  },
};

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

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

  lf.register(CustomHexagon);

  lf.setTheme({
    nodeText: {
      color: "#000000",
      overflowMode: "ellipsis",
      lineHeight: 1.2,
      fontSize: 12,
    },
  });

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

  lf.on("connection:not-allowed", (msg) => {
    console.log(msg);
  });
});
</script>

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

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