BezierInfo-2/docs/js/custom-element/api/base-api.js

/**
 * The base API class, responsible for such things as setting up canvas event
 * handling, method accumulation, custom element binding, etc. etc.
 *
 * Basically if it's not part of the "public" API, it's in this class.
 */
class BaseAPI {
  static get privateMethods() {
    return [
      `constructor`,
      `createHatchPatterns`,
      `addListeners`,
      `getCursorCoords`,
    ]
      .concat(this.superCallers)
      .concat(this.eventHandlers);
  }

  static get superCallers() {
    return [`setup`, `draw`];
  }

  static get eventHandlers() {
    return [`onMouseDown`, `onMouseMove`, `onMouseUp`, `onKeyDown`, `onKeyUp`];
  }

  static get methods() {
    const priv = this.privateMethods;
    const names = Object.getOwnPropertyNames(this.prototype).concat([
      `setSize`,
      `redraw`,
    ]);
    return names.filter((v) => priv.indexOf(v) < 0);
  }

  /**
   *
   */
  constructor(
    uid,
    width = 200,
    height = 200,
    canvasBuildFunction, // Only used during image generation, not used in the browser
    customDataSet //      "                                               "
  ) {
    if (uid) {
      this.element = window[uid];
      delete window[uid];
      this.dataset = this.element.dataset;
    }
    if (canvasBuildFunction) {
      const { canvas, ctx } = canvasBuildFunction(width, height);
      this.canvas = canvas;
      this.ctx = enhanceContext(ctx);
      this.preSized = true;
    } else {
      this.canvas = document.createElement(`canvas`);
    }
    if (!this.dataset) {
      if (customDataSet) {
        this.dataset = customDataSet;
      } else {
        this.dataset = {};
      }
    }
    this.parameters = Object.fromEntries(
      Object.entries(this.dataset)
        .map((pair) => {
          let name = pair[0];
          let v = pair[1];
          if (v === `null` || v === `undefined`) return [];
          if (v === `true`) return [name, true];
          else if (v === `false`) return [name, false];
          else {
            let d = parseFloat(v);
            // Use == to evaluate "is this a string number"
            if (v == d) return [name, d];
          }
          return [name, v];
        })
        .filter((v) => v.length)
    );
    this.addListeners();
    this.setSize(width, height);
    this.currentPoint = false;
    this.setup();
    this.draw();
  }

  /**
   *
   */
  addListeners() {
    const canvas = this.canvas;

    if (this.element) {
      this.element.setGraphic(this);
    }

    this.cursor = {};

    const root = typeof document !== "undefined" ? document : canvas;

    [`touchstart`, `mousedown`].forEach((evtName) =>
      canvas.addEventListener(evtName, (evt) => this.onMouseDown(evt))
    );

    [`touchmove`, `mousemove`].forEach((evtName) =>
      canvas.addEventListener(evtName, (evt) => {
        this.onMouseMove(evt);
        // Force a redraw only if there are movable points,
        // and there is a current point bound, but only if
        // the subclass didn't already call redraw() as part
        // of its own mouseMove handling.
        if (this.movable.length && this.currentPoint && !this.redrawing) {
          this.redraw();
        }
      })
    );

    [`touchend`, `mouseup`].forEach((evtName) =>
      root.addEventListener(evtName, (evt) => this.onMouseUp(evt))
    );

    this.keyboard = {};

    [`keydown`].forEach((evtName) =>
      canvas.addEventListener(evtName, (evt) => this.onKeyDown(evt))
    );

    [`keyup`].forEach((evtName) =>
      canvas.addEventListener(evtName, (evt) => this.onKeyUp(evt))
    );
  }

  stopEvent(evt) {
    if (evt.target === this.canvas) {
      evt.preventDefault();
      evt.stopPropagation();
    }
  }

