---

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

  const point = this.getEventPoint(event);

  if (this.mode === 'idle' || this.mode === 'drawing') {
    event.preventDefault();
    event.stopPropagation();

    if (this.mode === 'idle') {
      this.startDrawing(point);
    } else {
      this.updateDrawing(point);
      this.finishDrawing();
    }

    return;
  }

  if (this.mode !== 'ready') {
    return;
  }

  const pointTarget = this.getDrawingHandleAtPoint(point)?.id ?? null;
  const isNearLine = this.isPointNearLine(point);
  const isDrawingHit = pointTarget !== null || isNearLine;
  const isSelected = this.isSelected();

  if (!isDrawingHit) {
    if (isSelected) {
      this.deselect();
    }

    return;
  }

  event.preventDefault();
  event.stopPropagation();

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

  const dragMode: LineDrawingMode = `dragging-${pointTarget ?? 'body'}`;
  this.startDragging(dragMode, point, event.pointerId);
};