A visual graph editor based on G6 and Vue.
# 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 ✖ ✖ 右
import xfc from '@oxoyo/xfc'
import '@oxoyo/xfc/dist/xfc.css'
// 初始化
const xfcEditor = xfc({
el: '#xfc'
})
在初始化 xfc 实例时，可以配置参数。
全量配置工具项，覆写系统默认工具项信息，自定义程度高，无非必要不建议配置此项。
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: ''
}
}
【与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'
]
}
})
【与tools、enableTools互斥，配置后以此为主】设置要禁用的系统工具项
xfc({
el: '#xfc',
props: {
'logo',
'language',
'help'
}
})
【与tools互斥，配置后以此为主】设置自带的工具项的快捷键
xfc({
el: '#xfc',
props: {
shortcutMap: {
// 工具名
undo: {
// 工具名
tool: 'undo',
// 快捷键
key: 'mod+z',
// 快捷键文本
label: 'Ctrl + Z',
// 快捷键描述
description: ''
}
}
}
})
全量配置物料列表，覆写系统默认物料，自定义程度高，无非必要不建议配置此项。
xfc({
el: '#xfc',
props: {
materials: [
...
]
}
})
【与materials互斥，配置后以此为主】设置要启用的系统物料
xfc({
el: '#xfc',
props: {
enableMaterials: {
// 启用的物料分类
general: [
// 启用的分类下图形
'rectangle',
'rounded-rectangle'
]
}
}
})
配置系统信息
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.'
}
}
})
配置本地存储信息
xfc({
el: '#xfc',
props: {
storage: {
// 本地存储前缀
prefix: 'xfc'
}
}
})
配置多语言
xfc({
el: '#xfc',
props: {
i18n: {
// 默认语言包
defLocale: 'zh-CN',
// 自定义语音包或覆写系统语音包
locales: {
...
}
}
}
})
配置信息面板
xfc({
el: '#xfc',
props: {
infoPanel: {
// 配置信息
options: {
enable: true
},
// 导航器
navigator: {
enable: true,
// minimap插件配置
config: {
type: 'delegate',
delegateStyle: {
fill: '#ffffff',
stroke: '#000000'
}
}
}
}
}
})
接收数据，并进行渲染。
参数
名称 类型 是否必选 描述 data Object true 初始化的图数据，是一个包括 nodes 和 edges 的对象用法
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
},
{
id: 'node2',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
xfcEditor.read(data)
获取图数据。
该方法无参数。
返回值
用法
获取图中所有节点的实例。
⚠️ 注意: 这里返回的是节点的实例，而不是节点的数据项。
返回值
用法
const nodes = xfcEditor.getNodes()
获取图中所有边的实例。
⚠️ 注意: 这里返回的是边的实例，而不是边的数据项。
返回值
用法
const edges = xfcEditor.getEdges()
将画布上的元素导出为图片。
参数
名称 类型 是否必选 描述 name String false 图片的名称，不指定则为 'graph' type'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp' false 图片的类型。图的 renderer 为默认的 'canvas' 时生效，图的 renderer 为 'svg' 时将导出 svg 文件 backgroundColor String false 图片的背景色，可选，不传值时将导出透明背景的图片
用法
xfcEditor.downloadImage()
将画布上元素生成为图片的 URL。
参数
名称 类型 是否必选 描述 type'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp' false 图片的类型。图的 renderer 为默认的 'canvas' 时生效，图的 renderer 为 'svg' 时将导出 svg 文件 backgroundColor String false 图片的背景色，可选，不传值时将导出透明背景的图片
返回值
用法
const dataURL = xfcEditor.toDataURL()
我们目前接受 GitHub Pull Request ，并且所有开发提交的合并均通过 Pull Request 进行，故你可以直接点击该项目的 Fork 按钮得到你自己的 Fork ，在其上进行提交，并在修改完毕后直接通过 GitHub 网页发起 Pull Request 即可。对于 Pull Request 的介绍和使用方式，可以参阅 GitHub 帮助文档中的 “关于 Pull Request” 部分。
感谢所有为此项目做出贡献的人们！
Copyright (c) 2019-present, OXOYO
加我进群，备注【项目名称】
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4