@riil-frontend/component-topology 2.4.6 → 2.5.2

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//350/265/204/346/272/220/346/246/202/350/247/210/347/273/204/344/273/266.md

@@ -0,0 +1,9 @@
+---
+title: 资源概览组件
+order: 4
+---
+
+<br/>
+
+- 支持关闭内置数据，传入告警、指标数据
+- 支持获取需要显示的属性、指标范围

package/demo/API//345/270/203/345/261/200.md

@@ -0,0 +1,16 @@
+---
+title: 布局
+order: 5
+---
+
+```text
+//layoutName:
+//星型布局:'circular',均衡布局:'hierarchical',
+//树型布局：纵向：’towardsouth‘，横向’towardeast‘
+
+let layout = new ht.layout.AutoLayout(graphView);
+layout.layout(layoutName, function(){
+      //此处可以添加一些布局后的操作，如不需要，请忽略
+});
+
+```

package/es/core/components/titlebar/TitleBar.module.scss

@@ -3,8 +3,9 @@
   padding: 16px;
 
   .left {
+    display: flex;
     flex: 1;
-
+    align-items: center;
   }
 
   .right {

package/es/core/editor/components/settings/Settings.js

@@ -8,6 +8,7 @@ import TextPropertyView from "./text/TextPropertyView";
 import NodePropertyView from "./node/NodePropertyView";
 import ViewPropertyView from "./view/ViewPropertyView";
 import LinkPropertyView from "./link/LinkPropertyView";
+import useSettingRuntimeState from "./useSettingRuntimeState";
 
 function getElementType(selection) {
   var selectionElement = selection[0];
@@ -37,6 +38,7 @@ export default function Settings(props) {
       topoEditApi = props.topoEditApi,
       selection = props.selection,
       editorProps = props.editorProps;
+  var settingRuntimeState = useSettingRuntimeState();
   var selectionSize = selection.length;
   var selectionIds = selection.map(function (item) {
     return item.id;
@@ -112,7 +114,8 @@ export default function Settings(props) {
     selection: selection,
     values: values,
     onChange: updateElementProperty,
-    editorProps: editorProps
+    editorProps: editorProps,
+    settingRuntimeState: settingRuntimeState
   })));
 }
 ;

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

@@ -5,9 +5,11 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import NodeSizeNumberPicker from "./NodeSizeNumberPicker";
 import styles from "./NodeSizeInput.module.scss";
+import rlog from "@riil-frontend/component-topology-utils/es/utils/rlog";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;
+var NODE_SIZE_LOCK = 'NODE_SIZE_LOCK';
 /**
  * 节点大小组件
  *
@@ -15,12 +17,12 @@ var Row = _Grid.Row,
  */
 
 function NodeSizeInput(props) {
-  var value = props.value,
-      onChange = props.onChange;
-
-  var _useState = useState(false),
-      lock = _useState[0],
-      setLock = _useState[1];
+  var node = props.node,
+      value = props.value,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState;
+  var lock = settingRuntimeState.getAttr(NODE_SIZE_LOCK) !== false;
+  var RUNTIME_STATE_NAME_NODE_SIZE_INFO = "NODE_SIZE_INFO." + node.id;
 
   var handleValue = function handleValue(val) {
     if (!val || val < 1) {
@@ -34,22 +36,70 @@ function NodeSizeInput(props) {
     return parseInt(val);
   };
 
+  function initSizeRatio() {
+    var ratioInfo = {
+      ratio: value.width / value.height,
+      size: value
+    };
+    updateSizeRatioCurrentSize(ratioInfo);
+    rlog.debug('initSizeRatio', ratioInfo);
+    return ratioInfo;
+  }
+
+  function updateSizeRatioCurrentSize(ratioInfo) {
+    settingRuntimeState.setAttr(RUNTIME_STATE_NAME_NODE_SIZE_INFO, ratioInfo);
+    return ratioInfo;
+  }
+
+  function getSizeRatio() {
+    return settingRuntimeState.getAttr(RUNTIME_STATE_NAME_NODE_SIZE_INFO);
+  }
+
   var handleChange = function handleChange(name, attrValue) {
     var _extends2;
 
     var newSize = _extends({}, value, (_extends2 = {}, _extends2[name] = attrValue, _extends2));
 
     if (lock) {
+      var ratioInfo = getSizeRatio();
+
+      if (!ratioInfo) {
+        // 首次没有比例时，初始化当前节点比例
+        ratioInfo = initSizeRatio();
+        rlog.debug('首次没有比例时，初始化当前节点比例', ratioInfo);
+      } else {
+        // 修改后，非锁定方式调整比例（画图调整节点大小，未开启锁定修改），重新初始化比例
+        var prevSize = ratioInfo.size;
+
+        if (value.width !== prevSize.width || value.height !== prevSize.height) {
+          ratioInfo = initSizeRatio();
+          rlog.debug('修改后，重新初始化比例', ratioInfo);
+        }
+      }
+
+      var ratio = ratioInfo.ratio;
+
       if (name === 'width') {
-        newSize.height = handleValue(value.height / value.width * attrValue);
+        newSize.height = handleValue(attrValue / ratio);
       } else {
-        newSize.width = handleValue(value.width / value.height * attrValue);
+        newSize.width = handleValue(attrValue * ratio);
       }
+
+      updateSizeRatioCurrentSize({
+        ratio: ratio,
+        size: newSize
+      });
+      rlog.debug('按比例更新', name, attrValue, ratio, value, newSize, ratioInfo);
     }
 
     onChange(newSize);
   };
 
+  var switchLock = function switchLock() {
+    var isLock = !lock;
+    settingRuntimeState.setAttr(NODE_SIZE_LOCK, isLock);
+  };
+
   function parseValue(val) {
     return val ? parseInt(val) : val;
   }
@@ -76,16 +126,9 @@ function NodeSizeInput(props) {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles.lockBtn,
-    onClick: function onClick() {
-      setLock(!lock);
-    }
-  }, lock ? /*#__PURE__*/React.createElement("img", {
-    src: require("./img/icon_\u89E3\u9501.svg"),
-    title: "\u89E3\u9501",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: require("./img/icon_\u9501.svg"),
-    title: "\u9501\u5B9A",
+    onClick: switchLock
+  }, /*#__PURE__*/React.createElement("img", {
+    src: require(lock ? './img/icon_锁.svg' : './img/icon_解锁.svg'),
     alt: ""
   })), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
     required: true,

package/es/core/editor/components/settings/common/text/TextStyle.js

@@ -9,7 +9,7 @@ var Option = _Select.Option;
 
 function parseValue(value) {
   return {
-    fontFamily: value.font.fontFamily || '黑体',
+    fontFamily: value.font.fontFamily || 'Arial',
     fontSize: value.font.fontSize || 12,
     color: value.color || '#000000',
     fontStyleChecked: {
@@ -28,6 +28,11 @@ export default function TextStyle(props) {
     autoUnmount: false,
     values: parseValue(value),
     onChange: function onChange(name, value) {
+      // 解决问题：文本设置，当前字号8，选中字号，点击退格键，字号变为12了
+      if (name === 'fontSize' && !value) {
+        return;
+      }
+
       var values = field.getValues();
       var aValues = {
         color: values.color,

package/es/core/editor/components/settings/node/NodePropertyView.js

@@ -37,7 +37,7 @@ export default function NodePropertyView(props) {
       topoEditApi = props.topoEditApi,
       values = props.values,
       _onChange = props.onChange,
-      editorProps = props.editorProps;
+      settingRuntimeState = props.settingRuntimeState;
   var bindType = getBindType(values);
 
   var field = _Field.useField({
@@ -135,6 +135,7 @@ export default function NodePropertyView(props) {
     })), /*#__PURE__*/React.createElement(_Form.Item, {
       label: "\u56FE\u7247\u5C3A\u5BF8"
     }, /*#__PURE__*/React.createElement(NodeSizeInput, {
+      node: values,
       value: {
         width: values.width,
         height: values.height
@@ -143,7 +144,8 @@ export default function NodePropertyView(props) {
         _onChange('width', size.width);
 
         _onChange('height', size.height);
-      }
+      },
+      settingRuntimeState: settingRuntimeState
     }))))));
   }; // 未绑定资源的节点，根据参数控制是否可关联资源
 

package/es/core/editor/components/settings/useSettingRuntimeState.d.ts

@@ -0,0 +1,5 @@
+export default function _default(): {
+    state: {};
+    getAttr: (name: any) => any;
+    setAttr: (name: any, value: any) => void;
+};

package/es/core/editor/components/settings/useSettingRuntimeState.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { useState } from "react";
+export default function () {
+  var _useState = useState({}),
+      state = _useState[0],
+      setState = _useState[1];
+
+  function setAttr(name, value) {
+    var _extends2;
+
+    setState(_extends({}, state, (_extends2 = {}, _extends2[name] = value, _extends2)));
+  }
+
+  function getAttr(name) {
+    return state[name];
+  }
+
+  return {
+    state: state,
+    getAttr: getAttr,
+    setAttr: setAttr
+  };
+}

package/es/core/models/TopoApp.js

@@ -423,6 +423,10 @@ var TopoApp = /*#__PURE__*/function () {
     return refresh;
   }();
 
+  _proto.getGraphView = function getGraphView() {
+    return this.view.topoClient.getGraphView();
+  };
+
   _proto.getDataModel = function getDataModel() {
     return this.view.topoClient.getDataModel();
   };

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

@@ -1,9 +1,7 @@
-import _MenuButton from "@alifd/next/lib/menu-button";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ViewerTools from "./ViewerTools";
-import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
-var Item = _MenuButton.Item;
+import SearchWidget from "./widgets/SearchWidget";
 export default function TopoViewerTitleBar(props) {
   var topo = props.topo,
       showEditButton = props.showEditButton,
@@ -13,7 +11,7 @@ export default function TopoViewerTitleBar(props) {
     className: styles.titlebar
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.left
-  }, children || /*#__PURE__*/React.createElement(TitleWidget, {
+  }, children || /*#__PURE__*/React.createElement(SearchWidget, {
     topo: topo
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.right

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

@@ -4,16 +4,13 @@ import _Button from "@alifd/next/lib/button";
 import _Icon from "@alifd/next/lib/icon";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SearchWidget from "./widgets/SearchWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 import EditButton from "./widgets/EditButton";
 export default function ViewerTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SearchWidget, {
-    topo: topo
-  }), showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
+  return /*#__PURE__*/React.createElement("div", null, showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
     topo: topo
   }, props)), /*#__PURE__*/React.createElement(_Dropdown, {
     trigger: /*#__PURE__*/React.createElement(_Button, {

package/es/models/topoMod.js

@@ -24,7 +24,6 @@ export default function (topoApp) {
       topoPermission: undefined,
       viewState: 'view',
       // view, create, 2种模式
-      // leftAsideOpen: true, // 左侧树是否展开
       // lastRefresh: undefined,
       topoData: null,
       currentTopo: undefined,

package/es/style.js

@@ -18,7 +18,6 @@ import '@alifd/next/lib/select/style';
 import '@alifd/next/lib/balloon/style';
 import '@alifd/next/lib/grid/style';
 import '@alifd/next/lib/box/style';
-import '@alifd/next/lib/menu-button/style';
 import '@alifd/next/lib/dropdown/style';
 import '@alifd/next/lib/menu/style';
 import '@alifd/next/lib/tab/style';

package/es/topoCenter/models/TopoCenter.js

@@ -29,12 +29,6 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
           id: _this.id
         });
         topoModDispatchers.refreshTopoTree();
-
-        var topoCenterDispatchers = _this.store.getModelDispatchers('topoCenter');
-
-        topoCenterDispatchers.update({
-          leftAsideOpen: true
-        });
       }
     })) || this;
     var menuCommands = createMenuCommands(_assertThisInitialized(_this));

package/es/topoCenter/store/topoCenter.d.ts

@@ -2,7 +2,6 @@ declare namespace _default {
     export namespace state {
         export const loading: boolean;
         export const id: any;
-        export const leftAsideOpen: boolean;
         export const viewState: string;
     }
     export namespace reducers {

package/es/topoCenter/store/topoCenter.js

@@ -14,8 +14,6 @@ export default {
   state: {
     loading: true,
     id: undefined,
-    leftAsideOpen: true,
-    // 左侧树是否展开
     viewState: 'view' // view, create, 2种模式
 
   },
@@ -47,8 +45,7 @@ export default {
                   id = urlParams.id || topoModState.topoId || '';
 
                   _this.update({
-                    viewState: viewType,
-                    leftAsideOpen: viewType !== 'edit'
+                    viewState: viewType
                   }); // 加载功能操作权限
 
 

package/es/utils/htElementUtils.js

@@ -64,9 +64,11 @@ export function getEdges(dataModel) {
   return getElements(dataModel).filter(function (element) {
     return element.getClassName() === 'ht.Edge';
   }).map(function (element) {
+    var _element$getSource, _element$getTarget;
+
     return _extends({}, element.getAttrObject(), {
-      source: element.getSource().getTag(),
-      target: element.getTarget().getTag(),
+      source: (_element$getSource = element.getSource()) === null || _element$getSource === void 0 ? void 0 : _element$getSource.getTag(),
+      target: (_element$getTarget = element.getTarget()) === null || _element$getTarget === void 0 ? void 0 : _element$getTarget.getTag(),
       tag: element.getId()
     });
   });

package/lib/core/components/titlebar/TitleBar.module.scss

@@ -3,8 +3,9 @@
   padding: 16px;
 
   .left {
+    display: flex;
     flex: 1;
-
+    align-items: center;
   }
 
   .right {

package/lib/core/editor/components/settings/Settings.js

@@ -27,6 +27,8 @@ var _ViewPropertyView = _interopRequireDefault(require("./view/ViewPropertyView"
 
 var _LinkPropertyView = _interopRequireDefault(require("./link/LinkPropertyView"));
 
+var _useSettingRuntimeState = _interopRequireDefault(require("./useSettingRuntimeState"));
+
 function getElementType(selection) {
   var selectionElement = selection[0];
   var selectionSize = selection.length;
@@ -55,6 +57,7 @@ function Settings(props) {
       topoEditApi = props.topoEditApi,
       selection = props.selection,
       editorProps = props.editorProps;
+  var settingRuntimeState = (0, _useSettingRuntimeState["default"])();
   var selectionSize = selection.length;
   var selectionIds = selection.map(function (item) {
     return item.id;
@@ -128,7 +131,8 @@ function Settings(props) {
     selection: selection,
     values: values,
     onChange: updateElementProperty,
-    editorProps: editorProps
+    editorProps: editorProps,
+    settingRuntimeState: settingRuntimeState
   })));
 }
 

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -21,9 +21,12 @@ var _NodeSizeNumberPicker = _interopRequireDefault(require("./NodeSizeNumberPick
 
 var _NodeSizeInputModule = _interopRequireDefault(require("./NodeSizeInput.module.scss"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/utils/rlog"));
+
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,
     Col = _grid["default"].Col;
+var NODE_SIZE_LOCK = 'NODE_SIZE_LOCK';
 /**
  * 节点大小组件
  *
@@ -31,12 +34,12 @@ var Row = _grid["default"].Row,
  */
 
 function NodeSizeInput(props) {
-  var value = props.value,
-      onChange = props.onChange;
-
-  var _useState = (0, _react.useState)(false),
-      lock = _useState[0],
-      setLock = _useState[1];
+  var node = props.node,
+      value = props.value,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState;
+  var lock = settingRuntimeState.getAttr(NODE_SIZE_LOCK) !== false;
+  var RUNTIME_STATE_NAME_NODE_SIZE_INFO = "NODE_SIZE_INFO." + node.id;
 
   var handleValue = function handleValue(val) {
     if (!val || val < 1) {
@@ -50,22 +53,75 @@ function NodeSizeInput(props) {
     return parseInt(val);
   };
 
+  function initSizeRatio() {
+    var ratioInfo = {
+      ratio: value.width / value.height,
+      size: value
+    };
+    updateSizeRatioCurrentSize(ratioInfo);
+
+    _rlog["default"].debug('initSizeRatio', ratioInfo);
+
+    return ratioInfo;
+  }
+
+  function updateSizeRatioCurrentSize(ratioInfo) {
+    settingRuntimeState.setAttr(RUNTIME_STATE_NAME_NODE_SIZE_INFO, ratioInfo);
+    return ratioInfo;
+  }
+
+  function getSizeRatio() {
+    return settingRuntimeState.getAttr(RUNTIME_STATE_NAME_NODE_SIZE_INFO);
+  }
+
   var handleChange = function handleChange(name, attrValue) {
     var _extends2;
 
     var newSize = (0, _extends3["default"])({}, value, (_extends2 = {}, _extends2[name] = attrValue, _extends2));
 
     if (lock) {
+      var ratioInfo = getSizeRatio();
+
+      if (!ratioInfo) {
+        // 首次没有比例时，初始化当前节点比例
+        ratioInfo = initSizeRatio();
+
+        _rlog["default"].debug('首次没有比例时，初始化当前节点比例', ratioInfo);
+      } else {
+        // 修改后，非锁定方式调整比例（画图调整节点大小，未开启锁定修改），重新初始化比例
+        var prevSize = ratioInfo.size;
+
+        if (value.width !== prevSize.width || value.height !== prevSize.height) {
+          ratioInfo = initSizeRatio();
+
+          _rlog["default"].debug('修改后，重新初始化比例', ratioInfo);
+        }
+      }
+
+      var ratio = ratioInfo.ratio;
+
       if (name === 'width') {
-        newSize.height = handleValue(value.height / value.width * attrValue);
+        newSize.height = handleValue(attrValue / ratio);
       } else {
-        newSize.width = handleValue(value.width / value.height * attrValue);
+        newSize.width = handleValue(attrValue * ratio);
       }
+
+      updateSizeRatioCurrentSize({
+        ratio: ratio,
+        size: newSize
+      });
+
+      _rlog["default"].debug('按比例更新', name, attrValue, ratio, value, newSize, ratioInfo);
     }
 
     onChange(newSize);
   };
 
+  var switchLock = function switchLock() {
+    var isLock = !lock;
+    settingRuntimeState.setAttr(NODE_SIZE_LOCK, isLock);
+  };
+
   function parseValue(val) {
     return val ? parseInt(val) : val;
   }
@@ -92,16 +148,9 @@ function NodeSizeInput(props) {
     }
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: _NodeSizeInputModule["default"].lockBtn,
-    onClick: function onClick() {
-      setLock(!lock);
-    }
-  }, lock ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: require("./img/icon_\u89E3\u9501.svg"),
-    title: "\u89E3\u9501",
-    alt: ""
-  }) : /*#__PURE__*/_react["default"].createElement("img", {
-    src: require("./img/icon_\u9501.svg"),
-    title: "\u9501\u5B9A",
+    onClick: switchLock
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: require(lock ? './img/icon_锁.svg' : './img/icon_解锁.svg'),
     alt: ""
   })), /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(FormItem, {
     required: true,

package/lib/core/editor/components/settings/common/text/TextStyle.js

@@ -25,7 +25,7 @@ var Option = _select["default"].Option;
 
 function parseValue(value) {
   return {
-    fontFamily: value.font.fontFamily || '黑体',
+    fontFamily: value.font.fontFamily || 'Arial',
     fontSize: value.font.fontSize || 12,
     color: value.color || '#000000',
     fontStyleChecked: {
@@ -44,6 +44,11 @@ function TextStyle(props) {
     autoUnmount: false,
     values: parseValue(value),
     onChange: function onChange(name, value) {
+      // 解决问题：文本设置，当前字号8，选中字号，点击退格键，字号变为12了
+      if (name === 'fontSize' && !value) {
+        return;
+      }
+
       var values = field.getValues();
       var aValues = {
         color: values.color,

package/lib/core/editor/components/settings/node/NodePropertyView.js

@@ -59,7 +59,7 @@ function NodePropertyView(props) {
       topoEditApi = props.topoEditApi,
       values = props.values,
       _onChange = props.onChange,
-      editorProps = props.editorProps;
+      settingRuntimeState = props.settingRuntimeState;
   var bindType = getBindType(values);
 
   var field = _field["default"].useField({
@@ -157,6 +157,7 @@ function NodePropertyView(props) {
     })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
       label: "\u56FE\u7247\u5C3A\u5BF8"
     }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
+      node: values,
       value: {
         width: values.width,
         height: values.height
@@ -165,7 +166,8 @@ function NodePropertyView(props) {
         _onChange('width', size.width);
 
         _onChange('height', size.height);
-      }
+      },
+      settingRuntimeState: settingRuntimeState
     }))))));
   }; // 未绑定资源的节点，根据参数控制是否可关联资源
 

package/lib/core/editor/components/settings/useSettingRuntimeState.d.ts

@@ -0,0 +1,5 @@
+export default function _default(): {
+    state: {};
+    getAttr: (name: any) => any;
+    setAttr: (name: any, value: any) => void;
+};

package/lib/core/editor/components/settings/useSettingRuntimeState.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = _default;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("react");
+
+function _default() {
+  var _useState = (0, _react.useState)({}),
+      state = _useState[0],
+      setState = _useState[1];
+
+  function setAttr(name, value) {
+    var _extends2;
+
+    setState((0, _extends3["default"])({}, state, (_extends2 = {}, _extends2[name] = value, _extends2)));
+  }
+
+  function getAttr(name) {
+    return state[name];
+  }
+
+  return {
+    state: state,
+    getAttr: getAttr,
+    setAttr: setAttr
+  };
+}

package/lib/core/models/TopoApp.js

@@ -449,6 +449,10 @@ var TopoApp = /*#__PURE__*/function () {
     return refresh;
   }();
 
+  _proto.getGraphView = function getGraphView() {
+    return this.view.topoClient.getGraphView();
+  };
+
   _proto.getDataModel = function getDataModel() {
     return this.view.topoClient.getDataModel();
   };