Root job is not centering

[JadeWilson94]

Currently when I initally render my step component, it's not rendering the component in the top-center of the page: However when I resize the page it re-centres it fine:

 import { Component, ViewChild, Input, ChangeDetectorRef} from '@angular/core';
 import { NgFlowchart, NgFlowchartCanvasDirective, NgFlowchartStepRegistry } from '@joelwenzel/ng-flowchart';
 import { Job, JobStepComponent } from './Steps/jobstep.component';
 import { Schedule, ScheduleStepComponent } from './Steps/schedulestep.component';
 import { Task, TaskStepComponent } from './Steps/taskstep.component';

@Component({
  selector: 'cui-system-job-workflow-page',
  templateUrl: './workflow.component.html',
  styleUrls: ['../style.component.scss'],
})
export class WorkflowComponent {
  @Input() job: any;

  callbacks: NgFlowchart.Callbacks = {};
  options: NgFlowchart.Options = {
    stepGap: 40,
    rootPosition: 'TOP_CENTER'
  };

  @ViewChild(NgFlowchartCanvasDirective)
  canvas: NgFlowchartCanvasDirective;
  
  constructor(private stepRegistry: NgFlowchartStepRegistry, private cdref: ChangeDetectorRef) {
    this.callbacks.onDropError = this.onDropError;
    this.callbacks.onMoveError = this.onMoveError;
  }

  ngAfterViewInit() {
    this.stepRegistry.registerStep('job-step', JobStepComponent);
    this.stepRegistry.registerStep('schedule-step', ScheduleStepComponent);
    this.stepRegistry.registerStep('task-step', TaskStepComponent);

    var startingFlow =
    '{"root":{"id":"s1624491702043","type":"job-step","data":' + JSON.stringify(this.job) + ',"children":[]}}';
    
    let flow: NgFlowchart.Flow  = this.canvas.getFlow()
    flow.upload(startingFlow);
    this.cdref.detectChanges();
  }

  onDropError(error: NgFlowchart.DropError) {
    console.log(error);
  }

  onMoveError(error: NgFlowchart.MoveError) {
    console.log(error);
  }
}

I'm not sure what I'm doing wrong, I've tried re-rendering it as well, is there anything I am missing?

[michaelmarcuccio]

What version of the package are you using? Can you recreate the issue in a stackblitz?

[JadeWilson94]

@michaelmarcuccio it's version 1.0.1-beta. unfortunately I cannot recreate the issue on stackblitz, but the only difference being that it's in a modal in my application? https://stackblitz.com/edit/ng-flowchart-workflow-dbhqh?file=src/app/app.component.ts

My workaround for the time being is that I'm calling the render method in ngAfterViewChecked(), which updates the view and centres the workflow.

[michaelmarcuccio]

Try version 1.0.0-beta.9 which is the most recent version.

[michaelmarcuccio]

I believe this solves the problem if you are still having the issue: setTimeout(() => flow.upload(startingFlow));

Reason being you need to wait until next cycle after afterViewInit to upload a flow.

[JadeWilson94]

I've upgraded to 1.0.0-beta.9 and used setTimeout(() => flow.upload(startingFlow)) but still having same issue. It needing to wait until next cycle makes sense why uploading the flow in ngAfterViewChecked() works though.

[joel-wenzel]

@JadeWilson94 So just to confirm it is working as expected in after init and on next tick correct?

[JadeWilson94]

@joel-wenzel no that's not what's occurring. I still am getting the same issue when I try:  setTimeout(() => flow.upload(startingFlow)) in the ngAfterViewInit()... however as a workaround I re-render the flow in ngAfterViewChecked()

[joel-wenzel]

@JadeWilson94 Are you using changeDetection onPush by chance in your component containing the flow?