js/elements/RunningLine.js - master - memoryspeak/UlamCodeWeb

js/elements/RunningLine.js
137 строк4 KB
memoryspeak
delete running line close button
17 фев 2026, 23:01
17 фев 2026, 23:0112a6cdb
export default class RunningLine {

  BORDER_RADIUS_CELL_SIZE_RATIO = 0.1;
  LINE_WIDTH_CELL_SIZE_RATIO = 0.02;
  BORDER_COLOR = "white";

  FILL_COLOR = "rgba(60, 60, 60, 0.9)";

  LABEL_HEIGHT_CELL_SIZE_RATIO = 1;
  LABEL_LEFT_CELL_SIZE_RATIO = 0.25;
  LABEL_UP_CELL_SIZE_RATIO = 0.25;

  SPEED = 60;
  TEXT_LEFT_CELL_SIZE_RATIO = 1.75;
  TEXT_RIGHT_CELL_SIZE_RATIO = 0.5;
  TEXT_COLOR = "white";
  TEXT_CELL_SIZE_RATIO = 0.27;

  constructor(app) {
    this.app = app;
    this.clear();
  }

  clear() {
    this.isRunning = false;
    this.image = null;
    this.text = null;
    this.x = this.app.layer.w - this.TEXT_RIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize;
  }

  update(correction) {
    if (!this.isRunning) return;
    if (!this.image) return;
    if (!this.text) return;
    this.x -= this.SPEED * correction;
    this.app.layer.context.font = `bold ${this.app.layer.cellSize * this.TEXT_CELL_SIZE_RATIO}px monospace`;
    const textWidth = this.app.layer.context.measureText(this.text || "").width;
    if (this.x + textWidth < this.TEXT_LEFT_CELL_SIZE_RATIO * this.app.layer.cellSize) this.clear();
  }

  draw() {
    if (!this.isRunning) return;
    if (!this.image) return;
    if (!this.text) return;
    this.drawBasicRect();
    this.drawImage();
    this.drawLongRect();
    this.drawText();
  }

  drawBasicRect() {
    this.app.layer.context.beginPath();
    this.app.layer.context.roundRect(
      this.LABEL_LEFT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.LABEL_UP_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.LABEL_HEIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.LABEL_HEIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.app.layer.cellSize * this.BORDER_RADIUS_CELL_SIZE_RATIO,
    );
    this.app.layer.context.strokeStyle = this.BORDER_COLOR;
    this.app.layer.context.lineWidth =
      this.app.layer.cellSize * this.LINE_WIDTH_CELL_SIZE_RATIO;

    this.app.layer.context.fillStyle = this.FILL_COLOR;
    this.app.layer.context.fill();

    this.app.layer.context.stroke();
  }

  drawImage() {
    const centerX = 0.75 * this.app.layer.cellSize;
    const centerY = 0.75 * this.app.layer.cellSize;
    const imgSize = 0.75 * this.app.layer.cellSize;
    if (this.image?.complete) {
      this.app.layer.context.drawImage(
        this.image,
        centerX - imgSize / 2,
        centerY - imgSize / 2,
        imgSize,
        imgSize,
      );
    }
  }

  drawLongRect() {
    this.app.layer.context.beginPath();
    this.app.layer.context.roundRect(
      (this.LABEL_LEFT_CELL_SIZE_RATIO * 2 + 1) * this.app.layer.cellSize,
      this.LABEL_UP_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.app.layer.w - (this.LABEL_LEFT_CELL_SIZE_RATIO * 3 + 1) * this.app.layer.cellSize,
      this.LABEL_HEIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.app.layer.cellSize * this.BORDER_RADIUS_CELL_SIZE_RATIO,
    );
    this.app.layer.context.strokeStyle = this.BORDER_COLOR;
    this.app.layer.context.lineWidth =
      this.app.layer.cellSize * this.LINE_WIDTH_CELL_SIZE_RATIO;

    this.app.layer.context.fillStyle = this.FILL_COLOR;
    this.app.layer.context.fill();

    this.app.layer.context.stroke();
  }

  drawText() {
    const gradient = this.app.layer.context.createLinearGradient(
      this.TEXT_LEFT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      0,
      this.app.layer.w - this.TEXT_RIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      0
    );
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
    gradient.addColorStop(0.1, 'rgba(255, 255, 255, 1)');
    gradient.addColorStop(0.9, 'rgba(255, 255, 255, 1)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

    this.app.layer.context.save();
    this.app.layer.context.beginPath();
    this.app.layer.context.rect(this.TEXT_LEFT_CELL_SIZE_RATIO * this.app.layer.cellSize, 0, this.app.layer.w - this.TEXT_RIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize, 1.25 * this.app.layer.cellSize);
    this.app.layer.context.clip();
    this.app.layer.context.font = `bold ${this.app.layer.cellSize * this.TEXT_CELL_SIZE_RATIO}px monospace`;
    this.app.layer.context.fillStyle = gradient;
    this.app.layer.context.fillText(this.text || "", this.x, 0.84 * this.app.layer.cellSize);
    this.app.layer.context.restore();
  }

  start(image, text) {
    if (this.isRunning) {
      this.clear();
      return;
    }
    if (!image) return;
    if (!text) return;
    this.image = image;
    this.text = text;
    this.isRunning = true;
  }
}