@riil-frontend/component-topology 2.4.6 → 2.4.8

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/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/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/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/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.4.6",
+  "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.6/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.4.8/build/index.html",
   "gitHead": "8d9f286eb5da11dfadbef62890d74d2c2dd4d3a9"
 }