@riil-frontend/component-topology 2.1.5-dev.3 → 2.1.6

package/demo/1/345/237/272/346/234/254/usage.md

@@ -4,4 +4,8 @@ order: 1
 ---
 
 
+```jsx
+<DemoCode src="../../demo-src/basic/Simple.jsx" />
+
+```
 

package/demo/1/345/237/272/346/234/254//345/221/212/350/255/246/346/216/250/351/200/201.md

@@ -10,6 +10,6 @@ order: 8
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CustomAlarm.jsx" />
+<DemoCode src="../../demo-src/basic/CustomAlarm.jsx" />
 ```
 

package/demo/1/345/237/272/346/234/254//350/207/252/345/256/232/344/271/211/345/233/276/346/240/207.md

@@ -8,6 +8,6 @@ order: 5
 - 支持按节点参数适配不同的默认图标
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CustomNodeIcon.jsx" />
+<DemoCode src="../../demo-src/basic/CustomNodeIcon.jsx" />
 ```
 

package/demo/1/345/237/272/346/234/254//350/207/252/345/256/232/344/271/211/345/261/236/346/200/247/345/222/214/346/214/207/346/240/207.md

@@ -11,6 +11,6 @@ order: 8
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CustomAttrAndMetric.jsx" />
+<DemoCode src="../../demo-src/basic/CustomAttrAndMetric.jsx" />
 ```
 

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//346/226/260/345/273/272/350/277/233/345/205/245/347/274/226/350/276/221/346/250/241/345/274/217.md

@@ -7,5 +7,5 @@ order: 3
 
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CreateTopo.jsx" />
+<DemoCode src="../../demo-src/editor/CreateTopo.jsx" />
 ```

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//346/233/277/346/215/242/350/212/202/347/202/271.md

@@ -9,6 +9,6 @@ order: 20
 - 替换节点时，相关联的连线保留
 
 ```jsx
-<DemoCode src="../../demo-src/basic/ReplaceNode.jsx" />
+<DemoCode src="../../demo-src/editor/ReplaceNode.jsx" />
 ```
 

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//347/246/201/347/224/250/345/205/263/350/201/224/350/265/204/346/272/220.md

@@ -12,6 +12,6 @@ order: 10
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/DisableNodeRelateResource.jsx" />
+<DemoCode src="../../demo-src/editor/DisableNodeRelateResource.jsx" />
 ```
 

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//347/274/226/350/276/221/346/250/241/345/274/217/345/217/263/351/224/256/350/217/234/345/215/225.md

@@ -11,6 +11,6 @@ order: 6
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/EditorContextMenu.jsx" />
+<DemoCode src="../../demo-src/editor/EditorContextMenu.jsx" />
 ```
 

package/demo/{2 → 3}/346/213/223/346/211/221/344/270/255/345/277/203/js/TopoFull.jsx

@@ -67,8 +67,7 @@ function TopoTreeSelect(props) {
     .map(item => <Item key={item.id}>{item.name}</Item>);
 
   return (
-    <div>
-    </div>
+    <div />
   )
 }
 

package/demo/3/346/213/223/346/211/221/344/270/255/345/277/203/js/request.js

@@ -0,0 +1,7 @@
+import createMockRequest from '../../../demo-src/createMockRequest';
+
+const request = createMockRequest({
+  baseURL: '/demo/3拓扑中心/js/mock'
+});
+
+export default request;

package/demo/{3 → 4}/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221//345/272/224/347/224/250/351/203/250/347/275/262/346/213/223/346/211/221.md

@@ -6,6 +6,6 @@ order: 1
 <br/>
 
 ```jsx
-<DemoCode src="./src/AppInstallTopo.jsx" />
+<DemoCode src="../../demo-src/biz/AppInstallTopo.jsx" />
 ```
 

package/demo/{3 → 4}/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221//346/225/260/346/215/256/346/265/201/346/213/223/346/211/221.md

@@ -11,5 +11,5 @@ order: 2
 
 
 ```jsx
-<DemoCode src="./src/DataStreamTopo.jsx" />
+<DemoCode src="../../demo-src/biz/DataStreamTopo.jsx" />
 ```

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//351/200/211/346/213/251/350/265/204/346/272/220/346/214/211/351/222/256.md

@@ -0,0 +1,12 @@
+---
+title: 选择资源按钮
+order: 2
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/components/ResourceSelect/ResourceSelectButtonDemo.jsx" />
+```
+

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//351/200/211/346/213/251/350/265/204/346/272/220/347/273/204/344/273/266.md

@@ -0,0 +1,12 @@
+---
+title: 选择资源组件
+order: 1
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/components/ResourceSelect/ResourceSelectDemo.jsx" />
+```
+

package/demo/API/API.md

@@ -40,12 +40,17 @@ order: 4
 
 | 参数 | 说明 | 类型   | 默认值 |
 | ---- | ---- | ------ | ------ |
