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

The hackable and serializable IDE to make learning material

"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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 _react = _interopRequireWildcard(require("react"));

var _typestyle = require("typestyle");

var _csx = require("csx");

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

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

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));

var _Fullscreen = _interopRequireDefault(require("@material-ui/icons/Fullscreen"));

var _Settings = _interopRequireDefault(require("@material-ui/icons/Settings"));

var _OpenInBrowser = _interopRequireDefault(require("@material-ui/icons/OpenInBrowser"));

var _Devices = _interopRequireDefault(require("@material-ui/icons/Devices"));

var _PhotoCamera = _interopRequireDefault(require("@material-ui/icons/PhotoCamera"));

var _CardFloatingBar = _interopRequireDefault(require("../CardFloatingBar"));

var _Monitor = _interopRequireDefault(require("./Monitor"));

var _ResolveProgress = _interopRequireDefault(require("./ResolveProgress"));

var frameSizes = [[480, 320], [640, 480], [720, 480], [800, 600], [1024, 768], [1136, 640], [1280, 720], [1280, 800], [1920, 1080]];
var by = 'x';

var getContainerStyle = function getContainerStyle(frameWidth, frameHeight) {
  return {
    paddingTop: (0, _csx.percent)(frameHeight / frameWidth * 100)
  };
};

var cn = {
  flexible: (0, _typestyle.style)({
    position: 'relative',
    width: '100%'
  }),
  popout: (0, _typestyle.style)({
    height: 8
  }),
  fullScreen: (0, _typestyle.style)({
    zIndex: 2000 // フルスクリーン時, CardFloatingBar より手前に来るように

  }),
  parent: (0, _typestyle.style)({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0
  }),
  blank: (0, _typestyle.style)({
    flex: 1
  })
};