  /**
   *
   */
  getCursorCoords(evt) {
    const left = evt.target.offsetLeft,
      top = evt.target.offsetTop;

    let x, y;

    if (evt.targetTouches) {
      const touch = evt.targetTouches;
      for (let i = 0; i < touch.length; i++) {
        if (!touch[i] || !touch[i].pageX) continue;
        x = touch[i].pageX - left;
        y = touch[i].pageY - top;
      }
    } else {
      x = evt.pageX - left;
      y = evt.pageY - top;
    }
    this.cursor.x = x;
    this.cursor.y = y;
  }

  /**
   *
   */
  onMouseDown(evt) {
    this.stopEvent(evt);
    this.cursor.down = true;
    this.getCursorCoords(evt);
  }

  /**
   *
   */
  onMouseMove(evt) {
    this.stopEvent(evt);
    this.cursor.move = true;
    this.getCursorCoords(evt);
  }

  /**
   *
   */
  onMouseUp(evt) {
    this.stopEvent(evt);
    this.cursor.down = false;
    this.cursor.move = false;
    this.getCursorCoords(evt);
  }

  /**
   *
   */
  safelyInterceptKey(evt) {
    // We don't want to interfere with the browser, so we're only
    // going to allow unmodified keys, or shift-modified keys,
    // and tab has to always work. For obvious reasons.
    const tab = evt.key !== "Tab";
    const functionKey = evt.key.match(/F\d+/) === null;
    const specificCheck = tab && functionKey;
    if (!evt.altKey && !evt.ctrlKey && !evt.metaKey && specificCheck) {
      this.stopEvent(evt);
    }
  }

  /**
   *
   */
  onKeyDown(evt) {
    this.safelyInterceptKey(evt);
    // FIXME: Known bug: this approach means that "shift + r + !shift + !r" leaves "R" set to true
    this.keyboard[evt.key] = true;
    this.keyboard.currentKey = evt.key;
  }

  /**
   *
   */
  onKeyUp(evt) {
    this.safelyInterceptKey(evt);
    // FIXME: Known bug: this approach means that "shift + r + !shift + !r" leaves "R" set to true
    this.keyboard[evt.key] = false;
    this.keyboard.currentKey = evt.key;
  }

  /**
   * This function is critical in correctly sizing the canvas.
   */
  setSize(w, h) {
    this.width = w || this.width;
    this.height = h || this.height;
    if (!this.preSized) {
      this.canvas.width = this.width;
      this.canvas.style.width = `${this.width}px`;
      this.canvas.height = this.height;
      this.ctx = enhanceContext(this.canvas.getContext(`2d`));
    }
  }

  /**
   * This is the main entry point.
   */
  setup() {
    // console.log(`setup`);
    this.movable = [];
    this.font = {
      size: 10,
      weight: 400,
      family: `arial`,
    };
  }

  /**
   * This is the draw (loop) function.
   */
  draw() {
    // console.log(`draw`);
  }

  /**
   * This is mostly a safety function, to
   * prevent direct calls to draw().. it might
   * disappear.
   */
  redraw() {
    this.redrawing = true;
    this.draw();
    this.redrawing = false;
  }
}

// Ensure there are cacheStyle/restoreStyle functions
// on the Canvas context, so that it's trivial to make
// temporary changes.
function enhanceContext(ctx) {
  const styles = [];
  ctx.cacheStyle = () => {
    let m = ctx.currentTransform || ctx.getTransform();
    let e = {
      strokeStyle: ctx.strokeStyle,
      fillStyle: ctx.fillStyle,
      lineWidth: ctx.lineWidth,
      textAlign: ctx.textAlign,
      transform: [m.a, m.b, m.c, m.d, m.e, m.f],
      font: ctx.font,
      shadowColor: ctx.shadowColor,
      shadowBlur: ctx.shadowColor,
    };
    styles.push(e);
  };
  ctx.restoreStyle = () => {
    const v = styles.pop();
    Object.keys(v).forEach((k) => {
      let val = v[k];
      if (k !== `transform`) ctx[k] = val;
      else ctx.setTransform(val[0], val[1], val[2], val[3], val[4], val[5]);
    });
  };
  return ctx;
}

export { BaseAPI };