@sandemo/easy-annotator 0.1.0

package/dist/easy-annotator.js

@@ -0,0 +1,709 @@
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import { useRef as I, useCallback as w, useEffect as B, useState as z, useMemo as X } from "react";
+const W = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/webp",
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+], Y = 10 * 1024 * 1024, Z = 5, te = /* @__PURE__ */ new Set(["image/jpeg", "image/jpg", "image/png", "image/webp"]);
+function ne(e) {
+  return te.has(e.toLowerCase());
+}
+function ae(e) {
+  const t = e.type.toLowerCase();
+  if (ne(t)) return "image";
+  if (t === "application/pdf") return "pdf";
+  if (t === "application/msword") return "doc";
+  if (t === "application/vnd.openxmlformats-officedocument.wordprocessingml.document")
+    return "docx";
+  const a = e.name.toLowerCase().split(".").pop() ?? "";
+  return ["jpg", "jpeg", "png", "webp"].includes(a) ? "image" : a === "pdf" ? "pdf" : a === "doc" ? "doc" : a === "docx" ? "docx" : "doc";
+}
+function re(e, t) {
+  if (t.length === 0) return !0;
+  const a = e.type.toLowerCase();
+  if (a && t.some((m) => m.toLowerCase() === a)) return !0;
+  const o = e.name.toLowerCase().split(".").pop() ?? "", r = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+    pdf: "application/pdf",
+    doc: "application/msword",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+  }[o];
+  return r ? t.includes(r) : !1;
+}
+function q(e) {
+  return Math.round(e / (1024 * 1024) * 10) / 10;
+}
+function oe(e) {
+  const t = e.lastIndexOf(".");
+  return t <= 0 ? `${e}-annotated.png` : `${e.slice(0, t)}-annotated.png`;
+}
+const J = {
+  title: "Upload",
+  dropzoneText: "Drag & drop files here, or",
+  dropzoneButton: "browse",
+  annotate: "Annotate",
+  remove: "Remove",
+  upload: "Upload",
+  uploading: "Uploading…",
+  uploaded: "Uploaded",
+  retry: "Retry",
+  cancel: "Cancel",
+  save: "Save",
+  errorFileType: (e) => `File type not allowed: ${e}`,
+  errorFileTooLarge: (e, t) => `File too large: ${e} (max ${t} MB)`,
+  errorFileCount: (e) => `Maximum ${e} files`,
+  errorAnnotationFailed: "Failed to save annotation.",
+  errorUploadFailed: "Upload failed. Please retry.",
+  modalTitle: "Annotate image",
+  loadingAnnotator: "Loading annotator…",
+  filesSelected: (e) => `${e} file${e === 1 ? "" : "s"} selected`
+}, Fe = {
+  title: "Unggah",
+  dropzoneText: "Seret & letakkan file di sini, atau",
+  dropzoneButton: "pilih file",
+  annotate: "Anotasi",
+  remove: "Hapus",
+  upload: "Unggah",
+  uploading: "Mengunggah…",
+  uploaded: "Terunggah",
+  retry: "Coba Lagi",
+  cancel: "Batal",
+  save: "Simpan",
+  errorFileType: (e) => `Tipe file tidak diizinkan: ${e}`,
+  errorFileTooLarge: (e, t) => `File terlalu besar: ${e} (maks ${t} MB)`,
+  errorFileCount: (e) => `Maksimal ${e} file`,
+  errorAnnotationFailed: "Gagal menyimpan anotasi.",
+  errorUploadFailed: "Unggah gagal. Silakan coba lagi.",
+  modalTitle: "Anotasi gambar",
+  loadingAnnotator: "Memuat anotator…",
+  filesSelected: (e) => `${e} file dipilih`
+};
+function ie(e) {
+  return e ? { ...J, ...e } : J;
+}
+function le(e, t) {
+  return { code: "FILE_TYPE_REJECTED", file: e, reason: t };
+}
+function se(e, t) {
+  return { code: "FILE_TOO_LARGE", file: e, maxBytes: t };
+}
+function ce(e) {
+  return { code: "FILE_COUNT_EXCEEDED", maxFiles: e };
+}
+function Q(e) {
+  return { code: "ANNOTATION_FAILED", cause: e };
+}
+function de(e, t) {
+  return { code: "UPLOAD_FAILED", cause: t, file: e };
+}
+function V(...e) {
+  var a;
+  (typeof process < "u" && ((a = process == null ? void 0 : process.env) != null && a.NODE_ENV) ? process.env.NODE_ENV : "development") !== "production" && console.warn("[easy-annotator]", ...e);
+}
+function ue() {
+  return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `ea_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+function pe() {
+  const e = I(/* @__PURE__ */ new Set()), t = w((o) => {
+    const l = URL.createObjectURL(o);
+    return e.current.add(l), l;
+  }, []), a = w((o) => {
+    o && e.current.has(o) && (URL.revokeObjectURL(o), e.current.delete(o));
+  }, []);
+  return B(() => {
+    const o = e.current;
+    return () => {
+      o.forEach((l) => URL.revokeObjectURL(l)), o.clear();
+    };
+  }, []), { create: t, revoke: a };
+}
+function me(e) {
+  const {
+    accept: t = W,
+    maxFileSize: a = Y,
+    maxFiles: o = Z,
+    multiple: l = !0,
+    ownerType: r,
+    ownerId: m,
+    fieldKey: c,
+    uploadHandler: y,
+    onError: b,
+    onUploaded: F,
+    onChange: U
+  } = e, [_, n] = z([]), [T, S] = z(!1), { create: d, revoke: u } = pe(), L = I(U), g = I(b), A = I(F);
+  B(() => {
+    L.current = U, g.current = b, A.current = F;
+  }, [U, b, F]), B(() => {
+    var p;
+    (p = L.current) == null || p.call(L, _);
+  }, [_]);
+  const O = w(
+    (p) => {
+      const h = Array.from(p);
+      n((f) => {
+        var E, M, K;
+        const v = [...f], i = Math.max(0, o - f.length);
+        let N = !1;
+        for (const C of h) {
+          if (!l && v.length >= 1) break;
+          if (v.length >= f.length + i) {
+            N = !0;
+            break;
+          }
+          if (!re(C, t)) {
+            (E = g.current) == null || E.call(g, le(C, `MIME ${C.type || "unknown"}`));
+            continue;
+          }
+          if (C.size > a) {
+            (M = g.current) == null || M.call(g, se(C, a));
+            continue;
+          }
+          const H = ae(C), ee = H === "image" ? d(C) : void 0;
+          v.push({
+            id: ue(),
+            originalFile: C,
+            fileType: H,
+            mimeType: C.type || "application/octet-stream",
+            originalFilename: C.name,
+            previewUrl: ee,
+            status: "idle"
+          });
+        }
+        return (N || h.length > i) && ((K = g.current) == null || K.call(g, ce(o))), v;
+      });
+    },
+    [t, d, a, o, l]
+  ), P = w(
+    (p) => {
+      n((h) => {
+        const f = h.find((v) => v.id === p);
+        return f && (u(f.previewUrl), u(f.annotatedPreviewUrl)), h.filter((v) => v.id !== p);
+      });
+    },
+    [u]
+  ), $ = w(
+    (p, h, f) => {
+      n(
+        (v) => v.map((i) => i.id !== p ? i : (u(i.annotatedPreviewUrl), {
+          ...i,
+          annotatedFile: h,
+          annotationState: f,
+          annotatedPreviewUrl: d(h)
+        }))
+      );
+    },
+    [d, u]
+  ), R = w(
+    (p) => {
+      n(
+        (h) => h.map((f) => {
+          if (f.id !== p) return f;
+          u(f.annotatedPreviewUrl);
+          const { annotatedFile: v, annotationState: i, annotatedPreviewUrl: N, ...E } = f;
+          return { ...E };
+        })
+      );
+    },
+    [u]
+  ), D = w(
+    (p, h, f) => {
+      n(
+        (v) => v.map((i) => i.id === p ? { ...i, status: h, errorMessage: f } : i)
+      );
+    },
+    []
+  ), j = w(
+    (p) => ({
+      ownerType: r,
+      ownerId: m,
+      fieldKey: c,
+      originalFile: p.originalFile,
+      annotatedFile: p.annotatedFile,
+      annotationState: p.annotationState,
+      fileType: p.fileType,
+      mimeType: p.mimeType,
+      originalFilename: p.originalFilename
+    }),
+    [c, m, r]
+  ), x = w(async () => {
+    var f, v;
+    S(!0);
+    const p = await new Promise((i) => {
+      n((N) => {
+        const E = N.filter((M) => M.status === "idle" || M.status === "error");
+        return i(E), N.map(
+          (M) => E.find((K) => K.id === M.id) ? { ...M, status: "uploading", errorMessage: void 0 } : M
+        );
+      });
+    }), h = [];
+    for (const i of p)
+      try {
+        const N = await y(j(i));
+        h.push(N), D(i.id, "done");
+      } catch (N) {
+        const E = N instanceof Error ? N.message : "Upload failed";
+        D(i.id, "error", E), (f = g.current) == null || f.call(g, de(i, N), i);
+      }
+    return S(!1), h.length > 0 && ((v = A.current) == null || v.call(A, h)), h;
+  }, [j, D, y]), G = X(
+    () => ({
+      total: _.length,
+      remainingSlots: Math.max(0, o - _.length),
+      maxFileSizeMb: q(a)
+    }),
+    [_.length, a, o]
+  );
+  return {
+    files: _,
+    isUploading: T,
+    stats: G,
+    addFiles: O,
+    removeFile: P,
+    setAnnotation: $,
+    clearAnnotation: R,
+    uploadAll: x
+  };
+}
+function ge({
+  accept: e,
+  multiple: t,
+  disabled: a = !1,
+  labels: o,
+  onFiles: l
+}) {
+  const r = I(null), [m, c] = z(!1), y = w(() => {
+    var n;
+    a || (n = r.current) == null || n.click();
+  }, [a]), b = w(
+    (n) => {
+      n.target.files && n.target.files.length > 0 && l(n.target.files), n.target.value = "";
+    },
+    [l]
+  ), F = w(
+    (n) => {
+      n.preventDefault(), c(!1), !a && n.dataTransfer.files && n.dataTransfer.files.length > 0 && l(n.dataTransfer.files);
+    },
+    [a, l]
+  ), U = w(
+    (n) => {
+      n.preventDefault(), a || c(!0);
+    },
+    [a]
+  ), _ = w((n) => {
+    n.preventDefault(), c(!1);
+  }, []);
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      className: `ea-dropzone${m ? " ea-dropzone--active" : ""}${a ? " ea-dropzone--disabled" : ""}`,
+      role: "button",
+      tabIndex: a ? -1 : 0,
+      "aria-disabled": a,
+      onClick: y,
+      onKeyDown: (n) => {
+        (n.key === "Enter" || n.key === " ") && (n.preventDefault(), y());
+      },
+      onDrop: F,
+      onDragOver: U,
+      onDragLeave: _,
+      children: [
+        /* @__PURE__ */ k("p", { className: "ea-dropzone__text", children: [
+          o.dropzoneText,
+          " ",
+          /* @__PURE__ */ s("span", { className: "ea-dropzone__button", children: o.dropzoneButton })
+        ] }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: r,
+            type: "file",
+            accept: e.join(","),
+            multiple: t,
+            onChange: b,
+            className: "ea-dropzone__input",
+            disabled: a,
+            "aria-hidden": "true",
+            tabIndex: -1
+          }
+        )
+      ]
+    }
+  );
+}
+function fe(e) {
+  switch (e) {
+    case "pdf":
+      return "PDF";
+    case "doc":
+      return "DOC";
+    case "docx":
+      return "DOCX";
+    default:
+      return "IMG";
+  }
+}
+function he({
+  files: e,
+  labels: t,
+  onAnnotate: a,
+  onRemove: o,
+  disabled: l = !1
+}) {
+  return e.length === 0 ? null : /* @__PURE__ */ s("ul", { className: "ea-list", role: "list", children: e.map((r) => {
+    const m = r.fileType === "image", c = r.annotatedPreviewUrl ?? r.previewUrl;
+    return /* @__PURE__ */ k("li", { className: "ea-list__item", "data-status": r.status, children: [
+      /* @__PURE__ */ s("div", { className: "ea-list__thumb", children: m && c ? /* @__PURE__ */ s("img", { src: c, alt: r.originalFilename }) : /* @__PURE__ */ s("span", { className: "ea-list__icon", children: fe(r.fileType) }) }),
+      /* @__PURE__ */ k("div", { className: "ea-list__meta", children: [
+        /* @__PURE__ */ s("p", { className: "ea-list__name", title: r.originalFilename, children: r.originalFilename }),
+        /* @__PURE__ */ k("p", { className: "ea-list__status", children: [
+          r.status === "uploading" && t.uploading,
+          r.status === "done" && t.uploaded,
+          r.status === "error" && (r.errorMessage ?? t.errorUploadFailed),
+          r.status === "idle" && r.annotatedFile && "✓ annotated"
+        ] })
+      ] }),
+      /* @__PURE__ */ k("div", { className: "ea-list__actions", children: [
+        m && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "ea-btn ea-btn--ghost",
+            onClick: () => a(r.id),
+            disabled: l || r.status === "uploading",
+            children: t.annotate
+          }
+        ),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "ea-btn ea-btn--danger",
+            onClick: () => o(r.id),
+            disabled: l || r.status === "uploading",
+            "aria-label": `${t.remove} ${r.originalFilename}`,
+            children: t.remove
+          }
+        )
+      ] })
+    ] }, r.id);
+  }) });
+}
+function we({
+  src: e,
+  originalFilename: t,
+  initialState: a,
+  labels: o,
+  onReady: l,
+  onError: r
+}) {
+  const m = I(null), c = I(null), y = I(null), b = I(null), [F, U] = z(!0), [_, n] = z(null);
+  return B(() => {
+    let T = !1;
+    async function S() {
+      try {
+        const d = await import("./markerjs3-DI_cywfl.js");
+        if (T) return;
+        const u = c.current, L = m.current;
+        if (!u || !L || (!u.complete || u.naturalWidth === 0) && (await new Promise((A, O) => {
+          u.addEventListener("load", () => A(), { once: !0 }), u.addEventListener("error", () => O(new Error("Image failed to load")), {
+            once: !0
+          });
+        }), T))
+          return;
+        const g = new d.MarkerArea();
+        if (L.appendChild(g), g.targetImage = u, a)
+          try {
+            g.restoreState(a, !1);
+          } catch (A) {
+            V("Failed to restore annotation state:", A);
+          }
+        y.current = g, b.current = d.Renderer, U(!1), l == null || l({
+          save: async () => {
+            const A = y.current, O = b.current, P = c.current;
+            if (!A || !O || !P)
+              throw new Error("Annotator is not ready.");
+            const $ = A.getState(), R = new O();
+            R.targetImage = P;
+            const D = await R.rasterize($);
+            return { file: await ve(
+              D,
+              oe(t)
+            ), state: $ };
+          }
+        });
+      } catch (d) {
+        if (T) return;
+        U(!1), n(o.errorAnnotationFailed), V("Failed to load marker.js:", d), r == null || r(Q(d));
+      }
+    }
+    return S(), () => {
+      var u;
+      T = !0;
+      const d = y.current;
+      d && ((u = m.current) != null && u.contains(d)) && m.current.removeChild(d), y.current = null, b.current = null;
+    };
+  }, [e]), /* @__PURE__ */ k("div", { className: "ea-annotator", children: [
+    /* @__PURE__ */ s("div", { className: "ea-annotator__stage", ref: m, children: /* @__PURE__ */ s(
+      "img",
+      {
+        ref: c,
+        src: e,
+        alt: "",
+        className: "ea-annotator__img",
+        crossOrigin: "anonymous"
+      }
+    ) }),
+    F && /* @__PURE__ */ s("div", { className: "ea-annotator__loading", children: o.loadingAnnotator }),
+    _ && /* @__PURE__ */ s("div", { className: "ea-annotator__error", children: _ })
+  ] });
+}
+async function ve(e, t) {
+  const o = await (await fetch(e)).blob();
+  return new File([o], t, { type: o.type || "image/png" });
+}
+function ye({
+  open: e,
+  src: t,
+  originalFilename: a,
+  initialState: o,
+  labels: l,
+  onSave: r,
+  onCancel: m,
+  onError: c
+}) {
+  const y = I(null), b = I(null), [F, U] = z(!1), _ = w(async () => {
+    if (y.current) {
+      U(!0);
+      try {
+        const { file: n, state: T } = await y.current.save();
+        r(n, T);
+      } catch (n) {
+        c == null || c(n);
+      } finally {
+        U(!1);
+      }
+    }
+  }, [c, r]);
+  return B(() => {
+    var d;
+    if (!e) return;
+    const n = document.activeElement;
+    (d = b.current) == null || d.focus();
+    const T = (u) => {
+      u.key === "Escape" && m();
+    };
+    document.addEventListener("keydown", T);
+    const S = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      var u;
+      document.removeEventListener("keydown", T), document.body.style.overflow = S, (u = n == null ? void 0 : n.focus) == null || u.call(n);
+    };
+  }, [m, e]), !e || !t ? null : /* @__PURE__ */ s(
+    "div",
+    {
+      className: "ea-modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": l.modalTitle,
+      onClick: (n) => {
+        n.target === n.currentTarget && m();
+      },
+      children: /* @__PURE__ */ k("div", { className: "ea-modal__dialog", ref: b, tabIndex: -1, children: [
+        /* @__PURE__ */ k("header", { className: "ea-modal__header", children: [
+          /* @__PURE__ */ s("h2", { className: "ea-modal__title", children: l.modalTitle }),
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: "ea-btn ea-btn--ghost",
+              onClick: m,
+              "aria-label": l.cancel,
+              children: "×"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s("div", { className: "ea-modal__body", children: /* @__PURE__ */ s(
+          we,
+          {
+            src: t,
+            originalFilename: a,
+            initialState: o,
+            labels: l,
+            onReady: (n) => {
+              y.current = n;
+            },
+            onError: c
+          }
+        ) }),
+        /* @__PURE__ */ k("footer", { className: "ea-modal__footer", children: [
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: "ea-btn ea-btn--ghost",
+              onClick: m,
+              disabled: F,
+              children: l.cancel
+            }
+          ),
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: "ea-btn ea-btn--primary",
+              onClick: _,
+              disabled: F,
+              children: F ? l.uploading : l.save
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function Ue(e) {
+  const {
+    title: t,
+    ownerType: a,
+    ownerId: o,
+    fieldKey: l,
+    uploadHandler: r,
+    onUploaded: m,
+    onError: c,
+    onChange: y,
+    accept: b = W,
+    maxFileSize: F = Y,
+    maxFiles: U = Z,
+    multiple: _ = !0,
+    labels: n,
+    className: T,
+    disabled: S = !1
+  } = e, d = X(() => ie(n), [n]), u = t ?? d.title, {
+    files: L,
+    isUploading: g,
+    stats: A,
+    addFiles: O,
+    removeFile: P,
+    setAnnotation: $,
+    uploadAll: R
+  } = me({
+    accept: b,
+    maxFileSize: F,
+    maxFiles: U,
+    multiple: _,
+    ownerType: a,
+    ownerId: o,
+    fieldKey: l,
+    uploadHandler: r,
+    onError: c,
+    onUploaded: m,
+    onChange: y
+  }), [D, j] = z(null), x = X(
+    () => L.find((i) => i.id === D) ?? null,
+    [D, L]
+  ), G = w((i) => {
+    j(i);
+  }, []), p = w(() => {
+    j(null);
+  }, []), h = w(
+    (i, N) => {
+      D && $(D, i, N), j(null);
+    },
+    [D, $]
+  ), f = w(
+    (i) => {
+      c == null || c(Q(i));
+    },
+    [c]
+  ), v = !S && !g && L.some((i) => i.status === "idle" || i.status === "error");
+  return /* @__PURE__ */ k("section", { className: `ea-root${T ? ` ${T}` : ""}`, children: [
+    /* @__PURE__ */ k("header", { className: "ea-header", children: [
+      /* @__PURE__ */ s("h2", { className: "ea-title", children: u }),
+      /* @__PURE__ */ k("p", { className: "ea-subtitle", children: [
+        d.filesSelected(A.total),
+        " · max ",
+        q(F),
+        " MB · up to ",
+        U,
+        " ",
+        "files"
+      ] })
+    ] }),
+    /* @__PURE__ */ s(
+      ge,
+      {
+        accept: b,
+        multiple: _,
+        disabled: S || A.remainingSlots === 0,
+        labels: d,
+        onFiles: O
+      }
+    ),
+    /* @__PURE__ */ s(
+      he,
+      {
+        files: L,
+        labels: d,
+        onAnnotate: G,
+        onRemove: P,
+        disabled: S
+      }
+    ),
+    L.length > 0 && /* @__PURE__ */ s("div", { className: "ea-actions", children: /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        className: "ea-btn ea-btn--primary",
+        onClick: () => {
+          R();
+        },
+        disabled: !v,
+        children: g ? d.uploading : d.upload
+      }
+    ) }),
+    /* @__PURE__ */ s(
+      ye,
+      {
+        open: !!x,
+        src: (x == null ? void 0 : x.previewUrl) ?? null,
+        originalFilename: (x == null ? void 0 : x.originalFilename) ?? "",
+        initialState: x == null ? void 0 : x.annotationState,
+        labels: d,
+        onSave: h,
+        onCancel: p,
+        onError: f
+      }
+    )
+  ] });
+}
+function Te(e) {
+  const t = new FormData();
+  return t.append("owner_type", e.ownerType), t.append("owner_id", String(e.ownerId)), t.append("field_key", e.fieldKey), t.append("original_file", e.originalFile, e.originalFile.name), e.annotatedFile && t.append("annotated_file", e.annotatedFile, e.annotatedFile.name), e.annotationState && t.append("annotation_state", JSON.stringify(e.annotationState)), t.append("file_type", e.fileType), t.append("mime_type", e.mimeType), t.append("original_filename", e.originalFilename), t;
+}
+export {
+  ye as AnnotatorModal,
+  W as DEFAULT_ACCEPT,
+  Z as DEFAULT_MAX_FILES,
+  Y as DEFAULT_MAX_FILE_SIZE,
+  Ue as EasyAnnotatorUpload,
+  he as FilePreviewList,
+  we as ImageAnnotator,
+  ge as UploadDropzone,
+  Te as buildFormDataPayload,
+  q as bytesToMb,
+  ae as classifyFile,
+  J as enLabels,
+  Fe as idLabels,
+  re as isAccepted,
+  ie as mergeLabels,
+  me as useEasyAnnotator,
+  pe as useObjectUrls
+};
+//# sourceMappingURL=easy-annotator.js.map