feeles-ide/lib/Cards/EditorCard/index.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "SourceEditor", {
  enumerable: true,
  get: function get() {
    return _SourceEditor.default;
  }
});
Object.defineProperty(exports, "Preview", {
  enumerable: true,
  get: function get() {
    return _Preview.default;
  }
});
exports.default = exports.Tab = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _react = _interopRequireWildcard(require("react"));

var _styles = require("@material-ui/core/styles");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _PlayCircleOutline = _interopRequireDefault(require("@material-ui/icons/PlayCircleOutline"));

var _CardWindow = _interopRequireDefault(require("../CardWindow"));

var _SourceEditor = _interopRequireDefault(require("./SourceEditor"));

var _Preview = _interopRequireDefault(require("./Preview"));

var _dec, _class, _class2, _temp;

var cn = {
  largeIcon: (0, _typestyle.style)({
    width: 40,
    height: 40
  }),
  large: (0, _typestyle.style)({
    width: 80,
    height: 80,
    padding: 20
  })
};

var getCn = function getCn(props) {
  return {
    noFileBg: (0, _typestyle.style)({
      flex: '1 1 auto',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: props.theme.palette.primary.main
    })
  };
};

var Tab =
/*#__PURE__*/
function () {
  function Tab(_ref) {
    var label = _ref.label,
        filePath = _ref.filePath,
        iconUrl = _ref.iconUrl,
        tabs = _ref.tabs;
    (0, _classCallCheck2.default)(this, Tab);
    this.label = label;
    this.iconUrl = iconUrl;

    if (filePath) {
      this.filePath = filePath;
    } else if (tabs) {
      this.tabs = tabs.map(function (props) {
        return new Tab(props);
      });
    }
  }

  (0, _createClass2.default)(Tab, null, [{
    key: "find",
    value: function find(tabs, filePath) {
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = tabs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var tab = _step.value;
          if (tab.filePath === filePath) return tab;
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return != null) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      var _iteratorNormalCompletion2 = true;
      var _didIteratorError2 = false;
      var _iteratorError2 = undefined;

      try {
        for (var _iterator2 = tabs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
          var _tab = _step2.value;

          if (Array.isArray(_tab.tabs)) {
            var found = Tab.find(_tab.tabs, filePath);
            if (found) return found;
          }
        }
      } catch (err) {
        _didIteratorError2 = true;
        _iteratorError2 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
            _iterator2.return();
          }
        } finally {
          if (_didIteratorError2) {
            throw _iteratorError2;
          }
        }
      }
    }
  }]);
  return Tab;
}();

exports.Tab = Tab;
var EditorCard = (_dec = (0, _styles.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(EditorCard, _PureComponent);

  function EditorCard() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, EditorCard);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(EditorCard)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      filePath: '',
      // 現在開いているファイルの名前. 空文字の場合は何も開いていない
      tabs: [],
      // プルダウンメニューの中で表示するファイルのリスト
      label: '',
      // このファイルの呼び名（アセットから取得する）
      iconUrl: '',
      // このファイルのアイコン（アセットから取得する）
      filePathToBack: '' // 最初に表示するファイルのパス. ホーム

    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "openFile", function (filePath) {
      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      if (!filePath || filePath === _this.state.filePath) return;

      var file = _this.props.findFile(filePath); // file type を知るために探す


      if (!file) return; // ファイルが見つからなかった

      if (file.is('text')) {
        // テキストの場合は EditorCard で open
        var tabs = _this.state.tabs;
        var existTab = Tab.find(tabs, filePath);

        if (!existTab) {
          // 開こうとしているファイルを tabs の先頭に追加
          var tab = new Tab({
            filePath: filePath,
            label: file.plain + file.ext
          });
          tabs = [tab].concat(tabs);
        }

        _this.setState({
          filePath: filePath,
          tabs: tabs,
          label: options.label ? options.label + '' : existTab ? existTab.label : file.plain,
          iconUrl: options.iconUrl || ''
        });

        _this.props.setCardVisibility('EditorCard', true); // タブの選択が変化したら EditorCard にスクロールする


        _this.props.scrollToCard('EditorCard');
      } else {
        // BinaryFile の場合は別タブで開く
        try {
          window.open(file.blobURL, '_blank');
        } catch (e) {// continue regardless of error
        }
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setLocation", function (href) {
      _this.props.setLocation(href);

      _this.props.scrollToCard('MonitorCard');
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleEditor", function (event) {
      var _event$data = event.data,
          value = _event$data.value,
          options = _event$data.options;

      if (value) {
        // feeles.openEditor()
        _this.openFile(value, options);
      } else {
        // feeles.closeEditor()
        _this.props.setCardVisibility('EditorCard', false);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getFiles", function () {
      return _this.props.files;
    });
    return _this;
  }

  (0, _createClass2.default)(EditorCard, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var globalEvent = this.props.globalEvent;
      globalEvent.on('message.editor', this.handleEditor); // init.fileName があるとき Mount 後に開いておく

      try {
        var init = this.props.cardProps.EditorCard.init;

        if (init) {
          new Promise(function (resolve) {
            if (Array.isArray(init.tabs)) {
              var tabs = init.tabs.map(function (seed) {
                return new Tab(seed);
              });

              _this2.setState({
                tabs: tabs
              }, resolve);
            } else {
              resolve();
            }
          }).then(function () {
            var filePath = init.filePath || init.fileName; // 後方互換性

            _this2.setState({
              filePathToBack: filePath
            }); // ホームに設定


            _this2.openFile(filePath);
          });
        }
      } catch (e) {// continue regardless of error
      }
    }
  }, {
    key: "renderBackground",
    value: function renderBackground(className) {
      var _this3 = this;

      return _react.default.createElement("div", {
        className: className
      }, _react.default.createElement(_Button.default, {
        variant: "contained",
        size: "large",
        onClick: function onClick() {
          return _this3.setLocation();
        }
      }, "Feeles", _react.default.createElement(_PlayCircleOutline.default, {
        className: cn.largeIcon
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var filePath = this.state.filePath;
      var dcn = getCn(this.props);

      if (!filePath) {
        return _react.default.createElement(_CardWindow.default, (0, _extends2.default)({}, this.props.cardPropsBag, {
          fit: true
        }), this.renderBackground(dcn.noFileBg));
      }

      var _this$props = this.props,
          putFile = _this$props.putFile,
          openFileDialog = _this$props.openFileDialog,
          localization = _this$props.localization,
          findFile = _this$props.findFile,
          getConfig = _this$props.getConfig,
          reboot = _this$props.reboot,
          cardPropsBag = _this$props.cardPropsBag;
      return _react.default.createElement(_CardWindow.default, (0, _extends2.default)({}, cardPropsBag, {
        fit: true,
        flexBasis: this.props.isExpandingEditorCard ? '75%' : '50%'
      }), _react.default.createElement(_SourceEditor.default, {
        fileView: this.props.fileView,
        filePath: filePath,
        files: this.props.files,
        getFiles: this.getFiles,
        setLocation: this.setLocation,
        href: this.props.href,
        getConfig: getConfig,
        loadConfig: this.props.loadConfig,
        findFile: findFile,
        localization: localization,
        reboot: reboot,
        openFileDialog: openFileDialog,
        putFile: putFile,
        tabs: this.state.tabs,
        label: this.state.label,
        iconUrl: this.state.iconUrl,
        filePathToBack: this.state.filePathToBack,
        globalEvent: this.props.globalEvent,
        asset: this.props.asset,
        isExpandingEditorCard: this.props.isExpandingEditorCard,
        setExpandingEditorCard: this.props.setExpandingEditorCard
      }));
    }
  }]);
  return EditorCard;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  fileView: _propTypes.default.object.isRequired,
  cardPropsBag: _propTypes.default.object.isRequired,
  files: _propTypes.default.array.isRequired,
  putFile: _propTypes.default.func.isRequired,
  setLocation: _propTypes.default.func.isRequired,
  openFileDialog: _propTypes.default.func.isRequired,
  localization: _propTypes.default.object.isRequired,
  findFile: _propTypes.default.func.isRequired,
  getConfig: _propTypes.default.func.isRequired,
  setConfig: _propTypes.default.func.isRequired,
  loadConfig: _propTypes.default.func.isRequired,
  reboot: _propTypes.default.bool.isRequired,
  href: _propTypes.default.string.isRequired,
  scrollToCard: _propTypes.default.func.isRequired,
  cardProps: _propTypes.default.object.isRequired,
  setCardVisibility: _propTypes.default.func.isRequired,
  globalEvent: _propTypes.default.object.isRequired,
  asset: _propTypes.default.object,
  isExpandingEditorCard: _propTypes.default.bool.isRequired,
  setExpandingEditorCard: _propTypes.default.func.isRequired
}), _temp)) || _class);
exports.default = EditorCard;