@fonixtree/magic-design 0.0.110 → 0.0.111

package/es/core/Designer/ViewArea/index.less

@@ -8,21 +8,57 @@
   transition-property: all;
   transition-duration: .3s;
   transition-timing-function: ease;
+
+  .appointment_wrap {
+    flex-shrink: 0;
+    height: 44px;
+    background-color: #FFF8F0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .appointment_tip {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      color: #FF8541;
+    }
+
+    .cancel_btn {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      height: 22px;
+      background-color: #2F54EB;
+      border-radius: 4px;
+      color: #FFF;
+      cursor: pointer;
+    }
+  }
+
   &.phone-edit {
     margin-left: 355px;
   }
+
   .phone_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px 0;
+
     .device_border {
       width: 375px;
       max-height: 691px;
       height: calc(100vh - 150px);
       overflow: scroll;
-      overflow-x:hidden;
+      overflow-x: hidden;
       border: 10px solid #FFF;
       background-color: #F2F2F2;
       border-radius: 12px;
@@ -30,16 +66,17 @@
 
     }
   }
+
   .pc_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
+
     .device_border {
-      padding: 1px;
-      max-width: 1240px;
       width: 100%;
+      padding: 1px;
       min-height: 70vh;
       border: 16px solid #FFF;
       border-radius: 12px;
@@ -47,7 +84,6 @@
       height: 100%;
       overflow: scroll;
       box-sizing: content-box;
-
     }
   }
 }

package/es/core/Designer/index.js

@@ -27,6 +27,8 @@ var _ViewArea = _interopRequireDefault(require("./ViewArea"));
 
 var _History = _interopRequireDefault(require("./History"));
 
+var _AppointmentModal = _interopRequireDefault(require("./AppointmentModal"));
+
 var _componentTypes = require("../../constants/component-types");
 
 var _mobx = require("../../mobx");
@@ -35,6 +37,8 @@ var _constants = require("../../constants");
 
 require("./index.less");
 
+var _common = require("../../common");
+
 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); }
