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

package/es/core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView.js

@@ -41,8 +41,10 @@ export default function CommonEdgePropertyView(props) {
   }, [values]);
 
   var setLineColor = function setLineColor(color) {
-    var style = edge.a("styles") || {};
+    // 同时修改实线、虚线
     edge.s("edge.color", color);
+    edge.s("edge.dash.color", color);
+    var style = edge.a("styles") || {};
     edge.a("styles", _extends({}, style, {
       color: color
     }));
@@ -93,6 +95,10 @@ export default function CommonEdgePropertyView(props) {
     style: {
       width: "100%"
     },
+    onChange: function onChange(val) {
+      // 同时修改实线、虚线的线宽
+      edge.s('edge.dash.width', val);
+    },
     onFocus: function onFocus() {
       topo.historyManager.beginTransaction();
     },

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/hooks/usePolling.js

@@ -61,11 +61,8 @@ var usePolling = function usePolling(props) {
 
 
   useEffect(function () {
-    var isViewer = topoState.viewState === 'view';
-
-    if (topo.options.enableDefaultMetricLoader && isViewer) {
+    if (topo.options.enableDefaultMetricLoader) {
       rlog.debug('usePolling.useEffect: 开始轮询', {
-        isViewer: isViewer,
         pollingSwitch: pollingSwitch,
         resIdsList: resIdsList,
         resourceOverviewState: resourceOverviewState,
@@ -80,7 +77,7 @@ var usePolling = function usePolling(props) {
         stopPoll();
       }
     };
-  }, [topoState.viewState, pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
+  }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
   /**
    * 
    * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标

package/es/core/models/AttributeMetricDisplay.js

@@ -650,7 +650,11 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     var htTopo = topo.getHtTopo();
 
     if (htTopo) {
+      var _topo$historyManager, _topo$historyManager2;
+
+      (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '加载标注');
       htTopo.loadTagAndTip(JSON.parse(JSON.stringify(elementTagsAndTips)));
+      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '加载标注');
     }
   }
   /**

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.30" === 'string' ? "6.0.0-alpha.30" : null;
+var version = typeof "6.0.0-alpha.32" === 'string' ? "6.0.0-alpha.32" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/utils/htElementUtils.js

@@ -50,6 +50,9 @@ export function isGroup(element) {
 export function isLayer(element) {
   return element instanceof ht.Grid;
 }
+export function isText(element) {
+  return element instanceof ht.Text && element.a('isText');
+}
 export function getElements(dataModel) {
   // console.error(111, dataModel.getDatas().getArray())
   return dataModel.getDatas().getArray();

package/lib/core/editor/components/EditorPlugin.js

@@ -17,13 +17,15 @@ var _MultipleResourceSelectPlugin = _interopRequireDefault(require("./plugins/Mu
 
 var _GroupAddResourceDrawerPlugin = _interopRequireDefault(require("./GroupAddResourceDrawerPlugin"));
 
+var _MetricPollingPlugin = _interopRequireDefault(require("../../viewer/components/plugins/MetricPollingPlugin"));
+
 function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/_react["default"].createElement(Plugin, (0, _extends2["default"])({
       key: index,

package/lib/core/editor/components/Sidebar/Sidebar.js

@@ -42,7 +42,8 @@ function Sidebar(props) {
         resourceTabActiveKey: null
       });
     };
-  }, []);
+  }, []); // 通过url参数打开对应面板
+
   (0, _react.useEffect)(function () {
     var _topo$viewProps$urlPa;
 

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -61,7 +61,7 @@ function CanvasPanel(props) {
     topo.historyManager.beginTransaction();
     displayConfigDispatchers.update({
       canvasTheme: theme
-    }); // 设置资源标注
+    }); // 设置资源/链路标注样式
 
     var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
         nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle,
@@ -78,8 +78,7 @@ function CanvasPanel(props) {
     displayConfigDispatchers.update({
       nodeLabelStyle: globalNodeLabelStyle,
       defaultEdgeLabelStyle: globalEdgeTagStyle
-    }); // 设置链路标注
-
+    });
     topo.historyManager.endTransaction();
   };
 

package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -36,6 +36,7 @@ function HtImagePalette(props) {
       viewRef.current = htTopo.createImagePalette(container, {
         icons: icons
       });
+      console.error(viewRef.current);
     } catch (error) {
       _rlog["default"].error('初始化资源面板失败', error);
     } // 注销组件

package/lib/core/editor/components/Toolbar/buttons.js

@@ -51,13 +51,14 @@ function getButtons(isNetworkTopo) {
   _FontSizeWidget["default"], // 字号
   _FontStyleButton["default"], // 文字样式
   _FontColorButton["default"], // 文字颜色
-  _Divider["default"], _BoxBackgroundButton["default"], // 框背景
-  _Divider["default"], _EdgeColorButton["default"], // 线条颜色
+  _Divider["default"], // BoxBackgroundButton, // 框背景
+  // Divider,
+  _EdgeColorButton["default"], // 线条颜色
   _EdgeTypeButton["default"], // 线形
   _Divider["default"], _NodeImageButton["default"], // 替换图片
   _NodeSizeButton["default"], // 图片尺寸
   _Divider["default"], _Layout["default"], // 布局方式
-  _NodeAlignWidget["default"], // 对齐方式
-  _SearchWidget["default"] // 搜索
+  _NodeAlignWidget["default"] // 对齐方式
+  // SearchWidget, // 搜索
   ]);
 }

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,47 +1,87 @@
 "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 selection = topo.selectionManager.useHtSelection();
+  var buttonEnabled = true; // const values = useValues(topo, selection)
 
-  var _topo$store$useModel = topo.store.useModel('displayConfig'),
-      nodeLabelStyle = _topo$store$useModel[0].nodeLabelStyle,
-      displayConfigDispatchers = _topo$store$useModel[1];
+  var values = {};
 
   var setStyle = function setStyle(styleData) {
-    // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
-    if (!selectionElements.length) {
-      topo.getHtTopo().setGlobalNodeLabelStyle(styleData);
-      displayConfigDispatchers.update({
-        nodeLabelStyle: (0, _extends2["default"])({}, nodeLabelStyle, styleData)
-      });
+    topo.historyManager.beginTransaction(); // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
+
+    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);
       });
     }
+
+    topo.historyManager.endTransaction();
   };
 
   return {
+    selection: selection,
     buttonEnabled: buttonEnabled,
+    values: values,
     setStyle: setStyle
   };
 }

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

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -48,10 +50,16 @@ function EdgeColorButton(props) {
 
   var selection = topo.selectionManager.useHtSelection();
 
+  var loopEdges = function loopEdges(edges, operateEdgeFn) {
+    edges.forEach(function (edge) {
+      operateEdgeFn(edge);
+    });
+  };
+
   var getLines = function getLines(list) {
     // eslint-disable-next-line prefer-const
     var arr = [];
-    (0, _edgeTypeStyleUtil.loopEdgesAndChildren)(topo, list, function (edge) {
+    loopEdges(list, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
         arr.push(edge);
@@ -66,7 +74,7 @@ function EdgeColorButton(props) {
       var list = getLines(edges);
       setLineWidth(0); // eslint-disable-next-line eqeqeq
 
-      if (selection.length == 1 && selection[0].getAttrObject().type == 'line') {
+      if (selection.length == 1 && selection[0].a('type') == 'line') {
         setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
       }
 
@@ -74,14 +82,20 @@ function EdgeColorButton(props) {
     }
   }, [selection, graphLoaded]);
 
-  var colorOnChange = function colorOnChange(color, type) {
+  var colorOnChange = function colorOnChange(colors, type) {
     // eslint-disable-next-line eqeqeq
     if (type == 'select') topo.historyManager.beginTransaction();
     var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
-    (0, _edgeTypeStyleUtil.loopEdgesAndChildren)(topo, edges, function (edge) {
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.color', color.hex);
+        var color = colors.hex;
+        edge.s('edge.color', color);
+        edge.s('edge.dash.color', color);
+        var style = edge.a('styles') || {};
+        edge.a('styles', (0, _extends2["default"])({}, style, {
+          color: color
+        }));
       }
     }); // eslint-disable-next-line eqeqeq
 
@@ -97,14 +111,21 @@ function EdgeColorButton(props) {
     topo.historyManager.endTransaction();
   };
 
-  var lineSizeChange = function lineSizeChange(value) {
+  var lineSizeChange = function lineSizeChange(width) {
     var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
-    (0, _edgeTypeStyleUtil.setEdgesAndChildren)(topo, edges, function (edge) {
+    topo.historyManager.beginTransaction();
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.width', value); // 设置
+        edge.s('edge.dash.width', width);
+        edge.s('edge.width', width);
+        var style = edge.a('styles') || {};
+        edge.a('styles', (0, _extends2["default"])({}, style, {
+          width: width
+        }));
       }
     });
+    topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {

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

@@ -86,8 +86,23 @@ function EdgeTypeButton(props) {
         edge.s('icons', (0, _extends2["default"])({}, edge.s('icons')));
         edge.addStyleIcon(value, _constants.EDGE_END_POINT_TYPE_MAP[value]);
       } else if (name === 'lineMold') {
+        // 修改实线虚线
         edge.a('lineMode', value);
         htTopo.setElementStyle(edge, _constants.LINE_MOLD_MAP[value]);
+
+        if (value !== 'solid') {
+          var edgeWidth = edge.s('edge.width');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.width', edgeWidth);
+          }
+
+          var color = edge.s('edge.color');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.color', color);
+          }
+        }
       }
     });
   };

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

@@ -17,6 +17,8 @@ var _FontColorRange = _interopRequireDefault(require("../../../../../components/
 
 var _FontColorButtonModule = _interopRequireDefault(require("./FontColorButton.module.scss"));
 
+var _useFontStyleSetting = _interopRequireDefault(require("../hooks/useFontStyleSetting"));
+
 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; }
@@ -31,6 +33,9 @@ function FontFamilySelect(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
+  var fontStyleSetting = (0, _useFontStyleSetting["default"])({
+    topo: topo
+  });
   console.log(topo, 'topo这里需要处理颜色改变的事情');
 
   var backOpacityChange = function backOpacityChange(value) {

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;