@riil-frontend/component-topology 2.3.20-dev.1 → 2.4.1

package/lib/core/editor/components/settings/node/NodePropertyView.js

@@ -1,15 +1,15 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = TextPropertyView;
-
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+exports["default"] = NodePropertyView;
 
 var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
 
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
@@ -33,99 +33,54 @@ var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeLi
 
 var _icon = require("../group/GroupNodeList/icon");
 
-var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput"));
+var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
+
+var _textModule = _interopRequireDefault(require("../../../../common/text.module.scss"));
 
-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); }
+var _TopoTreeSelect = _interopRequireDefault(require("./TopoTreeSelect"));
 
-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 _NodeIconSelect = _interopRequireDefault(require("./NodeIconSelect"));
+
+var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateResourceButton"));
 
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,
     Col = _grid["default"].Col;
 var Option = _select["default"].Option;
 var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
-
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
-  }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
+var RadioGroup = _radio["default"].Group;
 
 function parseValues(values) {
-  return (0, _extends2["default"])({}, values, fontStyleUtil.toMap(values['styleMap.label.font'], 'styleMap.label.fontStyle.'), {
-    // 层间线
-    'styleMap.borderType': values['styleMap.dash'] === false ? 'solid' : 'dash',
-    'styleMap.dashColor': values['styleMap.dashColor'] || 'rgb(173,173,173)',
-    'styleMap.borderWidth': values['styleMap.borderWidth'] || 1
-  });
+  return (0, _extends2["default"])({}, values);
 }
 
-function TextPropertyView(props) {
+function getBindType(values) {
+  if (values.tag) {
+    return 'resource';
+  }
+
+  if (values.attr.bindType) {
+    return values.attr.bindType;
+  }
+
+  return 'none';
+}
+
+function NodePropertyView(props) {
+  var _topo$options$editor;
+
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
+  var bindType = getBindType(values);
 
   var field = _field["default"].useField({
     autoUnmount: false,
     values: parseValues(values),
     onChange: function onChange(name, value) {
-      var newValues = field.getValues(); // 文字font样式
-
-      if (name.startsWith('styleMap.label.fontStyle.')) {
-        name = 'styleMap.label.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.label.fontStyle.'));
-      } // 层间线
-
-
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
-      }
+      var newValues = field.getValues();
 
       if (values[name] !== value) {
         _onChange(name, value, newValues);
@@ -133,67 +88,108 @@ function TextPropertyView(props) {
     }
   });
 
+  var setBindType = function setBindType(value) {
+    _onChange('attrObject.bindType', value);
+  };
+
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_tab["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+      defaultExpandedKeys: ['相关资源'],
+      style: {
+        border: 'none'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+      key: "\u76F8\u5173\u8D44\u6E90",
+      title: "\u76F8\u5173\u8D44\u6E90"
+    }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+      field: field,
+      labelAlign: "top"
+    }, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u5173\u8054\u7C7B\u578B"
+    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
+      name: "bindType",
+      value: bindType,
+      style: {
+        width: '100%',
+        marginRight: 8
+      },
+      onChange: setBindType
+    }, /*#__PURE__*/_react["default"].createElement(Option, {
+      value: "none"
+    }, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
+      value: "resource"
+    }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
+      value: "topo"
+    }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u5173\u8054\u8D44\u6E90"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _textModule["default"].textEllipsis,
+      style: {
+        flex: 1,
+        paddingRight: 16,
+        color: '#4D6277'
+      },
+      title: values.tag ? values.name : null
+    }, values.tag ? values.name : '—'), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
+      node: values,
+      topo: topo,
+      topoEditApi: topoEditApi
+    }))), bindType === 'topo' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u5173\u8054\u62D3\u6251"
+    }, /*#__PURE__*/_react["default"].createElement(_TopoTreeSelect["default"], null)))));
+  };
+
+  var renderViewSetting = function renderViewSetting() {
+    return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+      field: field,
+      labelAlign: "top"
+    }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+      defaultExpandedKeys: ['显示设置'],
+      style: {
+        border: 'none'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+      key: "\u663E\u793A\u8BBE\u7F6E",
+      title: "\u663E\u793A\u8BBE\u7F6E"
+    }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u56FE\u7247\u540D\u79F0"
+    }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+      name: "attrObject.name"
+    })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u663E\u793A\u56FE\u7247"
+    }, /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {
+      name: "image",
+      topo: topo
+    })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u56FE\u7247\u5C3A\u5BF8"
+    }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
+      value: {
+        width: values.width,
+        height: values.height
+      },
+      onChange: function onChange(size) {
+        _onChange('width', size.width);
+
+        _onChange('height', size.height);
+      }
+    }))))));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  return /*#__PURE__*/_react["default"].createElement("div", null, showRelateResource ? /*#__PURE__*/_react["default"].createElement(_tab["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u6570\u636E",
     key: "1"
-  }, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['相关资源'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u76F8\u5173\u8D44\u6E90",
-    title: "\u76F8\u5173\u8D44\u6E90"
-  }, "\u5173\u8054\u8D44\u6E90", /*#__PURE__*/_react["default"].createElement("br", null), values.name, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    text: true,
-    onClick: function onClick() {
-      topoEditApi.bindNodeResource({});
-    }
-  })))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+  }, renderData()), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u8BBE\u7F6E",
     key: "2"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['显示设置'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u540D\u79F0"
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    name: "attrObject.name"
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u663E\u793A\u56FE\u7247"
-  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
-    name: "image",
-    style: {
-      width: '100%',
-      marginRight: 8
-    }
-  }, Object.keys((0, _icon.getIconMap)(topo)).map(function (id) {
-    return /*#__PURE__*/_react["default"].createElement(Option, {
-      key: id,
-      value: id
-    }, id);
-  }))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u56FE\u7247\u5C3A\u5BF8"
-  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
-    value: {
-      width: values.width,
-      height: values.height
-    },
-    onChange: function onChange(size) {
-      _onChange('width', size.width);
-
-      _onChange('height', size.height);
-    }
-  })))))))));
+  }, renderViewSetting())) : renderViewSetting());
 }

