@riil-frontend/component-topology 11.0.29 → 11.0.30

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

@@ -4,31 +4,37 @@ import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import Content from "./Content";
-
 /**
  * 线条颜色
  * @param {*} props 
  * @returns 
  */
+
 function EdgeColorButton(props) {
   var topo = props.topo,
-    showLabel = props.showLabel;
+      showLabel = props.showLabel;
+
   var _useState = useState(true),
-    disabled = _useState[0],
-    setDisabled = _useState[1];
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
   var _useState2 = useState(1),
-    lineWidth = _useState2[0],
-    setLineWidth = _useState2[1];
-  // 拓扑图是否加载
+      lineWidth = _useState2[0],
+      setLineWidth = _useState2[1]; // 拓扑图是否加载
+
+
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-    graphLoaded = _topo$store$useModelS.graphLoaded;
-  // 选中的元素
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
   var selection = topo.selectionModel.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 = [];
@@ -40,18 +46,21 @@ function EdgeColorButton(props) {
     });
     return arr;
   };
+
   useEffect(function () {
     if (graphLoaded) {
       var edges = getEdgesBySelection(topo);
       var list = getLines(edges);
-      setLineWidth(1);
-      // eslint-disable-next-line eqeqeq
+      setLineWidth(1); // eslint-disable-next-line eqeqeq
+
       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);
       }
+
       setDisabled(!list.length);
     }
   }, [selection, graphLoaded]);
+
   var colorOnChange = function colorOnChange(colors, type) {
     // eslint-disable-next-line eqeqeq
     if (type == 'select') topo.historyManager.beginTransaction();
@@ -67,17 +76,20 @@ function EdgeColorButton(props) {
           color: color
         }));
       }
-    });
-    // eslint-disable-next-line eqeqeq
+    }); // eslint-disable-next-line eqeqeq
+
     if (type == 'select') topo.historyManager.endTransaction();
   };
+
   var onPickerFocus = function onPickerFocus() {
     // topo.getHtTopo().getGraphView().dm().sm().ld()
     topo.historyManager.beginTransaction();
   };
+
   var onPickerBlur = function onPickerBlur() {
     topo.historyManager.endTransaction();
   };
+
   var lineSizeChange = function lineSizeChange(width) {
     var edges = getEdgesBySelection(topo);
     topo.historyManager.beginTransaction();
@@ -94,6 +106,7 @@ function EdgeColorButton(props) {
     });
     topo.historyManager.endTransaction();
   };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/Disable.svg",
     alt: ""
@@ -118,4 +131,5 @@ function EdgeColorButton(props) {
     lineWidth: lineWidth
   })));
 }
+
 export default EdgeColorButton;

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

@@ -11,8 +11,7 @@ var START_TYPE_OPTIONS = [{
   value: 'nil',
   label: '无',
   icon: 'topo_startEndPoint_icon_nothing'
-},
-// {
+}, // {
 //   value: 'sourceNoneCircle',
 //   label: '空心圆',
 //   icon: 'topo_startPoint_icon_hollow_cricle',
@@ -30,8 +29,7 @@ var END_TYPE_OPTIONS = [{
   value: 'nil',
   label: '无',
   icon: 'topo_startEndPoint_icon_nothing'
-},
-// {
+}, // {
 //   value: 'targetNoneCircle',
 //   label: '空心圆',
 //   icon: 'topo_endPoint_icon_hollow_cricle',
@@ -62,6 +60,7 @@ var LINE_MOLD_OPTIONS = [{
   label: '虚线2',
   icon: 'topo_lineMold_dotted_two'
 }];
+
 function getValuesByEdges(topo) {
   function getStartPoint(edge) {
     var icons = edge.s('icons') || {};
@@ -69,12 +68,14 @@ function getValuesByEdges(topo) {
       return icons[name];
     })[0] || 'nil';
   }
+
   function getEndPoint(edge) {
     var icons = edge.s('icons') || {};
     return ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].filter(function (name) {
       return icons[name];
     })[0] || 'nil';
   }
