Skip to content

Commit

Permalink
catched n pressing event in cvat-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@KrishavRajSingh
KrishavRajSingh committed May 28, 2024
1 parent 6b526cc commit a9567e9
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 45 deletions.
5 changes: 3 additions & 2 deletions cvat-canvas/src/typescript/canvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
CanvasModel, CanvasModelImpl, RectDrawingMethod,
CuboidDrawingMethod, Configuration, Geometry, Mode,
HighlightSeverity as _HighlightSeverity, CanvasHint as _CanvasHint,
PolyEditData,
} from './canvasModel';
import { Master } from './master';
import { CanvasController, CanvasControllerImpl } from './canvasController';
Expand All @@ -35,7 +36,7 @@ interface Canvas {

interact(interactionData: InteractionData): void;
draw(drawData: DrawData): void;
edit(editData: MasksEditData): void;
edit(editData: MasksEditData | PolyEditData): void;
group(groupData: GroupData): void;
join(joinData: JoinData): void;
slice(sliceData: SliceData): void;
Expand Down Expand Up @@ -137,7 +138,7 @@ class CanvasImpl implements Canvas {
this.model.draw(drawData);
}

public edit(editData: MasksEditData): void {
public edit(editData: MasksEditData | PolyEditData): void {
this.model.edit(editData);
}

Expand Down
9 changes: 5 additions & 4 deletions cvat-canvas/src/typescript/canvasController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
Configuration,
MasksEditData,
HighlightedElements,
PolyEditData,
} from './canvasModel';

export interface CanvasController {
Expand All @@ -30,7 +31,7 @@ export interface CanvasController {
readonly activeElement: ActiveElement;
readonly highlightedElements: HighlightedElements;
readonly drawData: DrawData;
readonly editData: MasksEditData;
readonly editData: MasksEditData | PolyEditData;
readonly interactionData: InteractionData;
readonly mergeData: MergeData;
readonly splitData: SplitData;
Expand All @@ -44,7 +45,7 @@ export interface CanvasController {

zoom(x: number, y: number, direction: number): void;
draw(drawData: DrawData): void;
edit(editData: MasksEditData): void;
edit(editData: MasksEditData | PolyEditData): void;
enableDrag(x: number, y: number): void;
drag(x: number, y: number): void;
disableDrag(): void;
Expand Down Expand Up @@ -96,7 +97,7 @@ export class CanvasControllerImpl implements CanvasController {
this.model.draw(drawData);
}

public edit(editData: MasksEditData): void {
public edit(editData: MasksEditData | PolyEditData): void {
this.model.edit(editData);
}

Expand Down Expand Up @@ -136,7 +137,7 @@ export class CanvasControllerImpl implements CanvasController {
return this.model.drawData;
}

public get editData(): MasksEditData {
public get editData(): MasksEditData | PolyEditData {
return this.model.editData;
}

Expand Down
14 changes: 7 additions & 7 deletions cvat-canvas/src/typescript/canvasModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,8 @@ export interface InteractionResult {

export interface PolyEditData {
enabled: boolean;
state: any;
pointID: number;
state?: any;
pointID?: number;
}

export interface MasksEditData {
Expand Down Expand Up @@ -249,7 +249,7 @@ export interface CanvasModel {
readonly activeElement: ActiveElement;
readonly highlightedElements: HighlightedElements;
readonly drawData: DrawData;
readonly editData: MasksEditData;
readonly editData: MasksEditData | PolyEditData;
readonly interactionData: InteractionData;
readonly mergeData: MergeData;
readonly splitData: SplitData;
Expand All @@ -275,7 +275,7 @@ export interface CanvasModel {
grid(stepX: number, stepY: number): void;

draw(drawData: DrawData): void;
edit(editData: MasksEditData): void;
edit(editData: MasksEditData | PolyEditData): void;
group(groupData: GroupData): void;
join(joinData: JoinData): void;
slice(sliceData: SliceData): void;
Expand Down Expand Up @@ -369,7 +369,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
fittedScale: number;
zLayer: number | null;
drawData: DrawData;
editData: MasksEditData;
editData: MasksEditData | PolyEditData;
interactionData: InteractionData;
mergeData: MergeData;
groupData: GroupData;
Expand Down Expand Up @@ -767,7 +767,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
this.notify(UpdateReasons.DRAW);
}

public edit(editData: MasksEditData): void {
public edit(editData: MasksEditData | PolyEditData): void {
if (![Mode.IDLE, Mode.EDIT].includes(this.data.mode)) {
throw Error(`Canvas is busy. Action: ${this.data.mode}`);
}
Expand Down Expand Up @@ -1070,7 +1070,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
return { ...this.data.drawData };
}

public get editData(): MasksEditData {
public get editData(): MasksEditData | PolyEditData {
return { ...this.data.editData };
}

Expand Down
2 changes: 2 additions & 0 deletions cvat-canvas/src/typescript/canvasView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1641,6 +1641,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
this.masksHandler.edit(data);
} else if (this.masksHandler.enabled) {
this.masksHandler.edit(data);
} else if (this.editHandler.enabled) {
this.editHandler.edit(data);
}
} else if (reason === UpdateReasons.INTERACT) {
const data: InteractionData = this.controller.interactionData;
Expand Down
56 changes: 25 additions & 31 deletions cvat-canvas/src/typescript/editHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface EditHandler {
transform(geometry: Geometry): void;
configurate(configuration: Configuration): void;
cancel(): void;
enabled: boolean;
}

export class EditHandlerImpl implements EditHandler {
Expand All @@ -31,11 +32,9 @@ export class EditHandlerImpl implements EditHandler {
private autobordersEnabled: boolean;
private intelligentCutEnabled: boolean;
private outlinedBorders: string;
private circle: SVG.Circle | null = null;
private isEditing: boolean;

private setupTrailingPoint(circle: SVG.Circle): void {
this.circle = circle;
const head = this.editedShape.attr('points').split(' ').slice(0, this.editData.pointID).join(' ');
circle.on('mouseenter', (): void => {
circle.attr({
'stroke-width': consts.POINTS_SELECTED_STROKE_WIDTH / this.geometry.scale,
Expand All @@ -48,22 +47,11 @@ export class EditHandlerImpl implements EditHandler {
});
});

const minimumPoints = 2;
circle.on('click', (e: MouseEvent): void => {
circle.on('mousedown', (e: MouseEvent): void => {
if (e.button !== 0) return;
const { offset } = this.geometry;
const stringifiedPoints = `${head} ${this.editLine.node.getAttribute('points').slice(0, -2)}`;
const points = pointsToNumberArray(stringifiedPoints)
.slice(0, -2)
.map((coord: number): number => coord - offset);

if (points.length >= minimumPoints * 2) {
const { state } = this.editData;
this.edit({
enabled: false,
});
this.onEditDone(state, points);
}
this.edit({
enabled: false,
});
});
}

Expand Down Expand Up @@ -382,21 +370,22 @@ export class EditHandlerImpl implements EditHandler {
}

private closeEditing(): void {
if (this.isEditing) {
const { offset } = this.geometry;
const head = this.editedShape.attr('points').split(' ').slice(0, this.editData.pointID).join(' ');
const stringifiedPoints = `${head} ${this.editLine.node.getAttribute('points').slice(0, -2)}`;
const points = pointsToNumberArray(stringifiedPoints)
.slice(0, -2)
.map((coord: number): number => coord - offset);
if (points.length >= 2 * 2) { // minimumPoints * 2
const { state } = this.editData;
this.onEditDone(state, points);
}
}
this.isEditing = false;
this.release();
}

private onNKeyUp = (e: KeyboardEvent): void => {
if (e.key === 'n' && this.editData.state.shapeType === 'polyline') {
const mouseEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
button: 0,
});
this.circle.node.dispatchEvent(mouseEvent);
}
};

public constructor(
onEditDone: EditHandlerImpl['onEditDone'],
canvas: SVG.Container,
Expand All @@ -414,13 +403,14 @@ export class EditHandlerImpl implements EditHandler {
this.editLine = null;
this.geometry = null;
this.clones = [];
document.addEventListener('keyup', this.onNKeyUp);
this.isEditing = false;
}

public edit(editData: any): void {
if (editData.enabled) {
if (editData.state.shapeType !== 'rectangle') {
this.editData = editData;
this.isEditing = true;
this.initEditing();
} else {
this.cancel();
Expand All @@ -436,6 +426,10 @@ export class EditHandlerImpl implements EditHandler {
this.onEditDone(null, null);
}

get enabled(): boolean {
return this.isEditing;
}

public configurate(configuration: Configuration): void {
this.autobordersEnabled = configuration.autoborders;
this.outlinedBorders = configuration.outlinedBorders || 'black';
Expand Down
2 changes: 1 addition & 1 deletion ...src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
if (!drawing) {
if (editing) {
// users probably will press N as they are used to do when they want to finish editing
// in this case, if a mask is being edited we probably want to finish editing first
// in this case, if a mask or polyline is being edited we probably want to finish editing first
canvasInstance.edit({ enabled: false });
return;
}
Expand Down

0 comments on commit a9567e9

Please sign in to comment.