package/lib/core/editor/components/settings/node/NodeRelateResourceButton.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function NodeRelateResourceButton(props: any): any | null;

package/lib/core/editor/components/settings/node/NodeRelateResourceButton.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodeRelateResourceButton;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _react = _interopRequireDefault(require("react"));
+
+/**
+ * @return {React.ReactNode | null}
+ */
+function NodeRelateResourceButton(props) {
+  var _node$attr$data;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      node = props.node;
+  var hide = ((_node$attr$data = node.attr.data) === null || _node$attr$data === void 0 ? void 0 : _node$attr$data.relateResource) === false;
+  return !hide ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    type: "primary",
+    text: true,
+    onClick: function onClick() {
+      topoEditApi.bindNodeResource({});
+    }
+  }, "\u9009\u62E9\u8D44\u6E90") : null;
+}
+
+;

package/lib/core/editor/components/settings/node/TopoTreeSelect.d.ts

@@ -0,0 +1 @@
+export default function TopoTreeSelect(props: any): JSX.Element;

package/lib/core/editor/components/settings/node/TopoTreeSelect.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = TopoTreeSelect;
+
+var _treeSelect = _interopRequireDefault(require("@alifd/next/lib/tree-select"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var TreeNode = _treeSelect["default"].Node;
+
+function TopoTreeSelect(props) {
+  var onChange = props.onChange;
+  return /*#__PURE__*/_react["default"].createElement(_treeSelect["default"], {
+    treeDefaultExpandAll: true,
+    onChange: onChange,
+    style: {
+      width: '100%',
+      marginRight: 8
+    }
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "1",
+    value: "1",
+    label: "Component"
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "2",
+    value: "2",
+    label: "Form"
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "4",
+    value: "4",
+    label: "Input"
+  }), /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "5",
+    value: "5",
+    label: "Select",
+    disabled: true
+  })), /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "3",
+    value: "3",
+    label: "Display"
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "6",
+    value: "6",
+    label: "Table"
+  }))));
+}
+
+;

package/lib/core/editor/components/settings/text/TextPropertyView.js

@@ -1,101 +1,35 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports["default"] = TextPropertyView;
 
