@frigate-nvr/image-annotator 1.0.0

package/dist/components/Button.js

@@ -0,0 +1,45 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { c as r } from "../index-sN46tOW-.js";
+import '../assets/Button.css';const s = (n) => {
+  const l = r({
+    btn: !0,
+    "btn-xs": n.xs,
+    "btn-sm": n.sm,
+    "btn-xl": n.xl,
+    "btn-base": !n.xl,
+    "btn-secondary": n.secondary,
+    "btn-primary": !n.secondary,
+    "btn-red": n.red,
+    "btn-green": n.green,
+    "w-full": n.full
+  });
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    /* @__PURE__ */ t("div", { className: l, children: [
+      n.loading && /* @__PURE__ */ t(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "animate-spin h-5 w-5 text-white mr-1",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor" }),
+            /* @__PURE__ */ e(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      ),
+      n.children
+    ] })
+  );
+};
+export {
+  s as Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import \"./Button.css\";\nimport { ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\ninterface IButtonProps {\n  loading?: boolean;\n  xs?: boolean;\n  sm?: boolean;\n  xl?: boolean;\n  secondary?: boolean;\n  red?: boolean;\n  green?: boolean;\n  full?: boolean;\n  children: ReactNode;\n}\n\n/**\n * @component\n * @params props - Component props.\n * @param props.loading - Display loading indicator.\n * @param props.xs - Button in xs size.\n * @param props.sm - Button in sm size.\n * @param props.xl - Button in xl size.\n * @param props.secondary - Indicates if the button is a secondary button.\n * @param props.red - Indicates if the button is a red button.\n * @param props.green - Indicates if the button is a green button.\n * @param props.full - Indicates if the button takes 100% width.\n * @param props.children - Children components.\n */\nconst Button = (props: IButtonProps) => {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n  const btnClass = classNames({\n    btn: true,\n    \"btn-xs\": props.xs,\n    \"btn-sm\": props.sm,\n    \"btn-xl\": props.xl,\n    \"btn-base\": !props.xl,\n    \"btn-secondary\": props.secondary,\n    \"btn-primary\": !props.secondary,\n    \"btn-red\": props.red,\n    \"btn-green\": props.green,\n    \"w-full\": props.full,\n  });\n\n  return (\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    <div className={btnClass}>\n      {props.loading && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"animate-spin h-5 w-5 text-white mr-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" />\n          <path\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          />\n        </svg>\n      )}\n\n      {props.children}\n    </div>\n  );\n};\n\nexport { Button };\n"],"names":["Button","props","btnClass","classNames","jsxs","jsx"],"mappings":";;AA8BM,MAAAA,IAAS,CAACC,MAAwB;AAEtC,QAAMC,IAAWC,EAAW;AAAA,IAC1B,KAAK;AAAA,IACL,UAAUF,EAAM;AAAA,IAChB,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM;AAAA,IAChB,YAAY,CAACA,EAAM;AAAA,IACnB,iBAAiBA,EAAM;AAAA,IACvB,eAAe,CAACA,EAAM;AAAA,IACtB,WAAWA,EAAM;AAAA,IACjB,aAAaA,EAAM;AAAA,IACnB,UAAUA,EAAM;AAAA,EAAA,CACjB;AAED;AAAA;AAAA,IAEE,gBAAAG,EAAC,OAAI,EAAA,WAAWF,GACb,UAAA;AAAA,MAAAD,EAAM,WACL,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAQ;AAAA,UAER,UAAA;AAAA,YAAC,gBAAAC,EAAA,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,eAAe,CAAA;AAAA,YACrD,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,MAGDJ,EAAM;AAAA,IAAA,GACT;AAAA;AAEJ;"}

package/dist/components/Crosshairs.js

@@ -0,0 +1,58 @@
+import { jsxs as g, jsx as c } from "react/jsx-runtime";
+import { useState as l, useRef as b } from "react";
+import { u as y } from "../index.esm-FeyXGhGs.js";
+const p = (e) => {
+  const [s, h] = l(1);
+  y(({ state: r }) => {
+    h(r.scale);
+  });
+  const i = b(null), [o, n] = l({
+    top: 0,
+    left: 0
+  }), d = (r) => {
+    var a;
+    if (e.show) {
+      const t = (a = i.current) == null ? void 0 : a.getBoundingClientRect(), f = (t == null ? void 0 : t.width) ?? 0, m = (t == null ? void 0 : t.height) ?? 0, v = Math.min(f - 3, r.clientX - ((t == null ? void 0 : t.left) ?? 0)) / s, w = Math.min(m - 3, r.clientY - ((t == null ? void 0 : t.top) ?? 0)) / s;
+      n({
+        left: v,
+        top: w
+      });
+    }
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: i,
+      className: `${e.className} grid ${e.show ? "cursor-crosshair" : ""}`,
+      onMouseMove: d,
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "col-start-1 row-start-1 top-0 border-dashed border-black",
+            style: {
+              marginLeft: o.left,
+              visibility: e.show ? "visible" : "hidden",
+              borderLeftWidth: 2 * (1 / s)
+            }
+          }
+        ),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "col-start-1 row-start-1 left-0 border-dashed border-black",
+            style: {
+              marginTop: o.top,
+              visibility: e.show ? "visible" : "hidden",
+              borderTopWidth: 2 * (1 / s)
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  p as Crosshairs
+};
+//# sourceMappingURL=Crosshairs.js.map

