当前位置：首页 > article >正文

LogicFlow 在 React/Vue 中的完整安装使用指南

article 2025/2/27 13:57:57

以下是 LogicFlow 在 React/Vue 中的完整安装使用指南，包含核心配置与实战示例：

一、基础安装

# 核心库安装
npm install @logicflow/core --save

扩展插件（按需）

npm install @logicflow/extension --save # 包含选区、小地图等
二、核心使用步骤

创建实例

#javascript 
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css"; // 必须引入样式

// 初始化配置
const lf = new LogicFlow({
  container: document.getElementById("container"), // 容器ID
  grid: true,  // 显示网格
  keyboard: { enabled: true }  // 启用键盘快捷键
});

// 渲染画布
lf.render();

核心概念
Node：基础节点（矩形/圆形等）

Edge：连接线（直线/折线等）

Data Driven：通过 lf.render(jsonData) 驱动视图

三、React 集成示例

#jsx 
// LogicFlowReact.jsx
import { useEffect, useRef } from 'react';
import LogicFlow from '@logicflow/core';

export default function FlowDiagram() {
  const containerRef = useRef(null);
  
  useEffect(() => {
    const lf = new LogicFlow({
      container: containerRef.current,
      width: 800,
      height: 600
    });
    
    // 示例数据
    lf.render({
      nodes: [
        { id: '1', type: 'rect', x: 100, y: 100 },
        { id: '2', type: 'circle', x: 300, y: 200 }
      ],
      edges: [{ sourceNodeId: '1', targetNodeId: '2', type: 'line' }]
    });
  }, []);

  return <div ref={containerRef} className="flow-container" />;
}

四、Vue 集成示例

#vue 
<!-- LogicFlowVue.vue -->
<template>
  <div ref="container" class="flow-container"></div>
</template>

<script>
import LogicFlow from '@logicflow/core';

export default {
  mounted() {
    const lf = new LogicFlow({
      container: this.$refs.container,
      isSilentMode: false // 开启交互模式
    });
    
    // 注册自定义节点
    lf.register({
      type: 'custom-node',
      model: { /* 模型定义 */ },
      view: { /* 视图定义 */ }
    });

    lf.render({
      nodes: [{ id: 'node1', type: 'custom-node', x: 150, y: 150 }]
    });
  }
};
</script>

五、高级功能实现

使用插件

#javascript 
import { Control, MiniMap } from "@logicflow/extension";

// 配置中启用
const lf = new LogicFlow({
  plugins: [Control, MiniMap],
  // ...其他配置
});
2. 事件监听
javascript
复制
lf.on('node:click', ({ data }) => {
  console.log('点击节点:', data);
});

lf.on('connection:not-allowed', ({ data }) => {
  alert(`禁止连接: ${data.sourceId} -> ${data.targetId}`);
});

六、实战案例 - 审批流设计器

#javascript
 
// 定义审批节点类型
lf.register('approval-node', {
  model: {
    initNodeData() {
      return {
        width: 120,
        height: 60,
        properties: { status: 'pending' }
      };
    }
  },
  view: {
    onThemeChange(node, theme) {
      // 根据状态改变颜色
      const { status } = node.properties;
      return { fill: status === 'approved' ? '#90EE90' : '#FFB6C1' };
    }
  }
});

// 渲染审批流
lf.render({
  nodes: [
    { id: 'start', type: 'approval-node', x: 100, y: 100 },
    { id: 'manager', type: 'approval-node', x: 100, y: 250 }
  ],
  edges: [{ 
    sourceNodeId: 'start', 
    targetNodeId: 'manager',
    properties: { label: '提交至部门经理' }
  }]
});

七、常见问题解决
容器未找到错误

确保 DOM 已渲染完成后再初始化

Vue 使用 this.$nextTick() 包裹初始化代码

样式不生效

#javascript 
// 在入口文件额外引入
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css'; 
节点拖拽失效

javascript
复制
new LogicFlow({
  stopScrollGraph: true,  // 禁止画布滚动
  stopZoomGraph: true     // 禁止缩放
});