@frigate-nvr/image-annotator 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/BoundingBox.js +268 -201
  2. package/dist/components/BoundingBox.js.map +1 -1
  3. package/dist/components/ImageAnnotator.js +134 -133
  4. package/dist/components/ImageAnnotator.js.map +1 -1
  5. package/package.json +1 -1
package/dist/components/ImageAnnotator.js CHANGED
@@ -1,61 +1,61 @@
1
- import { jsxs as S, Fragment as oe, jsx as i } from "react/jsx-runtime";
2
- import { useRef as v, useEffect as te, useMemo as ce, useState as O, Fragment as ae } from "react";
1
+ import { jsxs as S, Fragment as ce, jsx as i } from "react/jsx-runtime";
2
+ import { useRef as v, useEffect as te, useMemo as oe, useState as O, Fragment as ae } from "react";
3
3
  import { Button as b } from "./Button.js";
4
4
  import { Crosshairs as se } from "./Crosshairs.js";
5
5
  import { InfoDialog as de } from "./InfoDialog.js";
6
6
  import { LabelDialog as ue } from "./LabelDialog.js";
7
- import { VerifyDialog as Z } from "./VerifyDialog.js";
8
- import { BoundingBox as ee, BoundingBoxType as $ } from "./BoundingBox.js";
7
+ import { VerifyDialog as $ } from "./VerifyDialog.js";
8
+ import { BoundingBox as ee, BoundingBoxType as q } from "./BoundingBox.js";
9
9
  import { T as he, a as fe } from "../index.esm-FeyXGhGs.js";
