|
@@ -2,9 +2,10 @@
|
|
import * as React from "react";
|
|
import * as React from "react";
|
|
import { GlobalState } from '../../globalState';
|
|
import { GlobalState } from '../../globalState';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
-import { faCircle, faRing, faCube, faHockeyPuck, faSquareFull, faPlus, faDotCircle, faWindowRestore } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
|
|
+import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';
|
|
import { PreviewMeshType } from './previewMeshType';
|
|
import { PreviewMeshType } from './previewMeshType';
|
|
import { DataStorage } from '../../dataStorage';
|
|
import { DataStorage } from '../../dataStorage';
|
|
|
|
+import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
|
|
|
|
|
|
interface IPreviewMeshControlComponent {
|
|
interface IPreviewMeshControlComponent {
|
|
globalState: GlobalState;
|
|
globalState: GlobalState;
|
|
@@ -44,47 +45,42 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
render() {
|
|
|
|
+
|
|
|
|
+ var meshTypeOptions = [
|
|
|
|
+ { label: "Cube", value: PreviewMeshType.Box },
|
|
|
|
+ { label: "Cylinder", value: PreviewMeshType.Cylinder },
|
|
|
|
+ { label: "Plane", value: PreviewMeshType.Plane },
|
|
|
|
+ { label: "Shader ball", value: PreviewMeshType.ShaderBall },
|
|
|
|
+ { label: "Sphere", value: PreviewMeshType.Sphere },
|
|
|
|
+ { label: "Load", value: PreviewMeshType.Custom + 1 }
|
|
|
|
+ ];
|
|
|
|
+
|
|
|
|
+ if (this.props.globalState.previewMeshType === PreviewMeshType.Custom) {
|
|
|
|
+ meshTypeOptions.splice(0, 0, {
|
|
|
|
+ label: "Custom", value: PreviewMeshType.Custom
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<div id="preview-mesh-bar">
|
|
<div id="preview-mesh-bar">
|
|
- <div
|
|
|
|
- title="Preview with a cube"
|
|
|
|
- onClick={() => this.changeMeshType(PreviewMeshType.Box)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Box ? " selected" : "")}>
|
|
|
|
- <FontAwesomeIcon icon={faCube} />
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- title="Preview with a sphere"
|
|
|
|
- onClick={() => this.changeMeshType(PreviewMeshType.Sphere)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Sphere ? " selected" : "")}>
|
|
|
|
- <FontAwesomeIcon icon={faCircle} />
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- title="Preview with a torus"
|
|
|
|
- onClick={() => this.changeMeshType(PreviewMeshType.Torus)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Torus ? " selected" : "")}>
|
|
|
|
- <FontAwesomeIcon icon={faRing} />
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- title="Preview with a cylinder"
|
|
|
|
- onClick={() => this.changeMeshType(PreviewMeshType.Cylinder)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Cylinder ? " selected" : "")}>
|
|
|
|
- <FontAwesomeIcon icon={faHockeyPuck} />
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- title="Preview with a plane"
|
|
|
|
- onClick={() => this.changeMeshType(PreviewMeshType.Plane)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Plane ? " selected" : "")}>
|
|
|
|
- <FontAwesomeIcon icon={faSquareFull} />
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- title="Preview with a shader ball"
|
|
|
|
- onClick={() => this.changeMeshType(PreviewMeshType.ShaderBall)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.ShaderBall ? " selected" : "")}>
|
|
|
|
- <FontAwesomeIcon icon={faDotCircle} />
|
|
|
|
- </div>
|
|
|
|
- <div className={"button align"} title="Preview with a custom mesh" >
|
|
|
|
- <label htmlFor="file-picker" id="file-picker-label">
|
|
|
|
- <FontAwesomeIcon icon={faPlus} />
|
|
|
|
- </label>
|
|
|
|
|
|
+ <OptionsLineComponent label="" options={meshTypeOptions} target={this.props.globalState}
|
|
|
|
+ propertyName="previewMeshType"
|
|
|
|
+ noDirectUpdate={true}
|
|
|
|
+ onSelect={(value: any) => {
|
|
|
|
+ if (value !== PreviewMeshType.Custom + 1) {
|
|
|
|
+ this.changeMeshType(value);
|
|
|
|
+ } else {
|
|
|
|
+ document.getElementById("file-picker")?.click();
|
|
|
|
+ }
|
|
|
|
+ }} />
|
|
|
|
+ <div style={{
|
|
|
|
+ display: "none"
|
|
|
|
+ }} title="Preview with a custom mesh" >
|
|
<input ref="file-picker" id="file-picker" type="file" onChange={evt => this.useCustomMesh(evt)} accept=".gltf, .glb, .babylon, .obj"/>
|
|
<input ref="file-picker" id="file-picker" type="file" onChange={evt => this.useCustomMesh(evt)} accept=".gltf, .glb, .babylon, .obj"/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
title="Open preview in new window" id="preview-new-window"
|
|
title="Open preview in new window" id="preview-new-window"
|
|
- onClick={() => this.onPopUp()} className="button">
|
|
|
|
|
|
+ onClick={() => this.onPopUp()} className="button expand">
|
|
<FontAwesomeIcon icon={faWindowRestore} />
|
|
<FontAwesomeIcon icon={faWindowRestore} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|