@riil-frontend/component-topology 2.7.5 → 2.10.0-alpha-2

package/es/components/LayoutDirectionSelect/Item.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TemplateButton from "../TemplateButton";
+import styles from "./Item.module.scss";
+export default function Item(props) {
+  return /*#__PURE__*/React.createElement(TemplateButton, _extends({}, props, {
+    iconClassName: styles.icon,
+    textClassName: styles.text
+  }));
+}
+;

package/es/components/LayoutDirectionSelect/Item.module.scss

@@ -0,0 +1,9 @@
+.icon {
+  width: 72px;
+}
+
+.text {
+  font-size: 12px;
+  margin-top: 15px;
+  padding-bottom: 18px;
+}

package/es/components/LayoutDirectionSelect/LayoutDirectionSelect.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TagImageSelect from "../TagImageSelect";
+import styles from "./LayoutDirectionSelect.module.scss";
+import Item from "./Item";
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+export default function LayoutDirectionSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return _extends({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/React.createElement(TagImageSelect, {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: styles.layoutSelectItem
+    },
+    ItemComponent: Item
+  });
+}
+;

package/es/components/LayoutDirectionSelect/LayoutDirectionSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px !important;
+}

package/es/components/LayoutDirectionSelect/index.js

@@ -0,0 +1,2 @@
+import LayoutDirectionSelect from "./LayoutDirectionSelect";
+export default LayoutDirectionSelect;

package/es/components/LayoutSelect/LayoutSelect.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TagImageSelect from "../TagImageSelect";
+import styles from "./LayoutSelect.module.scss";
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+export default function LayoutSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return _extends({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/React.createElement(TagImageSelect, {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: styles.layoutSelectItem
+    }
+  });
+}
+;

package/es/components/LayoutSelect/LayoutSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px;
+}

package/es/components/LayoutSelect/README.md

@@ -0,0 +1 @@
+自动布局选择

package/es/components/LayoutSelect/index.js

@@ -0,0 +1,2 @@
+import LayoutSelect from "./LayoutSelect";
+export default LayoutSelect;

package/es/components/{TemplateSelect → TagImageSelect}/index.js

@@ -1,34 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _Tag from "@alifd/next/lib/tag";
 import React from 'react';
 import TemplateButton from "../TemplateButton";
-import styles from "./index.module.scss";
-import TemplateGroup from "../TemplateGroup";
 import TagSelect from "../TagSelect";
-var TagGroup = _Tag.Group,
-    SelectableTag = _Tag.Selectable;
 
