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

package/es/components/ColorPanel/index.js

@@ -1,14 +1,68 @@
 import _Balloon from "@alifd/next/es/balloon";
+import _extends from "@babel/runtime/helpers/extends";
 
 /* eslint-disable eqeqeq */
 
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Color from 'color';
 import { SketchPicker } from 'react-color';
 import ColorBlock from "./components/ColorBlock";
 import styles from "./index.module.scss";
+var defaultColorList = [{
+  color: 'rgba(255, 255, 255, 1)',
+  borderColor: 'rgba(219, 219, 219, 1)'
+}, {
+  color: 'rgba(245, 245, 245, 1)',
+  borderColor: 'rgba(208, 208, 208, 1)'
+}, {
+  color: 'rgba(230, 230, 230, 1)',
+  borderColor: 'rgba(196, 196, 196, 1)'
+}, {
+  color: 'rgba(168, 168, 168, 1)',
+  borderColor: 'rgba(146, 146, 146, 1)'
+}, {
+  color: 'rgba(97, 97, 97, 1)',
+  borderColor: 'rgba(85, 85, 85, 1)'
+}, {
+  color: 'rgba(49, 49, 49, 1)',
+  borderColor: 'rgba(43, 43, 43, 1)'
+}, {
+  color: 'rgba(251, 115, 80, 1)',
+  borderColor: 'rgba(213, 98, 69, 1)'
+}, {
+  color: 'rgba(255, 166, 41, 1)',
+  borderColor: 'rgba(219, 144, 45, 1)'
+}, {
+  color: 'rgba(255, 205, 42, 1)',
+  borderColor: 'rgba(216, 175, 37, 1)'
+}, {
+  color: 'rgba(18, 174, 92, 1)',
+  borderColor: 'rgba(23, 148, 79, 1)'
+}, {
+  color: 'rgba(83, 184, 255, 1)',
+  borderColor: 'rgba(74, 156, 217, 1)'
+}, {
+  color: 'rgba(183, 128, 255, 1)',
+  borderColor: 'rgba(155, 109, 216, 1)'
+}, {
+  color: 'rgba(254, 192, 174, 1)',
+  borderColor: 'rgba(217, 163, 148, 1)'
+}, {
+  color: 'rgba(252, 209, 156, 1)',
+  borderColor: 'rgba(215, 178, 133, 1)'
+}, {
+  color: 'rgba(255, 232, 163, 1)',
+  borderColor: 'rgba(217, 198, 139, 1)'
+}, {
+  color: 'rgba(176, 244, 197, 1)',
+  borderColor: 'rgba(153, 209, 171, 1)'
+}, {
+  color: 'rgba(189, 227, 255, 1)',
+  borderColor: 'rgba(161, 193, 217, 1)'
+}];
 /**
  * 颜色选择
  *
@@ -22,7 +76,9 @@ function ColorPanel(props) {
 
   var value = props.value,
       showClear = props.showClear,
-      dataSource = props.dataSource,
+      _props$dataSource = props.dataSource,
+      dataSource = _props$dataSource === void 0 ? defaultColorList : _props$dataSource,
+      colorPickerBalloonProps = props.colorPickerBalloonProps,
       onChange = props.onChange,
       onPickerFocus = props.onPickerFocus,
       onPickerBlur = props.onPickerBlur;
@@ -169,9 +225,7 @@ function ColorPanel(props) {
     onClick: function onClick() {
       changClick('17');
     }
-  }, /*#__PURE__*/React.createElement(_Balloon, {
-    visible: visible,
-    trigger: defaultTrigger,
+  }, /*#__PURE__*/React.createElement(_Balloon, _extends({
     closable: false,
     triggerType: "click",
     animation: false,
@@ -180,9 +234,12 @@ function ColorPanel(props) {
     alignEdge: true,
     style: {
       paddingBottom: 0
-    },
+    }
+  }, colorPickerBalloonProps, {
+    visible: visible,
+    trigger: defaultTrigger,
     onClose: close
-  }, /*#__PURE__*/React.createElement(SketchPicker, {
+  }), /*#__PURE__*/React.createElement(SketchPicker, {
     color: data !== null && data !== void 0 ? data : undefined // width={230}
     ,
     disableAlpha: true,
@@ -198,61 +255,14 @@ function ColorPanel(props) {
   }))))));
 }
 
