@fonixtree/magic-design 0.0.104 → 0.0.106

package/lib/decorator/metaDecorator.js

@@ -41,22 +41,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-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 __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -85,7 +69,7 @@ function metaDecorator(WrappedComponent) {
       }; // 元组件点击事件
 
       _this.onMetaClick = function (event) {
-        var _a, _b;
+        var _a, _b, _c;
 
         if (window.magicDesign.mode === 'renderer') {
           return;
@@ -106,7 +90,7 @@ function metaDecorator(WrappedComponent) {
         }
 
         _mobx.store.setState({
-          clickedMeta: metaId,
+          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
           clickedGroup: parentId,
           clickedFloor: floorId
         });
@@ -149,7 +133,7 @@ function metaDecorator(WrappedComponent) {
         return false;
       };
 
-      _this.getInteractStyle = function () {
+      _this.getStyle = function () {
         var _a = _this.state,
             hoveredMeta = _a.hoveredMeta,
             clickedMeta = _a.clickedMeta;
@@ -158,8 +142,7 @@ function metaDecorator(WrappedComponent) {
         var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
         var style = {
           boxSizing: 'border-box',
-          height: '100%',
-          border: 'none'
+          height: '100%'
         };
 
         if (window.magicDesign.mode === 'renderer') {
@@ -170,22 +153,6 @@ function metaDecorator(WrappedComponent) {
         }
 
         return style;
-      }; // text元组件在选中或悬浮时 需要实时展示其宽度
-
-
-      _this.getStyle = function () {
-        var _a = _this.props,
-            style = _a.style,
-            rest = __rest(_a, ["style"]);
-
-        var newStyle = __assign({}, style);
-
-        if (rest.data.type === 'TEXT') {
-          var width = window.magicDesign.device === 'pc' ? rest.data.content.pcWidth : rest.data.content.width;
-          newStyle.width = (Math.min(width, 100) || 100) + "%";
-        }
-
-        return newStyle;
       };
 
       return _this;
@@ -209,13 +176,13 @@ function metaDecorator(WrappedComponent) {
     Wrapper.prototype.render = function () {
       var _a = this.props,
           className = _a.className,
-          rest = __rest(_a, ["className"]);
-
-      var hoverStyle = this.getInteractStyle(); // console.log(rest);
+          style = _a.style,
+          rest = __rest(_a, ["className", "style"]);
 
+      var hoverStyle = this.getStyle();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
-        style: this.getStyle()
+        style: style
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "meta_wrap",
         onClick: this.onMetaClick,

package/lib/locale/en/en.json

@@ -1,23 +1,4 @@
 {
-  "IMAGES": "Images",
-  "PUBLISH_TIME": "Publish Time",
-  "CONFIRM": "Confirm",
-  "PUBLISH_LATER": "Publish Later",
-  "PUBLISH_NOW": "Publish Now",
-  "SEARCH_BOX": "Search Box",
-  "PLEASE_INPUT_KEYWORDS": "Please input keywords",
-  "SHOPPING_CART": "Shopping Cart",
-  "ADD_BUTTON": "Add Button",
-  "BUTTON_TAG": "Button Tag",
-  "ADD_TAG": "Add Tag",
-  "LAST_CATEGORY": "Last Category",
-  "SECONDARY_CATEGORY": "Secondary Category",
-  "FIRST_CATEGORY": "First Category",
-  "ALL_CATEGORY": "All Category",
-  "HOME": "Home",
-  "ADD_CLICKABLE_AREA": "Add Clickable Area",
-  "ADD_AREA": "Add Area",
-  "CLICKABLE_AREA": "Clickable Area",
   "VOUCHER_SUCCESS": "Voucher received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
@@ -37,8 +18,8 @@
   "BACKGROUND": "Background",
   "PLACEHOLDER": "Placeholder",
   "FONT_STYLE": "Font Style",
-  "FONT_FAMILY": "Font Family",
-  "FONT_WEIGHT": "Font Weight",
+  "FONT_FAMILY": "font Family",
+  "FONT_WEIGHT": "font Weight",
   "FONT_SIZE": "Font Size",
   "LINE_SPACING": "Line Spacing",
   "LINE_COLOR": "Line Color",
@@ -104,6 +85,7 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
+  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",

package/lib/locale/es/es.json

@@ -1,23 +1,4 @@
 {
-  "IMAGES": "Images",
-  "PUBLISH_TIME": "Publish Time",
-  "CONFIRM": "Confirm",
-  "PUBLISH_LATER": "Publish Later",
-  "PUBLISH_NOW": "Publish Now",
-  "SEARCH_BOX": "Search Box",
-  "PLEASE_INPUT_KEYWORDS": "Please input keywords",
-  "SHOPPING_CART": "Shopping Cart",
-  "ADD_BUTTON": "Add Button",
-  "BUTTON_TAG": "Etiqueta de botón",
-  "ADD_TAG": "Add Tag",
-  "LAST_CATEGORY": "Last Category",
-  "SECONDARY_CATEGORY": "Secondary Category",
-  "FIRST_CATEGORY": "First Category",
-  "ALL_CATEGORY": "All Category",
-  "HOME": "Home",
-  "ADD_CLICKABLE_AREA": "Add Clickable Area",
-  "ADD_AREA": "Add Area",
-  "CLICKABLE_AREA": "Clickable Area",
   "VOUCHER_SUCCESS": "Voucher received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
@@ -104,6 +85,7 @@
   "INPUT_FIELD": "Campo de entrada",
   "CONFIRMATION": "Confirmación",
   "IMAGE_TAG": "Etiqueta de imagen",
+  "BUTTON_TAG": "Etiqueta de botón",
   "SECONDARY_BUTTON_TAG": "Etiqueta de botón secundario",
   "TITLE": "Título",
   "HOVER": "Hover",

package/lib/locale/id/id.json

@@ -1,23 +1,4 @@
 {
-  "IMAGES": "Images",
-  "PUBLISH_TIME": "Publish Time",
-  "CONFIRM": "Confirm",
-  "PUBLISH_LATER": "Publish Later",
-  "PUBLISH_NOW": "Publish Now",
-  "SEARCH_BOX": "Search Box",
-  "PLEASE_INPUT_KEYWORDS": "Please input keywords",
-  "SHOPPING_CART": "Shopping Cart",
-  "ADD_BUTTON": "Add Button",
-  "BUTTON_TAG": "Button Tag",
-  "ADD_TAG": "Add Tag",
-  "LAST_CATEGORY": "Last Category",
-  "SECONDARY_CATEGORY": "Secondary Category",
-  "FIRST_CATEGORY": "First Category",
-  "ALL_CATEGORY": "All Category",
-  "HOME": "Home",
-  "ADD_CLICKABLE_AREA": "Add Clickable Area",
-  "ADD_AREA": "Add Area",
-  "CLICKABLE_AREA": "Clickable Area",
   "VOUCHER_SUCCESS": "Voucher received successfully!",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
@@ -37,8 +18,8 @@
   "BACKGROUND": "Background",
   "PLACEHOLDER": "Placeholder",
   "FONT_STYLE": "Font Style",
-  "FONT_FAMILY": "Font Family",
-  "FONT_WEIGHT": "Font Weight",
+  "FONT_FAMILY": "font Family",
+  "FONT_WEIGHT": "font Weight",
   "FONT_SIZE": "Font Size",
   "LINE_SPACING": "Line Spacing",
   "LINE_COLOR": "Line Color",
@@ -104,6 +85,7 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
+  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",

package/lib/meta-comp/components/Button/index.js

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _editable = _interopRequireDefault(require("./editable"));
+var _businessUtil = require("../../../utils/businessUtil");
 
 var _coreUtil = require("../../../utils/coreUtil");
 
@@ -88,9 +88,19 @@ function (_super) {
     _this.state = {
       hover: false
     };
+    /** 备份历史数据 比对不一致时渲染 */
+
+    _this.preData = '';
     return _this;
   }
 
+  Button.prototype.shouldComponentUpdate = function (nextProps) {
+    var should1 = JSON.stringify(nextProps.data) != this.preData;
+    var should2 = window.magicDesign.device != this.preDevice;
+    var result = should1 || should2;
+    return result;
+  };
+
   Button.prototype.render = function () {
     var _this = this;
 
@@ -98,7 +108,8 @@ function (_super) {
 
     var _b = this.props,
         data = _b.data,
-        className = _b.className;
+        className = _b.className,
+        readonly = _b.readonly;
     var hover = this.state.hover;
     this.preData = JSON.stringify(data);
     this.preDevice = window.magicDesign.device;
@@ -111,14 +122,6 @@ function (_super) {
       fontSize: window.magicDesign.device == 'pc' ? data.buttonText.pcFontSize : data.buttonText.fontSize
     });
 
-    if (data.spacing) {
-      if (window.magicDesign.device == 'pc') {
-        style = __assign(__assign({}, style), data.spacing.pc);
-      } else {
-        style = __assign(__assign({}, style), data.spacing.mobile);
-      }
-    }
-
     var iconUrl = data.buttonIcon.iconUrl;
     var iconLayout = data.buttonIcon.layout;
 
@@ -134,6 +137,22 @@ function (_super) {
       iconLayout = data.hover.buttonIcon.layout;
     }
 
+    var btnText = /*#__PURE__*/_react["default"].createElement("span", {
+      className: "item",
+      contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
+      onInput: function onInput(e) {
+        var text = e.target.textContent;
+        data.text = text;
+        /** 主动更新历史数据避免render */
+
+        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
+          text: text
+        }));
+      },
+      suppressContentEditableWarning: true
+    }, data.text);
+
+    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-button', className),
       onClick: function onClick() {
@@ -149,16 +168,16 @@ function (_super) {
           hover: false
         });
       },
-      style: __assign({}, style)
+      style: __assign(__assign({}, style), wrapStyle)
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('btnContent', {
         horizontal: iconLayout === 'left' || iconLayout === 'right'
       })
-    }, (iconLayout === 'right' || iconLayout === 'bottom') && /*#__PURE__*/_react["default"].createElement(_editable["default"], this.props), iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
+    }, (iconLayout === 'right' || iconLayout === 'bottom') && btnText, iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "icon",
+      className: "item",
       src: iconUrl
-    }), (iconLayout === 'left' || iconLayout === 'top') && /*#__PURE__*/_react["default"].createElement(_editable["default"], this.props)));
+    }), (iconLayout === 'left' || iconLayout === 'top') && btnText));
   };
 
   Button.defaultProps = {

package/lib/meta-comp/components/Button/index.less

@@ -2,9 +2,8 @@
   transition: all 0.25s;
 
   .btnContent {
-    width: 100%;
     cursor: pointer;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -15,7 +14,7 @@
 
     img {
       height: 20px;
-      margin: 0 5px;
+      margin-right: 5px;
     }
   }
 }

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

