@fonixtree/magic-design 2.0.162 → 2.0.163

package/lib/meta-comp/config-panels/TextConfig/index.js

@@ -0,0 +1,384 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeTypeList = exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd4");
+
+var _TextLabel = _interopRequireDefault(require("./TextLabel"));
+
+var _UnderlineSelect = _interopRequireDefault(require("./UnderlineSelect"));
+
+var _coreUtil = require("../../../utils/coreUtil");
+
+var _locale = require("../../../locale");
+
+var _common = require("../../../common");
+
+var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
+
+var _mobx = require("../../../mobx");
+
+var _constants = require("../../../constants");
+
+var _BaseConfig = _interopRequireDefault(require("../BaseConfig"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+/** 预设字体样式 */
+var sizeTypeList = [{
+  key: 'Customize font styles'
+}, {
+  key: 'Headline 1',
+  fontFamily: 'Montserrat',
+  fontSize: 42,
+  pcFontSize: 52,
+  fontWeight: 600
+}, {
+  key: 'Headline 2',
+  fontFamily: 'Montserrat',
+  fontSize: 32,
+  pcFontSize: 42,
+  fontWeight: 600
+}, {
+  key: 'Headline 3',
+  fontFamily: 'Montserrat',
+  fontSize: 30,
+  pcFontSize: 38,
+  fontWeight: 600
+}, {
+  key: 'Title 1',
+  fontFamily: 'Montserrat',
+  fontSize: 28,
+  pcFontSize: 32,
+  fontWeight: 400
+}, {
+  key: 'Title 2',
+  fontFamily: 'Montserrat',
+  fontSize: 20,
+  pcFontSize: 24,
+  fontWeight: 400
+}, {
+  key: 'Title 3',
+  fontFamily: 'Montserrat',
+  fontSize: 18,
+  pcFontSize: 20,
+  fontWeight: 400
+}, {
+  key: 'Body 1',
+  fontFamily: 'Open Sans',
+  fontSize: 16,
+  pcFontSize: 18,
+  fontWeight: 400
+}, {
+  key: 'Body 2',
+  fontFamily: 'Open Sans',
+  fontSize: 14,
+  pcFontSize: 16,
+  fontWeight: 400
+}, {
+  key: 'Body 3',
+  fontFamily: 'Open Sans',
+  fontSize: 12,
+  pcFontSize: 14,
+  fontWeight: 400
+}];
+exports.sizeTypeList = sizeTypeList;
+
+var TextConfig =
+/** @class */
+function (_super) {
+  __extends(TextConfig, _super);
+
+  function TextConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
+
+    _this.onSizeTypeChange = function (v, obj) {
+      _extends(obj, sizeTypeMap[v]);
+    };
+
+    _this.getContentWidth = function (textData) {
+      var baseWidth = (window.magicDesign.device == 'pc' ? textData.pcWidth : textData.width) || 100;
+      return Math.min(baseWidth, 100);
+    };
+
+    return _this;
+  }
+
+  TextConfig.prototype.componentDidMount = function () {
+    window.document.addEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.componentWillUnmount = function () {
+    window.document.removeEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        data = _a.data,
+        outputType = _a.outputType;
+    var textData = _mobx.store.textSelection ? _mobx.store.textSelection : data.content;
+
+    if (!data.spacing) {
+      data.spacing = {
+        pc: {},
+        mobile: {}
+      };
+    }
+
+    var _fontWeightList = textData.fontFamily === 'Montserrat' ? _constants.fontWeightList : _constants.otherFontWeightList;
+
+    var source = [{
+      key: '1',
+      name: (0, _locale.i18n)('CONTENT'),
+      value: /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('FONT_STYLE')
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+        onChange: function onChange(v) {
+          if (v == 'Customize font styles') {
+            textData.sizeType = v;
+          } else {
+            var findOne = sizeTypeList.find(function (t) {
+              return t.key == v;
+            });
+
+            _extends(textData, __assign(__assign({}, findOne), {
+              sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
+            }));
+          }
+
+          _this.selfRender();
+        },
+        value: textData.sizeType
+      }, sizeTypeList.map(function (sizeType) {
+        return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          key: sizeType.key,
+          style: {
+            lineHeight: '1.1em',
+            fontFamily: sizeType.fontFamily,
+            fontWeight: sizeType.fontWeight,
+            fontSize: (0, _coreUtil.isPc)() ? sizeType.pcFontSize : sizeType.fontSize
+          },
+          value: sizeType.key
+        }, sizeType.key);
+      }))), textData.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('FONT_FAMILY')
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+        onChange: function onChange(v) {
+          textData.fontFamily = v;
+
+          _this.selfRender();
+        },
+        value: textData.fontFamily
+      }, _constants.fontFamilyList.map(function (v) {
+        return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          label: v.name,
+          value: v.value
+        }, v.name);
+      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('FONT_WEIGHT')
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+        onChange: function onChange(v) {
+          textData.fontWeight = v;
+
+          _this.selfRender();
+        },
+        value: textData.fontWeight
+      }, _fontWeightList.map(function (v) {
+        return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          label: v.name,
+          value: v.value
+        }, v.name);
+      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('FONT_SIZE')
+      }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+        onChange: function onChange(_a) {
+          var count = _a.count;
+
+          if (window.magicDesign.device == 'pc') {
+            textData.pcFontSize = count;
+          } else {
+            textData.fontSize = count;
+          }
+
+          _this.selfRender();
+        },
+        unit: "px",
+        value: {
+          count: window.magicDesign.device == 'pc' ? textData.pcFontSize : textData.fontSize
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: ""
+      }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
+        onChange: function onChange(value) {
+          _extends(textData, value);
+
+          _this.selfRender();
+        },
+        showBgColor: true,
+        showTextAlign: true,
+        value: textData
+      })), window.magicDesign.outputType != 'html' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        split: true,
+        title: (0, _locale.i18n)('URL')
+      }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        disabled: textData.urlDisabled,
+        onChange: function onChange(v) {
+          textData.clickUrl = v;
+
+          _this.selfRender();
+        },
+        value: textData.clickUrl
+      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('CONTENT_WIDTH')
+      }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+        maxVal: 100,
+        minVal: 1,
+        onChange: function onChange(_a) {
+          var count = _a.count;
+
+          if (window.magicDesign.device == 'pc') {
+            textData.pcWidth = count;
+          } else {
+            textData.width = count;
+          }
+
+          _this.selfRender();
+        },
+        unit: "%",
+        value: {
+          count: this.getContentWidth(textData)
+        }
+      })))
+    }, {
+      key: '2',
+      name: (0, _locale.i18n)('SPACING'),
+      value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+        configCompSpace: false,
+        data: data.spacing
+      })
+    }, {
+      key: '3',
+      name: (0, _locale.i18n)('UNDERLINE_SETTING'),
+      value: /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        split: true,
+        title: (0, _locale.i18n)('UNDERLINE_COLOR')
+      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+        colorType: "rgba",
+        onChange: function onChange(v) {
+          data.underline.textDecorationColor = v;
+
+          _this.selfRender();
+        },
+        value: data.underline.textDecorationColor
+      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('UNDERLINE_STYLE')
+      }, /*#__PURE__*/_react["default"].createElement(_UnderlineSelect["default"], {
+        onChange: function onChange(v) {
+          data.underline.textDecorationStyle = v;
+
+          _this.selfRender();
+        },
+        style: {
+          width: '100%'
+        },
+        value: data.underline.textDecorationStyle
+      }))),
+      metaOption: data.underline,
+      toggleType: 'checkbox'
+    }];
+
+    if (outputType == 'html') {
+      source.unshift({
+        key: '0',
+        name: (0, _locale.i18n)('LABEL'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextLabel["default"], {
+          data: data
+        })
+      });
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.containerRef,
+      className: "m-text-config",
+      style: {
+        paddingTop: 0
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Collapse // divider="dashed"
+    // headerSize="small"
+    , {
+      onRefresh: this.selfRender,
+      source: source,
+      type: "arrow"
+    }));
+  };
+
+  TextConfig.defaultProps = {
+    data: null
+  };
+  return TextConfig;
+}(_BaseConfig["default"]);
+
+var _default = TextConfig;
+exports["default"] = _default;

