vue3-scale-ruler/es/hooks/useCanvas.js

import { ref as p, onMounted as g, nextTick as u, onUnmounted as m } from "vue";
class C {
  constructor(i, e, s = !0) {
    this.option = {
      width: 0,
      height: 0,
      scale: 1,
      ratio: window.devicePixelRatio || 1,
      startX: 0,
      startY: 0,
      thick: 20,
      step: 50,
      longLineColor: "red",
      shortLineColor: "#fff",
      fontColor: "#fff"
    }, this.h = !0, this.longLineColor = "red", this.shortLineColor = "#fff", this.fontColor = "#fff", this.step = 50, this.domId = "", this.start = p(0), this.end = p(0), this.h = s, this.domId = e, this.option = Object.assign(this.option, i), this.otherInit(), this.init();
  }
  get canvasRef() {
    return this.mainRef.querySelector("canvas");
  }
  get mainRef() {
    return document.getElementById(this.domId);
  }
  get width() {
    var i;
    return (i = this.mainRect) == null ? void 0 : i.width;
  }
  get height() {
    var i;
    return (i = this.mainRect) == null ? void 0 : i.height;
  }
  get _start() {
    return this.h ? this.option.startX : this.option.startY;
  }
  get _endX() {
    return this.option.startX + (this.width - this.option.thick) / this.option.scale;
  }
  get _endY() {
    return this.option.startY + (this.height - this.option.thick) / this.option.scale;
  }
  get _end() {
    return this.h ? this._endX : this._endY;
  }
  otherInit() {
    var i, e, s;
    this.step = this.option.step || this.step, this.longLineColor = ((i = this.option) == null ? void 0 : i.longLineColor) || "red", this.shortLineColor = ((e = this.option) == null ? void 0 : e.shortLineColor) || "#fff", this.fontColor = ((s = this.option) == null ? void 0 : s.fontColor) || "#fff";
  }
  init() {
    this.onMounted(), this.onUnmounted();
  }
  onMounted() {
    g(() => {
      this.initSceen(), window.addEventListener("resize", this.resize.bind(this));
    });
  }
  resize() {
    u(() => {
      this.initSceen();
    });
  }
  initSceen() {
    var i;
    if (this.mainRef) {
      this.mainRect = (i = this.mainRef) == null ? void 0 : i.getBoundingClientRect();
      const e = ((this.h ? this.width : this.height) - this.option.thick) * this.option.ratio, s = this.option.thick * this.option.ratio;
      this.canvasRef.width = this.h ? e : s, this.canvasRef.height = this.h ? s : e, this.canvasCtx = this.canvasRef.getContext("2d"), this.drawRuler();
    }
  }
  onUnmounted() {
    m(() => {
    });
  }
  getStepByScale() {
    const i = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1e3, 2500, 5e3], e = 50 / this.option.scale;
    for (let s = 0, o = i.length; s < o; s++)
      if (i[s] >= e)
        return i[s];
    return i[0];
  }
  getClosestVal(i, e, s) {
    const o = Math[s](i / e), t = e * o, n = e * (o + 1);
    return i - t <= n - i ? t : n;
  }
  calcDrawParams() {
    this.step = this.getStepByScale(), this.start.value = this._start, this.end.value = this._end;
    const i = this.getClosestVal(this.start.value, this.step, "floor"), e = this.getClosestVal(this.end.value, this.step, "ceil");
    return {
      start: i,
      end: e
    };
  }
  drawRuler() {
    const i = this.calcDrawParams(), e = i.end, s = this.h;
    let o = i.start;
    const t = this.canvasCtx;
    t.clearRect(0, 0, t.canvas.width, t.canvas.height), t.textAlign = "center", t.lineWidth = 1.5;
    let n = this.step / 10;
    for (n < 3 && (n = this.step / 3, n = this.step / n), t.strokeStyle = this.shortLineColor, t.fillStyle = this.fontColor; o <= e; ) {
      const h = (o - this._start) * this.option.scale;
      t.beginPath(), t.save(), t.strokeStyle = this.longLineColor, t.scale(this.option.ratio, this.option.ratio), t.moveTo(s ? h : 0, s ? 0 : h), t.lineTo(s ? h : 10, s ? 10 : h), t.stroke(), t.restore(), t.closePath();
      for (let a = 1; a < 10; a++) {
        const r = h - a * n * this.option.scale;
        t.beginPath(), t.save(), t.scale(this.option.ratio, this.option.ratio), t.moveTo(s ? r : 0, s ? 0 : r), t.lineTo(s ? r : 5, s ? 5 : r), t.stroke(), t.restore(), t.closePath();
      }
      t.save(), t.scale(this.option.ratio, this.option.ratio);
      const f = t.measureText(String(o)).width, c = this.option.thick - 2, d = h + f / 2;
      t.font = "10px Arial", s ? t.fillText(String(o), d, c) : (t.translate(c, d), t.rotate(-Math.PI / 2), t.fillText(String(o), 0, 0)), t.restore(), o += this.step;
    }
  }
  draw(i) {
    this.option = Object.assign(this.option, i), this.otherInit(), this.drawRuler();
  }
}
const w = (l, i, e) => new C(l, i, e);
export {
  w as default
};