@weing-dev/ui-kit-primitive 0.0.2 → 0.0.4

package/dist/index-BL3MWQXq.js

@@ -0,0 +1,255 @@
+var h = Object.defineProperty;
+var l = (r, e, t) => e in r ? h(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var n = (r, e, t) => l(r, typeof e != "symbol" ? e + "" : e, t);
+import a from "quill";
+const u = 50, c = 50, m = 1e3, f = 1e3;
+class p {
+  constructor(e) {
+    n(this, "quill");
+    n(this, "img", null);
+    n(this, "box", null);
+    n(this, "startPos", { x: 0, y: 0 });
+    n(this, "startSize", {
+      width: 0,
+      height: 0
+    });
+    n(this, "currentHandle", null);
+    n(this, "aspectRatio", 1);
+    n(this, "onClick", (e) => {
+      if (typeof document > "u") return;
+      const t = e.target;
+      t && t.tagName === "IMG" && (e.stopPropagation(), this.img = t, this.showResizeBox());
+    });
+    n(this, "onDocClick", (e) => {
+      typeof document > "u" || this.box && !this.box.contains(e.target) && this.removeBox();
+    });
+    n(this, "initResize", (e) => {
+      if (typeof document > "u" || (e.preventDefault(), !this.img || !this.box)) return;
+      const t = e.target;
+      this.currentHandle = t.dataset.corner || "se", this.startPos = { x: e.clientX, y: e.clientY }, this.startSize = {
+        width: this.img.width,
+        height: this.img.height
+      }, document.addEventListener("mousemove", this.performResize), document.addEventListener("mouseup", this.stopResize);
+    });
+    n(this, "performResize", (e) => {
+      if (typeof document > "u" || !this.img) return;
+      const t = e.clientX - this.startPos.x, s = e.clientY - this.startPos.y;
+      let i = this.startSize.width, o = this.startSize.height;
+      const d = e.shiftKey;
+      switch (this.currentHandle) {
+        case "se":
+          i += t, o += s;
+          break;
+        case "sw":
+          i -= t, o += s;
+          break;
+        case "ne":
+          i += t, o -= s;
+          break;
+        case "nw":
+          i -= t, o -= s;
+          break;
+      }
+      d && (Math.abs(t) > Math.abs(s) ? o = i / this.aspectRatio : i = o * this.aspectRatio), i = Math.max(u, Math.min(m, i)), o = Math.max(c, Math.min(f, o)), this.img.style.width = `${i}px`, this.img.style.height = `${o}px`, this.showResizeBox();
+    });
+    n(this, "stopResize", () => {
+      typeof document > "u" || (document.removeEventListener("mousemove", this.performResize), document.removeEventListener("mouseup", this.stopResize), this.saveToDelta());
+    });
+    n(this, "removeBox", () => {
+      typeof document > "u" || this.box && (this.box.remove(), this.box = null);
+    });
+    this.quill = e, typeof document < "u" && (this.quill.root.addEventListener("click", this.onClick), document.addEventListener("click", this.onDocClick), this.quill.root.addEventListener("scroll", this.removeBox));
+  }
+  showResizeBox() {
+    if (typeof document > "u" || typeof window > "u" || (this.removeBox(), !this.img)) return;
+    const e = this.img.getBoundingClientRect();
+    this.aspectRatio = this.img.naturalWidth / this.img.naturalHeight;
+    const t = document.createElement("div");
+    t.style.position = "absolute", t.style.left = `${e.left + window.scrollX}px`, t.style.top = `${e.top + window.scrollY}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, t.style.border = "2px solid #09f", t.style.zIndex = "1000", t.style.boxSizing = "border-box", ["nw", "ne", "sw", "se"].forEach((s) => {
+      const i = document.createElement("div");
+      i.dataset.corner = s, Object.assign(i.style, {
+        position: "absolute",
+        width: "10px",
+        height: "10px",
+        background: "#09f",
+        borderRadius: "50%",
+        cursor: `${s}-resize`
+      }), s.includes("n") && (i.style.top = "-5px"), s.includes("s") && (i.style.bottom = "-5px"), s.includes("w") && (i.style.left = "-5px"), s.includes("e") && (i.style.right = "-5px"), i.addEventListener("mousedown", this.initResize), t.appendChild(i);
+    }), document.body.appendChild(t), this.box = t;
+  }
+  saveToDelta() {
+    if (typeof document > "u" || !this.img) return;
+    const e = a.find(this.img);
+    if (e && e.parent && e.domNode) {
+      if (e === this.quill) {
+        console.error(
+          "Quill.find returned the Quill instance itself, not a Blot for image",
+          this.img
+        );
+        return;
+      }
+      try {
+        const t = this.quill.getIndex(e);
+        this.quill.deleteText(t, 1), this.quill.insertEmbed(
+          t,
+          "image",
+          this.img.getAttribute("src") || "",
+          "user"
+        );
+        const s = {
+          width: this.img.style.width,
+          height: this.img.style.height
+        };
+        this.quill.formatText(t, 1, s, "user");
+      } catch (t) {
+        console.error("Error processing blot in saveToDelta:", t, e);
+      }
+    } else
+      console.error(
+        "Could not find a valid blot for image (missing parent or domNode)",
+        this.img,
+        e
+      );
+  }
+}
+const g = 50, x = 50, b = 1200, y = 1200;
+class w {
+  constructor(e) {
+    n(this, "quill");
+    n(this, "media", null);
+    n(this, "box", null);
+    n(this, "startPos", { x: 0, y: 0 });
+    n(this, "startSize", { width: 0, height: 0 });
+    n(this, "currentHandle", null);
+    n(this, "aspectRatio", 1);
+    n(this, "initResize", (e) => {
+      if (typeof document > "u" || (e.preventDefault(), !this.media || !this.box)) return;
+      const t = e.target;
+      this.currentHandle = t.dataset.corner || "se", this.startPos = { x: e.clientX, y: e.clientY }, this.startSize = {
+        width: this.media.clientWidth,
+        height: this.media.clientHeight
+      }, document.addEventListener("mousemove", this.performResize), document.addEventListener("mouseup", this.stopResize);
+    });
+    n(this, "performResize", (e) => {
+      if (typeof document > "u" || !this.media) return;
+      const t = e.clientX - this.startPos.x, s = e.clientY - this.startPos.y;
+      let i = this.startSize.width, o = this.startSize.height;
+      const d = e.shiftKey;
+      switch (this.currentHandle) {
+        case "se":
+          i += t, o += s;
+          break;
+        case "sw":
+          i -= t, o += s;
+          break;
+        case "ne":
+          i += t, o -= s;
+          break;
+        case "nw":
+          i -= t, o -= s;
+          break;
+      }
+      d && (Math.abs(t) > Math.abs(s) ? o = i / this.aspectRatio : i = o * this.aspectRatio), i = Math.max(g, Math.min(b, i)), o = Math.max(x, Math.min(y, o)), this.media.style.width = `${i}px`, this.media.style.height = `${o}px`, this.showResizeBox();
+    });
+    n(this, "stopResize", () => {
+      typeof document > "u" || (document.removeEventListener("mousemove", this.performResize), document.removeEventListener("mouseup", this.stopResize), this.saveToDelta());
+    });
+    n(this, "removeBox", () => {
+      typeof document > "u" || this.box && (this.box.remove(), this.box = null);
+    });
+    this.quill = e, typeof document < "u" && this.observeHover();
+  }
+  getMedia(e) {
+    return ["IMG", "VIDEO", "IFRAME"].includes(e.tagName) ? e : null;
+  }
+  observeHover() {
+    const e = this.quill.root;
+    e.addEventListener("mouseover", (t) => {
+      if (typeof document > "u") return;
+      const s = t.target, i = this.getMedia(s);
+      i && (this.media = i, this.showResizeBox());
+    }), e.addEventListener("mouseout", (t) => {
+      this.box && t.relatedTarget && this.box.contains(t.relatedTarget) || this.removeBox();
+    });
+  }
+  showResizeBox() {
+    if (this.removeBox(), !this.media || typeof document > "u" || typeof window > "u")
+      return;
+    const e = this.media.getBoundingClientRect();
+    this.aspectRatio = e.width / e.height;
+    const t = document.createElement("div");
+    Object.assign(t.style, {
+      position: "absolute",
+      left: `${e.left + window.scrollX}px`,
+      top: `${e.top + window.scrollY}px`,
+      width: `${e.width}px`,
+      height: `${e.height}px`,
+      border: "2px solid #09f",
+      zIndex: "1000",
+      boxSizing: "border-box",
+      pointerEvents: "none"
+    });
+    const s = document.createElement("div");
+    Object.assign(s.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      background: "transparent",
+      zIndex: "1001",
+      pointerEvents: "none"
+    }), s.addEventListener("mousedown", (i) => i.stopPropagation()), t.appendChild(s), ["nw", "ne", "sw", "se"].forEach((i) => {
+      const o = document.createElement("div");
+      o.dataset.corner = i, Object.assign(o.style, {
+        position: "absolute",
+        width: "12px",
+        height: "12px",
+        background: "#09f",
+        borderRadius: "50%",
+        cursor: `${i}-resize`,
+        zIndex: "1002",
+        pointerEvents: "auto"
+      }), i.includes("n") && (o.style.top = "-6px"), i.includes("s") && (o.style.bottom = "-6px"), i.includes("w") && (o.style.left = "-6px"), i.includes("e") && (o.style.right = "-6px"), o.addEventListener("mousedown", this.initResize), t.appendChild(o);
+    }), document.body.appendChild(t), this.box = t;
+  }
+  saveToDelta() {
+    if (typeof document > "u" || !this.media) return;
+    const e = a.find(this.media);
+    if (e && e.parent && e.domNode) {
+      if (e === this.quill) {
+        console.error(
+          "Quill.find returned the Quill instance itself, not a Blot for media",
+          this.media
+        );
+        return;
+      }
+      try {
+        const t = this.quill.getIndex(e), s = this.media.getAttribute("src") || "", i = this.media.tagName.toLowerCase();
+        this.quill.deleteText(t, 1), i === "img" ? this.quill.insertEmbed(t, "image", s, "user") : (i === "video" || i === "iframe") && this.quill.insertEmbed(t, "video", s, "user"), this.quill.formatText(
+          t,
+          1,
+          {
+            width: this.media.style.width,
+            height: this.media.style.height
+          },
+          "user"
+        );
+      } catch (t) {
+        console.error("Error processing blot in saveToDelta:", t, e);
+      }
+    } else
+      console.error(
+        "Could not find a valid blot for media (missing parent or domNode)",
+        this.media,
+        e
+      );
+  }
+}
+const R = {
+  ImageResize: p,
+  MediaResize: w
+};
+export {
+  R as default
+};