I am trying to evaluate if GoJS can satisfy our diagramming needs. We are trying to create a circular visual consisting of primary nodes and secondary nodes. Here is a rough example of what we are trying to implement.

RoughDiagramExample887×773 104 KB

In this example the primary nodes are the central points of each cluster and the secondary nodes are laid out in a circular pattern around each primary node which are in turn arranged in a circular pattern around the middle of the visual.

To implement this I was thinking of either using ForcedDirectedLayout or the CircularLayout or some combination of the two. My question is using just the CircularLayout is it possible to nest the layout in a such a way that each node of the primary layout has a secondary layout of nodes around it. If so, how would I accomplish this? If this isnt possible then what would be the best method to implement the above example?

Thanks!

Edit 1: After continuing to read the documentation on the website I found Groups. Assuming I read this correctly would it be possible to embed a circular layout into a Group so that sub nodes are arranged around the primary node. Then I could simply just lay the primary nodes out as a circular layout. Am I going down the wrong track here or would this potentially work for my needs?

4 posts - 2 participants

Read full topic

Changes for 2.1.32

• Fixed auto-scrolling not to do so in the directions in which Diagram.allowHorizontalScroll and Diagram.allowVerticalScroll disallow it.
• Fixed the positioning of nodes and links when an animation is stopped during a drag that operates on the same Parts.
• Fixed Diagram.makeSvg where the SVG would not include Picture.source in some environments, such as headless browsers.
• Fixed a Diagram initialization bug when no Diagram DIV is specified, but setting some properties expected one (such as Diagram.scrollMargin).

Previous release: GoJS version 2.1.31

2 posts - 1 participant

Read full topic

I’m looking at switching on allowLink in our diagrams but looking at the BPMN Editor example I’ve noticed an issue. For the green and red circles, trying to drag the shape seems near impossible except via the label, it always tries to add a link. Is the area used for adding links configurable? I can’t seem to find an option for it anywhere

3 posts - 2 participants

Read full topic

I’m trying to have my node’s links to wrap around the side they’re connected to. According to API spot go.Spot.LeftRightSides should do the trick (not perfect but close), but what I noticed is no matter what type of spot I choose it always connects to the same place (all links in one point). Even when I set the ports to go.Spot.Bottom nothing changes. The same when I delete the ports. Only thing that causes a change is moving ports to another object in the template - it changes accordingly.

So I guess for some reason my ports just won’t change. I think I’m missing something here.

Here’s my code:

    diagram.nodeTemplate =
      $(go.Node, "Vertical", go.Panel.Auto, {
          selectionObjectName: "TEXT"
        },
        new go.Binding("deletable", "deletable"),
        $(go.Shape, {
            figure: "RoundedRectangle",
            fill: "rgb(255,0,0)",
            portId: "",
            fromSpot: go.Spot.LeftRightSides,
            toSpot: go.Spot.LeftRightSides,
            strokeWidth: 0,
          },
          new go.Binding("stroke", "stroke"),
          new go.Binding("fill", "color"),

          new go.Binding("opacity", "depth", function (d) {
            return (d > 1) ? 0 : 1;
          }),
          
          new go.Binding("fill", "color")),
        new go.Binding("layerName", "stroke"),
        $(go.TextBlock, {
            name: "TEXT",
            minSize: new go.Size(30, 15),
            margin: new go.Margin(8, 15, 8, 15),
            stroke: "white",
            editable: true,
            isMultiline: false
          },
          new go.Binding("stroke", "stroke"),
          new go.Binding("margin", "depth", function (d) {
            return (d > 1) ? new go.Margin(8, 3, 8, 3) : new go.Margin(8, 15, 8, 15);
          }),

          new go.Binding("text", "text").makeTwoWay(),
          new go.Binding("scale", "scale").makeTwoWay(),
          new go.Binding("font", "font").makeTwoWay()),



        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        new go.Binding("locationSpot", "dir", function (d) {
          return spotConverter(d, false);
        }),
      );

