Source code of plot #032 back to plot

class CanvasMasker {

  /**
   * Initializes canvas-based masker.
   * @param w Pixel width of modeled area
   * @param h Pixel height of modeled area
   * @param rf Raster factor: Canvas width and height is w * rf and h * rf
   * @param elmHost Host element to append canvas to. If missing, canvas will not be part of DOM.
   * @param id ID of canvas element. Can be omitted.
   */
  constructor(w, h, rf = 5, elmHost, id) {
    this.w = w;
    this.h = h;
    this.rf = rf;
    this.canvasW = w * rf;
    this.elm = document.createElement("canvas");
    this.elm.style.backgroundColor = "black";
    this.elm.width = w * rf;
    this.elm.height = h * rf;
    if (id) this.elm.id = "canvas-calc";
    if (elmHost) elmHost.appendChild(this.elm);
    this.ctx = this.elm.getContext("2d");

    // Full imageData from canvas: created when a snapshot is requested
    this.imgData = null;
  }

  clear() {
    this.imgData = null;
    this.ctx.globalCompositeOperation = "source-over";
    this.ctx.fillStyle = "#000000";
    this.ctx.fillRect(0, 0, this.w * this.rf, this.h * this.rf);
  }

  /**
   * Marks a margin of specified breadth as a blocked area.
   * @param margin Breadth of margin
   */
  blockMargin(margin) {
    this.imgData = null;
    this.ctx.globalCompositeOperation = "source-over";
    this.ctx.fillStyle = "#ff0000";
    this.ctx.fillRect(0, 0, this.elm.width, margin * this.rf);
    this.ctx.fillRect(0, 0, margin * this.rf, this.elm.height);
    this.ctx.fillRect(0, (this.h - margin) * this.rf, this.elm.width, margin * this.rf);
    this.ctx.fillRect((this.w - margin) * this.rf, 0, margin * this.rf, this.elm.height);
  }

  includePoly(vertices) {
    markPoly(this, vertices, false);
  }

  blockPoly(vertices) {
    markPoly(this, vertices, true);
  }

  inlcudeCircle(center, radius) {
    markCircle(this, center, radius, false);
  }

  blockCircle(center, radius) {
    markCircle(this, center, radius, true);
  }

  /**
   * Retrieves and caches full image data. Cache gets invalidated when you next block or include something.
   * Do this when you know you'll be checking a lot of points before drawing again.
   */
  takeSnapshot() {
    this.imgData = this.ctx.getImageData(0, 0, this.elm.width, this.elm.height);
  }

  getMaskedPoly(pts, mustBeMarkedVisible = false) {

    // Result: array of array of points.
    const polys = [];
    let currPts = [];
    let rgb = [0, 0, 0];

    for (const pt of pts) {
      this.getPixel(pt.x, pt.y, rgb);
      let isBlue = rgb[2] > 128;
      let isRed = rgb[0] > 128;
      let visible = (isBlue || !mustBeMarkedVisible) && !isRed;
      if (!visible) addCurrentPoints();
      else currPts.push(pt);
    }
    addCurrentPoints();
    return polys;

    function addCurrentPoints() {
      if (currPts.length == 0) return;
      if (currPts.length >= 2) {
        polys.push(currPts);
      }
      currPts = [];
    }
  }

  getMaskedLine(pt1, pt2, mustBeMarkedVisible = false, segLength = 2) {

    // Build points: short segments of the requested length
    const lineVect = pt2.subtract(pt1);
    const lineLength = lineVect.length;
    const nSegs = Math.max(2, Math.round(lineLength / segLength));
    const segVect = lineVect.divide(nSegs);
    const pts = [];
    for (let i = 0; i <= nSegs; ++i) {
      pts.push(pt1.add(segVect.multiply(i)));
    }

    // Get polylines
    const polys = this.getMaskedPoly(pts, mustBeMarkedVisible);

    const res = [];

    // Simplify: just keep first and last point of each polyline.
    // These are all straight lines.
    polys.forEach(poly => {
      const pta = poly[0];
      const ptb = poly[poly.length - 1];
      res.push([pta, ptb]);
    });
    return res;
  }

  getPixel(x, y, rgb) {

    rgb[0] = rgb[1] = rgb[2] = 0;
    if (x < 0 || y < 0) return;
    if (x >= this.w || y >= this.h) return;
    x = Math.round(x * this.rf);
    y = Math.round(y * this.rf);

    // If we have an image data snapshot of full canvas, query that
    if (this.imgData) {
      let pxOfs = ((y * (this.canvasW * 4)) + (x * 4));
      rgb[0] = this.imgData.data[pxOfs];
      rgb[1] = this.imgData.data[pxOfs + 1];
      rgb[2] = this.imgData.data[pxOfs + 2];
      return;
    }

    // Retrieve image data for a single pixel
    let spid = this.ctx.getImageData(x, y, 1, 1);
    rgb[0] = spid.data[0];
    rgb[1] = spid.data[1];
    rgb[2] = spid.data[2];
  }

}

function markPoly(cm, vertices, blocked) {
  cm.imgData = null;
  if (blocked) cm.ctx.fillStyle = "#ff0000";
  else cm.ctx.fillStyle = "#0000ff";
  cm.ctx.globalCompositeOperation = "lighter";
  cm.ctx.beginPath();
  vertices.forEach((pt, ix) => {
    if (ix == 0) cm.ctx.moveTo(pt.x * cm.rf, pt.y * cm.rf);
    else cm.ctx.lineTo(pt.x * cm.rf, pt.y * cm.rf);
  });
  cm.ctx.fill();
}

function markCircle(cm, center, radius, blocked) {
  cm.imgData = null;
  if (blocked) cm.ctx.fillStyle = "#ff0000";
  else cm.ctx.fillStyle = "#0000ff";
  cm.ctx.globalCompositeOperation = "lighter";
  cm.ctx.beginPath();
  // Arc: Top is -Math.PI/2; false means clockwise
  cm.ctx.arc(center.x * cm.rf, center.y * cm.rf, radius * cm.rf, 0, 2 * Math.PI, false);
  cm.ctx.arc(center.x * cm.rf, center.y * cm.rf, 0, 0, 2 * Math.PI, true);
  cm.ctx.fill();

}

export {CanvasMasker}