Two tree layouts in a same canvas

GoJS
1

Hi,

I have to create the tree structure for my category listing and category listing is upto 9 level and product listing. For this, I have used GoJS Tree View. But, my requirement is something like I have to show two tree diagrams in a same canvas. Means one tree is on the left side (suppose for category hierarchy) and other tree is on the right side (product listing) and there should be linking between the nodes of first tree (left side) with the nodes of second tree (right side). I have tried this by using Tree View - GoJS Tree View but second tree overlaps the first one. Please let me know how I can achieve this?

Thanks.

2

I suspect you have not seen the Tree Mapper sample: GoJS Tree Mapper.

3

Thanks a lot Walter. Yes, I have not seen this sample. I will implement the same in my code.

4

Hi Walter,
I have one more concern in this report. I have shown two trees like in treeMapper sample. I also showed the linking of nodes from left tree to right tree. Now, I want that when we mouse hover the linked node then the link should be highlighted and also the node of the both the sides which are connected gets highlighted.

Also, if suppose I have to interchange the positon of both the trees means by dragging and dropping I can move the Left tree on the right and Right tree on the left. Currently, this is not working smoothly and after dragging the tree is not taking its top position automatically like in Kanban example (Kanban Board) we can move the nodes.

Can you please guide me how I can achieve the same?

5

This Introduction page should be useful: GoJS Highlighting -- Northwoods Software. Note also that you have a choice in which events you use: mouseOver, mouseEnter, mouseHover.

6

For swapping relative positions, try modifying the “Mapping” link template. Instead of:

{ fromSpot: go.Spot.Right, toSpot: go.Spot.Left },

try:

{ fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides },
7

Thanks Walter. Let me try this and will let you know if face any issue.

8

For your third issue, try setting Part | GoJS API and minLocation in the group template using either 0 or NaN as the Y value in both properties.

Note that in the Kanban sample it is an automatic layout that is repositioning the parts. There isn’t such a layout in the TreeMapper sample because it wasn’t needed.

9

Hi Walter,
I have highlighted the links. But, here I have one concern. As I mouse hover on the node from left tree, its got selected and the links coming out of this node are also selected as red. This is working perfectly fine. But, how I can also highlight the node from right side to which links are connected?

Pasted image892×322 40.2 KB

In my code, I have the function

// highlight all Links and Nodes coming out of a given Node
function showConnections(node) {
var diagram = node.diagram;
diagram.startTransaction(“highlight”);
// remove any previous highlighting
diagram.clearHighlighteds();
// for each Link coming out of the Node, set Link.isHighlighted
node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
// for each Node destination for the Node, set Node.isHighlighted
node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
diagram.commitTransaction(“highlight”);
}

Pasted image1168×397 17.1 KB

Can you please let me know how I can achieve this?

Thankt You.

10

Hi Walter,
For my third issue, for which you have mentioned to set maxLocation and minLocation, sorry I didn’t get exactly how to do it and where? Can you please give some code hint on this?

Like this is my nodeArray, so how I can achieve the same?
var nodeDataArray = [
{ isGroup: true, key: -1, text: “Capabilities”, xy: “0 0” },
{ isGroup: true, key: -2, text: “Specification”, xy: “800 0” }
];

Any help is appreciated. Thanks for advance.

11

Hi Walter,
Can you please suggest how I can highlight the links when node gets selected from the right side? Currently this is working only for left side.

Please guide me.

12

On the group template.

myDiagram.groupTemplate =
  $(go.Group, "Vertical",
    { minLocation: new go.Point(NaN, 0), maxLocation: new go.Point(NaN, 0)} 
    ... rest of the template

Read more about Groups: GoJS Groups -- Northwoods Software

edit: see: Two tree layouts in a same canvas - #17 by walter

Read: GoJS Highlighting -- Northwoods Software, especially the last sample on that page.

13

Thanks simon for your response.

For this, I have already followed the same sample from this page but it highlights only the node of left tree and the links associated with it but not the node of right tree which are associated with these links.

I have used the following function

// highlight all Links and Nodes coming out of a given Node
  function showConnections(node) {
    var diagram = node.diagram;
    diagram.startTransaction("highlight");
    // remove any previous highlighting
    diagram.clearHighlighteds();
    // for each Link coming out of the Node, set Link.isHighlighted
    node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
    // for each Node destination for the Node, set Node.isHighlighted
    node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
    diagram.commitTransaction("highlight");
  }

Please let me know where I am wrong.

14

You are using node.findNodesOutOf(), but this only works for links going in one direction.

Maybe you mean to use node.findNodesConnected(), if you want it to work both ways.

Similarly, you probably also want to replace findLinksOutOf with findLinksConnected.

15

Thanks Simon :) Yes, I was wrong and now I have corrected this.

For the issue of grouptemplate, my group template is

myDiagram.groupTemplate =
    graphObj(go.Group, "Auto",
          new go.Binding("position", "xy", go.Point.parse).makeTwoWay(go.Point.stringify),
          {
            layout:
              graphObj(go.TreeLayout,
                    {
                      alignment: go.TreeLayout.AlignmentStart,
                      angle: 0,
                      compaction: go.TreeLayout.CompactionNone,
                      layerSpacing: 25,
                      layerSpacingParentOverlap: 1,
                      nodeIndent: 2,
                      nodeIndentPastParent: 0.88,
                      nodeSpacing: 0,
                      setsPortSpot: false,
                      setsChildPortSpot: false
                    }
                  )
          },
          graphObj(go.Shape, { fill: null, width: 500, stroke: null }),
          graphObj(go.Panel, "Vertical",
                { defaultAlignment: go.Spot.Left },
                graphObj(go.TextBlock,
                { font: "bold 14px MyriadProRegular", margin: new go.Margin(5, 5, 0, 5) },
                new go.Binding("text")),
                graphObj(go.Placeholder, { padding: 5 })
              )
    );

I am initializing my diagram by using the following code:-

var nodeDataArray = [
        { isGroup: true, key: -1, text: "Capabilities", xy: "0 0" },
        { isGroup: true, key: -2, text: "Specification", xy: "800 0" }
      ];

So, I would like to how I can interchange the position of both the tress and it automatically take the position after movement means the smooth movement.

Thank you for help.

16

I think what you actually want is not like the KanBan sample, but like the Swimlanes smaple, where you can grab the outermost groups (the Pools, there are only two of them), and drag them around to re-order the pools.

That is done with this listener:

      "SelectionMoved": relayoutDiagram,

Which calls:

  // this is called after nodes have been moved or lanes resized, to layout all of the Pool Groups again
  function relayoutDiagram() {
    myDiagram.layout.invalidateLayout();
    myDiagram.findTopLevelGroups().each(function(g) { if (g.category === "Pool") g.layout.invalidateLayout(); });
    myDiagram.layoutDiagram();
  }

Which then executes a PoolLayout, which is a custom Layout in the swimlanes sample. You will need to study that sample to understand how it works and incorporate it.

17

That should be:

{ minLocation: new go.Point(-Infinity, 0), maxLocation: new go.Point(Infinity, 0) }

otherwise the user won’t be able to drag the groups at all.