@riil-frontend/component-topology 13.0.0-dev.1 → 13.0.0-dev.11

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

@@ -48,20 +48,11 @@ var LINE_TYPE_OPTIONS = [{
   value: 'doublearc',
   label: '双弧线',
   icon: 'topo_linear_icon_arcline'
-} // {
-//   value: 'points',
-//   label: '自由线形',
-//   icon: 'topo_linear_icon_pointsline',
-// },
-];
-
-if (localStorage.getItem('topo.test.edge.customType') === 'true') {
-  LINE_TYPE_OPTIONS.push({
-    value: 'points',
-    label: '自由线形',
-    icon: 'topo_linear_icon_pointsline'
-  });
-}
+}, {
+  value: 'points',
+  label: '自由线形',
+  icon: 'topo_linear_icon_pointsline'
+}];
 
 var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var value = props.value,

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

@@ -11,16 +11,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _DropdownButton = _interopRequireDefault(require("./components/DropdownButton"));
+var _FontColorDropdown = _interopRequireDefault(require("./components/FontColorDropdown"));
 
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
-var _ColorPanel = _interopRequireDefault(require("../../../../../components/ColorPanel"));
-
-var _FontColorRange = _interopRequireDefault(require("../../../../../components/ColorPanel/components/FontColorRange"));
-
-var _FontColorButtonModule = _interopRequireDefault(require("./FontColorButton.module.scss"));
-
 var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
 
 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); }
