Skip to content
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.

Sign up for GitHub

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

React UI: Fixed escape in draw #1338

Merged
merged 3 commits into from
Apr 2, 2020
Merged

React UI: Fixed escape in draw #1338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0cf3978
Fixed escape in draw
bsekachev Mar 31, 2020
2e6a92a
Insert multiple shapes
bsekachev Mar 31, 2020
d578f17
Updated changelog
bsekachev Mar 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
-

### Fixed
-
- New shape is added when press ``esc`` when drawing instead of cancellation

### Security
-
Expand Down
19 changes: 14 additions & 5 deletions cvat-canvas/src/typescript/drawHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class DrawHandlerImpl implements DrawHandler {
// so, methods like draw() just undefined for SVG.Shape, but nevertheless they exist
private drawInstance: any;
private initialized: boolean;
private canceled: boolean;
private pointsGroup: SVG.G | null;
private shapeSizeElement: ShapeSizeElement;

Expand Down Expand Up @@ -149,6 +150,7 @@ export class DrawHandlerImpl implements DrawHandler {
// Clear drawing
this.drawInstance.draw('stop');
}

this.drawInstance.off();
this.drawInstance.remove();
this.drawInstance = null;
Expand All @@ -161,6 +163,10 @@ export class DrawHandlerImpl implements DrawHandler {
if (this.crosshair) {
this.removeCrosshair();
}

if (!this.drawData.initialState) {
this.onDrawDone(null);
}
}

private initDrawing(): void {
Expand All @@ -175,8 +181,9 @@ export class DrawHandlerImpl implements DrawHandler {
const bbox = (e.target as SVGRectElement).getBBox();
const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox);
const { shapeType } = this.drawData;
this.cancel();
this.release();

if (this.canceled) return;
if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) {
this.onDrawDone({
shapeType,
Expand Down Expand Up @@ -290,11 +297,11 @@ export class DrawHandlerImpl implements DrawHandler {

this.drawInstance.on('drawdone', (e: CustomEvent): void => {
const targetPoints = pointsToArray((e.target as SVGElement).getAttribute('points'));

const { points, box } = this.getFinalPolyshapeCoordinates(targetPoints);
const { shapeType } = this.drawData;
this.cancel();
this.release();

if (this.canceled) return;
if (shapeType === 'polygon'
&& ((box.xbr - box.xtl) * (box.ybr - box.ytl) >= consts.AREA_THRESHOLD)
&& points.length >= 3 * 2) {
Expand Down Expand Up @@ -598,6 +605,7 @@ export class DrawHandlerImpl implements DrawHandler {
this.canvas = canvas;
this.text = text;
this.initialized = false;
this.canceled = false;
this.drawData = null;
this.geometry = null;
this.crosshair = null;
Expand Down Expand Up @@ -671,17 +679,18 @@ export class DrawHandlerImpl implements DrawHandler {
this.geometry = geometry;

if (drawData.enabled) {
this.canceled = false;
this.drawData = drawData;
this.initDrawing();
this.startDraw();
} else {
this.cancel();
this.release();
this.drawData = drawData;
}
}

public cancel(): void {
this.canceled = true;
this.release();
this.onDrawDone(null);
}
}