Node editor and connections between node pins

[xorza]

I'm trying to build a node editor with Rust. Here is what I have:

What I want:

I need to get absolute-position of pin elements, but find it impossible to achieve.
I tried to get abs-pos on init, but it crashes slint preview and app:

for pin_info[idx] in root.info.inputs: pin := Pin {
    name: pin_info.name;
    init => {
        root.pin_position_updated(
            idx,
            self.absolute-position.x,  // <= crashes on trying to get abs-pos here
            self.absolute-position.y,
        );                                
    }
}

Maybe I can somehow bind curve points to pins.. or get it done in rust side..?
I'm very new to slint. I'm asking for your ideas and suggestions. Thanks

[hunger]

This looks very nice!

A crash is never OK, there is definitely a bug there... IIRC there was something like this fixed for 1.6, which version are you using?

We are working towards having changed callbacks. With should be able to do something like this:

for pin_info[idx] in root.info.inputs: Pin {
    name: pin_info.name;

    changed absolute-position => {
        root.pin_position_updated(
            idx,
            self.absolute-position.x,
            self.absolute-position.y,
        );                                
    }
}

It is an experimental feature at this point in time (which obviously works best on master branch), so if you venture down that route (search our code for EXPERIMENTAL_FEATURE for examples of how to enable those), please report any bugs you run into :-)

[xorza]

Crash is on version 1.6.0

I changed slint to current master

[dependencies]
slint = { git="https://github.com/slint-ui/slint.git", rev = "939d1be3e4ebffd09f52280350fdd96b9f181e81" }
[build-dependencies]
slint-build = { git="https://github.com/slint-ui/slint.git", rev = "939d1be3e4ebffd09f52280350fdd96b9f181e81" }

and added changed callback

for pin_info[idx] in root.info.inputs: pin := Pin {
    name: pin_info.name;
    changed absolute-position => {
        debug("Pin absolute-position changed: ", self.absolute-position);
    }
}

Experiencing a different crash now, says Recursion detected:

thread 'main' panicked at C:\Users\xxorza\.cargo\git\checkouts\slint-8153123e5dffa129\939d1be\internal\core\properties.rs:523:9:
Recursion detected
stack backtrace:
   0: std::panicking::begin_panic_handler
             at /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library\std\src\panicking.rs:645
   1: core::panicking::panic_fmt
             at /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library\core\src\panicking.rs:72
   2: i_slint_core::properties::PropertyHandle::access<bool,i_slint_core::properties::impl$3::update::closure_env$0<i_slint_core::layout::LayoutInfo> >
             at C:\Users\xxorza\.cargo\git\checkouts\slint-8153123e5dffa129\939d1be\internal\core\properties.rs:523
   3: i_slint_core::properties::PropertyHandle::update<i_slint_core::layout::LayoutInfo>
             at C:\Users\xxorza\.cargo\git\checkouts\slint-8153123e5dffa129\939d1be\internal\core\properties.rs:623
   4: i_slint_core::properties::Property<i_slint_core::layout::LayoutInfo>::get<i_slint_core::layout::LayoutInfo>
             at C:\Users\xxorza\.cargo\git\checkouts\slint-8153123e5dffa129\939d1be\internal\core\properties.rs:829

[hunger]

Please file a bug report about the changed recursion :-) This needs fixing!

[xorza]

Somewhat different question, how do I access view tree from Rust? I hope I can workaround by simply iterating views in rust and querying their absolute position.

I cannot google any info in this, nor examples are helpful.

[hunger]

Short answer: You can't. The only thing visible are the exported things.

Long answer: You can get the top level ItemTree and use its interfaces to navigate around. But this is not really helpful: Most properties are not accessible in any way, the tree looks nothing like you expect. This gives slint the freedom to optimize as well as it possibly can without having to take users meddling into account :-)

[kanashimia]

There is an example for a single node: #3608
But I couldn't find how to scale it sanely for multiple ports, the example shows predefined node positions, but ports would be automatically placed, their positions are unknown beforehand.
It is possible to manually layout the node and ports, manually calculating node width and port positions, but that is stupid.
You also don't need to know ports absolute positions, relative positions inside a node are ok if you know the position of the node.

There are a lot of problems which actually prevent you from writing this:

1. no two-way bindings to model data
2. no two-way bindings to array elements
3. no way to name repeated elements and refer to them
4. code during init callback crashes with borrow errors

Most are known issues, except the third one for some reason.

Maybe @ogoffart knows a better way, as the author of the original suggestion.

Here is an example implemented in QML: https://github.com/houmain/QML-NodeGraph

[kanashimia]

Report: I actually was able to do it using #3215 branch
BUT, it is insanely buggy, code will break if you breathe on it

Here is the code: SlintPad, but don't use it, it is awful, quite a lot of dead code there too.
EDIT: Code is just a proof of concept, it doesn't actually handle ports vertical positioning and perhaps something else that I forgot.

Here is an example code that I had to write:

for idx in nodes[idx].in-ports.length: cool2 := HorizontalLayout {
    alignment: start;
    x: - 15px / 2;
    Port {
        port: nodes[root.idx].in-ports[idx];
        init => {
            nodes[root.idx].in-ports[idx].x = 0px;
            nodes[root.idx].in-ports[idx].y = vert.preferred-height + v2.padding-top + cool2.preferred-height / 2;
        }
    }
}

If you change the loop to iterate by value instead of by index, it will break.
If you change preferred-height to regular height it will break, if you change anything basically it will break, isn't a good solution.

It also doesn't work for slint-lsp, as it crashes with

thread 'main' panicked at /home/kanashimia/.local/state/cargo/git/checkouts/slint-8153123e5dffa129/c2c2294/internal/core/properties.rs:488:9:
Recursion detected

🗿

I will look more into doing it on the Rust side, but at this point I think it is better to just switch to Qt or egui.

[kanashimia]

I Actually Did It

Here is something that works on stable slint 1.6.0: SlintPad link

But be ready for THE most hacky code ever.