@alegendstale/holly-components/dist/components/canvas/canvas-base.js

Reusable UI components created using lit

import v from "../../utils/colorsea-wrapper.js";
import { css as m, LitElement as x, html as f } from "lit";
import { query as u, customElement as d } from "lit/decorators.js";
import { HCMoveEvent as g } from "../../events/move.js";
import { HCSelectHexEvent as y } from "../../events/select-hex.js";
var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (e, a, n, s) => {
  for (var t = s > 1 ? void 0 : s ? _(a, n) : a, r = e.length - 1, o; r >= 0; r--)
    (o = e[r]) && (t = (s ? o(a, n, t) : o(t)) || t);
  return s && t && C(a, n, t), t;
};
let c = class extends x {
  firstUpdated(e) {
    this.context = this.canvas.getContext("2d", { willReadFrequently: !0, alpha: !0 });
  }
  render() {
    return f`
			<canvas
				@click=${(e) => this.dispatchEvent(new y({ hex: this.getCanvasHex(e.clientX, e.clientY) }))}
				@pointermove=${(e) => {
      e.isPrimary && this.dispatchEvent(new g({ x: e.clientX, y: e.clientY }));
    }}
			>
			</canvas>
		`;
  }
  /** Retrieves the hex from the mouse position. */
  getCanvasHex(e, a) {
    const n = this.canvas.getBoundingClientRect();
    let s = e - n.left, t = a - n.top, [r, o, i, h] = this.context.getImageData(s, t, 1, 1).data;
    const l = Math.round(h / 255 * 100);
    return l !== 255 ? v([r, o, i, l]).hex() : v([r, o, i]).hex();
  }
};
c.styles = [
  m`
			:host {
				display: block;
			}
		`
];
p([
  u("canvas")
], c.prototype, "canvas", 2);
c = p([
  d("canvas-base")
], c);
export {
  c as CanvasBase
};