mac/behavior3editor
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix drag node

Browse Source
This commit is contained in:
zhandouxiaojiji committed 2020-10-26 18:06:21 +08:00
1 parent 42bda75286
commit 486c11f655
2 files changed
+89 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

render-process/Editor/NodePanel.tsx
+4 -5
View File
@@ -3,7 +3,7 @@ import { Card } from 'antd';
import { INode } from '@antv/g6/lib/interface/item'; import { INode } from '@antv/g6/lib/interface/item';
interface NodePanelProps { interface NodePanelProps {
curNode: INode | null;
} }
interface NodePanelState { interface NodePanelState {
@@ -15,19 +15,18 @@ export default class Panel extends React.Component<NodePanelProps> {
} }
renderNode() { renderNode() {
const { curNode } = this.props;
return ( return (
<div> <div>
{curNode.getModel().label} {}
</div> </div>
) )
} }
render() { render() {
const { curNode } = this.props; // const { curNode } = this.props;
return ( return (
<Card title="节点信息" style={{ height: "100%" }}> <Card title="节点信息" style={{ height: "100%" }}>
{curNode ? this.renderNode() : "未选中"} {/* {curNode ? this.renderNode() : "未选中"} */}
</Card> </Card>
) )
} }
render-process/Editor/index.tsx
+85 -58
View File
@@ -15,18 +15,18 @@ export interface EditorProps {
} }
interface EditorState { interface EditorState {
curNode: INode | null; curNodeId: string | null;
} }
export default class Editor extends React.Component<EditorProps, EditorState> { export default class Editor extends React.Component<EditorProps, EditorState> {
private ref: React.RefObject<any>; private ref: React.RefObject<any>;
state: EditorState = { state: EditorState = {
curNode: null curNodeId: null
} }
private graph: TreeGraph; private graph: TreeGraph;
private dragSrcNode: INode; private dragSrcId: string;
private dragDstNode: INode; private dragDstId: string;
constructor(props: EditorProps) { constructor(props: EditorProps) {
super(props); super(props);
@@ -54,7 +54,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
type: 'collapse-expand', type: 'collapse-expand',
trigger: 'dblclick', trigger: 'dblclick',
onChange: (item, collapsed) => { onChange: (item, collapsed) => {
const data = item.get('model').data; const data = item.getModel();
data.collapsed = collapsed; data.collapsed = collapsed;
return true; return true;
}, },
@@ -80,7 +80,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
graph.on('node:mouseenter', (e: G6GraphEvent) => { graph.on('node:mouseenter', (e: G6GraphEvent) => {
const { item } = e; const { item } = e;
if(item.hasState('selected')) { if (item.hasState('selected')) {
return; return;
} }
graph.setItemState(item, 'hover', true); graph.setItemState(item, 'hover', true);
@@ -88,50 +88,70 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
graph.on('node:mouseleave', (e: G6GraphEvent) => { graph.on('node:mouseleave', (e: G6GraphEvent) => {
const { item } = e; const { item } = e;
if(item.hasState('selected')) { if (item.hasState('selected')) {
return; return;
} }
graph.setItemState(item, 'hover', false); graph.setItemState(item, 'hover', false);
}); });
graph.on('nodeselectchange', (e: G6GraphEvent) => { graph.on('nodeselectchange', (e: G6GraphEvent) => {
this.onSelectNode(e.target as INode) if(e.target) {
this.onSelectNode(e.target.getID());
} else {
this.onSelectNode(null);
}
}); });
const clearDragDstState = () => { const clearDragDstState = () => {
if (this.dragDstNode) { if (this.dragDstId) {
graph.setItemState(this.dragDstNode, 'dragRight', false); console.log("clearDragDstState", this.dragDstId);
graph.setItemState(this.dragDstNode, 'dragDown', false); graph.setItemState(this.dragDstId, 'dragRight', false);
graph.setItemState(this.dragDstNode, 'dragUp', false); graph.setItemState(this.dragDstId, 'dragDown', false);
this.dragDstNode = null; graph.setItemState(this.dragDstId, 'dragUp', false);
this.dragDstId = null;
}
}
const clearDragSrcState = () => {
if (this.dragSrcId) {
console.log("clearDragSrcId", this.dragSrcId);
graph.setItemState(this.dragSrcId, 'dragSrc', false);
this.dragSrcId = null;
} }
} }
graph.on('node:dragstart', (e: G6GraphEvent) => { graph.on('node:dragstart', (e: G6GraphEvent) => {
this.dragSrcNode = e.item as INode; this.dragSrcId = e.item.getID();
graph.setItemState(e.item, 'dragSrc', true); graph.setItemState(this.dragSrcId, 'dragSrc', true);
}); });
graph.on('node:dragend', (e: G6GraphEvent) => { graph.on('node:dragend', (e: G6GraphEvent) => {
graph.setItemState(e.item, 'dragSrc', false); if(this.dragSrcId) {
this.dragSrcNode = null; graph.setItemState(this.dragSrcId, 'dragSrc', false);
this.dragSrcId = null;
}
}); });
graph.on('node:dragover', (e: G6GraphEvent) => { graph.on('node:dragover', (e: G6GraphEvent) => {
clearDragDstState(); const dstNodeId = e.item.getID();
const dstNode = e.item as INode; if (dstNodeId == this.dragSrcId) {
if (dstNode == this.dragSrcNode) {
return; return;
} }
const box = dstNode.getBBox(); if(this.dragDstId) {
if (e.x > box.minX + box.width * 0.6) { graph.setItemState(this.dragDstId, 'dragRight', false);
graph.setItemState(dstNode, 'dragRight', true); graph.setItemState(this.dragDstId, 'dragDown', false);
} else if (e.y > box.minY + box.height * 0.5) { graph.setItemState(this.dragDstId, 'dragUp', false);
graph.setItemState(dstNode, 'dragDown', true);
} else {
graph.setItemState(dstNode, 'dragUp', true);
} }
this.dragDstNode = dstNode;
const box = e.item.getBBox();
if (e.x > box.minX + box.width * 0.6) {
graph.setItemState(dstNodeId, 'dragRight', true);
} else if (e.y > box.minY + box.height * 0.5) {
graph.setItemState(dstNodeId, 'dragDown', true);
} else {
graph.setItemState(dstNodeId, 'dragUp', true);
}
this.dragDstId = dstNodeId;
}); });
graph.on('node:dragleave', (e: G6GraphEvent) => { graph.on('node:dragleave', (e: G6GraphEvent) => {
@@ -139,22 +159,37 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
}) })
graph.on('node:drop', (e: G6GraphEvent) => { graph.on('node:drop', (e: G6GraphEvent) => {
const srcNode = this.dragSrcNode; const srcNodeId = this.dragSrcId;
if (!srcNode) { const dstNode = e.item;
console.log("drop");
var dragDir;
if(dstNode.hasState('dragRight')) {
dragDir = 'dragRight';
} else if(dstNode.hasState('dragDown')) {
dragDir = 'dragDown';
} else if(dstNode.hasState('dragUp')) {
dragDir = 'dragUp';
}
clearDragSrcState();
clearDragDstState();
if (!srcNodeId) {
console.log("no drag src"); console.log("no drag src");
return; return;
} }
const dstNode = e.item as INode;
if (srcNode == dstNode) { if (srcNodeId == dstNode.getID()) {
console.log("drop same node"); console.log("drop same node");
return; return;
} }
const rootData = graph.findDataById('1'); const rootData = graph.findDataById('1');
console.log('rootData', rootData); console.log('rootData', rootData);
const srcData = graph.findDataById(srcNode.getID()); const srcData = graph.findDataById(srcNodeId);
const srcParent = Utils.findParent(rootData, srcNode.getID()); const srcParent = Utils.findParent(rootData, srcNodeId);
const dstData = graph.findDataById(dstNode.getID()); const dstData = graph.findDataById(dstNode.getID());
const dstParent = Utils.findParent(rootData, dstNode.getID()); const dstParent = Utils.findParent(rootData, dstNode.getID());
console.log("srcParent", srcParent); console.log("srcParent", srcParent);
@@ -172,20 +207,21 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
const removeSrc = () => { const removeSrc = () => {
srcParent.children = srcParent.children.filter(e => e.id != srcData.id); srcParent.children = srcParent.children.filter(e => e.id != srcData.id);
} }
if (dstNode.hasState('dragRight')) { console.log("dstNode", dstNode);
if (dragDir == 'dragRight') {
removeSrc(); removeSrc();
if (!dstData.children) { if (!dstData.children) {
dstData.children = []; dstData.children = [];
} }
dstData.children.push(srcData); dstData.children.push(srcData);
} else if (dstNode.hasState('dragUp')) { } else if (dragDir == 'dragUp') {
if (!dstParent) { if (!dstParent) {
return; return;
} }
removeSrc(); removeSrc();
const idx = dstParent.children.findIndex(e => e.id == dstData.id); const idx = dstParent.children.findIndex(e => e.id == dstData.id);
dstParent.children.splice(idx, 0, srcData); dstParent.children.splice(idx, 0, srcData);
} else if (dstNode.hasState('dragDown')) { } else if (dragDir == 'dragDown') {
if (!dstParent) { if (!dstParent) {
return; return;
} }
@@ -196,11 +232,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
return; return;
} }
const zoom = graph.getZoom(); console.log("cur data", graph.findDataById('1'));
graph.changeData(rootData); graph.changeData();
graph.focusItem(srcData.id); graph.layout();
this.onSelectNode(srcData.id);
clearDragDstState();
}); });
const str = fs.readFileSync(this.props.filepath, 'utf8'); const str = fs.readFileSync(this.props.filepath, 'utf8');
@@ -213,28 +247,22 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
this.graph = graph; this.graph = graph;
} }
onSelectNode(node: string | INode) { onSelectNode(curNodeId: string | null) {
const graph = this.graph; const graph = this.graph;
var curNode: INode;
if (typeof node == "string") { if (this.state.curNodeId) {
curNode = graph.findById(node) as INode; graph.setItemState(this.state.curNodeId, 'selected', false);
} else {
curNode = node;
} }
if (this.state.curNode) { this.setState({ curNodeId });
graph.setItemState(this.state.curNode, 'selected', false); if (this.state.curNodeId) {
} graph.setItemState(this.state.curNodeId, 'selected', true);
this.setState({ curNode });
if (this.state.curNode) {
graph.setItemState(this.state.curNode, 'selected', true);
} }
} }
render() { render() {
console.log("render editor") console.log("render editor")
const { curNode } = this.state; const { curNodeId: curNode } = this.state;
return ( return (
<div className="editor"> <div className="editor">
<Row className="editorBd"> <Row className="editorBd">
@@ -245,7 +273,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
/> />
<Col span={6} className="editorSidebar"> <Col span={6} className="editorSidebar">
<NodePanel <NodePanel
curNode={curNode}
/> />
</Col> </Col>
</Row> </Row>