<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-19 11:32:33
 * @FilePath: /logic-flow2/src/views/release.vue
 * @Description: 拖拽面板
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

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

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

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    nodeTextDraggable: true,
    nodeTextEdit: true,
    edgeTextEdit: true,
    stopScrollGraph: true,
    stopZoomGraph: false,
    style: {
      rect: {
        width: 100,
        height: 50,
        radius: 8,
      },
      circle: {
        r: 30,
      },
    },
  });

  lf.render({
    nodes: [
      {
        id: "start",
        type: "rect",
        x: 200,
        y: 100,
        text: "开始",
        properties: {
          nodeType: "start",
          style: {
            fill: "#e8f7ff",
            stroke: "#1890ff",
            strokeWidth: 2,
          },
          textStyle: {
            color: "#1890ff",
            fontSize: 16,
            fontWeight: "bold",
          },
        },
      },
      {
        id: "process",
        type: "circle",
        x: 400,
        y: 100,
        text: "处理",
        properties: {
          nodeType: "process",
          style: {
            fill: "#fff7e6",
            stroke: "#ffa940",
            strokeWidth: 2,
          },
        },
      },
    ],
    edges: [
      {
        id: "edge1",
        sourceNodeId: "start",
        targetNodeId: "process",
        type: "polyline",
        text: "流转",
        properties: {
          style: {
            stroke: "#1890ff",
            strokeWidth: 2,
          },
        },
      },
    ],
  });

  // 监听节点点击
  lf.on("node:click", ({ data }) => {
    console.log("点击节点:", data);
  });

  // 监听连线完成
  lf.on("edge:connect", ({ data }) => {
    console.log("连线完成:", data);
  });

  // 监听画布缩放
  lf.on("graph:transform", (transform) => {
    console.log("画布变换:", transform);
  });

  // 居中显示
  lf.translateCenter();
});
</script>

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

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