Позиционирование оверлея cdk в позиции мыши - PullRequest
Новая
       28

Позиционирование оверлея cdk в позиции мыши

1 голос
/ 17 апреля 2020

Я пытаюсь расположить оверлей с правым верхним углом в позиции мыши. Чтобы визуализировать это, я покажу вам график c, как это должно быть и что я получил.

enter image description here

Таким образом, чтобы разместить оверлей с В верхнем правом углу в позиции мыши ширина наложения должна быть вычтена из значения event.clientX (см. ниже). НО общая ширина должна быть динамической, в зависимости от ширины содержимого в оверлее. Это может отличаться со временем. Итак, как получить точное значение ширины наложения и расположить его впоследствии?

Кнопка открытия оверлея: 

<button (click)="showTasks($event)"></button>

Метод, который вызывается: 

export class Component {
  constructor(private _tasksOverlay: OverlayService) {}

  showTasks(event) {
    this._tasksOverlay.open(OverlayComponent,event);
  }
}

Служба оверлея: 

@Injectable()
export class ServerTaskOverlayService {

  private _config = new OverlayConfig({});

  constructor(private overlay: Overlay) {}

  open(comp:ComponentType<any>,event:MouseEvent) {
    // Here the width of the overlay should already be known
    this._config.positionStrategy = this.overlay.position().global().left(event.clientX+"px").top(event.clientY+"px");

    const overlayRef = this.overlay.create(this._config);

    const filePreviewPortal = new ComponentPortal(comp);

    overlayRef.attach(filePreviewPortal);
  }
}
...