javascriptreactjsgojs

GoJS strokeWidth giving a black box

I am using react JS. In my link template, I tried following things

  1. A simple path
      go.Link,
      { curve: go.Link.Bezier },
      new go.Binding("relinkableFrom", "canRelink").ofModel(),
      new go.Binding("relinkableTo", "canRelink").ofModel(),
      $(go.Shape, { toArrow: "Standard", scale: 1.5 })
    )

Result - a default link as expected
enter image description here

  1. Links with a thick stroke
diagram.linkTemplate = $(
      go.Link,
      { curve: go.Link.Bezier },
      new go.Binding("relinkableFrom", "canRelink").ofModel(),
      new go.Binding("relinkableTo", "canRelink").ofModel(),      
      $(go.Shape), 
      $(go.Shape, {strgokeWidth : 4}),
      $(go.Shape, { toArrow: "Standard", scale: 1.5 })
    )

Result - A black box in the middle of links
enter image description here

I just want to increase the thickness of the links.
I tried adding mouse events

        mouseEnter: function(e, link) { link.path.strokeWidth = 4; },
        mouseLeave: function(e, link) { link.path.strokeWidth = 4; }
      },

That also works! could anyone help me with this? I do not want black boxes.

Solution

  • Your link template is:

    diagram.linkTemplate =
  $(go.Link,
    { curve: go.Link.Bezier },
    new go.Binding("relinkableFrom", "canRelink").ofModel(),
    new go.Binding("relinkableTo", "canRelink").ofModel(),      
    $(go.Shape), // the one Link.path Shape
    $(go.Shape, { strokeWidth : 4}),
    $(go.Shape, { toArrow: "Standard", scale: 1.5 })
  )

    (I have fixed your typo naming the "strokeWidth" property.)

    First, if for a Shape you don't set the GraphObject.desiredSize (or equivalently, the GraphObject.width and height) to real numbers, and if its containing Panel doesn't impose any constraints on the size, and if you haven't set Shape.geometry or geometryString, then the default size will be 100x100, which as you have seen is obvious enough to tell programmers that they forgot something.

    Normally such Shapes would be used as labels on the Link. That's why you are seeing the (default) Shape at the middle of the link's path.

    However from your description it appears that you want there to be more than one Link.path Shape that automatically get the Geometry computed by the Link from the Link's route. By default there is only one Link.path, so if you want there to be more than one such Shape, you have to set GraphObject.isPanelMain to true on each such Shape.

    Please read: https://gojs.net/latest/intro/links.html#EasierClickingOnLinks