package/lib/meta-comp/config-panels/TextConfig/index.less

@@ -0,0 +1,22 @@
+.m-text-config {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+  padding-top: 12px;
+  background-color: #F5F6F7;
+  border-radius: 6px;
+
+  .edit-text-btn {
+    margin: 8px auto;
+    padding: 6px 16px;
+    background-color: #2e54eb;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #0837f4;
+    }
+  }
+}

package/lib/mobx/Frame.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = void 0;
+
+var _mobx = require("mobx");
+
+var _storeUtil = require("../utils/storeUtil");
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var CACHE_KEY = 'FRAME';
+var whiteList = [];
+
+var Frame =
+/** @class */
+function () {
+  function Frame() {
+    this.confirmState = {
+      visible: false,
+      title: '',
+      content: '',
+      okText: 'Ok',
+      cancelText: 'Cancel',
+      quillRef: null,
+      onOk: function onOk() {},
+      onCancel: function onCancel() {}
+    };
+    /* 移动端 Modal弹窗 */
+
+    this.modalState = {
+      visible: false,
+      hideCancel: true,
+      title: '',
+      message: '',
+      messageImg: '',
+      confirmText: 'YES',
+      cancelText: 'NO',
+      onConfirm: function onConfirm() {},
+      onCancel: function onCancel() {}
+    };
+    this.textModalState = {
+      visible: false,
+      onOk: function onOk() {},
+      close: function close() {}
+    };
+    (0, _mobx.makeObservable)(this, {
+      confirmState: _mobx.observable,
+      textModalState: _mobx.observable,
+      modalState: _mobx.observable
+    });
+  }
+  /** 修改状态 */
+
+
+  Frame.prototype.setState = function (data) {
+    var _this = this;
+
+    var propertyList = Object.getOwnPropertyNames(data);
+    propertyList.forEach(function (field) {
+      _this[field] = __assign(__assign({}, _this[field]), data[field]);
+    });
+    (0, _storeUtil.persistence)(CACHE_KEY, this, whiteList);
+  };
+
+  return Frame;
+}();
+
+exports.Frame = Frame;