Im using the Double Tree Layout.

Thanks for any help.

16 posts - 2 participants

Read full topic

Hi,

I am using following diagram configuration:

const createDiagram = (userMapService: UserMapService): go.Diagram => {
  const { make } = go.GraphObject;

  return make(go.Diagram, {
    'undoManager.isEnabled': true,
    'textEditingTool.selectsTextOnActivate': false,
    'commandHandler.archetypeGroupData': { isGroup: true, vertical: true },
    padding: 20,
    mouseDrop: (e) => {
      finishDrop(e, null);
    }, 
    'dragSelectingTool.isEnabled': true,
    'draggingTool.isEnabled': false,
    model: make(go.GraphLinksModel, {
      linkKeyProperty: 'key',
    }),
    ChangedSelection: userMapService.selectionChanged,
    BackgroundSingleClicked: userMapService.clearPropertiesSelection,
    TextEdited: userMapService.nodeNameChanged,
    layout: make(go.TreeLayout, {
      layerSpacing: 40, 
      nodeSpacing: 40, 
      angle: 90, 
    }),
  });
};

For Small amount of data(diagramNodeData consisting around 500 nodes and diagramLinkData consisting around 1000 links) it is working fine .
But when we tried with larger set of data of around 1400 nodes and 2000 links, it was taking around 5-8 min to load and after that neither diagram was plotted nor any error was coming.
Can you please guide me how to debug this.
If you want i can even share the sample data vai mail, can’t post the data here as the data size is of around 1mb.

11 posts - 2 participants

Read full topic

While I was evaluating GoJS-Angular I noticed that without setting ViewEncapsulation to “None” the GoJS web elements will not load properly. I’m guessing that this is required by GoJS to bind the CSS/SCSS to the diagram itself.

My question is: Are there any workarounds that would allow me to set ViewEncapsulation back to default (Emulated) and still allow for GoJS to function properly?

While it wouldn’t be a big issue I would like to avoid having Global CSS.

Thanks!

1 post - 1 participant

Read full topic

I have shown tree view in tooltip, but while showing tooltip it is not showing links between its parent and child.

in above image you can see it is only showing expanded icon but not showing links.
Please help me.

3 posts - 2 participants

Read full topic

Link reshapes after using set Data Property

I am shaping the link but it is reshaped after using set data property.
How can I prevent this situation

routing: go.Link.AvoidsNodes

image705×247 10.5 KB

image1002×621 4.76 KB

9 posts - 2 participants

Read full topic

Hi there. I was experimenting with rounded orthogonal links but I noticed that after adding more than 6 children to a tree node it started getting messy. Like this:

Zrzut ekranu 2020-12-21 o 16.38.33350×626 13.5 KB

In smaller quantities it looks like that:

I could try overriding ComputePoints (and I probably will) but it seems to be a bug that shouldn’t happen in the first place so I guess I’m missing something.

Settings for my link:

this.curve = go.Link.None;
this.routing = go.Link.Orthogonal;
this.corner = 2;

8 posts - 2 participants

Read full topic

Hello, I am trying to combine Arranging layout with the example here:
https://gojs.net/latest/samples/arrowheads.html

My question is, how should I be accessing the “actualCenter” attribute of the primary layout inside of the “LayoutCompleted” DiagramEvent listener. Alternatively, if there is a better/different method I should use to implement the desired node layout.

