介紹
在過往文章中就介紹過不少阿裡的開源項目，而且大多數都是及其優秀的，為廣大開發者同仁們提供瞭現成的解決方案，今天這篇文章也一樣，GGEditor 基於 Antv G6 與 React，提供流程圖、腦圖、拓撲圖的可視化編輯能力。不用質疑過GGEditor 的項目名，其實 GGEditor 的全稱是 Great Graphic Editor，是不是突然感覺上高大上瞭不少，讓我們一起來見識一下！
坐標
https://ttimg.youseeandyouhappy.com/lcimages/origin/pgc-image/838a998186894ed9929f388deeaa6588" img_width="800" img_height="407" alt="阿裡基於G6和React打造的開源可視化圖形編輯器——GGEditor" inline="0">思維導圖拓撲圖
安裝使用使用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';