tools/visual_debugger/frame.js

// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Enum class to identify horizontal or vertical flips
//
class FlipEnum {
  static HorizontalFlip = new FlipEnum(1);
  static VerticalFlip = new FlipEnum(2);

  constructor(id) {
    this.id = id;
  }
}
// Circular buffer to store the past X amount of frames.
//
class CircularBuffer {
  constructor(size) {
    this.instances = Array(size);
    this.maxSize = size;
    this.numFrames = 0;
  }

  get(index) {
    if (index < 0 || index < this.numFrames - this.maxSize ||
        index >= this.numFrames) {
      return undefined;
    }
    return this.instances[index % this.maxSize];
  }

  push(frame) {
    // Push frames into buffer
    this.instances[this.numFrames % this.maxSize] = frame;
    this.numFrames++;
  }

  oldestIndex() {
    if (this.numFrames <= this.maxSize) {
      return 0;
    } else {
      return this.numFrames - this.maxSize;
    }
  }

  newestIndex() {
    return this.numFrames -  1;
  }
}

// Represents a single frame, and contains all associated data.
//
class DrawFrame {
  // Circular buffer supports 1 minute of frames.
  static maxBufferNumFrames = 60*60;
  static frameBuffer = new CircularBuffer(DrawFrame.maxBufferNumFrames);
  static buffer_map = new Object();
  static demo_thread = {
    thread_name: "demo thread",
    thread_id: -1,
  };
  static count() { return DrawFrame.frameBuffer.instances.length; }

  static get(index) {
    return DrawFrame.frameBuffer.get(index);
  }

  constructor(json) {
    this.num_ = parseInt(json.frame);
    this.size_ = {
      width: parseInt(json.windowx),
      height: parseInt(json.windowy),
    };
    this.logs_ = json.logs;
    this.drawCalls_ = json.drawcalls.map(c => new DrawCall(c));
    this.buffer_map = json.buff_map;
    this.resetFilter();

    this.threadMapping_ = {}

    if (!('threads' in json)) {
      json.threads = [DrawFrame.demo_thread];
    }
    json.threads.forEach(t => {
      // If new thread has not been registered yet, then register it.
      if (!(Thread.isThreadRegistered(t.thread_name))) {
        new Thread(t);
      };
      // Map thread id's to all the thread information.
      // Values are set by default when frame first comes in.
      this.threadMapping_[t.thread_id] = {threadName: t.thread_name,
                                           threadEnabled: true,
                                           overrideFilters: false,
                                           threadColor: "#000000",
                                           threadAlpha: "10"};
    });

    if (json.new_sources) {
      for (const s of json.new_sources) {
        new Source(s);
        notifyUiOfNewSource(s);
      }
    }

    for (let buff in this.buffer_map) {
      // |buffer_map| contains data URIs, which we |fetch| to get a |Blob| to
      // create an |ImageBitmap| with.
      fetch(this.buffer_map[buff])
        .then((res) => res.blob())
        .then((blob) => createImageBitmap(blob))
        .then((res) => {
          DrawFrame.buffer_map[buff] = res;
          return res;
        });
    }

    // Retain the original JSON, so that the file can be saved to local disk.
    // Ideally, the JSON would be constructed on demand, but generating
    // |new_sources| requires some work. So for now, do the easy thing.
    this.json_ = json;

    DrawFrame.frameBuffer.push(this);
  }

  submissionCount() {
    return this.drawCalls_.length + this.logs_.length;
  }

  updateCanvasSize(canvas, context, scale, orientationDeg, fcTransX, fcTransY) {
    // Swap canvas width/height for 90 or 270 deg rotations
    if (orientationDeg === 90 || orientationDeg === 270) {
      canvas.width = this.size_.height * scale;
      canvas.height = this.size_.width * scale;
    }
    // Restore original canvas width/height for 0 or 180 deg rotations
    else {
      canvas.width = this.size_.width * scale;
      canvas.height = this.size_.height * scale;
    }
    // Some text can be drawn past the canvas boundaries, so add some padding on
    // each side.
    const padding = 20;
    canvas.width += padding * 2;
    canvas.height += padding * 2;

    // Fill the actual frame bounds to an opaque color.
    context.save();
    context.fillStyle = "white";
    context.fillRect(
      fcTransX+padding, // Translate to account for freecam.
      fcTransY+padding, // Translate to account for freecam.
      canvas.width - padding * 2,
      canvas.height - padding * 2
    );
    context.restore();
  }

