@riil-frontend/component-topology 6.0.0-alpha.41 → 6.0.0-alpha.43

package/lib/core/editor/components/Toolbar/widgets/FontColorButton.js

@@ -27,30 +27,42 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function FontColorDropdown(props) {
   var onChange = props.onChange,
       topo = props.topo,
-      color = props.color,
-      background = props.background,
       opacity = props.opacity;
 
   var _useState = (0, _react.useState)(false),
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var backOpacityChange = function backOpacityChange(value) {
+  var onPickerFocus = function onPickerFocus() {
+    topo.historyManager.beginTransaction();
+  };
+
+  var onPickerBlur = function onPickerBlur() {
+    topo.historyManager.endTransaction();
+  };
+
+  var backOpacityChange = function backOpacityChange(value, type) {
+    if (type === 'select') onPickerFocus();
     onChange({
       opacity: value / 100
     });
+    if (type === 'select') onPickerBlur();
   };
 
-  var colorChang = function colorChang(value) {
+  var colorChang = function colorChang(value, type) {
+    if (type === 'select') onPickerFocus();
     onChange({
       color: value
     });
+    if (type === 'select') onPickerBlur();
   };
 
   var backgroundChang = function backgroundChang(value) {
+    onPickerFocus();
     onChange({
       background: value
     });
+    onPickerBlur();
   };
 
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
@@ -67,9 +79,16 @@ function FontColorDropdown(props) {
     className: _FontColorButtonModule["default"].content
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _FontColorButtonModule["default"].fontColor
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
-    onChange: colorChang
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
+    onChange: colorChang,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: _FontColorButtonModule["default"].backgroundColor
   }, /*#__PURE__*/_react["default"].createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/_react["default"].createElement("div", {
     className: _FontColorButtonModule["default"].backOpacity
@@ -81,11 +100,19 @@ function FontColorDropdown(props) {
     unit: "%",
     list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
     onChange: backOpacityChange,
-    defaultValue: opacity
-  })), /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
+    defaultValue: opacity * 100
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
     showClear: true,
-    onChange: backgroundChang
-  }))));
+    onChange: backgroundChang,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur
+  })))));
 }
 
 function FontColorButton(props) {
@@ -102,7 +129,6 @@ function FontColorButton(props) {
     background: style.background,
     opacity: style.opacity,
     onChange: function onChange(val) {
-      topo.historyManager.beginTransaction();
       setStyle(val);
       topo.historyManager.endTransaction();
     },

package/lib/core/editor/components/Toolbar/widgets/FontColorButton.module.scss

@@ -1,20 +1,20 @@
 .content {
-  height: 296px;
+  margin: 4px 0px 0px 6px;
  .fontColor{
   width: 100%;
-  height: 143px;//159px
+  margin-bottom: 16px;
   .colorPanelBox{
     padding: 9px;
     padding-top: 8px;
   }
   &>span{
     font-size: 12px;
-    color: black;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #4D6277;
     line-height: 17px;
    }
+   
  }
  .backgroundColor{
   width: 100%;
@@ -32,9 +32,8 @@
     line-height: 17px;
    }
    .backOpacity{
-    margin-top: 2px;
+    margin-top: 5px;
     margin-bottom: 5px;
-    margin-left: 11px;
     line-height: 8px;
     display: flex;
     flex-direction: row;

package/lib/core/editor/components/Toolbar/widgets/FontStyleButton.js

@@ -74,7 +74,7 @@ function FontStyleButton(props) {
       setValue = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
   (0, _react.useEffect)(function () {
     var isAllText = !selection.filter(function (ele) {
       return !(0, _htElementUtils.isText)(ele);

package/lib/core/editor/components/Toolbar/widgets/Layout/index.js

@@ -34,7 +34,7 @@ function Layout(props) {
       setLayout = _useState[1]; // 选中的元素
 
 
-  var selectionElements = topo.selectionManager.useHtSelection();
+  var selectionElements = topo.selectionModel.useHtSelection();
 
   var _topo$store$useModelS = topo.store.useModelState('selection'),
       selection = _topo$store$useModelS.selection;
@@ -102,7 +102,7 @@ function LayoutWidget(props) {
   // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
   // type为auto且selection.length==0时可以点击布局 
 
-  var selectionElements = topo.selectionManager.useHtSelection();
+  var selectionElements = topo.selectionModel.useHtSelection();
   var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
 
   var disabled = (0, _react.useMemo)(function () {

package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -53,7 +53,7 @@ function NodeAlignWidget(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
 
   var setSpace = function setSpace(type, num) {
     topo.historyManager.beginTransaction(); // eslint-disable-next-line no-shadow
@@ -87,6 +87,13 @@ function NodeAlignWidget(props) {
       setLeftInputVal();
       setRightInputVal();
       setDistributionDisabled(nodes.length <= 2);
+
+      if (nodes.length === 2) {
+        var h = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'h')[0];
+        var v = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'v')[0];
+        setLeftInputVal(h * 1 > 0 ? h : 0);
+        setRightInputVal(v * 1 > 0 ? v : 0);
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [graphLoaded, selection]);

package/lib/core/editor/components/Toolbar/widgets/NodeImageButton/NodeImageButton.js

@@ -42,7 +42,7 @@ function NodeImageButton(props) {
       setImgVal = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
   (0, _react.useEffect)(function () {
     var nodes = selection.filter(function (ele) {
       return (0, _htElementUtils.isGroup)(ele) || (0, _htElementUtils.isNode)(ele);

package/lib/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js

@@ -46,7 +46,7 @@ function NodeSizeButton(props) {
       setSize = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   var settingRuntimeState = (0, _useSettingRuntimeState["default"])();
   (0, _react.useEffect)(function () {
     var elements = selection.map(function (item) {

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/ElementTextStyleSetting.js

@@ -29,7 +29,7 @@ function ElementTextStyleSetting(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   var htSelection = (0, _react.useMemo)(function () {
     if (!selection.length) {
       return [];

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/textStyleSettingRouter.js

@@ -17,7 +17,7 @@ function textStyleSettingRouter(Component, options) {
   var names = (options === null || options === void 0 ? void 0 : options.names) || [];
   return function TextStyleSettingButton(props) {
     var topo = props.topo;
-    var selection = topo.selectionManager.useHtSelection();
+    var selection = topo.selectionModel.useHtSelection();
     var Widget = !selection.length ? _GlobalTagStyleSetting["default"] : _ElementTextStyleSetting["default"];
     return /*#__PURE__*/_react["default"].createElement(Widget, (0, _extends2["default"])({
       Component: Component

package/lib/core/editor/components/settings/CloseablePanel.module.scss

@@ -1,9 +1,21 @@
+@import '~@alifd/next/variables.scss';
+
+
 .panel {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: #FFFFFF;
+
+  
+  :global {
+    .#{$css-prefix}drawer-header {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
 }
 .body {
   flex: 1;
+  overflow: auto;
 }

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

@@ -3,21 +3,25 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = PropertyView;
+exports["default"] = PropertyPanel;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CloseablePanel = _interopRequireDefault(require("./CloseablePanel"));
 
-var _OpenPropertyPanelListener = _interopRequireDefault(require("./OpenPropertyPanelListener"));
+var _PropertyViewManager = _interopRequireDefault(require("./core/PropertyViewManager"));
 
 var _Settings = _interopRequireDefault(require("./Settings"));
 
 var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
 
-function PropertyView(props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function PropertyPanel(props) {
   var _classNames;
 
   var topo = props.topo,
@@ -35,37 +39,40 @@ function PropertyView(props) {
       topoEditDispatchers = _topo$store$useModel[1];
 
   var propertyPanelVisible = topoEditState.propertyPanelVisible;
+  var propertyViewManager = (0, _react.useMemo)(function () {
+    return new _PropertyViewManager["default"](topo);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (graphLoaded) {
+      propertyViewManager.init();
+    }
 
-  if (!graphLoaded) {
-    return null;
-  }
+    return function () {
+      propertyViewManager.destroy();
+    };
+  }, [graphLoaded, propertyViewManager]);
 
   var renderContent = function renderContent() {
     if (!propertyPanelVisible) {
       return null;
     }
 
-    return /*#__PURE__*/_react["default"].createElement(_OpenPropertyPanelListener["default"], {
-      topo: topo
-    }, /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
       topo: topo,
+      selection: selection,
+      propertyViewManager: propertyViewManager,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
-      selection: selection,
       editorProps: editorProps
-    }));
+    });
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_SettingsModule["default"].settingsPanel, (_classNames = {}, _classNames[_SettingsModule["default"].settingsPanelHide] = !propertyPanelVisible, _classNames))
+    className: (0, _classnames["default"])(_SettingsModule["default"].propertyPanel, (_classNames = {}, _classNames[_SettingsModule["default"].hide] = !propertyPanelVisible, _classNames))
   }, /*#__PURE__*/_react["default"].createElement(_CloseablePanel["default"], {
     title: "\u6570\u636E\u5C5E\u6027",
     onClose: function onClose() {
-      topoEditDispatchers.update({
-        propertyPanelVisible: false
-      });
+      propertyViewManager.close();
     }
-  }, /*#__PURE__*/_react["default"].createElement(_OpenPropertyPanelListener["default"], {
-    topo: topo
-  }, renderContent())));
+  }, renderContent()));
 }

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

@@ -3,109 +3,74 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = Settings;
+exports["default"] = PropertyViewContainer;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _htElementDataUtil = require("../../../../utils/htElementDataUtil");
-
-var _propertyViews = _interopRequireDefault(require("./propertyViews"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useSettingRuntimeState = _interopRequireDefault(require("./useSettingRuntimeState"));
 
-var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
+var _updateElementProperty = _interopRequireDefault(require("./core/updateElementProperty"));
 
-function getElementType(selection) {
-  var selectionElement = selection[0];
-  var selectionSize = selection.length;
-  var elementType;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-  if (!selectionSize) {
-    // 未选
-    elementType = "view";
-  } else if (selectionSize >= 2) {
-    // 多选
-    elementType = "multiple";
-  } else if ((0, _htElementDataUtil.isGroup)(selectionElement)) {
-    elementType = "group";
-  } else if (selectionElement.attrObject.topLeftText) {
-    // TODO 临时方式
-    elementType = "box";
-  } else if ((0, _htElementDataUtil.isNode)(selectionElement)) {
-    elementType = "node";
-  } else if ((0, _htElementDataUtil.isEdge)(selectionElement)) {
-    elementType = "edge";
-  } else if ((0, _htElementDataUtil.isLayer)(selectionElement)) {
-    // 分层
-    elementType = "layer";
-  } else if ((0, _htElementDataUtil.isText)(selectionElement)) {
-    elementType = "text";
-  }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  return elementType;
+function buildElementValues(selection) {
+  var values = (0, _extends2["default"])({}, selection[0]);
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
+  attrTypes.forEach(function (type) {
+    Object.keys(values[type] || {}).forEach(function (key) {
+      values[type + "." + key] = values[type][key];
+    });
+  });
+  return values;
 }
 
-function Settings(props) {
+function PropertyViewContainer(props) {
   var topo = props.topo,
       topoShowType = props.topoShowType,
       topoEditApi = props.topoEditApi,
       selection = props.selection,
-      editorProps = props.editorProps;
-  var settingRuntimeState = (0, _useSettingRuntimeState["default"])(); // TODO 待优化
-
-  var updateElementProperty = function updateElementProperty(name, value) {
-    // const element = topo.getDataModel().getDataById(selection[0].id);
-    var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
-
-    if (name.startsWith("attrObject.")) {
-      element.setAttr(name.replace("attrObject.", ""), value);
-    } else if (name.startsWith("position.")) {
-      element.setPosition(name.replace("position.", ""), value);
-    } else if (name.startsWith("styleMap.")) {
-      element.setStyle(name.replace("styleMap.", ""), value);
-    } else if (name === "name") {
-      element.setName(value);
-    } else if (name === "width") {
-      element.setWidth(value);
-    } else if (name === "height") {
-      element.setHeight(value);
-    } else if (name === "image") {
-      element.setImage(value);
-    } else if (name === "layout") {
-      // console.info("element----layout", element, value);
-      var layouType = value.id === "toward" ? "" + value.id + value.options.subId : value.id;
-      topo.getHtTopo().layoutInContainer(layouType);
-    }
-  };
-
-  var elementType = getElementType(selection);
-  var PropertyView = _propertyViews["default"][elementType];
+      editorProps = props.editorProps,
+      propertyViewManager = props.propertyViewManager;
+  var settingRuntimeState = (0, _useSettingRuntimeState["default"])();
+  var selectionElements = (0, _react.useMemo)(function () {
+    return topo.selectionModel.getSelection();
+  }, [selection]);
+  var PropertyView = propertyViewManager.getPropertyView(selection); // 不建议使用，直接使用ht元素对象。待优化
+
+  var singleElementValues = (0, _react.useMemo)(function () {
+    return selection.length === 1 ? buildElementValues(selection) : undefined;
+  }, [selection]);
 
   if (!PropertyView) {
+    propertyViewManager.close();
     return null;
   }
 
-  var attrTypes = ["attrObject", "position", "styleMap"];
-  var values = (0, _extends2["default"])({}, selection[0]);
-  attrTypes.forEach(function (type) {
-    Object.keys(values[type] || {}).forEach(function (key) {
-      values[type + "." + key] = values[type][key];
-    });
-  });
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _SettingsModule["default"].content
-  }, /*#__PURE__*/_react["default"].createElement(PropertyView, {
-    type: elementType,
+  var elementProps = {};
+
+  if (selection.length === 1) {
+    elementProps = {
+      selectionElement: selectionElements[0],
+      values: singleElementValues
+    };
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(PropertyView, (0, _extends2["default"])({
     topo: topo,
+    selection: selection,
+    selectionElements: selectionElements,
     topoShowType: topoShowType,
     topoEdit: topoEditApi,
     topoEditApi: topoEditApi,
-    selection: selection,
-    values: values,
-    onChange: updateElementProperty,
-    editorProps: editorProps,
+    editorProps: editorProps
+  }, elementProps, {
+    onChange: function onChange(name, value) {
+      (0, _updateElementProperty["default"])(topo, name, value);
+    },
     settingRuntimeState: settingRuntimeState
   }));
 }

package/lib/core/editor/components/settings/Settings.module.scss

@@ -1,6 +1,6 @@
 @import '~@alifd/next/variables.scss';
 
-.settingsPanel {
+.propertyPanel {
   width: 280px;
   height: 100%;
   position: absolute;
@@ -14,7 +14,7 @@
   overflow: hidden;
   transition: width .1s linear;
 
-  &.settingsPanelHide {
+  &.hide {
     width: 0;
     border-left: none;
   }
@@ -74,11 +74,3 @@
     align-items: center;
   }
 }
-
-.content {
-  flex: 1;
-  background: #FFFFFF;
-  overflow: auto;
-  // padding-bottom: 12px;
-
-}

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _propertyViews = _interopRequireDefault(require("../propertyViews"));
+
+var _getPropertyViewType = _interopRequireDefault(require("./getPropertyViewType"));
+
+var PropertyViewManager = /*#__PURE__*/function () {
+  function PropertyViewManager(topo) {
+    this.viewMap = _propertyViews["default"];
+    this.topo = void 0;
+    this.getPropertyViewType = _getPropertyViewType["default"];
+    this.topo = topo;
+    this.open = this.open.bind(this);
+  }
+
+  var _proto = PropertyViewManager.prototype;
+
+  _proto.updateViews = function updateViews(viewMap) {
+    Object.assign(this.viewMap, viewMap);
+  };
+
+  _proto.init = function init() {
+    var notifier = this.topo.getHtTopo().getNotifier();
+    notifier.on('topo_element_double_click', this.open);
+  };
+
+  _proto.destroy = function destroy() {
+    var notifier = this.topo.getHtTopo().getNotifier();
+    notifier.off('topo_element_double_click', this.open);
+  };
+
+  _proto.open = function open() {
+    var view = this.getPropertyView();
+
+    if (!view) {
+      return;
+    }
+
+    var topoEditDispatchers = this.topo.store.getModelDispatchers('topoEdit');
+    topoEditDispatchers.update({
+      propertyPanelVisible: true
+    });
+  };
+
+  _proto.close = function close() {
+    var topoEditDispatchers = this.topo.store.getModelDispatchers('topoEdit');
+    topoEditDispatchers.update({
+      propertyPanelVisible: false
+    });
+  };
+
+  _proto.getPropertyView = function
+    /* selection */
+  getPropertyView() {
+    var selection = this.topo.selectionModel.getSelection();
+    var elementType = (0, _getPropertyViewType["default"])(selection);
+    var PropertyView = this.viewMap[elementType];
+    return PropertyView;
+  };
+
+  return PropertyViewManager;
+}();
+
+var _default = PropertyViewManager;
+exports["default"] = _default;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _htElementUtils = require("../../../../../utils/htElementUtils");
+
+function getPropertyViewType(selection) {
+  var selectionElement = selection[0];
+  var selectionSize = selection.length;
+  var viewType;
+
+  if (!selectionSize) {
+    // 未选
+    viewType = 'view';
+  } else if (selectionSize >= 2) {
+    // 多选
+    viewType = 'multiple';
+  } else if ((0, _htElementUtils.isText)(selectionElement)) {
+    viewType = 'text';
+  } else if ((0, _htElementUtils.isGroup)(selectionElement)) {
+    viewType = 'group';
+  } else if (selectionElement.a('type') === 'box') {
+    viewType = 'box';
+  } else if ((0, _htElementUtils.isNode)(selectionElement)) {
+    viewType = 'node';
+  } else if ((0, _htElementUtils.isEdgeGroupAgent)(selectionElement)) {
+    viewType = 'edgeGroup';
+  } else if ((0, _htElementUtils.isEdge)(selectionElement)) {
+    viewType = 'edge';
+  } else if ((0, _htElementUtils.isLayer)(selectionElement)) {
+    // 分层
+    viewType = 'layer';
+  }
+
+  return viewType;
+}
+
+var _default = getPropertyViewType;
+exports["default"] = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = updateElementProperty;
+
+function updateElementProperty(topo, name, value) {
+  // const element = topo.getDataModel().getDataById(selection[0].id);
+  var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
+
+  if (name.startsWith('attrObject.')) {
+    element.setAttr(name.replace('attrObject.', ''), value);
+  } else if (name.startsWith('position.')) {
+    element.setPosition(name.replace('position.', ''), value);
+  } else if (name.startsWith('styleMap.')) {
+    element.setStyle(name.replace('styleMap.', ''), value);
+  } else if (name === 'name') {
+    element.setName(value);
+  } else if (name === 'width') {
+    element.setWidth(value);
+  } else if (name === 'height') {
+    element.setHeight(value);
+  } else if (name === 'image') {
+    element.setImage(value);
+  }
+}
+
+;