@fonixtree/magic-design 0.0.110 → 0.0.112

package/es/meta-comp/components/Image/index.js

@@ -11,6 +11,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
+var _h5DefImg = _interopRequireDefault(require("./image/h5DefImg.png"));
+
+var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _decorator = require("../../../decorator");
@@ -63,9 +67,11 @@ function (_super) {
   function Image() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.imgRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       // 当仅作为一个图片时，鼠标移上去，hover状态
-      hoverImgSrc: false
+      hoverImgSrc: false,
+      scale: 1
     };
 
     _this.getStyle = function () {
@@ -74,6 +80,7 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
+          minHeight = _a.minHeight,
           minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
@@ -82,17 +89,21 @@ function (_super) {
 
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(" + data.hover.magnification / 2 + ")";
+        obj.transform = "scale(" + data.hover.magnification + ")";
       }
 
       if (maxHeight) {
         obj.maxHeight = maxHeight;
       }
 
-      if (maxWidth) {
+      if (maxWidth || maxWidth === 0) {
         obj.maxWidth = maxWidth;
       }
 
+      if (minHeight) {
+        obj.minHeight = minHeight;
+      }
+
       if (minWidth) {
         obj.minWidth = minWidth;
       }
@@ -144,6 +155,8 @@ function (_super) {
   }
 
   Image.prototype.render = function () {
+    var _this = this;
+
     var _a, _b;
 
     var _c = this.props,
@@ -161,11 +174,13 @@ function (_super) {
 
     if (window.magicDesign.isShop && (srcImg === null || srcImg === void 0 ? void 0 : srcImg.includes('ecommerce/static'))) {
       srcImg = srcImg.replace('ecommerce/static', 'static');
-    } // if (!srcImg) {
-    //   srcImg = defaultImg;
-    // }
+    }
 
+    if (!srcImg) {
+      srcImg = (0, _coreUtil.isPc)() ? _pcDefImg["default"] : _h5DefImg["default"];
+    }
 
+    var areas = data.content.openHotArea && ((0, _coreUtil.isPc)() ? data.content.pcAreas : data.content.h5Areas);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-image', {
         backgroundImg: isBackground
@@ -173,12 +188,36 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+      ref: this.imgRef,
+      onLoad: function onLoad() {
+        var scale = _this.imgRef.current.clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
       onMouseEnter: this.mouseEnterImg,
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }));
+    }), areas && areas.length > 0 && areas.map(function (v, i) {
+      var aStyle = {
+        position: 'absolute',
+        top: parseInt(v.y * _this.state.scale),
+        left: parseInt(v.x * _this.state.scale),
+        width: parseInt(v.width * _this.state.scale),
+        height: parseInt(v.height * _this.state.scale)
+      };
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        key: i,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          (0, _coreUtil.clickUrl)(v.inputVal);
+        },
+        style: aStyle
+      });
+    })));
   };
 
   Image.defaultProps = {

package/es/meta-comp/components/Image/index.less

@@ -1,21 +1,25 @@
 .m-meta-image {
+  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
-
+  // overflow: hidden;
   &>img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    // object-fit: contain;
     transition: all .2s linear;
     vertical-align: initial;
+    max-width: 100%;
+    object-fit: contain;
   }
 
   &.backgroundImg {
     &>img {
       object-fit: cover;
+      // width: auto;
+      max-width: none;
     }
   }
 }

package/es/meta-comp/components/Text/index.js

@@ -17,8 +17,6 @@ var _Iconfont = require("../../../common/Iconfont");
 
 var _decorator = require("../../../decorator");
 
-var _businessUtil = require("../../../utils/businessUtil");
-
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _mobx = require("../../../mobx");
@@ -104,7 +102,7 @@ var contentStyle = function contentStyle(content) {
     color: content.color,
     backgroundColor: content.backgroundColor,
     textAlign: content.textAlign,
-    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
+    width: '100%'
   };
 };
 /** 从父级数组中 分离出 片段数组 */
@@ -258,7 +256,8 @@ var initSelectionEvent = function initSelectionEvent() {
         }
 
         findSelectionTarget.refresh();
-      }
+      } // todo 不知道干什么用的
+
 
       triggerTextConfigRender();
     }, 500);
