Positioning links in palette

GoJS
21

ngAfterViewInit seems too early to me, according to what little I know of the life-cycle in Angular. That happens after the components have been initialized, not after the DOM has been laid out.

22

indeed.

The only lifecycle event that works is

 public ngAfterViewChecked(): void {
    this.myPaletteComponent.palette.layoutDiagram(true);
  }

in this case the arrows are positioned correctly in the palette. That is not a solution though. This event is called all the time, so it would be rather inefficient to do this.
I’m going to download the angular-basic sample again and add a palette to it and see if I can reproduce the problem to find out if it comes from gojs or my own app.

23

I suppose you could do it just once…

24

ok, but it sounds like a hack.

So… I have reproduced the problem in go-js-angular-basic. I will add the code that I added to the sample. Do you think it could be a bug or am I doing something wrong below ?

in initPalette function :

 palette.linkTemplate = $(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', strokeWidth: 0 }, new go.Binding('strokeDashArray', 'dash')),
            $(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 }, new go.Binding('strokeDashArray', 'dash')),
      $(go.Shape,  // the arrowhead
        { toArrow: 'Standard', stroke: null })
    ),

and the data:

public paletteLinkData: Array<go.ObjectData> = [
    {
      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)]),
      strokeWidth: 4, dash: [6, 3]
    },
    { points: new go.List(/*go.Point*/).addAll([new go.Point(20, 20), new go.Point(60, 20), new go.Point(60, 40), new go.Point(60, 50)]) },
  ];
25

We’ll look into it.

26

Hello, can you try the latest version of gojs-angular (1.0.13) and let me know if that solves your problem?

27

yes ! that fixed it :) Thanks you.