@riil-frontend/component-topology 2.4.3 → 2.4.8

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.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/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -5,11 +5,9 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = NodeSizeInput;
+exports["default"] = void 0;
 
-var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
-
-var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
 
@@ -17,54 +15,164 @@ var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _NodeSizeNumberPicker = _interopRequireDefault(require("./NodeSizeNumberPicker"));
+
+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';
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ */
 
 function NodeSizeInput(props) {
-  var value = props.value,
-      _onChange = props.onChange;
-
-  var field = _field["default"].useField({
-    autoUnmount: false,
-    values: value,
-    onChange: function onChange(name, value) {
-      _onChange(field.getValues());
+  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;
     }
-  });
 
-  (0, _react.useEffect)(function () {
-    field.setValues(value);
-  }, [value]);
+    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(attrValue / ratio);
+      } else {
+        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;
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
     labelAlign: "top",
     component: "div"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(Row, {
-    gutter: "16"
+    gutter: "0"
   }, /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
-    name: "width",
+  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], {
+    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["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(FormItem, {
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _NodeSizeInputModule["default"].lockBtn,
+    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,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
-    name: "height",
+  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], {
+    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["default"].object
+};
+var _default = NodeSizeInput;
+exports["default"] = _default;

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

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

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

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

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = NodeSizeNumberPicker;
+
+var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown"];
+
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ * 最大最小值限制
+ */
+function NodeSizeNumberPicker(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      min = props.min,
+      onBlur = props.onBlur,
+      onKeyDown = props.onKeyDown,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+
+  var _useState = (0, _react.useState)(value),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  (0, _react.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["default"].createElement(_numberPicker["default"], (0, _extends2["default"])({}, otherProps, {
+    value: inputValue,
+    min: min,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }));
+}
+
+;

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

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

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

@@ -11,28 +11,18 @@ var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
 var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
 
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
-
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
 var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
 
-var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
-
-var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
-
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
-
-var _icon = require("../group/GroupNodeList/icon");
-
 var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
 
 var _textModule = _interopRequireDefault(require("../../../../common/text.module.scss"));
@@ -43,12 +33,8 @@ var _NodeIconSelect = _interopRequireDefault(require("./NodeIconSelect"));
 
 var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateResourceButton"));
 
-var FormItem = _form["default"].Item;
-var Row = _grid["default"].Row,
-    Col = _grid["default"].Col;
 var Option = _select["default"].Option;
 var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group;
 
 function parseValues(values) {
   return (0, _extends2["default"])({}, values);
@@ -73,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({
@@ -171,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
@@ -179,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/editor/components/settings/view/BatchSetNodeSize.d.ts

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = BatchSetNodeSize;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
+
+function BatchSetNodeSize(props) {
+  return /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
+    value: {}
+  });
+}
+
+;

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

@@ -7,44 +7,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = ViewPropertyView;
 
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
-
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
-var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
-
-var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
-
-var _GroupNodeList = _interopRequireDefault(require("../group/GroupNodeList/GroupNodeList"));
-
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
-
-var _icon = require("../group/GroupNodeList/icon");
-
 var _LayoutSettings = _interopRequireDefault(require("../common/LayoutSettings"));
 
 var _LineType = _interopRequireDefault(require("../common/LineType"));
 
 var _NodeAlignType = _interopRequireDefault(require("../common/NodeAlignType"));
 
-var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
+var _BatchSetNodeSize = _interopRequireDefault(require("./BatchSetNodeSize"));
 
-var FormItem = _form["default"].Item;
-var Row = _grid["default"].Row,
-    Col = _grid["default"].Col;
-var Option = _select["default"].Option;
-var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
+var CollapsePanel = _collapse["default"].Panel; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
 
 var fontStyleUtil = {
   toMap: function toMap(font, prefix) {
@@ -138,5 +119,5 @@ function ViewPropertyView(props) {
     title: "\u56FE\u7247"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8"
-  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], null)))))));
+  }, /*#__PURE__*/_react["default"].createElement(_BatchSetNodeSize["default"], null)))))));
 }

package/lib/models/topoMod.js

@@ -154,8 +154,6 @@ function _default(topoApp) {
           var _this2 = this;
 
           return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-            var _data$config;
-
             var id, data, linkTo, viewState, topoId;
             return _regenerator["default"].wrap(function _callee2$(_context2) {
               while (1) {
@@ -163,7 +161,7 @@ function _default(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,
@@ -172,34 +170,24 @@ function _default(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/lib/topoCenter/store/topoCenter.js

@@ -200,10 +200,23 @@ var _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/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.4.3",
+  "version": "2.4.8",
   "description": "拓扑",
-  "files": [
-    "demo/",
-    "demo-mock/",
-    "lib/",
-    "es/",
-    "build/",
-    "public/"
-  ],
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "stylePath": "style.js",
   "scripts": {
     "start": "build-scripts start",
     "start:warch": "build-scripts start --watch",
@@ -26,6 +15,17 @@
     "stylelint": "stylelint \"**/*.{css,scss,less}\"",
     "lint": "npm run eslint && npm run stylelint"
   },
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "stylePath": "style.js",
+  "files": [
+    "demo/",
+    "demo-mock/",
+    "lib/",
+    "es/",
+    "build/",
+    "public/"
+  ],
   "keywords": [
     "ice",
     "react",
@@ -100,6 +100,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.4.3/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.4.8/build/index.html",
   "gitHead": "8d9f286eb5da11dfadbef62890d74d2c2dd4d3a9"
 }