@fonixtree/magic-design 0.0.102 → 0.0.104

package/lib/core/Designer/ConfigPanel/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _TerminalSelect = _interopRequireDefault(require("./TerminalSelect"));
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _commonUtil = require("../../../utils/commonUtil");
@@ -72,6 +74,34 @@ function (_super) {
       selectedNode: {}
     };
 
+    _this.resetState = function (propsData, clickedFloor) {
+      var pageData = propsData.pageData;
+      var selectedNode = pageData.find(function (floor) {
+        return floor.id === clickedFloor;
+      });
+
+      _this.setState({
+        clickedGroup: _mobx.store.clickedGroup,
+        selectedNode: selectedNode
+      }); // 展开一级面板
+
+
+      if (selectedNode) {
+        _this.openConfig();
+      } else {
+        _this.closeConfig();
+      } // 展开二级面板
+
+
+      if (!_mobx.store.clickedGroup && _this.preClickedGroup) {
+        _this.closeSecConfig();
+      } else if (Boolean(_mobx.store.clickedGroup) != Boolean(_this.preClickedGroup)) {
+        _this.openSecConfig();
+      }
+
+      _this.preClickedGroup = _mobx.store.clickedGroup;
+    };
+
     _this.animation = function (type) {
       document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:" + type + ";animation-duration: 0.3s;animation-fill-mode:both");
     };
@@ -157,6 +187,13 @@ function (_super) {
         device: device
       };
       var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, panelProps) : null;
+
+      if (!instance) {
+        _mobx.store.setState({
+          clickedFloor: null
+        });
+      }
+
       return instance;
     };
 
@@ -199,6 +236,7 @@ function (_super) {
       var groupName = '';
 
       switch (selectedNode.type) {
+        case 'IMAGE_GALLERY':
         case 'BANNER':
           groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
 
@@ -209,11 +247,15 @@ function (_super) {
           break;
 
         case 'MOBILE_NAVIGATION':
+        case 'PC_NAVIGATION':
           groupName = ((_f = panelProps.groupName) === null || _f === void 0 ? void 0 : _f.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
           break;
 
         case 'RECOMMEND':
           groupName = panelProps.groupName.text;
+
+        case 'TAG':
+          groupName = '';
       }
 
       return groupName || 'Group Name';
@@ -223,40 +265,41 @@ function (_super) {
       _mobx.store.setState({
         clickedGroup: null
       });
-    };
 
-    return _this;
-  }
-
-  ConfigPanel.prototype.componentDidMount = function () {
-    var _this = this;
+      window.document.dispatchEvent(new Event(_constants.eventType.UPDATE_FIRST_CONFIG, {
+        bubbles: false
+      }));
+    };
 
-    this.distroy = (0, _mobx.autorun)(function () {
-      var selectedNode = _mobx.store.getFloorInfo();
+    _this.onTerminalChange = function (terminal) {
+      var selectedNode = _this.state.selectedNode;
+      selectedNode.activeTerminal = terminal;
 
       _this.setState({
-        clickedGroup: _mobx.store.clickedGroup,
         selectedNode: selectedNode
-      }); // 展开以及面板
+      }); // 刷新页面组件列表 和 viewArea
 
 
-      if (selectedNode) {
-        _this.openConfig();
-      } else {
-        _this.closeConfig();
-      } // 展开首期二级面板
+      (0, _coreUtil.renderPreview)();
+    };
 
+    return _this;
+  }
 
-      if (!_mobx.store.clickedGroup) {
-        _this.closeSecConfig();
-      } else if (_mobx.store.clickedGroup !== _this.preClickedGroup) {
-        _this.openSecConfig();
-      }
+  ConfigPanel.prototype.componentDidMount = function () {
+    var _this = this;
 
-      _this.preClickedGroup = _mobx.store.clickedGroup;
+    this.distroy = (0, _mobx.autorun)(function () {
+      _this.resetState(_this.props, _mobx.store.clickedFloor);
     });
   };
 
+  ConfigPanel.prototype.componentWillReceiveProps = function (nextProps) {
+    if (JSON.stringify(this.props) !== JSON.stringify(nextProps)) {
+      this.resetState(nextProps, _mobx.store.clickedFloor);
+    }
+  };
+
   ConfigPanel.prototype.componentWillUnmount = function () {
     this.distroy();
   };
@@ -275,10 +318,17 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "title",
       title: (_a = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
-    }, (_b = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    }, (_b = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_TerminalSelect["default"], {
+      onChange: this.onTerminalChange,
+      terminalType: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.terminalType,
+      value: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.activeTerminal
+    }), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       onClick: this.onDoneClick,
+      size: "small",
       type: "light"
-    }, (0, _locale.i18n)('DONE'))), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _locale.i18n)('DONE')))), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
       className: "sec_config_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "config_header"

