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