@fonixtree/magic-design 0.0.12 → 0.0.17

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

@@ -0,0 +1,358 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeTypeList = exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+require("./index.less");
+
+var _common = require("../../../common");
+
+var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
+
+var _mobx = require("../../../mobx");
+
+var _BaseConfig = _interopRequireDefault(require("../BaseConfig"));
+
+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); }
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 __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);
+};
+
+/** 预设字体样式 */
+var sizeTypeList = [{
+  key: 'Customize font styles'
+}, {
+  key: 'Headline 1',
+  fontFamily: 'Montserrat',
+  pcFontSize: 50,
+  fontSize: 68,
+  fontWeight: 600
+}, {
+  key: 'Headline 2',
+  fontFamily: 'Montserrat',
+  pcFontSize: 32,
+  fontSize: 42,
+  fontWeight: 600
+}, {
+  key: 'Headline 3',
+  fontFamily: 'Montserrat',
+  pcFontSize: 30,
+  fontSize: 38,
+  fontWeight: 600
+}, {
+  key: 'Title 1',
+  fontFamily: 'Montserrat',
+  pcFontSize: 28,
+  fontSize: 32,
+  fontWeight: 400
+}, {
+  key: 'Title 2',
+  fontFamily: 'Montserrat',
+  pcFontSize: 20,
+  fontSize: 24,
+  fontWeight: 400
+}, {
+  key: 'Title 3',
+  fontFamily: 'Montserrat',
+  pcFontSize: 18,
+  fontSize: 20,
+  fontWeight: 400
+}, {
+  key: 'Body 1',
+  fontFamily: 'Open Sans',
+  pcFontSize: 16,
+  fontSize: 18,
+  fontWeight: 400
+}, {
+  key: 'Body 2',
+  fontFamily: 'Open Sans',
+  pcFontSize: 14,
+  fontSize: 16,
+  fontWeight: 400
+}, {
+  key: 'Body 3',
+  fontFamily: 'Open Sans',
+  pcFontSize: 12,
+  fontSize: 14,
+  fontWeight: 400
+}];
+exports.sizeTypeList = sizeTypeList;
+
+var TextConfig =
+/** @class */
+function (_super) {
+  __extends(TextConfig, _super);
+
+  function TextConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.onSizeTypeChange = function (v, obj) {
+      _extends(obj, sizeTypeMap[v]);
+    };
+
+    return _this;
+  }
+
+  TextConfig.prototype.componentDidMount = function () {
+    window.document.addEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.componentWillUnmount = function () {
+    window.document.removeEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var textData = _mobx.store.textSelection ? _mobx.store.textSelection : data.content;
+
+    if (!data.spacing) {
+      data.spacing = {
+        pc: {},
+        mobile: {}
+      };
+    } // const textData = data.content;
+
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-text-config"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Collapse // divider="dashed"
+    // headerSize="small"
+    , {
+      onRefresh: this.selfRender,
+      source: [{
+        key: '1',
+        name: 'Content',
+        value: /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: "Font Style"
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+          onChange: function onChange(v) {
+            if (v == 'Customize font styles') {
+              textData.sizeType = v;
+            } else {
+              var findOne = sizeTypeList.find(function (t) {
+                return t.key == v;
+              });
+
+              _extends(textData, __assign(__assign({}, findOne), {
+                sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
+              }));
+            }
+
+            _this.selfRender();
+          },
+          value: textData.sizeType
+        }, sizeTypeList.map(function (sizeType) {
+          return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+            key: sizeType.key,
+            value: sizeType.key
+          }, sizeType.key);
+        }))), textData.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: "font Family"
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+          onChange: function onChange(v) {
+            textData.fontFamily = v;
+
+            _this.selfRender();
+          },
+          value: textData.fontFamily
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: "Montserrat"
+        }, "Montserrat"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: "Open Sans"
+        }, "Open Sans"))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: "font Weight"
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+          onChange: function onChange(v) {
+            textData.fontWeight = v;
+
+            _this.selfRender();
+          },
+          value: textData.fontWeight
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: 400
+        }, "Regular"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: 600
+        }, "Medium"))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: "Font Size"
+        }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+          onChange: function onChange(_a) {
+            var count = _a.count;
+
+            if (window.magicDesign.device == 'pc') {
+              textData.pcFontSize = count;
+            } else {
+              textData.fontSize = count;
+            }
+
+            _this.selfRender();
+          },
+          unit: "px",
+          value: {
+            count: window.magicDesign.device == 'pc' ? textData.pcFontSize : textData.fontSize
+          }
+        }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: ""
+        }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
+          onChange: function onChange(value) {
+            _extends(textData, value);
+
+            _this.selfRender();
+          },
+          showTextAlign: true,
+          value: textData
+        })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          split: true,
+          title: "URL"
+        }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+          onChange: function onChange(v) {
+            textData.clickUrl = v;
+
+            _this.selfRender();
+          },
+          value: data.content.clickUrl
+        })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: "Content Width"
+        }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+          maxVal: 1760,
+          minVal: 0,
+          onChange: function onChange(_a) {
+            var count = _a.count;
+            textData.width = count;
+
+            _this.selfRender();
+          },
+          unit: "px",
+          value: {
+            count: textData.width
+          }
+        })))
+      }, {
+        key: '2',
+        name: 'Spacing',
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          data: data.spacing,
+          type: "button"
+        })
+      }, {
+        key: '3',
+        name: 'Underline Setting',
+        value: /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          split: true,
+          title: "Underline Color"
+        }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+          onChange: function onChange(v) {
+            data.underline.textDecorationColor = v;
+
+            _this.selfRender();
+          },
+          value: data.underline.textDecorationColor
+        })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+          title: "Underline Style"
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+          onChange: function onChange(v) {
+            data.underline.textDecorationStyle = v;
+
+            _this.selfRender();
+          },
+          value: data.underline.textDecorationStyle
+        }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: "solid"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "line-config line-solid",
+          dangerouslySetInnerHTML: {
+            __html: '&nbsp;'.repeat(50)
+          }
+        })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: "dashed"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "line-config dashed-line",
+          dangerouslySetInnerHTML: {
+            __html: '&nbsp;'.repeat(50)
+          }
+        })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: "double"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "line-config double-line",
+          dangerouslySetInnerHTML: {
+            __html: '&nbsp;'.repeat(50)
+          }
+        })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+          value: "wavy"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "line-config wavy-line",
+          dangerouslySetInnerHTML: {
+            __html: '&nbsp;'.repeat(50)
+          }
+        }))))),
+        metaOption: data.underline,
+        toggleType: 'checkbox'
+      }],
+      type: "arrow"
+    }));
+  };
+
+  TextConfig.defaultProps = {
+    data: null
+  };
+  return TextConfig;
+}(_BaseConfig["default"]);
+
+var _default = TextConfig;
+exports["default"] = _default;

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

@@ -0,0 +1,24 @@
+.m-text-config {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+  background-color: #F5F6F7;
+  .line-config {
+    text-decoration-line: line-through;
+    text-decoration-color: #000;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .line-solid {
+    text-decoration-style: solid;
+  }
+  .dashed-line {
+    text-decoration-style: dashed;
+  }
+  .double-line {
+    text-decoration-style: double;
+  }
+  .wavy-line {
+    text-decoration-style: wavy;
+  }
+}

package/lib/mobx/Store.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Store = void 0;
+
+var _mobx = require("mobx");
+
+var debug = require('debug')('worker:mobx');
+
+var Store =
+/** @class */
+function () {
+  function Store() {
+    this.hoveredMeta = ''; // hover的元组件Id
+
+    this.clickedMeta = ''; // 点击的元组件Id
+
+    this.clickedGroup = ''; // 点击的元组件组Id
+
+    this.clickedFloor = ''; // 点击的楼层Id
+
+    this.textSelection = null; // 文本元组件选中区域
+
+    this.MPageData = []; // 楼层数据
+
+    this.CarouselStore = {}; // 轮播组件暂存数据
+
+    (0, _mobx.makeObservable)(this, {
+      hoveredMeta: _mobx.observable,
+      clickedMeta: _mobx.observable,
+      clickedGroup: _mobx.observable,
+      clickedFloor: _mobx.observable,
+      CarouselStore: _mobx.observable,
+      setState: _mobx.action.bound
+    });
+  }
+  /** 修改状态 */
+
+
+  Store.prototype.setState = function (data) {
+    var _this = this;
+
+    debug('magicDesign state', data);
+    var propertyList = Object.getOwnPropertyNames(data);
+    propertyList.forEach(function (field) {
+      _this[field] = data[field];
+    });
+  };
+  /**
+   *根据groupId 获取楼层Id
+   * @param id groupId
+   */
+
+
+  Store.prototype.getFloorIdByGroupId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var _a;
+
+      var group = (_a = floor.groupSource) === null || _a === void 0 ? void 0 : _a.find(function (grp) {
+        return grp.id === id;
+      });
+      return !!group;
+    });
+    return componentFloor === null || componentFloor === void 0 ? void 0 : componentFloor.id;
+  };
+  /**
+   * 根据元组件Id 获取 楼层Id
+   * @param id
+   * @returns
+   */
+
+
+  Store.prototype.getFloorIdByMetaId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var floorStr = JSON.stringify(floor);
+      return floorStr.includes(id);
+    });
+    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;
+}();
+
+exports.Store = Store;

package/lib/mobx/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  store: true
+};
+exports.store = exports["default"] = void 0;
+
+var _mobx = require("mobx");
+
+Object.keys(_mobx).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _mobx[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _mobx[key];
+    }
+  });
+});
+
+var _Store = require("./Store");
+
+/* 开启严格模式 */
+(0, _mobx.configure)({
+  enforceActions: 'observed'
+});
+var store = new _Store.Store();
+exports.store = store;
+var _default = {
+  store: store
+};
+exports["default"] = _default;

package/lib/utils/androidUtil.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sendToJs = exports.sendToIos = exports.sendToAndroid = exports.iosSendToJs = exports.connectWebViewJavascriptBridge = exports.browserVersion = void 0;
+
+// 判断访问终端
+var browserVersion = function browserVersion() {
+  var u = navigator.userAgent;
+  return {
+    trident: u.indexOf('Trident') > -1,
+    presto: u.indexOf('Presto') > -1,
+    webKit: u.indexOf('AppleWebKit') > -1,
+    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
+    mobile: !!u.match(/AppleWebKit.*Mobile.*/),
+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
+    iPhone: u.indexOf('iPhone') > -1,
+    iPad: u.indexOf('iPad') > -1,
+    webApp: u.indexOf('Safari') == -1,
+    weixin: u.indexOf('MicroMessenger') > -1,
+    qq: u.match(/\sQQ/i) == ' qq',
+    isApp: u.indexOf('app/CYLON-APP') > -1
+  };
+};
+
+exports.browserVersion = browserVersion;
+
+var setupWebViewJavascriptBridge = function setupWebViewJavascriptBridge(callback) {
+  if (window.WebViewJavascriptBridge) {
+    return callback(window.WebViewJavascriptBridge);
+  }
+
+  if (window.WVJBCallbacks) {
+    return window.WVJBCallbacks.push(callback);
+  }
+
+  window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
+
+  var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
+
+  WVJBIframe.style.display = 'none'; // 不显示
+
+  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
+
+  document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
+
+  setTimeout(function () {
+    document.documentElement.removeChild(WVJBIframe);
+  }, 0);
+}; // 这里主要是注册 OC 将要调用的 JS 方法。
+
+
+var iosSendToJs = function iosSendToJs(jsType, func) {
+  setupWebViewJavascriptBridge(function (bridge) {
+    bridge.registerHandler('iosToJsFunc', function (data, responseCallback) {
+      // data 是 OC 传递过来的数据.
+      var type = JSON.parse(data).type;
+      if (type === jsType) func(data); // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
+      // responseCallback({ data: 'js 的数据', from: 'JS' });
+    });
+  });
+};
+
+exports.iosSendToJs = iosSendToJs;
+
+var connectWebViewJavascriptBridge = function connectWebViewJavascriptBridge(callback) {
+  if (window.WebViewJavascriptBridge) {
+    callback(window.WebViewJavascriptBridge);
+  } else {
+    document.addEventListener('WebViewJavascriptBridgeReady', function () {
+      callback(window.WebViewJavascriptBridge);
+    }, false);
+  }
+}; // 安卓向h5发消息
+
+
+exports.connectWebViewJavascriptBridge = connectWebViewJavascriptBridge;
+
+var sendToJs = function sendToJs(jsType, func) {
+  connectWebViewJavascriptBridge(function (bridge) {
+    if (jsType === 'init') {
+      bridge.init(function (message, responseCallback) {
+        if (responseCallback) responseCallback();
+      });
+    }
+
+    bridge.registerHandler('functionInJs', function (data) {
+      var type = JSON.parse(data).type;
+      if (type === jsType) func();
+    });
+  });
+}; // h5向安卓发消息
+
+
+exports.sendToJs = sendToJs;
+
+var sendToAndroid = function sendToAndroid(data) {
+  if (window.WebViewJavascriptBridge) {
+    window.WebViewJavascriptBridge.callHandler('action', // 调用java的函数名字
+    data);
+  }
+}; // h5向iosApp发消息
+
+
+exports.sendToAndroid = sendToAndroid;
+
+var sendToIos = function sendToIos(params) {
+  if (window.webkit) window.webkit.messageHandlers.jsFunc.postMessage(params);
+};
+
+exports.sendToIos = sendToIos;