package/lib/core/Designer/ConfigPanel/index.less

@@ -39,6 +39,10 @@
         line-height: 32px;
         color: #232F46;
       }
+      .right_wrap {
+        display: flex;
+        align-items: center;
+      }
     }
   }
 

package/lib/core/Designer/History/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _lodash = require("lodash");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /**
@@ -14,24 +16,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * 有新的操作时存入数组的0位置，游标设置为0
  *
  */
-var debug = require('debug')('worker:History');
-
 var History =
 /** @class */
 function () {
   function History(hist) {
     var _this = this;
     /**
-     * 游标位置
-     */
+      * 游标位置
+      */
 
 
     this.cursor = 0;
     /**
-     * 历史数据
-     */
+      * 历史数据
+      */
 
     this.list = [];
+    /** 前进或者后退步数 */
+
+    this.step = 0;
 
     this.redoAble = function () {
       return _this.cursor !== 0;
@@ -41,47 +44,50 @@ function () {
       return _this.cursor !== _this.list.length - 1;
     };
     /**
-     * 清空0～cursor之间的数据，将data插入 位置0
-     */
+      * 清空0～cursor之间的数据，将data插入 位置0
+      */
 
 
     this.push = function (data) {
-      debug('push data', data);
       var cloneData = (0, _cloneDeep["default"])(data);
 
       _this.list.splice(0, _this.cursor, cloneData);
 
+      _this.cursor = 0;
       return data;
     };
     /**
-     * redu操作只修改当前游标-1
-     * 并且返回后一步的json对象
-     */
+      * redu操作只修改当前游标-1
+      * 并且返回后一步的json对象
+      */
 
 
-    this.redo = function () {
-      debug('redo click');
-      var newCursor = _this.cursor - 1;
-      _this.cursor = newCursor;
-      var newData = _this.list[newCursor];
-      return newData;
+    this.redo = function (callback) {
+      _this.step -= 1;
+
+      _this.doAction(callback);
     };
     /**
-     * undo操作只修改当前的游标+1
-     * 并且返回前一步的json对象
-     */
+      * undo操作只修改当前的游标+1
+      * 并且返回前一步的json对象
+      */
 
 
-    this.undo = function () {
-      debug('undo click');
-      var newCursor = _this.cursor + 1;
-      _this.cursor = newCursor;
-      var newData = _this.list[newCursor];
-      return newData;
+    this.undo = function (callback) {
+      _this.step += 1;
+
+      _this.doAction(callback);
     };
 
+    this.doAction = (0, _lodash.debounce)(function (callback) {
+      var newCursor = _this.cursor + _this.step;
+      _this.cursor = newCursor;
+      var newData = (0, _cloneDeep["default"])(_this.list[newCursor]);
+      _this.step = 0;
+      callback(newData);
+    }, 300);
     this.cursor = 0;
-    this.list = [hist];
+    this.list = [(0, _cloneDeep["default"])(hist)];
   }
 
   return History;

package/lib/core/Designer/PageCompList/index.js

@@ -73,6 +73,10 @@ function PageCompList(_a) {
       clickedFloor = _d[0],
       setClickedFloor = _d[1];
 
+  var _e = (0, _react.useState)(''),
+      hoveredFloor = _e[0],
+      setHoveredFloor = _e[1];
+
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     setComponents(pageData || []);
@@ -80,6 +84,7 @@ function PageCompList(_a) {
   (0, _react.useEffect)(function () {
     var distroy = (0, _mobx.autorun)(function () {
       setClickedFloor(_mobx.store.clickedFloor);
+      setHoveredFloor(_mobx.store.hoveredFloor);
     });
     return distroy;
   }, []);
@@ -104,6 +109,7 @@ function PageCompList(_a) {
   };
 
   var onDragEnter = function onDragEnter(e) {
+    console.log('drag enter');
     var hoverNodeId = e.currentTarget.dataset.nodeid;
 
     if (dragId === hoverNodeId) {
@@ -121,9 +127,11 @@ function PageCompList(_a) {
     }
   };
 
-  var onMenuClick = function onMenuClick(index, operType) {
+  var onMenuClick = function onMenuClick(activeComp, operType) {
     var newComponents = __spreadArrays(components);
 
+    var index = newComponents.indexOf(activeComp);
+
     if (operType === operTypeMap.MOVE_UP) {
       var temp = newComponents[index - 1];
       newComponents[index - 1] = newComponents[index];
@@ -178,7 +186,7 @@ function PageCompList(_a) {
     var menu = /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
       onClick: function onClick(_a) {
         var item = _a.item;
-        return onMenuClick(index, item.props.value);
+        return onMenuClick(comp, item.props.value);
       }
     }, index !== 0 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
       className: "menu_item",
@@ -194,8 +202,28 @@ function PageCompList(_a) {
       value: "4"
     }, (0, _locale.i18n)('DELETE')));
 
+    var onMouseEnter = function onMouseEnter() {
+      if (window.magicDesign.mode === 'renderer') {
+        return;
+      }
+
+      _mobx.store.setState({
+        hoveredFloor: comp.id
+      });
+    };
+
+    var onMouseLeave = function onMouseLeave() {
+      if (window.magicDesign.mode === 'renderer') {
+        return;
+      }
+
+      _mobx.store.setState({
+        hoveredFloor: ''
+      });
+    };
+
     var dragging = dragId === String(comp.id);
-    var active = clickedFloor === String(comp.id);
+    var active = [hoveredFloor, clickedFloor].includes(comp.id);
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: "card" + comp.id,
       className: (0, _classnames["default"])('card-wrap', {
@@ -210,6 +238,8 @@ function PageCompList(_a) {
         e.preventDefault();
       },
       onDragStart: onDragStart,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
       style: {
         opacity: dragging ? '0.4' : '1'
       }
@@ -245,6 +275,14 @@ function PageCompList(_a) {
     })));
   };
 
+  var getActiveComponents = function getActiveComponents() {
+    var filter = components.filter(function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return filter;
+  };
+
+  var activeComponents = getActiveComponents();
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "page-comp-wrap"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -262,7 +300,7 @@ function PageCompList(_a) {
     className: "list mt16"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "inner-list"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, components.length > 0 && components.map(function (comp, i) {
+  }, /*#__PURE__*/_react["default"].createElement("div", null, activeComponents.length > 0 && activeComponents.map(function (comp, i) {
     return renderCard(comp, i);
   }))))));
 }

package/lib/core/Designer/PageCompList/index.less

@@ -121,19 +121,19 @@
       display: block;
     }
   }
-}
 
-.active {
-  background: #E9F0FF;
-  color: #2F54EB;
+  &.active {
+    background: #E9F0FF;
+    color: #2F54EB;
 
-  .left {
-    .card-title {
-      font-weight: 600;
+    .left {
+      .card-title {
+        font-weight: 600;
+      }
     }
-  }
 
-  .more-btn {
-    display: block;
+    .more-btn {
+      display: block;
+    }
   }
 }

package/lib/core/Designer/QuickMenuBar/index.js

@@ -23,6 +23,8 @@ require("./index.less");
 
 var _locale = require("../../../locale");
 
+var _antd = require("antd");
+
 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; }
@@ -82,11 +84,13 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.onBtnClick = function (event) {
-      var code = event.currentTarget.dataset.code;
+      var code = event.currentTarget.dataset.code; // 保存和发布时需要清空组件和元组件的选中状态，否则截图中会看到选中状态
 
       if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
         _mobx.store.setState({
-          clickedFloor: ''
+          clickedFloor: '',
+          clickedGroup: '',
+          clickedMeta: ''
         });
       }
 
@@ -95,6 +99,12 @@ function (_super) {
       _this.props.onBtnClick(code);
     };
 
+    _this.onPublishLater = function (e) {
+      _this.onBtnClick(e);
+
+      e.stopPropagation();
+    };
+
     return _this;
   }
 
@@ -170,13 +180,37 @@ function (_super) {
       onClick: this.onBtnClick,
       tip: "The page is in use. Please copy or create a new page",
       type: "light"
-    }, (0, _locale.i18n)('SAVE')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    }, (0, _locale.i18n)('SAVE')), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "publish_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       "data-code": _constants.quickMenuCode.PUBLISH,
       disabled: window.magicDesign.readOnly,
       onClick: this.onBtnClick,
       tip: "The page is in use. Please copy or create a new page",
       type: "primary"