package/dist/components/Crosshairs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crosshairs.js","sources":["../../src/components/Crosshairs.tsx"],"sourcesContent":["import { MouseEventHandler, useRef, useState } from \"react\";\nimport { useTransformEffect } from \"react-zoom-pan-pinch\";\n\ninterface CrosshairsState {\n  top: number;\n  left: number;\n}\n\ninterface ICrosshairsProps {\n  className: string;\n  show: boolean;\n}\n\nconst Crosshairs = (props: ICrosshairsProps) => {\n  const [scale, setScale] = useState<number>(1);\n\n  useTransformEffect(({ state }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n    setScale(state.scale);\n  });\n  \n  const ref = useRef<HTMLDivElement>(null);\n\n  const [crosshairs, setCrosshairs] = useState<CrosshairsState>({\n    top: 0,\n    left: 0,\n  });\n\n  const onMouseMove: MouseEventHandler<HTMLImageElement> = (e) => {\n    if (props.show) {\n      const bounds = ref.current?.getBoundingClientRect();\n      const width = bounds?.width ?? 0;\n      const height = bounds?.height ?? 0;\n      const x = Math.min(width-3, e.clientX - (bounds?.left ?? 0))/scale;\n      const y = Math.min(height-3, e.clientY - (bounds?.top ?? 0))/scale;\n      setCrosshairs({\n        left: x,\n        top: y,\n      });\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={`${props.className} grid ${props.show ? \"cursor-crosshair\" : \"\"}`}\n      onMouseMove={onMouseMove}\n    >\n      <div\n        className=\"col-start-1 row-start-1 top-0 border-dashed border-black\"\n        style={{\n          marginLeft: crosshairs.left,\n          visibility: props.show ? \"visible\" : \"hidden\",\n          borderLeftWidth: 2 * (1 / scale),\n        }}\n      ></div>\n      <div\n        className=\"col-start-1 row-start-1 left-0 border-dashed border-black\"\n        style={{\n          marginTop: crosshairs.top,\n          visibility: props.show ? \"visible\" : \"hidden\",\n          borderTopWidth: 2 * (1 / scale),\n        }}\n      ></div>\n    </div>\n  );\n};\n\nexport { Crosshairs };\n"],"names":["Crosshairs","props","scale","setScale","useState","useTransformEffect","state","ref","useRef","crosshairs","setCrosshairs","onMouseMove","e","bounds","_a","width","height","x","y","jsxs","jsx"],"mappings":";;;AAaM,MAAAA,IAAa,CAACC,MAA4B;AAC9C,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,CAAC;AAEzB,EAAAC,EAAA,CAAC,EAAE,OAAAC,QAAY;AAEhC,IAAAH,EAASG,EAAM,KAAK;AAAA,EAAA,CACrB;AAEK,QAAAC,IAAMC,EAAuB,IAAI,GAEjC,CAACC,GAAYC,CAAa,IAAIN,EAA0B;AAAA,IAC5D,KAAK;AAAA,IACL,MAAM;AAAA,EAAA,CACP,GAEKO,IAAmD,CAACC,MAAM;;AAC9D,QAAIX,EAAM,MAAM;AACR,YAAAY,KAASC,IAAAP,EAAI,YAAJ,gBAAAO,EAAa,yBACtBC,KAAQF,KAAA,gBAAAA,EAAQ,UAAS,GACzBG,KAASH,KAAA,gBAAAA,EAAQ,WAAU,GAC3BI,IAAI,KAAK,IAAIF,IAAM,GAAGH,EAAE,YAAWC,KAAA,gBAAAA,EAAQ,SAAQ,EAAE,IAAEX,GACvDgB,IAAI,KAAK,IAAIF,IAAO,GAAGJ,EAAE,YAAWC,KAAA,gBAAAA,EAAQ,QAAO,EAAE,IAAEX;AAC/C,MAAAQ,EAAA;AAAA,QACZ,MAAMO;AAAA,QACN,KAAKC;AAAA,MAAA,CACN;AAAA,IACH;AAAA,EAAA;AAIA,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAW,GAAGN,EAAM,SAAS,SAASA,EAAM,OAAO,qBAAqB,EAAE;AAAA,MAC1E,aAAAU;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAYX,EAAW;AAAA,cACvB,YAAYR,EAAM,OAAO,YAAY;AAAA,cACrC,iBAAiB,KAAK,IAAIC;AAAA,YAC5B;AAAA,UAAA;AAAA,QACD;AAAA,QACD,gBAAAkB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAWX,EAAW;AAAA,cACtB,YAAYR,EAAM,OAAO,YAAY;AAAA,cACrC,gBAAgB,KAAK,IAAIC;AAAA,YAC3B;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/FormElement.js

