Measured Ports not updating

[ninjapiratica]

We have a custom node that we are rendering the ports on either the top/bottom or left/right. We have a button that toggles the direction and we rerun the formatting (elk.js). When it reformats, the nodes shows up in the correctly expected location, however the measuredPorts are still in the original positions. That ends up putting the edges in weird places. We have found that modifying the size of the port will force them to be re-measured and properly rerender. The images attached are without the ngStyle change.

Is there a better way of getting these ports to be re-measured?

<mat-card class="scenario-node"
  [class.scenario-node-selected]="node().selected"
  [class.scenario-node-invalid]="node().data.invalid"
  [class.scenario-node-start]="node().data.isStart">
  @if (node().data.showIn){
  <ng-diagram-port
    id="port-in"
    type="target"
+    [ngStyle]="{ width : node().data.layoutDirection === 'RIGHT' ? '1px' : '2px' }"
    [side]="node().data.layoutDirection === 'RIGHT' ? 'left' : 'top'" />
  }

  <div class="scenario-node-status">
    @if (node().data.invalid) {
      <mat-icon>error</mat-icon>
    }
  </div>

  @if (node().data.isStart) {
    <div class="scenario-node-start-badge">{{ 'START' | translate }}</div>
  }

  <mat-card-subtitle>
    {{ node().data.title }}
  </mat-card-subtitle>

  @if (node().data.showOut) {
  <ng-diagram-port
    id="port-out"
    type="source"
+    [ngStyle]="{ width: node().data.layoutDirection === 'RIGHT' ? '1px' : '2px' }"
    [side]="node().data.layoutDirection === 'RIGHT' ? 'right' : 'bottom'" />
  }
</mat-card>

Post-switch direction

[lukasz-jazwa]

Hi @ninjapiratica,

thanks for submitting issues !

We encountered the same issue in our org-chart project built with ng-diagram, the fix is almost done on the library side. You can expect it this week.

Our temporary workaround, just for reference:

 @if (node().data.layoutDirection === 'RIGHT') {
    <ng-diagram-port id="port-in" type="target" side="left" />
  } @else {
    <ng-diagram-port id="port-in" type="target" side="top" />
  }

  <!-- same for port-out -->
  @if (node().data.layoutDirection === 'RIGHT') {
    <ng-diagram-port id="port-out" type="source" side="right" />
  } @else {
    <ng-diagram-port id="port-out" type="source" side="bottom" />
  }

....

 changeDirection(direction: LayoutDirection): void {
   // 1. Update layoutDirection in node data (triggers port recreation via @if/@else)
    this.updateNodesLayoutDirection(direction);

    // 2. Wait one frame for new ports to render, then run layout
    requestAnimationFrame(() => {
      this.runElkLayout();
    });
  }

[lukasz-jazwa]

@ninjapiratica We've just released v1.2, which includes a fix for this specific port measurement issue. The workaround should no longer be necessary, let us know if you run into any further trouble after updating

[ninjapiratica]

Thanks, I tried it out and I don't think the measurement is working in the correct timing still (or I'm doing something wrong). I replicated it in the following github repo so you can see what I'm doing and the results from it.

https://github.com/ninjapiratica/ng-diagram

I've also attached a video showing the above repo running and indicating the ports are changing positions on the nodes, but the 'measuredports' aren't getting updated until later (next time we click the direction button).

20260422-2333-51.8551717.mp4

[lukasz-jazwa]

It looks like there is a regression with the measuredPorts property handling - we updated the code around measurements in the latest version. There is an issue with waitForMeasurements when changing ports. I am working on a hotfix. In the meantime, you can temporarily resolve this by manually updating measuredPorts with the new side in your createUpdateDeleteNodesAndEdges method:

if (existing) {
        const isHorizontal = node.data.layoutDirection === 'RIGHT';
        updatedNodes.push({
          ...node,
          position: { ...existing.position },
          measuredPorts: (existing.measuredPorts ?? []).map(port => ({
            ...port,
            side: port.id === 'port-in'
              ? (isHorizontal ? 'left' : 'top')
              : (isHorizontal ? 'right' : 'bottom'),
          })),
        })
      } else {
        node.position = { x: 0, y: 0 };
        appendedCount += 1;
        addedNodes.push(node);
      }