基于G6-Editor的流程图编辑器

一、介绍

一个基于G6-Editor的流程图编辑器组件

二、依赖

AntV-G6
G6-Editor
antd

三、组件目录结构

    -  Flow--  images // 组件使用相关图片--  error.svg  //未编辑--  success.svg // 编辑成功--  type.svg // 节点类型--  model // 分离小组件--  ContextMenu.js // 右键菜单--  DetailPannel.js // 详情面板--  ItemPannel.js // 左侧节点列表--  Minimap.js // 导航器--  Page.js // Canvas--  Toolbar.js // 顶部toolbar--  style // 组件样式--  index.css--  Flow.js--  index.js

四、组件使用

import React, { Component } from 'react';
import { Button,Divider,Modal } from 'antd';
import Flow from './components/Flow'; // 编辑器组件import "./App.css";class App extends Component {constructor(props) {super(props);this.state = {visible: false,currentModel: {},relation: {nodes: []}}};onNodeClick = (model,relation) => {console.log(model,relation);this.setState({ currentModel: model,relation })}onNodeDbClick = (model) => {console.log(model);this.openEditNodeModal()}onPublish = (relation) => {console.log("保存",relation);}editNode = () => {console.log("编辑节点");this.openEditNodeModal()// 打开编辑模态框// 通过表单提交修改的节点信息// 并修改relation// 通过 this.flow.renderData(relation)// 重新渲染流程图数据}closeEditNodeModal = () => {this.setState({visible:false})};openEditNodeModal = () => {this.setState({visible: true})}render (){const { currentModel,visible } = this.state;return <div className="App"><Flow className="process-flow"ref={(node) => this.flow = node}onNodeDbClick={this.onNodeDbClick}onNodeClick={this.onNodeClick}onPublish={this.onPublish}nodeDetailPannel={<>流程节点名称: {currentModel.flowNodeName}<Divider />流程角色名称: {currentModel.flowNodeRole}<Divider /><Button type="primary" onClick={this.editNode}>编辑节点</Button></>}></Flow><Modal title="编辑节点" forceRender={true}style={{top: 20}}width={ 1000 }visible={visible} onCancel={this.closeEditNodeModal}footer={null}>编辑节点表单</Modal></div>};
}export default App;

五、展示

基于G6-Editor的流程图编辑器相关推荐

jsplumb拖线_基于 jsPlumb 的流程图编辑器的实现（二，连接线的操作）
连接线支持单击选中,backspace 和 delete 可删除:双击可以为连接线添加 label. 完整代码: /** * 单击删除连线 * */ clickLine:function(){ var ...
jsplumb设置锚点_记录一次基于jsPlumb流程图编辑器的开发过程
前言接到项目需求后,发现没有做过相关项目,盘算着拖拽倒是没有问题,但是控件的连线好像挺复杂,所以先开始了一番搜索,希望有合适的轮子那最好不过了.看了这篇对比文章:超级好用的流程图js框架,也看了一个 ...
基于G6的流程图绘制
最近项目中,有一个功能为流程图绘制,一开始是基于cavans进行绘制,但是由于绘制路线太多,计算点太多,额,然后费了好大劲,还是各种问题,最终放弃,选择基于g6重新进行了流程图绘制安装: npm i ...
基于 jsPlumb 的流程图编辑器的实现（一，节点的操作）
写在最前,就是第一次写博客,不免感慨,可以直接跳过 O(∩_∩)O 这是自己第一次写博客,经验不充分,如果觉得代码不详细,文章底部有源码地址,欢迎大家下载.基本的功能都实现了,测试有限,如果发现问题, ...
基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程基于jQuery的富文本编辑器summernote插件的使用教程一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
基于WebAssembly的前端视频编辑器设计与实现（个人毕设论文删改）
前言: 本来想通过一篇更精简通俗易懂的博文讲述的,但是写到一半发现要讲的东西太多,于是太监了,因此我把个人毕设做了一些删改,把工程源码放在了末尾,发出来供各位参考. (2021年10月8日更新了图片, ...
基于markdown-it打造的markdown编辑器
前言 markdown-it是一个用来解析markdown的库,它可以将markdown编译为html,然后解析时markdown-it会根据规则生成tokens,如果需要自定义,就通过rules函数 ...
在线html 浏览器,25个基于浏览器的HTML在线编辑器集合
本篇只是整理,排名不分先后,请大家按需使用. 新浪编辑器SinaEditor 应该算是最贴近网友体验的编辑器,简洁.大方,并且使用方便.功能强大. JAte 是一款精致小巧的文本编辑器,目的为提供高用 ...
25个基于浏览器的HTML在线编辑器集合
新浪编辑器SinaEditor 应该算是最贴近网友体验的编辑器,简洁.大方,并且使用方便.功能强大. JAte 是一款精致小巧的文本编辑器,目的为提供高用户体验,主要基于as3平台.由于需要flash ...

基于G6-Editor的流程图编辑器

一、介绍

二、依赖

三、组件目录结构

四、组件使用

五、展示

基于G6-Editor的流程图编辑器相关推荐

最新文章

热门文章