@@ -342,6 +341,15 @@ function (_super) {
           var node = document.createElement('span');
           node.style = (0, _commonUtil.styleStringify)(contentStyle(c.content));
           node.innerText = (_a = data.text).slice.apply(_a, c.range);
+
+          node.onclick = function (e) {
+            if (c.content.clickUrl) {
+              e.stopPropagation();
+            }
+
+            (0, _coreUtil.clickUrl)(c.content.clickUrl);
+          };
+
           _this.selectionRefMap[JSON.stringify(c.range)] = node;
 
           _this.textRef.current.appendChild(node);
@@ -431,18 +439,37 @@ function (_super) {
         className = _a.className,
         readonly = _a.readonly,
         onTextInput = _a.onTextInput;
+    var style = contentStyle(data.content);
+
+    if (data.underline) {
+      style = __assign(__assign({}, style), {
+        textDecorationLine: data.underline.open ? 'underline' : 'none',
+        textDecorationColor: data.underline.textDecorationColor,
+        textDecorationStyle: data.underline.textDecorationStyle
+      });
+    }
+
+    if (data === null || data === void 0 ? void 0 : data.spacing) {
+      if ((0, _coreUtil.isPc)()) {
+        style = __assign(__assign({}, style), data.spacing.pc);
+      } else {
+        style = __assign(__assign({}, style), data.spacing.mobile);
+      }
+    } // const style: React.CSSProperties = {
+    //   ...contentStyle(data.content),
+    //   textDecorationLine: data?.underline.open ? 'underline' : 'none',
+    //   textDecorationColor: data?.underline.textDecorationColor,
+    //   textDecorationStyle: data?.underline.textDecorationStyle,
+    // };
 
-    var style = __assign(__assign({}, contentStyle(data.content)), {
-      textDecorationLine: data.underline.open ? 'underline' : 'none',
-      textDecorationColor: data.underline.textDecorationColor,
-      textDecorationStyle: data.underline.textDecorationStyle
-    });
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,
       className: (0, _classnames["default"])('m-meta-text', className),
       contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
+      onClick: function onClick() {
+        (0, _coreUtil.clickUrl)(data.content.clickUrl);
+      },
       onInput: function onInput(e) {
         var text = e.target.textContent;
         data.text = text;
@@ -461,7 +488,7 @@ function (_super) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: __assign(__assign({}, style), wrapStyle),
+      style: __assign({}, style),
       suppressContentEditableWarning: true
     });
   };

package/es/meta-comp/config-panels/BaseConfig.js

@@ -48,14 +48,6 @@ function (_super) {
 
   function BaseConfig() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
-    /**
-     *重新渲染展示区域
-     */
-
-
-    _this.reRenderViewArea = function () {
-      (0, _coreUtil.renderPreview)();
-    };
     /**
      * 重新渲染一级配置面板
      */
@@ -67,10 +59,16 @@ function (_super) {
      */
 
 
-    _this.selfRender = function () {
+    _this.selfRender = function (data) {
+      var changeHistory = true;
+
+      if (data && data.type === 'text-render') {
+        changeHistory = false;
+      }
+
       _this.setState({});
 
-      _this.reRenderViewArea();
+      (0, _coreUtil.renderPreview)(changeHistory);
     };
 
     return _this;

package/es/meta-comp/config-panels/ButtonConfig/index.js

@@ -157,7 +157,7 @@ function (_super) {
         return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
           value: sizeType.key
         }, sizeType.key);
-      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), data.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) {
@@ -191,7 +191,7 @@ function (_super) {
         value: {
           count: data[fontSizeKey]
         }
-      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: ""
       }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
         onChange: function onChange(value) {
@@ -301,7 +301,6 @@ function (_super) {
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
         configCompSpace: false,
-        configPaddingLR: true,
         data: data.spacing
       })
     }];

package/es/meta-comp/config-panels/ImageConfig/AreaConfigModal/index.js