  getFilter(source_index) {
    const filters = Filter.enabledInstances();
    let filter = undefined;
    // TODO: multiple filters can match the same draw call. For now, let's just
    // pick the earliest filter that matches, and let it decide what to do.
    for (const f of filters) {
      if (f.matches(Source.instances[source_index])) {
        filter = f;
        break;
      }
    }

    // No filters match this draw. So skip.
    if (!filter) return undefined;
    if (!filter.shouldDraw) return undefined;

    return filter;
  }

  draw(canvas, context, scale, orientationDeg, fcTransX, fcTransY) {
    // Look at global state of all threads and copy those states
    // to the current frame's threadID-to-state mapping.
    for (const threadId of Object.keys(this.threadMapping_)) {
      const mappedThread = this.threadMapping_[threadId];
      mappedThread.threadEnabled =
              Thread.getThread(mappedThread.threadName).enabled_;
      mappedThread.threadColor =
              Thread.getThread(mappedThread.threadName).drawColor_;
      mappedThread.threadAlpha =
              Thread.getThread(mappedThread.threadName).fillAlpha_;
      mappedThread.overrideFilters =
              Thread.getThread(mappedThread.threadName).overrideFilters_;
    }

    // Translate accordingly for freecam zoom based on mouse pos.
    // Translation values initlaized to 0 when not in freecam mode.
    context.translate(fcTransX, fcTransY);

    // Generate a transform from frame space to canvas space.
    context.translate(canvas.width / 2, canvas.height / 2);
    if (orientationDeg === FlipEnum.HorizontalFlip.id) {
      context.scale(-1, 1);
    } else if (orientationDeg === FlipEnum.VerticalFlip.id) {
      context.scale(1, -1);
    } else {
      context.rotate(orientationDeg * Math.PI / 180);
    }
    context.scale(scale, scale);
    context.translate(-this.size_.width / 2, -this.size_.height / 2);

    for (const call of this.drawCalls_) {
      // Assumed to be a positional text call.
      if (call.text) {
        continue;
      }
      if (!this.withinFilter(call.drawIndex_)) {
        continue;
      }

      // If thread not enabled, then skip draw call from this thread.
      if (!this.threadMapping_[call.threadId_].threadEnabled) {
        continue;
      }

      call.draw(context, DrawFrame.buffer_map,
                this.threadMapping_[call.threadId_]);
    }

    // Get the current transform so that we can draw text in the right position
    // without rotating or reflecting it.
    const transformMatrix = context.getTransform();
    context.resetTransform();

    context.font = "16px 'Courier bold', monospace";

    // Draw the frame number
    {
      context.textBaseline = "bottom";
      context.fillStyle = "black";
      var newTextPos = transformMatrix.transformPoint(new DOMPoint(0, 0));
      context.fillText(this.num_, newTextPos.x, newTextPos.y);
    }


    for (const text of this.drawCalls_) {
      // Not a positional text call.
      if (!text.text) {
        continue;
      }
      // If thread not enabled, then skip text calls from this thread.
      if (!this.threadMapping_[text.threadId_].threadEnabled) {
        continue;
      }
      if (!this.withinFilter(text.drawIndex_)) {
        continue;
      }

      var color;
      // If thread is overriding, take thread color.
      if (this.threadMapping_[text.threadId_].overrideFilters) {
        color = this.threadMapping_[text.threadId_].threadColor;
      }
      // Otherwise, take filter's color.
      else {
        let filter = this.getFilter(text.sourceIndex_);
        if (!filter) continue;

        color = (filter && filter.drawColor) ?
          filter.drawColor : text.color_;
      }
      context.fillStyle = color;
      // TODO: This should also create some DrawText object or something.
      this.drawText(context,
                    text.text,
                    text.pos_.x,
                    text.pos_.y,
                    transformMatrix);
    }
  }

