<!--
 * @Date: 2025-03-10 14:37:31
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-10 16:38:24
 * @FilePath: /logic-flow2/src/views/menu.vue
 * @Description: 文件描述
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

<script setup>
import LogicFlow from '@logicflow/core';
import { CustomNode, CustomModel } from '@components/logicflow/custom-node.js'; // 指定业务状态设置菜单

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

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

  // 为菜单追加选项（必须在 lf.render() 之前设置）
  // 或者直接通过 lf.addMenuConfig 也可以调用
  lf.extension.menu.addMenuConfig({
    nodeMenu: [
      {
        text: '分享',
        callback() {
          alert('分享成功！')
        },
      },
      {
        text: '属性',
        callback(node) {
          alert(`
                节点id：${node.id}
                节点类型：${node.type}
                节点坐标：(x: ${node.x}, y: ${node.y})
              `)
        },
      },
    ],
    edgeMenu: [
      {
        text: '属性',
        callback(edge) {
          const {
            id,
            type,
            startPoint,
            endPoint,
            sourceNodeId,
            targetNodeId,
          } = edge
          alert(`
                边id：${id}
                边类型：${type}
                边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
                边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
                源节点id：${sourceNodeId}
                目标节点id：${targetNodeId}
              `)
        },
      },
    ],
    graphMenu: [
      {
        text: '分享',
        callback() {
          alert('分享成功！')
        },
      },
    ],
  })
  // 如果默认菜单中存在不需要的选项，或者无法满足需求，可以通过lf.setMenuConfig重置菜单，更换为自定义菜单。
  lf.extension.menu.setMenuConfig({
    nodeMenu: [
      {
        text: "删除",
        callback(node) {
          lf.deleteNode(node.id);
        },
      },
    ], // 覆盖默认的节点右键菜单
    edgeMenu: false, // 删除默认的边右键菜单
    graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
  });

  // 注册自定义节点
  lf.register({
    type: "custom_node",
    view: CustomNode,
    model: CustomModel,
  });

  // 监听自定义事件
  lf.on('custom:event', (nodeData) => {
    console.log('Node deleted:', nodeData);
    // 这里可以添加业务逻辑
  });

  lf.render({
    nodes: [
      { id: 'node1', type: 'rect', x: 100, y: 100 },
      { id: 'node2', type: 'circle', x: 300, y: 100 },
      {
        id: 'node3',
        type: 'custom_node',
        x: 500,
        y: 100,
        properties: {
          isDisabledNode: false
        }
      }
    ],
    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%;
}

/* 自定义菜单样式 */
.lf-menu-item {
  padding: 8px;
  cursor: pointer;
  &:hover {
    background: #f0f8ff;
  }
}
</style>