sukhwinderkaur1389
commented
2 weeks ago I have used code for group var id = document.getElementById("drawflow"); const editor = new Drawflow(id);
editor.start(); editor.addNode('aaa', 1, 1, 600, 200, 'aaa', {}, `aaa` ); editor.addNode('bbb', 1, 1, 850, 200, 'bbb', {}, `bbb` ); editor.addNode('ccc', 1, 1, 850, 370, 'ccc', {}, `ccc`); editor.addConnection(1, 2, 'output_1', 'input_1'); editor.addConnection(2, 3, 'output_1', 'input_1'); editor.addNode('GROUP', 0, 0, 1200, 100, 'GROUP', { elements: []}, `` ); editor.addNode('GROUP', 0, 0, 0, 100, 'GROUP', { elements: []}, `` ); let dragElementHover = null; let last_x = 0; let last_y = 0; editor.on("mouseMove", ({x,y}) => { if(editor.node_selected && editor.drag && editor.node_selected.classList[1] !== "GROUP") { const eles = document.elementsFromPoint(x,y); const ele = eles.filter( ele => ele.classList[1] === "GROUP"); if(ele.length > 0) { dragElementHover = ele[0]; dragElementHover.classList.add("hover-drop"); } else { if(dragElementHover != null) { dragElementHover.classList.remove("hover-drop"); dragElementHover = null; } } } else if(editor.node_selected && editor.drag && editor.node_selected.classList[1] == "GROUP") { const dragNode = editor.node_selected.id.slice(5); const dragNodeInfo = editor.getNodeFromId(dragNode); const elements = dragNodeInfo.data.elements; elements.forEach(eleN => { const node = document.getElementById(`node-${eleN}`); var xnew = (last_x - x) * editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom); var ynew = (last_y - y) * editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom); node.style.top = (node.offsetTop - ynew) + "px"; node.style.left = (node.offsetLeft - xnew) + "px"; editor.drawflow.drawflow[editor.module].data[eleN].pos_x = (node.offsetLeft - xnew); editor.drawflow.drawflow[editor.module].data[eleN].pos_y = (node.offsetTop - ynew); editor.updateConnectionNodes(`node-${eleN}`); }); } last_x = x; last_y = y; }) editor.on("nodeMoved", (id) => { const dragNode = id; if(dragElementHover !== null) { const dropNode = dragElementHover.id.slice(5); if(dragNode !== dropNode) { removeOfGroupNode(dragNode); dragElementHover.classList.remove("hover-drop"); const dropNodeInfo = editor.getNodeFromId(dropNode); const dropNodeInfoData = dropNodeInfo.data; if(dropNodeInfoData.elements.indexOf(dragNode) === -1) { dropNodeInfoData.elements.push(dragNode); editor.updateNodeDataFromId(dropNode, dropNodeInfoData); } } dragElementHover = null; } else { removeOfGroupNode(dragNode); } }) editor.on("nodeRemoved", (id) => { removeOfGroupNode(id); }); function removeOfGroupNode(id) { console.log('group',id); Object.keys(editor.drawflow.drawflow[editor.module].data).forEach(ele => { if(editor.drawflow.drawflow[editor.module].data[ele].class === "GROUP") { const findIndex = editor.drawflow.drawflow[editor.module].data[ele].data.elements.indexOf(id); if(findIndex !== -1) { editor.drawflow.drawflow[editor.module].data[ele].data.elements.splice(findIndex, 1); } } }) }But while moving node out side from the container its still showing inside the element array of container. Please help for the same
Can you please update?
I have used code for group var id = document.getElementById("drawflow"); const editor = new Drawflow(id);
But while moving node out side from the container its still showing inside the element array of container. Please help for the same