+
   function getEdgesValues(edges) {
     return edges.map(function (edge) {
       return {
@@ -86,6 +87,7 @@ function getValuesByEdges(topo) {
       };
     });
   }
+
   var selectionEdges = getEdgesBySelection(topo);
   var edgeValues = getEdgesValues(selectionEdges);
   var values = {
@@ -102,19 +104,23 @@ function getValuesByEdges(topo) {
     var isSame = vals.filter(function (val) {
       return val === vals[0];
     }).length === vals.length;
+
     if (isSame) {
       values[name] = vals[0];
     }
   });
   return values;
 }
+
 function EdgeType(props) {
   var topo = props.topo,
-    selection = props.selection,
-    _onChange = props.onChange;
+      selection = props.selection,
+      _onChange = props.onChange;
+
   var _useState = useState(false),
-    disable = _useState[0],
-    setDisable = _useState[1];
+      disable = _useState[0],
+      setDisable = _useState[1];
+
   var field = _Field.useField({
     autoUnmount: false,
     values: getValuesByEdges(topo),
@@ -126,6 +132,7 @@ function EdgeType(props) {
       }
     }
   });
+
   useEffect(function () {
     field.setValues(getValuesByEdges(topo));
     field.setValue('baseAgreement', topo.getHtTopo().getEdgeMultarc(getEdgesBySelection(topo)));
@@ -194,8 +201,7 @@ function EdgeType(props) {
   }, LINE_MOLD_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
-      key: index
-      // title={item.label}
+      key: index // title={item.label}
       ,
       onchange: _onChange
     }, /*#__PURE__*/React.createElement("img", {
@@ -205,6 +211,7 @@ function EdgeType(props) {
     }));
   })))));
 }
+
 EdgeType.defaultProps = {
   onChange: function onChange(v) {}
 };

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

@@ -32,18 +32,17 @@ var LINE_TYPE_OPTIONS = [{
   value: 'doublearc',
   label: '双弧线',
   icon: 'topo_linear_icon_arcline'
-}
-// {
+} // {
 //   value: 'points',
 //   label: '自由线形',
 //   icon: 'topo_linear_icon_pointsline',
 // },
 ];
-
 var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var value = props.value,
-    onChange = props.onChange,
-    disable = props.disable;
+      onChange = props.onChange,
+      disable = props.disable;
+
   function lineButton(item) {
     if (disable) {
       return /*#__PURE__*/React.createElement(_Button, {
@@ -55,6 +54,7 @@ var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }));
     } else {
       var _classNames;
+
       return /*#__PURE__*/React.createElement(_Button, {
         className: classNames(styles.redioBtn, (_classNames = {}, _classNames[styles.selected] = value === item.value, _classNames)),
         onClick: function onClick() {
@@ -67,6 +67,7 @@ var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }));
     }
   }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.lineType
   }, LINE_TYPE_OPTIONS.map(function (item, index) {

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

@@ -62,15 +62,16 @@ export var LINE_MOLD_MAP = {
   dottedLine: {
     lineType: 'dash',
     dashPattern: 1 // lineType为dash生效。为空默认为1。值：1/2/3
-  },
 
+  },
   dottedLine1: {
     lineType: 'dash',
     dashPattern: 3 // lineType为dash生效。为空默认为1。值：1/2/3
-  },
 
+  },
   dottedLine2: {
     lineType: 'dash',
     dashPattern: 2 // lineType为dash生效。为空默认为1。值：1/2/3
+
   }
 };

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

@@ -5,26 +5,28 @@ import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import { EDGE_END_POINT_TYPE_MAP, LINE_MOLD_MAP } from "./constants";
 import EdgeType from "./EdgeType";
-
 /**
  * 线形设置
  * @param {*} props 
  * @returns 
  */
