@riil-frontend/component-topology 2.4.3 → 2.4.8

package/es/core/components/TopoView/TopoView.module.scss

@@ -10,6 +10,10 @@
   flex: 1;
   overflow: hidden;
   position: relative;
+
+  &.viewPanelEditMode {
+    border-top: 1px solid #E6E7EB;
+  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题

package/es/core/components/TopoView/topoView.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import TopoContainer, { TopoEvent } from '@riil-frontend/component-topology-graph';
 import rlog from '@riil-frontend/component-topology-utils/es/utils/rlog';
 import useTopoEdit from "../../../hooks/useTopoEdit";
@@ -17,7 +18,7 @@ import styles from "./TopoView.module.scss";
 import Settings from "../../editor/components/settings/Settings";
 
 var TopoView = function TopoView(props) {
-  var _topoApp$options$edit;
+  var _classnames, _topoApp$options$edit;
 
   var engine = props.engine,
       topo = props.topo,
@@ -209,7 +210,7 @@ var TopoView = function TopoView(props) {
     topoEditApi: topoEditApi,
     onEnterEdit: onEnterEdit
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles.viewPanel
+    className: classnames(styles.viewPanel, (_classnames = {}, _classnames[styles.viewPanelEditMode] = isEditMode, _classnames))
   }, /*#__PURE__*/React.createElement(TopoContainer, {
     debugId: topoApp.debugId,
     data: tData,

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

@@ -1,6 +1,6 @@
 .titlebar {
   display: flex;
-  padding: 12px 16px;
+  padding: 16px;
 
   .left {
     flex: 1;
@@ -13,8 +13,6 @@
 
   &.titlebarEditMode {
     padding: 10px 16px;
-    box-shadow: 0px -1px 0px 0px #EBE8E8;
-    border-bottom: 1px solid #E6E7EB;
   }
 
 }
@@ -34,12 +32,4 @@
 
 .moreMenuButton {
   margin-left: 8px;
-  width: 28px;
-  height: 28px;
-
-  :global {
-    .next-menu-btn-arrow {
-      display: none;
-    }
-  }
 }

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.d.ts

@@ -1 +1,12 @@
-export default function NodeSizeInput(props: any): JSX.Element;
+export default NodeSizeInput;
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ */
+declare function NodeSizeInput(props: any): JSX.Element;
+declare namespace NodeSizeInput {
+    export namespace propTypes {
+        export const value: any;
+    }
+}

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

@@ -1,54 +1,155 @@
-import _NumberPicker from "@alifd/next/lib/number-picker";
-import _Field from "@alifd/next/lib/field";
+import _extends from "@babel/runtime/helpers/extends";
 import _Grid from "@alifd/next/lib/grid";
 import _Form from "@alifd/next/lib/form";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+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;
-export default function NodeSizeInput(props) {
-  var value = props.value,
-      _onChange = props.onChange;
-
-  var field = _Field.useField({
-    autoUnmount: false,
-    values: value,
-    onChange: function onChange(name, value) {
-      _onChange(field.getValues());
+var NODE_SIZE_LOCK = 'NODE_SIZE_LOCK';
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ */
+
+function NodeSizeInput(props) {
+  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) {
+      return 1;
+    }
+
+    if (val > 2000) {
+      return 2000;
     }
-  });
 
-  useEffect(function () {
-    field.setValues(value);
-  }, [value]);
+    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(attrValue / ratio);
+      } else {
+        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;
+  }
+
   return /*#__PURE__*/React.createElement(_Form, {
-    field: field,
     labelAlign: "top",
     component: "div"
   }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(Row, {
-    gutter: "16"
+    gutter: "0"
   }, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/React.createElement(_NumberPicker, {
-    name: "width",
+  }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
+    value: parseValue(value.width),
+    label: "\u5BBD:",
     min: 1,
     max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
+    },
+    onChange: function onChange(val) {
+      return handleChange('width', val);
     }
-  }))), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.lockBtn,
+    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,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/React.createElement(_NumberPicker, {
-    name: "height",
+  }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
+    value: parseValue(value.height),
+    label: "\u9AD8:",
     min: 1,
     max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
+    },
+    onChange: function onChange(val) {
+      return handleChange('height', val);
     }
   }))))));
 }
-;
+
+;
+NodeSizeInput.propTypes = {
+  value: PropTypes.object
+};
+export default NodeSizeInput;

package/es/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.module.scss

@@ -0,0 +1,5 @@
+.lockBtn {
+  height: 28px;
+  margin: 6px 10px 0 10px;
+  cursor: pointer;
+}

package/es/core/editor/components/settings/common/NodeSizeInput/NodeSizeNumberPicker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ * 最大最小值限制
+ */
+export default function NodeSizeNumberPicker(props: any): JSX.Element;

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

@@ -0,0 +1,73 @@
+import _NumberPicker from "@alifd/next/lib/number-picker";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown"];
+import React, { useState, useEffect } from 'react';
+
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ * 最大最小值限制
+ */
+export default function NodeSizeNumberPicker(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      min = props.min,
+      onBlur = props.onBlur,
+      onKeyDown = props.onKeyDown,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState(value),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  useEffect(function () {
+    setInputValue(value);
+  }, [value]);
+
+  var handleBlur = function handleBlur(e) {
+    if (inputValue !== value) {
+      onChange(inputValue);
+    }
+
+    onBlur && onBlur(e);
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 13 || e.keyCode === 27) {
+      if (inputValue !== value) {
+        onChange(inputValue);
+      }
+    }
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+
+  var handleChange = function handleChange(value, e) {
+    // 失去焦点最大最小值
+    if (e.type === 'blur') {
+      onChange(!value ? min : value);
+      return;
+    } // 加减号立即变更
+
+
+    if (e.triggerType === 'up' || e.triggerType === 'down') {
+      onChange(value);
+      return;
+    }
+
+    setInputValue(value);
+  };
+
+  return /*#__PURE__*/React.createElement(_NumberPicker, _extends({}, otherProps, {
+    value: inputValue,
+    min: min,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }));
+}
+;

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

@@ -100,7 +100,7 @@ export default function TextStyle(props) {
   }, /*#__PURE__*/React.createElement(_NumberPicker, {
     name: "fontSize",
     min: 8,
-    max: 36,
+    max: 100,
     style: {
       width: '100%',
       marginRight: 8

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

@@ -1,27 +1,18 @@
 import _Tab from "@alifd/next/lib/tab";
 import _Input from "@alifd/next/lib/input";
+import _Form from "@alifd/next/lib/form";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
-import _Radio from "@alifd/next/lib/radio";
 import _Collapse from "@alifd/next/lib/collapse";
 import _Select from "@alifd/next/lib/select";
-import _Grid from "@alifd/next/lib/grid";
-import _Form from "@alifd/next/lib/form";
 import React, { useState, useEffect } from 'react';
-import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
-import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
-import { getIconMap } from "../group/GroupNodeList/icon";
 import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
 import textStyles from "../../../../common/text.module.scss";
 import TopoTreeSelect from "./TopoTreeSelect";
 import NodeIconSelect from "./NodeIconSelect";
 import NodeRelateResourceButton from "./NodeRelateResourceButton";
-var FormItem = _Form.Item;
-var Row = _Grid.Row,
-    Col = _Grid.Col;
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
-var RadioGroup = _Radio.Group;
 
 function parseValues(values) {
   return _extends({}, values);
@@ -46,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({
@@ -144,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
@@ -152,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/editor/components/settings/view/BatchSetNodeSize.d.ts

@@ -0,0 +1 @@
+export default function BatchSetNodeSize(props: any): JSX.Element;

package/es/core/editor/components/settings/view/BatchSetNodeSize.js

@@ -0,0 +1,8 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
+export default function BatchSetNodeSize(props) {
+  return /*#__PURE__*/React.createElement(NodeSizeInput, {
+    value: {}
+  });
+}
+;

package/es/core/editor/components/settings/view/ViewPropertyView.js

@@ -1,25 +1,13 @@
+import _Form from "@alifd/next/lib/form";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
-import _Radio from "@alifd/next/lib/radio";
 import _Collapse from "@alifd/next/lib/collapse";
-import _Select from "@alifd/next/lib/select";
-import _Grid from "@alifd/next/lib/grid";
-import _Form from "@alifd/next/lib/form";
-import React, { useState, useEffect } from 'react';
-import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
-import GroupNodeList from "../group/GroupNodeList/GroupNodeList";
-import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
-import { getIconMap } from "../group/GroupNodeList/icon";
+import React, { useEffect } from 'react';
 import LayoutSettings from "../common/LayoutSettings";
 import LineType from "../common/LineType";
 import NodeAlignType from "../common/NodeAlignType";
-import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
-var FormItem = _Form.Item;
-var Row = _Grid.Row,
-    Col = _Grid.Col;
-var Option = _Select.Option;
-var CollapsePanel = _Collapse.Panel;
-var RadioGroup = _Radio.Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
+import BatchSetNodeSize from "./BatchSetNodeSize";
+var CollapsePanel = _Collapse.Panel; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
 
 var fontStyleUtil = {
   toMap: function toMap(font, prefix) {
@@ -113,5 +101,5 @@ export default function ViewPropertyView(props) {
     title: "\u56FE\u7247"
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8"
-  }, /*#__PURE__*/React.createElement(NodeSizeInput, null)))))));
+  }, /*#__PURE__*/React.createElement(BatchSetNodeSize, null)))))));
 }