-    }, (0, _locale.i18n)('PUBLISH'))));
+    }, (0, _locale.i18n)('PUBLISH_NOW'), /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
+      getPopupContainer: function getPopupContainer() {
+        return document.querySelector('.publish_wrap');
+      },
+      overlay: /*#__PURE__*/_react["default"].createElement("div", {
+        className: "publish_later_wrap"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "publish_btn",
+        "data-code": _constants.quickMenuCode.PUBLISH_LATER,
+        onClick: this.onPublishLater
+      }, (0, _locale.i18n)('PUBLISH_LATER'))),
+      overlayClassName: "publish_later_drop",
+      trigger: "click"
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      size: "14px",
+      style: {
+        padding: '8px 3px 8px 6px'
+      },
+      type: "icon-outlined-down"
+    }))))));
   };
 
   return QuickMenuBar;

package/lib/core/Designer/QuickMenuBar/index.less

@@ -72,5 +72,39 @@
 
   .menu_right {
     display: flex;
+    .publish_wrap {
+      position: relative;
+      margin-left: 12px;
+    }
+    .publish_later_drop {
+      width: 100%;
+      top: 56px !important;
+      left: 0 !important;
+      .publish_later_wrap {
+        box-shadow: 4px 4px 25px 4px rgba(35, 47, 70, 0.1);
+        border-radius: 10px;
+        padding: 4px 0;
+        background-color: #FFF;
+        position: absolute;
+        left: 0;
+        right: 0;
+        .publish_btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 600;
+          font-size: 16px;
+          height: 48px;
+          background-color: #E9F0FF;
+          color: #2F54EB;
+          cursor: pointer;
+          &:hover {
+            background-color: #D6E4FF;
+          }
+        }
+      }
+    }
   }
 }

