Skip to content
/ X-Flowchart-Vue Public
forked from OXOYO/X-Flowchart-Vue

基于G6和Vue的可视化图形编辑器。A visual graph editor based on G6 and Vue.

oxoyo.co/x-flowchart-vue/

License

MIT license
0 stars 320 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Trojanpa/X-Flowchart-Vue

BranchesTags
 
 

Repository files navigation

X-Flowchart-Vue

A visual graph editor based on G6 and Vue.

Version License NPM downloads Downloads

预览

online

示例

# git clone https://github.com/OXOYO/X-Flowchart-Vue.git

# install dependencies
yarn install

### run dev
yarn run serve

功能

功能 默认启用 快捷键 工具栏 右键菜单 备注
logo ✔ ✔ ✖ Logo
undo ✔ ctrl + z ✔ ✔ 撤销
clearLog ✔ ctrl + shift + l ✔ ✔ 清空操作日志
history ✔ ctrl + shift + h ✔ ✔ 操作日志
redo ✔ ctrl + shift + z ✔ ✔ 重做
copy ✔ ctrl + c ✔ ✔ 复制
paste ✔ ctrl + v ✔ ✔ 粘贴
delete ✔ Delete ✖ ✔ 删除
clear ✔ ctrl + shift + c ✔ ✔ 清空画布
zoom ✔ ✔ ✔ 缩放
zoomIn ✔ ctrl + + ✔ ✔ 放大
zoomOut ✔ ctrl + - ✔ ✔ 缩小
fit ✔ ctrl + 0 ✔ ✔ 适应屏幕
actualSize ✔ ctrl + 1 ✔ ✔ 实际大小
canvasBackground ✔ ✔ ✔ 画布背景
fill ✔ ✔ ✔ 填充颜色
lineColor ✔ ✔ ✔ 线条颜色
lineWidth ✔ ✔ ✔ 线条宽度
lineDash ✔ ✔ ✔ 线条样式
lineType ✔ ✔ ✔ 线条类型
startArrow ✔ ✔ ✔ 起点
endArrow ✔ ✔ ✔ 终点
toFront ✔ ✔ ✔ 置于顶层
toBack ✔ ✔ ✔ 置于底层
selectAll ✔ ctrl + a ✔ ✔ 全选
edit ✔ ✔ ✔ 编辑模式
preview ✔ ✔ ✔ 预览模式
upload ✔ ✔ ✔ 上传
download ✔ ✔ ✔ 下载
fullscreen ✔ ✔ ✔ 全屏
language ✔ ✔ ✔ 语言
github ✖ ✔ ✔ Github
feedback ✖ ✔ ✔ 反馈
help ✔ ✔ ✔ 帮助
up ✔ up ✖ ✖ 上
down ✔ down ✖ ✖ 下
left ✔ left ✖ ✖ 左
right ✔ right ✖ ✖ 右

使用指南

起步

安装

npm i @oxoyo/xfc --save

引用

import xfc from '@oxoyo/xfc'
import '@oxoyo/xfc/dist/xfc.css'

// 初始化
const xfcEditor = xfc({
    el: '#xfc'
})

配置

在初始化 xfc 实例时，可以配置参数。

props

参数 说明 类型 可选值 默认值
tools 全量配置工具项，覆写系统默认工具项信息，详见全量配置tools Object - -
enableTools 【与tools互斥，配置后以此为主】设置要启用的系统工具项 Array - -
disableTools 【与tools、enableTools互斥，配置后以此为主】设置要禁用的系统工具项 Array - -
shortcutMap 【与tools互斥，配置后以此为主】设置自带的工具项的快捷键 Object - -
materials 全量配置物料列表，覆写系统默认物料，详见全量配置materials Array - -
enableMaterials 【与materials互斥，配置后以此为主】设置要启用的系统物料 Object - -
system 配置系统信息 Object - -
storage 配置本地存储信息 Object - -
i18n 配置多语言 Object - -
infoPanel 信息面板配置 Object - -

tools

全量配置工具项，覆写系统默认工具项信息，自定义程度高，无非必要不建议配置此项。

tools数据结构 tools 下可以设置 toolList 与 shortcutMap

xfc({
  el: '#xfc',
  props: {
    tools: {
      toolList: [...],
      shortcutMap: {...}
    }
  }
})

tools.toolList下单个工具配置字段说明：