layout: $(ArrangingLayout,
                { // create a circular arrangement of circular layouts
                    primaryLayout: $(go.CircularLayout, {


                    }),  // must specify the primaryLayout
                    arrangingLayout: $(go.CircularLayout, {
                        spacing: 50,
                        aspectRatio: .7,
                        arrangement: go.CircularLayout.ConstantDistance,
                        nodeDiameterFormula: go.CircularLayout.Circular,
                        direction: go.CircularLayout.Counterclockwise,
                        sorting: go.CircularLayout.Forwards
                    }),

                    // Uncommenting this filter will force all of the nodes and links to go into the main subset and thus
                    // will cause all those nodes to be arranged by this.arrangingLayout, here a CircularLayout,
                    // rather than by the this.sideLayout, which by default is a GridLayout.
                    filter: function (part) { return true; },

                    // called for each separate connected subgraph
                    preparePrimaryLayout: function (lay, coll) {  // color all of the nodes in each subgraph
                        var root = null;  // find the root node in this subgraph
                        coll.each(function (node) {
                            if (node instanceof go.Node && node.findLinksInto().count === 0) {
                                root = node;
                            } 
                        });
                    },

                    prepareSideLayout: function (lay, coll, b) {  // called once for the sideLayout
                        // adjust how wide the GridLayout lays out
                        lay.wrappingWidth = Math.max(b.width, this.diagram.viewportBounds.width);
                    },
                }),

                // define a DiagramEvent listener
                "LayoutCompleted": function (e) {
                    // now that the CircularLayout has finished, we know where its center is
                    var cntr = dia.findNodeForKey("Center");
                    cntr.location = dia.layout.actualCenter;
                }

5 posts - 2 participants

Read full topic

image727×359 10.8 KB

2 posts - 2 participants

Read full topic

Hi Walter,

I am using Diagram.MouseDoubleClicked event and ClickSelectingTool.DiagramClicked event for tracking double click and click so as to get the node underneath the clicks.

There are two different logics I have to perform on both the clicks.

Unfortunately when I do double click or click the control goes to ClickSelectingTool.DiagramClicked.

How can I distinguish these events ?

2 posts - 2 participants

Read full topic

Hi,

I am working with a force directed layout in which Nodes and Links are visualized.
I was wondering however, if it is possible to determine the length of the links individually, instead of using defaultSpringLength. I want to be able to determine the length of all arrows individually.
Is this possible and if so, how should this be done?

See picture for an idea of what I want to change:

linklength603×539 19.5 KB

2 posts - 2 participants

Read full topic

Hi, I’ve run into an interesting bug when on initial page load it seems that animations on node deletion are disabled. Interestingly, after I refresh the page the animations are functioning properly. In both cases even if the animations are not working the nodes will move instantly to the target location.

This is likely a strange Angular behavior on my end but I wanted to post the behavior here just in case it is GoJS that is causing the problems.

This is the same diagram from my previous post here:
https://forum.nwoods.com/t/implementing-layout-completed-event-listener-with-arranging-layout/14324/17

MicrosoftTeams-image1051×701 22.6 KB

Any insight into what could be causing this would be appreciated.

Thanks!

1 post - 1 participant

Read full topic

This is a Vertical Layout Panel, the node width now upon the max width green block.
My problem is that i idk how to strech these three green blocks…
if i set them all ‘go.GraphObject.Horizontal’, they will all dont stretch but suit the min size.
if i set two width smaller blocks ‘go.GraphObject.Horizontal’ and max one set nothing it’s will go right, does it make any sense, i dont really get the way it works.
Anyway, this problem brother me all day and i need some help.
Code Brief:

3 posts - 2 participants

Read full topic

Im using a following comparer function:

sorting: go.TreeLayout.SortingDescending,
            comparer: function(va: go.TreeVertex, vb: go.TreeVertex) {
              if(va.node === null || vb.node === null)
                return 0;
              var da = va.node.data;
              var db = vb.node.data;
              if (da.order < db.order) return 1;
              if (da.order > db.order) return -1;
              return 0;
            },

Children of a given node are assigned a certain order on creation (number of children + 1) and there is an option of reordering nodes.

Reordering works but when adding a new child node, the reordered node somehow animates from the previous order to the current one. It’s only during the animation. Why is it happening? It seems like the animation takes the initial position from the default comparer.

2 posts - 2 participants

Read full topic

How can i cancel these overlaps and show red ports above…
I dont use any layout, just set up nodeDataArray and linkDataArray. How can i solve it.

