Group nodes container resize issue

[sukhwinderkaur1389]

Hi,

While resizing the node, attached line not moving with it. As following

[sukhwinderkaur1389]

@jerosoler - Please update on it.

[jerosoler]

The default library does not allow node groups or resizing.

In any case, please provide an example where you can reproduce the problem.

[sukhwinderkaur1389]

This is code for group node

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

function removeOfGroupNode(id) { console.log('group',id);
Object.keys(editor.drawflow.drawflow[editor.module].data).forEach(ele => {
var className = editor.drawflow.drawflow[editor.module].data[ele].class;
if(className.includes("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]

The default library does not allow node groups or resizing.

In any case, please provide an example where you can reproduce the problem.

Above is the code

[jerosoler]

The code above is not a reproducible example.
Please create a codepen.