@@ -97,11 +101,14 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+window.magicDesign = {
+  mode: 'designer',
+  device: _constants.deviceTypeMap.PHONE
+};
+
 var setDesignConfig = function setDesignConfig(data) {
-  window.magicDesign = __assign(__assign({
-    mode: 'designer',
-    device: _constants.deviceTypeMap.PHONE
-  }, data), {
+  window.magicDesign = __assign(__assign(__assign({}, window.magicDesign), data), {
+    compSpacing: Number(data.compSpacing),
     MBaseUrl: data.MBaseUrl || ''
   });
 };
@@ -169,14 +176,16 @@ function (_super) {
       _this.configRef.current.closeMobileConfig();
     };
 
-    _this.reRenderViewArea = function () {
-      if (!_this.viewAreaRef || !_this.viewAreaRef.current) {
-        return;
+    _this.reRenderViewArea = function (e) {
+      if (e.changeHistory) {
+        _this.history.push(_this.state.MPageData);
       }
 
-      _this.history.push(_this.state.MPageData);
+      _mobx.store.setState({
+        MPageData: _this.state.MPageData
+      });
 
-      _this.viewAreaRef.current.renderView();
+      _this.setState({});
     };
 
     _this.componentClick = function (event) {
@@ -186,12 +195,12 @@ function (_super) {
     };
     /**
      * 楼层 的 新增、删除、拷贝、顺序调整、属性修改时调用
-     * @param {*} pageData 模版信息
+     * @param {*} newPageData 模版信息
      */
 
 
-    _this.setPageData = function (pageData) {
-      var MPageData = _this.history.push(pageData);
+    _this.setPageData = function (newPageData) {
+      var MPageData = _this.history.push(newPageData);
 
       _this.setState({
         MPageData: MPageData
@@ -247,7 +256,8 @@ function (_super) {
     };
 
     _this.addComponent = function (_a) {
-      var type = _a.type;
+      var type = _a.type,
+          terminalType = _a.terminalType;
       var MPageData = _this.state.MPageData;
       var compType = _componentTypes.componentMap[type];
 
@@ -258,7 +268,10 @@ function (_super) {
 
       var compInst = compType.getDefaultJSON();
 
-      var newData = __spreadArrays(MPageData, [compInst]);
+      var newData = __spreadArrays(MPageData, [__assign(__assign({}, compInst), {
+        terminalType: terminalType,
+        activeTerminal: terminalType
+      })]);
 
       _this.history.push(newData);
 
@@ -298,18 +311,26 @@ function (_super) {
         device: device
       };
 
+      var callback = function callback(newPageData) {
+        _mobx.store.setState({
+          MPageData: newPageData
+        });
+
+        _this.setState({
+          MPageData: newPageData
+        });
+      };
+
+      console.log(code);
+
       switch (code) {
         case _constants.quickMenuCode.UNDO:
-          _this.setState({
-            MPageData: _this.history.undo()
-          });
+          _this.history.undo(callback);
 
           break;
 
         case _constants.quickMenuCode.REDO:
-          _this.setState({
-            MPageData: _this.history.redo()
-          });
+          _this.history.redo(callback);
 
           break;
 
@@ -317,6 +338,13 @@ function (_super) {
           onPublish(handleParams);
           break;
 
+        case _constants.quickMenuCode.PUBLISH_LATER:
+          _this.setState({
+            appointmentVisible: true
+          });
+
+          break;
+
         case _constants.quickMenuCode.PREVIEW:
           onPreviews(handleParams);
           break;
@@ -335,8 +363,6 @@ function (_super) {
 
           break;
       }
-
-      console.log(JSON.stringify(handleParams.pageData));
     };
 
     _this.renderHeader = function () {
@@ -349,31 +375,45 @@ function (_super) {
       });
     };
 
+    _this.onAppointmentConfirm = function (date) {
+      var onPublish = _this.props.onPublish;
+      var _a = _this.state,
+          device = _a.device,
+          MPageData = _a.MPageData;
+      var handleParams = {
+        pageData: {
+          id: (0, _uuid.v4)(),
+          childNodes: MPageData
+        },
+        device: device,
+        appointmentDate: date
+      };
+      onPublish(handleParams);
+
+      _this.setState({
+        appointmentVisible: false
+      });
+    };
+
     var pageData = props.pageData,
         config = props.config,
         locale = props.locale;
     var MPageData = pageData.childNodes || [];
+    _this.configRef = /*#__PURE__*/_react["default"].createRef(); // this.viewAreaRef = React.createRef();
 
-    _mobx.store.setState({
-      MPageData: MPageData
-    });
-    /** 使用默认国际化 */
-    // if (!store.locale) {
-
+    _this.compListRef = /*#__PURE__*/_react["default"].createRef();
+    _this.history = new _History["default"](MPageData);
 
     _mobx.store.setState({
+      MPageData: MPageData,
       locale: locale
-    }); // }
-
+    });
 
-    _this.configRef = /*#__PURE__*/_react["default"].createRef();
-    _this.viewAreaRef = /*#__PURE__*/_react["default"].createRef();
-    _this.compListRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       MPageData: MPageData,
-      device: _constants.deviceTypeMap.PHONE
+      device: _constants.deviceTypeMap.PHONE,
+      appointmentVisible: false
     };
-    _this.history = new _History["default"](MPageData);
     setDesignConfig(config);
     return _this;
   }
@@ -398,6 +438,7 @@ function (_super) {
     var pageData = nextProps.pageData,
         config = nextProps.config;
     var MPageData = pageData.childNodes || [];
+    this.history = new _History["default"](MPageData);
     this.setState({
       MPageData: MPageData
     });
@@ -406,7 +447,6 @@ function (_super) {
       MPageData: MPageData
     });
 
-    this.history = new _History["default"](MPageData);
     setDesignConfig(config);
   };
 
@@ -434,11 +474,13 @@ function (_super) {
 
     var _a = this.state,
         MPageData = _a.MPageData,
-        device = _a.device;
+        device = _a.device,
+        appointmentVisible = _a.appointmentVisible;
     var _b = this.props,
         pagesManager = _b.pagesManager,
         compSource = _b.compSource,
-        pageName = _b.pageName;
+        pageName = _b.pageName,
+        onCancelPublish = _b.onCancelPublish;
     return /*#__PURE__*/_react["default"].createElement(_mobxReact.Provider, {
       store: _mobx.store
     }, /*#__PURE__*/_react["default"].createElement(_antd.ConfigProvider, {
@@ -467,12 +509,22 @@ function (_super) {
       device: device,
       onClose: this.onPropsPanelClose,
       pageData: MPageData
-    }), /*#__PURE__*/_react["default"].createElement(_ViewArea["default"], {
-      ref: this.viewAreaRef,
+    }), /*#__PURE__*/_react["default"].createElement(_ViewArea["default"] // ref={this.viewAreaRef}
+    , {
+      appointmentDate: this.props.appointmentDate,
       device: device,
+      onCancelPublish: onCancelPublish,
       pageData: MPageData,
       renderHeader: this.renderHeader
-    })))));
+    })), appointmentVisible && /*#__PURE__*/_react["default"].createElement(_AppointmentModal["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          appointmentVisible: false
+        });
+      },
+      onConfirm: this.onAppointmentConfirm,
+      visible: appointmentVisible
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_common.SystemNotification, null))));
   };
 
   return Designer;

