wr-npm-practice

v1.0.0

Published

3 years ago

A visual graph editor based on G6 and Vue.

Downloads

0High
0Medium
0Low

wr2021

flowchart vue-flowchart g6 g6-editor mind

X-Flowchart-Vue

A visual graph editor based on G6 and Vue.

预览

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

Thank

guozhaolong

Contribution

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

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

curiosity-hyf

lzygit18

License

MIT

Contact

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

X-Flowchart-Vue

预览

示例

功能

使用指南

起步

安装

引用

配置

props

tools

enableTools

disableTools

shortcutMap

materials

enableMaterials

system

storage

i18n

infoPanel

API

read (data, isActualSize)

save()

getNodes()

getEdges()

downloadImage (name, type, backgroundColor)

toDataURL (type, backgroundColor)

Reference

Thank

Contribution

License

Contact