package/lib/core/Designer/ViewArea/index.js

@@ -17,10 +17,12 @@ var _constants = require("../../../constants");
 
 var _componentTypes = require("../../../constants/component-types");
 
-require("./index.less");
-
 var _mobx = require("../../../mobx");
 
+var _coreUtil = require("../../../utils/coreUtil");
+
+require("./index.less");
+
 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; }
@@ -86,10 +88,39 @@ function (_super) {
     _this.isPhoneEdit = function () {
       var device = _this.props.device;
       return device === _constants.deviceTypeMap.PHONE && !(0, _isEmpty["default"])(_this.state.clickedFloor);
+    }; // renderView = () => {
+    //   this.setState({});
+    // }
+    // 根据楼层展示设备进行过滤
+
+
+    _this.filterCompFloor = function (dataSource) {
+      var source = [];
+
+      if (dataSource && dataSource.length) {
+        source = dataSource.filter(function (node) {
+          return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
+        });
+      }
+
+      return source;
     };
 
-    _this.renderView = function () {
-      _this.setState({});
+    _this.onCancelClick = function () {
+      var onCancelPublish = _this.props.onCancelPublish;
+
+      _mobx.frameStore.setState({
+        confirmState: {
+          title: 'Cancel Publish Later',
+          content: 'Do you want to cancel publishing later?',
+          visible: true,
+          onOk: function onOk() {
+            if (onCancelPublish) {
+              onCancelPublish();
+            }
+          }
+        }
+      });
     };
 
     return _this;
@@ -113,19 +144,28 @@ function (_super) {
     var _a = this.props,
         device = _a.device,
         renderHeader = _a.renderHeader,
-        pageData = _a.pageData;
+        pageData = _a.pageData,
+        appointmentDate = _a.appointmentDate;
+    var pageBackground = window.magicDesign.pageBackground;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('design-area-wrap', {
         'phone-edit': this.isPhoneEdit()
       })
-    }, renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
+    }, renderHeader(), appointmentDate && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "appointment_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "appointment_tip"
+    }, "This page will be published at " + appointmentDate + ", If you need to edit it, please cancel the publishing later"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cancel_btn",
+      onClick: this.onCancelClick
+    }, "Cancel Publish Later")), /*#__PURE__*/_react["default"].createElement("div", {
       className: device === _constants.deviceTypeMap.PC ? 'pc_view_area' : 'phone_view_area'
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_border",
       style: {
-        background: window.magicDesign.pageBackground
+        background: pageBackground
       }
-    }, pageData && pageData.map(function (nodeData) {
+    }, this.filterCompFloor(pageData).map(function (nodeData) {
       var Clazz = _componentTypes.componentMap[nodeData.type];
 
       if (!Clazz) {