Browse Source

try

pull/10914/head
期贤 3 years ago
parent
commit
65ff0bbb0c
  1. 10
      mock/listTableList.ts
  2. 3
      package.json
  3. 48
      pnpm-lock.yaml
  4. 4
      src/pages/account/center/components/ArticleListContent/index.tsx
  5. 7
      src/pages/account/center/components/Projects/index.tsx
  6. 7
      src/pages/account/center/index.tsx
  7. 12
      src/pages/dashboard/analysis/_mock.ts
  8. 3
      src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
  9. 4
      src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
  10. 5
      src/pages/dashboard/analysis/components/Charts/autoHeight.tsx
  11. 7
      src/pages/dashboard/analysis/components/SalesCard.tsx
  12. 1
      src/pages/dashboard/analysis/components/Trend/index.tsx
  13. 8
      src/pages/dashboard/analysis/index.tsx
  14. 16
      src/pages/dashboard/analysis/utils/utils.ts
  15. 4
      src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
  16. 5
      src/pages/dashboard/monitor/components/Charts/autoHeight.tsx
  17. 10
      src/pages/dashboard/workplace/_mock.ts
  18. 5
      src/pages/dashboard/workplace/components/Radar/autoHeight.tsx
  19. 2
      src/pages/dashboard/workplace/components/Radar/index.tsx
  20. 1
      src/pages/dashboard/workplace/data.d.ts
  21. 16
      src/pages/dashboard/workplace/index.tsx
  22. 7
      src/pages/editor/flow/common/IconFont/index.ts
  23. 34
      src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
  24. 3
      src/pages/editor/flow/components/EditorContextMenu/KoniContextMenu.tsx
  25. 27
      src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx
  26. 22
      src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx
  27. 41
      src/pages/editor/flow/components/EditorContextMenu/index.less
  28. 5
      src/pages/editor/flow/components/EditorContextMenu/index.tsx
  29. 114
      src/pages/editor/flow/components/EditorDetailPanel/DetailForm.tsx
  30. 27
      src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx
  31. 3
      src/pages/editor/flow/components/EditorDetailPanel/KoniDetailPanel.tsx
  32. 18
      src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx
  33. 6
      src/pages/editor/flow/components/EditorDetailPanel/index.less
  34. 5
      src/pages/editor/flow/components/EditorDetailPanel/index.tsx
  35. 53
      src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx
  36. 49
      src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx
  37. 19
      src/pages/editor/flow/components/EditorItemPanel/index.less
  38. 4
      src/pages/editor/flow/components/EditorItemPanel/index.tsx
  39. 10
      src/pages/editor/flow/components/EditorMinimap/index.tsx
  40. 29
      src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx
  41. 3
      src/pages/editor/flow/components/EditorToolbar/KoniToolbar.tsx
  42. 24
      src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx
  43. 31
      src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx
  44. 40
      src/pages/editor/flow/components/EditorToolbar/index.less
  45. 5
      src/pages/editor/flow/components/EditorToolbar/index.tsx
  46. 48
      src/pages/editor/flow/index.less
  47. 37
      src/pages/editor/flow/index.tsx
  48. 7
      src/pages/editor/koni/common/IconFont/index.ts
  49. 34
      src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx
  50. 3
      src/pages/editor/koni/components/EditorContextMenu/KoniContextMenu.tsx
  51. 27
      src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx
  52. 22
      src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx
  53. 40
      src/pages/editor/koni/components/EditorContextMenu/index.less
  54. 5
      src/pages/editor/koni/components/EditorContextMenu/index.tsx
  55. 114
      src/pages/editor/koni/components/EditorDetailPanel/DetailForm.tsx
  56. 27
      src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx
  57. 3
      src/pages/editor/koni/components/EditorDetailPanel/KoniDetailPanel.tsx
  58. 18
      src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx
  59. 6
      src/pages/editor/koni/components/EditorDetailPanel/index.less
  60. 5
      src/pages/editor/koni/components/EditorDetailPanel/index.tsx
  61. 53
      src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx
  62. 49
      src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx
  63. 19
      src/pages/editor/koni/components/EditorItemPanel/index.less
  64. 4
      src/pages/editor/koni/components/EditorItemPanel/index.tsx
  65. 10
      src/pages/editor/koni/components/EditorMinimap/index.tsx
  66. 29
      src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx
  67. 3
      src/pages/editor/koni/components/EditorToolbar/KoniToolbar.tsx
  68. 24
      src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx
  69. 31
      src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx
  70. 39
      src/pages/editor/koni/components/EditorToolbar/index.less
  71. 5
      src/pages/editor/koni/components/EditorToolbar/index.tsx
  72. 56
      src/pages/editor/koni/index.less
  73. 37
      src/pages/editor/koni/index.tsx
  74. 7
      src/pages/editor/mind/common/IconFont/index.ts
  75. 34
      src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx
  76. 3
      src/pages/editor/mind/components/EditorContextMenu/KoniContextMenu.tsx
  77. 27
      src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx
  78. 22
      src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx
  79. 40
      src/pages/editor/mind/components/EditorContextMenu/index.less
  80. 5
      src/pages/editor/mind/components/EditorContextMenu/index.tsx
  81. 114
      src/pages/editor/mind/components/EditorDetailPanel/DetailForm.tsx
  82. 27
      src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx
  83. 3
      src/pages/editor/mind/components/EditorDetailPanel/KoniDetailPanel.tsx
  84. 18
      src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx
  85. 6
      src/pages/editor/mind/components/EditorDetailPanel/index.less
  86. 5
      src/pages/editor/mind/components/EditorDetailPanel/index.tsx
  87. 53
      src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx
  88. 49
      src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx
  89. 19
      src/pages/editor/mind/components/EditorItemPanel/index.less
  90. 4
      src/pages/editor/mind/components/EditorItemPanel/index.tsx
  91. 10
      src/pages/editor/mind/components/EditorMinimap/index.tsx
  92. 29
      src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx
  93. 3
      src/pages/editor/mind/components/EditorToolbar/KoniToolbar.tsx
  94. 24
      src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx
  95. 31
      src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx
  96. 40
      src/pages/editor/mind/components/EditorToolbar/index.less
  97. 5
      src/pages/editor/mind/components/EditorToolbar/index.tsx
  98. 56
      src/pages/editor/mind/index.less
  99. 34
      src/pages/editor/mind/index.tsx
  100. 129
      src/pages/editor/mind/worldCup2018.json

10
mock/listTableList.ts

@ -1,5 +1,5 @@
import { Request, Response } from 'express';
import moment from 'moment';
import dayjs from 'dayjs';
import { parse } from 'url';
// mock tableListDataSource
@ -21,8 +21,8 @@ const genList = (current: number, pageSize: number) => {
desc: '这是一段描述',
callNo: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 4,
updatedAt: moment().format('YYYY-MM-DD'),
createdAt: moment().format('YYYY-MM-DD'),
updatedAt: dayjs().format('YYYY-MM-DD'),
createdAt: dayjs().format('YYYY-MM-DD'),
progress: Math.ceil(Math.random() * 100),
});
}
@ -134,8 +134,8 @@ function postRule(req: Request, res: Response, u: string, b: Request) {
desc,
callNo: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 2,
updatedAt: moment().format('YYYY-MM-DD'),
createdAt: moment().format('YYYY-MM-DD'),
updatedAt: dayjs().format('YYYY-MM-DD'),
createdAt: dayjs().format('YYYY-MM-DD'),
progress: Math.ceil(Math.random() * 100),
};
tableListDataSource.unshift(newRule);

3
package.json

@ -54,6 +54,7 @@
"@antv/l7": "^2.3.7",
"@antv/l7-maps": "^2.3.7",
"@antv/l7-react": "^2.1.9",
"@types/lodash.debounce": "^4.0.7",
"@umijs/route-utils": "^2.2.2",
"ahooks": "^2.0.0",
"antd": "^5.2.2",
@ -61,10 +62,10 @@
"bizcharts": "^3.5.3-beta.0",
"bizcharts-plugin-slider": "^2.1.1-beta.1",
"classnames": "^2.3.2",
"dayjs": "^1.11.7",
"gg-editor": "^2.0.2",
"lodash": "^4.17.21",
"lodash-decorators": "^6.0.0",
"moment": "^2.29.4",
"numeral": "^2.0.6",
"nzh": "^1.0.3",
"omit.js": "^2.0.2",

48
pnpm-lock.yaml

