NeXt UI detailed documentation

[tjoliveira]

Hi all,

Currently I'm (excitedly) exploring NeXt UI and already have a lot of ideas but at this moment I'm investing a lot of time to find detailed documentation.

For example: I wanted to save the initial coordinates of a node and tried a lot of things until I discover that nx.graphic.Topology.Node has a method called "setModel" which is called when the node is set (after initial layout). After knowing this, the solution is very simple:

(function(nx){
  nx.define("ExtendedNode", nx.graphic.Topology.Node, {
    methods: {
            'setModel': function (model) {
                this.inherited(model);
                this._floatX = model.x();
                this._floatY = model.y();
            },
    },
  });
})(nx);

The thing is that it took a lot of time to dig into source code and examples to get to know this particular method: the API reference manual does not described this method neither in nx.graphic.Topology.Node nor in nx.graphic.Topology.AbstractNode. The method is on the source code (line 231 @ src/js/graphic/topology/node/AbstractNode.js) but I'm wondering if there is more efficient way to get this info besides studying the sources of all classes.

What I'm doing now is investigating how to draw a grid (set of lines) on the topology, behind the nodes, but still looking how to achieve this...

Thank you in advance.

Regards,

Telmo

[alzverev]

Hi Telmo,

I hope you have had exciting holidays!

First off, I'd highly recommend you to read our tutorial: GitHub - NeXt-UI/next-tutorials: Get Started with NeXt UI Toolkit

That will shed some light on how NeXt works.

What I'm doing now is investigating how to draw a grid (set of lines) on the topology, behind the nodes, but still looking how to achieve this...

Do you need to draw the grid, or do you want to arrange the nodes inside the grid?

If you go for the first one, that would require you to create another layer and draw the lines on it.

Otherwise, you will need to create a data processor or a layout in order to make nodes be located just in the correct positions.

[tjoliveira]

Hi Aleksei,

Thanks for the answer. All good here, thanks for asking Hope all well on your side also.

I read the doc and am using the API but not all the methods are documented there, being the "setModel" on the nx.graphic.Topology.Node one example of that.

As for the grid, I have already the element's position restricted to a grid. The idea is to keep the variables (_nonGridX, _nonGridY) as the position "without" the grid and restrict the element move to multiples of variable grid. Code below, happy to get any feedback on if this is the most efficient way to achieve it.

var grid = 32;
(function(nx){
  nx.define("ExtendedNode", nx.graphic.Topology.Node, {
  methods: {
            'setModel': function (model) {
                this.inherited(model);
                this._nonGridX = model.x();
                this._nonGridY = model.y();
            },
            "move": function(x, y){
                var x_after = Math.round((x + this._nonGridX) / grid) * grid;
                var y_after = Math.round((y + this._nonGridY) / grid) * grid;
                if (this.x() != x_after || this.y() != y_after) {
                    this.inherited(x_after - this.x(), y_after - this.y());
                }
                this._nonGridX += x;
                this._nonGridY += y;
            },
  }
  });
})(nx);

I'm now looking to draw the grid, ideally behind all devices. Do you have any examples on layers with SVG?

Regards,

Telmo