var MonitorCard =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(MonitorCard, _PureComponent);

  function MonitorCard() {
    var _getPrototypeOf2;

    var _this;

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

    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)(MonitorCard)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      frameWidth: 300,
      frameHeight: 150,
      containerStyle: getContainerStyle(300, 150),
      processing: false,
      statusLabel: null,
      anchorEl: null
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setStatusLabel", function (_ref) {
      var data = _ref.data;
      var value = data.value;
      if (typeof value !== 'string') throw new TypeError("Cannot make statusLabel ".concat(value));

      _this.setState({
        statusLabel: value
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleScreenShot",
    /*#__PURE__*/
    (0, _asyncToGenerator2.default)(
    /*#__PURE__*/
    _regenerator.default.mark(function _callee() {
      var request;
      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!_this.state.processing) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return");

            case 2:
              _this.setState({
                processing: true
              }); // Monitor にスクリーンショットを撮るようリクエスト


              request = {
                query: 'capture',
                type: 'image/jpeg',
                requestedBy: 'user-action' // ユーザーがリクエストしたことを表す

              };
              _context.next = 6;
              return _this.props.globalEvent.emitAsync('postMessage', request);

            case 6:
              // capture がおわったら, processing state を元に戻す
              _this.setState({
                processing: false
              });

            case 7:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this);
    })));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSettings", function (event) {
      _this.setState({
        anchorEl: event.currentTarget
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClose", function () {
      _this.setState({
        anchorEl: null
      });
    });
    return _this;
  }

  (0, _createClass2.default)(MonitorCard, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      try {
        var frame = this.props.cardProps.MonitorCard.frame;

        if (frame && Array.isArray(frame.size)) {
          var _frame$size = (0, _slicedToArray2.default)(frame.size, 2),
              frameWidth = _frame$size[0],
              frameHeight = _frame$size[1];

          this.changeSize(frameWidth, frameHeight);
        }
      } catch (e) {// continue regardless of error
      }

      this.props.globalEvent.on('message.statusLabel', this.setStatusLabel);
    }
  }, {
    key: "changeSize",
    value: function changeSize(frameWidth, frameHeight) {
      this.setState({
        frameWidth: frameWidth,
        frameHeight: frameHeight,
        containerStyle: getContainerStyle(frameWidth, frameHeight)
      });
    }
  }, {
    key: "renderMenuItem",
    value: function renderMenuItem(_ref3) {
      var _this2 = this;

      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
          w = _ref4[0],
          h = _ref4[1];

      var value = w + by + h;
      return _react.default.createElement(_MenuItem.default, {
        key: value,
        onClick: function onClick() {
          return _this2.changeSize(w, h);
        }
      }, value);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var sizeValue = this.state.frameWidth + by + this.state.frameHeight;
      var _this$props = this.props,
          localization = _this$props.localization,
          showAll = _this$props.showAll,
          loadConfig = _this$props.loadConfig;
      var feelesrc = loadConfig('feelesrc');
      return _react.default.createElement(_CardWindow.default, (0, _extends2.default)({}, this.props.cardPropsBag, {
        flexBasis: this.props.isExpandingEditorCard ? '25%' : '50%'
      }), _react.default.createElement(_CardFloatingBar.default, null, _react.default.createElement("span", null, this.props.localization.monitorCard.title), _react.default.createElement("div", {
        className: cn.blank
      }), _react.default.createElement("span", null, this.state.statusLabel), _react.default.createElement(_IconButton.default, {
        disabled: true
      }, _react.default.createElement(_ResolveProgress.default, {
        size: 24,
        globalEvent: this.props.globalEvent
      })), _react.default.createElement(_IconButton.default, {
        color: "primary",
        disabled: feelesrc.disableReloadButton,
        onClick: function onClick() {
          return _this3.props.setLocation();
        }
      }, _react.default.createElement(_Refresh.default, null)), _react.default.createElement(_IconButton.default, {
        disabled: feelesrc.disableFullScreenButton,
        onClick: function onClick() {
          return _this3.props.toggleFullScreen();
        }
      }, _react.default.createElement(_Fullscreen.default, null)), showAll ? _react.default.createElement(_IconButton.default, {
        tooltip: "screenshot",
        disabled: this.state.processing,
        onClick: this.handleScreenShot
      }, _react.default.createElement(_PhotoCamera.default, null)) : null, showAll ? _react.default.createElement(_IconButton.default, {
        tooltip: "settings",
        onClick: this.handleSettings
      }, _react.default.createElement(_Settings.default, null)) : null), _react.default.createElement("div", {
        className: (0, _typestyle.classes)(cn.flexible, this.props.isPopout && cn.popout, this.props.isFullScreen && cn.fullScreen),
        style: this.props.isPopout ? undefined : this.state.containerStyle
      }, _react.default.createElement("div", {
        className: cn.parent
      }, _react.default.createElement(_Monitor.default, {
        files: this.props.files,
        isPopout: this.props.isPopout,
        isFullScreen: this.props.isFullScreen,
        reboot: this.props.reboot,
        href: this.props.href,
        togglePopout: this.props.togglePopout,
        toggleFullScreen: this.props.toggleFullScreen,
        localization: this.props.localization,
        getConfig: this.props.getConfig,
        addFile: this.props.addFile,
        findFile: this.props.findFile,
        putFile: this.props.putFile,
        saveAs: this.props.saveAs,
        setLocation: this.props.setLocation,
        frameWidth: this.state.frameWidth,
        frameHeight: this.state.frameHeight,
        globalEvent: this.props.globalEvent
      }))), _react.default.createElement(_Menu.default, {
        anchorEl: this.state.anchorEl,
        open: !!this.state.anchorEl,
        onClose: this.handleClose
      }, _react.default.createElement(_MenuItem.default, {
        leftIcon: _react.default.createElement(_Devices.default, null),
        menuItems: frameSizes.map(this.renderMenuItem, this)
      }, sizeValue), _react.default.createElement(_MenuItem.default, {
        leftIcon: _react.default.createElement(_OpenInBrowser.default, null),
        onClick: function onClick() {
          return _this3.props.togglePopout();
        }
      }, localization.monitorCard.popout)));
    }
  }]);
  return MonitorCard;
}(_react.PureComponent);

exports.default = MonitorCard;
(0, _defineProperty2.default)(MonitorCard, "propTypes", {
  cardPropsBag: _propTypes.default.object.isRequired,
  setLocation: _propTypes.default.func.isRequired,
  isPopout: _propTypes.default.bool.isRequired,
  togglePopout: _propTypes.default.func.isRequired,
  toggleFullScreen: _propTypes.default.func.isRequired,
  files: _propTypes.default.array.isRequired,
  cardProps: _propTypes.default.object.isRequired,
  isFullScreen: _propTypes.default.bool.isRequired,
  reboot: _propTypes.default.bool.isRequired,
  href: _propTypes.default.string.isRequired,
  showAll: _propTypes.default.bool.isRequired,
  localization: _propTypes.default.object.isRequired,
  getConfig: _propTypes.default.func.isRequired,
  loadConfig: _propTypes.default.func.isRequired,
  addFile: _propTypes.default.func.isRequired,
  findFile: _propTypes.default.func.isRequired,
  putFile: _propTypes.default.func.isRequired,
  saveAs: _propTypes.default.func.isRequired,
  globalEvent: _propTypes.default.object.isRequired,
  isExpandingEditorCard: _propTypes.default.bool.isRequired
});