jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.42k stars 714 forks source link

Order Layer / front- or backwards #770

Open spezias opened 9 months ago

spezias commented 9 months ago

Hi,

first of all, thank you for developing this great script and making it available to the general public!

I have a question that I unfortunately couldn't find an answer to.

Is there a way (perhaps rearranging the drawflow array using Javascript) to change the level of the individual nodes? I urgently need a technical approach here. :-)

I would like to be able to move a node to the background or foreground.

Thx!

jerosoler commented 9 months ago

Hi @spezias

Thanks!

The library does not currently support layer order.

You could use with javascript: https://developer.mozilla.org/es/docs/Web/API/Node/replaceChild

I would also have to reorganize the json elements in the data section:

editor.drawflow.drawflow.Home

Jero

spezias commented 8 months ago

Hi Jero, thanks! The HTML-Part is no problem. But I'm having a bit of a hard time with the editor.Object. I tried it like this:

function move(value, positionChange) {
const obj = editor.drawflow.drawflow.Home.data;
            for (var i = 0; i < obj.length; i++) {
                if (obj[i] == positionChange) {
                    var newIndex = value === 'up' ? i - 1 : i + 1;
                    if (newIndex >= obj.length || newIndex < 0) return;
                    var temp = obj[i];
                    obj[i] = obj[newIndex];
                    obj[newIndex] = temp;

                }
            }
        }

        move('up', 2);

But nothing is changed. Any ideas?

spezias commented 8 months ago

Ok, i've found a solution.

        function moveObjectInArray(arr, fromIndex, toIndex) {
            const keys = Object.keys(arr);

            //create temporary objects
            const oldArrayTo = arr[toIndex];
            const oldArrayFrom = arr[fromIndex];

            // delete elements from current index
            delete arr[fromIndex];
            delete arr[toIndex];

            // insert elements on new index
            arr[toIndex] = oldArrayFrom;
            arr[fromIndex] = oldArrayTo;
        }

moveObjectInArray(editor.drawflow.drawflow.Home.data, 2, 1);

for rearranging in cavas simply use editor.import(editor.export());