package/es/core/Renderer/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _componentTypes = require("../../constants/component-types");
 
+var _coreUtil = require("../../utils/coreUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __assign = void 0 && (void 0).__assign || function () {
@@ -33,13 +35,15 @@ var setDesignConfig = function setDesignConfig(props) {
   var config = props.config,
       device = props.device,
       isShop = props.isShop;
-  window.magicDesign = __assign({
+  window.magicDesign = __assign(__assign({
     pageBackground: '#f2f2f2',
-    compSpacing: '16',
     mode: 'renderer',
     device: device,
     isShop: isShop
-  }, config);
+  }, config), {
+    compSpacing: Number(config.compSpacing),
+    compWidth: Number(config.compWidth)
+  });
 };
 /**
  * @class Renderer 页面预览器，外部工程使用此类来渲染出页面。
@@ -49,13 +53,27 @@ var setDesignConfig = function setDesignConfig(props) {
 var Renderer = function Renderer(props) {
   var pageData = props.pageData;
   setDesignConfig(props);
+  var pageBackground = window.magicDesign.pageBackground; // 根据楼层展示设备进行过滤
+
+  var filterCompFloor = function filterCompFloor() {
+    var source = [];
+
+    if (pageData && pageData.childNodes && pageData.childNodes.length) {
+      source = pageData.childNodes.filter(function (node) {
+        return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
+      });
+    }
+
+    return source;
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "render_wrap",
     magic_design: "",
     style: {
-      background: window.magicDesign.pageBackground
+      background: pageBackground
     }
-  }, pageData && pageData.childNodes && pageData.childNodes.map(function (nodeData) {
+  }, filterCompFloor().map(function (nodeData) {
     var Clazz = _componentTypes.componentMap[nodeData.type];
 
     if (!Clazz) {

package/es/decorator/compositeDecorator.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobx = require("../mobx");
 
+var _constants = require("../constants");
+
 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; }
@@ -41,7 +43,34 @@ 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);
+};
+
 function compositeDecorator(WrappedComponent) {
+  var floorNameStyle = {
+    backgroundColor: '#2F54EB',
+    height: '18px',
+    color: '#FFF',
+    fontSize: '10px',
+    padding: '0 5px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'fit-content'
+  };
+
   var Wrapper =
   /** @class */
   function (_super) {
@@ -51,7 +80,8 @@ function compositeDecorator(WrappedComponent) {
       var _this = _super !== null && _super.apply(this, arguments) || this;
 
       _this.state = {
-        clickedFloor: ''
+        clickedFloor: '',
+        hoveredFloor: ''
       }; // 复合组件点击事件
 
       _this.onCompositeCompClick = function (event) {
@@ -73,29 +103,117 @@ function compositeDecorator(WrappedComponent) {
         window.document.dispatchEvent(evt);
       };
 
-      _this.getStyle = function () {
-        var style = {
-          border: 'none'
-        }; // 处理复合组件的选中状态
+      _this.getCompositeStyle = function () {
+        var _a;
+
+        var nodeData = _this.props.nodeData;
+        var spacing = nodeData.spacing,
+            background = nodeData.background;
+        var _b = window.magicDesign,
+            device = _b.device,
+            compWidth = _b.compWidth;
+        var wrapStyle = {
+          border: 'none',
+          position: 'relative',
+          zIndex: '1',
+          margin: '0 auto'
+        }; // 复合组件内边距
+
+        if (spacing && spacing[device]) {
+          wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
+        } // 复合组件背景
 
-        if (window.magicDesign.mode === 'designer') {
-          // style.border = '1px solid transparent';
-          style.border = 'none';
 
-          if (_this.props.nodeData.id === _this.state.clickedFloor) {
-            style.border = '1px dashed red';
+        if (background) {
+          if (background.bgType === 'color') {
+            wrapStyle.backgroundColor = background.color;
+            wrapStyle.opacity = background.opacity ? background.opacity : 1;
+          } else {
+            wrapStyle.backgroundImage = "url(" + background.image + ")";
+            wrapStyle.backgroundPosition = '0px 0px';
+            wrapStyle.backgroundSize = 'auto 100%';
+            wrapStyle.backgroundRepeat = 'no-repeat';
           }
-        } // 处理复合组件的下边距
+        } // 复合组件宽度
+        // 此处特殊处理一些占满整屏的组件： spacing.pc.fillUp = true时，沾满全屏
 
 
-        if (Wrapper.type !== 'DIVIDER') {
-          var rate = window.magicDesign.device === 'pc' ? 1.5 : 1;
-          style.marginBottom = Number(window.magicDesign.compSpacing) * rate + "px";
+        if (device === _constants.deviceTypeMap.PC && compWidth && !((_a = spacing === null || spacing === void 0 ? void 0 : spacing.pc) === null || _a === void 0 ? void 0 : _a.fillUp)) {
+          wrapStyle.width = compWidth;
+        }
+
+        return wrapStyle;
+      };
+
+      _this.getMaskStyle = function () {
+        var nodeData = _this.props.nodeData;
+        var mode = window.magicDesign.mode;
+        var _a = _this.state,
+            hoveredFloor = _a.hoveredFloor,
+            clickedFloor = _a.clickedFloor; // 选中状态
+
+        var maskStyle = {
+          border: '2px solid #2F54EB',
+          position: 'absolute',
+          inset: '0px',
+          zIndex: '0',
+          opacity: '0'
+        }; // 处理复合组件的hover状态
+
+        if (mode === 'designer') {
+          if (clickedFloor !== hoveredFloor && hoveredFloor === nodeData.id) {
+            maskStyle.backgroundColor = 'rgba(47, 84, 235, 0.08)';
+            maskStyle.opacity = '100%';
+            maskStyle.zIndex = '3';
+          } // 处理复合组件的选中状态
+
+
+          if (clickedFloor === nodeData.id) {
+            maskStyle.backgroundColor = 'transparent';
+            maskStyle.opacity = '100%';
+            maskStyle.zIndex = '0';
+          }
+        }
+
+        return maskStyle;
+      };
+
+      _this.getWrapStyle = function () {
+        var mode = window.magicDesign.mode;
+        var nodeData = _this.props.nodeData;
+        var style = {
+          position: 'relative',
+          zIndex: '1'
+        };
+        var clickedFloor = _this.state.clickedFloor; // banner 和 recommend 在选中状态需要加padding,让选中的外边框展示出来
+
+        if (mode === 'designer' && clickedFloor === nodeData.id && ['BANNER', 'RECOMMEND'].includes(nodeData.type)) {
+          style.padding = '2px';
         }
 
         return style;
       };
 
+      _this.onMouseEnter = function () {
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        }
+
+        _mobx.store.setState({
+          hoveredFloor: _this.props.nodeData.id
+        });
+      };
+
+      _this.onMouseLeave = function () {
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        }
+
+        _mobx.store.setState({
+          hoveredFloor: ''
+        });
+      };
+
       return _this;
     }
 
@@ -104,7 +222,8 @@ function compositeDecorator(WrappedComponent) {
 
       this.distroy = (0, _mobx.autorun)(function () {
         _this.setState({
-          clickedFloor: _mobx.store.clickedFloor
+          clickedFloor: _mobx.store.clickedFloor,
+          hoveredFloor: _mobx.store.hoveredFloor
         });
       });
     };
@@ -114,11 +233,24 @@ function compositeDecorator(WrappedComponent) {
     };
 
     Wrapper.prototype.render = function () {
+      var _a;
+
+      var nodeData = this.props.nodeData;
+      var clickedFloor = this.state.clickedFloor;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "composite_wrap",
         onClick: this.onCompositeCompClick,
-        style: this.getStyle()
-      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props));
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        style: this.getCompositeStyle()
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "composite_mask",
+        style: this.getMaskStyle()
+      }, clickedFloor !== nodeData.id && /*#__PURE__*/_react["default"].createElement("span", {
+        style: floorNameStyle
+      }, (_a = _constants.compInfoMap[nodeData.type]) === null || _a === void 0 ? void 0 : _a.name)), /*#__PURE__*/_react["default"].createElement("div", {
+        style: this.getWrapStyle()
+      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props)));
     };
 
     Wrapper.getDefaultJSON = WrappedComponent.getDefaultJSON;

package/es/decorator/index.js

@@ -15,9 +15,17 @@ Object.defineProperty(exports, "metaDecorator", {
     return _metaDecorator["default"];
   }
 });
+Object.defineProperty(exports, "updateConfigDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _updateConfigDecorator["default"];
+  }
+});
 
 var _compositeDecorator = _interopRequireDefault(require("./compositeDecorator"));
 
 var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
+var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }