@fonixtree/magic-design 0.0.78 → 0.0.80

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

@@ -121,9 +121,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 +180,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",
@@ -245,6 +247,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 +272,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

@@ -82,7 +82,7 @@ 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({

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,22 @@ 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);
+        });
+      }
 
-    _this.renderView = function () {
-      _this.setState({});
+      return source;
     };
 
     return _this;
@@ -125,7 +139,7 @@ function (_super) {
       style: {
         background: window.magicDesign.pageBackground
       }
-    }, pageData && pageData.map(function (nodeData) {
+    }, this.filterCompFloor(pageData).map(function (nodeData) {
       var Clazz = _componentTypes.componentMap[nodeData.type];
 
       if (!Clazz) {

package/lib/core/Designer/index.js

@@ -97,11 +97,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 +172,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 +191,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 +252,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 +264,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 +307,24 @@ function (_super) {
         device: device
       };
 
+      var callback = function callback(newPageData) {
+        _mobx.store.setState({
+          MPageData: newPageData
+        });
+
+        _this.setState({
+          MPageData: newPageData
+        });
+      };
+
       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;
 
@@ -335,8 +350,6 @@ function (_super) {
 
           break;
       }
-
-      console.log(JSON.stringify(handleParams.pageData));
     };
 
     _this.renderHeader = function () {
@@ -353,27 +366,20 @@ function (_super) {
         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
     };
-    _this.history = new _History["default"](MPageData);
     setDesignConfig(config);
     return _this;
   }
@@ -398,6 +404,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 +413,6 @@ function (_super) {
       MPageData: MPageData
     });
 
-    this.history = new _History["default"](MPageData);
     setDesignConfig(config);
   };
 
@@ -467,8 +473,8 @@ 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}
+    , {
       device: device,
       pageData: MPageData,
       renderHeader: this.renderHeader

package/lib/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,14 @@ 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)
+  });
 };
 /**
  * @class Renderer 页面预览器，外部工程使用此类来渲染出页面。
@@ -48,14 +51,27 @@ var setDesignConfig = function setDesignConfig(props) {
 
 var Renderer = function Renderer(props) {
   var pageData = props.pageData;
-  setDesignConfig(props);
+  setDesignConfig(props); // 根据楼层展示设备进行过滤
+
+  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
     }
-  }, pageData && pageData.childNodes && pageData.childNodes.map(function (nodeData) {
+  }, filterCompFloor().map(function (nodeData) {
     var Clazz = _componentTypes.componentMap[nodeData.type];
 
     if (!Clazz) {

package/lib/decorator/compositeDecorator.js

@@ -41,6 +41,22 @@ 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 Wrapper =
   /** @class */
@@ -74,26 +90,43 @@ function compositeDecorator(WrappedComponent) {
       };
 
       _this.getStyle = function () {
-        var style = {
+        var wrapStyle = {
           border: 'none'
-        }; // 处理复合组件的选中状态
-
-        if (window.magicDesign.mode === 'designer') {
+        };
+        var _a = window.magicDesign,
+            device = _a.device,
+            mode = _a.mode;
+        var nodeData = _this.props.nodeData;
+        var spacing = nodeData.spacing,
+            background = nodeData.background; // 处理复合组件的选中状态
+
+        if (mode === 'designer') {
           // style.border = '1px solid transparent';
-          style.border = 'none';
+          wrapStyle.border = 'none';
 
-          if (_this.props.nodeData.id === _this.state.clickedFloor) {
-            style.border = '1px dashed red';
+          if (nodeData.id === _this.state.clickedFloor) {
+            wrapStyle.border = '1px dashed red';
           }
-        } // 处理复合组件的下边距
+        } // 边距
+
 
+        if (spacing && spacing[device]) {
+          wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
+        } // 背景
 
-        if (Wrapper.type !== 'DIVIDER') {
-          var rate = window.magicDesign.device === 'pc' ? 1.5 : 1;
-          style.marginBottom = Number(window.magicDesign.compSpacing) * rate + "px";
+
+        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 = 'center';
+            wrapStyle.backgroundSize = 'cover';
+          }
         }
 
-        return style;
+        return wrapStyle;
       };
 
       return _this;

package/lib/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 }; }

package/lib/decorator/metaDecorator.js

@@ -69,7 +69,7 @@ function metaDecorator(WrappedComponent) {
       }; // 元组件点击事件
 
       _this.onMetaClick = function (event) {
-        var _a, _b, _c;
+        var _a, _b;
 
         if (window.magicDesign.mode === 'renderer') {
           return;
@@ -90,7 +90,7 @@ function metaDecorator(WrappedComponent) {
         }
 
         _mobx.store.setState({
-          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
+          clickedMeta: metaId,
           clickedGroup: parentId,
           clickedFloor: floorId
         });
@@ -142,7 +142,8 @@ function metaDecorator(WrappedComponent) {
         var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
         var style = {
           boxSizing: 'border-box',
-          height: '100%'
+          height: '100%',
+          border: '1px solid transparent'
         };
 
         if (window.magicDesign.mode === 'renderer') {

package/lib/decorator/updateConfigDecorator.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = updateConfigDecorator;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 __());
+  };
+}();
+/**
+ *  更新组件一级配置面板的装修器
+ */
+
+
+function updateConfigDecorator(WrappedComponent) {
+  var Wrapper =
+  /** @class */
+  function (_super) {
+    __extends(Wrapper, _super);
+
+    function Wrapper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.update = function () {
+        _this.setState({});
+      };
+
+      return _this;
+    }
+
+    Wrapper.prototype.componentDidMount = function () {
+      window.document.addEventListener(_constants.eventType.UPDATE_FIRST_CONFIG, this.update);
+    };
+
+    Wrapper.prototype.componentWillUnmount = function () {
+      window.document.removeEventListener(_constants.eventType.UPDATE_FIRST_CONFIG, this.update);
+    };
+
+    Wrapper.prototype.render = function () {
+      return /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props);
+    };
+
+    return Wrapper;
+  }(_react["default"].Component);
+
+  return Wrapper;
+}

package/lib/locale/en/en.json

@@ -1,4 +1,18 @@
 {
+  "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",
@@ -85,7 +99,6 @@
   "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,4 +1,18 @@
 {
+  "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",
@@ -85,7 +99,6 @@
   "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,4 +1,18 @@
 {
+  "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",
@@ -85,7 +99,6 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
-  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",