Drag & Drop on multiple selection

[FreeNAYT]

Hello,

I'm just starting to look at your Wunderbaum, especially the demos. I'm looking for a library that matches your development.
I'm not (yet) experienced in web development, but Wunderbaum seems really impressive. Thanks for sharing!

I may have missed a point, but is it possible to Drag-Drop multiple source lines?
In the demonstrations, it seems to me that even if I select several lines, only the last one is dropped on the target.

I realize that controls will probably be necessary, for example not being able to drag-drop lines that don't have the same parent.

Best regards

[mar10]

Not built-in yet, but you may implement it using the standard events.
The drop handler passes the source tree, so you could call event.tree.getSelectedNodes() and then process them.
Hope that helps

[FreeNAYT]

Thank you Martin, yes its helps :)
I had ChatGPT work on this issue, and after several back-and-forths, the AI provided me with code that works for multiple selections.
I also asked it to take into account the drop outside the lines of the target Wunderbaum to add selected lines as root lines of the target Wunderbaum.
I need to look at the code more closely to understand and evaluate it, but I can share it with you if you want.

At the same time, I'm looking for a way to apply a style to a specific cell in a WunderBaum in Grid mode.
For example:
*) Make rows that have children bold and blue.
*) Give cells containing negative numerical values a red background.
I'm working on it and may come back to you if I can't find a solution.

To confirm, when you define a “classes” property in “columns,” does the style apply to both the cells AND the column headers?

Thanks again for sharing this.

[FreeNAYT]

I think I've got my answer for the conditional cell style :)

elem.innerHTML does the job

CSS Styles

.value-positive {
    background-color: #d4edda; /* Pastel green */
    padding: 4px;
    border-radius: 3px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
}
        
.value-zero {
    background-color: #f8f9fa; /* Light gray */
    padding: 4px;
    border-radius: 3px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
}
        
.value-negative {
    background-color: #f8d7da; /* Pastel Red*/
    padding: 4px;
    border-radius: 3px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
}

Render function

render: function(e) {

    const node = e.node;    
    // Iterate on all columns
    for (const col of Object.values(e.renderColInfosById)) {
        // Recover value by column ID
        const val = node.data[col.id];
        
        switch (col.id) {
            case "NumValue":
                // Special treatment for NumValue column with conditional style
                const value = val !== undefined ? val : 0;
                let cssClass = "";
                
                // Determine CSS class based on value
                if (value > 0) {
                    cssClass = "value-positive";
                } else if (value === 0) {
                    cssClass = "value-zero";
                } else {
                    cssClass = "value-negative";
                }
                
                // Define HTML content with the appropriate CSS class
                col.elem.innerHTML = `<span class="${cssClass}">${value}</span>`;
                
                break;
                
            default:
                // For other columns (such as the main column), use textContent
                if (col.id !== "*") {
                    col.elem.textContent = node.data[col.id] || "";
                }
                break;
        }
    }
}

[mar10]

Cool
An alternative could be to access col.elem.classList directly (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)