@riil-frontend/component-topology 11.0.29 → 11.0.30

package/es/core/editor/components/Toolbar/widgets/Layout/index.js

@@ -1,23 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
+
 /* eslint-disable eqeqeq */
 import React, { useState, useMemo } from 'react';
 import LayoutSettings from "./components/LayoutSettings";
 import WidgetBox from "../WidgetBox";
 import DropdownButton from "../components/DropdownButton";
 import { isGroup, isLayer } from "../../../../../../utils/htElementDataUtil";
+
 function Layout(props) {
   var topo = props.topo,
-    topoShowType = props.topoShowType;
+      topoShowType = props.topoShowType;
+
   var _useState = useState(),
-    layout = _useState[0],
-    setLayout = _useState[1];
+      layout = _useState[0],
+      setLayout = _useState[1]; // 选中的元素
+
 
-  // 选中的元素
   var selectionElements = topo.selectionModel.useHtSelection();
+
   var _topo$store$useModelS = topo.store.useModelState('selection'),
-    selection = _topo$store$useModelS.selection;
+      selection = _topo$store$useModelS.selection;
+
   var setDisabled = function setDisabled(data) {
     if (topoShowType == 'layers' && selection.length == 1 && !isGroup(selection[0])) {
       return data != 'rectangle';
@@ -25,32 +30,39 @@ function Layout(props) {
       return data == 'rectangle';
     }
   };
+
   var globalLayout = function globalLayout(data) {
     var firstElement = selection[0];
-    var layouType = data.id === 'toward' ? "" + data.id + data.options.subId : data.id;
-    // eslint-disable-next-line eqeqeq
+    var layouType = data.id === 'toward' ? "" + data.id + data.options.subId : data.id; // eslint-disable-next-line eqeqeq
+
     if (topoShowType != 'layers' && selection.length == 0) {
       topo.getHtTopo().layoutInTopo(layouType);
-    }
-    // eslint-disable-next-line eqeqeq
+    } // eslint-disable-next-line eqeqeq
+
+
     if (topoShowType != 'layers' && selection.length == 1) {
       topo.getHtTopo().layoutInContainer(layouType);
-    }
-    // eslint-disable-next-line eqeqeq
+    } // eslint-disable-next-line eqeqeq
+
+
     if (firstElement && isLayer(firstElement)) {
       topo.getHtTopo().layoutLayer(selectionElements[0]);
     }
   };
+
   var layoutOnChange = function layoutOnChange(v) {
     var _selection$;
+
     topo.historyManager.beginTransaction();
-    setLayout(v);
-    // eslint-disable-next-line eqeqeq
+    setLayout(v); // eslint-disable-next-line eqeqeq
+
     if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1) {
       globalLayout(v);
     }
+
     topo.historyManager.endTransaction();
   };
+
   return (
     /*#__PURE__*/
     // <LayoutSettings size="xs" selection = {selection} topoShowType={topoShowType} layout={layout} onChange={layoutOnChange} />
@@ -62,19 +74,22 @@ function Layout(props) {
     })
   );
 }
+
 function LayoutWidget(props) {
   var topo = props.topo,
-    showLabel = props.showLabel,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  // eslint-disable-next-line no-undef
-  var store = topo.store;
-  // 拓扑图是否加载
-  var topoState = store.useModelState('topoMod');
-  // 分层或分区时候选中的值，未选中length为0 配合下面的type属性一起使用，
+      showLabel = props.showLabel,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded); // eslint-disable-next-line no-undef
+
+
+  var store = topo.store; // 拓扑图是否加载
+
+  var topoState = store.useModelState('topoMod'); // 分层或分区时候选中的值，未选中length为0 配合下面的type属性一起使用，
   // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
   // type为auto且selection.length==0时可以点击布局 
+
   var _topo$store$useModelS2 = topo.store.useModelState('selection'),
