From d338710753ffec59c9e8588b6d76f7665208cf99 Mon Sep 17 00:00:00 2001 From: krishav Date: Tue, 21 May 2024 12:50:57 +0530 Subject: [PATCH 1/7] stop drawing when n key pressed --- cvat-canvas/src/typescript/editHandler.ts | 17 ++++++++++++++++- yarn.lock | 10 +++++----- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/cvat-canvas/src/typescript/editHandler.ts b/cvat-canvas/src/typescript/editHandler.ts index 89e61881a57c..97acabc74920 100644 --- a/cvat-canvas/src/typescript/editHandler.ts +++ b/cvat-canvas/src/typescript/editHandler.ts @@ -31,8 +31,10 @@ export class EditHandlerImpl implements EditHandler { private autobordersEnabled: boolean; private intelligentCutEnabled: boolean; private outlinedBorders: string; + private circle: SVG.Circle | null = null; 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({ @@ -47,7 +49,7 @@ export class EditHandlerImpl implements EditHandler { }); const minimumPoints = 2; - circle.on('mousedown', (e: MouseEvent): void => { + circle.on('click', (e: MouseEvent): void => { if (e.button !== 0) return; const { offset } = this.geometry; const stringifiedPoints = `${head} ${this.editLine.node.getAttribute('points').slice(0, -2)}`; @@ -383,6 +385,18 @@ export class EditHandlerImpl implements EditHandler { 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, @@ -400,6 +414,7 @@ export class EditHandlerImpl implements EditHandler { this.editLine = null; this.geometry = null; this.clones = []; + document.addEventListener('keyup', this.onNKeyUp); } public edit(editData: any): void { diff --git a/yarn.lock b/yarn.lock index 3ef09d2aa5b8..0560da00d9d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3557,9 +3557,9 @@ camera-controls@^1.25.3: integrity sha512-EfzbovxLssyWpJVG9uKcazSDDIEcd1hUsPhPF/OWWnICsKY9WbLY/2S4UPW73HHbvnVeR/Z9wsWaQKtANy/2Yg== caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541: - version "1.0.30001565" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz#a528b253c8a2d95d2b415e11d8b9942acc100c4f" - integrity sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w== + version "1.0.30001620" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz" + integrity sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew== canvas@^2.8.0: version "2.11.2" @@ -4214,7 +4214,7 @@ custom-error-instance@2.1.1: three "^0.156.1" "cvat-canvas@link:./cvat-canvas": - version "2.20.0" + version "2.20.1" dependencies: "@types/polylabel" "^1.0.5" polylabel "^1.1.0" @@ -4225,7 +4225,7 @@ custom-error-instance@2.1.1: svg.select.js "3.0.1" "cvat-core@link:./cvat-core": - version "15.0.2" + version "15.0.5" dependencies: axios "^1.6.0" axios-retry "^4.0.0" From 6b526ccd7e77f86f6d6685026a3441b5796bfbc7 Mon Sep 17 00:00:00 2001 From: krishav Date: Tue, 21 May 2024 13:25:48 +0530 Subject: [PATCH 2/7] added changelog.md --- changelog.d/20240521_132410_krishavrajsingh_endPolyline.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog.d/20240521_132410_krishavrajsingh_endPolyline.md diff --git a/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md b/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md new file mode 100644 index 000000000000..023dab434415 --- /dev/null +++ b/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md @@ -0,0 +1,4 @@ +### Fixed + +- Stop editing polyline when n key pressed + () From a9567e9f3f29271a9843e61d42dfab21a4a743fd Mon Sep 17 00:00:00 2001 From: krishav Date: Tue, 28 May 2024 17:00:20 +0530 Subject: [PATCH 3/7] catched n pressing event in cvat-ui --- cvat-canvas/src/typescript/canvas.ts | 5 +- .../src/typescript/canvasController.ts | 9 +-- cvat-canvas/src/typescript/canvasModel.ts | 14 ++--- cvat-canvas/src/typescript/canvasView.ts | 2 + cvat-canvas/src/typescript/editHandler.ts | 56 +++++++++---------- .../controls-side-bar/controls-side-bar.tsx | 2 +- 6 files changed, 43 insertions(+), 45 deletions(-) diff --git a/cvat-canvas/src/typescript/canvas.ts b/cvat-canvas/src/typescript/canvas.ts index 84e4bca31e4b..1bcc7ddb961a 100644 --- a/cvat-canvas/src/typescript/canvas.ts +++ b/cvat-canvas/src/typescript/canvas.ts @@ -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'; @@ -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; @@ -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); } diff --git a/cvat-canvas/src/typescript/canvasController.ts b/cvat-canvas/src/typescript/canvasController.ts index 9acf58e95fc2..82ec611be3e4 100644 --- a/cvat-canvas/src/typescript/canvasController.ts +++ b/cvat-canvas/src/typescript/canvasController.ts @@ -20,6 +20,7 @@ import { Configuration, MasksEditData, HighlightedElements, + PolyEditData, } from './canvasModel'; export interface CanvasController { @@ -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; @@ -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; @@ -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); } @@ -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; } diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts index 60b3330af3fd..bf9a9603612b 100644 --- a/cvat-canvas/src/typescript/canvasModel.ts +++ b/cvat-canvas/src/typescript/canvasModel.ts @@ -147,8 +147,8 @@ export interface InteractionResult { export interface PolyEditData { enabled: boolean; - state: any; - pointID: number; + state?: any; + pointID?: number; } export interface MasksEditData { @@ -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; @@ -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; @@ -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; @@ -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}`); } @@ -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 }; } diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index 6a6c73a3db45..0b85bf4a2366 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -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; diff --git a/cvat-canvas/src/typescript/editHandler.ts b/cvat-canvas/src/typescript/editHandler.ts index 97acabc74920..e1ad74b276b0 100644 --- a/cvat-canvas/src/typescript/editHandler.ts +++ b/cvat-canvas/src/typescript/editHandler.ts @@ -16,6 +16,7 @@ export interface EditHandler { transform(geometry: Geometry): void; configurate(configuration: Configuration): void; cancel(): void; + enabled: boolean; } export class EditHandlerImpl implements EditHandler { @@ -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, @@ -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, + }); }); } @@ -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, @@ -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(); @@ -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'; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx index 8ebbfa893ace..f516a2065fab 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx @@ -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; } From f5f907fd831cec93765a2d2bc56f7c9bc43ddda4 Mon Sep 17 00:00:00 2001 From: krishav Date: Sat, 1 Jun 2024 21:46:04 +0530 Subject: [PATCH 4/7] merged conflict --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 0560da00d9d1..0ae13a487b6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3556,10 +3556,10 @@ camera-controls@^1.25.3: resolved "https://registry.yarnpkg.com/camera-controls/-/camera-controls-1.38.2.tgz#3289013e6de05cee51dc98af87d3fc7c1a7df585" integrity sha512-EfzbovxLssyWpJVG9uKcazSDDIEcd1hUsPhPF/OWWnICsKY9WbLY/2S4UPW73HHbvnVeR/Z9wsWaQKtANy/2Yg== -caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541: - version "1.0.30001620" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz" - integrity sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew== +caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599: + version "1.0.30001617" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz#809bc25f3f5027ceb33142a7d6c40759d7a901eb" + integrity sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA== canvas@^2.8.0: version "2.11.2" From 04ab539dad423a50ea09a9c7760d2b822d42d42a Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Mon, 3 Jun 2024 11:02:37 +0300 Subject: [PATCH 5/7] Updated changelog --- changelog.d/20240521_132410_krishavrajsingh_endPolyline.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md b/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md index 023dab434415..6f9a5289a9a8 100644 --- a/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md +++ b/changelog.d/20240521_132410_krishavrajsingh_endPolyline.md @@ -1,4 +1,4 @@ -### Fixed +### Added -- Stop editing polyline when n key pressed +- Polyline editing may be finished using corresponding shortcut () From 99e7ed20b0ed9e5409f692143d1041dc1514121a Mon Sep 17 00:00:00 2001 From: krishav Date: Mon, 10 Jun 2024 01:39:35 +0530 Subject: [PATCH 6/7] fixed polygon editing --- cvat-canvas/src/typescript/editHandler.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/cvat-canvas/src/typescript/editHandler.ts b/cvat-canvas/src/typescript/editHandler.ts index e1ad74b276b0..e2983f75c62e 100644 --- a/cvat-canvas/src/typescript/editHandler.ts +++ b/cvat-canvas/src/typescript/editHandler.ts @@ -49,9 +49,7 @@ export class EditHandlerImpl implements EditHandler { circle.on('mousedown', (e: MouseEvent): void => { if (e.button !== 0) return; - this.edit({ - enabled: false, - }); + this.edit({ enabled: false }); }); } @@ -370,7 +368,7 @@ export class EditHandlerImpl implements EditHandler { } private closeEditing(): void { - if (this.isEditing) { + if (this.isEditing && this.editData.state.shapeType === 'polyline') { 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)}`; @@ -381,6 +379,8 @@ export class EditHandlerImpl implements EditHandler { const { state } = this.editData; this.onEditDone(state, points); } + } else { + this.onEditDone(null, null); } this.isEditing = false; this.release(); @@ -408,10 +408,10 @@ export class EditHandlerImpl implements EditHandler { public edit(editData: any): void { if (editData.enabled) { - if (editData.state.shapeType !== 'rectangle') { + if (['polygon', 'polyline', 'points'].includes(editData.state.shapeType)) { this.editData = editData; - this.isEditing = true; this.initEditing(); + this.isEditing = true; } else { this.cancel(); } From bcb9d79e013aa59cc46ebe6fdb01532fed79a139 Mon Sep 17 00:00:00 2001 From: krishav Date: Sun, 16 Jun 2024 01:51:46 +0530 Subject: [PATCH 7/7] fixed polygon issue --- cvat-canvas/src/typescript/canvasView.ts | 26 +++++++++++------------ cvat-canvas/src/typescript/editHandler.ts | 11 ++++++---- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index 19d65dce24f8..398a6262c5d3 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -1642,7 +1642,7 @@ export class CanvasViewImpl implements CanvasView, Listener { this.masksHandler.edit(data); } else if (this.masksHandler.enabled) { this.masksHandler.edit(data); - } else if (this.editHandler.enabled) { + } else if (this.editHandler.enabled && this.editHandler.shapeType === 'polyline') { this.editHandler.edit(data); } } else if (reason === UpdateReasons.INTERACT) { @@ -1856,18 +1856,18 @@ export class CanvasViewImpl implements CanvasView, Listener { const { points } = state; const [left, top, right, bottom] = points.slice(-4); const imageBitmap = expandChannels(255, 255, 255, points); - imageDataToDataURL(imageBitmap, right - left + 1, bottom - top + 1, - (dataURL: string) => new Promise((resolve) => { - if (bitmapUpdateReqId === this.bitmapUpdateReqId) { - const img = document.createElement('img'); - img.addEventListener('load', () => { - ctx.drawImage(img, left, top); - URL.revokeObjectURL(dataURL); - resolve(); - }); - img.src = dataURL; - } - })); + imageDataToDataURL(imageBitmap, right - left + 1, bottom - top + 1, (dataURL: string) => new + Promise((resolve) => { + if (bitmapUpdateReqId === this.bitmapUpdateReqId) { + const img = document.createElement('img'); + img.addEventListener('load', () => { + ctx.drawImage(img, left, top); + URL.revokeObjectURL(dataURL); + resolve(); + }); + img.src = dataURL; + } + })); } if (state.shapeType === 'cuboid') { diff --git a/cvat-canvas/src/typescript/editHandler.ts b/cvat-canvas/src/typescript/editHandler.ts index e2983f75c62e..567eea29c7de 100644 --- a/cvat-canvas/src/typescript/editHandler.ts +++ b/cvat-canvas/src/typescript/editHandler.ts @@ -17,6 +17,7 @@ export interface EditHandler { configurate(configuration: Configuration): void; cancel(): void; enabled: boolean; + shapeType: string; } export class EditHandlerImpl implements EditHandler { @@ -333,6 +334,7 @@ export class EditHandlerImpl implements EditHandler { this.canvas.off('mousedown.edit'); this.canvas.off('mousemove.edit'); this.autoborderHandler.autoborder(false); + this.isEditing = false; if (this.editedShape) { this.setupPoints(false); @@ -360,6 +362,7 @@ export class EditHandlerImpl implements EditHandler { .clone().attr('stroke', this.outlinedBorders); this.setupPoints(true); this.startEdit(); + this.isEditing = true; // draw points for this with selected and start editing till another point is clicked // click one of two parts to remove (in case of polygon only) @@ -379,10 +382,7 @@ export class EditHandlerImpl implements EditHandler { const { state } = this.editData; this.onEditDone(state, points); } - } else { - this.onEditDone(null, null); } - this.isEditing = false; this.release(); } @@ -411,7 +411,6 @@ export class EditHandlerImpl implements EditHandler { if (['polygon', 'polyline', 'points'].includes(editData.state.shapeType)) { this.editData = editData; this.initEditing(); - this.isEditing = true; } else { this.cancel(); } @@ -430,6 +429,10 @@ export class EditHandlerImpl implements EditHandler { return this.isEditing; } + get shapeType(): string { + return this.editData.state.shapeType; + } + public configurate(configuration: Configuration): void { this.autobordersEnabled = configuration.autoborders; this.outlinedBorders = configuration.outlinedBorders || 'black';