@luck-design-biz/luckda 0.0.24-1 → 0.0.24-2

package/lib/lowcode/painter/panel-section/StylePanel/BorderSelector.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _borderSelector = _interopRequireDefault(require("../../style/border-selector.less"));
+/**
+ * 边框选择组件
+ */
+function _default(_ref) {
+  var onChange = _ref.onChange;
+  var _useState = (0, _react.useState)('all'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderSelector.default['lc-painter-panel-section-style-panel-border-selector']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderSelector.default['selector-box']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderSelector.default['selector-row']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-row'], " ").concat(_borderSelector.default['b-left'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-wrapper']).concat(curSelect === 'left' ? " ".concat(_borderSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('left');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderSelector.default['selector-item']
+  }, "\u2523")))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-row'], " ").concat(_borderSelector.default['b-center'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-wrapper']).concat(curSelect === 'top' ? " ".concat(_borderSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderSelector.default['selector-item']
+  }, "\u2533")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(_borderSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderSelector.default['selector-item']
+  }, "\u254B")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-wrapper']).concat(curSelect === 'bottom' ? " ".concat(_borderSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderSelector.default['selector-item']
+  }, "\u253B"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-row'], " ").concat(_borderSelector.default['b-right'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderSelector.default['selector-wrapper']).concat(curSelect === 'right' ? " ".concat(_borderSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('right');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderSelector.default['selector-item']
+  }, "\u252B")))));
+}

package/lib/lowcode/painter/panel-section/StylePanel/Display.js

@@ -6,14 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _react = _interopRequireDefault(require("react"));
-var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
 var _uiDesign = require("@luck-helper/ui-design");
 var _utils = require("@luck-design-biz/base/utils");
 var _antd = require("luck-design/antd");
 var _display = _interopRequireDefault(require("../../style/display.less"));
 var _DisplaySvg = _interopRequireDefault(require("./DisplaySvg"));
 var _StyleContext = require("./StyleContext");
-function _default() {
+var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
+var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
+
+/**
+ * 显示样式设置控件
+ */
+function _default(_ref) {
+  var label = _ref.label;
   var style = (0, _StyleContext.useStyle)();
   var dispatch = (0, _StyleContext.useStyleDispatch)();
   var handleDisplayChange = function handleDisplayChange(id, value) {
@@ -25,11 +31,9 @@ function _default() {
       }
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
-    label: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.display',
-      label: '显示'
-    }),
+  return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {
+    label: label,
+    highLightFields: textRelatedStyles,
     collapsed: style.display != 'flex',
     addon: style.display == 'flex' ? /*#__PURE__*/_react.default.createElement(FlexTypeSelector, {
       dispatch: dispatch
@@ -122,10 +126,10 @@ function parseDirection(input) {
     isReverse: isReverse
   };
 }
-var SvgLabel = function SvgLabel(_ref) {
-  var name = _ref.name,
-    tip = _ref.tip,
-    pre = _ref.pre;
+var SvgLabel = function SvgLabel(_ref2) {
+  var name = _ref2.name,
+    tip = _ref2.tip,
+    pre = _ref2.pre;
   var style = (0, _StyleContext.useStyle)();
   var direct = null;
   var SvgComponent = null;

package/lib/lowcode/painter/panel-section/StylePanel/Font.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@luck-design-biz/base/utils");
+var _antd = require("luck-design/antd");
+var _FontEditor = _interopRequireDefault(require("./FontEditor"));
+var _StyleContext = require("./StyleContext");
+var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
+var Option = _antd.Select.Option;
+var textRelatedStyles = ['font-weight', 'font-style', 'color', 'font-size', 'line-height', 'text-align', 'text-decoration'];
+
+/**
+ * 文字设置组件
+ */
+function _default() {
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var _useState = (0, _react.useState)(determineSelected(style)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    curSelected = _useState2[0],
+    setCurSelected = _useState2[1];
+  var _useState3 = (0, _react.useState)(curSelected !== 'custom'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  var handleChange = function handleChange(value) {
+    if (value == 'custom') {
+      setCollapsed(false);
+    }
+    if (value == 'default') {
+      textRelatedStyles.forEach(function (item) {
+        delete style[item];
+      });
+    }
+    var newStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), presetStyles[value]);
+    setCurSelected(value);
+    dispatch({
+      type: 'new',
+      payload: newStyle
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {
+    addon: /*#__PURE__*/_react.default.createElement(_FontEditor.default, null),
+    collapsed: collapsed,
+    highLightFields: textRelatedStyles,
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.font',
+      label: '文字'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    onChange: handleChange,
+    value: curSelected
+  }, /*#__PURE__*/_react.default.createElement(Option, {
+    value: "h1"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h1',
+    label: '一级标题'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "h2"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h2',
+    label: '二级标题'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "h3"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h3',
+    label: '三级标题'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "paragraph"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.paragraph',
+    label: '段落'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "default"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.default',
+    label: '无'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "custom"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.custom',
+    label: '自定义'
+  }))));
+}
+var presetStyles = {
+  h1: {
+    'font-weight': 700,
+    'font-size': '20px',
+    'line-height': '30px'
+  },
+  h2: {
+    'font-weight': 700,
+    'font-size': '16px',
+    'line-height': '24px'
+  },
+  h3: {
+    'font-weight': 700,
+    'font-size': '14px',
+    'line-height': '22px'
+  },
+  paragraph: {
+    'font-weight': 'normal',
+    'font-size': '14px',
+    'line-height': '22px'
+  },
+  default: {},
+  custom: {}
+};
+function determineSelected(style) {
+  // 检查style是否包含任何与文字相关的样式属性
+  var styleProps = Object.keys(style);
+  var containsTextRelatedProps = styleProps.some(function (prop) {
+    return textRelatedStyles.includes(prop);
+  });
+  if (!containsTextRelatedProps) {
+    return 'default';
+  }
+  var _loop = function _loop() {
+      var key = _Object$keys[_i];
+      if (key === 'default' || key === 'custom') return 0; // continue
+      var preset = presetStyles[key];
+      var isPresetMatch = true;
+      var _iterator = (0, _createForOfIteratorHelper2.default)(textRelatedStyles),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var prop = _step.value;
+          // 将两边的值都转换为字符串再比较
+          var styleValue = String(style[prop]);
+          var presetValue = String(preset[prop]);
+          if (style[prop] !== undefined && preset[prop] !== undefined && styleValue !== presetValue) {
+            isPresetMatch = false;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (isPresetMatch) {
+        // 检查style中是否有额外的与文字相关的属性不在当前preset中
+        var isExtraPropsInStyle = styleProps.some(function (prop) {
+          return textRelatedStyles.includes(prop) && !(prop in preset);
+        });
+        if (!isExtraPropsInStyle) {
+          return {
+            v: key
+          }; // 找到完全匹配的预设
+        }
+      }
+    },
+    _ret;
+  for (var _i = 0, _Object$keys = Object.keys(presetStyles); _i < _Object$keys.length; _i++) {
+    _ret = _loop();
+    if (_ret === 0) continue;
+    if (_ret) return _ret.v;
+  }
+  return 'custom';
+}