@jianghh/canvas-graffiti/es/element/group.js

canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。

var a = Object.defineProperty;
var l = (f, t, e) => t in f ? a(f, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : f[t] = e;
var s = (f, t, e) => (l(f, typeof t != "symbol" ? t + "" : t, e), e);
import { SYSTEM_COLOR as d } from "../index2.js";
import { tools as c } from "../tools/index.js";
import { updateCtx as g } from "../utils/index.js";
const r = 20;
class v {
  constructor(t, e) {
    s(this, "left");
    s(this, "top");
    s(this, "right");
    s(this, "bottom");
    s(this, "width");
    s(this, "height");
    s(this, "points");
    s(this, "isSelected", !1);
    s(this, "graffiti");
    // ctx: CanvasRenderingContext2D
    s(this, "graffitiEles");
    s(this, "eventFn");
    s(this, "isCdTime");
    s(this, "offsetX");
    s(this, "offsetY");
    s(this, "lineWidth");
    s(this, "bufferCanvas");
    this.graffiti = t, this.graffitiEles = e, this.lineWidth = t.lineWidth, this.offsetX = 0, this.offsetY = 0, e.forEach((i, o) => {
      o === 0 ? (this.left = i.left, this.right = i.right, this.top = i.top, this.bottom = i.bottom) : (this.left >= i.left && (this.left = i.left), this.right <= i.right && (this.right = i.right), this.top >= i.top && (this.top = i.top), this.bottom <= i.bottom && (this.bottom = i.bottom));
    }), this.width = this.right - this.left, this.height = this.bottom - this.top, this.bindKeyEvent();
  }
  get ctx() {
    var t;
    return (t = this.bufferCanvas) == null ? void 0 : t.getContext("2d");
  }
  selected() {
    const t = this.graffiti.ctx;
    return t.save(), t.beginPath(), t.strokeStyle = d, t.lineJoin = "round", t.lineWidth = 1, t.setLineDash([10, 5]), t.moveTo(this.left, this.top), t.strokeRect(this.left - 1, this.top - 1, this.width + 2, this.height + 2), t.restore(), this.isSelected = !0, this;
  }
  cancelSelected() {
    this.isSelected = !1, this.graffiti.flush(), this.graffiti.drawEles(), this.graffiti.eleGroup = null, this.graffitiEles = null;
  }
  moveGroup(t, e) {
    const i = (/* @__PURE__ */ new Date()).getTime();
    this.offsetX += t, this.offsetY += e, !(this.isCdTime + 16 > i) && (this.isCdTime = i, this.left += this.offsetX, this.right += this.offsetX, this.top += this.offsetY, this.bottom += this.offsetY, this.graffitiEles.forEach((o) => {
      o.moveEle(this.offsetX, this.offsetY);
    }), this.graffiti.flush(), this.graffiti.drawEles(), this.selected(), this.offsetX = 0, this.offsetY = 0);
  }
  toDataURL(t = "image/png", e = 0.92) {
    const i = this.graffiti.el, o = this.graffiti.dpr, h = i.cloneNode();
    h.style.position = "absolute", h.style.zIndex += 100, h.style.pointerEvents = "none", h.width = (r * 2 + this.width) * o, h.height = (this.height + r * 2) * o, h.style.width = r * 2 + this.width + "px", h.style.height = this.height + r * 2 + "px", i.appendChild(h), this.bufferCanvas = h, this.ctx.lineCap = "round", this.ctx.lineJoin = "round", this.ctx.imageSmoothingEnabled = !0, this.ctx.scale(o, o), this.drawEleList();
    const n = h.toDataURL(t, e);
    return setTimeout(() => {
      this.bufferCanvas.remove(), this.cancelSelected();
    }, 0), n;
  }
  drawEleList() {
    this.ctx.save(), this.graffitiEles = this.graffitiEles.filter((t) => !t.isDeleted), this.graffitiEles.forEach((t) => {
      var e;
      g(this, t), (e = c[t.tool].drawEle) == null || e.call(
        this,
        t.points.map((i) => ({
          x: i.x - this.left + r,
          y: i.y - this.top + r,
          pressure: i.pressure
        }))
      );
    }), this.ctx.restore();
  }
  moveFinish() {
  }
  deleteGroup() {
    var t, e;
    this.graffitiEles.forEach((i) => {
      i.deleteEle();
    }), document.removeEventListener("keydown", this.eventFn), (e = (t = this.graffiti.customizeHandle) == null ? void 0 : t.onGroupHandle) == null || e.call(this.graffiti, null), this.cancelSelected(), this.graffiti.emitStackChange();
  }
  bindKeyEvent() {
    this.eventFn = (t) => {
      this.isSelected && (t.preventDefault(), (t.key === "Backspace" || t.key === "Delete") && this.deleteGroup());
    }, document.addEventListener("keydown", this.eventFn);
  }
}
export {
  v as EleGroup
};