replay-viewer
Version:
Rocket League replay viewer React component and tooling
130 lines • 6.83 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import ButtonGroup from "@mui/material/ButtonGroup";
import Input from "@mui/material/Input";
import InputAdornment from "@mui/material/InputAdornment";
import ColorIcon from "./icons/ColorIcon";
import DropDownIcon from "./icons/DropDownIcon";
import DeleteIcon from "./icons/DeleteIcon";
import PencilIcon from "./icons/PencilIcon";
import PencilOffIcon from "./icons/PencilOffIcon";
import SphereIcon from "./icons/SphereIcon";
import LineIcon from "./icons/LineIcon";
import React, { PureComponent } from "react";
import styled from "styled-components";
import DrawingManager from "../../managers/DrawingManager";
import BoxIcon from "./icons/BoxIcon";
var DrawingControls = /** @class */ (function (_super) {
__extends(DrawingControls, _super);
function DrawingControls(props) {
var _this = _super.call(this, props) || this;
_this.toggleDrawingMode = function () {
var isDrawingMode = !_this.state.isDrawingMode;
_this.setState({
isDrawingMode: isDrawingMode,
});
isDrawingMode ? DrawingManager.init(_this.state) : DrawingManager.destruct();
};
_this.toggle3dMode = function () {
var is3dMode = !_this.state.is3dMode;
_this.setState({
is3dMode: is3dMode
});
DrawingManager.getInstance().is3dMode = is3dMode;
};
_this.changecolor = function (e) {
var color = e.target.value;
_this.setState({
color: color,
});
DrawingManager.getInstance().setColor(color);
};
_this.toggleColorPicker = function () {
_this.colorPicker.current && _this.colorPicker.current.click();
};
_this.changeSelectedDrawObject = function (object) {
if (_this.state.drawObject === object)
return;
_this.setState({
drawObject: object,
});
DrawingManager.getInstance().drawObject = object;
};
_this.changeMeshScale = function (e) {
var scale = Number(e.target.value);
_this.setState({
meshScale: scale,
});
DrawingManager.getInstance().meshScale = scale;
};
_this.clearDrawings = function () {
DrawingManager.getInstance().clearDrawings();
};
_this.renderControlButtons = function () {
var drawableMeshes = ['box', 'sphere', 'line'];
var meshButtons = {
sphere: SphereIcon,
line: LineIcon,
box: BoxIcon
};
return (React.createElement(React.Fragment, null,
React.createElement(Grid, { item: true },
React.createElement(ButtonGroup, { size: "small", variant: "outlined" },
React.createElement(Button, { onClick: _this.toggleColorPicker },
React.createElement(ColorIcon, { selectedColor: _this.state.color }),
React.createElement(DropDownIcon, null),
React.createElement(HiddenInput, { ref: _this.colorPicker, type: "color", value: _this.state.color, onChange: _this.changecolor })),
React.createElement(Button, { onClick: _this.clearDrawings },
React.createElement(DeleteIcon, null)),
React.createElement(Button, { onClick: _this.toggle3dMode, title: "3D-Draw on the field object or in front of camera" }, _this.state.is3dMode ? "3D" : "2D"),
drawableMeshes.map(function (value, index) {
var IconButton = meshButtons[value];
return React.createElement(Button, { key: index, variant: _this.state.drawObject == value ? "contained" : "outlined", color: _this.state.drawObject == value ? "primary" : "info", onClick: function () { return _this.changeSelectedDrawObject(value); } },
React.createElement(IconButton, { color: _this.state.drawObject == value ? "#ffffff" : "#000000" }));
}))),
_this.state.drawObject == "sphere" || _this.state.drawObject == "box"
? React.createElement(Grid, { item: true, xs: 2 },
React.createElement(Input, { type: "number", placeholder: "Scale", defaultValue: _this.state.meshScale, onChange: _this.changeMeshScale, startAdornment: React.createElement(InputAdornment, { position: "start" }, "Scale") }))
: null));
};
_this.state = {
isDrawingMode: false,
color: "#00ea0c",
meshScale: 200,
drawObject: "line",
is3dMode: false,
};
_this.colorPicker = React.createRef();
return _this;
}
DrawingControls.prototype.render = function () {
return (React.createElement(Grid, { container: true, spacing: 3, alignItems: "center" },
React.createElement(Grid, { item: true },
React.createElement(Button, { onClick: this.toggleDrawingMode, variant: "outlined", startIcon: this.state.isDrawingMode ? React.createElement(PencilOffIcon, null) : React.createElement(PencilIcon, null) }, "Drawing Mode")),
this.state.isDrawingMode && this.renderControlButtons()));
};
return DrawingControls;
}(PureComponent));
var HiddenInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: none;\n }\n"], ["\n && {\n display: none;\n }\n"])));
export default DrawingControls;
var templateObject_1;
//# sourceMappingURL=DrawingControls.js.map