+
 function EdgeTypeButton(props) {
   var topo = props.topo,
-    showLabel = props.showLabel,
-    editorProps = props.editorProps;
+      showLabel = props.showLabel,
+      editorProps = props.editorProps;
+
   var _useState = useState(true),
-    disabled = _useState[0],
-    setDisabled = _useState[1];
-  // FIXME 临时方案支持业务拓扑禁用连线设置
-  var linkDrawShapeEnabled = editorProps.linkDrawShapeEnabled;
+      disabled = _useState[0],
+      setDisabled = _useState[1]; // FIXME 临时方案支持业务拓扑禁用连线设置
+
+
+  var linkDrawShapeEnabled = editorProps.linkDrawShapeEnabled; // 拓扑图是否加载
 
-  // 拓扑图是否加载
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-    graphLoaded = _topo$store$useModelS.graphLoaded;
-  // 选中的元素
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
   var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {
     if (graphLoaded && linkDrawShapeEnabled !== false) {
@@ -34,25 +36,29 @@ function EdgeTypeButton(props) {
       setDisabled(true);
     }
   }, [selection, graphLoaded, linkDrawShapeEnabled]);
+
   var handleChange = function handleChange(name, value) {
     var edges = getEdgesBySelection(topo);
     var htTopo = topo.getHtTopo();
+
     if (name === 'lineButton') {
       setEdgesType(edges, value, topo);
       return;
     }
+
     if (name == 'baseAgreement') {
       /** TODO: 自动调整api调用*/
       htTopo.setEdgeMultarc(edges, value);
       return;
     }
+
     setEdgesAndChildren(topo, edges, function (edge) {
       if (name === 'startPoint') {
         // 删除设置
         ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (iconName) {
           return edge.removeStyleIcon(iconName);
-        });
-        // 设置
+        }); // 设置
+
         var scolor = edge.a('styles') && edge.a('styles').color || edge.getStyleMap()['edge.color'];
         edge.a('arrow.color', scolor || '#00B779');
         edge.s('icons', _extends({}, edge.s('icons')));
@@ -61,9 +67,10 @@ function EdgeTypeButton(props) {
         // 删除设置
         ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].forEach(function (iconName) {
           return edge.removeStyleIcon(iconName);
-        });
-        // 设置
+        }); // 设置
+
         var _scolor = edge.a('styles') && edge.a('styles').color || edge.getStyleMap()['edge.color'];
+
         edge.a('arrow.color', _scolor || '#00B779');
         edge.s('icons', _extends({}, edge.s('icons')));
         edge.addStyleIcon(value, EDGE_END_POINT_TYPE_MAP[value]);
@@ -71,12 +78,16 @@ function EdgeTypeButton(props) {
         // 修改实线虚线
         edge.a('lineMode', value);
         htTopo.setElementStyle(edge, 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);
           }
@@ -84,6 +95,7 @@ function EdgeTypeButton(props) {
       }
     });
   };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u7EBF\u5F62/Disable.svg",
     alt: ""
@@ -105,4 +117,5 @@ function EdgeTypeButton(props) {
     onChange: handleChange
   })));
 }
+
 export default EdgeTypeButton;

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

@@ -1,5 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState } from 'react';
 import DropdownButton from "./components/DropdownButton";
@@ -8,20 +9,24 @@ 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,
-    topo = props.topo,
-    opacity = props.opacity,
-    background = props.background,
-    setStyle = props.setStyle,
-    _props$fieldDisabled = props.fieldDisabled,
-    fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
+      onChange = props.onChange,
+      topo = props.topo,
+      opacity = props.opacity,
+      background = props.background,
+      setStyle = props.setStyle,
+      _props$fieldDisabled = props.fieldDisabled,
+      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
+
   var _useState = useState(false),
-    disabled = _useState[0],
-    setDisabled = _useState[1];
+      disabled = _useState[0],
+      setDisabled = _useState[1];
+
   var backgroundEnabled = fieldDisabled.background !== true;
   var opacityEnabled = fieldDisabled.opacity !== true;
+
   var backOpacityChange = function backOpacityChange(value) {
     topo.historyManager.beginTransaction();
     onChange({
@@ -29,76 +34,89 @@ function FontColorDropdown(props) {
     });
     topo.historyManager.endTransaction();
   };
+
   var colorChang = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value, type) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!(type === 'select')) {
               _context.next = 7;
               break;
             }
+
             topo.historyManager.beginTransaction();
             _context.next = 4;
             return setStyle({
               color: value
             });
+
           case 4:
             topo.historyManager.endTransaction();
             _context.next = 8;
             break;
+
           case 7:
             setStyle({
               background: value
             });
+
           case 8:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
+
     return function colorChang(_x, _x2) {
       return _ref.apply(this, arguments);
     };
   }();
+
   var backgroundChang = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value, type) {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (!(type === 'select')) {
               _context2.next = 7;
               break;
             }
+
             topo.historyManager.beginTransaction();
             _context2.next = 4;
             return setStyle({
               background: value
             });
+
           case 4:
             topo.historyManager.endTransaction();
             _context2.next = 8;
             break;
+
           case 7:
             setStyle({
               background: value
             });
+
           case 8:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
+
     return function backgroundChang(_x3, _x4) {
       return _ref2.apply(this, arguments);
     };
   }();
-  var onFocus = function onFocus() {
-    // topo.historyManager.beginTransaction();
+
+  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
   };
-  var onBlur = function onBlur() {
-    // topo.historyManager.endTransaction();
+
+  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: ""
@@ -135,8 +153,8 @@ function FontColorDropdown(props) {
     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}
+    defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
+
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: '10px',
@@ -151,12 +169,13 @@ function FontColorDropdown(props) {
     onPickerBlur: onBlur
   })))));
 }
+
 function FontColorButton(props) {
   var showLabel = props.showLabel,
-    topo = props.topo,
-    style = props.style,
-    setStyle = props.setStyle,
-    fieldDisabled = props.fieldDisabled;
+      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",
@@ -173,6 +192,7 @@ function FontColorButton(props) {
     topo: topo
   }));
 }
+
 export default textStyleSettingRouter(FontColorButton, {
   names: ['color', 'background', 'opacity']
 });

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

@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
 import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
+
 function FontFamilySelect(props) {
   var value = props.value,
-    onChange = props.onChange;
+      onChange = props.onChange;
   var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     value: (items.includes(value) ? value : null) || '',
@@ -26,11 +27,12 @@ function FontFamilySelect(props) {
     }, item));
   }));
 }
+
 function FontFamilyWidget(props) {
   var topo = props.topo,
-    showLabel = props.showLabel,
-    style = props.style,
-    setStyle = props.setStyle;
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u5B57\u4F53",
     tooltip: "\u5B57\u4F53",
@@ -46,6 +48,7 @@ function FontFamilyWidget(props) {
     }
   }));
 }
+
 export default textStyleSettingRouter(FontFamilyWidget, {
   names: ['fontFamily']
 });

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

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
 import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
+
 function FontSizeSelect(props) {
   var value = props.value,
-    disabled = props.disabled,
-    onChange = props.onChange;
+      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 || ''),
@@ -26,15 +27,15 @@ function FontSizeSelect(props) {
     }, item);
   }));
 }
+
 function FontSizeWidget(props) {
   var topo = props.topo,
-    showLabel = props.showLabel,
-    style = props.style,
-    fieldDisabled = props.fieldDisabled,
-    setStyle = props.setStyle;
-  var disabled = fieldDisabled.fontSize;
+      showLabel = props.showLabel,
+      style = props.style,
+      fieldDisabled = props.fieldDisabled,
+      setStyle = props.setStyle;
+  var disabled = fieldDisabled.fontSize; // 选中的元素
 
-  // 选中的元素
   var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {}, [selection]);
   return /*#__PURE__*/React.createElement(WidgetBox, {
@@ -54,6 +55,7 @@ function FontSizeWidget(props) {
     }
   }));
 }
+
 export default textStyleSettingRouter(FontSizeWidget, {
   names: ['fontSize']
 });