@ -17,6 +17,7 @@ specifiers:
'@types/history': ^4.7.11
'@types/jest': ^29.4.0
'@types/lodash': ^4.14.191
'@types/lodash.debounce': ^4.0.7
'@types/react': ^18.0.28
'@types/react-dom': ^18.0.11
'@types/react-helmet': ^6.1.6
@ -31,6 +32,7 @@ specifiers:
bizcharts-plugin-slider: ^2.1.1-beta.1
classnames: ^2.3.2
cross-env: ^7.0.3
dayjs: ^1.11.7
eslint: ^8.34.0
express: ^4.18.2
gg-editor: ^2.0.2
@ -42,7 +44,6 @@ specifiers:
lodash: ^4.17.21
lodash-decorators: ^6.0.0
mockjs: ^1.1.0
moment: ^2.29.4
numeral: ^2.0.6
nzh: ^1.0.3
omit.js: ^2.0.2
@ -69,17 +70,18 @@ dependencies:
'@antv/l7': 2.14.7
'@antv/l7-maps': 2.14.7
'@antv/l7-react': 2.4.3_bm7ci3oav2pap74nmaps6hk4pe
'@types/lodash.debounce': 4.0.7
'@umijs/route-utils': 2.2.2
ahooks: 2.10.14_react@18.2.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
antd-style: 2.0.2_inhcptsb3xwksbzylhlutukt7y
bizcharts: 3.5.10_react@18.2.0
bizcharts-plugin-slider: 2.1.1_xqhfrrq3rji7b4f5orc4gseufu
classnames: 2.3.2
dayjs: 1.11.7
gg-editor: 2.0.4_react@18.2.0
lodash: 4.17.21
lodash-decorators: 6.0.1_lodash@4.17.21
moment: 2.29.4
numeral: 2.0.6
nzh: 1.0.8
omit.js: 2.0.2
@ -318,7 +320,7 @@ packages:
'@ant-design/pro-provider': 2.6.1_wacdszkbqwn7wuohqczb7gb7ie
'@ant-design/pro-utils': 2.7.1_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
omit.js: 2.0.2
rc-resize-observer: 1.3.1_biqbaboplfbrettd7655fr4n2y
@ -412,7 +414,7 @@ packages:
'@ant-design/pro-table': 3.5.2_wacdszkbqwn7wuohqczb7gb7ie
'@ant-design/pro-utils': 2.7.1_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
transitivePeerDependencies:
@ -451,7 +453,7 @@ packages:
'@ant-design/pro-skeleton': 2.1.0_wacdszkbqwn7wuohqczb7gb7ie
'@ant-design/pro-utils': 2.7.1_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
rc-util: 5.29.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
use-json-comparison: 1.0.6_react@18.2.0
@ -494,7 +496,7 @@ packages:
'@ant-design/pro-utils': 2.7.1_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
'@chenshuai2144/sketch-color': 1.0.9_react@18.2.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
dayjs: 1.11.7
lodash.tonumber: 4.0.3
@ -555,7 +557,7 @@ packages:
'@babel/runtime': 7.21.0
'@chenshuai2144/sketch-color': 1.0.9_react@18.2.0
'@umijs/use-params': 1.0.9_react@18.2.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
lodash.merge: 4.6.2
omit.js: 2.0.2
@ -607,7 +609,7 @@ packages:
'@babel/runtime': 7.21.0
'@umijs/route-utils': 4.0.1
'@umijs/use-params': 1.0.9_react@18.2.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
lodash.merge: 4.6.2
omit.js: 2.0.2
@ -658,7 +660,7 @@ packages:
'@ant-design/pro-field': 2.5.1_wacdszkbqwn7wuohqczb7gb7ie
'@ant-design/pro-table': 3.5.2_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
dayjs: 1.11.7
rc-resize-observer: 1.3.1_biqbaboplfbrettd7655fr4n2y
@ -697,7 +699,7 @@ packages:
'@ant-design/cssinjs': 1.6.1_biqbaboplfbrettd7655fr4n2y
'@babel/runtime': 7.21.0
'@ctrl/tinycolor': 3.6.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
rc-util: 5.29.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@ -725,7 +727,7 @@ packages:
react-dom: '>=16.9.0'
dependencies:
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
use-media-antd-query: 1.1.0_react@18.2.0
@ -774,7 +776,7 @@ packages:
'@ant-design/pro-provider': 2.6.1_wacdszkbqwn7wuohqczb7gb7ie
'@ant-design/pro-utils': 2.7.1_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
dayjs: 1.11.7
omit.js: 2.0.2
@ -817,7 +819,7 @@ packages:
'@ant-design/icons': 4.8.0_biqbaboplfbrettd7655fr4n2y
'@ant-design/pro-provider': 2.6.1_wacdszkbqwn7wuohqczb7gb7ie
'@babel/runtime': 7.21.0
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
dayjs: 1.11.7
rc-util: 5.29.2_biqbaboplfbrettd7655fr4n2y
@ -859,7 +861,7 @@ packages:
react-dom: '>=17.0.0'
dependencies:
'@emotion/css': 11.10.6
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
@ -5155,6 +5157,12 @@ packages:
/@types/json-schema/7.0.11:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
/@types/lodash.debounce/4.0.7:
resolution: {integrity: sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==}
dependencies:
'@types/lodash': 4.14.191
dev: false
/@types/lodash/4.14.191:
resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
@ -6689,7 +6697,7 @@ packages:
'@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
'@emotion/serialize': 1.1.1
'@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia
antd: 5.3.2_jb42yyeu5qxbfieyxjks6malva
antd: 5.3.2_biqbaboplfbrettd7655fr4n2y
polished: 4.2.2
react: 18.2.0
transitivePeerDependencies:
@ -6749,7 +6757,7 @@ packages:
scroll-into-view-if-needed: 2.2.31
dev: true
/antd/5.3.2_jb42yyeu5qxbfieyxjks6malva:
/antd/5.3.2_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-AOCZ+5krqvlLPR1v33K2PQtt9XBAC0gUdjxuHltUliE9u2zlZzGT+4DSHTNnw8CtotPV4lFKab3+K+FgdtyTlw==}
peerDependencies:
react: '>=16.9.0'
@ -6783,7 +6791,7 @@ packages:
rc-motion: 2.6.3_biqbaboplfbrettd7655fr4n2y
rc-notification: 5.0.3_biqbaboplfbrettd7655fr4n2y
rc-pagination: 3.3.1_biqbaboplfbrettd7655fr4n2y
rc-picker: 3.3.4_lejchghvacj3hhjkogy3eaalky
rc-picker: 3.3.4_mlnkrlbros4rghcauwy625gk7y
rc-progress: 3.4.1_biqbaboplfbrettd7655fr4n2y
rc-rate: 2.10.0_biqbaboplfbrettd7655fr4n2y
rc-resize-observer: 1.3.1_biqbaboplfbrettd7655fr4n2y
@ -13005,6 +13013,7 @@ packages:
/moment/2.29.4:
resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
dev: true
/ms/2.0.0:
resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
@ -15410,7 +15419,7 @@ packages:
shallowequal: 1.1.0
dev: true
/rc-picker/3.3.4_lejchghvacj3hhjkogy3eaalky:
/rc-picker/3.3.4_mlnkrlbros4rghcauwy625gk7y:
resolution: {integrity: sha512-y7muUVAXqcacXXgLERCC9klEClZybOjWrcVZ54glxO5y+UO2MZmBk+ysWhhVHQ0l2nNtY+wj19gk1xnv+5eCxg==}
engines: {node: '>=8.x'}
peerDependencies:
@ -15431,7 +15440,6 @@ packages:
'@rc-component/trigger': 1.6.0_biqbaboplfbrettd7655fr4n2y
classnames: 2.3.2
dayjs: 1.11.7
moment: 2.29.4
rc-util: 5.29.2_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0

4
src/pages/account/center/components/ArticleListContent/index.tsx

