mirror of https://gitee.com/cf-fz/WebCAD.git
!250 选项面板
parent
aac68d012a
commit
15b40ce737
@ -0,0 +1,13 @@
|
||||
import { Command } from "../Editor/CommandMachine";
|
||||
import { OptionModalStore, OptionModal } from "../UI/Components/Modal/OptionModal/OptionModal";
|
||||
import { app } from "../ApplicationServices/Application";
|
||||
import { ModalPosition } from "../UI/Components/Modal/ModalsManage";
|
||||
|
||||
export class Command_Options implements Command
|
||||
{
|
||||
async exec()
|
||||
{
|
||||
let OptionStore = OptionModalStore.GetInstance() as OptionModalStore;
|
||||
app.m_Editor.m_ModalManage.RenderModal(OptionModal, ModalPosition.Center, { store: OptionStore });
|
||||
}
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
#optionModal
|
||||
{
|
||||
width: 350px;
|
||||
height: 430px;
|
||||
}
|
||||
#optionModal .bp3-dialog-body
|
||||
{
|
||||
padding: 10px;
|
||||
&>.bp3-card
|
||||
{
|
||||
padding: 10px;
|
||||
}
|
||||
&>.bp3-tabs .bp3-tab-panel
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
#optionModal .bp3-dialog-footer
|
||||
{
|
||||
justify-content: flex-end;
|
||||
}
|
@ -0,0 +1,69 @@
|
||||
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.m_Viewer.m_Render.setClearColor(new Color(color.hex), 1);
|
||||
app.m_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