---

private handlePointerDown = (): void => {
  if (this.selectedDrawing$.value) {
    this.selectedDrawing$.next(null);
  }

  this.DOM.refreshEntities();
};

private handlePointerUp = (): void => {
  this.DOM.refreshEntities();
  this.updateActiveTool();
};

private handleClick = (): void => {
  this.DOM.refreshEntities();
  this.updateActiveTool();
};


private createDrawing(name: DrawingsNames, options: CreateDrawingOptions = {}): Drawing {
  if (!this.mainSeries) {
    throw new Error('[Drawings] main series is not defined');
  }

  const { id, state, isLocked = false, shouldUpdateDrawingsList = true } = options;
  const shouldSelectAfterCreation = state === undefined;

  if (shouldSelectAfterCreation && this.selectedDrawing$.value) {
    this.selectedDrawing$.next(null);
  }

  const config = drawingsMap[name];
  const drawingId = id ?? crypto.randomUUID();

  let createdDrawing: Drawing | null = null;

  const selected$ = this.selectedDrawing$.pipe(
    map((drawing) => drawing?.id === drawingId),
    distinctUntilChanged(),
  );

  const construct = (
    chart: IChartApi,
    series: ISeriesApi<SeriesType>,
    interaction: DrawingInteraction,
  ) => {
    const paneElement = series.getPane().getHTMLElement();

    if (!paneElement) {
      throw new Error('[Drawing Manager]: cannot place drawing, there is no pane');
    }

    const cells = paneElement.querySelectorAll<HTMLTableCellElement>(':scope > td');
    const canvasElement = cells.item(1);

    return config.construct({
      chart,
      series,
      eventManager: this.eventManager,
      container: canvasElement,
      interaction,
      removeSelf: () => this.removeDrawing(drawingId),
      openSettings: () => {
        if (createdDrawing) {
          this.openSettings(createdDrawing);
        }
      },
    });
  };

  const drawingFactory = (
    zIndex: number,
    moveUp: (id: string) => void,
    moveDown: (id: string) => void,
  ) =>
    new Drawing({
      lwcChart: this.lwcChart,
      mainSeries: this.mainSeries as SeriesStrategies,
      id: drawingId,
      drawingName: name,
      name: drawingLabelById()[name],
      onDelete: this.removeDrawing,
      zIndex,
      moveDown,
      moveUp,
      construct,
      selected$,
      isSelected: () => this.selectedDrawing$.value?.id === drawingId,
      select: () => {
        if (
          !createdDrawing ||
          createdDrawing.isCreationPending() ||
          this.selectedDrawing$.value === createdDrawing
        ) {
          return;
        }

        this.selectedDrawing$.next(createdDrawing);
      },
      isLocked,
      paneId: this.paneId,
      hotkeys: this.hotkeys,
      setCopyPasteBuffer: (copyPasteBuffer) => {
        this.copyPasteBuffer = copyPasteBuffer;
      },
      resetActiveTool: () => {
        this.activeTool$.next('crosshair');
      },
    });

  const entity = this.DOM.setEntity<Drawing>(drawingFactory);
  createdDrawing = entity;

  if (state !== undefined) {
    entity.setState(state);
  }

  if (shouldUpdateDrawingsList) {
    this.drawings$.next([...this.drawings$.value, entity]);
  }

  if (shouldSelectAfterCreation) {
    entity.waitForCreation().then(() => {
      if (!this.drawings$.value.includes(entity)) {
        return;
      }

      this.selectedDrawing$.next(entity);
      this.updateActiveTool();
      this.DOM.refreshEntities();
    });
  }

  return entity;
}