From c400fb04d52c1baa4867753bcad6e5da360bd4a0 Mon Sep 17 00:00:00 2001 From: "jj.kim" Date: Fri, 7 Feb 2020 00:03:38 +0900 Subject: [PATCH 1/3] Add extreme clicking method in cvat-canvas and cvat-ui --- cvat-canvas/src/typescript/canvasModel.ts | 1 + cvat-canvas/src/typescript/drawHandler.ts | 53 +++++++++++++++++-- cvat-ui/src/actions/annotation-actions.ts | 2 + .../controls-side-bar/draw-shape-popover.tsx | 40 +++++++++++++- .../controls-side-bar/draw-shape-popover.tsx | 19 ++++++- cvat-ui/src/reducers/interfaces.ts | 5 ++ 6 files changed, 114 insertions(+), 6 deletions(-) diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts index 58e22952d253..da4aa66f5fec 100644 --- a/cvat-canvas/src/typescript/canvasModel.ts +++ b/cvat-canvas/src/typescript/canvasModel.ts @@ -40,6 +40,7 @@ export interface ActiveElement { export interface DrawData { enabled: boolean; shapeType?: string; + boxDrawingType?: string; numberOfPoints?: number; initialState?: any; crosshair?: boolean; diff --git a/cvat-canvas/src/typescript/drawHandler.ts b/cvat-canvas/src/typescript/drawHandler.ts index 1d999d9f8b88..1d7fbd82e889 100644 --- a/cvat-canvas/src/typescript/drawHandler.ts +++ b/cvat-canvas/src/typescript/drawHandler.ts @@ -200,6 +200,46 @@ export class DrawHandlerImpl implements DrawHandler { }); } + private drawBoxBy4Points(): void { + let numberOfPoints = 0; + this.drawInstance = (this.canvas as any).polygon().draw({ + snapToGrid: 0.1, + }).addClass('cvat_canvas_shape_drawing').style({ + 'stroke-width': 0, + opacity: 0, + }).on('drawstart', () => { + // init numberOfPoints as one on drawstart + numberOfPoints = 1; + }).on('drawpoint', (e: CustomEvent) => { + // increase numberOfPoints by one on drawpoint + numberOfPoints += 1; + + // finish if numberOfPoints are exactly four + if (numberOfPoints === 4) { + const bbox = (e.target as SVGPolylineElement).getBBox(); + const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox); + + if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) { + this.onDrawDone({ + shapeType: this.drawData.shapeType, + points: [xtl, ytl, xbr, ybr], + }); + } else { + this.onDrawDone(null); + } + } + }).on('undopoint', () => { + if (numberOfPoints > 0) { + numberOfPoints -= 1; + } + }).off('drawdone').on('drawdone', () => { + // close drawing mode without drawing rect + this.onDrawDone(null); + }); + + this.drawPolyshape(); + } + private drawPolyshape(): void { this.drawInstance.attr({ z_order: Number.MAX_SAFE_INTEGER, @@ -536,13 +576,18 @@ export class DrawHandlerImpl implements DrawHandler { this.pastePoints(stringifiedPoints); } } - this.setupPasteEvents(); } else { if (this.drawData.shapeType === 'rectangle') { - this.drawBox(); - // Draw instance was initialized after drawBox(); - this.shapeSizeElement = displayShapeSize(this.canvas, this.text); + if (this.drawData.boxDrawingType === 'by_two_points') { + // default box drawing + this.drawBox(); + // Draw instance was initialized after drawBox(); + this.shapeSizeElement = displayShapeSize(this.canvas, this.text); + } else if (this.drawData.boxDrawingType === 'by_four_points') { + // draw box by extreme clicking + this.drawBoxBy4Points(); + } } else if (this.drawData.shapeType === 'polygon') { this.drawPolygon(); } else if (this.drawData.shapeType === 'polyline') { diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 6f57ea46a1f1..9623c16da4dd 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -583,6 +583,7 @@ export function drawShape( labelID: number, objectType: ObjectType, points?: number, + boxDrawingType?: string, ): AnyAction { let activeControl = ActiveControl.DRAW_RECTANGLE; if (shapeType === ShapeType.POLYGON) { @@ -601,6 +602,7 @@ export function drawShape( objectType, points, activeControl, + boxDrawingType }, }; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index ba43a8c368d4..65b1c544fac2 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -6,22 +6,27 @@ import { Select, Button, InputNumber, + Radio } from 'antd'; +import { RadioChangeEvent } from 'antd/lib/radio'; import Text from 'antd/lib/typography/Text'; import { ShapeType, + BoxDrawingType } from 'reducers/interfaces'; interface Props { shapeType: ShapeType; + boxDrawingType: BoxDrawingType; labels: any[]; minimumPoints: number; numberOfPoints?: number; selectedLabeID: number; onChangeLabel(value: string): void; onChangePoints(value: number | undefined): void; + onChangeBoxDrawingType(value: string): void; onDrawTrack(): void; onDrawShape(): void; } @@ -37,6 +42,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { onDrawShape, onChangeLabel, onChangePoints, + onChangeBoxDrawingType, } = props; return ( @@ -71,7 +77,39 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { { - shapeType !== ShapeType.RECTANGLE && ( + shapeType === ShapeType.RECTANGLE ? ( + <> + + + Drawing method + + + + + { + onChangeBoxDrawingType(event.target.value); + }} + > + + By 2 Points + + + By 4 Points + + + + + + ) : ( Number of points: diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 097ac978a73d..58724fbed445 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -5,6 +5,7 @@ import { CombinedState, ShapeType, ObjectType, + BoxDrawingType } from 'reducers/interfaces'; import { @@ -23,6 +24,7 @@ interface DispatchToProps { labelID: number, objectType: ObjectType, points?: number, + boxDrawingType?: string, ): void; } @@ -39,8 +41,9 @@ function mapDispatchToProps(dispatch: any): DispatchToProps { labelID: number, objectType: ObjectType, points?: number, + boxDrawingType?: string, ): void { - dispatch(drawShape(shapeType, labelID, objectType, points)); + dispatch(drawShape(shapeType, labelID, objectType, points, boxDrawingType)); }, }; } @@ -67,6 +70,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { type Props = StateToProps & DispatchToProps; interface State { + boxDrawingType?: string; numberOfPoints?: number; selectedLabelID: number; } @@ -77,6 +81,7 @@ class DrawShapePopoverContainer extends React.PureComponent { super(props); const defaultLabelID = props.labels[0].id; + const defaultBoxDrawingType = BoxDrawingType.BY_TWO_POINTS; this.state = { selectedLabelID: defaultLabelID, }; @@ -91,6 +96,9 @@ class DrawShapePopoverContainer extends React.PureComponent { if (shapeType === ShapeType.POINTS) { this.minimumPoints = 1; } + if (shapeType === ShapeType.RECTANGLE) { + this.state.boxDrawingType = defaultBoxDrawingType; + } } private onDraw(objectType: ObjectType): void { @@ -101,6 +109,7 @@ class DrawShapePopoverContainer extends React.PureComponent { } = this.props; const { + boxDrawingType, numberOfPoints, selectedLabelID, } = this.state; @@ -108,6 +117,7 @@ class DrawShapePopoverContainer extends React.PureComponent { canvasInstance.cancel(); canvasInstance.draw({ enabled: true, + boxDrawingType, numberOfPoints, shapeType, crosshair: shapeType === ShapeType.RECTANGLE, @@ -117,6 +127,12 @@ class DrawShapePopoverContainer extends React.PureComponent { objectType, numberOfPoints); } + private onChangeBoxDrawingType = (value: string): void => { + this.setState({ + boxDrawingType: value + }); + } + private onDrawShape = (): void => { this.onDraw(ObjectType.SHAPE); }; @@ -163,6 +179,7 @@ class DrawShapePopoverContainer extends React.PureComponent { numberOfPoints={numberOfPoints} onChangeLabel={this.onChangeLabel} onChangePoints={this.onChangePoints} + onChangeBoxDrawingType={this.onChangeBoxDrawingType} onDrawTrack={this.onDrawTrack} onDrawShape={this.onDrawShape} /> diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 9305ca020212..7b02248096a5 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -239,6 +239,11 @@ export enum ActiveControl { EDIT = 'edit', } +export enum BoxDrawingType { + BY_TWO_POINTS = 'by_two_points', + BY_FOUR_POINTS = 'by_four_points' +} + export enum ShapeType { RECTANGLE = 'rectangle', POLYGON = 'polygon', From 865c0aa3ec910d4ed441766208329fdbea9561ce Mon Sep 17 00:00:00 2001 From: "jj.kim" Date: Sat, 8 Feb 2020 13:46:56 +0900 Subject: [PATCH 2/3] Fix bugs and issues, update readme --- cvat-canvas/README.md | 1 + cvat-canvas/src/typescript/canvasModel.ts | 2 +- cvat-canvas/src/typescript/drawHandler.ts | 12 ++++----- cvat-ui/src/actions/annotation-actions.ts | 4 +-- .../controls-side-bar/draw-shape-popover.tsx | 22 +++++++-------- .../controls-side-bar/draw-shape-popover.tsx | 27 ++++++++++--------- cvat-ui/src/reducers/annotation-reducer.ts | 2 ++ cvat-ui/src/reducers/interfaces.ts | 3 ++- 8 files changed, 38 insertions(+), 35 deletions(-) diff --git a/cvat-canvas/README.md b/cvat-canvas/README.md index 59f4baa6f29f..6b7155f06351 100644 --- a/cvat-canvas/README.md +++ b/cvat-canvas/README.md @@ -40,6 +40,7 @@ Canvas itself handles: interface DrawData { enabled: boolean; shapeType?: string; + rectDrawingMethod?: string; numberOfPoints?: number; initialState?: any; crosshair?: boolean; diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts index da4aa66f5fec..8100f579d217 100644 --- a/cvat-canvas/src/typescript/canvasModel.ts +++ b/cvat-canvas/src/typescript/canvasModel.ts @@ -40,7 +40,7 @@ export interface ActiveElement { export interface DrawData { enabled: boolean; shapeType?: string; - boxDrawingType?: string; + rectDrawingMethod?: string; numberOfPoints?: number; initialState?: any; crosshair?: boolean; diff --git a/cvat-canvas/src/typescript/drawHandler.ts b/cvat-canvas/src/typescript/drawHandler.ts index 1d7fbd82e889..a8068b93266e 100644 --- a/cvat-canvas/src/typescript/drawHandler.ts +++ b/cvat-canvas/src/typescript/drawHandler.ts @@ -160,7 +160,8 @@ export class DrawHandlerImpl implements DrawHandler { if (!this.drawData.initialState) { const { drawInstance } = this; this.drawInstance = null; - if (this.drawData.shapeType === 'rectangle') { + if (this.drawData.shapeType === 'rectangle' + && this.drawData.rectDrawingMethod !== 'by_four_points') { drawInstance.draw('cancel'); } else { drawInstance.draw('done'); @@ -579,14 +580,14 @@ export class DrawHandlerImpl implements DrawHandler { this.setupPasteEvents(); } else { if (this.drawData.shapeType === 'rectangle') { - if (this.drawData.boxDrawingType === 'by_two_points') { + if (this.drawData.rectDrawingMethod === 'by_four_points') { + // draw box by extreme clicking + this.drawBoxBy4Points(); + } else { // default box drawing this.drawBox(); // Draw instance was initialized after drawBox(); this.shapeSizeElement = displayShapeSize(this.canvas, this.text); - } else if (this.drawData.boxDrawingType === 'by_four_points') { - // draw box by extreme clicking - this.drawBoxBy4Points(); } } else if (this.drawData.shapeType === 'polygon') { this.drawPolygon(); @@ -595,7 +596,6 @@ export class DrawHandlerImpl implements DrawHandler { } else if (this.drawData.shapeType === 'points') { this.drawPoints(); } - this.setupDrawEvents(); } } diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 9623c16da4dd..9d2f340f3588 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -583,7 +583,7 @@ export function drawShape( labelID: number, objectType: ObjectType, points?: number, - boxDrawingType?: string, + rectDrawingMethod?: string, ): AnyAction { let activeControl = ActiveControl.DRAW_RECTANGLE; if (shapeType === ShapeType.POLYGON) { @@ -602,7 +602,7 @@ export function drawShape( objectType, points, activeControl, - boxDrawingType + rectDrawingMethod, }, }; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 65b1c544fac2..8fe33802b5b2 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -6,7 +6,7 @@ import { Select, Button, InputNumber, - Radio + Radio, } from 'antd'; import { RadioChangeEvent } from 'antd/lib/radio'; @@ -14,19 +14,19 @@ import Text from 'antd/lib/typography/Text'; import { ShapeType, - BoxDrawingType + RectDrawingMethod, } from 'reducers/interfaces'; interface Props { shapeType: ShapeType; - boxDrawingType: BoxDrawingType; + rectDrawingMethod: RectDrawingMethod; labels: any[]; minimumPoints: number; numberOfPoints?: number; selectedLabeID: number; onChangeLabel(value: string): void; onChangePoints(value: number | undefined): void; - onChangeBoxDrawingType(value: string): void; + onChangeRectDrawingMethod(event: RadioChangeEvent): void; onDrawTrack(): void; onDrawShape(): void; } @@ -42,7 +42,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { onDrawShape, onChangeLabel, onChangePoints, - onChangeBoxDrawingType, + onChangeRectDrawingMethod, } = props; return ( @@ -88,19 +88,17 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { { - onChangeBoxDrawingType(event.target.value); - }} - > + defaultValue={RectDrawingMethod.BY_TWO_POINTS} + onChange={onChangeRectDrawingMethod} + > By 2 Points By 4 Points diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 58724fbed445..cadea2e3c5ed 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { connect } from 'react-redux'; +import { RadioChangeEvent } from 'antd/lib/radio'; import { CombinedState, ShapeType, ObjectType, - BoxDrawingType + RectDrawingMethod, } from 'reducers/interfaces'; import { @@ -24,7 +25,7 @@ interface DispatchToProps { labelID: number, objectType: ObjectType, points?: number, - boxDrawingType?: string, + rectDrawingMethod?: string, ): void; } @@ -41,9 +42,9 @@ function mapDispatchToProps(dispatch: any): DispatchToProps { labelID: number, objectType: ObjectType, points?: number, - boxDrawingType?: string, + rectDrawingMethod?: string, ): void { - dispatch(drawShape(shapeType, labelID, objectType, points, boxDrawingType)); + dispatch(drawShape(shapeType, labelID, objectType, points, rectDrawingMethod)); }, }; } @@ -70,7 +71,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { type Props = StateToProps & DispatchToProps; interface State { - boxDrawingType?: string; + rectDrawingMethod?: string; numberOfPoints?: number; selectedLabelID: number; } @@ -81,7 +82,7 @@ class DrawShapePopoverContainer extends React.PureComponent { super(props); const defaultLabelID = props.labels[0].id; - const defaultBoxDrawingType = BoxDrawingType.BY_TWO_POINTS; + const defaultRectDrawingMethod = RectDrawingMethod.BY_TWO_POINTS; this.state = { selectedLabelID: defaultLabelID, }; @@ -97,7 +98,7 @@ class DrawShapePopoverContainer extends React.PureComponent { this.minimumPoints = 1; } if (shapeType === ShapeType.RECTANGLE) { - this.state.boxDrawingType = defaultBoxDrawingType; + this.state.rectDrawingMethod = defaultRectDrawingMethod; } } @@ -109,7 +110,7 @@ class DrawShapePopoverContainer extends React.PureComponent { } = this.props; const { - boxDrawingType, + rectDrawingMethod, numberOfPoints, selectedLabelID, } = this.state; @@ -117,7 +118,7 @@ class DrawShapePopoverContainer extends React.PureComponent { canvasInstance.cancel(); canvasInstance.draw({ enabled: true, - boxDrawingType, + rectDrawingMethod, numberOfPoints, shapeType, crosshair: shapeType === ShapeType.RECTANGLE, @@ -127,11 +128,11 @@ class DrawShapePopoverContainer extends React.PureComponent { objectType, numberOfPoints); } - private onChangeBoxDrawingType = (value: string): void => { + private onChangeRectDrawingMethod = (event: RadioChangeEvent): void => { this.setState({ - boxDrawingType: value + rectDrawingMethod: event.target.value, }); - } + }; private onDrawShape = (): void => { this.onDraw(ObjectType.SHAPE); @@ -179,7 +180,7 @@ class DrawShapePopoverContainer extends React.PureComponent { numberOfPoints={numberOfPoints} onChangeLabel={this.onChangeLabel} onChangePoints={this.onChangePoints} - onChangeBoxDrawingType={this.onChangeBoxDrawingType} + onChangeRectDrawingMethod={this.onChangeRectDrawingMethod} onDrawTrack={this.onDrawTrack} onDrawShape={this.onDrawShape} /> diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index c0800d1ce248..2b959fae5e6a 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -338,6 +338,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { objectType, points, activeControl, + rectDrawingMethod, } = action.payload; return { @@ -355,6 +356,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { activeNumOfPoints: points, activeObjectType: objectType, activeShapeType: shapeType, + activeRectDrawingMethod: rectDrawingMethod, }, }; } diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 7b02248096a5..792cabd5dd36 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -239,7 +239,7 @@ export enum ActiveControl { EDIT = 'edit', } -export enum BoxDrawingType { +export enum RectDrawingMethod { BY_TWO_POINTS = 'by_two_points', BY_FOUR_POINTS = 'by_four_points' } @@ -302,6 +302,7 @@ export interface AnnotationState { }; drawing: { activeShapeType: ShapeType; + activeRectDrawingMethod?: RectDrawingMethod; activeNumOfPoints?: number; activeLabelID: number; activeObjectType: ObjectType; From 8535b5bacfab993890077559c8b638578ceeac81 Mon Sep 17 00:00:00 2001 From: "jj.kim" Date: Wed, 12 Feb 2020 01:15:17 +0900 Subject: [PATCH 3/3] Fix error after rebasing develop --- cvat-canvas/src/typescript/drawHandler.ts | 65 +++++++++++------------ 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/cvat-canvas/src/typescript/drawHandler.ts b/cvat-canvas/src/typescript/drawHandler.ts index a8068b93266e..2ab5c55776da 100644 --- a/cvat-canvas/src/typescript/drawHandler.ts +++ b/cvat-canvas/src/typescript/drawHandler.ts @@ -203,40 +203,39 @@ export class DrawHandlerImpl implements DrawHandler { private drawBoxBy4Points(): void { let numberOfPoints = 0; - this.drawInstance = (this.canvas as any).polygon().draw({ - snapToGrid: 0.1, - }).addClass('cvat_canvas_shape_drawing').style({ - 'stroke-width': 0, - opacity: 0, - }).on('drawstart', () => { - // init numberOfPoints as one on drawstart - numberOfPoints = 1; - }).on('drawpoint', (e: CustomEvent) => { - // increase numberOfPoints by one on drawpoint - numberOfPoints += 1; - - // finish if numberOfPoints are exactly four - if (numberOfPoints === 4) { - const bbox = (e.target as SVGPolylineElement).getBBox(); - const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox); - - if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) { - this.onDrawDone({ - shapeType: this.drawData.shapeType, - points: [xtl, ytl, xbr, ybr], - }); - } else { - this.onDrawDone(null); + this.drawInstance = (this.canvas as any).polygon() + .addClass('cvat_canvas_shape_drawing').attr({ + 'stroke-width': 0, + opacity: 0, + }).on('drawstart', () => { + // init numberOfPoints as one on drawstart + numberOfPoints = 1; + }).on('drawpoint', (e: CustomEvent) => { + // increase numberOfPoints by one on drawpoint + numberOfPoints += 1; + + // finish if numberOfPoints are exactly four + if (numberOfPoints === 4) { + const bbox = (e.target as SVGPolylineElement).getBBox(); + const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox); + + if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) { + this.onDrawDone({ + shapeType: this.drawData.shapeType, + points: [xtl, ytl, xbr, ybr], + }); + } else { + this.onDrawDone(null); + } } - } - }).on('undopoint', () => { - if (numberOfPoints > 0) { - numberOfPoints -= 1; - } - }).off('drawdone').on('drawdone', () => { - // close drawing mode without drawing rect - this.onDrawDone(null); - }); + }).on('undopoint', () => { + if (numberOfPoints > 0) { + numberOfPoints -= 1; + } + }).off('drawdone').on('drawdone', () => { + // close drawing mode without drawing rect + this.onDrawDone(null); + }); this.drawPolyshape(); }