@@ -28,26 +22,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /* eslint-disable jsx-a11y/alt-text */
-function FontColorDropdown(props) {
-  var color = props.color,
-      onChange = props.onChange,
+function FontColorButton(props) {
+  var showLabel = props.showLabel,
       topo = props.topo,
-      opacity = props.opacity,
-      background = props.background,
+      style = props.style,
       setStyle = props.setStyle,
-      _props$fieldDisabled = props.fieldDisabled,
-      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
-
-  var _useState = (0, _react.useState)(false),
-      disabled = _useState[0],
-      setDisabled = _useState[1];
-
-  var backgroundEnabled = fieldDisabled.background !== true;
-  var opacityEnabled = fieldDisabled.opacity !== true;
+      fieldDisabled = props.fieldDisabled;
 
   var backOpacityChange = function backOpacityChange(value) {
     topo.historyManager.beginTransaction();
-    onChange({
+    setStyle({
       opacity: (value / 100).toFixed(2) * 1
     });
     topo.historyManager.endTransaction();
@@ -129,84 +113,16 @@ function FontColorDropdown(props) {
     };
   }();
 
-  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
-  };
-
-  var onBlur = function onBlur() {// topo.historyManager.endTransaction();
-  };
-
-  var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
-    disabled: disabled,
-    trigger: icon
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    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("div", {
-    style: {
-      marginTop: '10px',
-      marginLeft: '-4px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
-    value: color,
-    onChange: colorChang,
-    onPickerFocus: onFocus,
-    onPickerBlur: onBlur
-  }))), (backgroundEnabled || opacityEnabled) && /*#__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
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
-  }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
-    max: 100,
-    min: 0,
-    unit: "%",
-    list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
-    onChange: backOpacityChange,
-    defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
-
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      marginTop: '10px',
-      marginLeft: '-4px',
-      marginBottom: '3px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
-    showClear: true,
-    value: background,
-    onChange: backgroundChang,
-    onPickerFocus: onFocus,
-    onPickerBlur: onBlur
-  })))));
-}
-
-function FontColorButton(props) {
-  var showLabel = props.showLabel,
-      topo = props.topo,
-      style = props.style,
-      setStyle = props.setStyle,
-      fieldDisabled = props.fieldDisabled;
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     label: "\u6587\u5B57\u989C\u8272",
     tooltip: "\u6587\u5B57\u989C\u8272",
     showLabel: showLabel
-  }, /*#__PURE__*/_react["default"].createElement(FontColorDropdown, {
-    color: style.color,
-    background: style.background,
-    opacity: style.opacity,
+  }, /*#__PURE__*/_react["default"].createElement(_FontColorDropdown["default"], {
+    value: style,
     fieldDisabled: fieldDisabled,
-    setStyle: setStyle,
-    onChange: function onChange(val) {
-      setStyle(val);
-    },
+    onColorChange: colorChang,
+    onBackgroundChange: backgroundChang,
+    onOpacityChange: backOpacityChange,
     topo: topo
   }));
 }

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

@@ -7,9 +7,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
+var _FontFamilySelect = _interopRequireDefault(require("./components/FontFamilySelect"));
 
-var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
+var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter"));
 
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
@@ -17,31 +17,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 FontFamilySelect(props) {
-  var value = props.value,
-      onChange = props.onChange;
-  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
-  return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
-    value: (items.includes(value) ? value : null) || '',
-    valueRender: function valueRender(val) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          width: 48
-        }
-      }, val || '微软雅黑');
-    },
-    onSelect: onChange
-  }, items.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
-      key: item
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        fontFamily: item
-      }
-    }, item));
-  }));
-}
-
 function FontFamilyWidget(props) {
   var topo = props.topo,
       showLabel = props.showLabel,
@@ -51,7 +26,7 @@ function FontFamilyWidget(props) {
     label: "\u5B57\u4F53",
     tooltip: "\u5B57\u4F53",
     showLabel: showLabel
-  }, /*#__PURE__*/_react["default"].createElement(FontFamilySelect, {
+  }, /*#__PURE__*/_react["default"].createElement(_FontFamilySelect["default"], {
     value: style.fontFamily,
     onChange: function onChange(val) {
       topo.historyManager.beginTransaction();

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

@@ -7,9 +7,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
+var _FontSizeSelect = _interopRequireDefault(require("./components/FontSizeSelect"));
 
-var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
+var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter"));
 
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
@@ -17,31 +17,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 FontSizeSelect(props) {
-  var value = props.value,
-      disabled = props.disabled,
-      onChange = props.onChange;
-  var items = [12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 80];
-  return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
-    value: "" + (value || ''),
-    valueRender: function valueRender(val) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          width: 18
-        }
-      }, val || 20);
-    },
-    disabled: disabled,
-    onSelect: function onSelect(val) {
-      return onChange(parseInt(val, 10));
-    }
-  }, items.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
-      key: item
-    }, item);
-  }));
-}
-
 function FontSizeWidget(props) {
   var topo = props.topo,
       showLabel = props.showLabel,
@@ -57,7 +32,7 @@ function FontSizeWidget(props) {
     tooltip: "\u5B57\u53F7",
     showLabel: showLabel,
     disabled: disabled
-  }, /*#__PURE__*/_react["default"].createElement(FontSizeSelect, {
+  }, /*#__PURE__*/_react["default"].createElement(_FontSizeSelect["default"], {
     value: style.fontSize,
     disabled: disabled,
     onChange: function onChange(val) {

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

@@ -7,39 +7,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _variables = _interopRequireDefault(require("@alifd/theme-19926/variables.js"));
+var _FontStyleSelect = _interopRequireDefault(require("./components/FontStyleSelect"));
 
-var _htElementUtils = require("../../../../../utils/htElementUtils");
-
-var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
-
-var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter.js"));
+var _textStyleSettingRouter = _interopRequireDefault(require("./components/textStyleSetting/textStyleSettingRouter"));
 
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
-var _Tooltip = _interopRequireDefault(require("../components/Tooltip"));
-
 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; }
 
-var items = [{
-  key: 'bold',
-  label: '加粗',
-  icon: 'bold',
-  tooltip: '加粗'
-}, {
-  key: 'italic',
-  label: '斜体',
-  icon: 'Italics',
-  tooltip: '斜体'
-}, {
-  key: 'underline',
-  label: '下划线',
-  icon: 'Underline',
-  tooltip: '下划线'
-}];
-
 function buildValue(obj) {
   return Object.keys(obj).filter(function (key) {
     return !!obj[key];
@@ -107,39 +84,12 @@ function FontStyleButton(props) {
     tooltip: "\u6587\u5B57\u6837\u5F0F\uFF08\u52A0\u7C97\u3001\u659C\u4F53\u3001\u4E0B\u5212\u7EBF\uFF09",
     disabled: disabled,
     showLabel: showLabel
-  }, /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_FontStyleSelect["default"], {
     value: value,
-    valueRender: function valueRender() {
-      return /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
-        alt: ""
-      });
-    },
-    multiple: true,
     disabled: disabled,
-    onSelect: handleSelect
-  }, items.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
-      key: item.key,
-      disabled: fieldDisabled[item.key]
-    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-      trigger: /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
-        alt: ""
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        style: fieldDisabled[item.key] ? {} : {
-          color: _variables["default"]['$color-text1-4']
-        }
-      }, item.label)),
-      align: "r",
-      popupStyle: {}
-    }, item.tooltip));
-  })));
+    fieldDisabled: fieldDisabled,
+    onChange: handleSelect
+  }));
 }
 
 var _default = (0, _textStyleSettingRouter["default"])(FontStyleButton, {

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

@@ -0,0 +1,136 @@
+"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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
+
+var _ColorPanel = _interopRequireDefault(require("../../../../../../components/ColorPanel"));
+
+var _FontColorRange = _interopRequireDefault(require("../../../../../../components/ColorPanel/components/FontColorRange"));
+
+var _FontColorDropdownModule = _interopRequireDefault(require("./FontColorDropdown.module.scss"));
+
+var _excluded = ["topo", "value", "onChange", "fieldDisabled"];
+
+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 FontColorDropdown(props) {
+  var color = props.color,
+      opacity = props.opacity,
+      background = props.background,
+      _props$fieldDisabled = props.fieldDisabled,
+      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
+      colorPickerBalloonProps = props.colorPickerBalloonProps,
+      backgroundPickerBalloonProps = props.backgroundPickerBalloonProps,
+      onChange = props.onChange,
+      onColorChange = props.onColorChange,
+      onBackgroundChange = props.onBackgroundChange,
+      onOpacityChange = props.onOpacityChange;
+
+  var _useState = (0, _react.useState)(false),
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
+  var backgroundEnabled = fieldDisabled.background !== true;
+  var opacityEnabled = fieldDisabled.opacity !== true;
+
+  var onFocus = function onFocus() {};
+
+  var onBlur = function onBlur() {};
+
+  var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
+    alt: ""
+  });
+  return /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
+    disabled: disabled,
+    trigger: icon
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FontColorDropdownModule["default"].content
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FontColorDropdownModule["default"].fontColor
+  }, /*#__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"], {
+    value: color,
+    colorPickerBalloonProps: colorPickerBalloonProps,
+    onChange: onColorChange,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  }))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FontColorDropdownModule["default"].backgroundColor
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FontColorDropdownModule["default"].backOpacity
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
+  }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
+    max: 100,
+    min: 0,
+    unit: "%",
+    list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+    onChange: onOpacityChange,
+    defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
+
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
+    showClear: true,
+    value: background,
+    colorPickerBalloonProps: backgroundPickerBalloonProps,
+    onChange: onBackgroundChange,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  })))));
+}
+/**
+ * 
+ * @param {*} props 
+ * @param {{color, background, opacity}} props.value
+ * @returns 
+ */
+
+
+function FontColorD(props) {
+  var topo = props.topo,
+      value = props.value,
+      onChange = props.onChange,
+      fieldDisabled = props.fieldDisabled,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(FontColorDropdown, (0, _extends2["default"])({}, otherProps, {
+    color: value.color,
+    background: value.background,
+    opacity: value.opacity,
+    fieldDisabled: fieldDisabled,
+    setStyle: onChange,
+    onChange: onChange,
+    topo: topo
+  }));
+}
+
+_ColorPanel["default"].defaultProps = {
+  colorPickerBalloonProps: {},
+  backgroundPickerBalloonProps: {}
+};
+var _default = FontColorD;
+exports["default"] = _default;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+
+function FontFamilySelect(props) {
+  var value = props.value,
+      onChange = props.onChange;
+  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
+  return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
+    value: (items.includes(value) ? value : null) || '',
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: 48
+        }
+      }, val || '微软雅黑');
+    },
+    onSelect: onChange
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
+      key: item
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontFamily: item
+      }
+    }, item));
+  }));
+}
+
+var _default = FontFamilySelect;
+exports["default"] = _default;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+
+function FontSizeSelect(props) {
+  var value = props.value,
+      disabled = props.disabled,
+      onChange = props.onChange;
+  var items = [12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 80];
+  return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
+    value: "" + (value || ''),
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: 18
+        }
+      }, val || 20);
+    },
+    disabled: disabled,
+    onSelect: function onSelect(val) {
+      return onChange(parseInt(val, 10));
+    }
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
+      key: item
+    }, item);
+  }));
+}
+
+var _default = FontSizeSelect;
+exports["default"] = _default;

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _variables = _interopRequireDefault(require("@alifd/theme-19926/variables.js"));
+
+var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
+var items = [{
+  key: 'bold',
+  label: '加粗',
+  icon: 'bold',
+  tooltip: '加粗'
+}, {
+  key: 'italic',
+  label: '斜体',
+  icon: 'Italics',
+  tooltip: '斜体'
+}, {
+  key: 'underline',
+  label: '下划线',
+  icon: 'Underline',
+  tooltip: '下划线'
+}];
+
+function buildValue(obj) {
+  return Object.keys(obj).filter(function (key) {
+    return !!obj[key];
+  });
+}
+
+var fields = ['bold', 'italic', 'underline'];
+
+function FontStyleSelect(props) {
+  var value = props.value,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      _props$fieldDisabled = props.fieldDisabled,
+      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
+      hideItemTootip = props.hideItemTootip;
+
+  var renderMenuItemContent = function renderMenuItemContent(item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
+      alt: ""
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      style: fieldDisabled[item.key] ? {} : {
+        color: _variables["default"]['$color-text1-4']
+      }
+    }, item.label));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
+    value: value,
+    valueRender: function valueRender() {
+      return /*#__PURE__*/_react["default"].createElement("img", {
+        src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+        alt: ""
+      });
+    },
+    multiple: true,
+    disabled: disabled,
+    onSelect: onChange
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
+      key: item.key,
+      disabled: !!fieldDisabled[item.key]
+    }, hideItemTootip ? renderMenuItemContent(item) : /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      trigger: renderMenuItemContent(item),
+      align: "r",
+      popupStyle: {}
+    }, item.tooltip));
+  }));
+}
+
+var _default = FontStyleSelect;
+exports["default"] = _default;