Group nodes

[sukhwinderkaur1389]

Hi, I have integrate group nodes code from - https://github.com/jerosoler/Drawflow/issues/423

But my nodes inside the container not moving with container.

Can you please help whats the issue?

[sukhwinderkaur1389]

@jerosoler - Can you please update on it?

[sukhwinderkaur1389]

@jerosoler - Can you please update on it?

PLease update

[jerosoler]

Updated:

With the information provided, we cannot help you. Prepare a codepen with your problem. Where show your code.

[sukhwinderkaur1389]

Updated:

With the information provided, we cannot help you. Prepare a codepen with your problem. Where show your code.

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) {
    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);
            }
        }
   })
}

[sukhwinderkaur1389]

Updated: With the information provided, we cannot help you. Prepare a codepen with your problem. Where show your code.

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) {
    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);
            }
        }
   })
}

@jerosoler - Please update

[jerosoler]

Not a codepen

[sukhwinderkaur1389]

Not a codepen

I have used all code from https://github.com/jerosoler/Drawflow/issues/423

Its here -https://codepen.io/sukhwinder-kaur/pen/MWdvMXy

But its not fully working here

[sukhwinderkaur1389]

Not a codepen

I have used all code from #423

Its here -https://codepen.io/sukhwinder-kaur/pen/MWdvMXy

But its not fully working here

Please let me know which part of code you needed, I will share

[sukhwinderkaur1389]

Not a codepen

I have used all code from #423 Its here -https://codepen.io/sukhwinder-kaur/pen/MWdvMXy But its not fully working here

Please let me know which part of code you needed, I will share

I am able to resolve this issue.

Can you please help if we can add group container ID to the nodes added inside the container???

[sukhwinderkaur1389]

Not a codepen

I have used all code from #423 Its here -https://codepen.io/sukhwinder-kaur/pen/MWdvMXy But its not fully working here

Please let me know which part of code you needed, I will share

I am able to resolve this issue.

Can you please help if we can add group container ID to the nodes added inside the container???

### On resize these are not moving