feeles-ide
Version:
The hackable and serializable IDE to make learning material
284 lines (242 loc) • 10.4 kB
JavaScript
"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 _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 _propTypes = _interopRequireDefault(require("prop-types"));
var _typestyle = require("typestyle");
var _csx = require("csx");
var _MediaCard = _interopRequireDefault(require("./MediaCard/"));
var _MonitorCard = _interopRequireDefault(require("./MonitorCard/"));
var _PaletteCard = _interopRequireDefault(require("./PaletteCard/"));
var _ReadmeCard = _interopRequireDefault(require("./ReadmeCard/"));
var _CustomizeCard = _interopRequireDefault(require("./CustomizeCard/"));
var _ShotCard = _interopRequireDefault(require("./ShotCard/"));
var _EditorCard = _interopRequireDefault(require("./EditorCard/"));
var _HierarchyCard = _interopRequireDefault(require("./HierarchyCard/"));
var MonitorTypes = _interopRequireWildcard(require("../utils/MonitorTypes"));
// import EnvCard from './EnvCard/';
// import CreditsCard from './CreditsCard/';
var cn = {
container: (0, _typestyle.style)({
flex: 1,
position: 'relative',
display: 'flex',
flexWrap: 'wrap',
justfiyContent: 'space-between',
alignItems: 'stretch',
overflowX: 'hidden',
overflowY: 'scroll',
paddingLeft: 16,
boxSizing: 'border-box',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'contain'
})
};
var CardContainer =
/*#__PURE__*/
function (_PureComponent) {
(0, _inherits2.default)(CardContainer, _PureComponent);
function CardContainer() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, CardContainer);
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)(CardContainer)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
backgroundStyle: {} // Card Element の参照を保持するオブジェクト
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "cardRefs", {});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "scrollToCard", function (name) {
// そのカードにスクロールする
var scrollTarget = document.getElementById(name);
if (scrollTarget) {
scrollTarget.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'nearest'
});
}
});
return _this;
}
(0, _createClass2.default)(CardContainer, [{
key: "componentDidMount",
value: function componentDidMount() {
this.updateBackgroundStyle();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
// visible が false から true にかわったらスクロールする
if (prevProps.cardProps !== this.props.cardProps) {
var _arr = Object.keys(this.props.cardProps);
for (var _i = 0; _i < _arr.length; _i++) {
var name = _arr[_i];
var prev = prevProps.cardProps[name];
var visible = this.props.cardProps[name].visible;
if ((!prev || !prev.visible) && visible) {
this.scrollToCard(name);
}
}
} // 背景画像
if (prevProps.files !== this.props.files) {
this.updateBackgroundStyle();
}
}
}, {
key: "updateBackgroundStyle",
value: function updateBackgroundStyle() {
var bg = this.props.findFile('feeles/background.png') || this.props.findFile('feeles/background.jpg');
var backgroundImage = bg ? (0, _csx.url)(bg.blobURL) : '';
var backgroundStyle = this.state.backgroundStyle;
if (backgroundStyle.backgroundImage !== backgroundImage) {
this.setState({
backgroundStyle: {
backgroundImage: backgroundImage
}
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var bag = function bag(name) {
return {
name: name,
visible: _this2.props.cardProps[name].visible,
order: _this2.props.cardProps[name].order,
cardProps: _this2.props.cardProps,
showAll: _this2.props.showAll
};
};
var commonProps = {
fileView: this.props.fileView,
files: this.props.files,
localization: this.props.localization,
getConfig: this.props.getConfig,
setConfig: this.props.setConfig,
loadConfig: this.props.loadConfig,
findFile: this.props.findFile,
addFile: this.props.addFile,
putFile: this.props.putFile,
showAll: this.props.showAll,
globalEvent: this.props.globalEvent,
setLocation: this.props.setLocation,
isPopout: this.props.monitorType === MonitorTypes.Popout,
togglePopout: this.props.togglePopout,
toggleFullScreen: this.props.toggleFullScreen,
deleteFile: this.props.deleteFile,
showNotice: this.props.showNotice,
setCardVisibility: this.props.setCardVisibility,
openFileDialog: this.props.openFileDialog,
href: this.props.href,
scrollToCard: this.scrollToCard,
cardProps: this.props.cardProps,
reboot: this.props.reboot,
saveAs: this.props.saveAs,
isFullScreen: this.props.monitorType === MonitorTypes.FullScreen,
asset: this.props.asset,
isExpandingEditorCard: this.props.isExpandingEditorCard,
setExpandingEditorCard: this.props.setExpandingEditorCard
};
return _react.default.createElement("div", {
className: cn.container,
style: this.state.backgroundStyle
}, _react.default.createElement(_MediaCard.default, (0, _extends2.default)({
ref: function ref(_ref) {
return _this2.cardRefs.MediaCard = _ref;
}
}, commonProps, {
cardPropsBag: bag('MediaCard')
})), _react.default.createElement(_MonitorCard.default, (0, _extends2.default)({
ref: function ref(_ref2) {
return _this2.cardRefs.MonitorCard = _ref2;
}
}, commonProps, {
cardPropsBag: bag('MonitorCard')
})), _react.default.createElement(_PaletteCard.default, (0, _extends2.default)({
ref: function ref(_ref3) {
return _this2.cardRefs.PaletteCard = _ref3;
}
}, commonProps, {
cardPropsBag: bag('PaletteCard')
})), _react.default.createElement(_ReadmeCard.default, (0, _extends2.default)({
ref: function ref(_ref4) {
return _this2.cardRefs.ReadmeCard = _ref4;
}
}, commonProps, {
cardPropsBag: bag('ReadmeCard')
})), _react.default.createElement(_CustomizeCard.default, (0, _extends2.default)({
ref: function ref(_ref5) {
return _this2.cardRefs.CustomizeCard = _ref5;
}
}, commonProps, {
cardPropsBag: bag('CustomizeCard')
})), _react.default.createElement(_ShotCard.default, (0, _extends2.default)({
ref: function ref(_ref6) {
return _this2.cardRefs.ShotCard = _ref6;
}
}, commonProps, {
cardPropsBag: bag('ShotCard')
})), _react.default.createElement(_EditorCard.default, (0, _extends2.default)({
ref: function ref(_ref7) {
return _this2.cardRefs.EditorCard = _ref7;
}
}, commonProps, {
cardPropsBag: bag('EditorCard')
})), _react.default.createElement(_HierarchyCard.default, (0, _extends2.default)({
ref: function ref(_ref8) {
return _this2.cardRefs.HierarchyCard = _ref8;
}
}, commonProps, {
cardPropsBag: bag('HierarchyCard')
})));
}
}]);
return CardContainer;
}(_react.PureComponent);
exports.default = CardContainer;
(0, _defineProperty2.default)(CardContainer, "propTypes", {
fileView: _propTypes.default.object.isRequired,
cardProps: _propTypes.default.object.isRequired,
getConfig: _propTypes.default.func.isRequired,
loadConfig: _propTypes.default.func.isRequired,
setCardVisibility: _propTypes.default.func.isRequired,
localization: _propTypes.default.object.isRequired,
findFile: _propTypes.default.func.isRequired,
showAll: _propTypes.default.bool.isRequired,
setConfig: _propTypes.default.func.isRequired,
addFile: _propTypes.default.func.isRequired,
putFile: _propTypes.default.func.isRequired,
deleteFile: _propTypes.default.func.isRequired,
files: _propTypes.default.array.isRequired,
setLocation: _propTypes.default.func.isRequired,
openFileDialog: _propTypes.default.func.isRequired,
reboot: _propTypes.default.bool.isRequired,
href: _propTypes.default.string.isRequired,
monitorType: _propTypes.default.symbol.isRequired,
toggleFullScreen: _propTypes.default.func.isRequired,
togglePopout: _propTypes.default.func.isRequired,
saveAs: _propTypes.default.func.isRequired,
showNotice: _propTypes.default.func.isRequired,
globalEvent: _propTypes.default.object.isRequired,
asset: _propTypes.default.object,
isExpandingEditorCard: _propTypes.default.bool.isRequired,
setExpandingEditorCard: _propTypes.default.func.isRequired
});