---

static createPaneContainers() {
  const legendContainer = document.createElement('div');
  legendContainer.style.width = '80%';
  legendContainer.style.position = 'absolute';
  legendContainer.style.top = '0';
  legendContainer.style.left = '0';
  legendContainer.style.zIndex = ZIndex.Base;
  legendContainer.style.pointerEvents = 'none';

  const paneOverlayContainer = document.createElement('div');
  paneOverlayContainer.className = 'moex-chart-pane-overlay-container';
  paneOverlayContainer.style.position = 'absolute';
  paneOverlayContainer.style.inset = '0';
  paneOverlayContainer.style.zIndex = ZIndex.Base;
  paneOverlayContainer.style.pointerEvents = 'none';

  const drawingToolbarContainer = document.createElement('div');
  drawingToolbarContainer.className =
    'moex-chart-drawing-toolbar-container';
  drawingToolbarContainer.style.position = 'absolute';
  drawingToolbarContainer.style.inset = '0';
  drawingToolbarContainer.style.zIndex = ZIndex.Floating;
  drawingToolbarContainer.style.pointerEvents = 'none';
  drawingToolbarContainer.style.overflow = 'hidden';

  return {
    legendContainer,
    paneOverlayContainer,
    drawingToolbarContainer,
  };
}




private drawingToolbarContainer!: HTMLElement;
private drawingToolbarRenderer!: UIRenderer;

this.drawingToolbarRenderer = new ReactRenderer(
  this.drawingToolbarContainer,
);

this.drawingToolbarRenderer.renderComponent(
  <FloatingDrawingToolbar
    selectedDrawing$={this.drawingsManager.selectedDrawing()}
    onOpenSettings={() =>
      this.drawingsManager.openSelectedDrawingSettings()
    }
    onDelete={() => this.drawingsManager.deleteSelectedDrawing()}
  />,
);