Skip to content
This repository was archived by the owner on May 30, 2023. It is now read-only.

Commit e1914a7

Browse files
ttattlttattl
authored
Merge pull request #301 from daita-technologies/update/adjustments
Update: adjustments
2 parents 310693d + 81d75bf commit e1914a7

40 files changed

Lines changed: 569 additions & 240 deletions

‎src/components/Annotation/Editor/Shape/EllipseShape.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
selectorSelectedEllipse,
1414
} from "reduxes/annotation/selector";
1515
import { DrawObject, DrawState, DrawType } from "reduxes/annotation/type";
16-
import { selectorCurrentImageInEditorProps } from "reduxes/annotationmanager/selecetor";
16+
import { selectorCurrentImageInEditorProps } from "reduxes/annotationmanager/selector";
1717
import { CIRCLE_STYLE, CORNER_RADIUS, LINE_STYLE } from "../const";
1818
import { EllipseCompProps, EllipseProps, EllipseSpec } from "../type";
1919
import useCommonShapeEvent from "../useCommonShapeEvent";
@@ -193,6 +193,8 @@ function EllipseComp({
193193
{...spec.cssStyle}
194194
strokeWidth={strokeWidth}
195195
visible={drawObjectState ? !drawObjectState.isHidden : true}
196+
onMouseEnter={commonShapeEvent.handleMouseEnter}
197+
onMouseLeave={commonShapeEvent.handleMouseLeave}
196198
/>
197199
{isSelected && commonShapeEvent.isLock !== true && (
198200
<Transformer

‎src/components/Annotation/Editor/Shape/Polygon.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,8 @@ function PolygonComp({
391391
onMouseDown={mousedownHandler}
392392
onClick={commonShapeEvent.handleCick}
393393
visible={isVisible}
394+
onMouseEnter={commonShapeEvent.handleMouseEnter}
395+
onMouseLeave={commonShapeEvent.handleMouseLeave}
394396
>
395397
<Line
396398
points={flattenedPoints}

‎src/components/Annotation/Editor/Shape/Rectangle.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
selectorSelectedRectangle,
1414
} from "reduxes/annotation/selector";
1515
import { DrawObject, DrawState, DrawType } from "reduxes/annotation/type";
16-
import { selectorCurrentImageInEditorProps } from "reduxes/annotationmanager/selecetor";
16+
import { selectorCurrentImageInEditorProps } from "reduxes/annotationmanager/selector";
1717
import { CIRCLE_STYLE, CORNER_RADIUS, LINE_STYLE } from "../const";
1818
import { RectangleCompProps, RectangleProps, RectangleSpec } from "../type";
1919
import useCommonShapeEvent from "../useCommonShapeEvent";
@@ -166,6 +166,8 @@ function RectangleComp({
166166
onDragEnd={handleDragEnd}
167167
onTransformEnd={handleTransformEnd}
168168
strokeScaleEnabled={false}
169+
onMouseEnter={commonShapeEvent.handleMouseEnter}
170+
onMouseLeave={commonShapeEvent.handleMouseLeave}
169171
{...spec}
170172
{...spec.cssStyle}
171173
strokeWidth={strokeWidth}

‎src/components/Annotation/Editor/useCommonShapeEvent.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,33 @@ const useCommonShapeEvent = ({
7373
e.cancelBubble = true;
7474
}
7575
};
76-
76+
const handleMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
77+
const stage = e.target?.getStage();
78+
if (stage) {
79+
const container = stage.container();
80+
if (currentDrawState === DrawState.SELECTING) {
81+
container.style.cursor = "move";
82+
} else {
83+
container.style.cursor = "default";
84+
}
85+
}
86+
};
87+
const handleMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
88+
const stage = e.target?.getStage();
89+
if (stage) {
90+
const container = stage.container();
91+
container.style.cursor = "default";
92+
}
93+
};
7794
return {
7895
handleDragEnd,
7996
handleDragStart,
8097
handleCick,
8198
handleTransformStart,
8299
handleTransformEnd,
83100
handleSelect,
101+
handleMouseEnter,
102+
handleMouseLeave,
84103
isLock,
85104
};
86105
};

‎src/components/Annotation/Formart/daita/index.ts‎

Lines changed: 57 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,18 @@ import {
66
PolygonSpec,
77
RectangleSpec,
88
} from "components/Annotation/Editor/type";
9-
import { loadImage } from "components/UploadFile";
109
import { DrawObject, DrawType } from "reduxes/annotation/type";
1110

1211
import {
1312
AnnotationDaitaFormatter,
1413
AnnotationFormatter,
1514
AnnotationImportInfo,
16-
FileAndAnnotationImportInfo,
1715
ID_2_LABEL_DAITA,
18-
LABEL_2_ID_DAITA,
1916
PolygonShape,
2017
Shape,
2118
ShapeType,
2219
} from "./type";
2320

24-
const readImage = async (url: string) => {
25-
const response = await fetch(url);
26-
const data = await response.blob();
27-
const metadata = {
28-
type: "image/png",
29-
};
30-
const split = url.split("/");
31-
const filename = split[split.length - 1];
32-
const file = new File([data], filename, metadata);
33-
const image = await loadImage(file);
34-
return {
35-
height: image.image.height,
36-
width: image.image.width,
37-
image: file,
38-
};
39-
};
4021
export const importFileAndAnnotationFromDaitaAI = (
4122
file: File
4223
): Promise<AnnotationImportInfo> =>
@@ -69,42 +50,48 @@ export const importFileAndAnnotationFromDaitaAI = (
6950
});
7051
};
7152
});
72-
export const importFileAndAnnotation = (
73-
file: File
74-
): Promise<FileAndAnnotationImportInfo> =>
75-
new Promise<FileAndAnnotationImportInfo>((resolve) => {
76-
const reader = new FileReader();
77-
reader.readAsText(file);
78-
const drawObjectById: Record<string, DrawObject> = {};
79-
reader.onloadend = async () => {
80-
const annotationFormatter: AnnotationFormatter = JSON.parse(
81-
reader.result as string
82-
);
83-
const property = await readImage(annotationFormatter.image_path);
53+
// export const importFileAndAnnotation = (
54+
// file: File
55+
// ): Promise<FileAndAnnotationImportInfo> =>
56+
// new Promise<FileAndAnnotationImportInfo>((resolve) => {
57+
// const reader = new FileReader();
58+
// reader.readAsText(file);
59+
// const drawObjectById: Record<string, DrawObject> = {};
60+
// reader.onloadend = async () => {
61+
// const annotationFormatter: AnnotationFormatter = JSON.parse(
62+
// reader.result as string
63+
// );
64+
// let property = null;
65+
// if (annotationFormatter.image_path) {
66+
// property = await readImage(annotationFormatter.image_path);
67+
// }
8468

85-
annotationFormatter.annotations.forEach((annotation) => {
86-
const drawObject = createPolygon({ x: 0, y: 0 });
87-
const formatedPoints = annotation.coordinates.map((arr) => ({
88-
x: arr[0],
89-
y: arr[1],
90-
}));
91-
drawObjectById[drawObject.data.id] = {
92-
type: drawObject.type,
93-
data: {
94-
...drawObject.data,
95-
points: formatedPoints,
96-
polygonState: { isFinished: true },
97-
label: { label: ID_2_LABEL_DAITA[annotation.category_id] },
98-
},
99-
};
100-
});
101-
resolve({
102-
annotationImagesProperty: property,
103-
drawObjectById,
104-
});
105-
};
106-
});
107-
export const importAnnotation = (file: File): Promise<AnnotationImportInfo> =>
69+
// annotationFormatter.annotations.forEach((annotation) => {
70+
// const drawObject = createPolygon({ x: 0, y: 0 });
71+
// const formatedPoints = annotation.coordinates.map((arr) => ({
72+
// x: arr[0],
73+
// y: arr[1],
74+
// }));
75+
// drawObjectById[drawObject.data.id] = {
76+
// type: drawObject.type,
77+
// data: {
78+
// ...drawObject.data,
79+
// points: formatedPoints,
80+
// polygonState: { isFinished: true },
81+
// label: { label: ID_2_LABEL_DAITA[annotation.category_id] },
82+
// },
83+
// };
84+
// });
85+
// resolve({
86+
// annotationImagesProperty: property,
87+
// drawObjectById,
88+
// });
89+
// };
90+
// });
91+
export const importAnnotation = (
92+
file: File,
93+
idToLabelStr: Record<string, string>
94+
): Promise<AnnotationImportInfo> =>
10895
new Promise<AnnotationImportInfo>((resolve) => {
10996
const reader = new FileReader();
11097
reader.readAsText(file);
@@ -129,7 +116,7 @@ export const importAnnotation = (file: File): Promise<AnnotationImportInfo> =>
129116
isFinished: true,
130117
isLineStrip: annotation.shapeType === ShapeType.LINE_STRIP,
131118
},
132-
label: { label: ID_2_LABEL_DAITA[annotation.categoryId] },
119+
label: { label: idToLabelStr[annotation.categoryId] },
133120
} as PolygonSpec,
134121
};
135122
} else if (annotation.shapeType === ShapeType.RECTANGLE) {
@@ -140,7 +127,7 @@ export const importAnnotation = (file: File): Promise<AnnotationImportInfo> =>
140127
data: {
141128
...drawObject.data,
142129
...spec,
143-
label: { label: ID_2_LABEL_DAITA[annotation.categoryId] },
130+
label: { label: idToLabelStr[annotation.categoryId] },
144131
} as RectangleSpec,
145132
};
146133
} else if (annotation.shapeType === ShapeType.ELLIPSE) {
@@ -151,7 +138,7 @@ export const importAnnotation = (file: File): Promise<AnnotationImportInfo> =>
151138
data: {
152139
...drawObject.data,
153140
...spec,
154-
label: { label: ID_2_LABEL_DAITA[annotation.categoryId] },
141+
label: { label: idToLabelStr[annotation.categoryId] },
155142
} as EllipseSpec,
156143
};
157144
}
@@ -164,7 +151,8 @@ export const importAnnotation = (file: File): Promise<AnnotationImportInfo> =>
164151
});
165152