{
      // 工具项名称，保持唯一性，便于区分工具项
      name: 'logo',
      // 文本，无lang时可取label值显示
      label: 'logo',
      // 多语言code码
      lang: 'L10000',
      // 工具项类型，不同的工具类型在ToolBar、ContextMenu里的表现不一样
      type: 'link',
      // 工具项图标
      icon: '',
      img: system.logo,
      // 跳转连接
      link: system.site,
      // 是否启用该工具项，用户控制是否启用该工具项
      enableTool: true,
      // 是否启用，用于动态控制是否在界面上创建该工具项
      enable: true,
      // 启用模式，用于控制在什么模式下启用该工具项
      enableMode: ['edit', 'preview'],
      // 是否禁用，用于控制界面上已创建的工具项是否处于禁用状态
      disabled: false,
      // 禁用模式，用于控制在什么模式下该工具项处于禁用状态，详见Editor/Index.vue 中的doSetMode方法
      disabledMode: ['edit', 'preview'],
      // 热键
      shortcuts: '',
      // 工具栏
      toolbar: {
        // 是否启用
        enable: true,
        // 位置
        position: 'left',
        // 样式
        style: {
          opacity: 1
        },
        // 分割线，是否在该工具项后显示分割线，ToolBar中为竖线，ContextMenu中为横线
        divider: false
      },
      // 右键菜单
      contextmenu: {
        // 是否启用
        enable: false,
        // 目标元素类型，用于控制在什么元素上可以显示该工具项
        target: [],
        style: {},
        // 分割线，是否在该工具项后显示分割线，ToolBar中为竖线，ContextMenu中为横线
        divider: false
      }
    }

tools.shortcutMap下单个工具配置字段说明：

shortcutMap: {
  // 工具名
  undo: {
    // 工具名 
    tool: 'undo',
    // 快捷键
    key: 'mod+z',
    // 快捷键文本
    label: 'Ctrl + Z',
    // 快捷键描述
    description: '' 
  }
}

enableTools

【与tools互斥，配置后以此为主】设置要启用的工具项。

xfc({
  el: '#xfc',
  props: {
    enableTools: [
      // 日志相关
      'undo',
      'clearLog',
      'history',
      'redo',
      // 复制、粘贴
      'copy',
      'paste',
      // 删除
      'delete',
      // 清空画布
      'clear',
      // 缩放
      'zoom',
      'zoomIn',
      'zoomOut',
      'fit',
      'actualSize',
      // 画布背景
      'canvasBackground',
      // 元素基本操作
      'fill',
      'lineColor',
      'lineWidth',
      'lineDash',
      'lineType',
      'startArrow',
      'endArrow',
      'toFront',
      'toBack',
      'selectAll',
      'marquee',
      'group',
      'ungroup',
      'edit',
      'preview',
      'upload',
      'download',
      'layout',
      'fullscreen',
      'language',
      'github',
      'feedback',
      'help',
      // 纯快捷键
      'up',
      'down',
      'left',
      'right'
    ]
  }
})

disableTools

【与tools、enableTools互斥，配置后以此为主】设置要禁用的系统工具项

xfc({
  el: '#xfc',
  props: {
    'logo',
    'language',
    'help'
  }
})

shortcutMap

【与tools互斥，配置后以此为主】设置自带的工具项的快捷键

xfc({
  el: '#xfc',
  props: {
    shortcutMap: {
      // 工具名
      undo: {
        // 工具名 
        tool: 'undo',
        // 快捷键
        key: 'mod+z',
        // 快捷键文本
        label: 'Ctrl + Z',
        // 快捷键描述
        description: '' 
      }
    }
  }
})

materials

全量配置物料列表，覆写系统默认物料，自定义程度高，无非必要不建议配置此项。

xfc({
  el: '#xfc',
  props: {
    materials: [
        ...
    ]
  }
})

enableMaterials

【与materials互斥，配置后以此为主】设置要启用的系统物料

xfc({
  el: '#xfc',
  props: {
    enableMaterials: {
        // 启用的物料分类
        general: [
            // 启用的分类下图形
            'rectangle', 
            'rounded-rectangle'
        ]  
    }
  }
})

system

配置系统信息