@@ -11,10 +11,6 @@ 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");
@@ -67,11 +63,9 @@ function (_super) {
   function Image() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.imgRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       // 当仅作为一个图片时，鼠标移上去，hover状态
-      hoverImgSrc: false,
-      scale: 1
+      hoverImgSrc: false
     };
 
     _this.getStyle = function () {
@@ -80,7 +74,6 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
-          minHeight = _a.minHeight,
           minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
@@ -89,21 +82,17 @@ function (_super) {
 
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(" + data.hover.magnification + ")";
+        obj.transform = "scale(" + data.hover.magnification / 2 + ")";
       }
 
       if (maxHeight) {
         obj.maxHeight = maxHeight;
       }
 
-      if (maxWidth || maxWidth === 0) {
+      if (maxWidth) {
         obj.maxWidth = maxWidth;
       }
 
-      if (minHeight) {
-        obj.minHeight = minHeight;
-      }
-
       if (minWidth) {
         obj.minWidth = minWidth;
       }
@@ -155,8 +144,6 @@ function (_super) {
   }
 
   Image.prototype.render = function () {
-    var _this = this;
-
     var _a, _b;
 
     var _c = this.props,
@@ -174,13 +161,11 @@ 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
@@ -188,36 +173,12 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, 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
-        });
-      },
+    }, srcImg && /*#__PURE__*/_react["default"].createElement("img", {
       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/lib/meta-comp/components/Image/index.less

@@ -1,25 +1,21 @@
 .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/lib/meta-comp/components/Text/index.js

@@ -17,6 +17,8 @@ var _Iconfont = require("../../../common/Iconfont");
 
 var _decorator = require("../../../decorator");
 
+var _businessUtil = require("../../../utils/businessUtil");
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _mobx = require("../../../mobx");
@@ -102,7 +104,7 @@ var contentStyle = function contentStyle(content) {
     color: content.color,
     backgroundColor: content.backgroundColor,
     textAlign: content.textAlign,
-    width: '100%'
+    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
   };
 };
 /** 从父级数组中 分离出 片段数组 */
@@ -256,8 +258,7 @@ var initSelectionEvent = function initSelectionEvent() {
         }
 
         findSelectionTarget.refresh();
-      } // todo 不知道干什么用的
-
+      }
 
       triggerTextConfigRender();
     }, 500);
@@ -341,15 +342,6 @@ 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);
@@ -439,37 +431,18 @@ 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;
@@ -488,7 +461,7 @@ function (_super) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: __assign({}, style),
+      style: __assign(__assign({}, style), wrapStyle),
       suppressContentEditableWarning: true
     });
   };

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

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

package/lib/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);
-      }))), data.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), /*#__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,6 +301,7 @@ function (_super) {
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
         configCompSpace: false,
+        configPaddingLR: true,
         data: data.spacing
       })
     }];