-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Display of Annotation Type #1192
Changes from 4 commits
fd3e896
1ec2869
98f1fd2
5c170c8
732f95c
b79deae
cec9060
e21c824
9bb111b
0405dbb
9d6a095
00598ab
48eca64
4bf3e48
ec69c8a
904a206
14659bd
30cda12
c1149bf
3695a5d
adf086d
f34ba1f
cccecb0
58e41fa
3513fe7
c3590a1
562ea5f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -37,6 +37,7 @@ import { | |
Mode, | ||
Size, | ||
} from './canvasModel'; | ||
import { isNullOrUndefined } from 'util'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The symbol is unused |
||
|
||
export interface CanvasView { | ||
html(): HTMLDivElement; | ||
|
@@ -114,14 +115,15 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
} | ||
} | ||
|
||
private onEditDone(state: any, points: number[]): void { | ||
if (state && points) { | ||
private onEditDone(state: any, points: number[], annotation_type: string): void { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I suppose if a shape was edited it always become manual. Right? It's why I believe we do not need this argument and return value in event details below in this case. |
||
if (state && points && annotation_type) { | ||
const event: CustomEvent = new CustomEvent('canvas.edited', { | ||
bubbles: false, | ||
cancelable: true, | ||
detail: { | ||
state, | ||
points, | ||
annotation_type, | ||
}, | ||
}); | ||
|
||
|
@@ -433,9 +435,11 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
)); | ||
if (e.ctrlKey) { | ||
const { points } = state; | ||
const annotation_type = 'Manual'; | ||
self.onEditDone( | ||
state, | ||
points.slice(0, pointID * 2).concat(points.slice(pointID * 2 + 2)), | ||
annotation_type, | ||
); | ||
} else if (e.shiftKey) { | ||
self.canvas.dispatchEvent(new CustomEvent('canvas.editstart', { | ||
|
@@ -859,6 +863,7 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
attributes: { ...state.attributes }, | ||
zOrder: state.zOrder, | ||
pinned: state.pinned, | ||
annotation_type: state.annotation_type, | ||
}; | ||
} | ||
|
||
|
@@ -1174,7 +1179,8 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
id: state.clientID, | ||
}, | ||
})); | ||
this.onEditDone(state, points); | ||
const annotation_type = 'Manual'; | ||
this.onEditDone(state, points, annotation_type); | ||
} | ||
}); | ||
} | ||
|
@@ -1222,6 +1228,7 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
+ `${shape.attr('x') + shape.attr('width')},` | ||
+ `${shape.attr('y') + shape.attr('height')}`, | ||
).map((x: number): number => x - offset); | ||
const annotation_type = 'Manual'; | ||
|
||
this.drawnStates[state.clientID].points = points; | ||
this.canvas.dispatchEvent(new CustomEvent('canvas.resizeshape', { | ||
|
@@ -1231,7 +1238,7 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
id: state.clientID, | ||
}, | ||
})); | ||
this.onEditDone(state, points); | ||
this.onEditDone(state, points, annotation_type); | ||
} | ||
}); | ||
|
||
|
@@ -1313,14 +1320,14 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
} | ||
|
||
private addText(state: any): SVG.Text { | ||
const { label, clientID, attributes } = state; | ||
const { label, clientID, attributes, annotation_type } = state; | ||
const attrNames = label.attributes.reduce((acc: any, val: any): void => { | ||
acc[val.id] = val.name; | ||
return acc; | ||
}, {}); | ||
|
||
return this.adoptedText.text((block): void => { | ||
block.tspan(`${label.name} ${clientID}`).style('text-transform', 'uppercase'); | ||
block.tspan(`${label.name} ${clientID} (${annotation_type})`).style('text-transform', 'uppercase'); | ||
for (const attrID of Object.keys(attributes)) { | ||
block.tspan(`${attrNames[attrID]}: ${attributes[attrID]}`).attr({ | ||
attrID, | ||
|
@@ -1333,6 +1340,9 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
|
||
private addRect(points: number[], state: any): SVG.Rect { | ||
const [xtl, ytl, xbr, ybr] = points; | ||
if (typeof (state.annotation_type) === 'undefined') { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How is it possible? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The same question in two cases below There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In some cases, especially in case of tracks, the value becomes |
||
state.annotation_type = 'Manual'; | ||
} | ||
const rect = this.adoptedContent.rect().size(xbr - xtl, ybr - ytl).attr({ | ||
clientID: state.clientID, | ||
'color-rendering': 'optimizeQuality', | ||
|
@@ -1342,6 +1352,7 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
stroke: state.color, | ||
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, | ||
'data-z-order': state.zOrder, | ||
annotation_type: state.annotation_type, | ||
}).move(xtl, ytl) | ||
.addClass('cvat_canvas_shape'); | ||
|
||
|
@@ -1357,6 +1368,9 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
} | ||
|
||
private addPolygon(points: string, state: any): SVG.Polygon { | ||
if (typeof (state.annotation_type) === 'undefined') { | ||
state.annotation_type = 'Manual'; | ||
} | ||
const polygon = this.adoptedContent.polygon(points).attr({ | ||
clientID: state.clientID, | ||
'color-rendering': 'optimizeQuality', | ||
|
@@ -1366,6 +1380,7 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
stroke: state.color, | ||
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, | ||
'data-z-order': state.zOrder, | ||
annotation_type: state.annotation_type, | ||
}).addClass('cvat_canvas_shape'); | ||
|
||
if (state.occluded) { | ||
|
@@ -1380,6 +1395,9 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
} | ||
|
||
private addPolyline(points: string, state: any): SVG.PolyLine { | ||
if (typeof (state.annotation_type) === 'undefined') { | ||
state.annotation_type = 'Manual'; | ||
} | ||
const polyline = this.adoptedContent.polyline(points).attr({ | ||
clientID: state.clientID, | ||
'color-rendering': 'optimizeQuality', | ||
|
@@ -1389,6 +1407,7 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
stroke: state.color, | ||
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale, | ||
'data-z-order': state.zOrder, | ||
annotation_type: state.annotation_type, | ||
}).addClass('cvat_canvas_shape'); | ||
|
||
if (state.occluded) { | ||
|
@@ -1424,12 +1443,14 @@ export class CanvasViewImpl implements CanvasView, Listener { | |
} | ||
|
||
private addPoints(points: string, state: any): SVG.PolyLine { | ||
state.annotation_type = 'Manual'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why points are always There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. From my understanding, TF auto annotation API does not support shapes other than rectangles. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @Priya4607 |
||
const shape = this.adoptedContent.polyline(points).attr({ | ||
'color-rendering': 'optimizeQuality', | ||
'pointer-events': 'none', | ||
'shape-rendering': 'geometricprecision', | ||
'stroke-width': 0, | ||
fill: state.color, // to right fill property when call SVG.Shape::clone() | ||
fill: state.color, // to right fill property when call SVG.Shape::clone( | ||
annotation_type: state.annotation_type, | ||
}).style({ | ||
opacity: 0, | ||
}); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -178,9 +178,11 @@ export class DrawHandlerImpl implements DrawHandler { | |
this.cancel(); | ||
|
||
if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) { | ||
this.drawData.annotation_type = 'Manual'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we change this file? |
||
this.onDrawDone({ | ||
shapeType, | ||
points: [xtl, ytl, xbr, ybr], | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp); | ||
} | ||
}).on('drawupdate', (): void => { | ||
|
@@ -211,9 +213,11 @@ export class DrawHandlerImpl implements DrawHandler { | |
this.cancel(); | ||
|
||
if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) { | ||
this.drawData.annotation_type = 'Manual'; | ||
this.onDrawDone({ | ||
shapeType, | ||
points: [xtl, ytl, xbr, ybr], | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp); | ||
} | ||
} | ||
|
@@ -298,23 +302,29 @@ export class DrawHandlerImpl implements DrawHandler { | |
if (shapeType === 'polygon' | ||
&& ((box.xbr - box.xtl) * (box.ybr - box.ytl) >= consts.AREA_THRESHOLD) | ||
&& points.length >= 3 * 2) { | ||
this.drawData.annotation_type = 'Manual'; | ||
this.onDrawDone({ | ||
shapeType, | ||
points, | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp); | ||
} else if (shapeType === 'polyline' | ||
&& ((box.xbr - box.xtl) >= consts.SIZE_THRESHOLD | ||
|| (box.ybr - box.ytl) >= consts.SIZE_THRESHOLD) | ||
&& points.length >= 2 * 2) { | ||
this.drawData.annotation_type = 'Manual'; | ||
this.onDrawDone({ | ||
shapeType, | ||
points, | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp); | ||
} else if (shapeType === 'points' | ||
&& (e.target as any).getAttribute('points') !== '0,0') { | ||
this.drawData.annotation_type = 'Manual'; | ||
this.onDrawDone({ | ||
shapeType, | ||
points, | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp); | ||
} | ||
}); | ||
|
@@ -358,6 +368,7 @@ export class DrawHandlerImpl implements DrawHandler { | |
|
||
const { points } = this.getFinalPolyshapeCoordinates(targetPoints); | ||
this.release(); | ||
this.drawData.annotation_type = 'Manual'; | ||
this.onDrawDone({ | ||
shapeType: this.drawData.initialState.shapeType, | ||
objectType: this.drawData.initialState.objectType, | ||
|
@@ -366,6 +377,7 @@ export class DrawHandlerImpl implements DrawHandler { | |
attributes: { ...this.drawData.initialState.attributes }, | ||
label: this.drawData.initialState.label, | ||
color: this.drawData.initialState.color, | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp, e.detail.originalEvent.ctrlKey); | ||
}); | ||
} | ||
|
@@ -398,6 +410,7 @@ export class DrawHandlerImpl implements DrawHandler { | |
const bbox = this.drawInstance.node.getBBox(); | ||
const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox); | ||
this.release(); | ||
this.drawData.annotation_type = 'Manual'; | ||
this.onDrawDone({ | ||
shapeType: this.drawData.initialState.shapeType, | ||
objectType: this.drawData.initialState.objectType, | ||
|
@@ -406,6 +419,7 @@ export class DrawHandlerImpl implements DrawHandler { | |
attributes: { ...this.drawData.initialState.attributes }, | ||
label: this.drawData.initialState.label, | ||
color: this.drawData.initialState.color, | ||
annotation_type: this.drawData.annotation_type, | ||
}, Date.now() - this.startTimestamp, e.detail.originalEvent.ctrlKey); | ||
}); | ||
} | ||
|
@@ -540,6 +554,7 @@ export class DrawHandlerImpl implements DrawHandler { | |
if (this.drawData.initialState) { | ||
const { offset } = this.geometry; | ||
if (this.drawData.shapeType === 'rectangle') { | ||
this.drawData.annotation_type = 'Manual'; | ||
const [xtl, ytl, xbr, ybr] = this.drawData.initialState.points | ||
.map((coord: number): number => coord + offset); | ||
|
||
|
@@ -566,6 +581,7 @@ export class DrawHandlerImpl implements DrawHandler { | |
} else { | ||
if (this.drawData.shapeType === 'rectangle') { | ||
if (this.drawData.rectDrawingMethod === RectDrawingMethod.EXTREME_POINTS) { | ||
this.drawData.annotation_type = 'Manual'; | ||
// draw box by extreme clicking | ||
this.drawBoxBy4Points(); | ||
} else { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use
camelCase
code style on frontendThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay