@fonixtree/magic-design 0.0.13 → 0.0.16

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

@@ -0,0 +1,294 @@
+"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["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _coreUtil = require("../../../utils/coreUtil");
+
+var _commonUtil = require("../../../utils/commonUtil");
+
+var _Button = _interopRequireDefault(require("../../../common/Button"));
+
+var _constants = require("../../../constants");
+
+var _componentTypes = require("../../../constants/component-types");
+
+var _mobx = require("../../../mobx");
+
+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); }
+
+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; }
+
+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 ConfigPanel =
+/** @class */
+function (_super) {
+  __extends(ConfigPanel, _super);
+
+  function ConfigPanel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.preClickedGroup = null; // 以及面板展开状态
+
+    _this.configOpen = false;
+    _this.state = {
+      selectedNode: {}
+    };
+
+    _this.animation = function (type) {
+      document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:" + type + ";animation-duration: 0.3s;animation-fill-mode:both");
+    };
+
+    _this.openPcConfig = function () {
+      _this.animation('openPcConfig');
+    };
+
+    _this.closePcConfig = function () {
+      _this.animation('closePcConfig');
+    };
+
+    _this.openMobileConfig = function () {
+      _this.animation('openMobileConfig');
+    };
+
+    _this.closeMobileConfig = function () {
+      _this.animation('closeMobileConfig');
+    };
+
+    _this.openConfig = function () {
+      if (_this.configOpen) {
+        return;
+      }
+
+      if (window.magicDesign.device === 'pc') {
+        _this.openPcConfig();
+      } else {
+        _this.openMobileConfig();
+      }
+
+      _this.configOpen = true;
+    };
+
+    _this.closeConfig = function () {
+      if (!_this.configOpen) {
+        return;
+      }
+
+      if (window.magicDesign.device === 'pc') {
+        _this.closePcConfig();
+      } else {
+        _this.closeMobileConfig();
+      }
+
+      _this.configOpen = false;
+    };
+
+    _this.openSecConfig = function () {
+      var _a;
+
+      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+    };
+
+    _this.closeSecConfig = function () {
+      var _a;
+
+      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+
+      _mobx.store.setState({
+        clickedMeta: ''
+      });
+    };
+
+    _this.onDoneClick = function () {
+      var _a = _this.props,
+          device = _a.device,
+          onClose = _a.onClose;
+
+      if (device === _constants.deviceTypeMap.PC) {
+        _this.closePcConfig();
+      }
+
+      onClose();
+    };
+
+    _this.getConfigPanelInstance = function () {
+      var device = _this.props.device;
+      var selectedNode = _this.state.selectedNode;
+      var Clazz = _componentTypes.configPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
+      var panelProps = {
+        data: selectedNode,
+        device: device
+      };
+      var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, panelProps) : null;
+      return instance;
+    };
+
+    _this.getSecondConfigInstance = function () {
+      var selectedNode = _this.state.selectedNode;
+      var Clazz = _componentTypes.secondConfigPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
+      var panelProps = (0, _commonUtil.ensure)(function () {
+        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
+          return src.id === _this.state.clickedGroup;
+        });
+      }, null);
+
+      if (panelProps) {
+        var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
+          panelProps: panelProps
+        }) : null;
+        return instance;
+      }
+
+      return null;
+    };
+
+    _this.getSecondConfigName = function () {
+      var _a, _b, _c, _d, _e;
+
+      var selectedNode = _this.state.selectedNode;
+
+      if (!selectedNode || !selectedNode.groupSource) {
+        return;
+      }
+
+      var panelProps = selectedNode.groupSource.find(function (src) {
+        return src.id === _this.state.clickedGroup;
+      });
+
+      if (!panelProps) {
+        return;
+      }
+
+      var groupName = '';
+
+      switch (selectedNode.type) {
+        case 'BANNER':
+          groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
+
+          if (!groupName) {
+            groupName = (0, _coreUtil.isPc)() ? (_c = (_b = panelProps.image) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcName : (_e = (_d = panelProps.image) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.h5Name;
+          }
+
+          break;
+
+        case 'RECOMMEND':
+          groupName = panelProps.groupName.text;
+      }
+
+      return groupName || 'Group Name';
+    };
+
+    _this.onSecConfigBack = function () {
+      _mobx.store.setState({
+        clickedGroup: null
+      });
+    };
+
+    return _this;
+  }
+
+  ConfigPanel.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.distroy = (0, _mobx.autorun)(function () {
+      var selectedNode = _mobx.store.getFloorInfo();
+
+      _this.setState({
+        clickedGroup: _mobx.store.clickedGroup,
+        selectedNode: selectedNode
+      }); // 展开以及面板
+
+
+      if (selectedNode) {
+        _this.openConfig();
+      } else {
+        _this.closeConfig();
+      } // 展开首期二级面板
+
+
+      if (!_mobx.store.clickedGroup) {
+        _this.closeSecConfig();
+      } else if (_mobx.store.clickedGroup !== _this.preClickedGroup) {
+        _this.openSecConfig();
+      }
+
+      _this.preClickedGroup = _mobx.store.clickedGroup;
+    });
+  };
+
+  ConfigPanel.prototype.componentWillUnmount = function () {
+    this.distroy();
+  };
+
+  ConfigPanel.prototype.render = function () {
+    var _a, _b;
+
+    var device = this.props.device;
+    var selectedNode = this.state.selectedNode;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "first_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_header"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "title",
+      title: (_a = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
+    }, (_b = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: this.onDoneClick,
+      type: "light"
+    }, "Done")), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sec_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_header"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "button_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      icon: "icon-left",
+      onClick: this.onSecConfigBack,
+      type: "icon"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, this.getSecondConfigName())), this.getSecondConfigInstance()));
+  };
+
+  return ConfigPanel;
+}(_react.Component);
+
+var _default = ConfigPanel;
+exports["default"] = _default;

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

@@ -0,0 +1,139 @@
+.config_wrap {
+  width: 354px;
+  background: #ffffff;
+  height: 100vh;
+  overflow: scroll;
+  transition-property: transform;
+  transition-duration: .3s;
+  transition-timing-function: ease;
+  left: -354px;
+  z-index: 200;
+  // position: fixed;
+  position: absolute;
+  flex-shrink: 0;
+
+  &.show_config {
+    position: fixed;
+    transform: translateX(354px);
+  }
+
+  .first_config_wrap {
+    height: 100%;
+    padding: 24px;
+
+    .config_header {
+      font-size: 26px;
+      line-height: 36px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 32px;
+        color: #232F46;
+      }
+    }
+  }
+
+  .sec_config_wrap {
+    position: absolute;
+    width: 354px;
+    left: -354px;
+    bottom: 0;
+    top: 0;
+    background-color: #FFF;
+    padding: 24px;
+
+    .config_header {
+      .button_wrap {
+        display: flex;
+      }
+
+      .title {
+        margin-top: 20px;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 32px;
+        color: #232F46;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+
+@keyframes openPcConfig {
+  from {
+    left: -354px;
+  }
+
+  to {
+    left: 0px;
+  }
+}
+
+@keyframes closePcConfig {
+  from {
+    left: 0px;
+  }
+
+  to {
+    left: -354px;
+  }
+}
+
+@keyframes openMobileConfig {
+  from {
+    left: 0px;
+    z-index: 50;
+  }
+
+  to {
+    left: 355px;
+    z-index: 50;
+  }
+}
+
+@keyframes closeMobileConfig {
+  from {
+    left: 355px;
+    z-index: 50;
+  }
+
+  to {
+    left: 0px;
+    z-index: 50;
+  }
+}
+
+
+@keyframes openSecConfig {
+  from {
+    left: -354px;
+  }
+
+  to {
+    left: 0px;
+  }
+}
+
+@keyframes closeSecConfig {
+  from {
+    left: 0px;
+  }
+
+  to {
+    left: -354px;
+  }
+}

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * 历史队列，使用数组存放
+ * 有新的操作时存入数组的0位置，游标设置为0
+ *
+ */
+var debug = require('debug')('worker:History');
+
+var History =
+/** @class */
+function () {
+  function History(hist) {
+    var _this = this;
+    /**
+     * 游标位置
+     */
+
+
+    this.cursor = 0;
+    /**
+     * 历史数据
+     */
+
+    this.list = [];
+
+    this.redoAble = function () {
+      return _this.cursor !== 0;
+    };
+
+    this.undoAble = function () {
+      return _this.cursor !== _this.list.length - 1;
+    };
+    /**
+     * 清空0～cursor之间的数据，将data插入 位置0
+     */
+
+
+    this.push = function (data) {
+      debug('push data', data);
+      var cloneData = (0, _cloneDeep["default"])(data);
+
+      _this.list.splice(0, _this.cursor, cloneData);
+
+      return data;
+    };
+    /**
+     * redu操作只修改当前游标-1
+     * 并且返回后一步的json对象
+     */
+
+
+    this.redo = function () {
+      debug('redo click');
+      var newCursor = _this.cursor - 1;
+      _this.cursor = newCursor;
+      var newData = _this.list[newCursor];
+      return newData;
+    };
+    /**
+     * undo操作只修改当前的游标+1
+     * 并且返回前一步的json对象
+     */
+
+
+    this.undo = function () {
+      debug('undo click');
+      var newCursor = _this.cursor + 1;
+      _this.cursor = newCursor;
+      var newData = _this.list[newCursor];
+      return newData;
+    };
+
+    this.cursor = 0;
+    this.list = [hist];
+  }
+
+  return History;
+}();
+
+var _default = History;
+exports["default"] = _default;