xfc({
  el: '#xfc',
  props: {
    system: {
        version: '1.0.0',
        name: 'xfc',
        author: 'OXOYO',
        description: 'A visual graph editor based on G6 and Vue.',
        title: 'XFC',
        logo: require('@/assets/images/logo.png'),
        github: 'https://github.com/OXOYO/X-Flowchart-Vue',
        site: 'http://oxoyo.co/X-Flowchart-Vue/',
        feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new',
        copyright: '©2019 - 2020 OXOYO All Rights Reserved.'
    }
  }
})

storage

配置本地存储信息

xfc({
  el: '#xfc',
  props: {
    storage: {
        // 本地存储前缀
        prefix: 'xfc'
    }
  }
})

i18n

配置多语言

xfc({
  el: '#xfc',
  props: {
    i18n: {
        // 默认语言包
        defLocale: 'zh-CN',
        // 自定义语音包或覆写系统语音包
        locales: {
            ...
        }
    }
  }
})

infoPanel

配置信息面板

xfc({
  el: '#xfc',
  props: {
    infoPanel: {
        // 配置信息
        options: {
            enable: true
        },
        // 导航器
        navigator: {
            enable: true,
            // minimap插件配置
            config: {
                type: 'delegate',
                delegateStyle: {
                    fill: '#ffffff',
                    stroke: '#000000'
                }
            }
        }
    }
  }
})

API

read (data, isActualSize)

接收数据，并进行渲染。

参数

名称 类型 是否必选 描述
data Object true 初始化的图数据，是一个包括 nodes 和 edges 的对象

用法

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

xfcEditor.read(data)

save()

获取图数据。

该方法无参数。

返回值

  • 返回值类型：Object；
  • 返回值包括所有节点和边，数据结构如下下所示：
{
    nodes: [],
    edges: []
}

用法

xfcEditor.save()

getNodes()

获取图中所有节点的实例。

⚠️ 注意: 这里返回的是节点的实例，而不是节点的数据项。

返回值

  • 返回值类型：Array；
  • 返回值表示图中所有节点的实例。

用法

const nodes = xfcEditor.getNodes()

getEdges()

获取图中所有边的实例。

⚠️ 注意: 这里返回的是边的实例，而不是边的数据项。

返回值

  • 返回值类型：Array；
  • 返回值表示图中所有边的实例。

用法

const edges = xfcEditor.getEdges()

downloadImage (name, type, backgroundColor)

将画布上的元素导出为图片。

参数

名称 类型 是否必选 描述
name String false 图片的名称，不指定则为 'graph'
type 'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp' false 图片的类型。图的 renderer 为默认的 'canvas' 时生效，图的 renderer 为 'svg' 时将导出 svg 文件
backgroundColor String false 图片的背景色，可选，不传值时将导出透明背景的图片

用法

xfcEditor.downloadImage()

toDataURL (type, backgroundColor)

将画布上元素生成为图片的 URL。

参数

名称 类型 是否必选 描述
type 'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp' false 图片的类型。图的 renderer 为默认的 'canvas' 时生效，图的 renderer 为 'svg' 时将导出 svg 文件
backgroundColor String false 图片的背景色，可选，不传值时将导出透明背景的图片

返回值

  • 返回值类型：String；
  • 返回值表示生成的图片的 URL。

用法

const dataURL = xfcEditor.toDataURL()

Reference

@antvis/g6

@alibaba/GGEditor

@guozhaolong/wfd

grapheditor

Thank

guozhaolong

Contribution

我们目前接受 GitHub Pull Request ，并且所有开发提交的合并均通过 Pull Request 进行，故你可以直接点击该项目的 Fork 按钮得到你自己的 Fork ，在其上进行提交，并在修改完毕后直接通过 GitHub 网页发起 Pull Request 即可。对于 Pull Request 的介绍和使用方式，可以参阅 GitHub 帮助文档中的 “关于 Pull Request” 部分。

感谢所有为此项目做出贡献的人们！

curiosity-hyf

lzygit18

License

MIT

Copyright (c) 2019-present, OXOYO

Contact

点击链接加入群【Web全栈QQ群 333765077】：https://jq.qq.com/?_wv=1027&k=53iWbrr

About

基于G6和Vue的可视化图形编辑器。A visual graph editor based on G6 and Vue.

oxoyo.co/X-Flowchart-Vue/

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.1%
  • Vue 28.0%
  • CSS 3.8%
  • HTML 0.1%