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

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

一、基础安装

javascript 复制代码
# 核心库安装
npm install @logicflow/core --save

扩展插件(按需)

npm install @logicflow/extension --save # 包含选区、小地图等

二、核心使用步骤

  1. 创建实例
javascript 复制代码
#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();
  1. 核心概念
    Node:基础节点(矩形/圆形等)

Edge:连接线(直线/折线等)

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

三、React 集成示例

javascript 复制代码
#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 集成示例

javascript 复制代码
#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>

五、高级功能实现

  1. 使用插件
javascript 复制代码
#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 复制代码
#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 复制代码
#javascript 
// 在入口文件额外引入
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css'; 
节点拖拽失效

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

最佳实践:建议配合 @logicflow/example 官方示例库进行调试,使用 Chrome 开发者工具的 Performance 面板分析交互性能。

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

相关推荐
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷4 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
WEI_Gaot5 小时前
zustand 基础和进阶
前端·react.js
土豆12505 小时前
构建高级半圆形进度条:SVG 与 纯 CSS 方案深度解析与完整代码
css·react.js·svg
前端大白话5 小时前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
WEI_Gaot5 小时前
React 19 Props 和 react-icons 和 事件处理函数
前端·react.js
苹果酱05676 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.6 小时前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot6 小时前
react19 的项目创建和组件使用
前端·react.js
zqlcoding6 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js