mirror of https://gitee.com/cf-fz/WebCAD.git
!1948 功能:更改线框颜色配置
parent
09af081368
commit
9ce44cf743
@ -0,0 +1,130 @@
|
||||
|
||||
import { Classes, Icon, Label } from '@blueprintjs/core';
|
||||
import { observable } from 'mobx';
|
||||
import { observer } from 'mobx-react';
|
||||
import * as React from 'react';
|
||||
import { ColorMaterial } from '../../../../Common/ColorPalette';
|
||||
import { userConfig } from '../../../../Editor/UserConfig';
|
||||
import { ColorList } from './DisplayConfigPanel';
|
||||
|
||||
interface IColorList
|
||||
{
|
||||
text: string;
|
||||
type: "ConceptualEdgeColor" | "Physical2EdgeColor";
|
||||
handleClick: (e: React.MouseEvent<HTMLUListElement>, type: string) => void;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ConfigColorList extends React.Component<IColorList>
|
||||
{
|
||||
@observable isShow = false;
|
||||
liEl = React.createRef<HTMLLIElement>();
|
||||
divEl = React.createRef<HTMLDivElement>();
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
this.registerEvent();
|
||||
}
|
||||
private registerEvent()
|
||||
{
|
||||
document.body.addEventListener('mousedown', this.CloseColorList);
|
||||
document.body.addEventListener('wheel', this.CloseColorList);
|
||||
}
|
||||
private CloseColorList = (e: MouseEvent) =>
|
||||
{
|
||||
//在任何地方点到鼠标,都将取消下拉菜单
|
||||
let el = e.target as HTMLElement;
|
||||
for (let i = 0; i < 4; i++)
|
||||
{
|
||||
if (el?.className === this.liEl.current.className)
|
||||
return;
|
||||
else
|
||||
el = el.parentElement;
|
||||
if (el === null)
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.isShow)
|
||||
{
|
||||
this.isShow = false;
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
componentWillUnmount()
|
||||
{
|
||||
document.body.removeEventListener('mousedown', this.CloseColorList);
|
||||
document.body.removeEventListener('wheel', this.CloseColorList);
|
||||
}
|
||||
|
||||
getCalcStyles = () =>
|
||||
{
|
||||
let el = this.divEl.current as HTMLElement;
|
||||
if (!el) return;
|
||||
let scrolltop: number = 0;
|
||||
while (true)
|
||||
{
|
||||
if (el.className.includes("bp3-card"))
|
||||
{
|
||||
scrolltop = el.scrollTop;
|
||||
break;
|
||||
}
|
||||
else
|
||||
el = el.parentElement;
|
||||
if (el === null)
|
||||
break;
|
||||
}
|
||||
|
||||
this.divEl.current.style.cssText = `
|
||||
position: absolute;
|
||||
top: ${this.divEl.current.parentElement.offsetTop - scrolltop}px;
|
||||
`;
|
||||
};
|
||||
render()
|
||||
{
|
||||
let type = this.props.type;
|
||||
return (
|
||||
<Label className={Classes.INLINE} style={{ display: "flex" }}>
|
||||
<span style={{ width: 95 }}>{this.props.text}</span>
|
||||
<ul className={`${Classes.LIST_UNSTYLED}`} id="color-list">
|
||||
<li
|
||||
onClick={(e) =>
|
||||
{
|
||||
this.isShow = !this.isShow;
|
||||
if (this.isShow)
|
||||
this.getCalcStyles();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
ref={this.liEl}
|
||||
className={type}
|
||||
>
|
||||
<div>
|
||||
<Icon icon={"symbol-square"} color={"#" + ColorMaterial.GetColor(userConfig[type]).getHexString()} />
|
||||
{ColorList[userConfig[type]][0]}
|
||||
</div>
|
||||
<Icon icon="caret-down" />
|
||||
</li>
|
||||
<li>
|
||||
<div ref={this.divEl}>
|
||||
<ul
|
||||
className={`${Classes.LIST_UNSTYLED} ${Classes.POPOVER}`}
|
||||
onMouseDown={e => this.props.handleClick(e, type)}
|
||||
style={{ display: this.isShow ? "block" : "none" }}
|
||||
>
|
||||
{ColorList.map(([txt, color]) =>
|
||||
{
|
||||
return (
|
||||
<li key={color} value={color}>
|
||||
<Icon icon={"symbol-square"} color={"#" + ColorMaterial.GetColor(color).getHexString()} />
|
||||
{txt}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</Label>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in new issue