<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-13 16:51:49
 * @FilePath: /logic-flow2/src/views/adv-menu/index.vue
 * @Description: 拖拽面板
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

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

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

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

  lf.register(customNode);
  lf.register(customEdge);

  // 设置默认边的类型为自定义边类型
  lf.setDefaultEdgeType("custom_edge");

  lf.on("custom:event", (r) => {
    console.log(r);
  });

  /**
   * 根据菜单结构中的 class 覆盖原有样式，设置符合宿主风格的样式。
   * 菜单：lf-menu
   * 菜单项：lf-menu-item、用户自定义的 className
   * 菜单项-文案：lf-menu-item-text
   * 菜单项-图标：lf-menu-item-icon,需要将菜单项配置 icon 设置为 true 通过设置这些 class，可以覆盖默认样式，美化字体颜色，设置菜单项 icon 等。
   */

  // TAG: 以上介绍的菜单配置必须在 lf.render()之前调用。
  lf.render({
    nodes: [
      { id: "node1", type: "rect", x: 200, y: 100 },
      { id: "node2", type: "circle", x: 400, y: 100 },
      { id: "node3", type: "custom-node", x: 600, y: 100 },
    ],
    edges: [{ id: "edge1", sourceNodeId: "node1", targetNodeId: "node2" }],
  });
});
</script>

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

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

:deep(.lf-menu-delete .lf-menu-item-icon) {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("https://pic.616pic.com/ys_img/00/05/00/YgOv6ujQ2V.jpg") no-repeat;
  background-size: 20px;
}
</style>