-var TemplateSelect = function TemplateSelect(props) {
+var TagImageSelect = function TagImageSelect(props) {
   var _data$filter$;
 
-  // return (
-  //   <TemplateGroup {...props}/>
-  // )
   var _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
       size = props.size,
       boxProps = props.boxProps,
       tagProps = props.tagProps,
-      itemProps = props.itemProps;
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent;
   var value = (_data$filter$ = data.filter(function (item) {
     return item.selected;
   })[0]) === null || _data$filter$ === void 0 ? void 0 : _data$filter$.id;
+  var Item = ItemComponent || TemplateButton;
   return /*#__PURE__*/React.createElement(TagSelect, {
     defaultValue: value,
     dataSource: data.map(function (item) {
       return {
         key: item.id,
-        content: /*#__PURE__*/React.createElement(TemplateButton, _extends({
+        content: /*#__PURE__*/React.createElement(Item, _extends({
           key: item.id
         }, item, {
           size: size
@@ -38,17 +32,6 @@ var TemplateSelect = function TemplateSelect(props) {
     boxProps: boxProps,
     tagProps: tagProps
   });
-  return /*#__PURE__*/React.createElement(TagGroup, null, data.map(function (item) {
-    return /*#__PURE__*/React.createElement(SelectableTag, {
-      key: item.name,
-      checked: item.selected,
-      onChange: function onChange() {}
-    }, /*#__PURE__*/React.createElement(TemplateButton, _extends({
-      key: item.id
-    }, item, {
-      size: size
-    }), item.name));
-  }));
 };
 
-export default TemplateSelect;
+export default TagImageSelect;

package/es/components/TagSelect/index.js

@@ -9,8 +9,8 @@ var SelectableTag = _Tag.Selectable;
 var TagSelect = function TagSelect(props) {
   var _onChange = props.onChange,
       value = props.value,
-      dataSource = props.dataSource,
       defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
       boxProps = props.boxProps,
       tagProps = props.tagProps;
 
@@ -26,7 +26,7 @@ var TagSelect = function TagSelect(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "tag-select-wrap"
   }, /*#__PURE__*/React.createElement(_Box, _extends({
-    spacing: 8,
+    spacing: 12,
     wrap: true,
     direction: "row"
   }, boxProps), dataSource.map(function (item) {

package/es/components/TagSelect/index.scss

@@ -19,9 +19,5 @@
 				}
 			}
 		}
-		.tag-select-label {
-			margin-top: 4px;
-			max-width: fit-content;
-		}
 	}
 }

package/es/components/TemplateButton/Icon.js

@@ -4,13 +4,14 @@ import Icons from "./assets";
 var Icon = function Icon(props) {
   var _props$alt = props.alt,
       alt = _props$alt === void 0 ? '' : _props$alt,
+      img = props.img,
       type = props.type,
       className = props.className,
       rotate = props.rotate;
   var style = rotate ? {
     transform: "rotate(" + rotate + "deg)"
   } : null;
-  var src = Icons[type];
+  var src = img || Icons[type];
   return /*#__PURE__*/React.createElement("img", {
     className: className,
     style: style,

package/es/components/TemplateButton/assets/index.js

@@ -1,12 +1,8 @@
-import IconTplBlank from "./topo_tpl_blank.svg";
-import IconTplRegion from "./topo_tpl_region.svg"; // import IconTplLayeredRing from './topo_tpl_layered_ring.svg';
-
+// import IconTplLayeredRing from './topo_tpl_layered_ring.svg';
 import IconLayoutCircular from "./topo_layout_circular.svg";
 import IconLayoutHierarchical from "./topo_layout_hierarchical.svg";
 import IconLayoutToward from "./topo_layout_toward.svg";
 export default {
-  'tpl_blank': IconTplBlank,
-  'tpl_region': IconTplRegion,
   // 'tpl_layered_ring': IconTplLayeredRing,
   'layout_circular': IconLayoutCircular,
   'layout_hierarchical': IconLayoutHierarchical,

package/es/components/TemplateButton/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "img", "iconClassName", "textClassName"];
 import React from 'react';
 import classnames from 'classnames';
 import Icon from "./Icon";
@@ -14,7 +14,9 @@ var TemplateButton = function TemplateButton(props) {
       selected = props.selected,
       _props$onSelect = props.onSelect,
       onSelect = _props$onSelect === void 0 ? function () {} : _props$onSelect,
-      size = props.size,
+      img = props.img,
+      iconClassName = props.iconClassName,
+      textClassName = props.textClassName,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
   var handleClick = function handleClick() {
@@ -27,21 +29,11 @@ var TemplateButton = function TemplateButton(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.iconWrapper
   }, /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
+    className: classnames(styles.icon, iconClassName),
+    img: img,
     type: icon
   }, rest))), /*#__PURE__*/React.createElement("div", {
-    className: styles.text
-  }, children));
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.card, className),
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
-    type: icon
-  }, rest)), /*#__PURE__*/React.createElement("div", {
-    tabIndex: "0",
-    role: "button",
-    className: styles.text
+    className: classnames(styles.text, textClassName)
   }, children));
 };
 

package/es/core/editor/components/settings/common/LayoutSettings.js

@@ -1,6 +1,6 @@
 import _Radio from "@alifd/next/lib/radio";
 import React, { useState } from 'react';
-import TemplateGroup from "../../../../../components/TemplateGroup";
+import TemplateGroup from "../../../../../components/TagImageSelect";
 import styles from "./LayoutSettings.module.scss";
 var LAYOUTS = {
   circular: '星型布局',

package/es/core/models/utils/linkUtils.js

@@ -7,8 +7,8 @@ export function mergeLinksData(links, relationDetails) {
   return links.map(function (link) {
     var relation = findItem(relationDetails, 'id', link.id);
     return _extends({}, link, {
-      ciType: relation.typeCode,
-      name: relation.attributes.name,
+      ciType: relation === null || relation === void 0 ? void 0 : relation.typeCode,
+      name: relation === null || relation === void 0 ? void 0 : relation.attributes.name,
       detail: relation
     });
   });

package/es/core/viewer/components/titlebar/ViewerTools.js

@@ -6,10 +6,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 import EditButton from "./widgets/EditButton";
+import useSetDefaultTopo from "./useSetDefaultTopo";
 export default function ViewerTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton;
+  var setDefaultTopo = useSetDefaultTopo({
+    topo: topo
+  });
   return /*#__PURE__*/React.createElement("div", null, showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
     topo: topo
   }, props)), /*#__PURE__*/React.createElement(_Dropdown, {
@@ -19,7 +23,7 @@ export default function ViewerTools(props) {
       type: "ellipsis-vertical"
     })),
     triggerType: "click"
-  }, /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, {
+  }, /*#__PURE__*/React.createElement(_Menu, null, setDefaultTopo.renderMenuItem(), /*#__PURE__*/React.createElement(_Menu.Item, {
     onClick: function onClick() {
       topo.exportImage();
     }

package/es/core/viewer/components/titlebar/useSetDefaultTopo.js

@@ -0,0 +1,30 @@
+import _Menu from "@alifd/next/lib/menu";
+import React from 'react';
+import { findNodeById } from "../../../../utils/tree";
+export default function useSetDefaultTopo(props) {
+  var _findNodeById;
+
+  var topo = props.topo;
+  var store = topo.store;
+  var functionAuthState = store.useModelState('functionAuth');
+  var topoModState = store.useModelState('topoMod');
+
+  var _store$useModel = store.useModel('topoTreeMod'),
+      topoTreeState = _store$useModel[0],
+      topoTreeDispatchers = _store$useModel[1];
+
+  var isDefault = (_findNodeById = findNodeById(topoTreeState.treeData, topoModState.topoId)) === null || _findNodeById === void 0 ? void 0 : _findNodeById.showDefault;
+  var showButton = !!functionAuthState.permissions.manageNavTree && !isDefault;
+
+  var setDefault = function setDefault() {
+    topoTreeDispatchers.setDefTopoOnTree(topoModState.topoId);
+  };
+
+  return {
+    renderMenuItem: function renderMenuItem() {
+      return showButton && /*#__PURE__*/React.createElement(_Menu.Item, {
+        onClick: setDefault
+      }, "\u8BBE\u4E3A\u9ED8\u8BA4\u62D3\u6251");
+    }
+  };
+}

package/es/models/topoMod.js

@@ -21,6 +21,7 @@ export default function (topoApp) {
       topoLoadError: false,
       viewState: 'view',
       // view, create, 2种模式
+      id: undefined,
       topoId: '',
       topoName: '',
       topoData: null,
@@ -35,9 +36,9 @@ export default function (topoApp) {
       topoAlarmIsOpen: false,
       // 拓扑通道是否打开
       alarmData: null,
-      // 概览抽屉中告警列表相关数据
+      // 概览抽屉中告警列表相关数据 TODO 抽取
       currentCiInfo: null,
-      // 概览抽屉当前CI元数据
+      // 概览抽屉当前CI元数据 TODO 抽取
       resAndMetrics: {
         res: [],
         metrics: [],

package/es/style.js

@@ -25,7 +25,7 @@ import '@alifd/next/lib/radio/style';
 import '@alifd/next/lib/collapse/style';
 import '@alifd/next/lib/list/style';
 import '@alifd/next/lib/tree-select/style';
-
+import '@alifd/next/lib/tag/style';
 
 
 import './index.scss';

package/es/topoCenter/store/topoTreeMod.js

@@ -4,33 +4,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import topoServer from '@riil-frontend/component-topology-common/es/services/topo';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import { treeMockData, topoInteData } from "../../utils/topoMocks";
-import { formatTree, loopTree, loopTreeFun, iconImg, treeNodeCount } from "../../utils/tree";
+import { formatTree, loopTree, loopTreeFun, findParentIdsById, treeNodeCount } from "../../utils/tree";
 
 var clone = function clone(data) {
   return JSON.parse(JSON.stringify(data));
-}; // 展开选中项
-
-
-function findSelectedParentIds(data, selectedId) {
-  // 选中 id 为 -1,则没有默认选中项
-  if (selectedId == '-1') return [];
-  var node = {};
-  loopTree(data, selectedId, function (item, index, arr, pid) {
-    node = {
-      item: item,
-      pid: pid
-    };
-  });
-  if (!node.item) return [];
-
-  if (node.pid != -1 && node.item.id) {
-    var _node$children;
-
-    return (_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length ? ["" + node.item.id].concat(findSelectedParentIds(data, node.pid)) : [].concat(findSelectedParentIds(data, node.pid));
-  } else {
-    return ["" + node.item.id];
-  }
-}
+};
 /**
  * TODO 导航树相关增删改移到拓扑中心
  */
@@ -83,7 +61,7 @@ export default function (topoApp) {
                       treeData: treeNodeCount(treeData),
                       defId: defId,
                       selectedNode: [selectedTopoId],
-                      expandedKeys: findSelectedParentIds(treeData, selectedTopoId)
+                      expandedKeys: findParentIdsById(treeData, selectedTopoId)
                     }); // console.log('resTreeData', resTreeData, rootState.topoMod.topoId);
 
 
@@ -368,7 +346,7 @@ export default function (topoApp) {
           }
 
           var expandedKeys = [].concat(treeState.expandedKeys || []);
-          var parentIds = findSelectedParentIds(treeState.treeData, id);
+          var parentIds = findParentIdsById(treeState.treeData, id);
           expandedKeys.push.apply(expandedKeys, parentIds);
           this.update({
             selectedNode: ["" + id],

package/es/utils/tree.js

@@ -87,6 +87,25 @@ export function findNodeById(tree, id) {
   });
   return node;
 }
+/**
+ * 按id查找祖先节点id列表
+ */
+
+export function findParentIdsById(tree, id) {
+  var node = findNodeById(tree, id);
+
+  if (!node) {
+    return [];
+  }
+
+  var parentId = "" + node.parentId;
+
+  if (parentId === '-1') {
+    return [];
+  }
+
+  return [parentId].concat(findParentIdsById(tree, parentId));
+}
 /**
  * 递归循环遍历树匹配KEY
  * @param {array} json

package/lib/components/LayoutDirectionSelect/Item.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = Item;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
+
+var _ItemModule = _interopRequireDefault(require("./Item.module.scss"));
+
+function Item(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({}, props, {
+    iconClassName: _ItemModule["default"].icon,
+    textClassName: _ItemModule["default"].text
+  }));
+}
+
+;

package/lib/components/LayoutDirectionSelect/Item.module.scss

@@ -0,0 +1,9 @@
+.icon {
+  width: 72px;
+}
+
+.text {
+  font-size: 12px;
+  margin-top: 15px;
+  padding-bottom: 18px;
+}

package/lib/components/LayoutDirectionSelect/LayoutDirectionSelect.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LayoutDirectionSelect;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TagImageSelect = _interopRequireDefault(require("../TagImageSelect"));
+
+var _LayoutDirectionSelectModule = _interopRequireDefault(require("./LayoutDirectionSelect.module.scss"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+
+function LayoutDirectionSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return (0, _extends2["default"])({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement(_TagImageSelect["default"], {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: _LayoutDirectionSelectModule["default"].layoutSelectItem
+    },
+    ItemComponent: _Item["default"]
+  });
+}
+
+;

package/lib/components/LayoutDirectionSelect/LayoutDirectionSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px !important;
+}

package/lib/components/LayoutDirectionSelect/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _LayoutDirectionSelect = _interopRequireDefault(require("./LayoutDirectionSelect"));
+
+var _default = _LayoutDirectionSelect["default"];
+exports["default"] = _default;