image672×679 20.7 KB

6 posts - 2 participants

Read full topic

Hi,

We have been using a custom context menu for each node in the diagram using HTMLInfo.
Each node will have an ellipsis icon, and when user clicks (like a button click, i.e., left click) it opens a context menu on the node.

Currently we are relying on diagram’s lastInput property to determine the position to pop context menu.

But this won’t work for all nodes, as we have nodes with different size, even expandable/ collapsible nodes.

So what is the better way to popup context menu at right position. I am looking for a way to popup just below the ellipsis button, irrespective all above facts.

Below is a screen shot of how it currently looks on various nodes:

Screenshot 2020-12-28 at 6.30.45 PM2137×1879 176 KB

Screenshot 2020-12-28 at 6.30.15 PM2002×1894 159 KB

Screenshot 2020-12-28 at 6.29.34 PM2421×1913 189 KB

As we can see, currently it pops at different positions on each node. Below is the code that we are using to place the context menu:

// Grab the last input event on the diagram and place the context menu appropriately.
... cxElement is the context menu DOM.
  var mousePt = diagram.lastInput.viewPoint;
  cxElement.style.left = mousePt.x + 5 + "px";
  cxElement.style.top = mousePt.y + "px";`

I am looking for a way to position context menu based on ellipsis icon’s position on each node. That way it would always pop at right position.

Is there a way to get that position and manipulate context menu element’s position ?

TIA

6 posts - 2 participants

Read full topic

Hi,
Although my link routing in link template was set to go.Link.AvoidsNodes,
Links are psssing through nodes.
See pic.
Please advise,
Tany

IMG_20201228_1626223648×2736 2.56 MB

11 posts - 2 participants

Read full topic

// initialize the Palette that is on the left side of the page
      myPalette =
        $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
          {
            maxSelectionCount: 1,
            nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
            linkTemplate: // simplify the link template, just in this Palette
              $(go.Link,
                { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
                  // to line up the Link in the same manner we have to pretend the Link has the same location spot
                  locationSpot: go.Spot.Center,
                  selectionAdornmentTemplate:
                    $(go.Adornment, "Link",
                      { locationSpot: go.Spot.Center },
                      $(go.Shape,
                        { isPanelMain: true, fill: null, stroke: "deepskyblue" }),
                      $(go.Shape,  // the arrowhead
                        { toArrow: "Standard", stroke: null })
                    )
                },
                {
                  routing: go.Link.AvoidsNodes,
                  curve: go.Link.JumpOver,
                  corner: 5,
                  toShortLength: 4

                },
                new go.Binding("points"),
                $(go.Shape,  // the link path shape
                  { isPanelMain: true, strokeWidth: 2, new go.Binding("strokeDashArray", "dash")}),
                $(go.Shape,  // the arrowhead
                  { toArrow: "Standard", stroke: null }),
                
              ),
            model: new go.GraphLinksModel([  // specify the contents of the Palette
              
              { text: "", "size":"40 20", fill: "white", dmnshape: "Decision"  },
              { text: "", figure: "KnowledgeX", "size":"40 20", fill: "white", dmnshape: "Knowledge" },
              { text: "", figure: "KnowledgeSourceX", "size":"40 20", fill: "white", dmnshape: "Knowledge Source" },
              { text: "", figure: "InputX", "size": "40 20", fill: "white", dmnshape: "Input" },
              { text: "", figure: "AnnotationX", "size":"40 20", fill: "white", dmnshape: "Annotation" }
              
            ], [
                // the Palette also has a disconnected Link, which the user can drag-and-drop
                { dash:[], points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) },
                { dash: [5,10], points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
              ])
          });

new go.Binding(“strokeDashArray”, “dash”) causes an error “Uncaught SyntaxError: Unexpected identifier”. However, if I simply put in strokeDashArray: [5,10] it displays as expected with no error. Are there issues with nested bindings? Am I missing something? Thank you.

3 posts - 2 participants

Read full topic