166153
export const convert = (
167-
drawObjectById: Record<string, DrawObject>
154+
drawObjectById: Record<string, DrawObject>,
155+
labelStrToId: Record<string, string>
168156
): Shape[] => {
169157
const shapes: Shape[] = [];
170158
Object.entries(drawObjectById).forEach(([, value]) => {
@@ -176,40 +164,42 @@ export const convert = (
176164
value.type === DrawType.POLYGON
177165
? ShapeType.POLYGON
178166
: ShapeType.LINE_STRIP,
179-
categoryId: LABEL_2_ID_DAITA[label.label],
167+
categoryId: labelStrToId[label.label],
180168
});
181169
} else if (value.type === DrawType.RECTANGLE) {
182170
const { width, height, x, y, label } = value.data as RectangleSpec;
183171
shapes.push({
184172
shapeSpec: { width, height, x, y },
185173
shapeType: ShapeType.RECTANGLE,
186-
categoryId: LABEL_2_ID_DAITA[label.label],
174+
categoryId: labelStrToId[label.label],
187175
});
188176
} else if (value.type === DrawType.ELLIPSE) {
189177
const { x, y, radiusX, radiusY, label } = value.data as EllipseSpec;
190178
shapes.push({
191179
shapeSpec: { x, y, radiusX, radiusY },
192180
shapeType: ShapeType.ELLIPSE,
193-
categoryId: LABEL_2_ID_DAITA[label.label],
181+
categoryId: labelStrToId[label.label],
194182
});
195183
}
196184
});
197185
return shapes;
198186
};
199187
export const exportAnnotationToJson = (
200-
drawObjectById: Record<string, DrawObject>
188+
drawObjectById: Record<string, DrawObject>,
189+
labelStrToId: Record<string, string>
201190
) => {
202-
const shapes: Shape[] = convert(drawObjectById);
203-
const annotationFormatter: AnnotationDaitaFormatter = {
191+
const shapes: Shape[] = convert(drawObjectById, labelStrToId);
192+
const annotationDaitaFormatter: AnnotationDaitaFormatter = {
204193
shapes,
205194
};
206-
return annotationFormatter;
195+
return annotationDaitaFormatter;
207196
};
208197
export const exportAnnotation = (
209198
drawObjectById: Record<string, DrawObject>,
210-
imageName: string
199+
imageName: string,
200+
labelStrToId: Record<string, string>
211201
) => {
212-
const json = exportAnnotationToJson(drawObjectById);
202+
const json = exportAnnotationToJson(drawObjectById, labelStrToId);
213203
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
214204
JSON.stringify(json, null, 2)
215205
)}`;

‎src/components/Annotation/Formart/daita/type.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export enum ShapeType {
2020
export interface Shape {
2121
shapeSpec: ShapeSpec;
2222
shapeType: ShapeType;
23-
categoryId: number;
23+
categoryId: string;
2424
}
2525
export type RectangleShape = Pick<
2626
RectangleSpec,
@@ -36,7 +36,7 @@ export interface AnnotationFormatter {
3636
annotations: Annotation[];
3737
}
3838
export interface FileAndAnnotationImportInfo {
39-
annotationImagesProperty: AnnotationImagesProperty;
39+
annotationImagesProperty: AnnotationImagesProperty | null;
4040
drawObjectById: Record<string, DrawObject>;
4141
}
4242
export interface AnnotationImportInfo {

‎src/components/Annotation/Formart/index.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
export { exportAnnotation as exportAnnotationLabelBox } from "./labelbox/index";
1+
export {
2+
exportAnnotation as exportAnnotationLabelBox,
3+
importAnnotation as importAnnotationLabelBox,
4+
} from "./labelbox/index";
25
export {
36
exportAnnotation as exportAnnotationLabelMe,
47
importAnnotation as importAnnotationLabelMe,
@@ -9,7 +12,6 @@ export {
912
} from "./scaleai/index";
1013
export {
1114
exportAnnotation as exportAnnotationDaita,
12-
importFileAndAnnotation as importFileAnnotationDaita,
13-
importAnnotation as importAnnotationDaita,
14-
exportAnnotationToJson as importAnnotationDaitaToJson,
15+
// importFileAndAnnotation as importFileAnnotationDaita,
16+
importAnnotation as importAnnotationDaita, // exportAnnotationToJson as importAnnotationDaitaToJson,
1517
} from "./daita/index";

‎src/components/Annotation/Formart/labelbox/index.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
import { createPolygon } from "components/Annotation/Editor/Shape/Polygon";
12
import { PolygonSpec, RectangleSpec } from "components/Annotation/Editor/type";
23
import { DrawObject, DrawType } from "reduxes/annotation/type";
4+
import { AnnotationImportInfo, ID_2_LABEL_DAITA } from "../daita/type";
35
import {
46
AnnotationFormatter,
57
createAnnotationFormatter,
8+
FileAndAnnotationImportInfo,
69
LabelLabelBox,
710
Point,
811
} from "./type";
@@ -66,3 +69,34 @@ export const exportAnnotation = (
6669

6770
link.click();
6871
};
72+
export const importAnnotation = (file: File): Promise<AnnotationImportInfo> =>
73+
new Promise<AnnotationImportInfo>((resolve) => {
74+
const reader = new FileReader();
75+
reader.readAsText(file);
76+
const drawObjectById: Record<string, DrawObject> = {};
77+
reader.onloadend = async () => {
78+
const annotationFormatter: AnnotationFormatter = JSON.parse(
79+
reader.result as string
80+
);
81+
Object.entries(annotationFormatter.Label).map(([label, geometrys]) => {
82+
geometrys.forEach((geometry) => {
83+
const drawObject = createPolygon({ x: 0, y: 0 });
84+
drawObjectById[drawObject.data.id] = {
85+
type: drawObject.type,
86+
data: {
87+
...drawObject.data,
88+
points: geometry.geometry,
89+
polygonState: {
90+
isFinished: true,
91+
},
92+
label: { label },
93+
} as PolygonSpec,
94+
};
95+
});
96+
97+
resolve({
98+
drawObjectById,
99+
});
100+
});
101+
};
102+
});

0 commit comments

Comments
 (0)