mirror of https://gitee.com/cf-fz/WebCAD.git
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