@riil-frontend/component-topology 6.0.0-alpha.31 → 6.0.0-alpha.32

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["Component"];
+import React, { useMemo } from 'react';
+import { setGlobalTagStyle, useValues } from "./globalTag";
+
+function GlobalTagStyleSetting(props) {
+  var topo = props.topo;
+
+  var Component = props.Component,
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var values = useValues(topo);
+  var setStyle = useMemo(function () {
+    return function (style) {
+      return setGlobalTagStyle(topo, style);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    style: values,
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+export default GlobalTagStyleSetting;

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/globalTag.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+var defaultStyle = {
+  color: '#AFB9C2',
+  fontFamily: '微软雅黑'
+};
+export function useValues(topo) {
+  var displayConfigState = topo.store.useModelState('displayConfig');
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  return {
+    color: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.color) || defaultStyle.color,
+    fontFamily: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontFamily) || defaultStyle.fontFamily,
+    fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize
+  };
+}
+export var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
+  var _topo$store$getModel = topo.store.getModel('displayConfig'),
+      displayConfigState = _topo$store$getModel[0],
+      displayConfigDispatchers = _topo$store$getModel[1];
+
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+
+  var globalNodeLabelStyle = _extends({}, nodeLabelStyle, styleData);
+
+  topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+
+  var globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, styleData);
+
+  topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+  displayConfigDispatchers.update({
+    nodeLabelStyle: globalNodeLabelStyle,
+    defaultEdgeLabelStyle: globalEdgeTagStyle
+  });
+};
+export function setStyle() {}

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

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ElementTextStyleSetting from "./ElementTextStyleSetting/ElementTextStyleSetting";
+import GlobalTagStyleSetting from "./GlobalTagStyleSetting/GlobalTagStyleSetting";
+
+function textStyleSettingRouter(Component, options) {
+  return function TextStyleSettingButton(props) {
+    var topo = props.topo;
+    var selection = topo.selectionManager.useHtSelection();
+    var Widget = !selection.length ? GlobalTagStyleSetting : ElementTextStyleSetting;
+    return /*#__PURE__*/React.createElement(Widget, _extends({
+      Component: Component
+    }, props));
+  };
+}
+
+export default textStyleSettingRouter;

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
-import Settings from "./Settings";
-import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
+import React from 'react';
 import CloseablePanel from "./CloseablePanel";
+import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
+import Settings from "./Settings";
 import styles from "./Settings.module.scss";
 export default function PropertyView(props) {
   var _classNames;
@@ -28,6 +28,10 @@ export default function PropertyView(props) {
   }
 
   var renderContent = function renderContent() {
+    if (!propertyPanelVisible) {
+      return null;
+    }
+
     return /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
       topo: topo
     }, /*#__PURE__*/React.createElement(Settings, {
@@ -48,5 +52,7 @@ export default function PropertyView(props) {
         propertyPanelVisible: false
       });
     }
-  }, renderContent()));
+  }, /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
+    topo: topo
+  }, renderContent())));
 }

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

@@ -8,7 +8,8 @@ var fontStyleUtil = {
     var arr = font.trim().split(' ');
     var bold = font.indexOf('bold') > -1;
     var italic = font.indexOf('italic') > -1;
-    var fontFamily, fontSize;
+    var fontFamily;
+    var fontSize;
 
     if (arr.length) {
       fontFamily = arr[arr.length - 1];
@@ -29,15 +30,15 @@ var fontStyleUtil = {
   build: function build(style) {
     var font = '';
 
-    if (style.font.bold) {
+    if (style.bold) {
       font += 'bold ';
     }
 
-    if (style.font.italic) {
+    if (style.italic) {
       font += 'italic ';
     }
 
-    return "" + font + style.font.fontSize + "px " + style.font.fontFamily;
+    return "" + font + style.fontSize + "px " + style.fontFamily;
   },
   getFontStyleMap: function getFontStyleMap(obj, prefix) {
     var map = {};

package/es/core/editor/components/settings/propertyViews/text/TextPropertyView.js

@@ -37,7 +37,7 @@ export default function TextPropertyView(props) {
 
         _onChange('styleMap.label.color', value.color, newValues);
 
-        var font = fontStyleUtil.build(value);
+        var font = fontStyleUtil.build(value.font);
 
         _onChange('styleMap.text.font', font, newValues);
 

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.31" === 'string' ? "6.0.0-alpha.31" : null;
+var version = typeof "6.0.0-alpha.32" === 'string' ? "6.0.0-alpha.32" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/editor/components/Toolbar/hooks/textStyleSetting/EmptySetting.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useValues = useValues;
+
+function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/lib/core/editor/components/Toolbar/hooks/textStyleSetting/edgeTagSetting.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useValues = useValues;
+
+function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/lib/core/editor/components/Toolbar/hooks/textStyleSetting/globalTag.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.setGlobalTagStyle = void 0;
+exports.setStyle = setStyle;
+exports.useValues = useValues;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var defaultStyle = {
+  color: '#AFB9C2',
+  fontFamily: '微软雅黑'
+};
+
+function useValues(topo) {
+  var displayConfigState = topo.store.useModelState('displayConfig');
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  return {
+    color: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.color) || defaultStyle.color,
+    fontFamily: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontFamily) || defaultStyle.fontFamily,
+    fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize
+  };
+}
+
+var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
+  var _topo$store$getModel = topo.store.getModel('displayConfig'),
+      displayConfigState = _topo$store$getModel[0],
+      displayConfigDispatchers = _topo$store$getModel[1];
+
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  var globalNodeLabelStyle = (0, _extends2["default"])({}, nodeLabelStyle, styleData);
+  topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+  var globalEdgeTagStyle = (0, _extends2["default"])({}, defaultEdgeLabelStyle, styleData);
+  topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+  displayConfigDispatchers.update({
+    nodeLabelStyle: globalNodeLabelStyle,
+    defaultEdgeLabelStyle: globalEdgeTagStyle
+  });
+};
+
+exports.setGlobalTagStyle = setGlobalTagStyle;
+
+function setStyle() {}

package/lib/core/editor/components/Toolbar/hooks/textStyleSetting/nodeTagSetting.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useValues = useValues;
+
+function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/lib/core/editor/components/Toolbar/hooks/textStyleSetting/text.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useValues = useValues;
+
+function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/lib/core/editor/components/Toolbar/hooks/useFontStyleSetting.js

@@ -1,53 +1,77 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _htElementDataUtil = require("../../../../../utils/htElementDataUtil");
 
 var _htElementUtils = require("../../../../../utils/htElementUtils");
 
+var globalTagSetting = _interopRequireWildcard(require("./textStyleSetting/globalTag"));
+
+var EmptySetting = _interopRequireWildcard(require("./textStyleSetting/EmptySetting"));
+
 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 getElementType(element) {
+  if ((0, _htElementUtils.isNode)(element)) {
+    return 'nodeTag';
+  } else if ((0, _htElementUtils.isGroup)(element)) {
+    return 'group';
+  } else if ((0, _htElementDataUtil.isText)(element)) {
+    return 'text';
+  } else if ((0, _htElementUtils.isLayer)(element)) {
+    return 'layer';
+  }
+
+  return null;
+}
+
+function getType(selectionElements) {
+  if (!selectionElements.length) {
+    return 'globalTag';
+  } else if (selectionElements.length === 1) {
+    var element = selectionElements[0];
+    return getElementType(element);
+  }
+
+  return null;
+}
+
+var useValuesHookMap = {
+  globalTag: globalTagSetting.useValues,
+  empty: EmptySetting.useValues
+};
+
+function useValues(topo, selection) {
+  var type = getType(selection);
+  var useValuesHandle = useValuesHookMap[type] || useValuesHookMap.empty;
+  var values = useValuesHandle(topo, selection);
+  return values;
+}
+
+var elementSetStyleMap = {};
+
 function useFontStyleSetting(props) {
   var topo = props.topo;
-  var selectionElements = topo.selectionManager.useHtSelection();
-  var buttonEnabled = true; // 全局配置
-
-  var _topo$store$useModel = topo.store.useModel('displayConfig'),
-      displayConfigState = _topo$store$useModel[0],
-      displayConfigDispatchers = _topo$store$useModel[1];
-
-  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
-      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
-
-  var setGlobalTagStyle = function setGlobalTagStyle(styleData) {
-    var globalNodeLabelStyle = (0, _extends2["default"])({}, nodeLabelStyle, styleData);
-    topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
-    var globalEdgeTagStyle = (0, _extends2["default"])({}, defaultEdgeLabelStyle, styleData);
-    topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
-    displayConfigDispatchers.update({
-      nodeLabelStyle: globalNodeLabelStyle,
-      defaultEdgeLabelStyle: globalEdgeTagStyle
-    });
-  };
+  var selection = topo.selectionManager.useHtSelection();
+  var buttonEnabled = true; // const values = useValues(topo, selection)
+
+  var values = {};
 
   var setStyle = function setStyle(styleData) {
     topo.historyManager.beginTransaction(); // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
 
-    if (!selectionElements.length) {
-      setGlobalTagStyle(styleData);
+    if (!selection.length) {
+      globalTagSetting.setGlobalTagStyle(topo, styleData);
     } else {
-      selectionElements.forEach(function (element) {
-        if ((0, _htElementUtils.isNode)(element)) {} else if ((0, _htElementUtils.isGroup)(element)) {} else if ((0, _htElementDataUtil.isText)(element)) {} else if ((0, _htElementUtils.isLayer)(element)) {}
+      selection.forEach(function (element) {
+        var elementType = getElementType(element);
       });
     }
 
@@ -55,7 +79,9 @@ function useFontStyleSetting(props) {
   };
 
   return {
+    selection: selection,
     buttonEnabled: buttonEnabled,
+    values: values,
     setStyle: setStyle
   };
 }

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

@@ -7,10 +7,10 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _useFontStyleSetting = _interopRequireDefault(require("../hooks/useFontStyleSetting"));
-
 var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
 
+var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
+
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
 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); }
@@ -22,7 +22,14 @@ function FontFamilySelect(props) {
       onChange = props.onChange;
   var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
   return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
-    value: value,
+    value: value || '',
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: 48
+        }
+      }, val || '微软雅黑');
+    },
     onChange: onChange
   }, items.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
@@ -37,29 +44,23 @@ function FontFamilySelect(props) {
 
 function FontFamilyWidget(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
-
-  var _useState = (0, _react.useState)('微软雅黑'),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var fontStyleSetting = (0, _useFontStyleSetting["default"])({
-    topo: topo
-  });
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     label: "\u5B57\u4F53",
     tooltip: "\u5B57\u4F53",
     showLabel: showLabel
   }, /*#__PURE__*/_react["default"].createElement(FontFamilySelect, {
-    value: value,
+    value: style.fontFamily,
     onChange: function onChange(val) {
-      setValue(val);
-      fontStyleSetting.setStyle({
+      setStyle({
         fontFamily: val
       });
     }
   }));
 }
 
-var _default = FontFamilyWidget;
+var _default = (0, _textStyleSettingRouter["default"])(FontFamilyWidget);
+
 exports["default"] = _default;

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

@@ -7,10 +7,10 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _useFontStyleSetting = _interopRequireDefault(require("../hooks/useFontStyleSetting"));
-
 var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
 
+var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
+
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
 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); }
@@ -19,11 +19,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function FontSizeSelect(props) {
   var value = props.value,
-      onChange = props.onChange;
+      _onChange = props.onChange;
   var items = [9, 10, 11, 12, 14, 16, 18, 20, 24, 30, 36];
   return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
-    value: value,
-    onChange: onChange
+    value: "" + (value || ''),
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: 18
+        }
+      }, val || 12);
+    },
+    onChange: function onChange(val) {
+      return _onChange(parseInt(val, 10));
+    }
   }, items.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
       key: item