@@ -0,0 +1,13 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { c as m } from "../index-sN46tOW-.js";
+import '../assets/FormElement.css';const c = (e) => {
+  const t = m("input", e.colSpanSize);
+  return /* @__PURE__ */ s("div", { className: t, children: [
+    e.children,
+    e.helper && /* @__PURE__ */ l("div", { className: "mt-1 text-sm text-gray-500", children: e.helper })
+  ] });
+};
+export {
+  c as FormElement
+};
+//# sourceMappingURL=FormElement.js.map

package/dist/components/FormElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.js","sources":["../../src/components/FormElement.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\n\nimport \"./FormElement.css\";\nimport classNames from \"classnames\";\n\ninterface IFormElementProps {\n  children: ReactNode;\n  colSpanSize?: string;\n  helper?: string;\n}\n\n/**\n * @component\n * @params props - Component props.\n * @param props.children - Children components.\n * @param props.colSpanSize - Tailwind CSS class to control how elements are sized in grid.\n * @param props.helper - Helper message for users on how fill the form element.\n */\nconst FormElement = (props: IFormElementProps) => {\n  const inputClass = classNames(\"input\", props.colSpanSize);\n\n  return (\n    <div className={inputClass}>\n      {props.children}\n\n      {props.helper && (\n        <div className=\"mt-1 text-sm text-gray-500\">{props.helper}</div>\n      )}\n    </div>\n  );\n};\n\nexport { FormElement };\n"],"names":["FormElement","props","inputClass","classNames","jsxs","jsx"],"mappings":";;AAkBM,MAAAA,IAAc,CAACC,MAA6B;AAChD,QAAMC,IAAaC,EAAW,SAASF,EAAM,WAAW;AAGtD,SAAA,gBAAAG,EAAC,OAAI,EAAA,WAAWF,GACb,UAAA;AAAA,IAAMD,EAAA;AAAA,IAENA,EAAM,UACL,gBAAAI,EAAC,SAAI,WAAU,8BAA8B,YAAM,QAAO;AAAA,EAE9D,EAAA,CAAA;AAEJ;"}

package/dist/components/FormElementBox.js

@@ -0,0 +1,18 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { c as s } from "../index-sN46tOW-.js";
+import '../assets/FormElementBox.css';const c = (e) => {
+  const l = s(
+    "form-element-box",
+    "flex",
+    "items-center",
+    e.colSpanSize
+  );
+  return /* @__PURE__ */ m("div", { className: l, children: [
+    e.children,
+    /* @__PURE__ */ t("label", { htmlFor: e.htmlFor, className: "ml-2", children: e.text })
+  ] });
+};
+export {
+  c as FormElementBox
+};
+//# sourceMappingURL=FormElementBox.js.map

package/dist/components/FormElementBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementBox.js","sources":["../../src/components/FormElementBox.tsx"],"sourcesContent":["import \"./FormElementBox.css\";\nimport { ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\ninterface IFormElementBoxProps {\n  htmlFor?: string;\n  text: string;\n  children: ReactNode;\n  colSpanSize?: string;\n}\n\n/**\n * @component\n * @params props - Component props.\n * @param props.htmlFor - for attribute in HTML.\n * @param props.text - Label text.\n * @param props.children - Children components.\n * @param props.colSpanSize - Tailwind CSS class to control how elements are sized in grid.\n */\nconst FormElementBox = (props: IFormElementBoxProps) => {\n  const boxClass = classNames(\n    \"form-element-box\",\n    \"flex\",\n    \"items-center\",\n    props.colSpanSize\n  );\n\n  return (\n    <div className={boxClass}>\n      {props.children}\n\n      <label htmlFor={props.htmlFor} className=\"ml-2\">\n        {props.text}\n      </label>\n    </div>\n  );\n};\n\nexport { FormElementBox };\n"],"names":["FormElementBox","props","boxClass","classNames","jsxs","jsx"],"mappings":";;AAoBM,MAAAA,IAAiB,CAACC,MAAgC;AACtD,QAAMC,IAAWC;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACAF,EAAM;AAAA,EAAA;AAIN,SAAA,gBAAAG,EAAC,OAAI,EAAA,WAAWF,GACb,UAAA;AAAA,IAAMD,EAAA;AAAA,IAEP,gBAAAI,EAAC,WAAM,SAASJ,EAAM,SAAS,WAAU,QACtC,YAAM,KACT,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}