阿裡基於G6和React打造的開源可視化圖形編輯器——GGEditor

介紹

在過往文章中就介紹過不少阿裡的開源項目,而且大多數都是及其優秀的,為廣大開發者同仁們提供瞭現成的解決方案,今天這篇文章也一樣,GGEditor 基於 Antv G6 與 React,提供流程圖、腦圖、拓撲圖的可視化編輯能力。不用質疑過GGEditor 的項目名,其實 GGEditor 的全稱是 Great Graphic Editor,是不是突然感覺上高大上瞭不少,讓我們一起來見識一下!

阿裡基於G6和React打造的開源可視化圖形編輯器——GGEditor

坐標

https://ttimg.youseeandyouhappy.com/lcimages/origin/pgc-image/838a998186894ed9929f388deeaa6588" img_width="800" img_height="407" alt="阿裡基於G6和React打造的開源可視化圖形編輯器——GGEditor" inline="0">

思維導圖阿裡基於G6和React打造的開源可視化圖形編輯器——GGEditor

拓撲圖阿裡基於G6和React打造的開源可視化圖形編輯器——GGEditor

安裝使用使用npm安裝
npm install --save gg-editor

流程圖

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, }],}; 

思維導圖

import GGEditor, { Mind } from 'gg-editor';const data = { roots: [{ label: '中心主題', children: [{ label: '分支主題 1', }, { label: '分支主題 2', }, { label: '分支主題 3', }], }],}; 

縮略圖

不指定寬高的情況下則自動適應容器尺寸

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

命令

此組件隻能嵌套在 或 組件內使用:

import GGEditor, { Flow, Command, Toolbar, ContextMenu } from 'gg-editor';   撤銷 重做   撤銷 重做 

右鍵菜單

右鍵菜單,負責菜單顯示隱藏,命令按鈕綁定與可用禁用狀態控制。必需配合 組件使用。自動根據不同頁面狀態顯示對應菜單,例如:選中節點時則隻會顯示 NodeMenu。

import GGEditor, { Flow, Command, ContextMenu, NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu,} from 'gg-editor';    // 節點右鍵菜單 復制 刪除   // 邊線右鍵菜單  // 群組右鍵菜單  // 多選右鍵菜單  // 畫佈右鍵菜單 

工具欄

工具欄,負責命令按鈕綁定與可用禁用狀態控制。必需配合 組件使用

import GGEditor, { Flow, Command, Toolbar } from 'gg-editor';   撤銷 重做 

元素面板欄

必需配合 組件使用,如果 包含 src 屬性則自動顯示元素概覽圖片。

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *