mirror of https://gitee.com/cf-fz/WebCAD.git
ChenX
5 years ago
parent
8fcf3776d7
commit
bfc56d2578
@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
export function IsDev()
|
||||||
|
{
|
||||||
|
return window.location.hostname === "localhost";
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import React = require("react");
|
||||||
|
import { Card, HTMLSelect, Label, Classes } from "@blueprintjs/core";
|
||||||
|
import { observable } from "mobx";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { ColorResult, SketchPicker } from "react-color";
|
||||||
|
import { Color } from "three";
|
||||||
|
import { app } from "../../../../ApplicationServices/Application";
|
||||||
|
import { ConfigStore } from "./ConfigDialog";
|
||||||
|
import { AAType } from "../../../../GraphicsSystem/Viewer";
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class DisplayConfigPanel extends React.Component<{ store: ConfigStore }>
|
||||||
|
{
|
||||||
|
@observable private _OpenColorPick = false;
|
||||||
|
@observable _AAType = "性能";
|
||||||
|
componentWillMount()
|
||||||
|
{
|
||||||
|
this._AAType = app.Viewer.AAType === AAType.FXAA ? "性能" : "质量";
|
||||||
|
}
|
||||||
|
handleChangeColor = (color: ColorResult) =>
|
||||||
|
{
|
||||||
|
this.props.store.bgColor = color.hex;
|
||||||
|
app.Viewer.Renderer.setClearColor(new Color(color.hex), 1);
|
||||||
|
app.Editor.UpdateScreen();
|
||||||
|
}
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
const popover: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
}
|
||||||
|
const cover: React.CSSProperties = {
|
||||||
|
position: 'fixed',
|
||||||
|
top: '0px',
|
||||||
|
right: '0px',
|
||||||
|
bottom: '0px',
|
||||||
|
left: '0px',
|
||||||
|
}
|
||||||
|
|
||||||
|
let color = this.props.store.bgColor;
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<div>
|
||||||
|
<div style={{ display: "inline-flex" }}>
|
||||||
|
<p>背景色:</p>
|
||||||
|
<div style={{ zIndex: 100 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: color,
|
||||||
|
width: 20,
|
||||||
|
height: 20
|
||||||
|
}}
|
||||||
|
onClick={this.handleClick}
|
||||||
|
/>
|
||||||
|
{this._OpenColorPick &&
|
||||||
|
<div style={popover}>
|
||||||
|
<div style={cover} onClick={this.handleClick} />
|
||||||
|
<SketchPicker
|
||||||
|
color={this.props.store.bgColor}
|
||||||
|
onChange={this.handleChangeColor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Label className={Classes.INLINE}>
|
||||||
|
抗锯齿:
|
||||||
|
<HTMLSelect options={["性能", "质量"]}
|
||||||
|
value={this._AAType}
|
||||||
|
onChange={e =>
|
||||||
|
{
|
||||||
|
app.Viewer.AAType = e.target.value === "性能" ? AAType.FXAA : AAType.SMAA;
|
||||||
|
this._AAType = e.target.value;
|
||||||
|
}} />
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
handleClick = () =>
|
||||||
|
{
|
||||||
|
this._OpenColorPick = !this._OpenColorPick;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -1,69 +0,0 @@
|
|||||||
import React = require("react");
|
|
||||||
import { Card, H5, Popover, Classes, Button } from "@blueprintjs/core";
|
|
||||||
import { app } from "../../../../ApplicationServices/Application";
|
|
||||||
import { Color } from "three";
|
|
||||||
import { SketchPicker } from "react-color";
|
|
||||||
import { observable } from "mobx";
|
|
||||||
import { observer, inject } from "mobx-react";
|
|
||||||
import { OptionModalStore } from "./OptionModal";
|
|
||||||
|
|
||||||
enum DisplayPanelShow
|
|
||||||
{
|
|
||||||
BgColorPicker = 1,
|
|
||||||
}
|
|
||||||
@inject("OptionStore")
|
|
||||||
@observer
|
|
||||||
export class DisplayPanel extends React.Component<{ OptionStore: OptionModalStore }, {}>
|
|
||||||
{
|
|
||||||
m_InputEl = HTMLInputElement;
|
|
||||||
@observable private m_isShow: DisplayPanelShow = -1;
|
|
||||||
handleChangeColor = (color) =>
|
|
||||||
{
|
|
||||||
console.log(color.hex)
|
|
||||||
this.props.OptionStore.m_Option.bgcolor = color.hex;
|
|
||||||
app.Viewer.Renderer.setClearColor(new Color(color.hex), 1);
|
|
||||||
app.Editor.UpdateScreen();
|
|
||||||
}
|
|
||||||
RenderBgColorPicker = () =>
|
|
||||||
{
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<SketchPicker
|
|
||||||
color={"#334048"}
|
|
||||||
onChange={this.handleChangeColor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
render()
|
|
||||||
{
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<H5>背景色</H5>
|
|
||||||
<input
|
|
||||||
style={{ width: "8rem" }}
|
|
||||||
type="text"
|
|
||||||
className={Classes.INPUT}
|
|
||||||
value={this.props.OptionStore.m_Option.bgcolor}
|
|
||||||
/>
|
|
||||||
<Popover
|
|
||||||
isOpen={this.m_isShow === DisplayPanelShow.BgColorPicker}
|
|
||||||
content={this.RenderBgColorPicker()}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
icon="style"
|
|
||||||
minimal={true}
|
|
||||||
title={`背景色`}
|
|
||||||
onClick={() =>
|
|
||||||
{
|
|
||||||
if (this.m_isShow !== DisplayPanelShow.BgColorPicker)
|
|
||||||
this.m_isShow = DisplayPanelShow.BgColorPicker;
|
|
||||||
else
|
|
||||||
this.m_isShow = -1;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Popover >
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue