---

protected handlePointerDown = (event: PointerEvent): void => {
  if (this.hidden || event.button !== 0) {
    return;
  }

  const point = this.getEventPoint(event);

  switch (this.mode) {
    case 'idle':
      event.preventDefault();
      event.stopPropagation();
      this.startDrawing(point);
      return;

    case 'drawing-line':
      event.preventDefault();
      event.stopPropagation();
      this.setEndAnchor(point);

      if (!this.hasValidMainLine()) {
        this.render();
        return;
      }

      this.priceOffset = 0;
      this.mode = 'drawing-channel';
      this.render();
      return;

    case 'drawing-channel':
      event.preventDefault();
      event.stopPropagation();
      this.setPriceOffset(point);

      if (!this.hasValidChannelWidth()) {
        this.render();
        return;
      }

      this.finishDrawing();
      return;

    case 'ready':
      break;

    default:
      return;
  }

  const pointTarget = this.getDrawingHandleAtPoint(point)?.id ?? null;
  const isChannelHit = this.isPointOnChannel(point);
  const isSelected = this.isSelected();

  if (!isSelected && !pointTarget && !isChannelHit) {
    return;
  }

  if (!isSelected) {
    event.preventDefault();
    event.stopPropagation();
    this.select();
    return;
  }

  if (pointTarget || isChannelHit) {
    event.preventDefault();
    event.stopPropagation();
    this.startDragging(pointTarget ?? 'body', point, event.pointerId);
    return;
  }

  this.deselect();
};