+ColorPanel.propTypes = {
+  dataSource: PropTypes.array
+};
 ColorPanel.defaultProps = {
   value: undefined,
   showClear: false,
-  dataSource: [{
-    color: 'rgba(255, 255, 255, 1)',
-    borderColor: 'rgba(219, 219, 219, 1)'
-  }, {
-    color: 'rgba(245, 245, 245, 1)',
-    borderColor: 'rgba(208, 208, 208, 1)'
-  }, {
-    color: 'rgba(230, 230, 230, 1)',
-    borderColor: 'rgba(196, 196, 196, 1)'
-  }, {
-    color: 'rgba(168, 168, 168, 1)',
-    borderColor: 'rgba(146, 146, 146, 1)'
-  }, {
-    color: 'rgba(97, 97, 97, 1)',
-    borderColor: 'rgba(85, 85, 85, 1)'
-  }, {
-    color: 'rgba(49, 49, 49, 1)',
-    borderColor: 'rgba(43, 43, 43, 1)'
-  }, {
-    color: 'rgba(251, 115, 80, 1)',
-    borderColor: 'rgba(213, 98, 69, 1)'
-  }, {
-    color: 'rgba(255, 166, 41, 1)',
-    borderColor: 'rgba(219, 144, 45, 1)'
-  }, {
-    color: 'rgba(255, 205, 42, 1)',
-    borderColor: 'rgba(216, 175, 37, 1)'
-  }, {
-    color: 'rgba(18, 174, 92, 1)',
-    borderColor: 'rgba(23, 148, 79, 1)'
-  }, {
-    color: 'rgba(83, 184, 255, 1)',
-    borderColor: 'rgba(74, 156, 217, 1)'
-  }, {
-    color: 'rgba(183, 128, 255, 1)',
-    borderColor: 'rgba(155, 109, 216, 1)'
-  }, {
-    color: 'rgba(254, 192, 174, 1)',
-    borderColor: 'rgba(217, 163, 148, 1)'
-  }, {
-    color: 'rgba(252, 209, 156, 1)',
-    borderColor: 'rgba(215, 178, 133, 1)'
-  }, {
-    color: 'rgba(255, 232, 163, 1)',
-    borderColor: 'rgba(217, 198, 139, 1)'
-  }, {
-    color: 'rgba(176, 244, 197, 1)',
-    borderColor: 'rgba(153, 209, 171, 1)'
-  }, {
-    color: 'rgba(189, 227, 255, 1)',
-    borderColor: 'rgba(161, 193, 217, 1)'
-  }],
+  dataSource: defaultColorList,
+  colorPickerBalloonProps: {},
   onChange: function onChange() {},
   onPickerFocus: function onPickerFocus() {},
   onPickerBlur: function onPickerBlur() {}

package/es/components/ResourceSelectDrawer/ResourceSelectDrawer.js

@@ -64,7 +64,7 @@ function ResourceSelectDrawer(props) {
             _context.prev = 9;
             _context.t0 = _context["catch"](1);
             setLoading(false);
-            rlog.error('ResourceSelectDrawer.handleOk', _context.t0);
+            rlog.error('ResourceSelectDrawer.handleOk', _context.t0, _context.t0.stack);
 
           case 13:
           case "end":

package/es/core/components/TopoView/topoView.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
 import PortalContainer from '@riil-frontend/component-topology-graph/es/components/PortalContainer';
-import { rlog } from '@riil-frontend/component-topology-utils'; // 通用
+import Logger from 'loglevel'; // 通用
 
 import showMessage from "../../utils/showMessage";
 import { TPL_TREE } from "../../../utils/template";
@@ -28,6 +28,7 @@ import editorStyles from "./editor.module.scss";
 import basicIcons from "../../common/icons/basicIcons";
 import HelpIcon from "../../editor/components/BottomFloatTool/HelpIcon";
 import { updateNodesNameVisible } from "../../models/utils/nodeNameVisibleUtil";
+var rlog = Logger.getLogger('topo');
 
 var Topology = function Topology(props) {
   var _classnames;
@@ -115,7 +116,7 @@ var Topology = function Topology(props) {
     }
   }, []);
   var handleGraphDataLoaded = useCallback(function () {
-    rlog.info('TopoView.handleGraphDataLoaded', new Date().toString(), {
+    rlog.info('TopoView.handleGraphDataLoaded: 数据加载完成', new Date().toString(), {
       topoMod: topo.store.getState().topoMod,
       topoData: topoData,
       htElements: topo.getDataModel().getDatas().toArray()
@@ -125,13 +126,15 @@ var Topology = function Topology(props) {
     fixLink(topo);
     handleClusterNoPermission(topo);
     updateEdgeExpanded(topo);
+    topo.selectionModel.init();
     var htHistoryManager = topo.getDataModel().getHistoryManager();
 
-    if (htHistoryManager) {
+    if (topo.store.getState().topoMod.viewState === 'edit' && htHistoryManager) {
       topo.historyManager = new HistoryManager(topo, htHistoryManager);
+      topo.historyManager.clear();
+      rlog.info('TopoView.handleGraphDataLoaded: 初始化HistoryManager ', topo.historyManager.toString());
     }
 
-    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded2: true
     });

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

@@ -36,14 +36,14 @@ function EdgeColorButton(props) {
     });
   };
 
-  var getLines = function getLines(list) {
+  var getCustomLines = function getCustomLines(list) {
     return list.filter(isCustomEdge);
   };
 
   useEffect(function () {
     if (graphLoaded) {
       var edges = getEdgesBySelection(topo);
-      var list = getLines(edges);
+      var list = getCustomLines(edges);
       setLineWidth(1); // eslint-disable-next-line eqeqeq
 
       if (selection.length == 1 && list.length === 1) {

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

@@ -32,21 +32,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.forwardRef(function (props, ref) {
   var value = props.value,
       onChange = props.onChange,

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

@@ -3,33 +3,20 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState } from 'react';
-import DropdownButton from "./components/DropdownButton";
+import FontColorDropdown from "./components/FontColorDropdown";
 import WidgetBox from "./WidgetBox";
-import ColorPanel from "../../../../../components/ColorPanel";
-import FontColorRange from "../../../../../components/ColorPanel/components/FontColorRange";
-import styles from "./FontColorButton.module.scss";
 import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 
-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 = 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();
@@ -111,84 +98,16 @@ function FontColorDropdown(props) {
     };
   }();
 
-  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
-  };
-
-  var onBlur = function onBlur() {// topo.historyManager.endTransaction();
-  };
-
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/React.createElement(DropdownButton, {
-    disabled: disabled,
-    trigger: icon
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.fontColor
-  }, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: '10px',
-      marginLeft: '-4px'
-    }
-  }, /*#__PURE__*/React.createElement(ColorPanel, {
-    value: color,
-    onChange: colorChang,
-    onPickerFocus: onFocus,
-    onPickerBlur: onBlur
-  }))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/React.createElement("div", {
-    className: styles.backgroundColor
-  }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
-    className: styles.backOpacity
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
-  }), /*#__PURE__*/React.createElement(FontColorRange, {
-    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.createElement("div", {
-    style: {
-      marginTop: '10px',
-      marginLeft: '-4px',
-      marginBottom: '3px'
-    }
-  }, /*#__PURE__*/React.createElement(ColorPanel, {
-    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.createElement(WidgetBox, {
     label: "\u6587\u5B57\u989C\u8272",
     tooltip: "\u6587\u5B57\u989C\u8272",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(FontColorDropdown, {
-    color: style.color,
-    background: style.background,
-    opacity: style.opacity,
+    value: style,
     fieldDisabled: fieldDisabled,
-    setStyle: setStyle,
-    onChange: function onChange(val) {
-      setStyle(val);
-    },
+    onColorChange: colorChang,
+    onBackgroundChange: backgroundChang,
+    onOpacityChange: backOpacityChange,
     topo: topo
   }));
 }

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

@@ -1,33 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import DropdownMenu from "./components/DropdownMenu";
-import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
+import FontFamilySelect from "./components/FontFamilySelect";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter";
 import WidgetBox from "./WidgetBox";
 
-function FontFamilySelect(props) {
-  var value = props.value,
-      onChange = props.onChange;
-  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: (items.includes(value) ? value : null) || '',
-    valueRender: function valueRender(val) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: 48
-        }
-      }, val || '微软雅黑');
-    },
-    onSelect: onChange
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      key: item
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontFamily: item
-      }
-    }, item));
-  }));
-}
-
 function FontFamilyWidget(props) {
   var topo = props.topo,
       showLabel = props.showLabel,

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

@@ -1,33 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import DropdownMenu from "./components/DropdownMenu";
-import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
+import React, { useEffect } from 'react';
+import FontSizeSelect from "./components/FontSizeSelect";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter";
 import WidgetBox from "./WidgetBox";
 
-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.createElement(DropdownMenu, {
-    value: "" + (value || ''),
-    valueRender: function valueRender(val) {
-      return /*#__PURE__*/React.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.createElement(DropdownMenu.Item, {
-      key: item
-    }, item);
-  }));
-}
-
 function FontSizeWidget(props) {
   var topo = props.topo,
       showLabel = props.showLabel,

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

@@ -1,26 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import variables from '@alifd/theme-19926/variables.js';
-import { isText } from "../../../../../utils/htElementUtils";
-import DropdownMenu from "./components/DropdownMenu";
-import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
+import FontStyleSelect from "./components/FontStyleSelect";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter";
 import WidgetBox from "./WidgetBox";
-import Tooltip from "../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) {
@@ -89,39 +70,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.createElement(DropdownMenu, {
+  }, /*#__PURE__*/React.createElement(FontStyleSelect, {
     value: value,
-    valueRender: function valueRender() {
-      return /*#__PURE__*/React.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.createElement(DropdownMenu.Item, {
-      key: item.key,
-      disabled: fieldDisabled[item.key]
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      trigger: /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
-        alt: ""
-      }), /*#__PURE__*/React.createElement("span", {
-        style: fieldDisabled[item.key] ? {} : {
-          color: variables['$color-text1-4']
-        }
-      }, item.label)),
-      align: "r",
-      popupStyle: {}
-    }, item.tooltip));
-  })));
+    fieldDisabled: fieldDisabled,
+    onChange: handleSelect
+  }));
 }
 
 export default textStyleSettingRouter(FontStyleButton, {

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

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["topo", "value", "onChange", "fieldDisabled"];
+
+/* eslint-disable jsx-a11y/alt-text */
+import React, { useState } from 'react';
+import DropdownButton from "./DropdownButton";
+import ColorPanel from "../../../../../../components/ColorPanel";
+import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
+import styles from "./FontColorDropdown.module.scss";
+
+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 = 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.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
+    alt: ""
+  });
+  return /*#__PURE__*/React.createElement(DropdownButton, {
+    disabled: disabled,
+    trigger: icon
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.fontColor
+  }, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    value: color,
+    colorPickerBalloonProps: colorPickerBalloonProps,
+    onChange: onColorChange,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  }))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/React.createElement("div", {
+    className: styles.backgroundColor
+  }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
+    className: styles.backOpacity
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    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.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    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 = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(FontColorDropdown, _extends({}, otherProps, {
+    color: value.color,
+    background: value.background,
+    opacity: value.opacity,
+    fieldDisabled: fieldDisabled,
+    setStyle: onChange,
+    onChange: onChange,
+    topo: topo
+  }));
+}
+
+ColorPanel.defaultProps = {
+  colorPickerBalloonProps: {},
+  backgroundPickerBalloonProps: {}
+};
+export default FontColorD;