-| topo |      | Topo |        |
-| titleBar     |      |  ReactNode\|false      |        |
-| editorProps     |      |  EditorProps      |        |
-| onRefresh     |      |  function      |        |
-| onSave     |      |  function      |        |
-| onRemoveElements     |      |  function      |        |
+| topo |  拓扑模型实例    | `Topo` |        |
+| titleBar     |  工具栏    |  `ReactNode\|false`      |        |
+| editorProps     |  编辑器参数    |  `EditorProps`      |        |
+| onRefresh     |   刷新回调   |  `function`      |        |
+| onSave     |  保存回调    |  `function`      |        |
+| onRemoveElements     |  删除元素回调    |  `function`      |        |
+| onConnect     |  called when user connects two nodes    |  `function({ source, target })`      |        |
+| onConnectStart     |   called when user starts to drag connection line   |  `function(event, { nodeId, handleType })`      |        |
+| onConnectStop     |   called when user stops to drag connection line   |  `function(event)`      |        |
+| onConnectEnd     |    called after user stops or connects nodes  |  `function(event)`      |        |
+| onSelectionChange     |    called when user selects one or multiple elements  |  `function(elements)`      |        |
 
 ##### EditorProps
 

package/es/components/TopoView/settings/GroupNodeList/ResourceList.js

@@ -2,7 +2,7 @@ import _Button from "@alifd/next/es/button";
 import _List from "@alifd/next/es/list";
 import _Avatar from "@alifd/next/es/avatar";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SelectResource from './SelectResource';
+import SelectResource from '../../../ResourceSelect/SelectResource';
 import styles from './ResourceList.module.scss';
 
 function ResourceList(props) {

package/es/components/TopoView/settings/LayerSettingsForm.js

@@ -121,7 +121,10 @@ export default function LayerSettingsForm(props) {
         style: {
           flex: 1
         }
-      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceList.Select, null))
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceList.Select, null)),
+      onClick: function onClick(e) {
+        console.error(111, e);
+      }
     }, /*#__PURE__*/React.createElement(GroupNodeList, {
       topo: topo,
       group: values

package/lib/components/TopoView/settings/GroupNodeList/ResourceList.js

@@ -13,7 +13,7 @@ var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _SelectResource = _interopRequireDefault(require("./SelectResource"));
+var _SelectResource = _interopRequireDefault(require("../../../ResourceSelect/SelectResource"));
 
 var _ResourceListModule = _interopRequireDefault(require("./ResourceList.module.scss"));
 

package/lib/components/TopoView/settings/LayerSettingsForm.js

@@ -147,7 +147,10 @@ function LayerSettingsForm(props) {
         style: {
           flex: 1
         }
-      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceList["default"].Select, null))
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceList["default"].Select, null)),
+      onClick: function onClick(e) {
+        console.error(111, e);
+      }
     }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
       topo: topo,
       group: values

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.1.5-dev.3",
+  "version": "2.1.6",
   "description": "拓扑",
   "files": [
     "demo/",
+    "demo-mock/",
     "lib/",
     "es/",
     "build/",
-    "3rd/",
     "public/"
   ],
   "main": "lib/index.js",
@@ -96,5 +96,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.5-dev.3/build/index.html"
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.6/build/index.html"
 }

package/demo/2/346/213/223/346/211/221/344/270/255/345/277/203/js/request.js

@@ -1,7 +0,0 @@
-import createMockRequest from "../../../demo-src/createMockRequest";
-
-const request = createMockRequest({
-    baseURL: '/demo/2拓扑中心/js/mock'
-});
-
-export default request;

package/demo/3/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/AppInstallTopo.jsx