@@ -33,28 +42,22 @@ function FontSizeSelect(props) {
 
 function FontSizeWidget(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
-  var fontStyleSetting = (0, _useFontStyleSetting["default"])({
-    topo: topo
-  });
-
-  var _useState = (0, _react.useState)(12),
-      fontSize = _useState[0],
-      setFontSize = _useState[1];
-
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     label: "\u5B57\u53F7",
     showLabel: showLabel
   }, /*#__PURE__*/_react["default"].createElement(FontSizeSelect, {
-    value: fontSize,
+    value: style.fontSize,
     onChange: function onChange(val) {
-      setFontSize(val);
-      fontStyleSetting.setStyle({
+      setStyle({
         fontSize: val
       });
     }
   }));
 }
 
-var _default = FontSizeWidget;
+var _default = (0, _textStyleSettingRouter["default"])(FontSizeWidget);
+
 exports["default"] = _default;

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

@@ -5,16 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _htElementUtils = require("../../../../../utils/htElementUtils");
-
-var _fontStyleUtil = _interopRequireDefault(require("../../settings/common/text/fontStyleUtil"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _useFontStyleSetting = _interopRequireDefault(require("../hooks/useFontStyleSetting"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
 
+var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
+
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
 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); }
@@ -35,67 +33,63 @@ var items = [{
   icon: 'Underline'
 }];
 
-function getTextFontStyle(textElement) {
-  var underline = textElement.s('text.decoration') === 'underline';
+function buildValue(obj) {
+  return Object.keys(obj).filter(function (key) {
+    return !!obj[key];
+  });
+}
 
-  var fontStyle = _fontStyleUtil["default"].toMap(textElement.s('text.font'));
+function formatStyle(arr) {
+  return items.map(function (item) {
+    return item.key;
+  }).reduce(function (map, name) {
+    var _extends2;
 
-  return {
-    underline: underline,
-    bold: fontStyle.bold,
-    italic: fontStyle.italic
-  };
+    return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[name] = arr.includes(name), _extends2));
+  }, {});
 }
 
 function FontStyleButton(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
+
+  var _useState = (0, _react.useState)(false),
+      disabled = _useState[0],
+      setDisabled = _useState[1];
 
-  var _useState = (0, _react.useState)(['bold']),
-      value = _useState[0],
-      setValue = _useState[1];
+  var bold = style.bold,
+      italic = style.italic,
+      underline = style.underline;
 
-  var _useState2 = (0, _react.useState)(true),
-      disabled = _useState2[0],
-      setDisabled = _useState2[1]; // 选中的元素
+  var _useState2 = (0, _react.useState)(buildValue({
+    bold: bold,
+    italic: italic,
+    underline: underline
+  })),
+      value = _useState2[0],
+      setValue = _useState2[1]; // 选中的元素
 
 
   var selection = topo.selectionManager.useHtSelection();
-  var fontStyleSetting = (0, _useFontStyleSetting["default"])({
-    topo: topo
-  });
   (0, _react.useEffect)(function () {
     setDisabled(false);
-    var fontObj = {};
-
-    if (selection.length === 1) {
-      var element = selection[0];
-
-      if ((0, _htElementUtils.isText)(element)) {
-        fontObj = getTextFontStyle(element);
-      }
-    }
-
-    var newValue = Object.keys(fontObj).reduce(function (result, key) {
-      if (fontObj[key]) {
-        return [].concat(result, [key]);
-      }
-
-      return result;
-    }, []);
-    setValue(newValue);
   }, [selection]);
+  (0, _react.useEffect)(function () {
+    setValue(buildValue({
+      bold: bold,
+      italic: italic,
+      underline: underline
+    }));
+  }, [bold, italic, underline]);
   /**
    * 
    * @param {Array} selectedKeys 
    */
 
   var handleChange = function handleChange(selectedKeys) {
-    setValue(selectedKeys);
-    var style = {
-      fontBold: selectedKeys.includes('bold')
-    };
-    fontStyleSetting.setStyle(style);
+    setStyle(formatStyle(selectedKeys));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
@@ -127,5 +121,6 @@ function FontStyleButton(props) {
   })));
 }
 
-var _default = FontStyleButton;
+var _default = (0, _textStyleSettingRouter["default"])(FontStyleButton);
+
 exports["default"] = _default;

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

@@ -62,9 +62,10 @@ function NodeSizeButton(props) {
       setDisabled(false);
 
       if (selection.length === 1) {
+        var element = nodes[0];
         setSize({
-          width: selection[0].width,
-          height: selection[0].height
+          width: element.getWidth(),
+          height: element.getHeight()
         });
       }
     } else {