@fonixtree/magic-design 0.0.97 → 0.0.99

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

@@ -74,9 +74,8 @@
     padding: 24px;
 
     .device_border {
-      padding: 1px;
-      max-width: 1240px;
       width: 100%;
+      padding: 1px;
       min-height: 70vh;
       border: 16px solid #FFF;
       border-radius: 12px;
@@ -84,10 +83,6 @@
       height: 100%;
       overflow: scroll;
       box-sizing: content-box;
-
-      .device_content {
-        min-width: 1200px;
-      }
     }
   }
 }

package/lib/core/Renderer/index.js

@@ -41,7 +41,8 @@ var setDesignConfig = function setDesignConfig(props) {
     device: device,
     isShop: isShop
   }, config), {
-    compSpacing: Number(config.compSpacing)
+    compSpacing: Number(config.compSpacing),
+    compWidth: Number(config.compWidth)
   });
 };
 /**
@@ -51,7 +52,8 @@ var setDesignConfig = function setDesignConfig(props) {
 
 var Renderer = function Renderer(props) {
   var pageData = props.pageData;
-  setDesignConfig(props); // 根据楼层展示设备进行过滤
+  setDesignConfig(props);
+  var pageBackground = window.magicDesign.pageBackground; // 根据楼层展示设备进行过滤
 
   var filterCompFloor = function filterCompFloor() {
     var source = [];
@@ -69,7 +71,7 @@ var Renderer = function Renderer(props) {
     className: "render_wrap",
     magic_design: "",
     style: {
-      background: window.magicDesign.pageBackground
+      background: pageBackground
     }
   }, filterCompFloor().map(function (nodeData) {
     var Clazz = _componentTypes.componentMap[nodeData.type];

package/lib/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; }
@@ -58,6 +60,17 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 
 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) {
@@ -67,7 +80,8 @@ function compositeDecorator(WrappedComponent) {
       var _this = _super !== null && _super.apply(this, arguments) || this;
 
       _this.state = {
-        clickedFloor: ''
+        clickedFloor: '',
+        hoveredFloor: ''
       }; // 复合组件点击事件
 
       _this.onCompositeCompClick = function (event) {
@@ -89,48 +103,115 @@ function compositeDecorator(WrappedComponent) {
         window.document.dispatchEvent(evt);
       };
 
-      _this.getStyle = function () {
+      _this.getCompositeStyle = function () {
+        var _a;
+
         var nodeData = _this.props.nodeData;
-        var wrapStyle = {
-          border: 'none'
-        };
-        var _a = window.magicDesign,
-            device = _a.device,
-            mode = _a.mode;
         var spacing = nodeData.spacing,
-            background = nodeData.background; // 处理复合组件的选中状态
+            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 (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 (device === _constants.deviceTypeMap.PC && compWidth && !((_a = 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') {
-          // style.border = '1px solid transparent';
-          wrapStyle.border = 'none';
+          if (clickedFloor !== hoveredFloor && hoveredFloor === nodeData.id) {
+            maskStyle.backgroundColor = 'rgba(47, 84, 235, 0.08)';
+            maskStyle.opacity = '100%';
+            maskStyle.zIndex = '3';
+          } // 处理复合组件的选中状态
 
-          if (nodeData.id === _this.state.clickedFloor) {
-            wrapStyle.border = '1px dashed red';
-          }
-        } // banner的padding和background单独处理
-
-
-        if (nodeData.type != 'BANNER') {
-          // 边距
-          if (spacing && spacing[device]) {
-            wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
-          } // 背景
-
-
-          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';
-            }
+
+          if (clickedFloor === nodeData.id) {
+            maskStyle.backgroundColor = 'transparent';
+            maskStyle.opacity = '100%';
+            maskStyle.zIndex = '0';
           }
         }
 
-        return wrapStyle;
+        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;
@@ -141,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
         });
       });
     };
@@ -151,11 +233,22 @@ function compositeDecorator(WrappedComponent) {
     };
 
     Wrapper.prototype.render = function () {
+      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
+      }, _constants.compInfoMap[nodeData.type].name)), /*#__PURE__*/_react["default"].createElement("div", {
+        style: this.getWrapStyle()
+      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props)));
     };
 
     Wrapper.getDefaultJSON = WrappedComponent.getDefaultJSON;

package/lib/decorator/metaDecorator.js

@@ -182,7 +182,7 @@ function metaDecorator(WrappedComponent) {
 
         if (rest.data.type === 'TEXT') {
           var width = window.magicDesign.device === 'pc' ? rest.data.content.pcWidth : rest.data.content.width;
-          newStyle.width = (width || 100) + "%";
+          newStyle.width = (Math.min(width, 100) || 100) + "%";
         }
 
         return newStyle;

package/lib/mobx/Store.js

@@ -14,7 +14,7 @@ var _storeUtil = require("../utils/storeUtil");
 var debug = require('debug')('worker:mobx');
 
 var CACHE_KEY = 'STORE';
-var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'textSelection', 'MPageData'];
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'hoveredFloor', 'textSelection', 'MPageData'];
 
 var Store =
 /** @class */
@@ -30,6 +30,8 @@ function () {
 
     this.clickedFloor = ''; // 点击的楼层Id
 
+    this.hoveredFloor = ''; // hover的复合组件Id
+
     this.textSelection = null; // 文本元组件选中区域
 
     this.MPageData = []; // 楼层数据
@@ -43,6 +45,7 @@ function () {
       clickedMeta: _mobx.observable,
       clickedGroup: _mobx.observable,
       clickedFloor: _mobx.observable,
+      hoveredFloor: _mobx.observable,
       CarouselStore: _mobx.observable,
       setState: _mobx.action.bound
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",