@glodon-aiot/dataset-annotation 3.20.1 → 3.20.2-alpha.1
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.
- package/dist/es/components/ClassificationImageAnnotation/components/ClassificationImageDetail/index.mjs +26 -25
- package/dist/es/components/DetectionAnnotation/components/ImageDetail/index.mjs +19 -18
- package/dist/es/components/DetectionAnnotation/components/LabelMaker/index.mjs +171 -161
- package/dist/es/components/DetectionAnnotation/index.mjs +637 -653
- package/dist/es/index.mjs +1 -1
- package/dist/lib/index.js +3 -3
- package/dist/src/components/DetectionAnnotation/components/LabelMaker/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
var
|
|
2
|
-
import { jsx as u, jsxs as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { fabric as
|
|
1
|
+
var oe = Math.pow;
|
|
2
|
+
import { jsx as u, jsxs as ne } from "react/jsx-runtime";
|
|
3
|
+
import { useRef as re, useState as I, useEffect as p } from "react";
|
|
4
|
+
import { fabric as G } from "fabric";
|
|
5
5
|
import { useKeyPress as N } from "ahooks";
|
|
6
6
|
import "./style.less.mjs";
|
|
7
|
-
import
|
|
8
|
-
import { Spin as
|
|
9
|
-
import
|
|
10
|
-
import { drawable as
|
|
11
|
-
import { ZoomInOutlined as
|
|
12
|
-
import
|
|
7
|
+
import ue from "react-dom";
|
|
8
|
+
import { Spin as he, Space as me, Tooltip as U, Button as z } from "antd";
|
|
9
|
+
import ce from "./RectLabel.mjs";
|
|
10
|
+
import { drawable as ge } from "./Drawable.mjs";
|
|
11
|
+
import { ZoomInOutlined as be, ZoomOutOutlined as pe, DragOutlined as ye, ClearOutlined as xe } from "@ant-design/icons";
|
|
12
|
+
import ve from "classnames";
|
|
13
13
|
import { approxeq as Y } from "../../../../utils/index.mjs";
|
|
14
|
-
const T = (
|
|
15
|
-
|
|
16
|
-
}, A = (
|
|
17
|
-
var
|
|
14
|
+
const T = (l) => {
|
|
15
|
+
l.off("mouse:down"), l.off("mouse:up");
|
|
16
|
+
}, A = (l) => {
|
|
17
|
+
var f, P, k;
|
|
18
18
|
let h = [];
|
|
19
|
-
(
|
|
19
|
+
(f = l.object) != null && f.aCoords && (h = [l.object.aCoords.tl, l.object.aCoords.tr, l.object.aCoords.br, l.object.aCoords.bl]);
|
|
20
20
|
const g = {
|
|
21
21
|
x: 0,
|
|
22
22
|
y: 0
|
|
@@ -24,26 +24,27 @@ const T = (a) => {
|
|
|
24
24
|
width: 0,
|
|
25
25
|
height: 0
|
|
26
26
|
};
|
|
27
|
-
return
|
|
28
|
-
id:
|
|
29
|
-
label:
|
|
30
|
-
color:
|
|
31
|
-
box: (h == null ? void 0 : h.map((
|
|
27
|
+
return l.canvas.backgroundImage && typeof l.canvas.backgroundImage != "string" && (g.x = ((P = l.canvas.backgroundImage.aCoords) == null ? void 0 : P.tl.x) || 0, g.y = ((k = l.canvas.backgroundImage.aCoords) == null ? void 0 : k.tl.y) || 0, y.width = l.canvas.backgroundImage.width || 0, y.height = l.canvas.backgroundImage.height || 0), {
|
|
28
|
+
id: l.config.id,
|
|
29
|
+
label: l.config.name,
|
|
30
|
+
color: l.config.color,
|
|
31
|
+
box: (h == null ? void 0 : h.map((a) => [Y(a.x - g.x, 0) ? 0 : Y(a.x - g.x, y.width) ? y.width : a.x - g.x, Y(a.y - g.y, 0) ? 0 : Y(a.y - g.y, y.height) ? y.height : a.y - g.y])) || []
|
|
32
32
|
};
|
|
33
|
-
},
|
|
34
|
-
const h =
|
|
33
|
+
}, Ue = (l) => {
|
|
34
|
+
const h = re(null), {
|
|
35
35
|
labels: g,
|
|
36
36
|
imageUrl: y,
|
|
37
|
-
pen:
|
|
37
|
+
pen: f,
|
|
38
38
|
onImageLoad: P,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
onImageError: k,
|
|
40
|
+
onChange: a,
|
|
41
|
+
isPreLabel: _,
|
|
42
|
+
disabled: w,
|
|
43
|
+
renderLabelItem: X
|
|
44
|
+
} = l, [B, W] = I(!0), [e, J] = I(), [De, ie] = I({}), [j, Q] = I(), [Z, se] = I({
|
|
44
45
|
left: 0,
|
|
45
46
|
top: 0
|
|
46
|
-
}), [
|
|
47
|
+
}), [ae, K] = I([1, 1]), [R, $] = I(), [C, v] = I([]), D = re(/* @__PURE__ */ new Set()), [x, L] = I(w || !1), s = (o) => {
|
|
47
48
|
if (!o)
|
|
48
49
|
return !1;
|
|
49
50
|
try {
|
|
@@ -51,7 +52,7 @@ const T = (a) => {
|
|
|
51
52
|
} catch (t) {
|
|
52
53
|
return !1;
|
|
53
54
|
}
|
|
54
|
-
},
|
|
55
|
+
}, H = (o, t) => {
|
|
55
56
|
if (!e || !s(e))
|
|
56
57
|
return;
|
|
57
58
|
t || (t = {
|
|
@@ -59,42 +60,42 @@ const T = (a) => {
|
|
|
59
60
|
y: e.getCenter().top
|
|
60
61
|
});
|
|
61
62
|
let n = e.getZoom();
|
|
62
|
-
n *=
|
|
63
|
+
n *= oe(0.999, o), n > 20 && (n = 20), n < 0.01 && (n = 0.01);
|
|
63
64
|
try {
|
|
64
65
|
e.zoomToPoint(
|
|
65
66
|
t,
|
|
66
67
|
n
|
|
67
68
|
// 传入修改后的缩放级别
|
|
68
|
-
),
|
|
69
|
+
), K([n, n]);
|
|
69
70
|
} catch (r) {
|
|
70
71
|
}
|
|
71
72
|
};
|
|
72
73
|
p(() => {
|
|
73
|
-
!e || !s(e) ||
|
|
74
|
+
!e || !s(e) || C.forEach((o) => {
|
|
74
75
|
try {
|
|
75
76
|
o.renderLabel();
|
|
76
77
|
} catch (t) {
|
|
77
78
|
}
|
|
78
79
|
});
|
|
79
|
-
}, [
|
|
80
|
-
const
|
|
80
|
+
}, [ae, C, e]);
|
|
81
|
+
const V = (o) => {
|
|
81
82
|
var n;
|
|
82
83
|
if (((n = o.target) == null ? void 0 : n.tagName) === "INPUT" || !e || !s(e))
|
|
83
84
|
return;
|
|
84
85
|
const t = e == null ? void 0 : e.getActiveObject();
|
|
85
|
-
t &&
|
|
86
|
-
let
|
|
87
|
-
if (
|
|
86
|
+
t && v((r) => {
|
|
87
|
+
let d = r.findIndex((i) => i.object === t);
|
|
88
|
+
if (d === -1 && t && (d = r.findIndex((i) => {
|
|
88
89
|
const c = i._fabricRect;
|
|
89
90
|
return c && c === t;
|
|
90
|
-
})),
|
|
91
|
-
const i = r[
|
|
92
|
-
|
|
91
|
+
})), d >= 0 && r[d]) {
|
|
92
|
+
const i = r[d];
|
|
93
|
+
D.current.add(i.config.id);
|
|
93
94
|
const c = i.handlers.onDelete;
|
|
94
|
-
i.handlers.onDelete = void 0, i.destroy(), i.handlers.onDelete = c, r.splice(
|
|
95
|
+
i.handlers.onDelete = void 0, i.destroy(), i.handlers.onDelete = c, r.splice(d, 1);
|
|
95
96
|
const m = r.map(A);
|
|
96
|
-
|
|
97
|
-
|
|
97
|
+
a && a(m), setTimeout(() => {
|
|
98
|
+
D.current.delete(i.config.id);
|
|
98
99
|
}, 100);
|
|
99
100
|
} else if (t && e) {
|
|
100
101
|
const i = r.findIndex((c) => {
|
|
@@ -103,12 +104,12 @@ const T = (a) => {
|
|
|
103
104
|
});
|
|
104
105
|
if (i >= 0 && r[i]) {
|
|
105
106
|
const c = r[i];
|
|
106
|
-
|
|
107
|
+
D.current.add(c.config.id);
|
|
107
108
|
const m = c.handlers.onDelete;
|
|
108
109
|
c.handlers.onDelete = void 0, c.destroy(), c.handlers.onDelete = m, r.splice(i, 1);
|
|
109
110
|
const S = r.map(A);
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
a && a(S), setTimeout(() => {
|
|
112
|
+
D.current.delete(c.config.id);
|
|
112
113
|
}, 100);
|
|
113
114
|
} else
|
|
114
115
|
e.remove(t), e.discardActiveObject(), e.renderAll();
|
|
@@ -116,31 +117,31 @@ const T = (a) => {
|
|
|
116
117
|
return [...r];
|
|
117
118
|
});
|
|
118
119
|
};
|
|
119
|
-
N("Delete",
|
|
120
|
+
N("Delete", V), N("Backspace", V), N("ctrl", () => {
|
|
120
121
|
L(!0);
|
|
121
122
|
}, {
|
|
122
123
|
events: ["keydown"]
|
|
123
124
|
}), N("ctrl", () => {
|
|
124
|
-
|
|
125
|
+
w || L(!1);
|
|
125
126
|
}, {
|
|
126
127
|
events: ["keyup"]
|
|
127
128
|
}), p(() => {
|
|
128
|
-
L(
|
|
129
|
-
}, [
|
|
130
|
-
const
|
|
131
|
-
e && T(e),
|
|
129
|
+
L(w || !1);
|
|
130
|
+
}, [w]);
|
|
131
|
+
const ee = (o) => {
|
|
132
|
+
e && T(e), v((t) => {
|
|
132
133
|
const n = t.findIndex((r) => r === o);
|
|
133
134
|
if (n > -1) {
|
|
134
135
|
t.splice(n, 1);
|
|
135
136
|
const r = t.map(A);
|
|
136
|
-
|
|
137
|
+
a && a(r), M();
|
|
137
138
|
}
|
|
138
139
|
return [...t];
|
|
139
140
|
});
|
|
140
|
-
},
|
|
141
|
-
|
|
141
|
+
}, te = (o) => {
|
|
142
|
+
v((t) => {
|
|
142
143
|
const n = t.findIndex((r) => r === o);
|
|
143
|
-
return n > -1 && (t[n] = o,
|
|
144
|
+
return n > -1 && (t[n] = o, a && a(t.map(A))), [...t];
|
|
144
145
|
});
|
|
145
146
|
};
|
|
146
147
|
p(() => {
|
|
@@ -152,22 +153,22 @@ const T = (a) => {
|
|
|
152
153
|
} catch (t) {
|
|
153
154
|
return;
|
|
154
155
|
}
|
|
155
|
-
if (!
|
|
156
|
+
if (!j)
|
|
156
157
|
return;
|
|
157
158
|
const o = [];
|
|
158
159
|
return g.filter((t) => t.color).forEach((t) => {
|
|
159
|
-
o.push(new
|
|
160
|
+
o.push(new ce({
|
|
160
161
|
id: t.id,
|
|
161
162
|
name: t.label,
|
|
162
163
|
color: t.color,
|
|
163
|
-
points: t.box.map((n) => [n[0] +
|
|
164
|
-
hideDelete:
|
|
164
|
+
points: t.box.map((n) => [n[0] + Z.left, n[1] + Z.top]),
|
|
165
|
+
hideDelete: _
|
|
165
166
|
}, e, {
|
|
166
|
-
onChange:
|
|
167
|
-
onDelete:
|
|
168
|
-
renderLabelItem:
|
|
167
|
+
onChange: te,
|
|
168
|
+
onDelete: ee,
|
|
169
|
+
renderLabelItem: X ? (n) => X ? X(t) : n.name : void 0
|
|
169
170
|
}));
|
|
170
|
-
}),
|
|
171
|
+
}), v(o), o.forEach((t) => {
|
|
171
172
|
try {
|
|
172
173
|
t.render(e);
|
|
173
174
|
} catch (n) {
|
|
@@ -180,46 +181,46 @@ const T = (a) => {
|
|
|
180
181
|
}
|
|
181
182
|
});
|
|
182
183
|
};
|
|
183
|
-
}, [e, y,
|
|
184
|
+
}, [e, y, j, Z]);
|
|
184
185
|
const M = () => {
|
|
185
|
-
!e || !s(e) ||
|
|
186
|
+
!e || !s(e) || ge(e, (o) => {
|
|
186
187
|
if (!e || !s(e))
|
|
187
188
|
return;
|
|
188
|
-
const t = new
|
|
189
|
-
id: (
|
|
190
|
-
name: (
|
|
191
|
-
color: (
|
|
189
|
+
const t = new ce({
|
|
190
|
+
id: (f == null ? void 0 : f.id) || o.id,
|
|
191
|
+
name: (f == null ? void 0 : f.label) || o.label,
|
|
192
|
+
color: (f == null ? void 0 : f.color) || o.color,
|
|
192
193
|
points: o.box.map((n) => [n[0], n[1]]),
|
|
193
|
-
hideDelete:
|
|
194
|
+
hideDelete: _
|
|
194
195
|
}, e, {
|
|
195
|
-
onChange:
|
|
196
|
-
onDelete:
|
|
196
|
+
onChange: te,
|
|
197
|
+
onDelete: ee
|
|
197
198
|
});
|
|
198
|
-
t.active = !0,
|
|
199
|
+
t.active = !0, v((n) => {
|
|
199
200
|
const r = [...n, t];
|
|
200
|
-
return
|
|
201
|
+
return a && a(r.map(A)), setTimeout(() => {
|
|
201
202
|
if (t.object && e && s(e))
|
|
202
203
|
try {
|
|
203
204
|
e.setActiveObject(t.object), e.renderAll();
|
|
204
|
-
} catch (
|
|
205
|
+
} catch (d) {
|
|
205
206
|
}
|
|
206
207
|
e && s(e) && !x && M();
|
|
207
208
|
}, 0), r;
|
|
208
209
|
});
|
|
209
|
-
},
|
|
210
|
-
},
|
|
210
|
+
}, _);
|
|
211
|
+
}, le = () => {
|
|
211
212
|
let o = !1;
|
|
212
213
|
e && (e.on("mouse:down", (t) => {
|
|
213
214
|
o = !0, e.selection = !1;
|
|
214
215
|
}), e.on("mouse:move", (t) => {
|
|
215
216
|
if (o && t && t.e) {
|
|
216
|
-
const n = new
|
|
217
|
+
const n = new G.Point(t.e.movementX, t.e.movementY);
|
|
217
218
|
e.relativePan(n);
|
|
218
219
|
}
|
|
219
220
|
}), e.on("mouse:up", (t) => {
|
|
220
221
|
o = !1, e.selection = !0;
|
|
221
222
|
}));
|
|
222
|
-
},
|
|
223
|
+
}, fe = () => {
|
|
223
224
|
e && (e.off("mouse:down"), e.off("mouse:move"), e.off("mouse:up"));
|
|
224
225
|
};
|
|
225
226
|
p(() => {
|
|
@@ -231,16 +232,16 @@ const T = (a) => {
|
|
|
231
232
|
const n = e, r = n == null ? void 0 : n._currentTransform;
|
|
232
233
|
if (!r)
|
|
233
234
|
return;
|
|
234
|
-
const
|
|
235
|
-
if (!
|
|
235
|
+
const d = r.action;
|
|
236
|
+
if (!d || !d.startsWith("scale"))
|
|
236
237
|
return;
|
|
237
238
|
const i = e.backgroundImage, c = i == null ? void 0 : i.aCoords;
|
|
238
239
|
if (c)
|
|
239
240
|
try {
|
|
240
241
|
const m = e.getPointer(t.e);
|
|
241
242
|
if (m.x < c.tl.x || m.x > c.br.x || m.y < c.tl.y || m.y > c.br.y) {
|
|
242
|
-
const
|
|
243
|
-
typeof
|
|
243
|
+
const O = n == null ? void 0 : n._onMouseUp;
|
|
244
|
+
typeof O == "function" && O(t.e);
|
|
244
245
|
}
|
|
245
246
|
} catch (m) {
|
|
246
247
|
}
|
|
@@ -261,8 +262,8 @@ const T = (a) => {
|
|
|
261
262
|
const n = e;
|
|
262
263
|
if (!!!(n != null && n._currentTransform))
|
|
263
264
|
return;
|
|
264
|
-
const
|
|
265
|
-
typeof
|
|
265
|
+
const d = n == null ? void 0 : n._onMouseUp;
|
|
266
|
+
typeof d == "function" && d(t.e);
|
|
266
267
|
};
|
|
267
268
|
return e.on("mouse:out", o), () => {
|
|
268
269
|
if (e && s(e))
|
|
@@ -274,7 +275,7 @@ const T = (a) => {
|
|
|
274
275
|
}, [e]), p(() => {
|
|
275
276
|
if (!(!e || !s(e))) {
|
|
276
277
|
if (x) {
|
|
277
|
-
|
|
278
|
+
le();
|
|
278
279
|
try {
|
|
279
280
|
e.defaultCursor = "grab";
|
|
280
281
|
const o = () => {
|
|
@@ -284,10 +285,10 @@ const T = (a) => {
|
|
|
284
285
|
};
|
|
285
286
|
e.on("mouse:down:before", o), e.on("mouse:up", t);
|
|
286
287
|
const n = e.getObjects();
|
|
287
|
-
|
|
288
|
+
v((r) => (r.forEach((d) => {
|
|
288
289
|
var i;
|
|
289
290
|
try {
|
|
290
|
-
(i =
|
|
291
|
+
(i = d.object) == null || i.set("evented", !1);
|
|
291
292
|
} catch (c) {
|
|
292
293
|
}
|
|
293
294
|
}), r));
|
|
@@ -295,7 +296,7 @@ const T = (a) => {
|
|
|
295
296
|
}
|
|
296
297
|
} else
|
|
297
298
|
try {
|
|
298
|
-
e.defaultCursor = "default", e.off("mouse:down:before"), e.off("mouse:up"), e.setCursor("default"),
|
|
299
|
+
e.defaultCursor = "default", e.off("mouse:down:before"), e.off("mouse:up"), e.setCursor("default"), v((o) => (o.forEach((t) => {
|
|
299
300
|
var n;
|
|
300
301
|
try {
|
|
301
302
|
(n = t.object) == null || n.set("evented", !0);
|
|
@@ -305,7 +306,7 @@ const T = (a) => {
|
|
|
305
306
|
} catch (o) {
|
|
306
307
|
}
|
|
307
308
|
return () => {
|
|
308
|
-
|
|
309
|
+
fe();
|
|
309
310
|
};
|
|
310
311
|
}
|
|
311
312
|
}, [e, x]), p(() => {
|
|
@@ -315,13 +316,13 @@ const T = (a) => {
|
|
|
315
316
|
if (!s(e))
|
|
316
317
|
return;
|
|
317
318
|
const n = t.e.deltaY;
|
|
318
|
-
|
|
319
|
+
H(n, {
|
|
319
320
|
x: t.e.offsetX,
|
|
320
321
|
y: t.e.offsetY
|
|
321
|
-
}),
|
|
322
|
+
}), C.forEach((r) => {
|
|
322
323
|
try {
|
|
323
324
|
r.renderLabel();
|
|
324
|
-
} catch (
|
|
325
|
+
} catch (d) {
|
|
325
326
|
}
|
|
326
327
|
});
|
|
327
328
|
};
|
|
@@ -338,23 +339,23 @@ const T = (a) => {
|
|
|
338
339
|
} catch (t) {
|
|
339
340
|
}
|
|
340
341
|
});
|
|
341
|
-
}, [e,
|
|
342
|
-
const
|
|
342
|
+
}, [e, f, C, x]);
|
|
343
|
+
const de = () => {
|
|
343
344
|
if (e)
|
|
344
345
|
try {
|
|
345
346
|
T(e), e.discardActiveObject();
|
|
346
347
|
} catch (o) {
|
|
347
348
|
}
|
|
348
|
-
if (
|
|
349
|
+
if (v((o) => (o.forEach((t) => {
|
|
349
350
|
try {
|
|
350
|
-
|
|
351
|
+
D.current.add(t.config.id);
|
|
351
352
|
const n = t.handlers.onDelete;
|
|
352
353
|
t.handlers.onDelete = void 0, t.destroy(), t.handlers.onDelete = n;
|
|
353
354
|
} catch (n) {
|
|
354
355
|
}
|
|
355
356
|
}), setTimeout(() => {
|
|
356
|
-
|
|
357
|
-
}, 100), [])),
|
|
357
|
+
D.current.clear();
|
|
358
|
+
}, 100), [])), ie({}), Q(void 0), K([1, 1]), e)
|
|
358
359
|
try {
|
|
359
360
|
e.getObjects().forEach((t) => {
|
|
360
361
|
try {
|
|
@@ -364,19 +365,28 @@ const T = (a) => {
|
|
|
364
365
|
}), e.dispose();
|
|
365
366
|
} catch (o) {
|
|
366
367
|
}
|
|
367
|
-
|
|
368
|
+
J(void 0);
|
|
368
369
|
};
|
|
369
370
|
return p(() => {
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
371
|
+
W(!0), de(), !(!h.current || !y) && G.Image.fromURL(
|
|
372
|
+
y,
|
|
373
|
+
// @types/fabric 的回调签名缺少第二个参数 isError,运行时确实存在,用 any 规避类型错误
|
|
374
|
+
(o, t) => {
|
|
375
|
+
if (t) {
|
|
376
|
+
W(!1), k == null || k();
|
|
377
|
+
return;
|
|
378
|
+
}
|
|
379
|
+
o.set({
|
|
380
|
+
originX: "center",
|
|
381
|
+
originY: "center"
|
|
382
|
+
}), Q(o), W(!1);
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
crossOrigin: "anonymous"
|
|
386
|
+
}
|
|
387
|
+
);
|
|
378
388
|
}, [y]), p(() => {
|
|
379
|
-
if (!
|
|
389
|
+
if (!j && e) {
|
|
380
390
|
try {
|
|
381
391
|
e.getContext() && e.clear();
|
|
382
392
|
} catch (E) {
|
|
@@ -385,42 +395,42 @@ const T = (a) => {
|
|
|
385
395
|
}
|
|
386
396
|
if (!h.current || !h.current.parentElement)
|
|
387
397
|
return;
|
|
388
|
-
const o =
|
|
398
|
+
const o = j == null ? void 0 : j.getElement();
|
|
389
399
|
if (!(o != null && o.width) || !(o != null && o.height))
|
|
390
400
|
return;
|
|
391
401
|
if (e)
|
|
392
402
|
try {
|
|
393
|
-
e.getContext() && (T(e), e.discardActiveObject(), e.getObjects().forEach((
|
|
403
|
+
e.getContext() && (T(e), e.discardActiveObject(), e.getObjects().forEach((F) => {
|
|
394
404
|
try {
|
|
395
|
-
e.remove(
|
|
396
|
-
} catch (
|
|
405
|
+
e.remove(F);
|
|
406
|
+
} catch (Ce) {
|
|
397
407
|
}
|
|
398
408
|
}), e.dispose());
|
|
399
409
|
} catch (E) {
|
|
400
410
|
}
|
|
401
|
-
const t = o.width / o.height, n = h.current.parentElement.offsetWidth, r = h.current.parentElement.offsetHeight,
|
|
411
|
+
const t = o.width / o.height, n = h.current.parentElement.offsetWidth, r = h.current.parentElement.offsetHeight, d = n / o.width, i = r / o.height;
|
|
402
412
|
let c = [n, r];
|
|
403
|
-
|
|
404
|
-
const m = c[0] / o.width, S = c[1] / o.height,
|
|
405
|
-
|
|
406
|
-
const b = new
|
|
413
|
+
d > i ? c = [r * t, r] : c = [n, n / t];
|
|
414
|
+
const m = c[0] / o.width, S = c[1] / o.height, O = Math.min(m, S);
|
|
415
|
+
K([O, O]);
|
|
416
|
+
const b = new G.Canvas(h.current, {
|
|
407
417
|
containerClass: "marking-canvas",
|
|
408
418
|
width: n,
|
|
409
419
|
height: r
|
|
410
420
|
});
|
|
411
|
-
if (b.uniScaleKey = "", b.uniformScaling = !1, b == null || b.setZoom(
|
|
412
|
-
const E = (n - c[0]) /
|
|
421
|
+
if (b.uniScaleKey = "", b.uniformScaling = !1, b == null || b.setZoom(O), b == null || b.renderAll(), b && j) {
|
|
422
|
+
const E = (n - c[0]) / O / 2, q = (r - c[1]) / O / 2;
|
|
413
423
|
b.setBackgroundImage(
|
|
414
|
-
|
|
424
|
+
j,
|
|
415
425
|
() => {
|
|
416
426
|
try {
|
|
417
427
|
if (!b.getContext())
|
|
418
428
|
return;
|
|
419
|
-
b.renderAll(),
|
|
429
|
+
b.renderAll(), se({
|
|
420
430
|
left: E,
|
|
421
|
-
top:
|
|
422
|
-
}),
|
|
423
|
-
} catch (
|
|
431
|
+
top: q
|
|
432
|
+
}), J(b), P && P();
|
|
433
|
+
} catch (F) {
|
|
424
434
|
}
|
|
425
435
|
},
|
|
426
436
|
// 刷新画布
|
|
@@ -428,40 +438,40 @@ const T = (a) => {
|
|
|
428
438
|
originX: "left",
|
|
429
439
|
originY: "top",
|
|
430
440
|
left: E,
|
|
431
|
-
top:
|
|
441
|
+
top: q
|
|
432
442
|
}
|
|
433
443
|
);
|
|
434
444
|
}
|
|
435
|
-
}, [
|
|
436
|
-
if (
|
|
437
|
-
if (
|
|
445
|
+
}, [j]), p(() => {
|
|
446
|
+
if (C.length > g.length) {
|
|
447
|
+
if (D.current.size > 0)
|
|
438
448
|
return;
|
|
439
|
-
|
|
440
|
-
const n =
|
|
449
|
+
C.forEach((t) => {
|
|
450
|
+
const n = D.current.has(t.config.id), r = t._isDestroying;
|
|
441
451
|
!g.find((i) => i.id === t.config.id) && !r && !n && t.destroy();
|
|
442
452
|
});
|
|
443
453
|
}
|
|
444
454
|
}, [g.length]), p(() => {
|
|
445
|
-
!e || !s(e) || x ||
|
|
455
|
+
!e || !s(e) || x || v((o) => {
|
|
446
456
|
try {
|
|
447
457
|
const t = e == null ? void 0 : e.getActiveObject(), n = o.find((r) => r.object === t);
|
|
448
|
-
n &&
|
|
449
|
-
id:
|
|
450
|
-
name:
|
|
451
|
-
color:
|
|
452
|
-
},
|
|
458
|
+
n && f && (n.labelConfig = {
|
|
459
|
+
id: f.id,
|
|
460
|
+
name: f.label,
|
|
461
|
+
color: f.color
|
|
462
|
+
}, a && a(o.map(A))), e && s(e) && (f ? e.defaultCursor = "copy" : e.defaultCursor = "default");
|
|
453
463
|
} catch (t) {
|
|
454
464
|
}
|
|
455
465
|
return [...o];
|
|
456
466
|
});
|
|
457
|
-
}, [
|
|
467
|
+
}, [f, e, x]), p(() => {
|
|
458
468
|
var o;
|
|
459
|
-
if (
|
|
469
|
+
if (B && h.current && !R) {
|
|
460
470
|
const t = document.createElement("div");
|
|
461
|
-
t.setAttribute("style", "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute;top: 0;"), (o = h.current.parentElement) == null || o.appendChild(t),
|
|
471
|
+
t.setAttribute("style", "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute;top: 0;"), (o = h.current.parentElement) == null || o.appendChild(t), ue.render(/* @__PURE__ */ u(he, {}), t), $(t);
|
|
462
472
|
} else
|
|
463
|
-
!
|
|
464
|
-
}, [
|
|
473
|
+
!B && R && (R.remove(), $(null));
|
|
474
|
+
}, [B, h.current, R]), /* @__PURE__ */ ne("div", {
|
|
465
475
|
style: {
|
|
466
476
|
width: "100%",
|
|
467
477
|
height: "100%",
|
|
@@ -471,56 +481,56 @@ const T = (a) => {
|
|
|
471
481
|
className: "marker-toolbar",
|
|
472
482
|
children: /* @__PURE__ */ u("div", {
|
|
473
483
|
className: "create-mode-select",
|
|
474
|
-
children: /* @__PURE__ */
|
|
484
|
+
children: /* @__PURE__ */ ne(me, {
|
|
475
485
|
direction: "vertical",
|
|
476
486
|
size: 16,
|
|
477
487
|
children: [/* @__PURE__ */ u(U, {
|
|
478
488
|
title: "放大-鼠标滚轮前滑",
|
|
479
489
|
placement: "right",
|
|
480
490
|
children: /* @__PURE__ */ u(z, {
|
|
481
|
-
icon: /* @__PURE__ */ u(
|
|
491
|
+
icon: /* @__PURE__ */ u(be, {}),
|
|
482
492
|
onClick: () => {
|
|
483
|
-
|
|
493
|
+
H(-100);
|
|
484
494
|
}
|
|
485
495
|
})
|
|
486
496
|
}), /* @__PURE__ */ u(U, {
|
|
487
497
|
title: "缩小-鼠标滚轮后滑",
|
|
488
498
|
placement: "right",
|
|
489
499
|
children: /* @__PURE__ */ u(z, {
|
|
490
|
-
icon: /* @__PURE__ */ u(
|
|
500
|
+
icon: /* @__PURE__ */ u(pe, {}),
|
|
491
501
|
onClick: () => {
|
|
492
|
-
|
|
502
|
+
H(100);
|
|
493
503
|
}
|
|
494
504
|
})
|
|
495
|
-
}), !
|
|
505
|
+
}), !w && /* @__PURE__ */ u(U, {
|
|
496
506
|
title: "拖动-按住ctrl",
|
|
497
507
|
placement: "right",
|
|
498
508
|
children: /* @__PURE__ */ u(z, {
|
|
499
|
-
disabled:
|
|
500
|
-
icon: /* @__PURE__ */ u(
|
|
509
|
+
disabled: w,
|
|
510
|
+
icon: /* @__PURE__ */ u(ye, {}),
|
|
501
511
|
className: x ? "active" : "",
|
|
502
512
|
onClick: () => {
|
|
503
513
|
L(!x);
|
|
504
514
|
}
|
|
505
515
|
})
|
|
506
|
-
}), !
|
|
516
|
+
}), !w && /* @__PURE__ */ u(U, {
|
|
507
517
|
title: "一键清空全部标注",
|
|
508
518
|
placement: "right",
|
|
509
519
|
children: /* @__PURE__ */ u(z, {
|
|
510
|
-
icon: /* @__PURE__ */ u(
|
|
511
|
-
disabled: !(
|
|
520
|
+
icon: /* @__PURE__ */ u(xe, {}),
|
|
521
|
+
disabled: !(C != null && C.length),
|
|
512
522
|
onClick: () => {
|
|
513
523
|
if (!(!e || !s(e)))
|
|
514
524
|
try {
|
|
515
|
-
T(e), e.discardActiveObject(),
|
|
516
|
-
|
|
525
|
+
T(e), e.discardActiveObject(), v((t) => (t.forEach((n) => {
|
|
526
|
+
D.current.add(n.config.id);
|
|
517
527
|
const r = n.handlers.onDelete;
|
|
518
528
|
n.handlers.onDelete = void 0, n.destroy(), n.handlers.onDelete = r;
|
|
519
529
|
}), setTimeout(() => {
|
|
520
|
-
|
|
530
|
+
D.current.clear();
|
|
521
531
|
}, 100), [])), e.getObjects().forEach((t) => {
|
|
522
532
|
t !== e.backgroundImage && e.remove(t);
|
|
523
|
-
}),
|
|
533
|
+
}), a && a([]), s(e) && (e.renderAll(), setTimeout(() => {
|
|
524
534
|
e && s(e) && !x && M();
|
|
525
535
|
}, 0));
|
|
526
536
|
} catch (o) {
|
|
@@ -531,7 +541,7 @@ const T = (a) => {
|
|
|
531
541
|
})
|
|
532
542
|
})
|
|
533
543
|
}), /* @__PURE__ */ u("div", {
|
|
534
|
-
className:
|
|
544
|
+
className: ve({
|
|
535
545
|
"label-maker-wrap": !0,
|
|
536
546
|
draggable: x
|
|
537
547
|
}),
|
|
@@ -546,5 +556,5 @@ const T = (a) => {
|
|
|
546
556
|
});
|
|
547
557
|
};
|
|
548
558
|
export {
|
|
549
|
-
|
|
559
|
+
Ue as default
|
|
550
560
|
};
|