  // Draw text with a transformed position.
  drawText(context, text, posX, posY, transformMatrix) {
    // TODO: Set the text alignment based on the transform.
    var newTextPos = transformMatrix.transformPoint(new DOMPoint(posX, posY));

    // Make the origin of text the top-left, similar to rectangles.
    context.textBaseline = "top";

    // Fill a background rectangle behind the text with the current fill color.
    const measure = context.measureText(text);
    context.fillRect(
      newTextPos.x,
      newTextPos.y,
      measure.width,
      measure.actualBoundingBoxDescent - measure.actualBoundingBoxAscent
    );

    function perceptualBrightness(hexColor) {
      const r = parseInt(hexColor.substr(1, 2), 16) / 255;
      const g = parseInt(hexColor.substr(3, 2), 16) / 255;
      const b = parseInt(hexColor.substr(5, 2), 16) / 255;
      return Math.sqrt(
        0.299 * Math.pow(r, 2) + 0.587 * Math.pow(g, 2) + 0.114 * Math.pow(b, 2)
      );
    }

    // Attempt to make the text contrast better against the background.
    if (perceptualBrightness(context.fillStyle) > 0.65) {
      context.fillStyle = "black";
    } else {
      context.fillStyle = "white";
    }

    context.fillText(text, newTextPos.x, newTextPos.y);
  }

  appendLogs(logContainer) {
    for (const log of this.logs_) {
      if (!this.withinFilter(log.drawindex)) {
        continue;
      }

      if (!('thread_id' in log)) {
        log.thread_id = DrawFrame.demo_thread.thread_id;
      }
      // If thread not enabled, then skip draw call from this thread.
      if (!this.threadMapping_[log.thread_id].threadEnabled) {
        continue;
      }

      var color;
      let filter;
      // If thread is overriding, take thread color.
      if (this.threadMapping_[log.thread_id].overrideFilters) {
        color = this.threadMapping_[log.thread_id].threadColor;
      }
      // Otherwise, take filter's color.
      else {
        filter = this.getFilter(log.source_index);
        if (!filter) continue;

        color = (filter && filter.drawColor) ?
          filter.drawColor : log.option.color;
      }

      var container = document.createElement("span");
      var new_node = document.createTextNode(log.value);
      container.style.color = color;
      container.appendChild(new_node)
      logContainer.appendChild(container);
      logContainer.appendChild(document.createElement('br'));
    }
  }

  resetFilter() {
    this.filter(-1, -1);
  }

  filter(minIndex, maxIndex) {
    this.minIndex_ = minIndex === -1 ? 0 : minIndex;
    this.maxIndex_ = maxIndex === -1 ? this.submissionCount() : maxIndex;
  }

  minIndex() {
    return this.minIndex_;
  }

  maxIndex() {
    return this.maxIndex_;
  }

  // True iff drawIndex is in [minIndex_, maxIndex).
  withinFilter(drawIndex) {
    return drawIndex >= this.minIndex_ && drawIndex < this.maxIndex_;
  }

  toJSON() {
    return this.json_;
  }
}


// Controller for the viewer.
//
class Viewer {
  constructor(canvas, log) {
    this.canvas_ = canvas;
    this.logContainer_ = log;
    this.drawContext_ = this.canvas_.getContext("2d");

    this.currentFrameIndex_ = -1;
    this.viewScale = 1.0;
    this.viewOrientation = 0;
    this.freeCamTranslationX = 0;
    this.freeCamTranslationY = 0;
  }

  updateCurrentFrame() {
    this.redrawCurrentFrame_();
    this.updateLogs_();
  }

  redrawCurrentFrame_() {
    const frame = this.getCurrentFrame();
    if (!frame) return;
    frame.updateCanvasSize(this.canvas_,
                           this.drawContext_,
                           this.viewScale,
                           this.viewOrientation,
                           this.freeCamTranslationX,
                           this.freeCamTranslationY);
    frame.draw(this.canvas_,
               this.drawContext_,
               this.viewScale,
               this.viewOrientation,
               this.freeCamTranslationX,
               this.freeCamTranslationY);
  }

  updateLogs_() {
    this.logContainer_.textContent = '';
    const frame = this.getCurrentFrame();
    if (!frame) return;
    frame.appendLogs(this.logContainer_);
  }

  getCurrentFrame() {
    return DrawFrame.get(this.currentFrameIndex_);
  }

  get currentFrameIndex() { return this.currentFrameIndex_; }

  setViewerScale(scaleAsInt) {
    this.viewScale = scaleAsInt / 100.0;
  }

  setViewerOrientation(orientationAsInt) {
    this.viewOrientation = orientationAsInt;
  }

