diff --git a/config/router.config.js b/config/router.config.js
index 2698abc9938ae5946af0a4bf2dc30f0e05172042..32e8172c434d8b099cc4e0d5c82bc1fd0d99d905 100644
--- a/config/router.config.js
+++ b/config/router.config.js
@@ -93,6 +93,29 @@ export default [
},
],
},
+ // editor
+ {
+ name: 'editor',
+ icon: 'highlight',
+ path: '/editor',
+ routes: [
+ {
+ path: '/editor/flow',
+ name: 'flow',
+ component: './Editor/GGEditor/Flow',
+ },
+ {
+ path: '/editor/mind',
+ name: 'mind',
+ component: './Editor/GGEditor/Mind',
+ },
+ {
+ path: '/editor/koni',
+ name: 'koni',
+ component: './Editor/GGEditor/Koni',
+ },
+ ],
+ },
// list
{
path: '/list',
diff --git a/package.json b/package.json
index 3990b35857a4afa7a44bd63f11a14f25a0ebccb2..7bc019c363acc1c4fdc686c499c19a7f83d7ac32 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"classnames": "^2.2.6",
"dva": "^2.4.1",
"enquire-js": "^0.2.1",
+ "gg-editor": "^2.0.2",
"hash.js": "^1.1.7",
"lodash": "^4.17.11",
"lodash-decorators": "^6.0.1",
diff --git a/public/ggeditor/flow/decision.svg b/public/ggeditor/flow/decision.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7af317ce1355d5a77f56a98c6d77a1c3bef86127
--- /dev/null
+++ b/public/ggeditor/flow/decision.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/flow/model.svg b/public/ggeditor/flow/model.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3fd8afaacc1999532827a51f3751a22093ec71ae
--- /dev/null
+++ b/public/ggeditor/flow/model.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/flow/normal.svg b/public/ggeditor/flow/normal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..53791e9f09c0a70e69daa7a3ab574723b352ae5a
--- /dev/null
+++ b/public/ggeditor/flow/normal.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/flow/start.svg b/public/ggeditor/flow/start.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3ab4c3cb0ed9a2dc9d43c760f87c07c15fa9248c
--- /dev/null
+++ b/public/ggeditor/flow/start.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/koni/bank.svg b/public/ggeditor/koni/bank.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7ec116435088f35f39bd31646811d9038eb38726
--- /dev/null
+++ b/public/ggeditor/koni/bank.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/koni/country.svg b/public/ggeditor/koni/country.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eeb861a7ba40d65a9e71062f95818bbf3cf90f3e
--- /dev/null
+++ b/public/ggeditor/koni/country.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/koni/icon.svg b/public/ggeditor/koni/icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0c3eba65765ebcf28d71a69ec43f652a7ae32fd6
--- /dev/null
+++ b/public/ggeditor/koni/icon.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/public/ggeditor/koni/person.svg b/public/ggeditor/koni/person.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c9dcad00bb39d2860fbda7615fce97a4b0df7de2
--- /dev/null
+++ b/public/ggeditor/koni/person.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/src/locales/en-US.js b/src/locales/en-US.js
index 25f2888c58c13f5ee8532e0b522cfd7169b77a2a..a10691ce541b067721da3e4f0356d3b3a27f3e7b 100644
--- a/src/locales/en-US.js
+++ b/src/locales/en-US.js
@@ -10,6 +10,7 @@ import settingDrawer from './en-US/settingDrawer';
import settings from './en-US/settings';
import pwa from './en-US/pwa';
import component from './en-US/component';
+import editor from './en-US/editor';
export default {
'navBar.lang': 'Languages',
@@ -32,4 +33,5 @@ export default {
...settings,
...pwa,
...component,
+ ...editor,
};
diff --git a/src/locales/en-US/editor.js b/src/locales/en-US/editor.js
new file mode 100644
index 0000000000000000000000000000000000000000..81bd0f170a0aca1a2a438898d177062de65f4256
--- /dev/null
+++ b/src/locales/en-US/editor.js
@@ -0,0 +1,11 @@
+export default {
+ 'app.editor.flow.title': 'Flowchart Editor',
+ 'app.editor.flow.description':
+ 'The flow chart is an excellent way to represent the idea of the algorithm.',
+ 'app.editor.koni.title': 'Koni Editor',
+ 'app.editor.koni.description':
+ 'The topology diagram refers to the network structure diagram composed of network node devices and communication media.',
+ 'app.editor.mind.title': 'Mind Map Editor',
+ 'app.editor.mind.description':
+ 'The brain map is an effective graphical thinking tool for expressing divergent thinking. It is simple but effective and is a practical thinking tool.',
+};
diff --git a/src/locales/en-US/menu.js b/src/locales/en-US/menu.js
index 056c255eca4bffa91f1e11706ec92d2b4b96cdc7..1d67346615bab48507fc7f4e3e08b06dd83802c4 100644
--- a/src/locales/en-US/menu.js
+++ b/src/locales/en-US/menu.js
@@ -38,4 +38,8 @@ export default {
'menu.account.settings': 'Account Settings',
'menu.account.trigger': 'Trigger Error',
'menu.account.logout': 'Logout',
+ 'menu.editor': 'Editor',
+ 'menu.editor.flow': 'Flow Editor',
+ 'menu.editor.mind': 'Mind Editor',
+ 'menu.editor.koni': 'Koni Editor',
};
diff --git a/src/locales/pt-BR.js b/src/locales/pt-BR.js
index af8bcee53c1a28e9436853fe9a6a4c8b61d4755e..19e82643d4d9aab5eadd19b35c371bb46c5c8e03 100644
--- a/src/locales/pt-BR.js
+++ b/src/locales/pt-BR.js
@@ -10,6 +10,7 @@ import settingDrawer from './pt-BR/settingDrawer';
import settings from './pt-BR/settings';
import pwa from './pt-BR/pwa';
import component from './pt-BR/component';
+import editor from './pt-BR/editor';
export default {
'navBar.lang': 'Idiomas',
@@ -32,4 +33,5 @@ export default {
...settings,
...pwa,
...component,
+ ...editor,
};
diff --git a/src/locales/pt-BR/editor.js b/src/locales/pt-BR/editor.js
new file mode 100644
index 0000000000000000000000000000000000000000..10237f9b7443fa000fbfc6254e0621053cea7318
--- /dev/null
+++ b/src/locales/pt-BR/editor.js
@@ -0,0 +1,11 @@
+export default {
+ 'app.editor.flow.title': 'Editor de diagrama de flujo',
+ 'app.editor.flow.description':
+ 'El diagrama de flujo es una excelente manera de representar la idea del algoritmo.',
+ 'app.editor.koni.title': 'Editor de topologia',
+ 'app.editor.koni.description':
+ 'El diagrama de topología se refiere al diagrama de estructura de red compuesto por dispositivos de nodo de red y medios de comunicación.',
+ 'app.editor.mind.title': 'Editor de mapas cerebrales',
+ 'app.editor.mind.description':
+ 'El mapa cerebral es una herramienta de pensamiento gráfico eficaz para expresar el pensamiento divergente. Es simple pero efectivo y es una herramienta de pensamiento práctico.',
+};
diff --git a/src/locales/pt-BR/menu.js b/src/locales/pt-BR/menu.js
index 77ee7fd7e37cbd51ee043f2ebb472e1b097faa5c..ee82fb1edf10037cbaa50085b020e7c22f77ce0a 100644
--- a/src/locales/pt-BR/menu.js
+++ b/src/locales/pt-BR/menu.js
@@ -38,4 +38,8 @@ export default {
'menu.account.settings': 'Configurar Conta',
'menu.account.trigger': 'Disparar Erro',
'menu.account.logout': 'Sair',
+ 'menu.editor': 'Editor',
+ 'menu.editor.flow': 'Flow Editor',
+ 'menu.editor.mind': 'Mind Editor',
+ 'menu.editor.koni': 'Koni Editor',
};
diff --git a/src/locales/zh-CN.js b/src/locales/zh-CN.js
index cf601f378ee3d2584adaf91fb87e81249dcfbf3b..6cc85e4b9aab540d6e330f8c4270a9d71c1ea102 100644
--- a/src/locales/zh-CN.js
+++ b/src/locales/zh-CN.js
@@ -10,6 +10,7 @@ import settingDrawer from './zh-CN/settingDrawer';
import settings from './zh-CN/settings';
import pwa from './zh-CN/pwa';
import component from './zh-CN/component';
+import editor from './zh-CN/editor';
export default {
'navBar.lang': '语言',
@@ -32,4 +33,5 @@ export default {
...settings,
...pwa,
...component,
+ ...editor,
};
diff --git a/src/locales/zh-CN/editor.js b/src/locales/zh-CN/editor.js
new file mode 100644
index 0000000000000000000000000000000000000000..1688644e8130e38cf2193a1ab40e511f4b55a1a0
--- /dev/null
+++ b/src/locales/zh-CN/editor.js
@@ -0,0 +1,9 @@
+export default {
+ 'app.editor.flow.title': '流程图编辑器',
+ 'app.editor.flow.description': '千言万语不如一张图，流程图是表示算法思路的好方法',
+ 'app.editor.koni.title': '拓扑编辑器',
+ 'app.editor.koni.description': '拓扑结构图是指由网络节点设备和通信介质构成的网络结构图',
+ 'app.editor.mind.title': '脑图编辑器',
+ 'app.editor.mind.description':
+ '脑图是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。',
+};
diff --git a/src/locales/zh-CN/menu.js b/src/locales/zh-CN/menu.js
index 5657c6e056a8f8dc5bff5fc964246b43a1070e70..0fb0069ea157d79190c94ae0c3468f27e9302167 100644
--- a/src/locales/zh-CN/menu.js
+++ b/src/locales/zh-CN/menu.js
@@ -38,4 +38,8 @@ export default {
'menu.account.settings': '个人设置',
'menu.account.trigger': '触发报错',
'menu.account.logout': '退出登录',
+ 'menu.editor': '编辑页',
+ 'menu.editor.flow': '流程编辑器',
+ 'menu.editor.mind': '脑图编辑器',
+ 'menu.editor.koni': '拓扑编辑器',
};
diff --git a/src/locales/zh-TW.js b/src/locales/zh-TW.js
index c621733984db2b669fdff1b4fdc89ac777617ed3..33351509fb4d01009053f7718ccea8b39a2bd183 100644
--- a/src/locales/zh-TW.js
+++ b/src/locales/zh-TW.js
@@ -10,6 +10,7 @@ import settingDrawer from './zh-TW/settingDrawer';
import settings from './zh-TW/settings';
import pwa from './zh-TW/pwa';
import component from './zh-TW/component';
+import editor from './zh-TW/editor';
export default {
'navBar.lang': '語言',
@@ -32,4 +33,5 @@ export default {
...settings,
...pwa,
...component,
+ ...editor,
};
diff --git a/src/locales/zh-TW/editor.js b/src/locales/zh-TW/editor.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1d137748446283a76e6fefc15e35554c6d4ae1e
--- /dev/null
+++ b/src/locales/zh-TW/editor.js
@@ -0,0 +1,9 @@
+export default {
+ 'app.editor.flow.title': '流程圖編輯器',
+ 'app.editor.flow.description': '千言萬語不如一張圖，流程圖是表示算法思路的好方法',
+ 'app.editor.koni.title': '拓撲編輯器',
+ 'app.editor.koni.description': '拓撲結構圖是指由網絡節點設備和通信介質構成的網絡結構圖',
+ 'app.editor.mind.title': '腦圖編輯器',
+ 'app.editor.mind.description':
+ '腦圖是表達發散性思維的有效圖形思維工具 ，它簡單卻又很有效，是一種實用性的思維工具',
+};
diff --git a/src/locales/zh-TW/menu.js b/src/locales/zh-TW/menu.js
index 7bd71a7a7ca8ae5698968a7f1f0d8a8d4dc7c19c..2cf5f9dac27a23cb1714b808de2808831eca3069 100644
--- a/src/locales/zh-TW/menu.js
+++ b/src/locales/zh-TW/menu.js
@@ -38,4 +38,8 @@ export default {
'menu.exception.not-find': '404',
'menu.exception.server-error': '500',
'menu.exception.trigger': '触发错误',
+ 'menu.editor': '編輯頁',
+ 'menu.editor.flow': '流程編輯器',
+ 'menu.editor.mind': '腦圖編輯器',
+ 'menu.editor.koni': '拓撲編輯器',
};
diff --git a/src/pages/Editor/GGEditor/Flow/index.js b/src/pages/Editor/GGEditor/Flow/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6acac054a774a1b3f75d6ad8bc3e244534409c76
--- /dev/null
+++ b/src/pages/Editor/GGEditor/Flow/index.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import GGEditor, { Flow } from 'gg-editor';
+import EditorMinimap from '../components/EditorMinimap';
+import { FlowContextMenu } from '../components/EditorContextMenu';
+import { FlowToolbar } from '../components/EditorToolbar';
+import { FlowItemPanel } from '../components/EditorItemPanel';
+import { FlowDetailPanel } from '../components/EditorDetailPanel';
+import styles from './index.less';
+import { FormattedMessage } from 'umi/locale';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+const FlowPage = () => {
+ return (
+ }
+ content={}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default FlowPage;
diff --git a/src/pages/Editor/GGEditor/Flow/index.less b/src/pages/Editor/GGEditor/Flow/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..aeffa8293bba01745b47148456f4df752bddbdf0
--- /dev/null
+++ b/src/pages/Editor/GGEditor/Flow/index.less
@@ -0,0 +1,41 @@
+.editor {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ width: 100%;
+ height: calc(100vh - 250px);
+ background: #fff;
+}
+
+.editorHd {
+ padding: 8px;
+ border: 1px solid #e6e9ed;
+}
+
+.editorBd {
+ flex: 1;
+}
+
+.editorSidebar,
+.editorContent {
+ display: flex;
+ flex-direction: column;
+}
+
+.editorSidebar {
+ background: #fafafa;
+
+ &:first-child {
+ border-right: 1px solid #e6e9ed;
+ }
+
+ &:last-child {
+ border-left: 1px solid #e6e9ed;
+ }
+}
+
+.flow,
+.mind,
+.koni {
+ flex: 1;
+}
diff --git a/src/pages/Editor/GGEditor/Koni/index.js b/src/pages/Editor/GGEditor/Koni/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b46dfacb0632d613056969ec13ae3d791eb2312
--- /dev/null
+++ b/src/pages/Editor/GGEditor/Koni/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import GGEditor, { Koni } from 'gg-editor';
+import EditorMinimap from '../components/EditorMinimap';
+import { KoniContextMenu } from '../components/EditorContextMenu';
+import { KoniToolbar } from '../components/EditorToolbar';
+import { KoniItemPanel } from '../components/EditorItemPanel';
+import { KoniDetailPanel } from '../components/EditorDetailPanel';
+import KoniCustomNode from './shape/nodes/KoniCustomNode';
+import styles from '../Flow/index.less';
+import { FormattedMessage } from 'umi/locale';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+const KoniPage = () => {
+ return (
+ }
+ content={}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default KoniPage;
diff --git a/src/pages/Editor/GGEditor/Koni/shape/nodes/KoniCustomNode.js b/src/pages/Editor/GGEditor/Koni/shape/nodes/KoniCustomNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c13bb4f42cb3c20e55b26e63de9cdb5c9448e5d
--- /dev/null
+++ b/src/pages/Editor/GGEditor/Koni/shape/nodes/KoniCustomNode.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { RegisterNode } from 'gg-editor';
+
+class KoniCustomNode extends React.Component {
+ render() {
+ const config = {
+ draw(item) {
+ const keyShape = this.drawKeyShape(item);
+
+ // draw label
+ this.drawLabel(item);
+
+ // draw image
+ const group = item.getGraphicGroup();
+ const model = item.getModel();
+
+ group.addShape('image', {
+ attrs: {
+ x: -7,
+ y: -7,
+ img: model.icon,
+ },
+ });
+
+ return keyShape;
+ },
+ };
+
+ return ;
+ }
+}
+
+export default KoniCustomNode;
diff --git a/src/pages/Editor/GGEditor/Mind/index.js b/src/pages/Editor/GGEditor/Mind/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f33812d4290a07f228793ce55303dc02820a9f28
--- /dev/null
+++ b/src/pages/Editor/GGEditor/Mind/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import GGEditor, { Mind } from 'gg-editor';
+import EditorMinimap from '../components/EditorMinimap';
+import { MindContextMenu } from '../components/EditorContextMenu';
+import { MindToolbar } from '../components/EditorToolbar';
+import { MindDetailPanel } from '../components/EditorDetailPanel';
+import data from '../mock/worldCup2018.json';
+import styles from '../Flow/index.less';
+import { FormattedMessage } from 'umi/locale';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+const MindPage = () => {
+ return (
+ }
+ content={}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MindPage;
diff --git a/src/pages/Editor/GGEditor/common/IconFont/index.js b/src/pages/Editor/GGEditor/common/IconFont/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3bba8d2ed7043dd0b4f542ad5ef64bd2e9939f66
--- /dev/null
+++ b/src/pages/Editor/GGEditor/common/IconFont/index.js
@@ -0,0 +1,7 @@
+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+ scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
+});
+
+export default IconFont;
diff --git a/src/pages/Editor/GGEditor/components/EditorContextMenu/FlowContextMenu.js b/src/pages/Editor/GGEditor/components/EditorContextMenu/FlowContextMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..cbb7041f2003d17f4ef53d7ea8925ff8df2bf537
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/FlowContextMenu.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+const FlowContextMenu = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default FlowContextMenu;
diff --git a/src/pages/Editor/GGEditor/components/EditorContextMenu/KoniContextMenu.js b/src/pages/Editor/GGEditor/components/EditorContextMenu/KoniContextMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b049a5ee7d0d0dae9216d6f01f1f5e40b4a9904
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/KoniContextMenu.js
@@ -0,0 +1,3 @@
+import FlowContextMenu from './FlowContextMenu';
+
+export default FlowContextMenu;
diff --git a/src/pages/Editor/GGEditor/components/EditorContextMenu/MenuItem.js b/src/pages/Editor/GGEditor/components/EditorContextMenu/MenuItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..4cbde89e1a9a79f5ee0eb44ac5a443cd58feddb1
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/MenuItem.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Command } from 'gg-editor';
+import upperFirst from 'lodash/upperFirst';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const MenuItem = props => {
+ const { command, icon, text } = props;
+
+ return (
+
+
+
+ {text || upperFirst(command)}
+
+
+ );
+};
+
+export default MenuItem;
diff --git a/src/pages/Editor/GGEditor/components/EditorContextMenu/MindContextMenu.js b/src/pages/Editor/GGEditor/components/EditorContextMenu/MindContextMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..2a9d43cd28672b2c0afa4d9370f40f3366e00718
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/MindContextMenu.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+const MindContextMenu = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MindContextMenu;
diff --git a/src/pages/Editor/GGEditor/components/EditorContextMenu/index.js b/src/pages/Editor/GGEditor/components/EditorContextMenu/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..16fcde018fc9e647daea97683cf46a5a9d264cfe
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/index.js
@@ -0,0 +1,5 @@
+import FlowContextMenu from './FlowContextMenu';
+import MindContextMenu from './MindContextMenu';
+import KoniContextMenu from './KoniContextMenu';
+
+export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/src/pages/Editor/GGEditor/components/EditorContextMenu/index.less b/src/pages/Editor/GGEditor/components/EditorContextMenu/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8a2cdae3bfbe5ffaaef812f8ab22677f5340dc91
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorContextMenu/index.less
@@ -0,0 +1,39 @@
+.contextMenu {
+ display: none;
+ overflow: hidden;
+ background: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+ .item {
+ display: flex;
+ align-items: center;
+ padding: 5px 12px;
+ cursor: pointer;
+ transition: all 0.3s;
+ user-select: none;
+
+ &:hover {
+ background: #e6f7ff;
+ }
+
+ i {
+ margin-right: 8px;
+ }
+ }
+
+ :global {
+ .disable {
+ :local {
+ .item {
+ color: rgba(0, 0, 0, 0.25);
+ cursor: auto;
+
+ &:hover {
+ background: #fff;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Editor/GGEditor/components/EditorDetailPanel/DetailForm.js b/src/pages/Editor/GGEditor/components/EditorDetailPanel/DetailForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d68011530023482b45bf4afb29971b7c33a83d8
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/DetailForm.js
@@ -0,0 +1,129 @@
+import React, { Fragment } from 'react';
+import { Card, Form, Input, Select } from 'antd';
+import { withPropsAPI } from 'gg-editor';
+import upperFirst from 'lodash/upperFirst';
+
+const { Item } = Form;
+const { Option } = Select;
+
+const inlineFormItemLayout = {
+ labelCol: {
+ sm: { span: 8 },
+ },
+ wrapperCol: {
+ sm: { span: 16 },
+ },
+};
+
+class DetailForm extends React.Component {
+ get item() {
+ const { propsAPI } = this.props;
+
+ return propsAPI.getSelected()[0];
+ }
+
+ handleSubmit = e => {
+ if (e && e.preventDefault) {
+ e.preventDefault();
+ }
+
+ const { form, propsAPI } = this.props;
+ const { getSelected, executeCommand, update } = propsAPI;
+
+ setTimeout(() => {
+ form.validateFieldsAndScroll((err, values) => {
+ if (err) {
+ return;
+ }
+
+ const item = getSelected()[0];
+
+ if (!item) {
+ return;
+ }
+
+ executeCommand(() => {
+ update(item, {
+ ...values,
+ });
+ });
+ });
+ }, 0);
+ };
+
+ renderEdgeShapeSelect = () => {
+ return (
+
+ );
+ };
+
+ renderNodeDetail = () => {
+ const { form } = this.props;
+ const { label } = this.item.getModel();
+
+ return (
+ -
+ {form.getFieldDecorator('label', {
+ initialValue: label,
+ })()}
+
+ );
+ };
+
+ renderEdgeDetail = () => {
+ const { form } = this.props;
+ const { label = '', shape = 'flow-smooth' } = this.item.getModel();
+
+ return (
+
+ -
+ {form.getFieldDecorator('label', {
+ initialValue: label,
+ })()}
+
+ -
+ {form.getFieldDecorator('shape', {
+ initialValue: shape,
+ })(this.renderEdgeShapeSelect())}
+
+
+ );
+ };
+
+ renderGroupDetail = () => {
+ const { form } = this.props;
+ const { label = '新建分组' } = this.item.getModel();
+
+ return (
+ -
+ {form.getFieldDecorator('label', {
+ initialValue: label,
+ })()}
+
+ );
+ };
+
+ render() {
+ const { type } = this.props;
+
+ if (!this.item) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default Form.create()(withPropsAPI(DetailForm));
diff --git a/src/pages/Editor/GGEditor/components/EditorDetailPanel/FlowDetailPanel.js b/src/pages/Editor/GGEditor/components/EditorDetailPanel/FlowDetailPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d6816186b96e555406d5c5534903e3dc3d98b6b
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/FlowDetailPanel.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Card } from 'antd';
+import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+const FlowDetailPanel = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default FlowDetailPanel;
diff --git a/src/pages/Editor/GGEditor/components/EditorDetailPanel/KoniDetailPanel.js b/src/pages/Editor/GGEditor/components/EditorDetailPanel/KoniDetailPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..18aea9a44f5d96009d696e6bf145b3715c0d824c
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/KoniDetailPanel.js
@@ -0,0 +1,3 @@
+import FlowDetailPanel from './FlowDetailPanel';
+
+export default FlowDetailPanel;
diff --git a/src/pages/Editor/GGEditor/components/EditorDetailPanel/MindDetailPanel.js b/src/pages/Editor/GGEditor/components/EditorDetailPanel/MindDetailPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..6b4d5c9eadd0a6f5d656d3c2f772dde7af45f85d
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/MindDetailPanel.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Card } from 'antd';
+import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+const MindDetailPanel = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MindDetailPanel;
diff --git a/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.js b/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8df063eff1c22b6ce5a3ecffbd004b7de681b73b
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.js
@@ -0,0 +1,5 @@
+import FlowDetailPanel from './FlowDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
+import KoniDetailPanel from './KoniDetailPanel';
+
+export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.less b/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..081945be43c093076bab1744984f5377a34f0fe2
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorDetailPanel/index.less
@@ -0,0 +1,10 @@
+.detailPanel {
+ flex: 1;
+ background: #fafafa;
+
+ :global {
+ .ant-card {
+ background: #fafafa;
+ }
+ }
+}
diff --git a/src/pages/Editor/GGEditor/components/EditorItemPanel/FlowItemPanel.js b/src/pages/Editor/GGEditor/components/EditorItemPanel/FlowItemPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3b46930c86e407e100984bf6d253f480e3c244e
--- /dev/null
+++ b/src/pages/Editor/GGEditor/components/EditorItemPanel/FlowItemPanel.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Card } from 'antd';
+import { ItemPanel, Item } from 'gg-editor';
+import styles from './index.less';
+
+const FlowItemPanel = () => {
+ return (
+
+
+