10
10
  function me(a, y, d) {
11
- var f = this, g = v(null), L = v(0), e = v(null), o = v([]), p = v(), B = v(), M = v(a), k = v(!0);
11
+ var m = this, g = v(null), L = v(0), e = v(null), c = v([]), p = v(), B = v(), M = v(a), k = v(!0);
12
12
  M.current = a;
13
- var F = typeof window < "u", T = !y && y !== 0 && F;
13
+ var A = typeof window < "u", z = !y && y !== 0 && A;
14
14
  if (typeof a != "function") throw new TypeError("Expected a function");
15
15
  y = +y || 0;
16
- var X = !!(d = d || {}).leading, j = !("trailing" in d) || !!d.trailing, A = "maxWait" in d, E = "debounceOnServer" in d && !!d.debounceOnServer, W = A ? Math.max(+d.maxWait || 0, y) : null;
16
+ var X = !!(d = d || {}).leading, E = !("trailing" in d) || !!d.trailing, T = "maxWait" in d, j = "debounceOnServer" in d && !!d.debounceOnServer, Y = T ? Math.max(+d.maxWait || 0, y) : null;
17
17
  te(function() {
18
18
  return k.current = !0, function() {
19
19
  k.current = !1;
20
20
  };
21
21
  }, []);
22
- var V = ce(function() {
22
+ var V = oe(function() {
23
23
  var N = function(u) {
24
- var m = o.current, R = p.current;
25
- return o.current = p.current = null, L.current = u, B.current = M.current.apply(R, m);
26
- }, D = function(u, m) {
27
- T && cancelAnimationFrame(e.current), e.current = T ? requestAnimationFrame(u) : setTimeout(u, m);
24
+ var w = c.current, H = p.current;
25
+ return c.current = p.current = null, L.current = u, B.current = M.current.apply(H, w);
26
+ }, D = function(u, w) {
27
+ z && cancelAnimationFrame(e.current), e.current = z ? requestAnimationFrame(u) : setTimeout(u, w);
28
28
  }, _ = function(u) {
29
29
  if (!k.current) return !1;
30
- var m = u - g.current;
31
- return !g.current || m >= y || m < 0 || A && u - L.current >= W;
30
+ var w = u - g.current;
31
+ return !g.current || w >= y || w < 0 || T && u - L.current >= Y;
32
32
  }, U = function(u) {
33
- return e.current = null, j && o.current ? N(u) : (o.current = p.current = null, B.current);
34
- }, z = function u() {
35
- var m = Date.now();
36
- if (_(m)) return U(m);
33
+ return e.current = null, E && c.current ? N(u) : (c.current = p.current = null, B.current);
34
+ }, W = function u() {
35
+ var w = Date.now();
36
+ if (_(w)) return U(w);
37
37
  if (k.current) {
38
- var R = y - (m - g.current), C = A ? Math.min(R, W - (m - L.current)) : R;
38
+ var H = y - (w - g.current), C = T ? Math.min(H, Y - (w - L.current)) : H;
39
39
  D(u, C);
40
40
  }
41
41
  }, P = function() {
42
- if (F || E) {
43
- var u = Date.now(), m = _(u);
44
- if (o.current = [].slice.call(arguments), p.current = f, g.current = u, m) {
45
- if (!e.current && k.current) return L.current = g.current, D(z, y), X ? N(g.current) : B.current;
46
- if (A) return D(z, y), N(g.current);
42
+ if (A || j) {
43
+ var u = Date.now(), w = _(u);
44
+ if (c.current = [].slice.call(arguments), p.current = m, g.current = u, w) {
45
+ if (!e.current && k.current) return L.current = g.current, D(W, y), X ? N(g.current) : B.current;
46
+ if (T) return D(W, y), N(g.current);
47
47
  }
48
- return e.current || D(z, y), B.current;
48
+ return e.current || D(W, y), B.current;
49
49
  }
50
50
  };
51
51
  return P.cancel = function() {
52
- e.current && (T ? cancelAnimationFrame(e.current) : clearTimeout(e.current)), L.current = 0, o.current = g.current = p.current = e.current = null;
52
+ e.current && (z ? cancelAnimationFrame(e.current) : clearTimeout(e.current)), L.current = 0, c.current = g.current = p.current = e.current = null;
53
53
  }, P.isPending = function() {
54
54
  return !!e.current;
55
55
  }, P.flush = function() {
56
56
  return e.current ? U(Date.now()) : B.current;
57
57
  }, P;
58
- }, [X, A, y, W, j, T, F, E]);
58
+ }, [X, T, y, Y, E, z, A, j]);
59
59
  return V;
60
60
  }
61
61
  const Ce = (a) => {
@@ -72,7 +72,7 @@ const Ce = (a) => {
72
72
  { codes: ["Shift", "← ↑ → ↓"], action: "Resize Box" },
73
73
  { codes: ["f"], action: "Toggle Unselected Boxes" },
74
74
  { codes: ["Spacebar"], action: "Verify and Save" }
75
- ], [d, f] = O([]), [g, L] = O([]), [e, o] = O({
75
+ ], [d, m] = O([]), [g, L] = O([]), [e, c] = O({
76
76
  createMode: !1,
77
77
  drawingMode: !1,
78
78
  showBoxes: !0,
@@ -89,28 +89,29 @@ const Ce = (a) => {
89
89
  width: 1,
90
90
  height: 1
91
91
  }), p = v(null), B = v(null), M = v(null), k = () => {
92
- var w, x, H, K;
93
- let t = 4;
94
- const r = ((w = p.current) == null ? void 0 : w.naturalHeight) ?? 0, n = ((x = p.current) == null ? void 0 : x.naturalWidth) ?? 0, c = Math.round(r * t), l = ((H = B.current) == null ? void 0 : H.getBoundingClientRect().height) ?? 0;
95
- c > l - 10 && (t = (l - 10) / r);
96
- const h = Math.round(n * t), s = ((K = B.current) == null ? void 0 : K.getBoundingClientRect().width) ?? 0;
97
- h > s - 10 && (t = (s - 10) / n), o({
92
+ var x, K, R, F;
93
+ const t = ((x = p.current) == null ? void 0 : x.naturalHeight) ?? 1, n = (((K = p.current) == null ? void 0 : K.naturalWidth) ?? 1) / t, o = ((R = B.current) == null ? void 0 : R.clientHeight) ?? 0, l = ((F = B.current) == null ? void 0 : F.clientWidth) ?? 0, h = o - 5, s = l - 5, f = h * n;
94
+ f > s ? c({
98
95
  ...e,
99
- width: Math.round(n * t),
100
- height: Math.round(r * t)
96
+ width: s,
97
+ height: Math.round(s / n)
98
+ }) : c({
99
+ ...e,
100
+ width: f,
101
+ height: Math.round(f / n)
101
102
  });
102
- }, F = me(() => {
103
+ }, A = me(() => {
103
104
  k();
104
105
  }, 200);
105
106
  te(() => {
106
107
  var t, r;
107
- return window.addEventListener("resize", F), (r = (t = B.current) == null ? void 0 : t.parentElement) == null || r.focus(), () => {
108
- window.removeEventListener("resize", F);
108
+ return window.addEventListener("resize", A), (r = (t = B.current) == null ? void 0 : t.parentElement) == null || r.focus(), () => {
109
+ window.removeEventListener("resize", A);
109
110
  };
110
- }, [F]);
111
- const T = (t, r, n) => {
112
- f(
113
- (c) => c.map((l) => l.id === n ? {
111
+ }, [A]);
112
+ const z = (t, r, n) => {
113
+ m(
114
+ (o) => o.map((l) => l.id === n ? {
114
115
  ...l,
115
116
  x: r.x / e.width,
116
117
  y: r.y / e.height,
@@ -119,25 +120,25 @@ const Ce = (a) => {
119
120
  } : l)
120
121
  );
121
122
  }, X = (t, r) => {
122
- f(
123
- (n) => n.map((c) => c.id === r ? {
124
- ...c,
123
+ m(
124
+ (n) => n.map((o) => o.id === r ? {
125
+ ...o,
125
126
  x: t.x / e.width,
126
127
  y: t.y / e.height
127
- } : c)
128
+ } : o)
128
129
  );
129
- }, j = (t) => {
130
+ }, E = (t) => {
130
131
  var r, n;
131
132
  if (e.createMode) {
132
- const c = ((r = M.current) == null ? void 0 : r.instance.transformState.scale) ?? 1, l = (n = p.current) == null ? void 0 : n.getBoundingClientRect(), h = (t.clientX - ((l == null ? void 0 : l.left) ?? 0)) / c / e.width, s = (t.clientY - ((l == null ? void 0 : l.top) ?? 0)) / c / e.height;
133
- o({
133
+ const o = ((r = M.current) == null ? void 0 : r.instance.transformState.scale) ?? 1, l = (n = p.current) == null ? void 0 : n.getBoundingClientRect(), h = (t.clientX - ((l == null ? void 0 : l.left) ?? 0)) / o / e.width, s = (t.clientY - ((l == null ? void 0 : l.top) ?? 0)) / o / e.height;
134
+ c({
134
135
  ...e,
135
136
  drawingMode: !0,
136
137
  drawStartX: h,
137
138
  drawStartY: s,
138
139
  selectedBox: "draft"
139
- }), f((w) => [
140
- ...w,
140
+ }), m((f) => [
141
+ ...f,
141
142
  {
142
143
  id: "draft",
143
144
  x: h,
@@ -147,72 +148,72 @@ const Ce = (a) => {
147
148
  }
148
149
  ]);
149
150
  } else
150
- o({ ...e, selectedBox: void 0 });
151
- }, A = (t) => {
151
+ c({ ...e, selectedBox: void 0 });
152
+ }, T = (t) => {
152
153
  if (e.drawingMode) {
153
154
  const r = Date.now().toString();
154
- o({
155
+ c({
155
156
  ...e,
156
157
  drawingMode: !1,
157
158
  createMode: !1,
158
159
  selectedBox: r
159
- }), f(
160
- (n) => n.reduce((c, l) => {
160
+ }), m(
161
+ (n) => n.reduce((o, l) => {
161
162
  var h, s;
162
163
  if (l.id === "draft") {
163
- const w = ((h = M.current) == null ? void 0 : h.instance.transformState.scale) ?? 1, x = (s = p.current) == null ? void 0 : s.getBoundingClientRect(), H = (t.clientX - ((x == null ? void 0 : x.left) ?? 0)) / w / e.width, K = (t.clientY - ((x == null ? void 0 : x.top) ?? 0)) / w / e.height;
164
+ const f = ((h = M.current) == null ? void 0 : h.instance.transformState.scale) ?? 1, x = (s = p.current) == null ? void 0 : s.getBoundingClientRect(), K = (t.clientX - ((x == null ? void 0 : x.left) ?? 0)) / f / e.width, R = (t.clientY - ((x == null ? void 0 : x.top) ?? 0)) / f / e.height;
164
165
  if (Math.min(
165
- Math.abs(e.drawStartX - H),
166
- Math.abs(e.drawStartY - K)
166
+ Math.abs(e.drawStartX - K),
167
+ Math.abs(e.drawStartY - R)
167
168
  ) > 1e-3) {
168
- let Y = Math.min(e.drawStartX, H), I = Math.min(e.drawStartY, K), J = Math.abs(e.drawStartX - H), Q = Math.abs(e.drawStartY - K);
169
- Y < 0 && (J -= Math.abs(Y), Y = 0), I < 0 && (Q -= Math.abs(I), I = 0), c.push({
169
+ let F = Math.min(e.drawStartX, K), I = Math.min(e.drawStartY, R), J = Math.abs(e.drawStartX - K), Q = Math.abs(e.drawStartY - R);
170
+ F < 0 && (J -= Math.abs(F), F = 0), I < 0 && (Q -= Math.abs(I), I = 0), o.push({
170
171
  ...l,
171
172
  id: r,
172
173
  label: e.selectedLabel,
173
174
  difficult: !1,
174
- x: Y,
175
+ x: F,
175
176
  y: I,
176
- w: Math.min(1 - Y, J),
177
+ w: Math.min(1 - F, J),
177
178
  h: Math.min(1 - I, Q)
178
179
  });
179
180
  }
180
181
  } else
181
- c.push(l);
182
- return c;
182
+ o.push(l);
183
+ return o;
183
184
  }, [])
184
185
  );
185
186
  }
186
- }, E = (t) => {
187
- e.drawingMode && f(
187
+ }, j = (t) => {
188
+ e.drawingMode && m(
188
189
  (r) => r.map((n) => {
189
- var c, l;
190
+ var o, l;
190
191
  if (n.id === "draft") {
191
- const h = ((c = M.current) == null ? void 0 : c.instance.transformState.scale) ?? 1, s = (l = p.current) == null ? void 0 : l.getBoundingClientRect(), w = (t.pageX - ((s == null ? void 0 : s.left) ?? 0)) / h / e.width, x = (t.pageY - ((s == null ? void 0 : s.top) ?? 0)) / h / e.height;
192
+ const h = ((o = M.current) == null ? void 0 : o.instance.transformState.scale) ?? 1, s = (l = p.current) == null ? void 0 : l.getBoundingClientRect(), f = (t.pageX - ((s == null ? void 0 : s.left) ?? 0)) / h / e.width, x = (t.pageY - ((s == null ? void 0 : s.top) ?? 0)) / h / e.height;
192
193
  return {
193
194
  ...n,
194
- x: Math.min(e.drawStartX, w),
195
+ x: Math.min(e.drawStartX, f),
195
196
  y: Math.min(e.drawStartY, x),
196
- w: Math.abs(e.drawStartX - w),
197
+ w: Math.abs(e.drawStartX - f),
197
198
  h: Math.abs(e.drawStartY - x)
198
199
  };
199
200
  }
200
201
  return n;
201
202
  })
202
203
  );
203
- }, W = () => {
204
- o({ ...e, createMode: !e.createMode });
204
+ }, Y = () => {
205
+ c({ ...e, createMode: !e.createMode });
205
206
  }, V = (t) => {
206
207
  const r = d.find((n) => n.id === t);
207
- o({
208
+ c({
208
209
  ...e,
209
210
  selectedBox: t,
210
211
  selectedLabel: (r == null ? void 0 : r.label) ?? e.selectedLabel,
211
212
  difficult: (r == null ? void 0 : r.difficult) ?? e.difficult
212
213
  });
213
214
  }, N = (t, r, n) => {
214
- f(
215
- (c) => c.map((l) => l.id === t ? {
215
+ m(
216
+ (o) => o.map((l) => l.id === t ? {
216
217
  ...l,
217
218
  x: Math.min(
218
219
  1 - l.w,
@@ -225,15 +226,15 @@ const Ce = (a) => {
225
226
  } : l)
226
227
  );
227
228
  }, D = (t, r, n) => {
228
- f(
229
- (c) => c.map((l) => l.id === t ? {
229
+ m(
230
+ (o) => o.map((l) => l.id === t ? {
230
231
  ...l,
231
232
  w: Math.min(1 - l.x, l.w + n / e.width),
232
233
  h: Math.min(1 - l.y, l.h + r / e.height)
233
234
  } : l)
234
235
  );
235
236
  }, _ = (t) => {
236
- f(
237
+ m(
237
238
  (r) => r.map((n) => n.id === t ? {
238
239
  ...n,
239
240
  difficult: !n.difficult
@@ -242,44 +243,44 @@ const Ce = (a) => {
242
243
  }, U = (t, r = !1) => {
243
244
  const n = a.labels.findIndex(
244
245
  (s) => e.selectedLabel === s
245
- ), c = a.labels.length - 1;
246
+ ), o = a.labels.length - 1;
246
247
  let l = 0;
247
- r ? l = n === 0 ? c : n - 1 : l = n === c ? 0 : n + 1;
248
+ r ? l = n === 0 ? o : n - 1 : l = n === o ? 0 : n + 1;
248
249
  const h = a.labels[l];
249
- f(
250
- (s) => s.map((w) => w.id === t ? {
251
- ...w,
250
+ m(
251
+ (s) => s.map((f) => f.id === t ? {
252
+ ...f,
252
253
  label: h
253
- } : w)
254
- ), o({ ...e, selectedLabel: h });
255
- }, z = (t) => {
256
- f((r) => r.filter((n) => n.id !== t));
254
+ } : f)
255
+ ), c({ ...e, selectedLabel: h });
256
+ }, W = (t) => {
257
+ m((r) => r.filter((n) => n.id !== t));
257
258
  }, P = (t) => {
258
259
  L((r) => r.filter((n) => n.id !== t));
259
260
  }, u = (t) => {
260
261
  var r;
261
262
  return (r = g.find((n) => n.id === t)) == null ? void 0 : r.label;
262
- }, m = (t) => d.find((r) => r.id === t), R = (t) => {
263
+ }, w = (t) => d.find((r) => r.id === t), H = (t) => {
263
264
  if (!t)
264
265
  return d[0].id;
265
266
  const r = d.findIndex((n) => n.id === t);
266
267
  return r === d.length - 1 ? d[0].id : d[r + 1].id;
267
268
  }, C = 5 / (((G = M.current) == null ? void 0 : G.instance.transformState.scale) ?? 1), ne = (t) => {
268
- if (t.code === "Escape" && (e.createMode ? o({ ...e, createMode: !1 }) : o({ ...e, selectedBox: void 0 })), t.code === "KeyW" && (e.createMode ? o({ ...e, createMode: !1 }) : o({ ...e, createMode: !0, selectedBox: void 0 })), t.code === "KeyF" && o({ ...e, showBoxes: !e.showBoxes }), t.code === "KeyD" && e.selectedBox && _(e.selectedBox), t.code === "KeyS" && e.selectedBox && U(e.selectedBox, t.shiftKey), t.code === "Delete" && e.selectedBox && (z(e.selectedBox), o({ ...e, selectedBox: void 0 })), t.code === "Tab") {
269
- const r = R(e.selectedBox), n = m(r);
270
- o({
269
+ if (t.code === "Escape" && (e.createMode ? c({ ...e, createMode: !1 }) : c({ ...e, selectedBox: void 0 })), t.code === "KeyW" && (e.createMode ? c({ ...e, createMode: !1 }) : c({ ...e, createMode: !0, selectedBox: void 0 })), t.code === "KeyF" && c({ ...e, showBoxes: !e.showBoxes }), t.code === "KeyD" && e.selectedBox && _(e.selectedBox), t.code === "KeyS" && e.selectedBox && U(e.selectedBox, t.shiftKey), t.code === "Delete" && e.selectedBox && (W(e.selectedBox), c({ ...e, selectedBox: void 0 })), t.code === "Tab") {
270
+ const r = H(e.selectedBox), n = w(r);
271
+ c({
271
272
  ...e,
272
273
  selectedBox: r,
273
274
  selectedLabel: (n == null ? void 0 : n.label) ?? e.selectedLabel
274
275
  }), t.preventDefault();
275
276
  }
276
- t.code === "Space" && a.save(d, g.length === 0, a.labels), t.code === "Slash" && t.shiftKey && o({ ...e, showHelp: !0 }), e.selectedBox && (t.code === "ArrowLeft" && (t.shiftKey ? D(e.selectedBox, 0, -C) : N(e.selectedBox, 0, -C)), t.code === "ArrowRight" && (t.shiftKey ? D(e.selectedBox, 0, C) : N(e.selectedBox, 0, C)), t.code === "ArrowUp" && (t.shiftKey ? D(e.selectedBox, -C, 0) : N(e.selectedBox, -C, 0)), t.code === "ArrowDown" && (t.shiftKey ? D(e.selectedBox, C, 0) : N(e.selectedBox, C, 0)));
277
+ t.code === "Space" && a.save(d, g.length === 0, a.labels), t.code === "Slash" && t.shiftKey && c({ ...e, showHelp: !0 }), e.selectedBox && (t.code === "ArrowLeft" && (t.shiftKey ? D(e.selectedBox, 0, -C) : N(e.selectedBox, 0, -C)), t.code === "ArrowRight" && (t.shiftKey ? D(e.selectedBox, 0, C) : N(e.selectedBox, 0, C)), t.code === "ArrowUp" && (t.shiftKey ? D(e.selectedBox, -C, 0) : N(e.selectedBox, -C, 0)), t.code === "ArrowDown" && (t.shiftKey ? D(e.selectedBox, C, 0) : N(e.selectedBox, C, 0)));
277
278
  }, re = (t) => {
278
- k(), f(
279
+ k(), m(
279
280
  a.annotations.concat(a.suggestions).sort((r, n) => n.w * n.h - r.w * r.h)
280
281
  ), L(a.falsePositives.sort((r, n) => n.w * n.h - r.w * r.h));
281
282
  }, ie = () => {
282
- o({ ...e, showLabeler: !1 }), f(
283
+ c({ ...e, showLabeler: !1 }), m(
283
284
  (t) => t.map((r) => r.id === e.selectedBox ? {
284
285
  ...r,
285
286
  label: e.selectedLabel,
@@ -287,13 +288,13 @@ const Ce = (a) => {
287
288
  } : r)
288
289
  );
289
290
  }, le = () => {
290
- o({ ...e, showLabeler: !1 }), f((t) => t.filter((r) => r.label));
291
- }, q = e.showBoxes ? 0 : -1;
292
- return /* @__PURE__ */ S(oe, { children: [
293
- /* @__PURE__ */ i(he, { ref: M, disabled: e.createMode || e.drawingMode, children: ({ zoomIn: t, zoomOut: r }) => /* @__PURE__ */ S(
291
+ c({ ...e, showLabeler: !1 }), m((t) => t.filter((r) => r.label));
292
+ }, Z = e.showBoxes ? 0 : -1;
293
+ return /* @__PURE__ */ S(ce, { children: [
294
+ /* @__PURE__ */ i(he, { ref: M, disabled: e.createMode || e.drawingMode, minScale: 0.9, children: ({ zoomIn: t, zoomOut: r }) => /* @__PURE__ */ S(
294
295
  "div",
295
296
  {
296
- className: "flex h-screen min-w-[600px] flex-col overflow-hidden bg-slate-900",
297
+ className: "flex h-screen min-w-[600px] flex-col bg-slate-900",
297
298
  onKeyDown: ne,
298
299
  tabIndex: 0,
299
300
  children: [
@@ -356,14 +357,14 @@ const Ce = (a) => {
356
357
  ) })
357
358
  }
358
359
  ),
359
- /* @__PURE__ */ i("button", { type: "button", onClick: W, children: /* @__PURE__ */ i(b, { secondary: !0, sm: !0, children: "Add (w)" }) })
360
+ /* @__PURE__ */ i("button", { type: "button", onClick: Y, children: /* @__PURE__ */ i(b, { secondary: !0, sm: !0, children: "Add (w)" }) })
360
361
  ] }),
361
362
  /* @__PURE__ */ S("div", { className: "flex-initial", children: [
362
363
  /* @__PURE__ */ i(
363
364
  "button",
364
365
  {
365
366
  onClick: () => {
366
- o({ ...e, showVerify: !0 });
367
+ c({ ...e, showVerify: !0 });
367
368
  },
368
369
  children: /* @__PURE__ */ i(b, { sm: !0, children: "Verify & Save" })
369
370
  }
@@ -381,7 +382,7 @@ const Ce = (a) => {
381
382
  "button",
382
383
  {
383
384
  onClick: () => {
384
- o({ ...e, showDelete: !0 });
385
+ c({ ...e, showDelete: !0 });
385
386
  },
386
387
  children: /* @__PURE__ */ i(b, { red: !0, sm: !0, children: "Delete" })
387
388
  }
@@ -390,7 +391,7 @@ const Ce = (a) => {
390
391
  "button",
391
392
  {
392
393
  onClick: () => {
393
- o({ ...e, showHelp: !0 });
394
+ c({ ...e, showHelp: !0 });
394
395
  },
395
396
  children: /* @__PURE__ */ i(b, { sm: !0, secondary: !0, children: "?" })
396
397
  }
@@ -406,9 +407,9 @@ const Ce = (a) => {
406
407
  "div",
407
408
  {
408
409
  className: "grid place-content-center",
409
- onMouseDown: j,
410
- onMouseUp: A,
411
- onMouseMove: E,
410
+ onMouseDown: E,
411
+ onMouseUp: T,
412
+ onMouseMove: j,
412
413
  children: [
413
414
  /* @__PURE__ */ i(
414
415
  "img",
@@ -425,24 +426,24 @@ const Ce = (a) => {
425
426
  }
426
427
  ),
427
428
  g.map((n) => {
428
- var c;
429
+ var o;
429
430
  return /* @__PURE__ */ i(
430
431
  ee,
431
432
  {
432
- type: $.falsePositive,
433
+ type: q.falsePositive,
433
434
  label: n.label ?? "",
434
- zIndex: n.id === e.selectedBox ? 1 : q,
435
+ zIndex: n.id === e.selectedBox ? 1 : Z,
435
436
  x: n.x * e.width,
436
437
  y: n.y * e.height,
437
438
  w: n.w * e.width,
438
439
  h: n.h * e.height,
439
- initialScale: (c = M.current) == null ? void 0 : c.instance.transformState.scale,
440
+ initialScale: (o = M.current) == null ? void 0 : o.instance.transformState.scale,
440
441
  selected: n.id === e.selectedBox,
441
442
  onMouseDown: (l) => {
442
443
  e.createMode || (V(n.id), l.stopPropagation());
443
444
  },
444
445
  onClickDelete: () => {
445
- o({
446
+ c({
446
447
  ...e,
447
448
  showConfirmDeleteFalsePositive: !0
448
449
  });
@@ -452,19 +453,19 @@ const Ce = (a) => {
452
453
  );
453
454
  }),
454
455
  d.map((n) => {
455
- var c;
456
+ var o;
456
457
  return /* @__PURE__ */ i(
457
458
  ee,
458
459
  {
459
- type: n.suggestion ? $.suggestion : $.truePositive,
460
+ type: n.suggestion ? q.suggestion : q.truePositive,
460
461
  label: n.label ?? "",
461
462
  difficult: n.difficult,
462
- zIndex: n.id === e.selectedBox ? 1 : q,
463
+ zIndex: n.id === e.selectedBox ? 1 : Z,
463
464
  x: n.x * e.width,
464
465
  y: n.y * e.height,
465
466
  w: n.w * e.width,
466
467
  h: n.h * e.height,
467
- initialScale: (c = M.current) == null ? void 0 : c.instance.transformState.scale,
468
+ initialScale: (o = M.current) == null ? void 0 : o.instance.transformState.scale,
468
469
  selected: n.id === e.selectedBox,
469
470
  onMouseDown: (l) => {
470
471
  e.createMode || (V(n.id), l.stopPropagation());
@@ -472,14 +473,14 @@ const Ce = (a) => {
472
473
  onDragStop: (l, h) => {
473
474
  X(h, n.id);
474
475
  },
475
- onResizeStop: (l, h, s, w, x) => {
476
- T(s, x, n.id);
476
+ onResizeStop: (l, h, s, f, x) => {
477
+ z(s, x, n.id);
477
478
  },
478
479
  onClickDelete: () => {
479
- z(n.id);
480
+ W(n.id);
480
481
  },
481
482
  onClickEdit: () => {
482
- o({ ...e, showLabeler: !0 });
483
+ c({ ...e, showLabeler: !0 });
483
484
  }
484
485
  },
485
486
  n.id
@@ -515,7 +516,7 @@ const Ce = (a) => {
515
516
  className: "w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50",
516
517
  value: e.selectedLabel,
517
518
  onChange: (t) => {
518
- o({ ...e, selectedLabel: t.target.value });
519
+ c({ ...e, selectedLabel: t.target.value });
519
520
  },
520
521
  children: a.labels.map((t) => /* @__PURE__ */ i("option", { value: t, children: t }, t))
521
522
  }
@@ -529,7 +530,7 @@ const Ce = (a) => {
529
530
  type: "checkbox",
530
531
  checked: e.difficult,
531
532
  onChange: (t) => {
532
- o({ ...e, difficult: t.target.checked });
533
+ c({ ...e, difficult: t.target.checked });
533
534
  }
534
535
  }
535
536
  ),
@@ -544,7 +545,7 @@ const Ce = (a) => {
544
545
  title: "Keyboard shortcuts",
545
546
  show: e.showHelp,
546
547
  handleClose: () => {
547
- o({ ...e, showHelp: !1 });
548
+ c({ ...e, showHelp: !1 });
548
549
  },
549
550
  children: /* @__PURE__ */ i("div", { className: "grid w-full grid-cols-2 place-content-center gap-2 p-5", children: y.map((t) => /* @__PURE__ */ S(ae, { children: [
550
551
  /* @__PURE__ */ i("div", { children: t.action }),
@@ -560,12 +561,12 @@ const Ce = (a) => {
560
561
  }
561
562
  ),
562
563
  /* @__PURE__ */ i(
563
- Z,
564
+ $,
564
565
  {
565
566
  title: "Are all objects in this image labeled?",
566
567
  description: " ",
567
568
  handleCancel: () => {
568
- o({ ...e, showVerify: !1 });
569
+ c({ ...e, showVerify: !1 });
569
570
  },
570
571
  show: e.showVerify,
571
572
  cancelText: "Cancel",
@@ -574,7 +575,7 @@ const Ce = (a) => {
574
575
  {
575
576
  type: "button",
576
577
  onClick: () => {
577
- a.save(d, g.length === 0, a.labels), o({ ...e, showVerify: !1 });
578
+ a.save(d, g.length === 0, a.labels), c({ ...e, showVerify: !1 });
578
579
  },
579
580
  children: /* @__PURE__ */ i(b, { sm: !0, green: !0, children: "Yes, all objects are labeled" })
580
581
  }
@@ -583,12 +584,12 @@ const Ce = (a) => {
583
584
  }
584
585
  ),
585
586
  /* @__PURE__ */ i(
586
- Z,
587
+ $,
587
588
  {
588
589
  title: "Are you sure you want to delete this image?",
589
590
  description: "",
590
591
  handleCancel: () => {
591
- o({ ...e, showDelete: !1 });
592
+ c({ ...e, showDelete: !1 });
592
593
  },
593
594
  show: e.showDelete,
594
595
  cancelText: "Cancel",
@@ -597,7 +598,7 @@ const Ce = (a) => {
597
598
  {
598
599
  type: "button",
599
600
  onClick: () => {
600
- a.delete(), o({ ...e, showDelete: !1 });
601
+ a.delete(), c({ ...e, showDelete: !1 });
601
602
  },
602
603
  children: /* @__PURE__ */ i(b, { sm: !0, red: !0, children: "Yes, permanently delete" })
603
604
  }
@@ -606,13 +607,13 @@ const Ce = (a) => {
606
607
  }
607
608
  ),
608
609
  /* @__PURE__ */ i(
609
- Z,
610
+ $,
610
611
  {
611
612
  title: "Are you sure you want to delete this reported false positive?",
612
613
  description: " ",
613
614
  maxWidthClass: "max-w-xl",
614
615
  handleCancel: () => {
615
- o({ ...e, showConfirmDeleteFalsePositive: !1 });
616
+ c({ ...e, showConfirmDeleteFalsePositive: !1 });
616
617
  },
617
618
  show: e.showConfirmDeleteFalsePositive,
618
619
  cancelText: "Cancel",
@@ -621,7 +622,7 @@ const Ce = (a) => {
621
622
  {
622
623
  type: "button",
623
624
  onClick: () => {
624
- e.selectedBox && P(e.selectedBox), o({
625
+ e.selectedBox && P(e.selectedBox), c({
625
626
  ...e,
626
627
  showConfirmDeleteFalsePositive: !1,
627
628
  selectedBox: void 0