@@ -0,0 +1,164 @@
+"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["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _common = require("../../../../common");
+
+require("./index.less");
+
+var _locale = require("../../../../locale");
+
+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 __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 __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+var AreaConfigModal =
+/** @class */
+function (_super) {
+  __extends(AreaConfigModal, _super);
+
+  function AreaConfigModal() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      drawCoordinates: _this.props.value || []
+    };
+
+    _this.setCoordinate = function (coordinate, index, coordinates) {
+      _this.setState({
+        drawCoordinates: coordinates
+      });
+    };
+
+    _this.addArea = function () {
+      var drawCoordinates = _this.state.drawCoordinates;
+
+      var newCoordinates = __spreadArrays(drawCoordinates, [{
+        height: 50,
+        id: "Hyp_dBIiD" + drawCoordinates.length,
+        inputVal: '',
+        width: 100,
+        x: 54 + drawCoordinates.length * 10,
+        y: 38 + drawCoordinates.length * 10
+      }]);
+
+      _this.setState({
+        drawCoordinates: newCoordinates
+      });
+    };
+
+    _this.onOkClick = function () {
+      var onOk = _this.props.onOk;
+      var drawCoordinates = _this.state.drawCoordinates;
+      onOk(drawCoordinates);
+    };
+
+    return _this;
+  }
+
+  AreaConfigModal.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        visible = _a.visible,
+        onCancel = _a.onCancel;
+    var drawCoordinates = this.state.drawCoordinates;
+    return /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+      centered: true,
+      draggable: false,
+      onCancel: onCancel,
+      onOk: this.onOkClick,
+      title: "clickable Area",
+      visible: visible,
+      width: "auto"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "body_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.ImgArea, {
+      coordinates: drawCoordinates,
+      onChange: this.setCoordinate,
+      onDelete: this.setCoordinate,
+      onSave: this.setCoordinate,
+      src: this.props.imgUrl,
+      width: "100%"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "area_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btn_wrap",
+      onClick: this.addArea
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      size: 20,
+      type: "icon-add"
+    }), /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('ADD_CLICKABLE_AREA'))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "list_wrap"
+    }, drawCoordinates.map(function (v, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "add_item"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "title"
+      }, "Clickable Area ", i + 1), /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        onChange: function onChange(data) {
+          v.inputVal = data;
+
+          _this.setState({
+            drawCoordinates: __spreadArrays(drawCoordinates)
+          });
+        },
+        value: v.inputVal
+      }));
+    })))));
+  };
+
+  return AreaConfigModal;
+}(_react.Component);
+
+var _default = AreaConfigModal;
+exports["default"] = _default;

package/es/meta-comp/config-panels/ImageConfig/AreaConfigModal/index.less

@@ -0,0 +1,26 @@
+
+.body_wrap {
+  display: flex;
+
+  .area_config_wrap {
+    margin-left: 23px;
+    width: 259px;
+    max-height: 480px;
+    padding-right: 10px;
+    .list_wrap {
+      height: calc(100% - 30px);
+      overflow: auto;
+      .add_item {
+        margin-top: 18px;
+      }
+    }
+
+    .btn_wrap {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: #2F54EB;
+      margin-top: 10px;
+    }
+  }
+}

package/es/meta-comp/config-panels/ImageConfig/HotAreaConfig/index.js

@@ -0,0 +1,133 @@
+"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["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./index.less");
+
+var _antd = require("antd");
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+var _locale = require("../../../../locale");
+
+var _common = require("../../../../common");
+
+var _AreaConfigModal = _interopRequireDefault(require("../AreaConfigModal"));
+
+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; }
+
+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 HotAreaConfig =
+/** @class */
+function (_super) {
+  __extends(HotAreaConfig, _super);
+
+  function HotAreaConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visible: false
+    };
+
+    _this.onCheckboxChange = function (e) {
+      var _a = _this.props,
+          option = _a.option,
+          onChange = _a.onChange;
+      console.log(e.target.checked);
+      option.clickUrl = '';
+      option.openHotArea = e.target.checked; // this.setState({});
+
+      onChange();
+    };
+
+    _this.onAddArea = function () {
+      _this.setState({
+        visible: true
+      });
+    };
+
+    _this.onOk = function (data) {
+      if ((0, _coreUtil.isPc)()) {
+        _this.props.option.pcAreas = data;
+      } else {
+        _this.props.option.h5Areas = data;
+      }
+
+      _this.setState({
+        visible: false
+      });
+    };
+
+    _this.onCancel = function () {
+      _this.setState({
+        visible: false
+      });
+    };
+
+    return _this;
+  }
+
+  HotAreaConfig.prototype.render = function () {
+    var option = this.props.option;
+    var visible = this.state.visible;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "hot_area_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "area_wrap mb14"
+    }, /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('CLICKABLE_AREA')), /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+      checked: option.openHotArea,
+      onChange: this.onCheckboxChange
+    })), option.openHotArea && /*#__PURE__*/_react["default"].createElement(_common.Button, {
+      icon: "icon-add",
+      onClick: this.onAddArea,
+      type: "primary"
+    }, (0, _locale.i18n)('ADD_AREA')), /*#__PURE__*/_react["default"].createElement(_AreaConfigModal["default"], {
+      imgUrl: this.props.imgUrl,
+      onCancel: this.onCancel,
+      onOk: this.onOk,
+      value: (0, _coreUtil.isPc)() ? option.pcAreas : option.h5Areas,
+      visible: visible
+    }));
+  };
+
+  return HotAreaConfig;
+}(_react.Component);
+
+var _default = HotAreaConfig;
+exports["default"] = _default;

package/es/meta-comp/config-panels/ImageConfig/HotAreaConfig/index.less

@@ -0,0 +1,17 @@
+
+.hot_area_wrap {
+  border-bottom: 1px dashed #D2D9E5;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  .area_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    color: #232F46;
+  }
+}
+