-    selection = _topo$store$useModelS2.selection;
+      selection = _topo$store$useModelS2.selection;
+
   var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
 
   var disabled = useMemo(function () {
@@ -103,22 +118,26 @@ function LayoutWidget(props) {
     topoShowType: topoShowType
   }, otherProps))));
 }
+
 function isLayoutEnabled(props) {
   var topoShowType = props.topoShowType,
-    selection = props.selection;
+      selection = props.selection; // 选中单个区域/集群后，该按钮亮起
 
-  // 选中单个区域/集群后，该按钮亮起
   if (selection.length === 1 && isGroup(selection[0]) && selection[0].expanded) {
     return true;
-  }
-  // 分层拓扑选中任意分层时，布局按钮亮起
+  } // 分层拓扑选中任意分层时，布局按钮亮起
+
+
   if (topoShowType === 'layers' && selection.length === 1 && isLayer(selection[0])) {
     return true;
-  }
-  // 空白拓扑未选中任何资源时，布局按钮亮起
+  } // 空白拓扑未选中任何资源时，布局按钮亮起
+
+
   if (topoShowType !== 'layers' && !selection.length) {
     return true;
   }
+
   return false;
 }
+
 export default LayoutWidget;

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -6,29 +6,37 @@ import DropdownButton from "./components/DropdownButton";
 import AlignSetting from "../../settings/common/AlignSetting";
 import { isEdge, isLayer } from "../../../../../utils/htElementUtils";
 import styles from "./NodeAlignWidget.module.scss";
+
 function NodeAlignWidget(props) {
   var topo = props.topo,
-    showLabel = props.showLabel;
+      showLabel = props.showLabel;
+
   var _useState = useState(true),
-    disabled = _useState[0],
-    setDisabled = _useState[1];
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
   var _useState2 = useState(),
-    leftInputVal = _useState2[0],
-    setLeftInputVal = _useState2[1];
+      leftInputVal = _useState2[0],
+      setLeftInputVal = _useState2[1];
+
   var _useState3 = useState(),
-    rightInputVal = _useState3[0],
-    setRightInputVal = _useState3[1];
+      rightInputVal = _useState3[0],
+      setRightInputVal = _useState3[1];
+
   var _useState4 = useState(true),
-    distributionDisabled = _useState4[0],
-    setDistributionDisabled = _useState4[1];
-  // 拓扑图是否加载
+      distributionDisabled = _useState4[0],
+      setDistributionDisabled = _useState4[1]; // 拓扑图是否加载
+
+
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-    graphLoaded = _topo$store$useModelS.graphLoaded;
-  // 选中的元素
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
   var selection = topo.selectionModel.useHtSelection();
+
   var setSpace = function setSpace(type, num) {
-    topo.historyManager.beginTransaction();
-    // eslint-disable-next-line no-shadow
+    topo.historyManager.beginTransaction(); // eslint-disable-next-line no-shadow
+
     var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
     var nodes = selection.filter(function (ele) {
       return !isLayer(ele) && !isEdge(ele);
@@ -36,36 +44,41 @@ function NodeAlignWidget(props) {
     topo.view.topoClient.htTopoClient.setElementsSpace(nodes, type, num);
     topo.historyManager.endTransaction();
   };
+
   var leftInputChange = function leftInputChange(val) {
     setLeftInputVal(val);
     setSpace('h', val);
   };
+
   var rightInputChange = function rightInputChange(val) {
     setRightInputVal(val);
     setSpace('v', val);
   };
+
   var parseValue = function parseValue(v) {
     return v * 1 > 0 ? Math.round(v) : '';
   };
+
   useEffect(function () {
     if (graphLoaded) {
       var selectionEle = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
       var nodes = selectionEle.filter(function (ele) {
         return !isLayer(ele) && !isEdge(ele);
       });
-      setDisabled(nodes.length <= 1);
-      // eslint-disable-next-line no-use-before-define
+      setDisabled(nodes.length <= 1); // eslint-disable-next-line no-use-before-define
+
       setLeftInputVal();
       setRightInputVal();
       setDistributionDisabled(nodes.length <= 2);
+
       if (nodes.length === 2) {
         var h = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'h')[0];
         var v = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'v')[0];
         setLeftInputVal(parseValue(h));
         setRightInputVal(parseValue(v));
       }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [graphLoaded, selection]);
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
@@ -106,8 +119,7 @@ function NodeAlignWidget(props) {
     trigger: /*#__PURE__*/React.createElement(_NumberPicker, {
       disabled: disabled,
       size: "small",
-      hasTrigger: false
-      // eslint-disable-next-line no-nested-ternary
+      hasTrigger: false // eslint-disable-next-line no-nested-ternary
       ,
       placeholder: distributionDisabled ? '' : '多个值',
       className: styles.rightInput,
@@ -119,4 +131,5 @@ function NodeAlignWidget(props) {
     align: "b"
   }, "\u8C03\u6574\u56FE\u7247\u95F4\u7684\u5782\u76F4\u8DDD\u79BB"))));
 }
+
 export default NodeAlignWidget;

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/BoxBackgroundSetting.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, forwardRef, useImperativeHandle } from "react";
 import TopoIconSelect from "../IconSelect";
 import { useNodeIcons } from "../../../../../common/icons/useIcons";
+
 function NodeImageList(props, ref) {
   var value = props.value,
-    onChange = props.onChange,
-    topo = props.topo;
+      onChange = props.onChange,
+      topo = props.topo;
   useEffect(function () {}, []);
   var icons = useNodeIcons(topo);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TopoIconSelect, {
@@ -13,4 +14,5 @@ function NodeImageList(props, ref) {
     onChange: onChange
   }));
 }
