JGraphX - how to live preview and apply more complicated graph changes

442 views Asked by At

I have a graph with two kinds of vertices:

  • main vertices which represent graph nodes
  • port vertices which are children of main vertices and edges are connected to them.

(Edges cannot be directly connected to node because the port vertex is modelling real object which must be explicitly visualized.) Each port vertex is positioned such that it tightly adjoins its parent in direction of opposite node of edge connected to it. This is accomplished by layout algorithm. See picture:

+------+  port             +------+
|      +-+               +-+      |
| node | |---------------| |      |
|      +-+     edge      +-+      |
+------+                   +------+

However, when a node is then being dragged, its ports still have its old relative positions against parent. What should I do for refreshing port positions according to new coordinates of node? At least after dropping node, ideally also during live preview (mxGraphHandler.isLivePreview() == true).

Current wrong graph:

+------+  port
|      +-+
| node | |
|      +-+
+------+  \
           \
            \  +------+
             +-+      |
             | |      |
             +-+      |
               +------+

Expected correct graph:

+------+
|      |
| node |
|      |  port
+------+-+
       | |
       +-+
          \
           \
            \
             +-+
             | |
             +-+------+
               |      |
               |      |
               |      |
               +------+

I digged into live preview process and have some clue and some unsorted unclarities:

  • seems I will have to implement own extension of mxMovePreview and override start/getPreviewStates method since their current implementation hardcodes the set of affected nodes and for example opposite port of dragged node is not included
  • seems I won't be able to fully reuse strategy for port positioning because while in layout it is applied to geometry of cells, in preview it is applied to mxCellStates and mxCellStatePreview
  • the methods which receive dx,dy apply linear transformations (shift by constant vector), complicated geometry recomputation will require reconstruction of coordinates?
  • the positioning of ports is similar to updating edge terminal points in mxCellStatePreview.revalidateState - perhaps I should implement own extension of mxCellStatePreview and rewrite this method?
  • how to implement refreshing after dropping node? Seems different than live preview. Listener on mxEvent.STOP will suffice or some overload will be needed too?

I will appreciate any help of setting in right direction. Thank you.

1

There are 1 answers

0
Marcelo Aleks On

Have you set the port geometry to relative to the parent ?

geo.setParent (<>); geo.setRelative(true);