Class DragCanvas

src/editor/interactions/drag-canvas.ts:12–203

}

export class DragCanvas extends Interaction implements IInteraction {
  name = 'drag-canvas';

  /**
   * 触发交互的按键代码。
   * 参考标准的 KeyboardEvent.code 值：
   * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
   * @default ['Space']
   */
  public trigger: KeyCode[] = ['Space'];

  constructor(options?: DragCanvasOptions) {
    super();
    if (options?.trigger) {
      this.trigger = options.trigger;
    }
  }

  private isTriggerPressed = false;

  private pointerId?: number;
  private startPoint?: DOMPoint;

  private document!: SVGSVGElement;

  private startViewBoxString?: string;

  private completeInteraction?: () => void;

  // 防止组件快捷键侵入性过强
  private isHovering = false;

  init(options: InteractionInitOptions): void {
    super.init(options);
    this.document = this.editor.getDocument();

    this.document.addEventListener('mouseenter', this.onMouseEnter);
    this.document.addEventListener('mouseleave', this.onMouseLeave);
    window.addEventListener('keydown', this.handleKeyDown);
    window.addEventListener('blur', this.handleBlur);
  }

  destroy(): void {
    window.removeEventListener('keydown', this.handleKeyDown);
    window.removeEventListener('keyup', this.handleKeyUp);

    this.document.removeEventListener('pointerdown', this.handlePointerDown);
    window.removeEventListener('pointermove', this.handlePointerMove);
    window.removeEventListener('pointerup', this.handlePointerUp);
    window.removeEventListener('pointercancel', this.handlePointerUp);

    window.removeEventListener('blur', this.handleBlur);
    this.document.removeEventListener('mouseenter', this.onMouseEnter);
    this.document.removeEventListener('mouseleave', this.onMouseLeave);
  }

  private handleKeyDown = (event: KeyboardEvent) => {
    if (!this.interaction.isActive()) return;