+
 export default NodeImageList;

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/NodeImageButton.js

@@ -3,32 +3,38 @@ import { isGroup, isNode, isText } from "../../../../../../utils/htElementUtils"
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
+
 function isElementSetImageEnabled(element) {
   if (isGroup(element)) {
     return !element.isExpanded();
   }
+
   return isNode(element) && !isText(element) && element.a('type') !== 'box';
 }
-
 /**
  * 替换图片设置
  * @param {*} props
  * @returns
  */
+
+
 function NodeImageButton(props) {
   var topo = props.topo,
-    showLabel = props.showLabel;
+      showLabel = props.showLabel;
+
   var _useState = useState(true),
-    disabled = _useState[0],
-    setDisabled = _useState[1];
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
   var _useState2 = useState(),
-    imgVal = _useState2[0],
-    setImgVal = _useState2[1];
+      imgVal = _useState2[0],
+      setImgVal = _useState2[1]; // 选中的元素
+
 
-  // 选中的元素
   var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {
     var nodes = selection.filter(isElementSetImageEnabled);
+
     if (nodes.length > 0) {
       setDisabled(false);
       setImgVal(nodes[0].getImage());
@@ -36,23 +42,22 @@ function NodeImageButton(props) {
       setDisabled(true);
     }
   }, [selection]);
+
   var onChange = function onChange(prop) {
     // console.log("onChange-prop", prop, selection);
     //const { name, value } = prop;
     // const gv = topo.view.topoClient.getGraphView();
     //const element = topo.getSelectionModel().getFirstData();
-    var elements = selection;
-    // console.log("onChange-elements", elements);
+    var elements = selection; // console.log("onChange-elements", elements);
+
     elements.forEach(function (element) {
       if (isElementSetImageEnabled(element)) {
         element.setImage(prop);
       }
-    });
-    // selection.map((element) => {
+    }); // selection.map((element) => {
     //   element.setImage(prop);
     // });
     // if (name === "image") {
-
     // }
   };
 
@@ -77,4 +82,5 @@ function NodeImageButton(props) {
     value: imgVal
   })));
 }
+
 export default NodeImageButton;

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/BoxBackgroundSetting.js

@@ -1,6 +1,8 @@
 import React from 'react';
+
 function BoxBackgroundSetting(props) {
   // const {  } = props
   return /*#__PURE__*/React.createElement("div", null, "xxx");
 }
