图形编辑器开发：绘制图形工具

// 绘制图形工具类（这里用了抽象类，后面会说为什么）
abstract class DrawGraphTool {
  // 工具被激活
  active() {
    // 通常是设置光标，或是绑定一些事件，比如键盘事件
  }
  // 工具失活
  inactive() {
    // 通常是解绑一些事件
  }
  
  // 鼠标按下
  start() { /* TODO */ }
  // 鼠标拖拽
  drag() { /* TODO */ }
  // 鼠标释放
  end() { /* TODO */ }
}

// 抽象类
abstract class AbstractClass {
  say() {
    if (this.shoudISaySomething()) {
      console.log('前端西瓜哥')
    }
  }
  // 抽象方法（不能用 private，因为子类要重写它）
  protected abstract shoudISaySomething(): boolean
}

class A extends AbstractClass {
  shoudISaySomething() {
    // ...假设这里一堆判断
    return true
  }
}

class AbstractClass {
  say() {
    if (this.shoudISaySomething()) {
      console.log('前端西瓜哥')
    }
  }
  shoudISaySomething() {
    throw new Error('请实现 shoudISaySomething 方法')
  }
}

class A extends AbstractClass {
  shoudISaySomething() {
    // ...假设这里一堆逻辑
    return true
  }
}

abstract class DrawGraphTool {
  commandDesc = 'Add Graph'; // 历史记录的命令描述
  protected drawingGraph: Graph | null = null; // 被绘制的图形对象
  
  
  start(e: PointerEvent) {
    // 这里将光标的视口坐标转成场景坐标
    this.startPoint = this.editor.getSceneCursorXY(e);
    
    // 重置一些状态
    this.drawingGraph = null;
  }
}

abstract class DrawGraphTool {
  private lastDragPoint!: IPoint;
  
  drag(e: PointerEvent) {
    // 记录终点坐标
    this.lastDragPoint = this.editor.getSceneCursorXY(e);
    this.updateRect();
  }
  
  // 更新矩形选框，并对图形对象进行操作
  private updateRect() {
    const { x, y } = this.lastDragPoint;
    const sceneGraph = this.editor.sceneGraph;
    const { x: startX, y: startY } = this.startPoint;

    const width = x - startX; // 这个可能是负数，还没做标准化
    const height = y - startY; // 同上

    const rect = {
      x: startX,
      y: startY,
      width,
      height,
    };

    // 按住shift键，通过算法把矩形变成方形。
    if (this.editor.hostEventManager.isShiftPressing) {
      this.adjustSizeWhenShiftPressing(rect);
    }

    if (this.drawingGraph) {
      // （1）更新图形逻辑
      this.updateGraph(rect);
    } else {
      // （2）创建图形逻辑
      const element = this.createGraph(rect)!;
      sceneGraph.addItems([element]);

      this.drawingGraph = element;
    }
    // 设置选中对象，并渲染
    this.editor.selectedElements.setItems([this.drawingGraph]);
    sceneGraph.render();
  }
}

protected abstract createGraph(rect: IRect, noMove?: boolean): Graph | null;

export class DrawRectTool extends DrawGraphTool implements ITool {
 // ...
  
  // 这里提供实现创建图形对象
  protected createGraph(rect: IRect) {
    rect = normalizeRect(rect);
    return new Rect({
      ...rect,
      fill: [cloneDeep(this.editor.setting.get('firstFill'))],
    });
  }
}

/**
 * 这个是通用逻辑，直接更新 x、y、width、height
 */
protected updateGraph(rect: IRect) {
  // 对矩形标准化
  rect = normalizeRect(rect);

  const drawingShape = this.drawingGraph!;
  drawingShape.x = rect.x;
  drawingShape.y = rect.y;
  drawingShape.width = rect.width;
  drawingShape.height = rect.height;
}

protected adjustSizeWhenShiftPressing(rect: IRect) {
  // pressing Shift to draw a square
  const { width, height } = rect;
  
  const size = Math.max(Math.abs(width), Math.abs(height));
  // Math.sign() 方法可能会返回 0，所以要兜底为 1
  rect.height = (Math.sign(height) || 1) * size;
  rect.width = (Math.sign(width) || 1) * size;
}

end(e: PointerEvent) {
  if (this.drawingGraph) {
    // 记录新的状态
    this.editor.commandManager.pushCommand(
      new AddShapeCommand(this.commandDesc, this.editor, [this.drawingGraph]),
    );
  }
}