@fonixtree/magic-design 0.0.56 → 0.0.60

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 () {
@@ -48,14 +50,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/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/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,14 @@
 {
+  "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",
@@ -87,7 +97,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,14 @@
 {
+  "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",
@@ -87,7 +97,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,14 @@
 {
+  "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",
@@ -87,7 +97,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/meta-comp/components/Button/index.js

@@ -90,14 +90,14 @@ function (_super) {
 
     _this.preData = '';
     return _this;
-  }
+  } // 会影响到 button 的 hover style 失效
+  // shouldComponentUpdate(nextProps) {
+  //   const should1 = JSON.stringify(nextProps.data) != this.preData;
+  //   const should2 = window.magicDesign.device != this.preDevice;
+  //   const result = should1 || should2;
+  //   return result;
+  // }
 
-  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;
@@ -172,7 +172,7 @@ function (_super) {
       })
     }, (iconLayout === 'right' || iconLayout === 'bottom') && btnText, iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "item",
+      className: "icon",
       src: iconUrl
     }), (iconLayout === 'left' || iconLayout === 'top') && btnText));
   };

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

@@ -2,6 +2,7 @@
   transition: all 0.25s;
 
   .btnContent {
+    width: 100%;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -12,6 +13,10 @@
       flex-direction: row;
     }
 
+    .item {
+      width: 100%;
+    }
+
     img {
       height: 20px;
       margin: 0 5px;

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

@@ -86,7 +86,7 @@ function (_super) {
 
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(" + data.hover.magnification / 2 + ")";
+        obj.transform = "scale(" + data.hover.magnification + ")";
       }
 
       if (maxHeight) {

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

@@ -102,7 +102,8 @@ var contentStyle = function contentStyle(content) {
     color: content.color,
     backgroundColor: content.backgroundColor,
     textAlign: content.textAlign,
-    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
+    // width: (window.magicDesign.device == 'pc' ? content.pcWidth :  content.width) || 'fit-content',
+    width: (window.magicDesign.device == 'pc' ? content.pcWidth : content.width) || '100%'
   };
 };
 /** 从父级数组中 分离出 片段数组 */
@@ -256,7 +257,8 @@ var initSelectionEvent = function initSelectionEvent() {
         }
 
         findSelectionTarget.refresh();
-      }
+      } // todo 不知道干什么用的
+
 
       triggerTextConfigRender();
     }, 500);
@@ -429,12 +431,21 @@ 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
+      });
+    } // 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
-    });
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,

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

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

package/lib/meta-comp/config-panels/TextConfig/index.js

@@ -15,6 +15,8 @@ require("./index.less");
 
 var _locale = require("../../../locale");
 
+var _constants = require("../../../constants");
+
 var _common = require("../../../common");
 
 var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
@@ -273,17 +275,22 @@ function (_super) {
         })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
           title: (0, _locale.i18n)('CONTENT_WIDTH')
         }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
-          maxVal: 1760,
+          maxVal: _constants.deviceTypeWidthMap[window.magicDesign.device],
           minVal: 0,
           onChange: function onChange(_a) {
             var count = _a.count;
-            textData.width = count;
+
+            if (window.magicDesign.device == 'pc') {
+              textData.pcWidth = count;
+            } else {
+              textData.width = count;
+            }
 
             _this.selfRender();
           },
           unit: "px",
           value: {
-            count: textData.width
+            count: window.magicDesign.device == 'pc' ? textData.pcWidth : textData.width
           }
         })))
       }, {

package/lib/mobx/Store.js

@@ -13,6 +13,9 @@ var _storeUtil = require("../utils/storeUtil");
 
 var debug = require('debug')('worker:mobx');
 
+var CACHE_KEY = 'STORE';
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'textSelection', 'MPageData'];
+
 var Store =
 /** @class */
 function () {
@@ -34,6 +37,7 @@ function () {
     this.CarouselStore = {}; // 轮播组件暂存数据
 
     (0, _mobx.makeObservable)(this, {
+      MPageData: _mobx.observable,
       locale: _mobx.observable,
       hoveredMeta: _mobx.observable,
       clickedMeta: _mobx.observable,
@@ -54,6 +58,7 @@ function () {
     propertyList.forEach(function (field) {
       _this[field] = data[field];
     });
+    (0, _storeUtil.persistence)(CACHE_KEY, this, whiteList);
   };
   /**
    *根据groupId 获取楼层Id
@@ -87,15 +92,6 @@ function () {
     return componentFloor.id;
   };
 
-  Store.prototype.getFloorInfo = function () {
-    var _this = this;
-
-    var componentFloor = this.MPageData.find(function (floor) {
-      return floor.id === _this.clickedFloor;
-    });
-    return componentFloor;
-  };
-
   return Store;
 }();
 

package/lib/utils/coreUtil.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setMagicDesign = exports.renderPreview = exports.isPc = exports.isDesignMode = exports.copyNode = exports.clickUrl = void 0;
+exports.setMagicDesign = exports.renderPreview = exports.isPc = exports.isDesignMode = exports.isActiveFloor = exports.copyNode = exports.clickUrl = void 0;
 
 var _uuid = require("uuid");
 
@@ -33,6 +33,13 @@ var __assign = void 0 && (void 0).__assign || function () {
 
 var _this = void 0;
 
+/** 根据楼层设置的终端类型，判断是否展示该楼层 */
+var isActiveFloor = function isActiveFloor(activeTerminal) {
+  return activeTerminal === 'ALL' || activeTerminal === window.magicDesign.device.toUpperCase();
+};
+
+exports.isActiveFloor = isActiveFloor;
+
 var isDesignMode = function isDesignMode() {
   return window.magicDesign.mode === 'designer';
 };
@@ -53,10 +60,15 @@ var setMagicDesign = function setMagicDesign(magicDesignObj) {
 
 exports.setMagicDesign = setMagicDesign;
 
-var renderPreview = function renderPreview() {
+var renderPreview = function renderPreview(changeHistory) {
+  if (changeHistory === void 0) {
+    changeHistory = true;
+  }
+
   var evt = new Event('render-view', {
     bubbles: false
   });
+  evt.changeHistory = changeHistory;
   window.document.dispatchEvent(evt);
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.56",
+  "version": "0.0.60",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -36,6 +36,91 @@
     "shortid": "^2.2.16",
     "slick-carousel": "^1.8.1"
   },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/webpack": "^5.5.0",
+    "@types/axios": "^0.14.0",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^17.0.36",
+    "@types/react": "^18.0.9",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.5",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "add": "^2.0.6",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "child_process": "^1.0.2",
+    "classnames": "^2.3.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "7",
+    "eslint-config-next": "^12.1.6",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "extract-zip": "^2.0.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "gulp": "4.0.2",
+    "gulp-less": "5.0.0",
+    "gulp-postcss": "9.0.1",
+    "gulp-rename": "2.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "http-proxy-middleware": "^2.0.6",
+    "identity-obj-proxy": "^3.0.0",
+    "less": "3.13.1",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "mv": "^2.1.1",
+    "ora": "^4.1.1",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-less": "6.0.0",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-selector-namespace": "^3.0.1",
+    "prompts": "^2.4.2",
+    "rc-tools": "^9.6.1-alpha.1",
+    "react": "^16.11.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "^16.11.0",
+    "react-refresh": "^0.11.0",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.32.1",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "typescript": "^4.7.2",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
+  },
   "peerDependencies": {
     "react": ">=16.11.0",
     "react-dom": ">=16.11.0"