@@ -1,228 +0,0 @@
-import React, {useState, useEffect, useRef, useCallback, useMemo} from 'react';
-import {Radio, Loading, Button} from '@alifd/next';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology, TitleBar, SearchWidget} from '../../../src';
-
-import request from './request';
-import {topoList, getData} from "./data/appInstall";
-import createTopoData from './data/appInstall/data1';
-
-function TopoDemo(props) {
-
-  const [topoId, setTopoId] = useState('1');
-  const [loading, setLoading] = useState(false);
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false, // 关闭内置告警推送
-      enableDefaultMetricLoader: false, // 关闭内置指标推送
-      ciTypes: {
-        aaa: {
-          tag: [
-            { code: 'cpuRate', type: 'metric' },
-            { code: 'memRate', type: 'metric' },
-          ],
-          tip: [
-            { code: 'ipAddress', type: 'attribute' },
-            { code: 'macAddress', type: 'attribute' },
-            { code: 'assetState', type: 'attribute' },
-          ],
-        },
-      },
-      icons: [
-        {
-          id: 'ciType.aaa', // 如果以ciType.开头，节点无图标时默认按ciType匹配
-          name: 'ciType.aaa',
-          url: '../public/icons/c_b_server.svg', // 图片地址
-          jsonUrl: null, // ht 拓扑使用
-        }
-      ],
-      editor: {
-        enableRelateResource: false, // 禁用左侧资源链路页签、禁用手工添加的节点关联资源
-      }
-    });
-  }, []);
-
-  const Provider = topo.Provider;
-
-  // API：
-
-  // 加载拓扑图数据
-  const loadTopo = async (id) => {
-    setLoading(true);
-    // TODO 查询拓扑图，转换格式
-    const data = await getData(id);
-    await topo.load(data);
-    setLoading(false)
-  };
-
-  // 初始化
-  useEffect(async () => {
-    await loadTopo(topoId);
-    return () => {
-      topo.exit();
-    }
-  }, []);
-
-  // 创建拓扑图进入编辑模式
-  const createAndEnterEdit = async () => {
-    setLoading(true);
-    // TODO 转换格式
-    const data = createTopoData;
-    await topo.load(data, {
-      mode: 'edit'
-    });
-    setLoading(false)
-  };
-
-  // 进入编辑模式
-  const enterEditMode = useCallback(async () => {
-    setLoading(true);
-    await topo.enterEditMode();
-    setLoading(false)
-  }, []);
-
-  const renderViewerTitleBar = () => {
-    const onSelect = async (id) => {
-      setTopoId(id);
-      await loadTopo(id);
-    };
-    return (
-      <div style={{display: 'flex', alignItems: 'center'}}>
-        <div style={{flex: 1}}>
-          <Radio.Group dataSource={topoList} shape="button" size="small" value={topoId} onChange={onSelect}/>        &nbsp; &nbsp;
-          <Button type="primary" onClick={createAndEnterEdit} title="新建并进入编辑模式">新建</Button>
-        </div>
-        <SearchWidget topo={topo}/> &nbsp; &nbsp;
-        <Button type="primary" onClick={enterEditMode}>编辑</Button>        &nbsp; &nbsp;
-        <Button onClick={() => { topo.exportImage() }}>导出拓扑图</Button>
-      </div>
-    )
-  };
-
-
-  // 退出编辑模式
-  const onExitEditMode = useCallback(async () => {
-    setLoading(true);
-
-    await topo.exitEditMode();
-    // 重新加载拓扑
-    await loadTopo(topoId);
-
-    setLoading(false)
-  }, [topoId]);
-
-  // 触发保存事件
-  const onTriggerSaveEvent = useCallback(async () => {
-    await topo.triggerSaveEvent()
-  }, []);
-  // 保存
-  const onSave = useCallback(async (ctx) => {
-    setLoading(true);
-
-    const {saveConfig} = ctx;
-    // 保存节点位置、样式、配置
-    await saveConfig();
-
-    // 获取拓扑图 业务节点和连线、自定义节点和连线
-    const data = topo.getData();
-    console.error('获取拓扑图数据', data);
-    // TODO 保存业务信息，
-
-    setLoading(false)
-  }, [topoId]);
-
-  // 更新分层数据
-  const updateData = async () => {
-    await topo.updateData({
-      groups: [
-        {
-          "id": 20,
-          "name": "业务层"
-        },
-        {
-          "id": 19,
-          "name": "工具层"
-        },
-      ],
-      nodes: [
-        {
-          "id": "000000004e2f8f55",
-          "name": "HuiJu166.2_20002",
-          "ciType": "ruijieSwitch",
-          "groupId": 20,
-          "operation": "delete"
-        },
-      ],
-      lines: [],
-    })
-  };
-
-  const renderEditorTitleBar = () => {
-    return (
-      <div style={{display: 'flex', alignItems: 'center'}}>
-        <div style={{flex: 1}}>拓扑图标题</div>
-        <Button onClick={updateData}>修改分层数据</Button>        &nbsp; &nbsp;
-        <Button type="primary" onClick={onTriggerSaveEvent}>保存</Button>        &nbsp; &nbsp;
-        <Button onClick={onExitEditMode}>退出</Button>
-      </div>
-    )
-  };
-
-  // 编辑器参数
-  const editorProps = {
-    // 选择资源
-    layerSelectResource: {
-      ciTypes: [], // 类型过滤
-      getTableData: async (params) => {
-        const {
-          current = 1,
-          pageSize = 20,
-          sortBy = 'displayName',
-          sortOrder = 'asc',
-          like,
-          typeCode,
-        } = params;
-        // 从拓扑图查询已有资源列表
-        // TODO 查询数据
-        return {
-          dataSource: [],
-          total: 100,
-          current: 1,
-          pageSize,
-        }
-      },
-      onOk: async (selected) => {
-        // 查询、合并数据、全量更新拓扑图数据
-
-      }
-    }
-  };
-
-  return (
-    <Loading visible={loading} style={{width: '100%'}}>
-      <Provider>
-        <TitleBar
-          topo={topo}
-          render={({isEditMode}) => isEditMode ? renderEditorTitleBar() : renderViewerTitleBar()}
-        />
-        <br/>
-
-        <div style={{width: '100%', height: '500px', background: 'white'}}>
-          <Topology
-            topo={topo}
-            titleBar={false}
-            editorProps={editorProps}
-            onRefresh={() => {loadTopo(topoId)}}
-            onSave={onSave}
-            onRemoveElements={() => {}}
-          />
-        </div>
-      </Provider>
-    </Loading>
-  );
-}
-
-export default TopoDemo;