-var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
-
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
-
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
-var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
-
-var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
-
-var _GroupNodeList = _interopRequireDefault(require("../group/GroupNodeList/GroupNodeList"));
-
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
-
-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); }
+var _TextStyle = _interopRequireDefault(require("../common/text/TextStyle"));
 
-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 _fontStyleUtil = _interopRequireDefault(require("../common/text/fontStyleUtil"));
 
-var FormItem = _form["default"].Item;
-var Row = _grid["default"].Row,
-    Col = _grid["default"].Col;
-var Option = _select["default"].Option;
 var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
-
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
-  }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
 
 function parseValues(values) {
-  return (0, _extends2["default"])({}, values, fontStyleUtil.toMap(values['styleMap.label.font'], 'styleMap.label.fontStyle.'), {
-    // 层间线
-    'styleMap.borderType': values['styleMap.dash'] === false ? 'solid' : 'dash',
-    'styleMap.dashColor': values['styleMap.dashColor'] || 'rgb(173,173,173)',
-    'styleMap.borderWidth': values['styleMap.borderWidth'] || 1
+  return (0, _extends2["default"])({}, values, {
+    'styleMap.textObj': {
+      color: values.styleMap['text.color'],
+      underline: values.styleMap['text.decoration'] === 'underline',
+      font: _fontStyleUtil["default"].toMap(values.styleMap['text.font'])
+    }
   });
 }
 
@@ -111,15 +45,18 @@ function TextPropertyView(props) {
     onChange: function onChange(name, value) {
       var newValues = field.getValues(); // 文字font样式
 
-      if (name.startsWith('styleMap.label.fontStyle.')) {
-        name = 'styleMap.label.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.label.fontStyle.'));
-      } // 层间线
+      if (name === 'styleMap.textObj') {
+        _onChange('styleMap.text.color', value.color, newValues);
+
+        _onChange('styleMap.label.color', value.color, newValues);
 
+        var font = _fontStyleUtil["default"].build(value);
 
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
+        _onChange('styleMap.text.font', font, newValues);
+
+        _onChange('styleMap.text.decoration', value.underline ? 'underline' : undefined, newValues);
+
+        return;
       }
 
       if (values[name] !== value) {
@@ -131,84 +68,25 @@ function TextPropertyView(props) {
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u540D\u79F0",
+  return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      paddingLeft: 12,
-      paddingRight: 12
+      paddingTop: 8
     }
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    name: "name"
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
     defaultExpandedKeys: ['显示设置'],
     style: {
       border: 'none'
     }
   }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u6587\u672C"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5B57\u4F53"
-  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
-    name: "styleMap.label.fontStyle.fontFamily",
+    title: "\u663E\u793A\u8BBE\u7F6E",
     style: {
-      width: '100%',
-      marginRight: 8
+      padding: 0
     }
-  }, /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "\u5B8B\u4F53"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u5B8B\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "\u9ED1\u4F53"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u9ED1\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "Arial"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      fontFamily: 'Arial'
-    }
-  }, "Arial")))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5B57\u53F7",
-    hasFeedback: true,
-    required: true,
-    requiredMessage: "\u4E0D\u80FD\u4E3A\u7A7A",
-    requiredTrigger: "onBlur",
-    asterisk: false
-  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
-    name: "styleMap.label.fontStyle.fontSize",
-    min: 8,
-    max: 36,
-    style: {
-      width: '100%',
-      marginRight: 8
-    },
-    placeholder: "\u8BF7\u8F93\u5165"
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u6837\u5F0F"
-  }, /*#__PURE__*/_react["default"].createElement(RadioGroup, {
-    shape: "button"
-  }, /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-    id: "banana",
-    value: "banana"
-  }, "B"), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-    id: "watermelon",
-    value: "watermelon"
-  }, "I"), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-    id: "peach",
-    value: "peach"
-  }, "U"))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u989C\u8272"
-  }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
-    name: "styleMap.label.color",
-    align: "bl"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_TextStyle["default"], {
+    name: "styleMap.textObj"
   })))))));
 }

package/lib/core/editor/components/settings/view/ViewPropertyView.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -35,11 +37,7 @@ var _LineType = _interopRequireDefault(require("../common/LineType"));
 
 var _NodeAlignType = _interopRequireDefault(require("../common/NodeAlignType"));
 
-var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput"));
-
-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 _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
 
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,