package/lib/mobx/Store.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Store = void 0;
+
+var _mobx = require("mobx");
+
+var _storeUtil = require("../utils/storeUtil");
+
+var debug = require('debug')('worker:mobx');
+
+var CACHE_KEY = 'STORE';
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'hoveredFloor', 'textSelection', 'MPageData'];
+
+var Store =
+/** @class */
+function () {
+  function Store() {
+    this.hoveredMeta = ''; // hover的元组件Id
+
+    this.clickedMeta = ''; // 点击的元组件Id
+
+    this.clickedGroup = ''; // 点击的元组的上一层Id,即groupSourceId(元组件在Group中)
+
+    this.clickedFloor = ''; // 点击的楼层Id
+
+    this.hoveredFloor = ''; // hover的复合组件Id
+
+    this.textSelection = null; // 文本元组件选中区域
+
+    this.MPageData = []; // 楼层数据
+
+    this.CarouselStore = {}; // 轮播组件暂存数据
+
+    this.imgGenVisible = false; // 图片生成器是否可见
+
+    (0, _mobx.makeObservable)(this, {
+      MPageData: _mobx.observable,
+      hoveredMeta: _mobx.observable,
+      clickedMeta: _mobx.observable,
+      clickedGroup: _mobx.observable,
+      clickedFloor: _mobx.observable,
+      hoveredFloor: _mobx.observable,
+      CarouselStore: _mobx.observable,
+      imgGenVisible: _mobx.observable,
+      setState: _mobx.action.bound
+    });
+  }
+  /** 修改状态 */
+
+
+  Store.prototype.setState = function (data) {
+    var _this = this;
+
+    debug('magicDesign state', data);
+    var propertyList = Object.getOwnPropertyNames(data);
+    propertyList.forEach(function (field) {
+      _this[field] = data[field];
+    });
+    (0, _storeUtil.persistence)(CACHE_KEY, this, whiteList);
+  };
+  /**
+   *根据groupId 获取楼层Id
+   * @param id groupId
+   */
+
+
+  Store.prototype.getFloorIdByGroupId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var _a;
+
+      var group = (_a = floor.groupSource) === null || _a === void 0 ? void 0 : _a.find(function (grp) {
+        return grp.id === id;
+      });
+      return !!group;
+    });
+    return componentFloor === null || componentFloor === void 0 ? void 0 : componentFloor.id;
+  };
+  /**
+   * 根据元组件Id 获取 楼层Id
+   * @param id
+   * @returns
+   */
+
+
+  Store.prototype.getFloorIdByMetaId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var floorStr = JSON.stringify(floor);
+      return floorStr.includes(id);
+    });
+    return componentFloor.id;
+  };
+
+  return Store;
+}();
+
+exports.Store = Store;