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

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

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../../style/border-selector.less";
+
+/**
+ * 边框选择组件
+ */
+export default function (_ref) {
+  var onChange = _ref.onChange;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-selector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-row']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-left'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2523")))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-center'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2533")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u254B")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u253B"))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-right'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u252B")))));
+}

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

@@ -1,12 +1,18 @@
 import React from 'react';
-import PanelItem from "../../components/PanelItem";
 import { Segmented } from '@luck-helper/ui-design';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import { Tooltip } from 'luck-design/antd';
 import styles from "../../style/display.less";
 import DisplaySvg from "./DisplaySvg";
 import { useStyle, useStyleDispatch } from "./StyleContext";
-export default function () {
+import HighLightPanel from "./HighLightPanel";
+var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
+
+/**
+ * 显示样式设置控件
+ */
+export default function (_ref) {
+  var label = _ref.label;
   var style = useStyle();
   var dispatch = useStyleDispatch();
   var handleDisplayChange = function handleDisplayChange(id, value) {
@@ -18,11 +24,9 @@ export default function () {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(PanelItem, {
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.display',
-      label: '显示'
-    }),
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    label: label,
+    highLightFields: textRelatedStyles,
     collapsed: style.display != 'flex',
     addon: style.display == 'flex' ? /*#__PURE__*/React.createElement(FlexTypeSelector, {
       dispatch: dispatch
@@ -115,10 +119,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 = useStyle();
   var direct = null;
   var SvgComponent = null;

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

@@ -0,0 +1,162 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { Select } from 'luck-design/antd';
+import FontEditor from "./FontEditor";
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import HighLightPanel from "./HighLightPanel";
+var Option = Select.Option;
+var textRelatedStyles = ['font-weight', 'font-style', 'color', 'font-size', 'line-height', 'text-align', 'text-decoration'];
+
+/**
+ * 文字设置组件
+ */
+export default function () {
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var _useState = useState(determineSelected(style)),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelected = _useState2[0],
+    setCurSelected = _useState2[1];
+  var _useState3 = useState(curSelected !== 'custom'),
+    _useState4 = _slicedToArray(_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 = _objectSpread(_objectSpread({}, style), presetStyles[value]);
+    setCurSelected(value);
+    dispatch({
+      type: 'new',
+      payload: newStyle
+    });
+  };
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    addon: /*#__PURE__*/React.createElement(FontEditor, null),
+    collapsed: collapsed,
+    highLightFields: textRelatedStyles,
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.font',
+      label: '文字'
+    })
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    onChange: handleChange,
+    value: curSelected
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "h1"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h1',
+    label: '一级标题'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "h2"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h2',
+    label: '二级标题'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "h3"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h3',
+    label: '三级标题'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "paragraph"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.paragraph',
+    label: '段落'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "default"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.default',
+    label: '无'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "custom"
+  }, 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 = _createForOfIteratorHelper(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';
+}