0

I'm creating and the fly with ComponentFactory a Component which I use as an Tooltip on yFiles (the fantastic HTML diagramming from yWorks).

I can't get the Tooltips to show and when the Tooltip closes it leaves artifacts.

Anyone got some advice?

this.component = this.factory.create(this.injector);
this.component.instance.entity = entitySingle;
this.component.location.nativeElement.class = 'single-entity-card';
this.component.changeDetectorRef.detectChanges();
this.component.onDestroy(() => {
  // console.log('destroy');
  super.ngOnDestroy();
  this.graphComponent.invalidate();
});
tooltip.appendChild(this.component.location.nativeElement);

Image of the Tooltip artificats

Artifacts marked with red circles

Peter Rakké
  • 11
  • 4
  • Can you identify these artifacts in the DOM? Or at least highlight them in the screenshots? Do they ever go way or stay there forever? – Sebastian Dec 28 '20 at 08:05
  • Hi Sebastian, thanks for trying to help. I have added an extra screenshot in which the artifacts are marked with red circles. They stay until the next tooltip is shown, even when panning or zooming and they stay at the fixed position. – Peter Rakké Dec 28 '20 at 10:17

2 Answers2

1

I found a workaround for hiding the artifacts.

When creating the tooltip with yFiles on editMode.addQueryItemToolTipListener it gets rendered in the body of the page (see screenpicture below). The Angular component then renders the tooltip (of the tooltip) in the cdk-overlay-container (second screenpicture below), but the Angular tooltip stays empty and doesn't get cleaned up after the yFiles tooltip closes.

My workaround for now is to hide the Angular tooltips through CSS:

::ng-deep {
  body .cdk-overlay-container {
    .mat-tooltip-panel {
      visibility: hidden;
    }
  }
}

I would love it if I can get the Angular tooltip to work on the yFiles tooltip, but this will suffice for now.

screenpicture of tooltip html

screenpicture of the Angular artifacts html

Peter Rakké
  • 11
  • 4
0

This is just a wild-guess. Try putting your element inside a new "div" and clear all the div's children in onDestroy just to be "sure".

If you show us the DOM that shows the artefacts and maybe provide more details about how these artifacts are created, we might be able to provide better help.

Sebastian
  • 7,729
  • 2
  • 37
  • 69
  • The onDestroy event doens't get fired until the a new Tooltip is shown. I found a workaround and will add it here. Thx for helping. – Peter Rakké Dec 29 '20 at 09:30