@glodon-aiot/dataset-annotation 3.11.1-shapshot.1765331459 → 3.13.0-alpha.28
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/DatasetContext/index.mjs +6 -3
- package/dist/es/components/DetectionAnnotation/components/ImageDetail/index.mjs +94 -91
- package/dist/es/components/DetectionAnnotation/components/ImageModal/index.mjs +129 -0
- package/dist/es/components/DetectionAnnotation/components/ImageModal/style.less.mjs +4 -0
- package/dist/es/components/DetectionAnnotation/components/LabelMaker/Drawable.mjs +37 -28
- package/dist/es/components/DetectionAnnotation/components/LabelMaker/RectLabel.mjs +136 -108
- package/dist/es/components/DetectionAnnotation/components/LabelMaker/index.mjs +197 -162
- package/dist/es/components/DetectionAnnotation/index.mjs +424 -395
- package/dist/es/components/Iconfont/index.mjs +2 -2
- package/dist/es/components/OcrAnnotation/MarkKVOCRModal/KVOCRLabelMaker/index.mjs +1 -1
- package/dist/es/components/OcrAnnotation/MarkOCRBoxModal/OCRBoxMaker/index.mjs +1 -1
- package/dist/es/components/OcrAnnotation/OcrModal/index.mjs +43 -45
- package/dist/es/components/PicZipImportModal/config.mjs +47 -0
- package/dist/es/components/PicZipImportModal/index.mjs +308 -293
- package/dist/es/components/PicZipImportModal/pic_vlm_json_zip.svg.mjs +4 -0
- package/dist/es/components/PicZipImportModal/pic_vlm_zip.svg.mjs +4 -0
- package/dist/es/components/PreLabelOCR/index.mjs +1 -1
- package/dist/es/components/VLMAnnotation/RegionItem.mjs +94 -0
- package/dist/es/components/VLMAnnotation/TextAnnotationPanel.mjs +83 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasDrag.mjs +116 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasSetup.mjs +115 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasZoom.mjs +42 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useCropRegionImage.mjs +55 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDeleteControl.mjs +51 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDeleteRegion.mjs +47 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDrawingMode.mjs +248 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRLoadingIcon.mjs +106 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRRecognition.mjs +68 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionHover.mjs +38 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionLoader.mjs +141 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionNameText.mjs +72 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionSelection.mjs +113 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionUpdate.mjs +103 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useTextLayouts.mjs +156 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/icons/del.png.mjs +4 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/index.mjs +526 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/style.less.mjs +4 -0
- package/dist/es/components/VLMAnnotation/VLMLabelMaker/utils/coordinateUtils.mjs +33 -0
- package/dist/es/components/VLMAnnotation/components/DragButton.mjs +18 -0
- package/dist/es/components/VLMAnnotation/components/FitToScreenButton.mjs +16 -0
- package/dist/es/components/VLMAnnotation/components/RectangleButton.mjs +30 -0
- package/dist/es/components/VLMAnnotation/components/Toolbar.mjs +40 -0
- package/dist/es/components/VLMAnnotation/components/ZoomControls.mjs +44 -0
- package/dist/es/components/VLMAnnotation/constants.mjs +50 -0
- package/dist/es/components/VLMAnnotation/index.mjs +242 -0
- package/dist/es/components/VLMAnnotation/style.less.mjs +4 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/AttributeDetail/index.mjs +343 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/AttributeDetail/style.less.mjs +4 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/QADetail/QAGenerationConfig.mjs +240 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/QADetail/index.mjs +201 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/QADetail/style.less.mjs +4 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/index.mjs +455 -0
- package/dist/es/components/VLMAnnotationDetail/MarkVLMBoxModal/style.less.mjs +4 -0
- package/dist/es/components/VLMAnnotationDetail/VlmModal/index.mjs +149 -0
- package/dist/es/components/VLMAnnotationDetail/VlmModal/style.less.mjs +4 -0
- package/dist/es/components/VLMAnnotationDetail/index.mjs +449 -0
- package/dist/es/components/VLMAnnotationDetail/style.less.mjs +4 -0
- package/dist/es/constant.mjs +3 -3
- package/dist/es/createVlmtasetAnnotation/index.mjs +131 -0
- package/dist/es/featuresConfig.mjs +13 -9
- package/dist/es/index.mjs +11 -7
- package/dist/lib/index.js +4 -3
- package/dist/src/DatasetContext/index.d.ts +2 -0
- package/dist/src/components/DetectionAnnotation/components/ImageDetail/index.d.ts +1 -0
- package/dist/src/components/DetectionAnnotation/components/ImageModal/index.d.ts +34 -0
- package/dist/src/components/Iconfont/font_4439177_tgvowh6bmlb.d.ts +0 -0
- package/dist/src/components/PicZipImportModal/config.d.ts +23 -0
- package/dist/src/components/VLMAnnotation/ImageAnnotationDebugger.d.ts +4 -0
- package/dist/src/components/VLMAnnotation/RegionItem.d.ts +4 -0
- package/dist/src/components/VLMAnnotation/TextAnnotationPanel.d.ts +4 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasDrag.d.ts +13 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasSetup.d.ts +38 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasZoom.d.ts +18 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useCropRegionImage.d.ts +7 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useDeleteControl.d.ts +13 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useDeleteRegion.d.ts +21 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useDrawingMode.d.ts +32 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRLoadingIcon.d.ts +11 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRRecognition.d.ts +28 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionHover.d.ts +13 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionLoader.d.ts +37 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionNameText.d.ts +12 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionSelection.d.ts +15 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionUpdate.d.ts +32 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/hooks/useTextLayouts.d.ts +25 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/index.d.ts +4 -0
- package/dist/src/components/VLMAnnotation/VLMLabelMaker/utils/coordinateUtils.d.ts +32 -0
- package/dist/src/components/VLMAnnotation/components/DragButton.d.ts +7 -0
- package/dist/src/components/VLMAnnotation/components/FitToScreenButton.d.ts +6 -0
- package/dist/src/components/VLMAnnotation/components/RectangleButton.d.ts +7 -0
- package/dist/src/components/VLMAnnotation/components/Toolbar.d.ts +4 -0
- package/dist/src/components/VLMAnnotation/components/ZoomControls.d.ts +4 -0
- package/dist/src/components/VLMAnnotation/constants.d.ts +97 -0
- package/dist/src/components/VLMAnnotation/index.d.ts +6 -0
- package/dist/src/components/VLMAnnotation/types.d.ts +172 -0
- package/dist/src/components/VLMAnnotationDetail/MarkVLMBoxModal/AttributeDetail/index.d.ts +14 -0
- package/dist/src/components/VLMAnnotationDetail/MarkVLMBoxModal/QADetail/QAGenerationConfig.d.ts +12 -0
- package/dist/src/components/VLMAnnotationDetail/MarkVLMBoxModal/QADetail/index.d.ts +12 -0
- package/dist/src/components/VLMAnnotationDetail/MarkVLMBoxModal/index.d.ts +12 -0
- package/dist/src/components/VLMAnnotationDetail/VlmModal/index.d.ts +17 -0
- package/dist/src/components/VLMAnnotationDetail/index.d.ts +6 -0
- package/dist/src/constant.d.ts +1 -1
- package/dist/src/createVlmtasetAnnotation/index.d.ts +16 -0
- package/dist/src/featuresConfig.d.ts +4 -0
- package/dist/src/index.d.ts +3 -0
- package/package.json +2 -2
- package/dist/dataset-annotation.js +0 -123598
- package/dist/dataset-annotation.umd.cjs +0 -1017
- package/dist/example/DatasetAnnotationDemo.d.ts +0 -3
- package/dist/example/DemoTabs.d.ts +0 -3
- package/dist/example/DetectionDatasetDemo.d.ts +0 -5
- package/dist/example/DetectionImageDemo.d.ts +0 -5
- package/dist/example/OcrDatasetDemo.d.ts +0 -5
- package/dist/example/OcrImageDemo.d.ts +0 -5
- package/dist/example/OcrkvcDatasetDemo.d.ts +0 -5
- package/dist/example/constant.local.d.ts +0 -6
- package/dist/example/index.d.ts +0 -1
- package/dist/src/utils/reactCompatibility.d.ts +0 -5
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { useEffect as V, useCallback as Z } from "react";
|
|
2
|
+
import { fabric as o } from "fabric";
|
|
3
|
+
import { CANVAS_CONTAINER_CLASS as q, BASE_STROKE_WIDTH as F } from "../../constants.mjs";
|
|
4
|
+
const $ = ({
|
|
5
|
+
sample: h,
|
|
6
|
+
image: f,
|
|
7
|
+
onImageLoad: y,
|
|
8
|
+
canvasRef: w,
|
|
9
|
+
containerRef: d,
|
|
10
|
+
canvasInitializedRef: S,
|
|
11
|
+
bgImagePositionRef: s,
|
|
12
|
+
bgImageSizeRef: b,
|
|
13
|
+
rectMapRef: U,
|
|
14
|
+
updateTextLayersRef: j,
|
|
15
|
+
onRectPositionUpdated: p,
|
|
16
|
+
setCanvas: a,
|
|
17
|
+
setImage: O,
|
|
18
|
+
setScale: X,
|
|
19
|
+
setBgImagePosition: Y,
|
|
20
|
+
setLoading: C
|
|
21
|
+
}) => (V(() => {
|
|
22
|
+
if (C(!0), O(void 0), a((t) => (t && t.setBackgroundImage(void 0, t.renderAll.bind(t)), t)), s.current = {
|
|
23
|
+
left: 0,
|
|
24
|
+
top: 0
|
|
25
|
+
}, !(h != null && h.fileUrl)) {
|
|
26
|
+
C(!1);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
o.Image.fromURL(h.fileUrl, (t) => {
|
|
30
|
+
t.set({
|
|
31
|
+
originX: "center",
|
|
32
|
+
originY: "center"
|
|
33
|
+
}), O(t), C(!1);
|
|
34
|
+
}, {
|
|
35
|
+
crossOrigin: "anonymous"
|
|
36
|
+
});
|
|
37
|
+
}, [h == null ? void 0 : h.fileUrl, O, C, s, a]), {
|
|
38
|
+
updateCanvas: Z(() => {
|
|
39
|
+
if (!f || !w.current || !d.current)
|
|
40
|
+
return;
|
|
41
|
+
S.current = !1;
|
|
42
|
+
const t = f.getElement();
|
|
43
|
+
if (!(t != null && t.width) || !(t != null && t.height))
|
|
44
|
+
return;
|
|
45
|
+
const N = d.current.offsetWidth, B = d.current.offsetHeight, _ = t.width / t.height, l = N, i = B;
|
|
46
|
+
let r, c;
|
|
47
|
+
if (t.width <= l && t.height <= i)
|
|
48
|
+
r = 1, c = [t.width, t.height];
|
|
49
|
+
else {
|
|
50
|
+
const u = l / t.width, e = i / t.height;
|
|
51
|
+
u > e ? c = [i * _, i] : c = [l, l / _];
|
|
52
|
+
const k = c[0] / t.width, W = c[1] / t.height;
|
|
53
|
+
r = Math.min(k, W);
|
|
54
|
+
}
|
|
55
|
+
s.current = {
|
|
56
|
+
left: 0,
|
|
57
|
+
top: 0
|
|
58
|
+
}, a((u) => {
|
|
59
|
+
let e = u;
|
|
60
|
+
if (e)
|
|
61
|
+
e.setDimensions({
|
|
62
|
+
width: l,
|
|
63
|
+
height: i
|
|
64
|
+
});
|
|
65
|
+
else {
|
|
66
|
+
e = new o.Canvas(w.current, {
|
|
67
|
+
containerClass: q,
|
|
68
|
+
width: l,
|
|
69
|
+
height: i
|
|
70
|
+
}), e.selection = !1;
|
|
71
|
+
const n = e;
|
|
72
|
+
n.uniScaleKey = "", n.uniformScaling = !1, o.Object.prototype.hasRotatingPoint = !1, o.Object.prototype.lockRotation = !0, o.Object.prototype.lockUniScaling = !1, o.Object.prototype.objectCaching = !1, o.Object.prototype.statefullCache = !1, o.Object.prototype.noScaleCache = !1;
|
|
73
|
+
}
|
|
74
|
+
e.setViewportTransform([1, 0, 0, 1, 0, 0]), e.setZoom(r), X(r);
|
|
75
|
+
const k = c[0], W = c[1], D = k / r, K = W / r, A = (l / r - D) / 2, H = (i / r - K) / 2;
|
|
76
|
+
return s.current = {
|
|
77
|
+
left: A,
|
|
78
|
+
top: H
|
|
79
|
+
}, b.current = {
|
|
80
|
+
width: c[0] / r,
|
|
81
|
+
height: c[1] / r
|
|
82
|
+
}, Y({
|
|
83
|
+
left: A,
|
|
84
|
+
top: H
|
|
85
|
+
}), e.setBackgroundImage(f, () => {
|
|
86
|
+
S.current = !0, u && (U.current.forEach((n, x) => {
|
|
87
|
+
const E = {
|
|
88
|
+
x: n.shape.x + s.current.left,
|
|
89
|
+
y: n.shape.y + s.current.top
|
|
90
|
+
};
|
|
91
|
+
x.set({
|
|
92
|
+
left: E.x,
|
|
93
|
+
top: E.y
|
|
94
|
+
});
|
|
95
|
+
const T = F / r;
|
|
96
|
+
x.set({
|
|
97
|
+
strokeWidth: T,
|
|
98
|
+
strokeUniform: !0,
|
|
99
|
+
objectCaching: !1,
|
|
100
|
+
statefullCache: !1,
|
|
101
|
+
noScaleCache: !1
|
|
102
|
+
}), n.textLayouts && n.textLayouts.length > 0 && j.current && j.current(x, n);
|
|
103
|
+
}), p && p(r)), e.renderAll(), u || y && y();
|
|
104
|
+
}, {
|
|
105
|
+
originX: "left",
|
|
106
|
+
originY: "top",
|
|
107
|
+
left: A,
|
|
108
|
+
top: H
|
|
109
|
+
}), e;
|
|
110
|
+
});
|
|
111
|
+
}, [f, w, d, S, s, b, U, j, p, a, X, Y, y])
|
|
112
|
+
});
|
|
113
|
+
export {
|
|
114
|
+
$ as useCanvasSetup
|
|
115
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
var l = Math.pow;
|
|
2
|
+
import { useCallback as h, useEffect as C } from "react";
|
|
3
|
+
import { ZOOM_FACTOR as M, MAX_ZOOM as n, MIN_ZOOM as O } from "../../constants.mjs";
|
|
4
|
+
const w = ({
|
|
5
|
+
canvas: t,
|
|
6
|
+
setScale: m,
|
|
7
|
+
isZoomingRef: f
|
|
8
|
+
}) => {
|
|
9
|
+
const u = h((r, o) => {
|
|
10
|
+
if (!t)
|
|
11
|
+
return;
|
|
12
|
+
o || (o = {
|
|
13
|
+
x: t.getCenter().left,
|
|
14
|
+
y: t.getCenter().top
|
|
15
|
+
});
|
|
16
|
+
let e = t.getZoom();
|
|
17
|
+
e *= l(M, r), e > n && (e = n), e < O && (e = O), f.current = !0, t.zoomToPoint(o, e), m(e), requestAnimationFrame(() => {
|
|
18
|
+
requestAnimationFrame(() => {
|
|
19
|
+
f.current = !1;
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
}, [t, m, f]);
|
|
23
|
+
return C(() => {
|
|
24
|
+
if (!t)
|
|
25
|
+
return;
|
|
26
|
+
const r = (o) => {
|
|
27
|
+
const e = o.e, i = e.deltaY;
|
|
28
|
+
u(i, {
|
|
29
|
+
x: e.offsetX,
|
|
30
|
+
y: e.offsetY
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
return t.on("mouse:wheel", r), () => {
|
|
34
|
+
t.off("mouse:wheel", r);
|
|
35
|
+
};
|
|
36
|
+
}, [t, u]), {
|
|
37
|
+
zoom: u
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
w as useCanvasZoom
|
|
42
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var f = (r, p, n) => new Promise((i, a) => {
|
|
2
|
+
var t = (o) => {
|
|
3
|
+
try {
|
|
4
|
+
c(n.next(o));
|
|
5
|
+
} catch (s) {
|
|
6
|
+
a(s);
|
|
7
|
+
}
|
|
8
|
+
}, e = (o) => {
|
|
9
|
+
try {
|
|
10
|
+
c(n.throw(o));
|
|
11
|
+
} catch (s) {
|
|
12
|
+
a(s);
|
|
13
|
+
}
|
|
14
|
+
}, c = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(t, e);
|
|
15
|
+
c((n = n.apply(r, p)).next());
|
|
16
|
+
});
|
|
17
|
+
import { useCallback as l } from "react";
|
|
18
|
+
import { IMAGE_EXPORT_FORMAT as A } from "../../constants.mjs";
|
|
19
|
+
const _ = (r) => l((n) => f(void 0, null, function* () {
|
|
20
|
+
if (r)
|
|
21
|
+
return new Promise((i, a) => {
|
|
22
|
+
const t = new Image();
|
|
23
|
+
t.crossOrigin = "anonymous", t.onload = () => {
|
|
24
|
+
try {
|
|
25
|
+
const {
|
|
26
|
+
x: e,
|
|
27
|
+
y: c,
|
|
28
|
+
width: o,
|
|
29
|
+
height: s
|
|
30
|
+
} = n.shape, x = e, M = e + o, w = c, I = c + s, T = 0, y = t.width, E = 0, L = t.height, d = Math.max(T, x), v = Math.min(y, M), u = Math.max(E, w), B = Math.min(L, I), m = Math.max(0, v - d), g = Math.max(0, B - u);
|
|
31
|
+
if (m <= 0 || g <= 0) {
|
|
32
|
+
i(void 0);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const C = d, O = u, h = document.createElement("canvas");
|
|
36
|
+
h.width = m, h.height = g;
|
|
37
|
+
const R = h.getContext("2d");
|
|
38
|
+
if (!R) {
|
|
39
|
+
i(void 0);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
R.drawImage(t, C, O, m, g, 0, 0, m, g);
|
|
43
|
+
const b = h.toDataURL(A);
|
|
44
|
+
i(b);
|
|
45
|
+
} catch (e) {
|
|
46
|
+
a(e);
|
|
47
|
+
}
|
|
48
|
+
}, t.onerror = () => {
|
|
49
|
+
a(new Error("Failed to load image"));
|
|
50
|
+
}, t.src = r;
|
|
51
|
+
});
|
|
52
|
+
}), [r]);
|
|
53
|
+
export {
|
|
54
|
+
_ as useCropRegionImage
|
|
55
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { useRef as E, useEffect as I, useCallback as g } from "react";
|
|
2
|
+
import { fabric as f } from "fabric";
|
|
3
|
+
import { DELETE_CONTROL_OFFSET_X as O, DELETE_CONTROL_OFFSET_Y as C, DELETE_ICON_SIZE as T } from "../../constants.mjs";
|
|
4
|
+
import _ from "../icons/del.png.mjs";
|
|
5
|
+
const S = ({
|
|
6
|
+
performDelete: a
|
|
7
|
+
}) => {
|
|
8
|
+
const i = (e) => !(!e.complete || e.naturalWidth === 0), n = E(null);
|
|
9
|
+
return I(() => {
|
|
10
|
+
if (!n.current) {
|
|
11
|
+
const e = document.createElement("img");
|
|
12
|
+
e.src = _, n.current = e;
|
|
13
|
+
}
|
|
14
|
+
}, []), {
|
|
15
|
+
createDeleteControl: g(() => {
|
|
16
|
+
const e = T, r = n.current, d = (t, o, s, D, l) => {
|
|
17
|
+
if (!r)
|
|
18
|
+
return;
|
|
19
|
+
const c = () => {
|
|
20
|
+
t.save(), t.translate(o, s), t.rotate(f.util.degreesToRadians(l.angle || 0)), t.drawImage(r, -e / 2, -e / 2, e, e), t.restore();
|
|
21
|
+
};
|
|
22
|
+
i(r) ? c() : r.onload = () => {
|
|
23
|
+
c();
|
|
24
|
+
const u = l.canvas;
|
|
25
|
+
u && u.renderAll();
|
|
26
|
+
};
|
|
27
|
+
}, m = (t, o) => {
|
|
28
|
+
const s = o.target;
|
|
29
|
+
return a(s), !1;
|
|
30
|
+
};
|
|
31
|
+
return new f.Control({
|
|
32
|
+
x: 0.5,
|
|
33
|
+
// 右侧(0 = 左边,0.5 = 中间,1 = 右边)
|
|
34
|
+
y: -0.5,
|
|
35
|
+
// 顶部(0 = 顶部,0.5 = 中间,1 = 底部)
|
|
36
|
+
offsetX: O,
|
|
37
|
+
// 向右偏移,让按钮更靠近矩形边缘
|
|
38
|
+
offsetY: C,
|
|
39
|
+
// 向上偏移,让按钮更靠近矩形边缘
|
|
40
|
+
cursorStyle: "pointer",
|
|
41
|
+
mouseUpHandler: m,
|
|
42
|
+
render: d,
|
|
43
|
+
sizeX: e,
|
|
44
|
+
sizeY: e
|
|
45
|
+
});
|
|
46
|
+
}, [a])
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
export {
|
|
50
|
+
S as useDeleteControl
|
|
51
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { useRef as t, useCallback as A } from "react";
|
|
2
|
+
import { Modal as L } from "antd";
|
|
3
|
+
import { DELETE_MODAL_TITLE as O, DELETE_MODAL_CONTENT as c, DELETE_MODAL_OK_TEXT as k, DELETE_MODAL_CANCEL_TEXT as C } from "../../constants.mjs";
|
|
4
|
+
const v = ({
|
|
5
|
+
canvas: r,
|
|
6
|
+
onRegionChange: u,
|
|
7
|
+
updateRegionNames: T,
|
|
8
|
+
rectMapRef: f,
|
|
9
|
+
textLayersMapRef: n,
|
|
10
|
+
textLayoutContentMapRef: D,
|
|
11
|
+
regionNameTextMapRef: E,
|
|
12
|
+
ocrLoadingIconMapRef: m
|
|
13
|
+
}) => {
|
|
14
|
+
const o = t(!1);
|
|
15
|
+
return {
|
|
16
|
+
performDelete: A((e) => {
|
|
17
|
+
if (!r || o.current)
|
|
18
|
+
return;
|
|
19
|
+
const d = f.current.get(e);
|
|
20
|
+
d && (o.current = !0, L.confirm({
|
|
21
|
+
title: O,
|
|
22
|
+
content: c,
|
|
23
|
+
okText: k,
|
|
24
|
+
cancelText: C,
|
|
25
|
+
onOk: () => {
|
|
26
|
+
const i = n.current.get(e);
|
|
27
|
+
i && (i.forEach((l) => {
|
|
28
|
+
l.off("mousedown"), l.off("mouseover"), l.off("mouseout"), D.current.delete(l), r.remove(l);
|
|
29
|
+
}), n.current.delete(e));
|
|
30
|
+
const s = E.current.get(e);
|
|
31
|
+
s && (e.off("moved"), e.off("modified"), r.remove(s), E.current.delete(e));
|
|
32
|
+
const _ = m.current.get(e);
|
|
33
|
+
_ && (r.remove(_), m.current.delete(e)), r.remove(e), f.current.delete(e), T(), u && u(d, "delete"), r.renderAll(), o.current = !1;
|
|
34
|
+
},
|
|
35
|
+
onCancel: () => {
|
|
36
|
+
o.current = !1;
|
|
37
|
+
},
|
|
38
|
+
afterClose: () => {
|
|
39
|
+
o.current = !1;
|
|
40
|
+
}
|
|
41
|
+
}));
|
|
42
|
+
}, [r, u, T, f, n, D, E, m])
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
v as useDeleteRegion
|
|
47
|
+
};
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
import { useCallback as Q, useEffect as te } from "react";
|
|
2
|
+
import { fabric as j } from "fabric";
|
|
3
|
+
import { TEMP_RECT_FILL_COLOR as V, RECT_STROKE_COLOR as U, TEMP_RECT_STROKE_DASH_ARRAY as v, TRANSPARENT_FILL as oe, REGION_NAME_PREFIX as re, BASE_STROKE_WIDTH as a } from "../../constants.mjs";
|
|
4
|
+
const ne = ({
|
|
5
|
+
canvas: e,
|
|
6
|
+
drawingMode: x,
|
|
7
|
+
draggable: H,
|
|
8
|
+
setDrawingMode: $,
|
|
9
|
+
canvasToImageCoords: G,
|
|
10
|
+
labelDefinitions: y,
|
|
11
|
+
onChange: T,
|
|
12
|
+
cropRegionImage: K,
|
|
13
|
+
updateRegionShapeAndImage: L,
|
|
14
|
+
performOCRIfNeeded: B,
|
|
15
|
+
createDeleteControl: D,
|
|
16
|
+
updateRegionNameText: N,
|
|
17
|
+
onRegionChange: S,
|
|
18
|
+
onRegionSelect: w,
|
|
19
|
+
rectMapRef: h,
|
|
20
|
+
textLayersMapRef: z
|
|
21
|
+
}) => {
|
|
22
|
+
const X = Q(() => {
|
|
23
|
+
const Y = /* @__PURE__ */ new Set();
|
|
24
|
+
return z.current.forEach((r) => {
|
|
25
|
+
r.forEach((l) => {
|
|
26
|
+
Y.add(l);
|
|
27
|
+
});
|
|
28
|
+
}), Y;
|
|
29
|
+
}, [z]), R = Q(() => {
|
|
30
|
+
e && (e.skipTargetFind = !1);
|
|
31
|
+
}, [e]);
|
|
32
|
+
return te(() => {
|
|
33
|
+
if (!e || !x || H) {
|
|
34
|
+
if (R(), e && !x) {
|
|
35
|
+
const o = e.getActiveObject();
|
|
36
|
+
e.selection = !1, e.skipTargetFind = !1;
|
|
37
|
+
const n = X();
|
|
38
|
+
e.getObjects().forEach((t) => {
|
|
39
|
+
t instanceof j.Rect && n.has(t) ? t.set({
|
|
40
|
+
evented: !0,
|
|
41
|
+
selectable: !1,
|
|
42
|
+
lockMovementX: !0,
|
|
43
|
+
lockMovementY: !0,
|
|
44
|
+
lockScalingX: !0,
|
|
45
|
+
lockScalingY: !0,
|
|
46
|
+
lockRotation: !0
|
|
47
|
+
}) : (t.set("evented", !0), t.set("selectable", !0));
|
|
48
|
+
}), o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll()), e.defaultCursor = "default", e.setCursor("default");
|
|
49
|
+
}
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
R(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((o) => {
|
|
53
|
+
o.set("evented", !1), o.set("selectable", !1);
|
|
54
|
+
}), e.defaultCursor = "crosshair", e.setCursor("crosshair");
|
|
55
|
+
let r = -1, l = -1, d = 0, m = 0, f = null;
|
|
56
|
+
const q = (o) => {
|
|
57
|
+
e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), r = -1, l = -1, d = 0, m = 0;
|
|
58
|
+
const t = e.getPointer(o.e);
|
|
59
|
+
l = t.x, r = t.y, e.skipTargetFind = !0;
|
|
60
|
+
}, P = (o) => {
|
|
61
|
+
if (l === -1 || r === -1)
|
|
62
|
+
return;
|
|
63
|
+
const n = e.getPointer(o.e);
|
|
64
|
+
let t = n.x, c = n.y;
|
|
65
|
+
if (d = Math.abs(t - l), m = Math.abs(c - r), d === 0 || m === 0)
|
|
66
|
+
return;
|
|
67
|
+
let g = r > c ? c : r, C = l > t ? t : l, u = d, k = m;
|
|
68
|
+
f && e.remove(f);
|
|
69
|
+
const A = e.getZoom(), p = a / A;
|
|
70
|
+
f = new j.Rect({
|
|
71
|
+
left: C,
|
|
72
|
+
top: g,
|
|
73
|
+
width: u,
|
|
74
|
+
height: k,
|
|
75
|
+
fill: V,
|
|
76
|
+
stroke: U,
|
|
77
|
+
strokeWidth: p,
|
|
78
|
+
strokeUniform: !0,
|
|
79
|
+
// 边框宽度不受缩放影响
|
|
80
|
+
strokeDashArray: v,
|
|
81
|
+
selectable: !1,
|
|
82
|
+
evented: !1,
|
|
83
|
+
objectCaching: !1,
|
|
84
|
+
// 禁用缓存,避免缩放时边框变虚
|
|
85
|
+
statefullCache: !1,
|
|
86
|
+
noScaleCache: !1
|
|
87
|
+
}), e.add(f), e.renderAll();
|
|
88
|
+
}, W = (o) => {
|
|
89
|
+
if (l === -1 || r === -1) {
|
|
90
|
+
r = -1, l = -1;
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
const n = e.getPointer(o.e);
|
|
94
|
+
let t = n.x, c = n.y;
|
|
95
|
+
if (d = Math.abs(t - l), m = Math.abs(c - r), d === 0 || m === 0) {
|
|
96
|
+
f && (e.remove(f), e.renderAll()), r = -1, l = -1;
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
let g = r > c ? c : r, C = l > t ? t : l, u = d, k = m;
|
|
100
|
+
f && (e.remove(f), f = null);
|
|
101
|
+
const A = G(C, g), p = u, F = k, E = e.getZoom(), b = a / E, s = new j.Rect({
|
|
102
|
+
left: C,
|
|
103
|
+
top: g,
|
|
104
|
+
width: u,
|
|
105
|
+
height: k,
|
|
106
|
+
fill: oe,
|
|
107
|
+
// 无填充色
|
|
108
|
+
stroke: U,
|
|
109
|
+
strokeWidth: b,
|
|
110
|
+
strokeUniform: !0,
|
|
111
|
+
// 边框宽度不受缩放影响
|
|
112
|
+
selectable: !0,
|
|
113
|
+
evented: !0,
|
|
114
|
+
hasRotatingPoint: !1,
|
|
115
|
+
// 隐藏旋转点
|
|
116
|
+
lockRotation: !0,
|
|
117
|
+
// 锁定旋转
|
|
118
|
+
lockUniScaling: !1,
|
|
119
|
+
// 允许非等比缩放,控制点跟随鼠标
|
|
120
|
+
objectCaching: !1,
|
|
121
|
+
// 禁用缓存,避免缩放时边框变虚
|
|
122
|
+
statefullCache: !1,
|
|
123
|
+
noScaleCache: !1
|
|
124
|
+
});
|
|
125
|
+
e.add(s), s.controls.deleteControl = D();
|
|
126
|
+
const Z = h.current.size, _ = {};
|
|
127
|
+
y == null || y.forEach((i) => {
|
|
128
|
+
_[i.id] = "";
|
|
129
|
+
});
|
|
130
|
+
const M = {
|
|
131
|
+
id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
132
|
+
name: `${re}${Z + 1}`,
|
|
133
|
+
// 设置名称:区域+(索引+1)
|
|
134
|
+
shape: {
|
|
135
|
+
name: "rect",
|
|
136
|
+
x: Math.max(0, A.x),
|
|
137
|
+
y: Math.max(0, A.y),
|
|
138
|
+
width: p,
|
|
139
|
+
height: F
|
|
140
|
+
},
|
|
141
|
+
content: _
|
|
142
|
+
};
|
|
143
|
+
if (h.current.set(s, M), N(s, M), L(s), S) {
|
|
144
|
+
const i = h.current.get(s);
|
|
145
|
+
i && S(i, "create");
|
|
146
|
+
}
|
|
147
|
+
K(M).then((i) => {
|
|
148
|
+
if (i) {
|
|
149
|
+
const O = h.current.get(s);
|
|
150
|
+
if (O) {
|
|
151
|
+
if (O.image = i, delete O.textLayouts, T) {
|
|
152
|
+
const ee = Array.from(h.current.values());
|
|
153
|
+
T(ee);
|
|
154
|
+
}
|
|
155
|
+
B(O, "create");
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}).catch((i) => {
|
|
159
|
+
console.error("Failed to crop region image:", i);
|
|
160
|
+
}), e.setActiveObject(s), e.renderAll(), setTimeout(() => {
|
|
161
|
+
if (w) {
|
|
162
|
+
const i = h.current.get(s);
|
|
163
|
+
i && w(i);
|
|
164
|
+
}
|
|
165
|
+
setTimeout(() => {
|
|
166
|
+
if (e && s && e.getObjects().includes(s) && (e.setActiveObject(s), e.renderAll(), w)) {
|
|
167
|
+
const i = h.current.get(s);
|
|
168
|
+
i && w(i);
|
|
169
|
+
}
|
|
170
|
+
}, 0);
|
|
171
|
+
}, 0), s.on("modified", () => {
|
|
172
|
+
L(s);
|
|
173
|
+
}), s.on("moved", () => {
|
|
174
|
+
L(s);
|
|
175
|
+
}), setTimeout(() => {
|
|
176
|
+
if (T) {
|
|
177
|
+
const i = Array.from(h.current.values());
|
|
178
|
+
T(i);
|
|
179
|
+
}
|
|
180
|
+
}, 0), r = -1, l = -1, e.selection = !1, $(!1);
|
|
181
|
+
}, I = (o) => {
|
|
182
|
+
if (l === -1 || r === -1)
|
|
183
|
+
return;
|
|
184
|
+
const t = e.getElement().getBoundingClientRect(), c = o.clientX, g = o.clientY;
|
|
185
|
+
if (c >= t.left && c <= t.right && g >= t.top && g <= t.bottom) {
|
|
186
|
+
const u = e.getPointer(o);
|
|
187
|
+
P({
|
|
188
|
+
e: o,
|
|
189
|
+
pointer: u
|
|
190
|
+
});
|
|
191
|
+
} else {
|
|
192
|
+
const u = e.getZoom(), k = e.viewportTransform ? e.viewportTransform[4] / u : 0, A = e.viewportTransform ? e.viewportTransform[5] / u : 0, p = e.getWidth() / u, F = e.getHeight() / u;
|
|
193
|
+
let E = (c - t.left) / u - k, b = (g - t.top) / u - A;
|
|
194
|
+
if (E = Math.max(0, Math.min(E, p)), b = Math.max(0, Math.min(b, F)), d = Math.abs(E - l), m = Math.abs(b - r), d === 0 || m === 0)
|
|
195
|
+
return;
|
|
196
|
+
let s = r > b ? b : r, Z = l > E ? E : l, _ = d, M = m;
|
|
197
|
+
f && e.remove(f);
|
|
198
|
+
const i = e.getZoom(), O = a / i;
|
|
199
|
+
f = new j.Rect({
|
|
200
|
+
left: Z,
|
|
201
|
+
top: s,
|
|
202
|
+
width: _,
|
|
203
|
+
height: M,
|
|
204
|
+
fill: V,
|
|
205
|
+
stroke: U,
|
|
206
|
+
strokeWidth: O,
|
|
207
|
+
strokeUniform: !0,
|
|
208
|
+
strokeDashArray: v,
|
|
209
|
+
selectable: !1,
|
|
210
|
+
evented: !1,
|
|
211
|
+
objectCaching: !1,
|
|
212
|
+
statefullCache: !1,
|
|
213
|
+
noScaleCache: !1
|
|
214
|
+
}), e.add(f), e.renderAll();
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
e.on("mouse:down", q), e.on("mouse:move", P), e.on("mouse:up", W), document.addEventListener("mousemove", I);
|
|
218
|
+
const J = (o) => {
|
|
219
|
+
if (l === -1 || r === -1)
|
|
220
|
+
return;
|
|
221
|
+
const n = e.getPointer(o);
|
|
222
|
+
W({
|
|
223
|
+
e: o,
|
|
224
|
+
pointer: n
|
|
225
|
+
});
|
|
226
|
+
};
|
|
227
|
+
return document.addEventListener("mouseup", J), () => {
|
|
228
|
+
e.off("mouse:down", q), e.off("mouse:move", P), e.off("mouse:up", W), document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", J), f && (e.remove(f), e.renderAll()), e.skipTargetFind = !1;
|
|
229
|
+
const o = X();
|
|
230
|
+
e.getObjects().forEach((n) => {
|
|
231
|
+
n instanceof j.Rect && o.has(n) ? n.set({
|
|
232
|
+
evented: !0,
|
|
233
|
+
selectable: !1,
|
|
234
|
+
lockMovementX: !0,
|
|
235
|
+
lockMovementY: !0,
|
|
236
|
+
lockScalingX: !0,
|
|
237
|
+
lockScalingY: !0,
|
|
238
|
+
lockRotation: !0
|
|
239
|
+
}) : (n.set("evented", !0), n.set("selectable", !0));
|
|
240
|
+
});
|
|
241
|
+
};
|
|
242
|
+
}, [e, x, H, R, G, T, K, L, B, D, N, S, w, $, h, X]), {
|
|
243
|
+
stopDraw: R
|
|
244
|
+
};
|
|
245
|
+
};
|
|
246
|
+
export {
|
|
247
|
+
ne as useDrawingMode
|
|
248
|
+
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { useRef as h, useCallback as W, useEffect as X } from "react";
|
|
2
|
+
import { fabric as l } from "fabric";
|
|
3
|
+
import { OCR_SCAN_LINE_GLOW_MULTIPLIER as Y, OCR_SCAN_LINE_GLOW_COLOR as k, OCR_SCAN_LINE_BRIGHT_COLOR as G, OCR_SCAN_LINE_CORE_POSITION_MULTIPLIER as P, OCR_SCAN_LINE_CORE_HEIGHT_MULTIPLIER as Z, OCR_SCAN_LINE_CORE_COLOR as j, OCR_SCAN_LINE_BASE_HEIGHT as B, OCR_SCAN_ANIMATION_SPEED as F } from "../../constants.mjs";
|
|
4
|
+
const v = (t) => {
|
|
5
|
+
const o = h(/* @__PURE__ */ new Map()), c = h(null), L = W((e, U, C) => {
|
|
6
|
+
if (!t)
|
|
7
|
+
return;
|
|
8
|
+
const _ = o.current.get(e);
|
|
9
|
+
if (_ && (t.remove(_), o.current.delete(e)), !C)
|
|
10
|
+
return;
|
|
11
|
+
const s = t.getZoom(), O = e.left || 0, p = e.top || 0, I = e.getScaledWidth();
|
|
12
|
+
e.getScaledHeight();
|
|
13
|
+
const i = B, a = I * s, m = new l.Rect({
|
|
14
|
+
left: 0,
|
|
15
|
+
top: 0,
|
|
16
|
+
width: a,
|
|
17
|
+
height: i * Y,
|
|
18
|
+
// 光晕层更宽
|
|
19
|
+
fill: k,
|
|
20
|
+
// 紫色光晕
|
|
21
|
+
selectable: !1,
|
|
22
|
+
evented: !1,
|
|
23
|
+
originX: "left",
|
|
24
|
+
originY: "top"
|
|
25
|
+
}), E = new l.Rect({
|
|
26
|
+
left: 0,
|
|
27
|
+
top: i,
|
|
28
|
+
width: a,
|
|
29
|
+
height: i,
|
|
30
|
+
fill: G,
|
|
31
|
+
// 紫色较亮层
|
|
32
|
+
selectable: !1,
|
|
33
|
+
evented: !1,
|
|
34
|
+
originX: "left",
|
|
35
|
+
originY: "top"
|
|
36
|
+
}), S = new l.Rect({
|
|
37
|
+
left: 0,
|
|
38
|
+
top: i * P,
|
|
39
|
+
width: a,
|
|
40
|
+
height: i * Z,
|
|
41
|
+
fill: j,
|
|
42
|
+
// 紫色核心线条
|
|
43
|
+
selectable: !1,
|
|
44
|
+
evented: !1,
|
|
45
|
+
originX: "left",
|
|
46
|
+
originY: "top"
|
|
47
|
+
}), r = new l.Group([m, E, S], {
|
|
48
|
+
left: O,
|
|
49
|
+
top: p,
|
|
50
|
+
// 初始位置在顶部
|
|
51
|
+
originX: "left",
|
|
52
|
+
originY: "top",
|
|
53
|
+
selectable: !1,
|
|
54
|
+
evented: !1,
|
|
55
|
+
lockMovementX: !0,
|
|
56
|
+
lockMovementY: !0,
|
|
57
|
+
lockScalingX: !1,
|
|
58
|
+
lockScalingY: !1,
|
|
59
|
+
lockRotation: !0,
|
|
60
|
+
hasControls: !1,
|
|
61
|
+
hasBorders: !1,
|
|
62
|
+
objectCaching: !1,
|
|
63
|
+
statefullCache: !1,
|
|
64
|
+
noScaleCache: !1,
|
|
65
|
+
scaleX: 1 / s,
|
|
66
|
+
// 反向缩放,抵消画布缩放,保持固定视觉粗细
|
|
67
|
+
scaleY: 1 / s
|
|
68
|
+
// 反向缩放,抵消画布缩放,保持固定视觉粗细
|
|
69
|
+
});
|
|
70
|
+
t.add(r), o.current.set(e, r);
|
|
71
|
+
let n = 0, f = 1;
|
|
72
|
+
const N = F, d = () => {
|
|
73
|
+
if (!o.current.has(e) || !t)
|
|
74
|
+
return;
|
|
75
|
+
const A = e.left || 0, b = e.top || 0, H = e.getScaledWidth(), T = e.getScaledHeight(), g = t.getZoom();
|
|
76
|
+
n += N * f, n >= 1 ? (n = 1, f = -1) : n <= 0 && (n = 0, f = 1);
|
|
77
|
+
const w = b + n * T;
|
|
78
|
+
r.set({
|
|
79
|
+
left: A,
|
|
80
|
+
top: w,
|
|
81
|
+
scaleX: 1 / g,
|
|
82
|
+
// 反向缩放,抵消画布缩放,保持固定视觉粗细
|
|
83
|
+
scaleY: 1 / g
|
|
84
|
+
// 反向缩放,抵消画布缩放,保持固定视觉粗细
|
|
85
|
+
});
|
|
86
|
+
const u = r.getObjects();
|
|
87
|
+
if (u && u.length > 0) {
|
|
88
|
+
const M = H * g;
|
|
89
|
+
u.forEach((R) => {
|
|
90
|
+
R instanceof l.Rect && R.set("width", M);
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
t.renderAll(), c.current = requestAnimationFrame(d);
|
|
94
|
+
};
|
|
95
|
+
d();
|
|
96
|
+
}, [t]);
|
|
97
|
+
return X(() => () => {
|
|
98
|
+
c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
|
|
99
|
+
}, []), {
|
|
100
|
+
updateOCRLoadingIcon: L,
|
|
101
|
+
ocrLoadingIconMapRef: o
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
export {
|
|
105
|
+
v as useOCRLoadingIcon
|
|
106
|
+
};
|