  setFrame(frameIndex, minIndex = -1, maxIndex = -1) {
    if (DrawFrame.get(frameIndex)) {
      this.currentFrameIndex_ = frameIndex;
      this.getCurrentFrame().filter(minIndex, maxIndex);
      this.updateCurrentFrame();
    }
  }

  resetTranslation() {
    this.freeCamTranslationX = 0;
    this.freeCamTranslationY = 0;
  }

  zoomToMouse(currentMouseX, currentMouseY, delta) {
    const factor = delta < 0 ? 1.05 : 0.95;

    const newScale = this.viewScale * factor;

    // Adjust translation to keep the zoom centered around the mouse.
    const worldMouseX = (currentMouseX - this.freeCamTranslationX) / this.viewScale;
    const worldMouseY = (currentMouseY - this.freeCamTranslationY) / this.viewScale;

    this.freeCamTranslationX -= worldMouseX * (newScale - this.viewScale);
    this.freeCamTranslationY -= worldMouseY * (newScale - this.viewScale);

    this.viewScale = newScale;
    this.updateCurrentFrame();
  }
};

// Controls the player.
//
class Player {
  static instances = [];

  constructor(viewer, updateUi) {
    this.viewer_ = viewer;
    this.paused_ = false;
    this.nextFrameScheduled_ = false;
    this.live_ = true;
    this.updateUi_ = updateUi;

    Player.instances[0] = this;
  }

  play() {
    this.paused_ = false;
    if (this.nextFrameScheduled_) return;

    if (this.viewer_.currentFrameIndex == DrawFrame.frameBuffer.newestIndex()) {
      return;
    }

    if (this.live_) {
      this.drawNewestFrame_();
    } else {
      this.drawNextFrame_();
    }

    this.didDrawNewFrame_();

    this.nextFrameScheduled_ = true;
    requestAnimationFrame(() => {
      this.nextFrameScheduled_ = false;
      if (!this.paused_)
        this.play();
    });
  }

  live() {
    this.live_ = true;
    this.play();
  }

  pause() {
    this.paused_ = true;
    this.live_ = false;
  }

  rewind() {
    this.pause();
    this.drawPreviousFrame_();
    this.didDrawNewFrame_();
  }

  forward() {
    this.pause();
    this.drawNextFrame_();
    this.didDrawNewFrame_();
  }

  // Pauses after drawing at most |drawIndex| number of calls of the
  // |frameIndex|-th frame.
  // Draws all calls if |minIndex| and |maxIndex| are not set.
  freezeFrame(frameIndex, minIndex = -1, maxIndex = -1) {
    this.pause();
    this.viewer_.setFrame(frameIndex, minIndex, maxIndex);
    this.didDrawNewFrame_();
  }

  setViewerScale(scaleAsString) {
    this.viewer_.setViewerScale(parseInt(scaleAsString));
    this.refresh();
  }

  setViewerOrientation(orientationAsString) {
    // Set orientationAsInt as selected orientation degree
    // Horizontal Flip enum or Vertical Flip enum
    const orientationAsInt = parseInt(orientationAsString) >= 0 ?
      parseInt(orientationAsString) :
      (orientationAsString === "Horizontal Flip" ?
          FlipEnum.HorizontalFlip.id : FlipEnum.VerticalFlip.id);

    this.viewer_.setViewerOrientation(orientationAsInt);
    this.refresh();
  }

  refresh() {
    this.viewer_.updateCurrentFrame();
  }

  drawNewestFrame_() {
    let newest = DrawFrame.frameBuffer.newestIndex();
    this.viewer_.setFrame(newest);
  }

  drawNextFrame_() {
    this.viewer_.setFrame(this.viewer_.currentFrameIndex + 1);
  }

  drawPreviousFrame_() {
    this.viewer_.setFrame(this.viewer_.currentFrameIndex - 1);
  }

  didDrawNewFrame_() {
    this.updateUi_(this.viewer_.getCurrentFrame());
  }

  get currentFrameIndex() { return this.viewer_.currentFrameIndex; }

  onNewFrame() {
    let oldest = DrawFrame.frameBuffer.oldestIndex();
    if (this.currentFrameIndex < oldest) {
      this.viewer_.setFrame(oldest, -1, -1);
    }
    this.didDrawNewFrame_();

    // If the player is not paused, and a new frame is received, then make sure
    // the next frame is drawn.
    if (!this.paused_) {
      this.play();
    }
  }

  static get instance() { return Player.instances[0]; }
};