upstream-affine/blocksuite/framework/global/src/gfx/svg-path.ts

interface PathCommand {
  command: string;
  coordinates: number[];
}

/**
 * A utility class for building SVG path strings using command-based API.
 * Supports moveTo, lineTo, curveTo operations and can build complete path strings.
 */
export class SVGPathBuilder {
  private commands: PathCommand[] = [];

  /**
   * Move to a specific point without drawing
   */
  moveTo(x: number, y: number): this {
    this.commands.push({
      command: 'M',
      coordinates: [x, y],
    });
    return this;
  }

  /**
   * Draw a line to a specific point
   */
  lineTo(x: number, y: number): this {
    this.commands.push({
      command: 'L',
      coordinates: [x, y],
    });
    return this;
  }

  /**
   * Draw a cubic Bézier curve
   */
  curveTo(
    cp1x: number,
    cp1y: number,
    cp2x: number,
    cp2y: number,
    x: number,
    y: number
  ): this {
    this.commands.push({
      command: 'C',
      coordinates: [cp1x, cp1y, cp2x, cp2y, x, y],
    });
    return this;
  }

  /**
   * Close the current path
   */
  closePath(): this {
    this.commands.push({
      command: 'Z',
      coordinates: [],
    });
    return this;
  }

  /**
   * Build the complete SVG path string
   */
  build(): string {
    const pathSegments = this.commands.map(cmd => {
      const coords = cmd.coordinates.join(' ');
      return coords ? `${cmd.command} ${coords}` : cmd.command;
    });

    return pathSegments.join(' ');
  }

  /**
   * Clear all commands and reset the builder
   */
  clear(): this {
    this.commands = [];
    return this;
  }
}

/**
 * Create SVG polygon points string for common shapes
 */
export class SVGShapeBuilder {
  /**
   * Generate diamond (rhombus) polygon points
   */
  static diamond(
    width: number,
    height: number,
    strokeWidth: number = 0
  ): string {
    const halfStroke = strokeWidth / 2;
    return [
      `${width / 2},${halfStroke}`,
      `${width - halfStroke},${height / 2}`,
      `${width / 2},${height - halfStroke}`,
      `${halfStroke},${height / 2}`,
    ].join(' ');
  }

  /**
   * Generate triangle polygon points
   */
  static triangle(
    width: number,
    height: number,
    strokeWidth: number = 0
  ): string {
    const halfStroke = strokeWidth / 2;
    return [
      `${width / 2},${halfStroke}`,
      `${width - halfStroke},${height - halfStroke}`,
      `${halfStroke},${height - halfStroke}`,
    ].join(' ');
  }

  /**
   * Generate diamond path using SVGPathBuilder
   */
  static diamondPath(
    width: number,
    height: number,
    strokeWidth: number = 0
  ): string {
    const halfStroke = strokeWidth / 2;
    const pathBuilder = new SVGPathBuilder();

    return pathBuilder
      .moveTo(width / 2, halfStroke)
      .lineTo(width - halfStroke, height / 2)
      .lineTo(width / 2, height - halfStroke)
      .lineTo(halfStroke, height / 2)
      .closePath()
      .build();
  }

  /**
   * Generate triangle path using SVGPathBuilder
   */
  static trianglePath(
    width: number,
    height: number,
    strokeWidth: number = 0
  ): string {
    const halfStroke = strokeWidth / 2;
    const pathBuilder = new SVGPathBuilder();

    return pathBuilder
      .moveTo(width / 2, halfStroke)
      .lineTo(width - halfStroke, height - halfStroke)
      .lineTo(halfStroke, height - halfStroke)
      .closePath()
      .build();
  }
}