package/es/models/topoMod.js

@@ -133,8 +133,6 @@ export default function (topoApp) {
           var _this2 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-            var _data$config;
-
             var id, data, linkTo, viewState, topoId;
             return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) {
@@ -142,7 +140,7 @@ export default function (topoApp) {
                   case 0:
                     id = playload.id, data = playload.data, linkTo = playload.linkTo;
                     viewState = playload.mode || playload.viewState || 'view';
-                    topoId = id || (data === null || data === void 0 ? void 0 : (_data$config = data.config) === null || _data$config === void 0 ? void 0 : _data$config.id);
+                    topoId = id || data.config.id;
 
                     _this2.update({
                       viewState: viewState,
@@ -151,34 +149,24 @@ export default function (topoApp) {
                       topoPermission: undefined
                     });
 
-                    if (id) {
-                      _context2.next = 7;
-                      break;
-                    }
-
-                    _this2.clearData();
-
-                    return _context2.abrupt("return");
-
-                  case 7:
-                    _context2.next = 9;
+                    _context2.next = 6;
                     return topoApp.open(topoId);
 
-                  case 9:
-                    _context2.next = 11;
+                  case 6:
+                    _context2.next = 8;
                     return _this2.initTopoData({
                       topoId: topoId,
                       data: data,
                       linkTo: linkTo
                     });
 
-                  case 11:
+                  case 8:
                     if (viewState === 'edit') {
                       // TODO 待优化进入编辑模式方式
                       _this2.enterEditMode();
                     }
 
-                  case 12:
+                  case 9:
                   case "end":
                     return _context2.stop();
                 }

package/es/topoCenter/store/topoCenter.js

@@ -189,10 +189,23 @@ export default {
                     viewState: viewState || 'view'
                   });
 
-                  _context4.next = 5;
+                  if (!id) {
+                    _context4.next = 8;
+                    break;
+                  }
+
+                  _context4.next = 6;
                   return dispatch.topoMod.openTopoPage(playload);
 
-                case 5:
+                case 6:
+                  _context4.next = 10;
+                  break;
+
+                case 8:
+                  _context4.next = 10;
+                  return dispatch.topoMod.clearData();
+
+                case 10:
                 case "end":
                   return _context4.stop();
               }

package/lib/core/components/TopoView/TopoView.module.scss

@@ -10,6 +10,10 @@
   flex: 1;
   overflow: hidden;
   position: relative;
+
+  &.viewPanelEditMode {
+    border-top: 1px solid #E6E7EB;
+  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题

package/lib/core/components/TopoView/topoView.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
 var _componentTopologyGraph = _interopRequireWildcard(require("@riil-frontend/component-topology-graph"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/utils/rlog"));
@@ -42,7 +44,7 @@ var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 var _Settings = _interopRequireDefault(require("../../editor/components/settings/Settings"));
 
 var TopoView = function TopoView(props) {
-  var _topoApp$options$edit;
+  var _classnames, _topoApp$options$edit;
 
   var engine = props.engine,
       topo = props.topo,
@@ -243,7 +245,7 @@ var TopoView = function TopoView(props) {
     topoEditApi: topoEditApi,
     onEnterEdit: onEnterEdit
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TopoViewModule["default"].viewPanel
+    className: (0, _classnames2["default"])(_TopoViewModule["default"].viewPanel, (_classnames = {}, _classnames[_TopoViewModule["default"].viewPanelEditMode] = isEditMode, _classnames))
   }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], {
     debugId: topoApp.debugId,
     data: tData,

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

@@ -1,6 +1,6 @@
 .titlebar {
   display: flex;
-  padding: 12px 16px;
+  padding: 16px;
 
   .left {
     flex: 1;
@@ -13,8 +13,6 @@
 
   &.titlebarEditMode {
     padding: 10px 16px;
-    box-shadow: 0px -1px 0px 0px #EBE8E8;
-    border-bottom: 1px solid #E6E7EB;
   }
 
 }
@@ -34,12 +32,4 @@
 
 .moreMenuButton {
   margin-left: 8px;
-  width: 28px;
-  height: 28px;
-
-  :global {
-    .next-menu-btn-arrow {
-      display: none;
-    }
-  }
 }