+
 export default BoxBackgroundSetting;

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js

@@ -1,28 +1,30 @@
-import React, { useEffect, useState } from 'react';
-// import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+import React, { useEffect, useState } from 'react'; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+
 import BatchSetNodeSize from "../../../settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize";
 import NodeSizeInput from "../../../settings/common/NodeSizeInput/NodeSizeInput";
 import useSettingRuntimeState from "../../../settings/useSettingRuntimeState";
 import WidgetBox from "../WidgetBox";
 import styles from "./NodeSizeButton.module.scss";
 import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
-
 /**
  * 图片尺寸设置
  * @param {*} props
  * @returns
  */
+
 function NodeSizeButton(props) {
   var topo = props.topo,
-    showLabel = props.showLabel;
+      showLabel = props.showLabel;
+
   var _useState = useState(true),
-    disabled = _useState[0],
-    setDisabled = _useState[1];
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
   var _useState2 = useState(),
-    size = _useState2[0],
-    setSize = _useState2[1];
+      size = _useState2[0],
+      setSize = _useState2[1]; // 选中的元素
+
 
-  // 选中的元素
   var selection = topo.selectionModel.useSelection();
   var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
@@ -34,8 +36,10 @@ function NodeSizeButton(props) {
     var nodes = elements.filter(function (ele) {
       return isGroup(ele) || isNode(ele);
     });
+
     if (nodes.length > 0) {
       setDisabled(false);
+
       if (selection.length === 1) {
         var element = nodes[0];
         setSize({
@@ -51,16 +55,19 @@ function NodeSizeButton(props) {
       });
     }
   }, [selection]);
+
   var _onChange = function onChange(prop) {
     var name = prop.name,
-      value = prop.value;
+        value = prop.value;
     var element = topo.getSelectionModel().getFirstData();
+
     if (name === 'width') {
       element.setWidth(value);
     } else if (name === 'height') {
       element.setHeight(value);
     }
   };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
     disabled: disabled,
@@ -69,8 +76,7 @@ function NodeSizeButton(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.toolbarNodeSizeSetting
   }, selection.length > 1 ? /*#__PURE__*/React.createElement(BatchSetNodeSize, {
-    topo: topo
-    // size="small"
+    topo: topo // size="small"
     ,
     value: size,
     disabled: disabled,
@@ -78,16 +84,15 @@ function NodeSizeButton(props) {
     numberPickerProps: {
       hasTrigger: false,
       placeholder: '-'
-    }
-    // onChange={(size) => {
+    } // onChange={(size) => {
     //   topo.historyManager.beginTransaction();
     //   onChange({ name: "width", value: size.width });
     //   onChange({ name: "height", value: size.height });
     //   topo.historyManager.endTransaction();
     // }}
+
   }) : /*#__PURE__*/React.createElement(NodeSizeInput, {
-    topo: topo
-    // size="small"
+    topo: topo // size="small"
     ,
     value: size,
     disabled: disabled,
@@ -100,16 +105,20 @@ function NodeSizeButton(props) {
     settingRuntimeState: settingRuntimeState,
     onChange: function onChange(size) {
       topo.historyManager.beginTransaction();
+
       _onChange({
         name: 'width',
         value: size.width
       });
+
       _onChange({
         name: 'height',
         value: size.height
       });
+
       topo.historyManager.endTransaction();
     }
   })));
 }
+
 export default NodeSizeButton;

package/es/core/editor/components/Toolbar/widgets/SearchWidget.js

@@ -5,6 +5,7 @@ import React from 'react';
 import WidgetBox from "./WidgetBox";
 import SearchWidget from "../../../../viewer/components/titlebar/widgets/SearchWidget";
 import DropdownButton from "./components/DropdownButton";
+
 function TopoSearch(props) {
   var topo = props.topo;
   return /*#__PURE__*/React.createElement(DropdownButton, {
@@ -24,13 +25,16 @@ function TopoSearch(props) {
     }
   }));
 }
