gg修改器框架免root无病毒_GG免root框架修改器

大家好，今天小编为大家分享关于gg修改器框架免root无病毒_GG免root框架修改器的内容，赶快来一起来看看吧。

介绍

在过往文章中就介绍过不少阿里的开源项目，而且大多数都是及其优秀的，为广大开发者同仁们提供了现成的解决方案，今天这篇文章也一样，GGEditor 基于 Antv G6 与 React，提供流程图、脑图、拓扑图的可视化编辑能力。不用质疑过GGEditor 的项目名，其实 GGEditor 的全称是 Great Graphic Editor，是不是突然感觉上高大上了不少，让我们一起来见识一下！

坐标

https:///alibaba/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,
}],
};
<GGEditor>
<Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>

• 思维导图

import GGEditor, { Mind } from ’gg-editor’;
const data = {
roots: [{
label: ’中心主题’,
children: [{
label: ’分支主题 1’,
}, {
label: ’分支主题 2’,
}, {
label: ’分支主题 3’,
}],
}],
};
<GGEditor>
<Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>

• 缩略图

不指定宽高的情况下则自动适应容器尺寸

import GGEditor, { Flow, Minimap } from ’gg-editor’;
<GGEditor>
<Flow />
<Minimap width={200} height={200} />
</GGEditor>

• 命令

此组件只能嵌套在 <Toolbar /> 或 <ContextMenu /> 组件内使用：

import GGEditor, { Flow, Command, Toolbar, ContextMenu } from ’gg-editor’;
<GGEditor>
<Flow />
<Toolbar>
<Command name=”undo”>撤销</Command>
<Command name=”redo”>重做</Command>
</Toolbar>
<ContextMenu>
<Command name=”undo”>撤销</Command>
<Command name=”redo”>重做</Command>
</ContextMenu>
</GGEditor>

• 右键菜单

右键菜单，负责菜单显示隐藏，命令按钮绑定与可用禁用状态控制。必需配合 <Command /> 组件使用。自动根据不同页面状态显示对应菜单，例如：选中节点时则只会显示 NodeMenu。

import GGEditor, {
Flow,
Command,
ContextMenu,
NodeMenu,
EdgeMenu,
GroupMenu,
MultiMenu,
CanvasMenu,
} from ’gg-editor’;
<GGEditor>
<Flow />
<ContextMenu>
<NodeMenu> // 节点右键菜单
<Command name=”copy”>复制</Command>
<Command name=”delete”>删除</Command>
</NodeMenu>
<EdgeMenu /> // 边线右键菜单
<GroupMenu /> // 群组右键菜单
<MultiMenu /> // 多选右键菜单
<CanvasMenu /> // 画布右键菜单
</ContextMenu>
</GGEditor>

• 工具栏

工具栏，负责命令按钮绑定与可用禁用状态控制。必需配合 <Command /> 组件使用

import GGEditor, { Flow, Command, Toolbar } from ’gg-editor’;
<GGEditor>
<Flow />
<Toolbar>
<Command name=”undo”>撤销</Command>
<Command name=”redo”>重做</Command>
</Toolbar>
</GGEditor>

• 元素面板栏

必需配合 <Item /> 组件使用，如果 <Item /> 包含 src 属性则自动显示元素概览图片。

import GGEditor, { Flow, Item, ItemPanel } from ’gg-editor’;
<GGEditor>
<Flow />
<ItemPanel>
<Item
type=”node”
size=”72*72″
shape=”flow-circle”
model={{
color: ’#FA8C16’,
label: ’起止节点’,
}}
src=”https://gw./zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg”
/>
</ItemPanel>
</GGEditor>

• 属性栏

属性栏会自动根据不同页面状态显示对应面板，例如：选中节点时则只会显示 NodePanel。

import GGEditor, {
Flow,
DetailPanel,
NodePanel,
EdgePanel,
GroupPanel,
MultiPanel,
CanvasPanel,
} from ’gg-editor’;
<GGEditor>
<Flow />
<DetailPanel>
<NodePanel> // 节点属性面板
<NodeDetail />
</NodePanel>
<EdgePanel /> // 边线属性面板
<GroupPanel /> // 群组属性面板
<MultiPanel /> // 多选属性面板
<CanvasPanel /> // 画布属性面板
</DetailPanel>
</GGEditor>
class NodeDetail extends React.Component {
render() {
console.log(’this.props’, this.props);
}
}

以上是部分代码示例，详细API请移步Github

总结

GGEditor是一个非常值得尝试的Web产品，用过阿里语雀的文档就知道，其中非常丰富的插件就有很多类似的产品，如果你也有这样的需求项目，那么它对你来说我相信是足够有吸引力的，如果有需要可以尝试使用！

以上就是关于gg修改器框架免root无病毒_GG免root框架修改器的全部内容，感谢大家的浏览观看，如果你喜欢本站的文章可以CTRL+D收藏哦。