Changing the category of a link

GoJS
1

when im trying to change the category of link

  (this.diagram.model as go.GraphLinksModel).setCategoryForLinkData(e.subject.data, CanvasEntitiesCategory.DOTTED_CONNECTOR)

like this it shows this warning
image
im doing it in angular 9.

and also its not changing the template of link properly, What should be the solution
Note : I added 2 templates of 2 links

      // Normal Link Template
      linkTemplateMap.add(
        CanvasEntitiesCategory.CONNECTOR,
        this.linkShape.getTemplate()
      );

      // Dotted Link Template
      linkTemplateMap.add(
        CanvasEntitiesCategory.DOTTED_CONNECTOR,
        this.dottedLinkShape.getTemplate()
      );
2

There is a limitation in that one cannot modify the class of an object. We decided that that was a reasonable limitation because allowing a Node to turn into a Group (or vice versa) or allowing a Node to turn into a CustomNode (or vice versa) causes too many problems. And most language systems don’t allow it anyway. We didn’t want to remove the old Part and allocate and add a new Part because then references to the old object would be invalid. Those references could be anywhere in your code.

Which version of GoJS are you using? Evaluate go.version or look at the first few lines of the go.js file.

My guess is that you have loaded the definition of SemiCricleLink twice, once before defining the link templates and once after. So the two classes are technically different from each other, even though (presumably) they have the same definition.

3

Hi Walter, i got about the limitation, but then what would be the right way to change the template of the link?
In some cases i need dotted link, for some case line link. Code reference is in my above comment.
Thanks.

PS: go js version GoJS v2.1.42

4

Most such cases of wanting to show a solid line or a dotted line or a dashed line can be achieved within the same template via a data Binding on the Shape.strokeDashArray property. Have the conversion function return

  • null for a solid line
  • [2, 2], or something like that, for a dotted line
  • [8, 3], or something like that, for a dashed line

So you would not be changing the category property of the link data object, nor the Part.category of the Link, but just some other property on the link data object and letting the binding update the link’s path’s strokeDashArray property. Remember to call Model.set to change any data properties.

Thus you might be able to use a single link template for all of your links, and you would not need to use the Diagram.linkTemplateMap at all.

But if you really need to sometimes have a semi-circular link path and sometimes a straight one, you should modify the SemicircleLink class so that the override of Link.makeGeometry, depending on some data property, either returns the custom Geometry or returns the “normal” result by calling the super method.

Hmmm, looking at the code, it seems that is already does that – just set or bind the Link.curviness property to zero if you want the normal rendering behavior.

5

Yes changing the strokeDashArray is easy, but in my case
image
sometimes dashed without arrow head and sometimes
image
normal with arrow head…
Basically im just setting the template for link on callback event

  private linkDrawEvent = (e: go.DiagramEvent) => {
    const { toNode, toPort } = e.subject;
    if (toNode?.data.category === CanvasEntitiesCategory.TEXT_ANNOTATION) {
      this.diagramModel.setCategoryForLinkData(
        e.subject.data,
        CanvasEntitiesCategory.CONNECTOR
      );
    }
  }

but if i dont use linkTemplate then it would become hard for me change the template, but also because of the class changing limitation category set is getting stuck.
I hope you got my point.

linkTemplate code for reference: Typescript (forked) - StackBlitz

6

If you really want to use a lot of link templates, have them all use SemiCircleLink instead of Link.