@ -1,6 +1,6 @@
import { Avatar } from 'antd';
import React from 'react';
import moment from 'moment';
import dayjs from 'dayjs';
import styles from './index.less';
export type ApplicationsProps = {
@ -20,7 +20,7 @@ const ArticleListContent: React.FC<ApplicationsProps> = ({
<div className={styles.extra}>
<Avatar src={avatar} size="small" />
<a href={href}>{owner}</a> <a href={href}>{href}</a>
<em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
<em>{dayjs(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
</div>
</div>
);

7
src/pages/account/center/components/Projects/index.tsx

@ -1,11 +1,14 @@
import { Card, List } from 'antd';
import { useRequest } from '@umijs/max';
import React from 'react';
import moment from 'moment';
import dayjs from 'dayjs';
import { queryFakeList } from '../../service';
import AvatarList from '../AvatarList';
import type { ListItemDataType } from '../../data.d';
import styles from './index.less';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const Projects: React.FC = () => {
// 获取tab列表数据
@ -26,7 +29,7 @@ const Projects: React.FC = () => {
<Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
<Card.Meta title={<a>{item.title}</a>} description={item.subDescription} />
<div className={styles.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<span>{dayjs(item.updatedAt).fromNow()}</span>
<div className={styles.avatarList}>
<AvatarList size="small">
{item.members.map((member) => (

7
src/pages/account/center/index.tsx

@ -1,9 +1,8 @@
import { PlusOutlined, HomeOutlined, ContactsOutlined, ClusterOutlined } from '@ant-design/icons';
import { Avatar, Card, Col, Divider, Input, Row, Tag } from 'antd';
import { Avatar, Card, Col, Divider, Input, InputRef, Row, Tag } from 'antd';
import React, { useState, useRef } from 'react';
import { GridContent } from '@ant-design/pro-components';
import { Link, useRequest } from '@umijs/max';
import type { RouteChildrenProps } from 'react-router';
import Projects from './components/Projects';
import Articles from './components/Articles';
import Applications from './components/Applications';
@ -39,7 +38,7 @@ const operationTabList = [
];
const TagList: React.FC<{ tags: CurrentUser['tags'] }> = ({ tags }) => {
const ref = useRef<Input | null>(null);
const ref = useRef<InputRef | null>(null);
const [newTags, setNewTags] = useState<TagType[]>([]);
const [inputVisible, setInputVisible] = useState<boolean>(false);
const [inputValue, setInputValue] = useState<string>('');
@ -93,7 +92,7 @@ const TagList: React.FC<{ tags: CurrentUser['tags'] }> = ({ tags }) => {
);
};
const Center: React.FC<RouteChildrenProps> = () => {
const Center: React.FC = () => {
const [tabKey, setTabKey] = useState<tabKeyType>('articles');
// 获取用户信息

12
src/pages/dashboard/analysis/_mock.ts

@ -1,4 +1,4 @@
import moment from 'moment';
import dayjs from 'dayjs';
import type { Request, Response } from 'express';
import type { AnalysisData, RadarData, DataItem } from './data.d';
@ -9,7 +9,7 @@ const beginDay = new Date().getTime();
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
for (let i = 0; i < fakeY.length; i += 1) {
visitData.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY[i],
});
}
@ -18,7 +18,7 @@ const visitData2 = [];
const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
for (let i = 0; i < fakeY2.length; i += 1) {
visitData2.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY2[i],
});
}
@ -126,7 +126,7 @@ for (let i = 0; i < 10; i += 1) {
}
const offlineChartData = [];
for (let i = 0; i < 20; i += 1) {
const date = moment(new Date().getTime() + 1000 * 60 * 30 * i).format('HH:mm');
const date = dayjs(new Date().getTime() + 1000 * 60 * 30 * i).format('HH:mm');
offlineChartData.push({
date,
type: '客流量',
@ -179,8 +179,8 @@ radarOriginData.forEach((item) => {
if (key !== 'name') {
radarData.push({
name: item.name,
label: radarTitleMap[key],
value: item[key],
label: radarTitleMap[key as 'ref'],
value: item[key as 'ref'],
});
}
});

3
src/pages/dashboard/analysis/components/Charts/Pie/index.tsx

@ -141,7 +141,8 @@ class Pie extends Component<PieProps, PieState> {
newItem.checked = !newItem.checked;
const { legendData } = this.state;
legendData[i] = newItem;
const key = i as unknown as number;
legendData[key] = newItem;
const filteredLegendData = legendData.filter((l) => l.checked).map((l) => l.x);

4
src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx

@ -65,8 +65,8 @@ const TimelineChart: React.FC<TimelineChartProps> = (props) => {
type: 'map',
callback(row: { y1: string; y2: string }) {
const newRow = { ...row };
newRow[titleMap.y1] = row.y1;
newRow[titleMap.y2] = row.y2;
newRow[titleMap.y1 as 'y1'] = row.y1;
newRow[titleMap.y2 as 'y2'] = row.y2;
return newRow;
},
})

5
src/pages/dashboard/analysis/components/Charts/autoHeight.tsx

@ -1,9 +1,6 @@
import React from 'react';
export type IReactComponent<P = any> =
| React.StatelessComponent<P>
| React.ComponentClass<P>
| React.ClassicComponentClass<P>;
export type IReactComponent<P = any> = React.ComponentClass<P> | React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) {
const { style } = node;

7
src/pages/dashboard/analysis/components/SalesCard.tsx

@ -1,13 +1,12 @@
import { Card, Col, DatePicker, Row, Tabs } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import type moment from 'moment';
import type dayjs from 'dayjs';
import { Column } from '@ant-design/charts';
import numeral from 'numeral';
import type { DataItem } from '../data.d';
import styles from '../style.less';
type RangePickerValue = RangePickerProps<moment.Moment>['value'];
export type TimeType = 'today' | 'week' | 'month' | 'year';
const { RangePicker } = DatePicker;
@ -29,11 +28,11 @@ const SalesCard = ({
loading,
selectDate,
}: {
rangePickerValue: RangePickerValue;
rangePickerValue: RangePickerProps<dayjs.Dayjs>['value'];
isActive: (key: TimeType) => string;
salesData: DataItem[];
loading: boolean;
handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
handleRangePickerChange: RangePickerProps<dayjs.Dayjs>['onChange'];
selectDate: (key: TimeType) => void;
}) => (
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>

1
src/pages/dashboard/analysis/components/Trend/index.tsx

@ -9,6 +9,7 @@ export type TrendProps = {
style?: React.CSSProperties;
reverseColor?: boolean;
className?: string;
children?: React.ReactNode;
};
const Trend: React.FC<TrendProps> = ({

8
src/pages/dashboard/analysis/index.tsx

@ -5,7 +5,7 @@ import { Col, Dropdown, Menu, Row } from 'antd';
import { GridContent } from '@ant-design/pro-components';
import type { RadioChangeEvent } from 'antd/es/radio';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import type moment from 'moment';
import type dayjs from 'dayjs';
import IntroduceRow from './components/IntroduceRow';
import SalesCard from './components/SalesCard';
import TopSearch from './components/TopSearch';
@ -20,7 +20,7 @@ import { getTimeDistance } from './utils/utils';
import type { AnalysisData } from './data.d';
import styles from './style.less';
type RangePickerValue = RangePickerProps<moment.Moment>['value'];
type RangePickerValue = RangePickerProps<dayjs.Dayjs>['value'];
type AnalysisProps = {
dashboardAndanalysis: AnalysisData;
@ -58,8 +58,8 @@ const Analysis: FC<AnalysisProps> = () => {
return '';
}
if (
rangePickerValue[0].isSame(value[0] as moment.Moment, 'day') &&
rangePickerValue[1].isSame(value[1] as moment.Moment, 'day')
rangePickerValue[0].isSame(value[0] as dayjs.Dayjs, 'day') &&
rangePickerValue[1].isSame(value[1] as dayjs.Dayjs, 'day')
) {
return styles.currentDate;
}

16
src/pages/dashboard/analysis/utils/utils.ts

@ -1,7 +1,7 @@
import moment from 'moment';
import dayjs from 'dayjs';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
type RangePickerValue = RangePickerProps<moment.Moment>['value'];
type RangePickerValue = RangePickerProps<dayjs.Dayjs>['value'];
export function fixedZero(val: number) {
return val * 1 < 10 ? `0${val}` : val;
@ -15,7 +15,7 @@ export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): Rang
now.setHours(0);
now.setMinutes(0);
now.setSeconds(0);
return [moment(now), moment(now.getTime() + (oneDay - 1000))];
return [dayjs(now), dayjs(now.getTime() + (oneDay - 1000))];
}
if (type === 'week') {
@ -32,21 +32,21 @@ export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): Rang
const beginTime = now.getTime() - day * oneDay;
return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
return [dayjs(beginTime), dayjs(beginTime + (7 * oneDay - 1000))];
}
const year = now.getFullYear();
if (type === 'month') {
const month = now.getMonth();
const nextDate = moment(now).add(1, 'months');
const nextDate = dayjs(now).add(1, 'months');
const nextYear = nextDate.year();
const nextMonth = nextDate.month();
return [
moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
dayjs(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
dayjs(dayjs(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
];
}
return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
return [dayjs(`${year}-01-01 00:00:00`), dayjs(`${year}-12-31 23:59:59`)];
}

4
src/pages/dashboard/monitor/components/Charts/Pie/index.tsx

@ -138,11 +138,11 @@ class Pie extends Component<PieProps, PieState> {
};
handleLegendClick = (item: { checked: boolean }, i: string | number) => {
const newItem = item;
const newItem = { ...item };
newItem.checked = !newItem.checked;
const { legendData } = this.state;
legendData[i] = newItem;
legendData[i as unknown as number] = newItem as any;
const filteredLegendData = legendData.filter((l) => l.checked).map((l) => l.x);

5
src/pages/dashboard/monitor/components/Charts/autoHeight.tsx

@ -1,9 +1,6 @@
import React from 'react';
export type IReactComponent<P = any> =
| React.StatelessComponent<P>
| React.ComponentClass<P>
| React.ClassicComponentClass<P>;
export type IReactComponent<P = any> = React.ComponentClass<P> | React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) {
const { style } = node;

10
src/pages/dashboard/workplace/_mock.ts

@ -1,4 +1,4 @@
import moment from 'moment';
import dayjs from 'dayjs';
import type { Request, Response } from 'express';
import type { SearchDataType, OfflineDataType, DataItem } from './data.d';
@ -9,7 +9,7 @@ const beginDay = new Date().getTime();
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
for (let i = 0; i < fakeY.length; i += 1) {
visitData.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY[i],
});
}
@ -18,7 +18,7 @@ const visitData2: DataItem[] = [];
const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
for (let i = 0; i < fakeY2.length; i += 1) {
visitData2.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY2[i],
});
}
@ -379,8 +379,8 @@ radarOriginData.forEach((item) => {
if (key !== 'name') {
radarData.push({
name: item.name,
label: radarTitleMap[key],
value: item[key],
label: radarTitleMap[key as 'ref'],
value: item[key as 'ref'],
});
}
});

5
src/pages/dashboard/workplace/components/Radar/autoHeight.tsx

@ -1,9 +1,6 @@
import React from 'react';
export type IReactComponent<P = any> =
| React.StatelessComponent<P>
| React.ComponentClass<P>
| React.ClassicComponentClass<P>;
export type IReactComponent<P = any> = React.ComponentClass<P> | React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) {
const { style } = node;

2
src/pages/dashboard/workplace/components/Radar/index.tsx

@ -95,7 +95,7 @@ class Radar extends Component<RadarProps, RadarState> {
newItem.checked = !newItem.checked;
const { legendData } = this.state;
legendData[i] = newItem;
legendData[i as number] = newItem as any;
const filteredLegendData = legendData.filter((l) => l.checked).map((l) => l.name);

1
src/pages/dashboard/workplace/data.d.ts

@ -89,6 +89,7 @@ export type ActivitiesType = {
id: string;
updatedAt: string;
user: {
link?: string;
name: string;
avatar: string;
};

16
src/pages/dashboard/workplace/index.tsx

@ -4,11 +4,14 @@ import { Radar } from '@ant-design/charts';
import { Link, useRequest } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import moment from 'moment';
import dayjs from 'dayjs';
import EditableLinkGroup from './components/EditableLinkGroup';
import styles from './style.less';
import type { ActivitiesType, CurrentUser } from './data.d';
import { queryProjectNotice, queryActivities, fakeChartData } from './service';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const links = [
{
@ -82,10 +85,11 @@ const Workplace: FC = () => {
const renderActivities = (item: ActivitiesType) => {
const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
if (item[key]) {
if (item[key as keyof ActivitiesType]) {
const value = item[key as 'user'];
return (
<a href={item[key].link} key={item[key].name}>
{item[key].name}
<a href={value?.link} key={value?.name}>
{value.name}
</a>
);
}
@ -104,7 +108,7 @@ const Workplace: FC = () => {
}
description={
<span className={styles.datetime} title={item.updatedAt}>
{moment(item.updatedAt).fromNow()}
{dayjs(item.updatedAt).fromNow()}
</span>
}
/>
@ -156,7 +160,7 @@ const Workplace: FC = () => {
<Link to={item.memberLink}>{item.member || ''}</Link>
{item.updatedAt && (
<span className={styles.datetime} title={item.updatedAt}>
{moment(item.updatedAt).fromNow()}
{dayjs(item.updatedAt).fromNow()}
</span>
)}
</div>

7
src/pages/editor/flow/common/IconFont/index.ts

@ -1,7 +0,0 @@
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
});
export default IconFont;

34
src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx

@ -1,34 +0,0 @@
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
import styles from './index.less';
const FlowContextMenu = () => (
<ContextMenu className={styles.contextMenu}>
<NodeMenu>
<MenuItem command="copy" />
<MenuItem command="delete" />
</NodeMenu>
<EdgeMenu>
<MenuItem command="delete" />
</EdgeMenu>
<GroupMenu>
<MenuItem command="copy" />
<MenuItem command="delete" />
<MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
</GroupMenu>
<MultiMenu>
<MenuItem command="copy" />
<MenuItem command="paste" />
<MenuItem command="addGroup" icon="group" text="Add Group" />
<MenuItem command="delete" />
</MultiMenu>
<CanvasMenu>
<MenuItem command="undo" />
<MenuItem command="redo" />
<MenuItem command="pasteHere" icon="paste" text="Paste Here" />
</CanvasMenu>
</ContextMenu>
);
export default FlowContextMenu;

3
src/pages/editor/flow/components/EditorContextMenu/KoniContextMenu.tsx

@ -1,3 +0,0 @@
import FlowContextMenu from './FlowContextMenu';
export default FlowContextMenu;

27
src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx

@ -1,27 +0,0 @@
import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont';
import styles from './index.less';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
type MenuItemProps = {
command: string;
icon?: string;
text?: string;
};
const MenuItem: React.FC<MenuItemProps> = (props) => {
const { command, icon, text } = props;
return (
<Command name={command}>
<div className={styles.item}>
<IconFont type={`icon-${icon || command}`} />
<span>{text || upperFirst(command)}</span>
</div>
</Command>
);
};
export default MenuItem;

22
src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx

@ -1,22 +0,0 @@
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
import styles from './index.less';
const MindContextMenu = () => (
<ContextMenu className={styles.contextMenu}>
<NodeMenu>
<MenuItem command="append" text="Topic" />
<MenuItem command="appendChild" icon="append-child" text="Subtopic" />
<MenuItem command="collapse" text="Fold" />
<MenuItem command="expand" text="Unfold" />
<MenuItem command="delete" />
</NodeMenu>
<CanvasMenu>
<MenuItem command="undo" />
<MenuItem command="redo" />
</CanvasMenu>
</ContextMenu>
);
export default MindContextMenu;

41
src/pages/editor/flow/components/EditorContextMenu/index.less

@ -1,41 +0,0 @@
@import '~antd/es/style/themes/default.less';
.contextMenu {
display: none;
overflow: hidden;
background: @component-background;
border-radius: 4px;
box-shadow: @box-shadow-base;
.item {
display: flex;
align-items: center;
padding: 5px 12px;
cursor: pointer;
transition: all 0.3s;
user-select: none;
&:hover {
background: @select-item-selected-bg;
}
span.anticon {
margin-right: 8px;
}
}
:global {
.disable {
:local {
.item {
color: @disabled-color;
cursor: auto;
&:hover {
background: @item-hover-bg;
}
}
}
}
}
}

5
src/pages/editor/flow/components/EditorContextMenu/index.tsx

@ -1,5 +0,0 @@
import FlowContextMenu from './FlowContextMenu';
import KoniContextMenu from './KoniContextMenu';
import MindContextMenu from './MindContextMenu';
export { FlowContextMenu, MindContextMenu, KoniContextMenu };

114
src/pages/editor/flow/components/EditorDetailPanel/DetailForm.tsx

@ -1,114 +0,0 @@
import React from 'react';
import { Card, Input, Select, Form } from 'antd';
import { withPropsAPI } from 'gg-editor';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
const { Item } = Form;
const { Option } = Select;
const inlineFormItemLayout = {
labelCol: {
sm: { span: 8 },
},
wrapperCol: {
sm: { span: 16 },
},
};
type DetailFormProps = {
type: string;
propsAPI?: any;
};
class DetailForm extends React.Component<DetailFormProps> {
get item() {
const { propsAPI } = this.props;
return propsAPI.getSelected()[0];
}
handleFieldChange = (values: any) => {
const { propsAPI } = this.props;
const { getSelected, executeCommand, update } = propsAPI;
setTimeout(() => {
const item = getSelected()[0];
if (!item) {
return;
}
executeCommand(() => {
update(item, {
...values,
});
});
}, 0);
};
handleInputBlur = (type: string) => (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.handleFieldChange({
[type]: e.currentTarget.value,
});
};
renderNodeDetail = () => {
const { label } = this.item.getModel();
return (
<Form initialValues={{ label }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
</Form>
);
};
renderEdgeDetail = () => {
const { label = '', shape = 'flow-smooth' } = this.item.getModel();
return (
<Form initialValues={{ label, shape }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
<Item label="Shape" name="shape" {...inlineFormItemLayout}>
<Select onChange={(value) => this.handleFieldChange({ shape: value })}>
<Option value="flow-smooth">Smooth</Option>
<Option value="flow-polyline">Polyline</Option>
<Option value="flow-polyline-round">Polyline Round</Option>
</Select>
</Item>
</Form>
);
};
renderGroupDetail = () => {
const { label = '新建分组' } = this.item.getModel();
return (
<Form initialValues={{ label }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
</Form>
);
};
render() {
const { type } = this.props;
if (!this.item) {
return null;
}
return (
<Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
{type === 'node' && this.renderNodeDetail()}
{type === 'edge' && this.renderEdgeDetail()}
{type === 'group' && this.renderGroupDetail()}
</Card>
);
}
}
export default withPropsAPI(DetailForm as any);

27
src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx

@ -1,27 +0,0 @@
import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
import styles from './index.less';
const FlowDetailPanel = () => (
<DetailPanel className={styles.detailPanel}>
<NodePanel>
<DetailForm type="node" />
</NodePanel>
<EdgePanel>
<DetailForm type="edge" />
</EdgePanel>
<GroupPanel>
<DetailForm type="group" />
</GroupPanel>
<MultiPanel>
<Card type="inner" size="small" title="Multi Select" bordered={false} />
</MultiPanel>
<CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel>
</DetailPanel>
);
export default FlowDetailPanel;

3
src/pages/editor/flow/components/EditorDetailPanel/KoniDetailPanel.tsx

@ -1,3 +0,0 @@
import FlowDetailPanel from './FlowDetailPanel';
export default FlowDetailPanel;

18
src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx

@ -1,18 +0,0 @@
import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
import styles from './index.less';
const MindDetailPanel = () => (
<DetailPanel className={styles.detailPanel}>
<NodePanel>
<DetailForm type="node" />
</NodePanel>
<CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel>
</DetailPanel>
);
export default MindDetailPanel;

6
src/pages/editor/flow/components/EditorDetailPanel/index.less

@ -1,6 +0,0 @@
@import '~antd/es/style/themes/default.less';
.detailPanel {
flex: 1;
background-color: @component-background;
}

5
src/pages/editor/flow/components/EditorDetailPanel/index.tsx

@ -1,5 +0,0 @@
import FlowDetailPanel from './FlowDetailPanel';
import KoniDetailPanel from './KoniDetailPanel';
import MindDetailPanel from './MindDetailPanel';
export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };

53
src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx

@ -1,53 +0,0 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
import styles from './index.less';
const FlowItemPanel = () => (
<ItemPanel className={styles.itemPanel}>
<Card bordered={false}>
<Item
type="node"
size="72*72"
shape="flow-circle"
model={{
color: '#FA8C16',
label: 'Start',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*48"
shape="flow-rect"
model={{
color: '#1890FF',
label: 'Normal',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*72"
shape="flow-rhombus"
model={{
color: '#13C2C2',
label: 'Decision',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*48"
shape="flow-capsule"
model={{
color: '#722ED1',
label: 'Model',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
</Card>
</ItemPanel>
);
export default FlowItemPanel;

49
src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx

@ -1,49 +0,0 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
import styles from './index.less';
const KoniItemPanel = () => (
<ItemPanel className={styles.itemPanel}>
<Card bordered={false}>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#69C0FF',
label: 'Bank',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#5CDBD3',
label: 'Person',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#B37FEB',
label: 'Country',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
</Card>
</ItemPanel>
);
export default KoniItemPanel;

19
src/pages/editor/flow/components/EditorItemPanel/index.less

@ -1,19 +0,0 @@
@import '~antd/es/style/themes/default.less';
.itemPanel {
flex: 1;
:global {
.ant-card {
height: 100%;
}
.ant-card-body {
display: flex;
flex-direction: column;
align-items: center;
> div {
margin-bottom: 16px;
}
}
}
}

4
src/pages/editor/flow/components/EditorItemPanel/index.tsx

@ -1,4 +0,0 @@
import FlowItemPanel from './FlowItemPanel';
import KoniItemPanel from './KoniItemPanel';
export { FlowItemPanel, KoniItemPanel };

10
src/pages/editor/flow/components/EditorMinimap/index.tsx

@ -1,10 +0,0 @@
import { Card } from 'antd';
import { Minimap } from 'gg-editor';
const EditorMinimap = () => (
<Card type="inner" size="small" title="Minimap" bordered={false}>
<Minimap height={200} />
</Card>
);
export default EditorMinimap;

29
src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx

@ -1,29 +0,0 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';
const FlowToolbar = () => (
<Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" />
<ToolbarButton command="redo" />
<Divider type="vertical" />
<ToolbarButton command="copy" />
<ToolbarButton command="paste" />
<ToolbarButton command="delete" />
<Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" />
<ToolbarButton command="toBack" icon="to-back" text="To Back" />
<ToolbarButton command="toFront" icon="to-front" text="To Front" />
<Divider type="vertical" />
<ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
<ToolbarButton command="addGroup" icon="group" text="Add Group" />
<ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
</Toolbar>
);
export default FlowToolbar;

3
src/pages/editor/flow/components/EditorToolbar/KoniToolbar.tsx

@ -1,3 +0,0 @@
import FlowToolbar from './FlowToolbar';
export default FlowToolbar;

24
src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx

@ -1,24 +0,0 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';
const FlowToolbar = () => (
<Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" />
<ToolbarButton command="redo" />
<Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" />
<ToolbarButton command="append" text="Topic" />
<ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
<Divider type="vertical" />
<ToolbarButton command="collapse" text="Fold" />
<ToolbarButton command="expand" text="Unfold" />
</Toolbar>
);
export default FlowToolbar;

31
src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx

@ -1,31 +0,0 @@
import { Command } from 'gg-editor';
import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../common/IconFont';
import styles from './index.less';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
type ToolbarButtonProps = {
command: string;
icon?: string;
text?: string;
};
const ToolbarButton: React.FC<ToolbarButtonProps> = (props) => {
const { command, icon, text } = props;
return (
<Command name={command}>
<Tooltip
title={text || upperFirst(command)}
placement="bottom"
overlayClassName={styles.tooltip}
>
<IconFont type={`icon-${icon || command}`} />
</Tooltip>
</Command>
);
};
export default ToolbarButton;

40
src/pages/editor/flow/components/EditorToolbar/index.less

@ -1,40 +0,0 @@
@import '~antd/es/style/themes/default.less';
.toolbar {
display: flex;
align-items: center;
:global {
.command .anticon {
display: inline-block;
width: 27px;
height: 27px;
margin: 0 6px;
padding-top: 6px;
text-align: center;
cursor: pointer;
&:hover {
border: 1px solid @item-active-bg;
}
}
.disable .anticon {
color: @text-color-secondary;
cursor: auto;
&:hover {
border: 1px solid @border-color-base;
}
}
}
}
.tooltip {
:global {
.ant-tooltip-inner {
font-size: 12px;
border-radius: 0;
}
}
}

5
src/pages/editor/flow/components/EditorToolbar/index.tsx

@ -1,5 +0,0 @@
import FlowToolbar from './FlowToolbar';
import KoniToolbar from './KoniToolbar';
import MindToolbar from './MindToolbar';
export { FlowToolbar, MindToolbar, KoniToolbar };

48
src/pages/editor/flow/index.less

@ -1,48 +0,0 @@
@import '~antd/es/style/themes/default.less';
.editor {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: calc(100vh - 250px);
background: @component-background;
}
.editorHd {
padding: 8px;
background: @descriptions-bg;
border: 1px solid @item-active-bg;
}
.editorBd {
flex: 1;
}
.editorSidebar,
.editorContent {
display: flex;
flex-direction: column;
}
.editorSidebar {
background: @descriptions-bg;
:global {
.g6-editor-minimap-container {
background: none !important ;
}
}
&:first-child {
border-right: 1px solid @item-active-bg;
}
&:last-child {
border-left: 1px solid @item-active-bg;
}
}
.flow,
.mind,
.koni {
flex: 1;
}

37
src/pages/editor/flow/index.tsx

@ -1,37 +0,0 @@
import { Col, Row } from 'antd';
import GGEditor, { Flow } from 'gg-editor';
import { PageContainer } from '@ant-design/pro-components';
import EditorMinimap from './components/EditorMinimap';
import { FlowContextMenu } from './components/EditorContextMenu';
import { FlowDetailPanel } from './components/EditorDetailPanel';
import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowToolbar } from './components/EditorToolbar';
import styles from './index.less';
GGEditor.setTrackable(false);
export default () => (
<PageContainer content="千言万语不如一张图,流程图是表示算法思路的好方法">
<GGEditor className={styles.editor}>
<Row className={styles.editorHd}>
<Col span={24}>
<FlowToolbar />
</Col>
</Row>
<Row className={styles.editorBd}>
<Col span={4} className={styles.editorSidebar}>
<FlowItemPanel />
</Col>
<Col span={16} className={styles.editorContent}>
<Flow className={styles.flow} />
</Col>
<Col span={4} className={styles.editorSidebar}>
<FlowDetailPanel />
<EditorMinimap />
</Col>
</Row>
<FlowContextMenu />
</GGEditor>
</PageContainer>
);

7
src/pages/editor/koni/common/IconFont/index.ts

@ -1,7 +0,0 @@
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
});
export default IconFont;

34
src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx

@ -1,34 +0,0 @@
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
import styles from './index.less';
const FlowContextMenu = () => (
<ContextMenu className={styles.contextMenu}>
<NodeMenu>
<MenuItem command="copy" />
<MenuItem command="delete" />
</NodeMenu>
<EdgeMenu>
<MenuItem command="delete" />
</EdgeMenu>
<GroupMenu>
<MenuItem command="copy" />
<MenuItem command="delete" />
<MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
</GroupMenu>
<MultiMenu>
<MenuItem command="copy" />
<MenuItem command="paste" />
<MenuItem command="addGroup" icon="group" text="Add Group" />
<MenuItem command="delete" />
</MultiMenu>
<CanvasMenu>
<MenuItem command="undo" />
<MenuItem command="redo" />
<MenuItem command="pasteHere" icon="paste" text="Paste Here" />
</CanvasMenu>
</ContextMenu>
);
export default FlowContextMenu;

3
src/pages/editor/koni/components/EditorContextMenu/KoniContextMenu.tsx

@ -1,3 +0,0 @@
import FlowContextMenu from './FlowContextMenu';
export default FlowContextMenu;

27
src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx

@ -1,27 +0,0 @@
import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont';
import styles from './index.less';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
type MenuItemProps = {
command: string;
icon?: string;
text?: string;
};
const MenuItem: React.FC<MenuItemProps> = (props) => {
const { command, icon, text } = props;
return (
<Command name={command}>
<div className={styles.item}>
<IconFont type={`icon-${icon || command}`} />
<span>{text || upperFirst(command)}</span>
</div>
</Command>
);
};
export default MenuItem;

22
src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx

@ -1,22 +0,0 @@
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
import styles from './index.less';
const MindContextMenu = () => (
<ContextMenu className={styles.contextMenu}>
<NodeMenu>
<MenuItem command="append" text="Topic" />
<MenuItem command="appendChild" icon="append-child" text="Subtopic" />
<MenuItem command="collapse" text="Fold" />
<MenuItem command="expand" text="Unfold" />
<MenuItem command="delete" />
</NodeMenu>
<CanvasMenu>
<MenuItem command="undo" />
<MenuItem command="redo" />
</CanvasMenu>
</ContextMenu>
);
export default MindContextMenu;

40
src/pages/editor/koni/components/EditorContextMenu/index.less

@ -1,40 +0,0 @@
@import '~antd/es/style/themes/default.less';
.contextMenu {
display: none;
overflow: hidden;
background: @component-background;
border-radius: 4px;
box-shadow: @box-shadow-base;
.item {
display: flex;
align-items: center;
padding: 5px 12px;
cursor: pointer;
transition: all 0.3s;
user-select: none;
&:hover {
background: @select-item-selected-bg;
}
.anticon {
margin-right: 8px;
}
}
:global {
.disable {
:local {
.item {
color: @disabled-color;
cursor: auto;
&:hover {
background: @item-hover-bg;
}
}
}
}
}
}

5
src/pages/editor/koni/components/EditorContextMenu/index.tsx

@ -1,5 +0,0 @@
import FlowContextMenu from './FlowContextMenu';
import KoniContextMenu from './KoniContextMenu';
import MindContextMenu from './MindContextMenu';
export { FlowContextMenu, MindContextMenu, KoniContextMenu };

114
src/pages/editor/koni/components/EditorDetailPanel/DetailForm.tsx

@ -1,114 +0,0 @@
import React from 'react';
import { Card, Input, Select, Form } from 'antd';
import { withPropsAPI } from 'gg-editor';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
const { Item } = Form;
const { Option } = Select;
const inlineFormItemLayout = {
labelCol: {
sm: { span: 8 },
},
wrapperCol: {
sm: { span: 16 },
},
};
type DetailFormProps = {
type: string;
propsAPI?: any;
};
class DetailForm extends React.Component<DetailFormProps> {
get item() {
const { propsAPI } = this.props;
return propsAPI.getSelected()[0];
}
handleFieldChange = (values: any) => {
const { propsAPI } = this.props;
const { getSelected, executeCommand, update } = propsAPI;
setTimeout(() => {
const item = getSelected()[0];
if (!item) {
return;
}
executeCommand(() => {
update(item, {
...values,
});
});
}, 0);
};
handleInputBlur = (type: string) => (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.handleFieldChange({
[type]: e.currentTarget.value,
});
};
renderNodeDetail = () => {
const { label } = this.item.getModel();
return (
<Form initialValues={{ label }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
</Form>
);
};
renderEdgeDetail = () => {
const { label = '', shape = 'flow-smooth' } = this.item.getModel();
return (
<Form initialValues={{ label, shape }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
<Item label="Shape" name="shape" {...inlineFormItemLayout}>
<Select onChange={(value) => this.handleFieldChange({ shape: value })}>
<Option value="flow-smooth">Smooth</Option>
<Option value="flow-polyline">Polyline</Option>
<Option value="flow-polyline-round">Polyline Round</Option>
</Select>
</Item>
</Form>
);
};
renderGroupDetail = () => {
const { label = '新建分组' } = this.item.getModel();
return (
<Form initialValues={{ label }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
</Form>
);
};
render() {
const { type } = this.props;
if (!this.item) {
return null;
}
return (
<Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
{type === 'node' && this.renderNodeDetail()}
{type === 'edge' && this.renderEdgeDetail()}
{type === 'group' && this.renderGroupDetail()}
</Card>
);
}
}
export default withPropsAPI(DetailForm as any);

27
src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx

@ -1,27 +0,0 @@
import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
import styles from './index.less';
const FlowDetailPanel = () => (
<DetailPanel className={styles.detailPanel}>
<NodePanel>
<DetailForm type="node" />
</NodePanel>
<EdgePanel>
<DetailForm type="edge" />
</EdgePanel>
<GroupPanel>
<DetailForm type="group" />
</GroupPanel>
<MultiPanel>
<Card type="inner" size="small" title="Multi Select" bordered={false} />
</MultiPanel>
<CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel>
</DetailPanel>
);
export default FlowDetailPanel;

3
src/pages/editor/koni/components/EditorDetailPanel/KoniDetailPanel.tsx

@ -1,3 +0,0 @@
import FlowDetailPanel from './FlowDetailPanel';
export default FlowDetailPanel;

18
src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx

@ -1,18 +0,0 @@
import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
import styles from './index.less';
const MindDetailPanel = () => (
<DetailPanel className={styles.detailPanel}>
<NodePanel>
<DetailForm type="node" />
</NodePanel>
<CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel>
</DetailPanel>
);
export default MindDetailPanel;

6
src/pages/editor/koni/components/EditorDetailPanel/index.less

@ -1,6 +0,0 @@
@import '~antd/es/style/themes/default.less';
.detailPanel {
flex: 1;
background-color: @component-background;
}

5
src/pages/editor/koni/components/EditorDetailPanel/index.tsx

@ -1,5 +0,0 @@
import FlowDetailPanel from './FlowDetailPanel';
import KoniDetailPanel from './KoniDetailPanel';
import MindDetailPanel from './MindDetailPanel';
export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };

53
src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx

@ -1,53 +0,0 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
import styles from './index.less';
const FlowItemPanel = () => (
<ItemPanel className={styles.itemPanel}>
<Card bordered={false}>
<Item
type="node"
size="72*72"
shape="flow-circle"
model={{
color: '#FA8C16',
label: 'Start',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*48"
shape="flow-rect"
model={{
color: '#1890FF',
label: 'Normal',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*72"
shape="flow-rhombus"
model={{
color: '#13C2C2',
label: 'Decision',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*48"
shape="flow-capsule"
model={{
color: '#722ED1',
label: 'Model',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
</Card>
</ItemPanel>
);
export default FlowItemPanel;

49
src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx

@ -1,49 +0,0 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
import styles from './index.less';
const KoniItemPanel = () => (
<ItemPanel className={styles.itemPanel}>
<Card bordered={false}>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#69C0FF',
label: 'Bank',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#5CDBD3',
label: 'Person',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#B37FEB',
label: 'Country',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
</Card>
</ItemPanel>
);
export default KoniItemPanel;

19
src/pages/editor/koni/components/EditorItemPanel/index.less

@ -1,19 +0,0 @@
@import '~antd/es/style/themes/default.less';
.itemPanel {
flex: 1;
:global {
.ant-card {
height: 100%;
}
.ant-card-body {
display: flex;
flex-direction: column;
align-items: center;
> div {
margin-bottom: 16px;
}
}
}
}

4
src/pages/editor/koni/components/EditorItemPanel/index.tsx

@ -1,4 +0,0 @@
import FlowItemPanel from './FlowItemPanel';
import KoniItemPanel from './KoniItemPanel';
export { FlowItemPanel, KoniItemPanel };

10
src/pages/editor/koni/components/EditorMinimap/index.tsx

@ -1,10 +0,0 @@
import { Card } from 'antd';
import { Minimap } from 'gg-editor';
const EditorMinimap = () => (
<Card type="inner" size="small" title="Minimap" bordered={false}>
<Minimap height={200} />
</Card>
);
export default EditorMinimap;

29
src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx

@ -1,29 +0,0 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';
const FlowToolbar = () => (
<Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" />
<ToolbarButton command="redo" />
<Divider type="vertical" />
<ToolbarButton command="copy" />
<ToolbarButton command="paste" />
<ToolbarButton command="delete" />
<Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" />
<ToolbarButton command="toBack" icon="to-back" text="To Back" />
<ToolbarButton command="toFront" icon="to-front" text="To Front" />
<Divider type="vertical" />
<ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
<ToolbarButton command="addGroup" icon="group" text="Add Group" />
<ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
</Toolbar>
);
export default FlowToolbar;

3
src/pages/editor/koni/components/EditorToolbar/KoniToolbar.tsx

@ -1,3 +0,0 @@
import FlowToolbar from './FlowToolbar';
export default FlowToolbar;

24
src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx

@ -1,24 +0,0 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';
const FlowToolbar = () => (
<Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" />
<ToolbarButton command="redo" />
<Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" />
<ToolbarButton command="append" text="Topic" />
<ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
<Divider type="vertical" />
<ToolbarButton command="collapse" text="Fold" />
<ToolbarButton command="expand" text="Unfold" />
</Toolbar>
);
export default FlowToolbar;

31
src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx

@ -1,31 +0,0 @@
import { Command } from 'gg-editor';
import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../common/IconFont';
import styles from './index.less';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
type ToolbarButtonProps = {
command: string;
icon?: string;
text?: string;
};
const ToolbarButton: React.FC<ToolbarButtonProps> = (props) => {
const { command, icon, text } = props;
return (
<Command name={command}>
<Tooltip
title={text || upperFirst(command)}
placement="bottom"
overlayClassName={styles.tooltip}
>
<IconFont type={`icon-${icon || command}`} />
</Tooltip>
</Command>
);
};
export default ToolbarButton;

39
src/pages/editor/koni/components/EditorToolbar/index.less

@ -1,39 +0,0 @@
@import '~antd/es/style/themes/default.less';
.toolbar {
display: flex;
align-items: center;
:global {
.command .anticon {
display: inline-block;
width: 27px;
height: 27px;
margin: 0 6px;
padding-top: 6px;
text-align: center;
cursor: pointer;
&:hover {
border: 1px solid @item-active-bg;
}
}
.disable .anticon {
color: @text-color-secondary;
cursor: auto;
&:hover {
border: 1px solid @border-color-base;
}
}
}
}
.tooltip {
:global {
.ant-tooltip-inner {
font-size: 12px;
border-radius: 0;
}
}
}

5
src/pages/editor/koni/components/EditorToolbar/index.tsx

@ -1,5 +0,0 @@
import FlowToolbar from './FlowToolbar';
import KoniToolbar from './KoniToolbar';
import MindToolbar from './MindToolbar';
export { FlowToolbar, MindToolbar, KoniToolbar };

56
src/pages/editor/koni/index.less

@ -1,56 +0,0 @@
@import '~antd/es/style/themes/default.less';
.editor {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: calc(100vh - 250px);
background: @descriptions-bg;
}
.editorHd {
padding: 8px;
background: @descriptions-bg;
border: 1px solid @item-active-bg;
}
.editorBd {
flex: 1;
}
.editorSidebar,
.editorContent {
display: flex;
flex-direction: column;
}
.editorContent {
:global {
.graph-container canvas {
vertical-align: middle;
}
}
}
.editorSidebar {
background: @descriptions-bg;
:global {
.g6-editor-minimap-container {
background: none !important ;
}
}
&:first-child {
border-right: 1px solid @item-active-bg;
}
&:last-child {
border-left: 1px solid @item-active-bg;
}
}
.flow,
.mind,
.koni {
flex: 1;
}

37
src/pages/editor/koni/index.tsx

@ -1,37 +0,0 @@
import { Col, Row } from 'antd';
import GGEditor, { Koni } from 'gg-editor';
import { PageContainer } from '@ant-design/pro-components';
import EditorMinimap from './components/EditorMinimap';
import { KoniContextMenu } from './components/EditorContextMenu';
import { KoniDetailPanel } from './components/EditorDetailPanel';
import { KoniItemPanel } from './components/EditorItemPanel';
import { KoniToolbar } from './components/EditorToolbar';
import styles from './index.less';
GGEditor.setTrackable(false);
export default () => (
<PageContainer content="拓扑结构图是指由网络节点设备和通信介质构成的网络结构图">
<GGEditor className={styles.editor}>
<Row className={styles.editorHd}>
<Col span={24}>
<KoniToolbar />
</Col>
</Row>
<Row className={styles.editorBd}>
<Col span={2} className={styles.editorSidebar}>
<KoniItemPanel />
</Col>
<Col span={16} className={styles.editorContent}>
<Koni className={styles.koni} />
</Col>
<Col span={6} className={styles.editorSidebar}>
<KoniDetailPanel />
<EditorMinimap />
</Col>
</Row>
<KoniContextMenu />
</GGEditor>
</PageContainer>
);

7
src/pages/editor/mind/common/IconFont/index.ts

@ -1,7 +0,0 @@
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
});
export default IconFont;

34
src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx

@ -1,34 +0,0 @@
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
import styles from './index.less';
const FlowContextMenu = () => (
<ContextMenu className={styles.contextMenu}>
<NodeMenu>
<MenuItem command="copy" />
<MenuItem command="delete" />
</NodeMenu>
<EdgeMenu>
<MenuItem command="delete" />
</EdgeMenu>
<GroupMenu>
<MenuItem command="copy" />
<MenuItem command="delete" />
<MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
</GroupMenu>
<MultiMenu>
<MenuItem command="copy" />
<MenuItem command="paste" />
<MenuItem command="addGroup" icon="group" text="Add Group" />
<MenuItem command="delete" />
</MultiMenu>
<CanvasMenu>
<MenuItem command="undo" />
<MenuItem command="redo" />
<MenuItem command="pasteHere" icon="paste" text="Paste Here" />
</CanvasMenu>
</ContextMenu>
);
export default FlowContextMenu;

3
src/pages/editor/mind/components/EditorContextMenu/KoniContextMenu.tsx

@ -1,3 +0,0 @@
import FlowContextMenu from './FlowContextMenu';
export default FlowContextMenu;

27
src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx

@ -1,27 +0,0 @@
import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont';
import styles from './index.less';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
type MenuItemProps = {
command: string;
icon?: string;
text?: string;
};
const MenuItem: React.FC<MenuItemProps> = (props) => {
const { command, icon, text } = props;
return (
<Command name={command}>
<div className={styles.item}>
<IconFont type={`icon-${icon || command}`} />
<span>{text || upperFirst(command)}</span>
</div>
</Command>
);
};
export default MenuItem;

22
src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx

@ -1,22 +0,0 @@
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
import styles from './index.less';
const MindContextMenu = () => (
<ContextMenu className={styles.contextMenu}>
<NodeMenu>
<MenuItem command="append" text="Topic" />
<MenuItem command="appendChild" icon="append-child" text="Subtopic" />
<MenuItem command="collapse" text="Fold" />
<MenuItem command="expand" text="Unfold" />
<MenuItem command="delete" />
</NodeMenu>
<CanvasMenu>
<MenuItem command="undo" />
<MenuItem command="redo" />
</CanvasMenu>
</ContextMenu>
);
export default MindContextMenu;

40
src/pages/editor/mind/components/EditorContextMenu/index.less

@ -1,40 +0,0 @@
@import '~antd/es/style/themes/default.less';
.contextMenu {
display: none;
overflow: hidden;
background: @component-background;
border-radius: 4px;
box-shadow: @box-shadow-base;
.item {
display: flex;
align-items: center;
padding: 5px 12px;
cursor: pointer;
transition: all 0.3s;
user-select: none;
&:hover {
background: @select-item-selected-bg;
}
.anticon {
margin-right: 8px;
}
}
:global {
.disable {
:local {
.item {
color: @disabled-color;
cursor: auto;
&:hover {
background: @item-hover-bg;
}
}
}
}
}
}

5
src/pages/editor/mind/components/EditorContextMenu/index.tsx

@ -1,5 +0,0 @@
import FlowContextMenu from './FlowContextMenu';
import KoniContextMenu from './KoniContextMenu';
import MindContextMenu from './MindContextMenu';
export { FlowContextMenu, MindContextMenu, KoniContextMenu };

114
src/pages/editor/mind/components/EditorDetailPanel/DetailForm.tsx

@ -1,114 +0,0 @@
import React from 'react';
import { Card, Input, Select, Form } from 'antd';
import { withPropsAPI } from 'gg-editor';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
const { Item } = Form;
const { Option } = Select;
const inlineFormItemLayout = {
labelCol: {
sm: { span: 8 },
},
wrapperCol: {
sm: { span: 16 },
},
};
type DetailFormProps = {
type: string;
propsAPI?: any;
};
class DetailForm extends React.Component<DetailFormProps> {
get item() {
const { propsAPI } = this.props;
return propsAPI.getSelected()[0];
}
handleFieldChange = (values: any) => {
const { propsAPI } = this.props;
const { getSelected, executeCommand, update } = propsAPI;
setTimeout(() => {
const item = getSelected()[0];
if (!item) {
return;
}
executeCommand(() => {
update(item, {
...values,
});
});
}, 0);
};
handleInputBlur = (type: string) => (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.handleFieldChange({
[type]: e.currentTarget.value,
});
};
renderNodeDetail = () => {
const { label } = this.item.getModel();
return (
<Form initialValues={{ label }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
</Form>
);
};
renderEdgeDetail = () => {
const { label = '', shape = 'flow-smooth' } = this.item.getModel();
return (
<Form initialValues={{ label, shape }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
<Item label="Shape" name="shape" {...inlineFormItemLayout}>
<Select onChange={(value) => this.handleFieldChange({ shape: value })}>
<Option value="flow-smooth">Smooth</Option>
<Option value="flow-polyline">Polyline</Option>
<Option value="flow-polyline-round">Polyline Round</Option>
</Select>
</Item>
</Form>
);
};
renderGroupDetail = () => {
const { label = '新建分组' } = this.item.getModel();
return (
<Form initialValues={{ label }}>
<Item label="Label" name="label" {...inlineFormItemLayout}>
<Input onBlur={this.handleInputBlur('label')} />
</Item>
</Form>
);
};
render() {
const { type } = this.props;
if (!this.item) {
return null;
}
return (
<Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
{type === 'node' && this.renderNodeDetail()}
{type === 'edge' && this.renderEdgeDetail()}
{type === 'group' && this.renderGroupDetail()}
</Card>
);
}
}
export default withPropsAPI(DetailForm as any);

27
src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx

@ -1,27 +0,0 @@
import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
import styles from './index.less';
const FlowDetailPanel = () => (
<DetailPanel className={styles.detailPanel}>
<NodePanel>
<DetailForm type="node" />
</NodePanel>
<EdgePanel>
<DetailForm type="edge" />
</EdgePanel>
<GroupPanel>
<DetailForm type="group" />
</GroupPanel>
<MultiPanel>
<Card type="inner" size="small" title="Multi Select" bordered={false} />
</MultiPanel>
<CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel>
</DetailPanel>
);
export default FlowDetailPanel;

3
src/pages/editor/mind/components/EditorDetailPanel/KoniDetailPanel.tsx

@ -1,3 +0,0 @@
import FlowDetailPanel from './FlowDetailPanel';
export default FlowDetailPanel;

18
src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx

@ -1,18 +0,0 @@
import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
import styles from './index.less';
const MindDetailPanel = () => (
<DetailPanel className={styles.detailPanel}>
<NodePanel>
<DetailForm type="node" />
</NodePanel>
<CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel>
</DetailPanel>
);
export default MindDetailPanel;

6
src/pages/editor/mind/components/EditorDetailPanel/index.less

@ -1,6 +0,0 @@
@import '~antd/es/style/themes/default.less';
.detailPanel {
flex: 1;
background-color: @component-background;
}

5
src/pages/editor/mind/components/EditorDetailPanel/index.tsx

@ -1,5 +0,0 @@
import FlowDetailPanel from './FlowDetailPanel';
import KoniDetailPanel from './KoniDetailPanel';
import MindDetailPanel from './MindDetailPanel';
export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };

53
src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx

@ -1,53 +0,0 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
import styles from './index.less';
const FlowItemPanel = () => (
<ItemPanel className={styles.itemPanel}>
<Card bordered={false}>
<Item
type="node"
size="72*72"
shape="flow-circle"
model={{
color: '#FA8C16',
label: 'Start',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*48"
shape="flow-rect"
model={{
color: '#1890FF',
label: 'Normal',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*72"
shape="flow-rhombus"
model={{
color: '#13C2C2',
label: 'Decision',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
<Item
type="node"
size="80*48"
shape="flow-capsule"
model={{
color: '#722ED1',
label: 'Model',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/>
</Card>
</ItemPanel>
);
export default FlowItemPanel;

49
src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx

@ -1,49 +0,0 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
import styles from './index.less';
const KoniItemPanel = () => (
<ItemPanel className={styles.itemPanel}>
<Card bordered={false}>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#69C0FF',
label: 'Bank',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#5CDBD3',
label: 'Person',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
<Item
type="node"
size="40"
shape="koni-custom-node"
model={{
color: '#B37FEB',
label: 'Country',
labelOffsetY: 28,
icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
}}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
/>
</Card>
</ItemPanel>
);
export default KoniItemPanel;

19
src/pages/editor/mind/components/EditorItemPanel/index.less

@ -1,19 +0,0 @@
@import '~antd/es/style/themes/default.less';
.itemPanel {
flex: 1;
:global {
.ant-card {
height: 100%;
}
.ant-card-body {
display: flex;
flex-direction: column;
align-items: center;
> div {
margin-bottom: 16px;
}
}
}
}

4
src/pages/editor/mind/components/EditorItemPanel/index.tsx

@ -1,4 +0,0 @@
import FlowItemPanel from './FlowItemPanel';
import KoniItemPanel from './KoniItemPanel';
export { FlowItemPanel, KoniItemPanel };

10
src/pages/editor/mind/components/EditorMinimap/index.tsx

@ -1,10 +0,0 @@
import { Card } from 'antd';
import { Minimap } from 'gg-editor';
const EditorMinimap = () => (
<Card type="inner" size="small" title="Minimap" bordered={false}>
<Minimap height={200} />
</Card>
);
export default EditorMinimap;

29
src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx

@ -1,29 +0,0 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';
const FlowToolbar = () => (
<Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" />
<ToolbarButton command="redo" />
<Divider type="vertical" />
<ToolbarButton command="copy" />
<ToolbarButton command="paste" />
<ToolbarButton command="delete" />
<Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" />
<ToolbarButton command="toBack" icon="to-back" text="To Back" />
<ToolbarButton command="toFront" icon="to-front" text="To Front" />
<Divider type="vertical" />
<ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
<ToolbarButton command="addGroup" icon="group" text="Add Group" />
<ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
</Toolbar>
);
export default FlowToolbar;

3
src/pages/editor/mind/components/EditorToolbar/KoniToolbar.tsx

@ -1,3 +0,0 @@
import FlowToolbar from './FlowToolbar';
export default FlowToolbar;

24
src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx

@ -1,24 +0,0 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';
const FlowToolbar = () => (
<Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" />
<ToolbarButton command="redo" />
<Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" />
<ToolbarButton command="append" text="Topic" />
<ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
<Divider type="vertical" />
<ToolbarButton command="collapse" text="Fold" />
<ToolbarButton command="expand" text="Unfold" />
</Toolbar>
);
export default FlowToolbar;

31
src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx

@ -1,31 +0,0 @@
import { Command } from 'gg-editor';
import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../common/IconFont';
import styles from './index.less';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
type ToolbarButtonProps = {
command: string;
icon?: string;
text?: string;
};
const ToolbarButton: React.FC<ToolbarButtonProps> = (props) => {
const { command, icon, text } = props;
return (
<Command name={command}>
<Tooltip
title={text || upperFirst(command)}
placement="bottom"
overlayClassName={styles.tooltip}
>
<IconFont type={`icon-${icon || command}`} />
</Tooltip>
</Command>
);
};
export default ToolbarButton;

40
src/pages/editor/mind/components/EditorToolbar/index.less

@ -1,40 +0,0 @@
@import '~antd/es/style/themes/default.less';
.toolbar {
display: flex;
align-items: center;
:global {
.command .anticon {
display: inline-block;
width: 27px;
height: 27px;
margin: 0 6px;
padding-top: 6px;
text-align: center;
cursor: pointer;
&:hover {
border: 1px solid @item-active-bg;
}
}
.disable .anticon {
color: @text-color-secondary;
cursor: auto;
&:hover {
border: 1px solid @border-color-base;
}
}
}
}
.tooltip {
:global {
.ant-tooltip-inner {
font-size: 12px;
border-radius: 0;
}
}
}

5
src/pages/editor/mind/components/EditorToolbar/index.tsx

@ -1,5 +0,0 @@
import FlowToolbar from './FlowToolbar';
import KoniToolbar from './KoniToolbar';
import MindToolbar from './MindToolbar';
export { FlowToolbar, MindToolbar, KoniToolbar };

56
src/pages/editor/mind/index.less

@ -1,56 +0,0 @@
@import '~antd/es/style/themes/default.less';
.editor {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: calc(100vh - 250px);
background: @descriptions-bg;
}
.editorHd {
padding: 8px;
background: @descriptions-bg;
border: 1px solid @item-active-bg;
}
.editorBd {
flex: 1;
}
.editorSidebar,
.editorContent {
display: flex;
flex-direction: column;
}
.editorContent {
:global {
.graph-container canvas {
vertical-align: middle;
}
}
}
.editorSidebar {
background: @descriptions-bg;
:global {
.g6-editor-minimap-container {
background: none !important ;
}
}
&:first-child {
border-right: 1px solid @item-active-bg;
}
&:last-child {
border-left: 1px solid @item-active-bg;
}
}
.flow,
.mind,
.koni {
flex: 1;
}

34
src/pages/editor/mind/index.tsx

@ -1,34 +0,0 @@
import { Col, Row } from 'antd';
import GGEditor, { Mind } from 'gg-editor';
import { PageContainer } from '@ant-design/pro-components';
import EditorMinimap from './components/EditorMinimap';
import { MindContextMenu } from './components/EditorContextMenu';
import { MindDetailPanel } from './components/EditorDetailPanel';
import { MindToolbar } from './components/EditorToolbar';
import data from './worldCup2018.json';
import styles from './index.less';
GGEditor.setTrackable(false);
export default () => (
<PageContainer content="脑图是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具">
<GGEditor className={styles.editor}>
<Row className={styles.editorHd}>
<Col span={24}>
<MindToolbar />
</Col>
</Row>
<Row className={styles.editorBd}>
<Col span={20} className={styles.editorContent}>
<Mind data={data} className={styles.mind} />
</Col>
<Col span={4} className={styles.editorSidebar}>
<MindDetailPanel />
<EditorMinimap />
</Col>
</Row>
<MindContextMenu />
</GGEditor>
</PageContainer>
);

129
src/pages/editor/mind/worldCup2018.json

@ -1,129 +0,0 @@
{
"roots": [
{
"label": "法国",
"children": [
{
"label": "克罗地亚",
"side": "left",
"children": [
{
"label": "克罗地亚",
"children": [
{
"label": "克罗地亚",
"children": [
{
"label": "克罗地亚"
},
{
"label": "丹麦"
}
]
},
{
"label": "俄罗斯",
"children": [
{
"label": "俄罗斯"
},
{
"label": "西班牙"
}
]
}
]
},
{
"label": "英格兰",
"children": [
{
"label": "英格兰",
"children": [
{
"label": "英格兰"
},
{
"label": "哥伦比亚"
}
]
},
{
"label": "瑞典",
"children": [
{
"label": "瑞士"
},
{
"label": "瑞典"
}
]
}
]
}
]
},
{
"label": "法国",
"side": "right",
"children": [
{
"label": "法国",
"children": [
{
"label": "法国",
"children": [
{
"label": "法国"
},
{
"label": "阿根廷"
}
]
},
{
"label": "乌拉圭",
"children": [
{
"label": "乌拉圭"
},
{
"label": "葡萄牙"
}
]
}
]
},
{
"label": "比利时",
"children": [
{
"label": "比利时",
"children": [
{
"label": "比利时"
},
{
"label": "日本"
}
]
},
{
"label": "巴西",
"children": [
{
"label": "巴西"
},
{
"label": "墨西哥"
}
]
}
]
}
]
}
]
}
]
}

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save