+
 function ToolbarSearchWidget(props) {
   var showLabel = props.showLabel,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u641C\u7D22",
     tooltip: "\u641C\u7D22",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(TopoSearch, otherProps));
 }
+
 export default ToolbarSearchWidget;

package/es/core/editor/components/Toolbar/widgets/WidgetBox.js

@@ -6,14 +6,16 @@ import classnames from 'classnames';
 import ButtonBox from "./components/ButtonBox";
 import Tooltip from "../components/Tooltip";
 import styles from "./WidgetBox.module.scss";
+
 function WidgetBox(props) {
   var label = props.label,
-    showLabel = props.showLabel,
-    tooltip = props.tooltip,
-    tooltipTitle = props.tooltipTitle,
-    disabled = props.disabled,
-    children = props.children,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      showLabel = props.showLabel,
+      tooltip = props.tooltip,
+      tooltipTitle = props.tooltipTitle,
+      disabled = props.disabled,
+      children = props.children,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   var button = /*#__PURE__*/React.createElement("div", _extends({
     disabled: disabled,
     className: styles.container
@@ -22,14 +24,17 @@ function WidgetBox(props) {
   }, children), showLabel !== false && /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.label, disabled ? styles.disabledLabel : styles.normalLabel)
   }, label));
+
   if (!tooltip) {
     return button;
   }
+
   return /*#__PURE__*/React.createElement(Tooltip, {
     trigger: button,
     title: tooltipTitle,
     align: "b"
   }, tooltip);
 }
+
 WidgetBox.ButtonBox = ButtonBox;
 export default WidgetBox;

package/es/core/editor/components/Toolbar/widgets/components/ArrowButton.js

@@ -6,9 +6,11 @@ import classNames from 'classnames';
 import styles from "./ArrowButton.module.scss";
 export default function ArrowButton(props) {
   var _classNames;
+
   var children = props.children,
-    active = props.active,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      active = props.active,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   return /*#__PURE__*/React.createElement("span", otherProps, children, /*#__PURE__*/React.createElement(_Icon, {
     type: "tree_fold_arrow",
     size: "xxs",

package/es/core/editor/components/Toolbar/widgets/components/ArrowPopup.js

@@ -2,24 +2,26 @@ import _Dropdown from "@alifd/next/es/dropdown";
 import React from 'react';
 import ArrowButton from "./ArrowButton";
 import styles from "./ArrowPopup.module.scss";
-
 /**
  * 箭头按钮浮层
  * @param {*} props 
  * @returns 
  */
+
 function ArrowPopup(props) {
   var label = props.label,
-    children = props.children;
+      children = props.children;
   var trigger = /*#__PURE__*/React.createElement(ArrowButton, null, label);
   return /*#__PURE__*/React.createElement(_Dropdown, {
     trigger: trigger,
     triggerType: "click"
   }, children);
 }
+
 ArrowPopup.Content = function (props) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.card
   }, props.children);
 };
+
 export default ArrowPopup;

package/es/core/editor/components/Toolbar/widgets/components/ButtonBox.js

@@ -6,14 +6,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from "./ButtonBox.module.scss";
+
 function ButtonBox(props) {
   var _classNames, _classNames2;
+
   var active = props.active,
-    disabled = props.disabled,
-    showArrow = props.showArrow,
-    children = props.children,
-    onClick = props.onClick,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      disabled = props.disabled,
+      showArrow = props.showArrow,
+      children = props.children,
+      onClick = props.onClick,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames[styles.disabled] = disabled, _classNames)),
     onClick: disabled ? undefined : onClick
@@ -23,6 +26,7 @@ function ButtonBox(props) {
     className: classNames(styles.icon, (_classNames2 = {}, _classNames2[styles.active] = active, _classNames2[styles.disabled] = disabled, _classNames2))
   })));
 }
+
 ButtonBox.propTypes = {
   showArrow: PropTypes.bool
 };