gg

Wesley13
• 阅读 851

基于 G6 和 React 的可视化图编辑器

        http://ggeditor.com/

GGEditor - Flow的简单使用

import GGEditor, { Flow } from 'gg-editor';

const data = {
  nodes: [{
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '起止节点',
    x: 55,
    y: 55,
    id: 'ea1184e8',
    index: 0,
  }, {
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '结束节点',
    x: 55,
    y: 255,
    id: '481fbb1a',
    index: 2,
  }],
  edges: [{
    source: 'ea1184e8',
    sourceAnchor: 2,
    target: '481fbb1a',
    targetAnchor: 0,
    id: '7989ac70',
    index: 1,
  }],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>

  GGEditor是容器组件。所有gg-editor定义的组件要在GGEditor内部才生效。在GGEditor组件上可以挂载两个事件:onBeforeCommandExecute和onAfterCommandExecute。

  onBeforeCommandExecute和onAfterCommandExecute内部可以接收一个对象,这个对象包含一个command对象。command对象包含了一些操作方法,例如撤回上一步(back),执行命令(execute)。等等。

  Flow组件在GGEditor组件内部被使用,是流程图组件。data接收一个对象,包含节点和连线的信息,初始化一个流程图。data中nodes代表节点,edges代表连线,他们分别以数组的形式记录图形的特征。Flow上可以添加一系列图例事件和鼠标事件,如果在绘图过程中需要处理数据可以在这里进行。

Props API

import { withPropsAPI } from 'gg-editor';

class Component extends React.Component {
  componentDidMount() {
    const { propsAPI } = this.props;

    console.log(propsAPI);
  }
}

export default withPropsAPI(Component);

  经过 withPropsAPI 包装的组件将会自带 propsAPI 属性。需要注意的是被装饰的组件也必须是在GGEditor的子组件(不能用在GGEditor上)。

属性

说明

类型

executeCommand

执行命令

function(command)

read

读取数据

function(data)

save

保存数据

function() => object

add

添加图项

function(type, model)

find

查找图项

function(id)

update

更新图项

function(item, model)

remove

删除图项

function(item)

getSelected

获取当前选中图项

function

  通过propsAPI调用的方法是操作图例的正确方法(之前以为data是可以setState更改的我...)。

Command

  下面是所有关于flow组件的内置命令。通过propsAPI.executeCommand()可以调用下面的命令操作图例。

命令英文名

命令中文名

快捷键(Mac)

快捷键(Win)

适用页面

clear

清空画布

-

-

All

selectAll

全选

⌘A

Ctrl+A

All

undo

撤销

⌘Z

Ctrl + Z

All

redo

重做

⇧⌘Z

Shift + Ctrl + Z

All

delete

删除

Delete

Delete

All

zoomIn

放大

⌘=

Ctrl + =

All

zoomOut

缩小

⌘-

Ctrl + -

All

autoZoom

自适应尺寸

-

-

All

resetZoom

实际尺寸

⌘0

Ctrl + 0

All

toFront

提升层级

-

-

All

toBack

下降层级

-

-

All

copy

复制

⌘C

Ctrl + C

Flow

paste

粘贴

⌘V

Ctrl + V

Flow

multiSelect

多选模式

-

-

Flow

addGroup

成组

⌘G

Ctrl + G

Flow

unGroup

取消组

⇧⌘G

Shift + Ctrl + G

Flow

  工具栏和图例右击操作,可以通过配置command自由组合。

import GGEditor, { Flow, Command, Toolbar, ContextMenu } from 'gg-editor';

<GGEditor>
  <Flow />
  <Toolbar>
    <Command name="undo"><button>Undo</button></Command>
    <Command name="redo">Redo</Command>
  </Toolbar>
  <ContextMenu>
    <Command name="undo">Undo</Command>
    <Command name="redo">Redo</Command>
  </ContextMenu>
</GGEditor>

  ContextMenu下面还有NodeMenu,EdgeMenu,CanvasMenu分组可以选择性的引入。分别对应对节点右击命令、连线右击命令和空白画布右击命令设置。

  当然也可以自定义命令。

import GGEditor, { Flow, RegisterCommand } from 'gg-editor';

<GGEditor>
  <Flow />
  <RegisterCommand name={...} config={...} extend={...} />
</GGEditor>

  其中name表示命令名称配置,extend可以继承内置命令。

  config可配置自定义命令的各项指标,是否可以进入队列,正反向执行命令函数等。

import React from "react";
import { RegisterCommand, withPropsAPI } from "gg-editor";

class DustomCommand extends React.Component {
  render() {
    const { propsAPI } = this.props;
    const { save, update, getSelected } = propsAPI;

    const config = {
      // 是否进入列队,默认为 true
      queue: true,

      // 命令是否可用
      enable(/* editor */) {
        return true;
      },

      // 正向命令逻辑
      execute(/* editor */) {
        // console.log(propsAPI.editor);
        const chart = save();
        console.log("chart", chart);
        const selectedNodes = getSelected();
        selectedNodes.map(node => {
          update(node, { x: node.model.x + 2, y: node.model.y });
        });
      },

      // 反向命令逻辑
      back(/* editor */) {
        console.log("执行反向命令2");
      },

      // 快捷按键配置
      shortcutCodes: [["ArrowLeft"], ["ArrowRight"]]
    };

    return <RegisterCommand name="dustomCommand" config={config} />;
  }
}

export default withPropsAPI(DustomCommand);

  这段代码从codesandbox复制过来的。用以参考。

ItemPanel

<ItemPanel className={styles.itemPanel}>
  <Item
    type="node"
    size="72*72"
    shape="flow-circle"
    model={{
      color: '#FA8C16',
      label: 'Start',
    }}
    // src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
  >
    flow-circle
  </Item>
</ItemPanel>

  可以拖拽图形到界面上。ItemPanel作为容器组件,包含Item组件。每个Item拖拽元素上包含了图形和数据信息。如果需要被拖拽的元素上包含数据信息,挂载在Item的model属性中。其中src属性是元素预览,可以不配置,在Item中间用文字表述当前内容。

其他

Minimap: 小地图组件

当初遇到的问题

1.propsAPI获取不到内容:withPropsAPI包裹的组件必须是GGEditor的子组件。

2.自定义组件如何使用:正确的办法是通过config配置,参照上面的代码(之前我在在内部RegisterCommand以后,在onAfterExecuteCommand中截获命令,通过函数控制图例操作。这中间需要下钻到内部组件调用propsAPI,我就通过setState去设置状态传递到子组件。)

3.如何设置拖拽组件:太羞耻了,居然不晓得在Item双标签内放名称。

4.操作流程图后获取数据延迟:如果获取数据有延迟,尝试使用setTimeout,时间间隔设为0后再调propsAPI属性的方法操作。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
8个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这