@fonixtree/magic-design 1.0.4 → 1.0.6

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

@@ -0,0 +1,32 @@
+.toolbar-wrap {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, .04);
+  border-top: 1px solid rgba(0, 0, 0, .04);
+  position: absolute;
+  border-radius: 6px;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background: #fff;
+  transform: translateY(calc(-100% - 1px));
+  flex-direction: column;
+  padding: 3px 0;
+
+  .tool-item {
+    margin: 0 5px;
+  }
+
+  .tooll-line {
+    display: inline-flex;
+    width: 1px;
+    height: 24px;
+    background-color: rgba(0, 0, 0, .04);
+    margin: 0 5px;
+  }
+
+  .toolbar-row {
+    display: flex;
+    align-items: center;
+    height: 35px;
+  }
+}

package/lib/core/Designer/index.js

@@ -15,6 +15,8 @@ var _mobxReact = require("mobx-react");
 
 var _antd = require("antd");
 
+var _ChatRobot = _interopRequireDefault(require("./ChatRobot"));
+
 var _CompListPanel = _interopRequireDefault(require("./CompListPanel"));
 
 var _PageCompList = _interopRequireDefault(require("./PageCompList"));
@@ -33,20 +35,22 @@ var _LeftTitle = _interopRequireDefault(require("./LeftTitle"));
 
 var _RenderHtml = _interopRequireDefault(require("./RenderHtml"));
 
+var _ToolBarModal = _interopRequireDefault(require("./ToolBarModal"));
+
 var _componentTypes = require("../../constants/component-types");
 
 var _mobx = require("../../mobx");
 
 var _constants = require("../../constants");
 
-require("./index.less");
-
 var _common = require("../../common");
 
 var _storeUtil = require("../../utils/storeUtil");
 
 var _commonUtil = require("../../utils/commonUtil");
 
+require("./index.less");
+
 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); }
@@ -604,13 +608,26 @@ function (_super) {
       });
     };
 
+    _this.onEditModalOk = function (html) {
+      var _a;
+
+      (_a = _mobx.frameStore.textModalState) === null || _a === void 0 ? void 0 : _a.onOk(html);
+
+      _mobx.frameStore.setState({
+        textModalState: {
+          visible: false
+        }
+      });
+    };
+
     (0, _commonUtil.ensure)(function () {
       return window._MAGIC_VERSION = '0.1.49';
     });
     var pageData = props.pageData,
         config = props.config,
         outputType = props.outputType,
-        locale = props.locale;
+        locale = props.locale; // console.log('constructor-- pageData', pageData);
+
     var MPageData = pageData.childNodes || [];
     _this.configRef = /*#__PURE__*/_react["default"].createRef(); // this.viewAreaRef = React.createRef();
 
@@ -625,7 +642,11 @@ function (_super) {
     _this.state = {
       MPageData: MPageData,
       device: _constants.deviceTypeMap.PHONE,
-      appointmentVisible: false
+      appointmentVisible: false,
+      showEditModal: false,
+      textModalState: {
+        quillRef: null
+      }
     };
     setDesignConfig(__assign(__assign({}, config), {
       outputType: outputType
@@ -638,25 +659,42 @@ function (_super) {
   }
 
   Designer.prototype.componentDidMount = function () {
-    var _this = this; // 复合组件点击事件
+    var _this = this;
+
+    var _a; // 复合组件点击事件
 
 
     window.document.addEventListener('component-click', this.componentClick); // 复合组件重新渲染事件
 
-    window.document.addEventListener('render-view', this.reRenderViewArea);
+    window.document.addEventListener('render-view', this.reRenderViewArea); // 兼容 旧组件新增 新功能的问题（本地）
+
+    if ((_a = this.props.pageData) === null || _a === void 0 ? void 0 : _a.childNodes) {
+      (0, _commonUtil.compatibleNewPageData)(this.props.pageData);
+    }
+
     this.destory = (0, _mobx.autorun)(function () {
+      var stateObj = {
+        imgGenVisible: _mobx.store.imgGenVisible,
+        textModalState: _mobx.frameStore.textModalState
+      };
+
       if (_this.state.locale != _mobx.store.locale) {
-        _this.setState({
-          locale: _mobx.store.locale
-        });
+        stateObj.locale = _mobx.store.locale;
       }
+
+      _this.setState(stateObj);
     });
   };
 
   Designer.prototype.componentWillReceiveProps = function (nextProps) {
     var pageData = nextProps.pageData,
         config = nextProps.config;
-    var MPageData = pageData.childNodes || [];
+    var MPageData = pageData.childNodes || []; // 兼容 旧组件新增 新功能的问题（线上）
+
+    if (pageData === null || pageData === void 0 ? void 0 : pageData.childNodes) {
+      (0, _commonUtil.compatibleNewPageData)(pageData);
+    }
+
     this.history = new _History["default"](MPageData);
     this.setState({
       MPageData: MPageData
@@ -695,7 +733,8 @@ function (_super) {
     var _a = this.state,
         MPageData = _a.MPageData,
         device = _a.device,
-        appointmentVisible = _a.appointmentVisible;
+        appointmentVisible = _a.appointmentVisible,
+        textModalState = _a.textModalState;
     var _b = this.props,
         pagesManager = _b.pagesManager,
         compSource = _b.compSource,
@@ -714,15 +753,15 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement(_mobxReact.Provider, {
       store: _mobx.store
     }, /*#__PURE__*/_react["default"].createElement(_antd.ConfigProvider, {
-      getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode ? triggerNode.parentNode : document.querySelector('[magic_design]');
+      getPopupContainer: function getPopupContainer() {
+        return document.querySelector('[magic_design]');
       },
       prefixCls: "cylon"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       magic_design: ""
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "designer-wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_PageCompList["default"], {
+    }, window.magicDesign.needAi && /*#__PURE__*/_react["default"].createElement(_ChatRobot["default"], null), /*#__PURE__*/_react["default"].createElement(_PageCompList["default"], {
       onAdd: this.onAdd,
       pageData: MPageData,
       pageName: pageName,
@@ -756,7 +795,9 @@ function (_super) {
       },
       onConfirm: this.onAppointmentConfirm,
       visible: appointmentVisible
-    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_common.SystemNotification, null))), /*#__PURE__*/_react["default"].createElement(_RenderHtml["default"], {
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_common.SystemNotification, null)), textModalState.quillRef && /*#__PURE__*/_react["default"].createElement(_ToolBarModal["default"], {
+      quillRef: textModalState.quillRef
+    })), /*#__PURE__*/_react["default"].createElement(_RenderHtml["default"], {
       ref: this.renderHtmlRef
     }));
   };

package/lib/decorator/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "compositeDecorator", {
     return _compositeDecorator["default"];
   }
 });
+Object.defineProperty(exports, "lazy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazy;
+  }
+});
+Object.defineProperty(exports, "lazyDestroy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazyDestroy;
+  }
+});
 Object.defineProperty(exports, "metaDecorator", {
   enumerable: true,
   get: function get() {
@@ -28,4 +40,6 @@ var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
 var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
 
+var _lazyLoadDecorator = require("./lazyLoadDecorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/decorator/lazyLoadDecorator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazy = lazy;
+exports.lazyDestroy = void 0;
+
+/**
+ * 组件懒加载
+ * @param refName 所需懒加载的组件ref名
+ * @returns
+ */
+function lazy(refName) {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function () {
+      var _this = this;
+
+      var rest = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+      }
+
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          if (!_this.state.lazyShow) {
+            _this.setState({
+              lazyShow: true
+            });
+          }
+        }
+      }, {
+        root: null,
+        // threshold: 0.8,
+        rootMargin: '0px 0px 100px 0px'
+      });
+      this.intersectionObserver.observe(this[refName].current);
+      /** 监听状态变化 */
+
+      this._intersectionObserverDestroy = function () {
+        _this.intersectionObserver.disconnect(_this[refName].current);
+      };
+
+      fn.apply(this, rest);
+    };
+  };
+}
+/**
+ * 销毁lazy监听
+ */
+
+
+var lazyDestroy = function lazyDestroy(target, name, descriptor) {
+  var fn = descriptor.value;
+
+  descriptor.value = function () {
+    var rest = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      rest[_i] = arguments[_i];
+    }
+
+    if (this._intersectionObserverDestroy) {
+      this._intersectionObserverDestroy();
+    } // this._intersectionObserverDestroy && this._intersectionObserverDestroy();
+
+
+    fn.apply(this, rest);
+  };
+};
+
+exports.lazyDestroy = lazyDestroy;

package/lib/decorator/metaDecorator.js

@@ -95,7 +95,7 @@ function metaDecorator(WrappedComponent) {
               GAData = _c.GAData;
           (0, _commonUtil.pushGA)(__assign(__assign({}, GAData), {
             elementId: data.id,
-            elementName: data.text
+            elementName: data.text || GAData.groupName
           }));
           return;
         } // 组织冒泡

package/lib/locale/en/en.json

@@ -1,4 +1,14 @@
 {
+  "ADDRESS": "Address",
+  "LOCATION_LOGO": "Location Logo",
+  "MESSAGE_ICON": "Message icon",
+  "CART_ICON": "Cart icon",
+  "RECOMMENDED_SIZE": "Recommended Size",
+  "BOLD": "Bold",
+  "SEMIBOLD": "Semibold",
+  "DARK": "Dark",
+  "LIGHT": "Light",
+  "URL_IMAGE": "url image",
   "AI_IMAGE": "AI Image",
   "IMAGE_URL": "Image URL",
   "UPLOAD": "Upload",

package/lib/locale/es/es.json

@@ -1,4 +1,14 @@
 {
+  "ADDRESS": "Address",
+  "LOCATION_LOGO": "Location Logo",
+  "MESSAGE_ICON": "Message icon",
+  "CART_ICON": "Cart icon",
+  "RECOMMENDED_SIZE": "Recommended Size",
+  "BOLD": "Bold",
+  "SEMIBOLD": "Semibold",
+  "DARK": "Dark",
+  "LIGHT": "Light",
+  "URL_IMAGE": "url image",
   "AI_IMAGE": "AI Image",
   "IMAGE_URL": "Image URL",
   "UPLOAD": "Upload",

package/lib/locale/id/id.json

@@ -1,4 +1,14 @@
 {
+  "ADDRESS": "Address",
+  "LOCATION_LOGO": "Location Logo",
+  "MESSAGE_ICON": "Message icon",
+  "CART_ICON": "Cart icon",
+  "RECOMMENDED_SIZE": "Recommended Size",
+  "BOLD": "Bold",
+  "SEMIBOLD": "Semibold",
+  "DARK": "Dark",
+  "LIGHT": "Light",
+  "URL_IMAGE": "url image",
   "AI_IMAGE": "AI Image",
   "IMAGE_URL": "Image URL",
   "UPLOAD": "Upload",

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

@@ -21,6 +21,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _decorator = require("../../../decorator");
 
+var _ImageLazy = _interopRequireDefault(require("../../../common/ImageLazy"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -165,7 +167,8 @@ function (_super) {
     var _c = this.props,
         data = _c.data,
         isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
+        hoverState = _c.hoverState,
+        notNeedLazy = _c.notNeedLazy;
     var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
     // console.log('--metaImage ', this.props);
 
@@ -190,7 +193,7 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notNeedLazy ? /*#__PURE__*/_react["default"].createElement("img", {
       ref: this.imgRef,
       onLoad: function onLoad() {
         var scale = _this.imgRef.current.clientWidth / 600;
@@ -203,6 +206,18 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: (0, _commonUtil.pxToRem)(this.getStyle())
+    }) : /*#__PURE__*/_react["default"].createElement(_ImageLazy["default"], {
+      onLoadFunc: function onLoadFunc(clientWidth) {
+        var scale = clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
+      onMouseEnter: this.mouseEnterImg,
+      onMouseLeave: this.mouseLeaveImg,
+      src: srcImg,
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -230,7 +245,8 @@ function (_super) {
     isBackground: false,
     hoverState: false,
     limitWidthHeight: false,
-    scale: 1
+    scale: 1,
+    notNeedLazy: false
   };
   Image = __decorate([_decorator.metaDecorator], Image);
   return Image;

package/lib/meta-comp/components/Text/formats/fontFamily.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontFamilyStyle = exports.FontFamilyAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var FontFamilyAttributor =
+/** @class */
+function (_super) {
+  __extends(FontFamilyAttributor, _super);
+
+  function FontFamilyAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return FontFamilyAttributor;
+}(Parchment.Attributor.Style);
+
+exports.FontFamilyAttributor = FontFamilyAttributor;
+var FontFamilyStyle = new FontFamilyAttributor('font-family', 'font-family', {
+  scope: Parchment.Scope.INLINE
+});
+exports.FontFamilyStyle = FontFamilyStyle;
+
+_quill["default"].register('formats/font-family', FontFamilyStyle, true);

package/lib/meta-comp/components/Text/formats/fontWeight.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontWeightStyle = exports.FontWeightAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var FontWeightAttributor =
+/** @class */
+function (_super) {
+  __extends(FontWeightAttributor, _super);
+
+  function FontWeightAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return FontWeightAttributor;
+}(Parchment.Attributor.Style);
+
+exports.FontWeightAttributor = FontWeightAttributor;
+var FontWeightStyle = new FontWeightAttributor('font-weight', 'font-weight', {
+  scope: Parchment.Scope.INLINE
+});
+exports.FontWeightStyle = FontWeightStyle;
+
+_quill["default"].register('formats/font-weight', FontWeightStyle, true);

package/lib/meta-comp/components/Text/formats/listStyleTypeStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListStyleTypeStyle = exports.ListStyleTypeAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var ListStyleTypeAttributor =
+/** @class */
+function (_super) {
+  __extends(ListStyleTypeAttributor, _super);
+
+  function ListStyleTypeAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return ListStyleTypeAttributor;
+}(Parchment.Attributor.Style);
+
+exports.ListStyleTypeAttributor = ListStyleTypeAttributor;
+var ListStyleTypeStyle = new ListStyleTypeAttributor('list-style-type', 'list-style-type', {
+  scope: Parchment.Scope.BLOCK
+});
+exports.ListStyleTypeStyle = ListStyleTypeStyle;
+
+_quill["default"].register('formats/list-style-type', ListStyleTypeStyle, true);

package/lib/meta-comp/components/Text/formats/textDecorationColor.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextDecorationColorStyle = exports.TextDecorationColorAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 __());
+  };
+}();
+
+var Parchment = _quill["default"]["import"]('parchment');
+
+var TextDecorationColorAttributor =
+/** @class */
+function (_super) {
+  __extends(TextDecorationColorAttributor, _super);
+
+  function TextDecorationColorAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return TextDecorationColorAttributor;
+}(Parchment.Attributor.Style);
+
+exports.TextDecorationColorAttributor = TextDecorationColorAttributor;
+var TextDecorationColorStyle = new TextDecorationColorAttributor('text-decoration-color', 'text-decoration-color', {
+  scope: Parchment.Scope.INLINE
+});
+exports.TextDecorationColorStyle = TextDecorationColorStyle;
+
+_quill["default"].register('formats/text-decoration-color', TextDecorationColorStyle, true);