mirror of https://gitee.com/cf-fz/WebCAD.git
!1948 功能:更改线框颜色配置
黄诗津
2 years ago
committed by
ChenX
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