fix: 编辑时节点参数时,鼠标按下并选中内容后,如果鼠标弹起时位于G6树状图区域,节点的选中状态会被取消。

This commit is contained in:
basstal committed 2022-09-16 23:38:01 +08:00
1 parent 50e42bd846
commit b9a995d3f3
1 file changed
+24 -14
+24 -14
View File
@@ -24,6 +24,7 @@ export interface EditorProps {
interface EditorState { interface EditorState {
curNodeId?: string; curNodeId?: string;
blockNodeSelectChange?: boolean;
} }
export default class Editor extends React.Component<EditorProps, EditorState> { export default class Editor extends React.Component<EditorProps, EditorState> {
@@ -113,7 +114,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
}, },
}, },
}); });
graph.on("contextmenu", (e: G6GraphEvent) => { graph.on("contextmenu", (e: G6GraphEvent) => {
require("@electron/remote").Menu.getApplicationMenu().popup(); require("@electron/remote").Menu.getApplicationMenu().popup();
}); });
@@ -135,6 +136,11 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
}); });
graph.on("nodeselectchange", (e: G6GraphEvent) => { graph.on("nodeselectchange", (e: G6GraphEvent) => {
if (this.state.blockNodeSelectChange) {
// ** 重置选中效果
this.onSelectNode(this.state.curNodeId)
return;
}
if (e.target) { if (e.target) {
this.onSelectNode(e.target.getID()); this.onSelectNode(e.target.getID());
} else { } else {
@@ -481,8 +487,12 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
return ( return (
<div className="editor"> <div className="editor">
<Row className="editorBd"> <Row className="editorBd">
<Col span={18} className="editorContent" ref={this.ref} /> <Col span={18} className="editorContent" ref={this.ref} onMouseDownCapture={(event) => {
<Col span={6} className="editorSidebar"> this.state.blockNodeSelectChange = false;
}} />
<Col span={6} className="editorSidebar" onMouseDownCapture={(event) => {
this.state.blockNodeSelectChange = true;
}}>
{curNode ? ( {curNode ? (
<NodePanel <NodePanel
model={curNode} model={curNode}
@@ -504,19 +514,19 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
}} }}
/> />
) : ( ) : (
<TreePanel <TreePanel
model={this.treeModel} model={this.treeModel}
onRenameTree={(name: string) => { onRenameTree={(name: string) => {
}} }}
onRemoveTree={() => { onRemoveTree={() => {
}} }}
onChangeTreeDesc={(desc) => { onChangeTreeDesc={(desc) => {
this.changeTreeDesc(desc); this.changeTreeDesc(desc);
}} }}
/> />
)} )}
</Col> </Col>
</Row> </Row>
</div> </div>