@riil-frontend/component-topology 2.12.0 → 2.12.4

package/lib/core/editor/components/settings/group/SettingTab/NodeIconSelect.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icon = require("../../common/GroupNodeList/icon");
+
+var _componentTopoIconSelect = _interopRequireDefault(require("@riil-frontend/component-topo-icon-select"));
+
+function NodeIconSelect(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  var iconGroups = (0, _icon.getIconGroups)(topo, 'node');
+  var newId = value;
+  var a = iconGroups[0].icons.filter(function (item) {
+    return newId.indexOf(item.oldId) !== -1;
+  });
+
+  if (a.length) {
+    newId = a[0].id;
+  }
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {};
+  });
+  return /*#__PURE__*/_react["default"].createElement(_componentTopoIconSelect["default"], {
+    value: newId,
+    iconList: iconGroups,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  });
+}
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(NodeIconSelect);
+
+exports["default"] = _default;

package/lib/core/editor/components/settings/group/SettingTab/Setting.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = GroupSetting;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NodeSizeInput = _interopRequireDefault(require("../../common/NodeSizeInput/NodeSizeInput"));
+
+var _NodeIconSelect = _interopRequireDefault(require("./NodeIconSelect"));
+
+var _GroupExpandSetting = _interopRequireDefault(require("./GroupExpandSetting"));
+
+var _useGroupExpand = _interopRequireDefault(require("../hooks/useGroupExpand"));
+
+var Option = _select["default"].Option;
+var CollapsePanel = _collapse["default"].Panel;
+
+function GroupSetting(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      _onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      group = props.group;
+
+  var field = _field["default"].useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      if (values[name] !== value) {
+        _onChange(name, value, newValues);
+      }
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValues(values);
+  }, [values]);
+  var groupExpand = (0, _useGroupExpand["default"])({
+    group: group
+  });
+  var expanded = groupExpand.expanded;
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u533A\u57DF\u540D\u79F0",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    name: "attrObject.name"
+  })), /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+    defaultExpandedKeys: ['显示设置'],
+    style: {
+      border: 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+    key: "\u663E\u793A\u8BBE\u7F6E",
+    title: "\u663E\u793A\u8BBE\u7F6E"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u9ED8\u8BA4\u663E\u793A\u65B9\u5F0F"
+  }, /*#__PURE__*/_react["default"].createElement(_GroupExpandSetting["default"], {
+    group: group,
+    expanded: expanded,
+    setExpanded: groupExpand.setExpanded
+  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u663E\u793A\u56FE\u7247"
+  }, /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {
+    name: "image",
+    topo: topo
+  })), /*#__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
+    },
+    onChange: function onChange(size) {
+      _onChange('width', size.width);
+
+      _onChange('height', size.height);
+    },
+    settingRuntimeState: settingRuntimeState
+  }))))));
+}

package/lib/core/editor/components/settings/group/hooks/useGroup.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useGroup;
+
+var _react = require("react");
+
+function useGroup(props) {
+  var topo = props.topo,
+      id = props.id;
+  var group = (0, _react.useMemo)(function () {
+    return topo.getDataModel().getDataById(id);
+  }, [id]);
+  return group;
+}

package/lib/core/editor/components/settings/group/hooks/useGroupExpand.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useGroupExpand;
+
+var _react = require("react");
+
+function useGroupExpand(props) {
+  var group = props.group; // TODO 缺少：绘图区双击展开折叠后，更新状态
+
+  var _useState = (0, _react.useState)(group.isExpanded()),
+      expanded = _useState[0],
+      _setExpanded = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    _setExpanded(group.isExpanded());
+  }, [group]);
+  return {
+    expanded: expanded,
+    setExpanded: function setExpanded(val) {
+      _setExpanded(val);
+
+      group.setExpanded(val);
+    }
+  };
+}

package/lib/core/editor/components/settings/layer/LayerSettingsForm.js

@@ -29,9 +29,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
 
-var _GroupNodeList = _interopRequireDefault(require("../group/GroupNodeList/GroupNodeList"));
+var _NodeList = _interopRequireDefault(require("./NodeList"));
 
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
+var _ResourceSelectButton = _interopRequireDefault(require("../common/GroupNodeList/ResourceSelectButton"));
 
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,
@@ -150,7 +150,7 @@ function LayerSettingsForm(props) {
         },
         resourceSelectComponent: editorProps === null || editorProps === void 0 ? void 0 : editorProps.layerResourceSelectComponent
       }))
-    }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_NodeList["default"], {
       topo: topo,
       group: values
     }));

package/lib/core/editor/components/settings/{group/GroupNodeList/GroupNodeList.js → layer/NodeList.js}

@@ -9,11 +9,11 @@ exports["default"] = GroupNodeList;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ResourceList = _interopRequireDefault(require("./ResourceList"));
+var _ResourceList = _interopRequireDefault(require("../common/GroupNodeList/ResourceList"));
 
-var _htElementUtils = require("../../../../../../utils/htElementUtils");
+var _htElementUtils = require("../../../../../utils/htElementUtils");
 
-var _icon = require("./icon");
+var _icon = require("../common/GroupNodeList/icon");
 
 function GroupNodeList(props) {
   var topo = props.topo,

package/lib/core/editor/components/settings/link/LinkPropertyView.js

@@ -29,11 +29,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
 
-var _GroupNodeList = _interopRequireDefault(require("../group/GroupNodeList/GroupNodeList"));
+var _GroupNodeList = _interopRequireDefault(require("../group/DataTab/GroupNodeList"));
 
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
+var _ResourceSelectButton = _interopRequireDefault(require("../common/GroupNodeList/ResourceSelectButton"));
 
-var _icon = require("../group/GroupNodeList/icon");
+var _icon = require("../common/GroupNodeList/icon");
 
 var _LineType = _interopRequireDefault(require("../common/LineType"));
 

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

@@ -7,7 +7,7 @@ exports["default"] = NodeIconSelect;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _icon = require("../group/GroupNodeList/icon");
+var _icon = require("../common/GroupNodeList/icon");
 
 var _componentTopoIconSelect = _interopRequireDefault(require("@riil-frontend/component-topo-icon-select"));
 

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _SettingsForm = _interopRequireDefault(require("./SettingsForm"));
+
+var _NodePropertyView = _interopRequireDefault(require("./node/NodePropertyView"));
+
+var _LayerSettingsForm = _interopRequireDefault(require("./layer/LayerSettingsForm"));
+
+var _TextPropertyView = _interopRequireDefault(require("./text/TextPropertyView"));
+
+var _LinkPropertyView = _interopRequireDefault(require("./link/LinkPropertyView"));
+
+var _ViewPropertyView = _interopRequireDefault(require("./view/ViewPropertyView"));
+
+var _GroupPropertyView = _interopRequireDefault(require("./group/GroupPropertyView"));
+
+var propertyPanelMap = {
+  // view: SettingsForm,
+  node: _NodePropertyView["default"],
+  layer: _LayerSettingsForm["default"],
+  text: _TextPropertyView["default"],
+  group: _GroupPropertyView["default"]
+};
+
+if (localStorage.getItem('topo.debug') === 'true') {
+  Object.assign(propertyPanelMap, {
+    line: _LinkPropertyView["default"],
+    view: _ViewPropertyView["default"]
+  });
+}
+
+var _default = propertyPanelMap;
+exports["default"] = _default;

package/lib/core/models/TopoApp.js

@@ -505,42 +505,54 @@ var TopoApp = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _enterEditMode = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
-      var topoDispatchers, editDispatchers, ciSetDoc, linkDynamicStyleDispatcher, iconManageDispatchers, topoTreeData;
+      var topoDispatchers, editDispatchers, iconManageDispatchers, ciSetDoc, linkDynamicStyleDispatcher;
       return _regenerator["default"].wrap(function _callee11$(_context11) {
         while (1) {
           switch (_context11.prev = _context11.next) {
             case 0:
-              _context11.next = 2;
-              return this.view.switchToEditMode();
-
-            case 2:
               topoDispatchers = this.store.getModelDispatchers('topoMod');
               topoDispatchers.update({
                 viewState: 'edit'
               });
+
+              if (!this.options.beforeSwitchToEditMode) {
+                _context11.next = 5;
+                break;
+              }
+
+              _context11.next = 5;
+              return this.options.beforeSwitchToEditMode();
+
+            case 5:
+              _context11.next = 7;
+              return this.view.switchToEditMode();
+
+            case 7:
               editDispatchers = this.store.getModelDispatchers('topoCreateMod');
               editDispatchers.switchToEditMode();
 
               if (this.options.onSwitchToEditMode) {
                 this.options.onSwitchToEditMode();
-              } // 每个节点的属性指标显示配置 TODO 每个节点都传了属性指标列表，待优化
+              } // 加载自定义图标
 
 
+              iconManageDispatchers = this.store.getModelDispatchers('iconManage');
+              iconManageDispatchers.loadIcons(); // 每个节点的属性指标显示配置 TODO 每个节点都传了属性指标列表，待优化
+
               ciSetDoc = this.store.getModelState('topoBizMod').ciSetDoc;
               this.view.topoClient.saveMarkSetting({
                 tagAndTipSet: ciSetDoc
               }); // 刷新链路动态样式
 
               linkDynamicStyleDispatcher = this.store.getModelDispatchers('linkDynamicStyle');
-              linkDynamicStyleDispatcher.execute(); // 加载自定义图标
-
-              iconManageDispatchers = this.store.getModelDispatchers('iconManage');
-              iconManageDispatchers.loadIcons(); // 加载关联拓扑图数据 FIXME 关联拓扑图时动态获取
-
-              topoTreeData = (0, _format.formatTreeDataSelect)(this.store.getModelState('topoTreeMod').treeData, this.id);
-              this.view.topoClient.setTopoTreeData(topoTreeData);
-
-            case 15:
+              linkDynamicStyleDispatcher.execute(); // 加载关联拓扑图数据 FIXME 关联拓扑图时动态获取
+              // const topoTreeData = formatTreeDataSelect(
+              //   this.store.getModelState('topoTreeMod').treeData,
+              //   this.id
+              // );
+              // this.view.topoClient.setTopoTreeData(topoTreeData);
+
+            case 16:
             case "end":
               return _context11.stop();
           }