fabric-v6-guideline/dist/index.es.js

- Help you easily append guidelines to your canvas for the selected objects. It help you easily aligning to your object with the others. And Auto snap when the object moved to the center line of the canvas

var w = Object.defineProperty;
var m = (p, t, n) => t in p ? w(p, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : p[t] = n;
var L = (p, t, n) => m(p, typeof t != "symbol" ? t + "" : t, n);
import { Line as k } from "fabric";
const g = 180, E = {
  lineColor: "#ff4444",
  lineWidth: 1,
  canvasCenterLine: !0,
  opacity: 1,
  strokeDashArray: [5, 5],
  threshold: 20,
  autoSnap: !1,
  autoSnapThreshold: 10,
  snapLineColor: "#1111ff"
};
class z {
  constructor(t, n) {
    L(this, "canvas");
    L(this, "strokeOption");
    this.canvas = t, this.strokeOption = {
      ...E,
      ...n
    };
  }
  init() {
    this.canvas.on("selection:updated", () => this.clearGuideLine()), this.canvas.on("object:moving", ({ target: t }) => {
      var n;
      (n = this.strokeOption) != null && n.autoSnap && this.snap(t), this.handleObjectMoving(t);
    }), this.canvas.on(
      "object:scaling",
      ({ target: t }) => this.handleObjectMoving(t)
    ), this.canvas.on("mouse:up", () => this.clearGuideLine());
  }
  handleAroundObjectLine(t) {
    var c;
    const n = (c = this.strokeOption) == null ? void 0 : c.threshold, s = t.left, e = t.top, o = t.left + t.width * t.scaleX, r = t.top + t.height * t.scaleY, l = this.canvas.getObjects().filter((i) => !/line/i.test(i.type)), h = (i, a) => Math.abs(i - a) <= n;
    l.forEach((i) => {
      const a = i.top + i.height * i.scaleY, d = i.top < t.top, f = i.left < t.left, v = d ? a : i.top, u = d ? i.top + i.height : i.top - i.height;
      a < e && h(e, a) && this.createAroundLine(
        o,
        a,
        i.left + i.width * i.scaleX,
        a
      ), s > i.left && h(s, i.left) ? this.createAroundLine(i.left, v, i.left, u) : h(i.left, o) && this.createAroundLine(i.left, v, i.left, u), h(e, i.top) ? f ? this.createAroundLine(o, i.top, i.left, i.top) : this.createAroundLine(s, i.top, i.left, i.top) : h(i.top, r) && (f ? this.createAroundLine(o, i.top, i.left, i.top) : this.createAroundLine(s, i.top, i.left, i.top));
    });
  }
  handleObjectMoving(t) {
    var r, l;
    const n = t.left, s = t.top, e = n + t.width * t.scaleX, o = s + t.height * t.scaleY;
    this.clearGuideLine(), this.handleAroundObjectLine(t), Math.abs(n) < this.canvas.width && (this.createVerticalLine(n), this.createVerticalLine(e), t.scaleX > 0.4 && this.createVerticalLine((n + e) / 2), (r = this.strokeOption) != null && r.canvasCenterLine && Math.abs(this.canvas.width / 2 - n) < g && this.createVerticalLine(this.canvas.width / 2)), Math.abs(s) < this.canvas.height && (this.createHorizontalLine(s), this.createHorizontalLine(o), t.scaleY > 0.4 && this.createHorizontalLine((s + o) / 2), (l = this.strokeOption) != null && l.canvasCenterLine && Math.abs(this.canvas.height / 2 - s) < g && this.createHorizontalLine(this.canvas.height / 2));
  }
  createVerticalLine(t) {
    var s, e, o;
    const n = new k([t, 0, t, (s = this.canvas) == null ? void 0 : s.height], {
      id: "vertical-",
      ...this.strokeOption,
      stroke: (e = this.strokeOption) == null ? void 0 : e.lineColor,
      strokeWidth: (o = this.strokeOption) == null ? void 0 : o.lineWidth
    });
    this.canvas.add(n), this.canvas.renderAll();
  }
  snap(t) {
    var A;
    const n = t.width, s = t.height, e = t.left, o = t.top, r = e + n * t.scaleX, l = o + s * t.scaleY, h = this.canvas.height / 2, c = this.canvas.width / 2, i = ((A = this.strokeOption) == null ? void 0 : A.autoSnapThreshold) || 10, a = (C, T) => Math.abs(C - T) <= i;
    (a(h, o) || a(o, h)) && (t.set({
      top: h
    }), t.setCoords(), this.canvas.requestRenderAll());
    const d = a(h, o), f = a(l, h);
    d ? (t.set({
      top: h
    }), t.setCoords(), this.canvas.requestRenderAll()) : f && (t.set({
      top: h - t.height * t.scaleY
    }), t.setCoords(), this.canvas.requestRenderAll());
    const v = a(r, c);
    a(e, c) ? (t.set({
      left: c
    }), t.setCoords(), this.canvas.requestRenderAll()) : v && (t.set({
      left: c - t.width * t.scaleX
    }), t.setCoords(), this.canvas.requestRenderAll());
  }
  createHorizontalLine(t) {
    var s, e;
    if (!this.canvas) return;
    const n = new k([0, t, this.canvas.width, t], {
      id: "horizontal-",
      ...this.strokeOption,
      stroke: (s = this.strokeOption) == null ? void 0 : s.lineColor,
      strokeWidth: (e = this.strokeOption) == null ? void 0 : e.lineWidth
    });
    this.canvas.add(n), this.canvas.renderAll();
  }
  createAroundLine(t, n, s, e) {
    var r, l;
    const o = new k([t, n, s, e], {
      id: "around",
      ...this.strokeOption,
      stroke: (r = this.strokeOption) == null ? void 0 : r.snapLineColor,
      strokeWidth: (l = this.strokeOption) == null ? void 0 : l.lineWidth
    });
    this.canvas.add(o), this.canvas.renderAll();
  }
  clearGuideLine() {
    this.canvas.getObjects("line").filter((n) => {
      const s = n.id;
      return (s == null ? void 0 : s.includes("vertical-")) || (s == null ? void 0 : s.includes("horizontal-")) || (s == null ? void 0 : s.includes("around"));
    }).forEach((n) => this.canvas.remove(n)), this.canvas.renderAll();
  }
}
export {
  z as GuideLine
};