Class DragElement

src/editor/interactions/drag-element.ts:44–517

type GuideCandidates = { vertical: number[]; horizontal: number[] };

export class DragElement extends Interaction implements IInteraction {
  name = 'drag-element';

  private pointerId?: number;
  private startPoint?: DOMPoint;
  private startTarget?: Selection[number];
  private selectionForDrag: Selection = [];
  private willReplaceSelection = false;
  private exclusiveStarted = false;
  private dragItems: DragItem[] = [];
  private dragging = false;
  private dragThreshold = 4;
  private completeInteraction?: () => void;
  private guideCandidates?: GuideCandidates;
  private startBounds?: Bounds;
  private guideVertical?: SVGLineElement;
  private guideHorizontal?: SVGLineElement;

  init(options: InteractionInitOptions) {
    super.init(options);
    this.editor.getDocument().addEventListener('pointerdown', this.handleStart);
  }

  destroy() {
    this.detachPointerListeners();
    this.editor
      .getDocument()
      .removeEventListener('pointerdown', this.handleStart);
  }

  private handleStart = (event: PointerEvent) => {
    if (!this.interaction.isActive()) return;
    if (event.pointerType === 'mouse' && event.button !== 0) return;

    const target = getEventTarget(event.target as SVGElement);
    if (!target) return;
    if (isEditingText(target)) return;

    const svg = this.editor.getDocument();
    this.pointerId = event.pointerId;
    this.startPoint = clientToViewport(svg, event.clientX, event.clientY);
    this.dragging = false;
    this.startTarget = target;
    const isSelected = this.interaction.isSelected(target);
    this.selectionForDrag = isSelected
      ? this.interaction.getSelection()
      : [target];
    this.willReplaceSelection = !isSelected;
    this.exclusiveStarted = false;
    this.startBounds = this.getSelectionBounds(this.selectionForDrag);
    this.guideCandidates = this.collectGuideCandidates(this.selectionForDrag);

    window.addEventListener('pointermove', this.handleMove);
    window.addEventListener('pointerup', this.handleEnd);
    window.addEventListener('pointercancel', this.handleEnd);
  };

  private handleMove = (event: PointerEvent) => {