From 74b28c6a243dcfcf6dd71895a1add74826eafd06 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 8 Nov 2021 14:51:52 +0300 Subject: [PATCH 1/7] initinal implementaion --- cvat-canvas/src/typescript/canvas.ts | 5 ++ cvat-canvas/src/typescript/canvasView.ts | 13 +++++ .../src/typescript/interactionHandler.ts | 44 +++++++++------ cvat-canvas3d/src/typescript/canvas3d.ts | 5 ++ cvat-canvas3d/src/typescript/canvas3dView.ts | 55 +++++++++++-------- cvat-ui/src/reducers/annotation-reducer.ts | 2 + 6 files changed, 83 insertions(+), 41 deletions(-) diff --git a/cvat-canvas/src/typescript/canvas.ts b/cvat-canvas/src/typescript/canvas.ts index 4170e1d90a2..05ae02c35f9 100644 --- a/cvat-canvas/src/typescript/canvas.ts +++ b/cvat-canvas/src/typescript/canvas.ts @@ -53,6 +53,7 @@ interface Canvas { cancel(): void; configure(configuration: Configuration): void; isAbleToChangeFrame(): boolean; + destroy(): void; readonly geometry: Geometry; } @@ -163,6 +164,10 @@ class CanvasImpl implements Canvas { public get geometry(): Geometry { return this.model.geometry; } + + public destroy(): void { + this.view.destroy(); + } } export type InteractionData = _InteractionData; diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index af91f7cdebd..e83c22196f9 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -51,6 +51,7 @@ import { export interface CanvasView { html(): HTMLDivElement; + destroy(): void; } export class CanvasViewImpl implements CanvasView, Listener { @@ -1369,6 +1370,18 @@ export class CanvasViewImpl implements CanvasView, Listener { return this.canvas; } + public destroy(): void { + this.canvas.dispatchEvent( + new CustomEvent('canvas.destroy', { + bubbles: false, + cancelable: true, + }), + ); + // We can't call namespaced svgjs event + // see - https://svgjs.dev/docs/2.7/events/ + this.adoptedContent.fire('destroy'); + } + private redrawBitmap(): void { const width = +this.background.style.width.slice(0, -2); const height = +this.background.style.height.slice(0, -2); diff --git a/cvat-canvas/src/typescript/interactionHandler.ts b/cvat-canvas/src/typescript/interactionHandler.ts index c6bc18d6e38..9e77c7dbd7b 100644 --- a/cvat-canvas/src/typescript/interactionHandler.ts +++ b/cvat-canvas/src/typescript/interactionHandler.ts @@ -375,6 +375,27 @@ export class InteractionHandlerImpl implements InteractionHandler { return false; } + private onKeyUp = (e:KeyboardEvent):void => { + if (this.interactionData.enabled && e.keyCode === 17) { + if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { + this.interactionData.onChangeToolsBlockerState('keyup'); + } + if (this.shouldRaiseEvent(false)) { + // 17 is ctrl + this.onInteraction(this.prepareResult(), true, false); + } + } + }; + + private onKeyDown = (e:KeyboardEvent):void => { + if (!e.repeat && this.interactionData.enabled && e.keyCode === 17) { + if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { + this.interactionData.onChangeToolsBlockerState('keydown'); + } + this.thresholdWasModified = false; + } + }; + public constructor( onInteraction: ( shapes: InteractionResult[] | null, @@ -452,25 +473,12 @@ export class InteractionHandlerImpl implements InteractionHandler { } }); - window.addEventListener('keyup', (e: KeyboardEvent): void => { - if (this.interactionData.enabled && e.keyCode === 17) { - if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { - this.interactionData.onChangeToolsBlockerState('keyup'); - } - if (this.shouldRaiseEvent(false)) { - // 17 is ctrl - this.onInteraction(this.prepareResult(), true, false); - } - } - }); + window.addEventListener('keyup', this.onKeyUp); + window.addEventListener('keydown', this.onKeyDown); - window.addEventListener('keydown', (e: KeyboardEvent): void => { - if (!e.repeat && this.interactionData.enabled && e.keyCode === 17) { - if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { - this.interactionData.onChangeToolsBlockerState('keydown'); - } - this.thresholdWasModified = false; - } + this.canvas.on('destroy.canvas', ():void => { + window.removeEventListener('keyup', this.onKeyUp); + window.removeEventListener('keydown', this.onKeyDown); }); } diff --git a/cvat-canvas3d/src/typescript/canvas3d.ts b/cvat-canvas3d/src/typescript/canvas3d.ts index 02a375cd0d6..80c8a90a1b7 100644 --- a/cvat-canvas3d/src/typescript/canvas3d.ts +++ b/cvat-canvas3d/src/typescript/canvas3d.ts @@ -36,6 +36,7 @@ interface Canvas3d { fitCanvas(): void; fit(): void; group(groupData: GroupData): void; + destroy(): void; } class Canvas3dImpl implements Canvas3d { @@ -104,6 +105,10 @@ class Canvas3dImpl implements Canvas3d { public fitCanvas(): void { this.model.fit(); } + + public destroy(): void { + this.view.destroy(); + } } export { diff --git a/cvat-canvas3d/src/typescript/canvas3dView.ts b/cvat-canvas3d/src/typescript/canvas3dView.ts index 5f450ac57db..f42665bca35 100644 --- a/cvat-canvas3d/src/typescript/canvas3dView.ts +++ b/cvat-canvas3d/src/typescript/canvas3dView.ts @@ -19,6 +19,7 @@ export interface Canvas3dView { html(): ViewsDOM; render(): void; keyControls(keys: KeyboardEvent): void; + destroy(): void; } export enum CameraAction { @@ -287,6 +288,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { (_state: any): boolean => _state.clientID === Number(intersects[0].object.name), ); if (item.length !== 0) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore this.model.data.groupData.grouped = this.model.data.groupData.grouped.filter( (_state: any): boolean => _state.clientID !== Number(intersects[0].object.name), @@ -543,9 +545,9 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { this.action.rotation.screenInit = { x: diffX, y: diffY }; this.action.rotation.screenMove = { x: diffX, y: diffY }; if ( - this.model.data.selected - && !this.model.data.selected.perspective.userData.lock - && !this.model.data.selected.perspective.userData.hidden + this.model.data.selected && + !this.model.data.selected.perspective.userData.lock && + !this.model.data.selected.perspective.userData.hidden ) { this.action.scan = view; this.model.mode = Mode.EDIT; @@ -698,8 +700,8 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { cuboid.setOpacity(opacity); if ( - this.model.data.activeElement.clientID === clientID - && ![Mode.DRAG_CANVAS, Mode.GROUP].includes(this.mode) + this.model.data.activeElement.clientID === clientID && + ![Mode.DRAG_CANVAS, Mode.GROUP].includes(this.mode) ) { cuboid.setOpacity(selectedOpacity); if (!object.lock) { @@ -964,12 +966,12 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { const sphereCenter = points.geometry.boundingSphere.center; const { radius } = points.geometry.boundingSphere; if (!this.views.perspective.camera) return; - const xRange = -radius / 2 < this.views.perspective.camera.position.x - sphereCenter.x - && radius / 2 > this.views.perspective.camera.position.x - sphereCenter.x; - const yRange = -radius / 2 < this.views.perspective.camera.position.y - sphereCenter.y - && radius / 2 > this.views.perspective.camera.position.y - sphereCenter.y; - const zRange = -radius / 2 < this.views.perspective.camera.position.z - sphereCenter.z - && radius / 2 > this.views.perspective.camera.position.z - sphereCenter.z; + const xRange = -radius / 2 < this.views.perspective.camera.position.x - sphereCenter.x && + radius / 2 > this.views.perspective.camera.position.x - sphereCenter.x; + const yRange = -radius / 2 < this.views.perspective.camera.position.y - sphereCenter.y && + radius / 2 > this.views.perspective.camera.position.y - sphereCenter.y; + const zRange = -radius / 2 < this.views.perspective.camera.position.z - sphereCenter.z && + radius / 2 > this.views.perspective.camera.position.z - sphereCenter.z; let newX = 0; let newY = 0; let newZ = 0; @@ -1085,10 +1087,10 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { private positionAllViews(x: number, y: number, z: number, animation: boolean): void { if ( - this.views.perspective.controls - && this.views.top.controls - && this.views.side.controls - && this.views.front.controls + this.views.perspective.controls && + this.views.top.controls && + this.views.side.controls && + this.views.front.controls ) { this.views.perspective.controls.setLookAt(x - 8, y - 8, z + 3, x, y, z, animation); this.views.top.camera.position.set(x, y, z + 8); @@ -1266,8 +1268,8 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { private renderTranslateAction(view: ViewType, viewType: any): void { if ( - this.action.translation.helper.x === this.views[view].rayCaster.mouseVector.x - && this.action.translation.helper.y === this.views[view].rayCaster.mouseVector.y + this.action.translation.helper.x === this.views[view].rayCaster.mouseVector.x && + this.action.translation.helper.y === this.views[view].rayCaster.mouseVector.y ) { return; } @@ -1332,8 +1334,8 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { } if ( - this.action.resize.recentMouseVector.x === currentPosX - && this.action.resize.recentMouseVector.y === currentPosY + this.action.resize.recentMouseVector.x === currentPosX && + this.action.resize.recentMouseVector.y === currentPosY ) { return; } @@ -1736,15 +1738,15 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { y: canvas.offsetTop + canvas.offsetHeight / 2, }; if ( - this.action.rotation.screenInit.x === this.action.rotation.screenMove.x - && this.action.rotation.screenInit.y === this.action.rotation.screenMove.y + this.action.rotation.screenInit.x === this.action.rotation.screenMove.x && + this.action.rotation.screenInit.y === this.action.rotation.screenMove.y ) { return; } if ( - this.action.rotation.recentMouseVector.x === this.views[view].rayCaster.mouseVector.x - && this.action.rotation.recentMouseVector.y === this.views[view].rayCaster.mouseVector.y + this.action.rotation.recentMouseVector.x === this.views[view].rayCaster.mouseVector.x && + this.action.rotation.recentMouseVector.y === this.views[view].rayCaster.mouseVector.y ) { return; } @@ -1875,4 +1877,11 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { front: this.views.front.renderer.domElement, }; } + + public destroy(): void { + this.dispatchEvent(new CustomEvent('canvas.destroy', { + bubbles: false, + cancelable: true, + })); + } } diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index 72d84616350..e99cfa634fc 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -166,6 +166,8 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { activeShapeType = ShapeType.CUBOID; } + state.canvas.instance.destroy(); + return { ...state, job: { From 201c830731d43871bd4be77325596c6002562eee Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Thu, 11 Nov 2021 11:18:41 +0300 Subject: [PATCH 2/7] additional action, README and version changes --- cvat-canvas/README.md | 3 +++ cvat-canvas/package-lock.json | 4 ++-- cvat-canvas/package.json | 2 +- cvat-ui/package-lock.json | 4 ++-- cvat-ui/package.json | 2 +- cvat-ui/src/actions/annotation-actions.ts | 3 +++ cvat-ui/src/actions/boundaries-actions.ts | 3 ++- cvat-ui/src/reducers/annotation-reducer.ts | 8 ++++++-- 8 files changed, 20 insertions(+), 9 deletions(-) diff --git a/cvat-canvas/README.md b/cvat-canvas/README.md index ee0a0fb3df9..c4334ad490f 100644 --- a/cvat-canvas/README.md +++ b/cvat-canvas/README.md @@ -137,6 +137,7 @@ Canvas itself handles: cancel(): void; configure(configuration: Configuration): void; isAbleToChangeFrame(): boolean; + destroy(): void; readonly geometry: Geometry; } @@ -189,6 +190,7 @@ Standard JS events are used. - canvas.resizeshape => {id: number} - canvas.contextmenu => { mouseEvent: MouseEvent, objectState: ObjectState, pointID: number } - canvas.error => { exception: Error } + - canvas.destroy ``` ### WEB @@ -239,6 +241,7 @@ canvas.draw({ | bitmap() | + | + | + | + | + | + | + | + | + | + | + | | setZLayer() | + | + | + | + | + | + | + | + | + | + | + | | setupReviewROIs() | + | + | + | + | + | + | + | + | + | + | + | +| destroy() | + | + | + | + | + | + | + | + | + | + | + | diff --git a/cvat-canvas/package-lock.json b/cvat-canvas/package-lock.json index 11a15189a95..864351ae390 100644 --- a/cvat-canvas/package-lock.json +++ b/cvat-canvas/package-lock.json @@ -1,12 +1,12 @@ { "name": "cvat-canvas", - "version": "2.8.0", + "version": "2.9.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cvat-canvas", - "version": "2.8.0", + "version": "2.9.0", "license": "MIT", "dependencies": { "svg.draggable.js": "2.2.2", diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json index 21fda6f0c2b..caf30170e4f 100644 --- a/cvat-canvas/package.json +++ b/cvat-canvas/package.json @@ -1,6 +1,6 @@ { "name": "cvat-canvas", - "version": "2.8.0", + "version": "2.9.0", "description": "Part of Computer Vision Annotation Tool which presents its canvas library", "main": "src/canvas.ts", "scripts": { diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 6c676a570aa..b1187a9b6cb 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,12 +1,12 @@ { "name": "cvat-ui", - "version": "1.25.0", + "version": "1.25.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cvat-ui", - "version": "1.25.0", + "version": "1.25.1", "license": "MIT", "dependencies": { "@ant-design/icons": "^4.6.3", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index a7a9ef5c1d8..62fddfc2185 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.25.0", + "version": "1.25.1", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 99bfb84ca92..4033c8601b7 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -122,6 +122,7 @@ export enum AnnotationActionTypes { CONFIRM_CANVAS_READY = 'CONFIRM_CANVAS_READY', DRAG_CANVAS = 'DRAG_CANVAS', ZOOM_CANVAS = 'ZOOM_CANVAS', + DESTROY_CANVAS = 'DESTROY_CANVAS', SELECT_ISSUE_POSITION = 'SELECT_ISSUE_POSITION', MERGE_OBJECTS = 'MERGE_OBJECTS', GROUP_OBJECTS = 'GROUP_OBJECTS', @@ -1024,6 +1025,8 @@ export function getJobAsync(tid: number, jid: number, initialFrame: number, init loadJobEvent.close(await jobInfoGenerator(job)); + dispatch({ type: AnnotationActionTypes.DESTROY_CANVAS }); + const openTime = Date.now(); dispatch({ type: AnnotationActionTypes.GET_JOB_SUCCESS, diff --git a/cvat-ui/src/actions/boundaries-actions.ts b/cvat-ui/src/actions/boundaries-actions.ts index 71c8f9668b2..8b878c39b17 100644 --- a/cvat-ui/src/actions/boundaries-actions.ts +++ b/cvat-ui/src/actions/boundaries-actions.ts @@ -7,7 +7,7 @@ import { } from 'utils/redux'; import getCore from 'cvat-core-wrapper'; import { LogType } from 'cvat-logger'; -import { computeZRange } from './annotation-actions'; +import { AnnotationActionTypes, computeZRange } from './annotation-actions'; const cvat = getCore(); @@ -43,6 +43,7 @@ export function resetAfterErrorAsync(): ThunkAction { const state = getState(); const job = state.annotation.job.instance; + dispatch(createAction(AnnotationActionTypes.DESTROY_CANVAS)); if (job) { const currentFrame = state.annotation.player.frame.number; const { showAllInterpolationTracks } = state.settings.workspace; diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index e99cfa634fc..4db7581ba87 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -166,8 +166,6 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { activeShapeType = ShapeType.CUBOID; } - state.canvas.instance.destroy(); - return { ...state, job: { @@ -467,6 +465,12 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { }, }; } + case AnnotationActionTypes.DESTROY_CANVAS: { + state.canvas.instance.destroy(); + return { + ...state, + }; + } case AnnotationActionTypes.REMEMBER_CREATED_OBJECT: { const { payload } = action; From 7dcb5d21db367973b814257262a0e902ab16f8e8 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Thu, 11 Nov 2021 11:19:55 +0300 Subject: [PATCH 3/7] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d35a038ab8..6f6c2076da9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed dextr deployment () - Migration of `dataset_repo` application () - Helm settings for external psql database were unused by backend () +- Fixed Interaction handler keyboard handlers () ### Security From f4b935d38194d09b74f44133b33fbe5fcaa3be3a Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Thu, 11 Nov 2021 13:06:10 +0300 Subject: [PATCH 4/7] remove excess reducer --- cvat-ui/src/actions/annotation-actions.ts | 3 +-- cvat-ui/src/actions/boundaries-actions.ts | 5 +++-- cvat-ui/src/reducers/annotation-reducer.ts | 6 ------ 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 4033c8601b7..654ec43b0ef 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -122,7 +122,6 @@ export enum AnnotationActionTypes { CONFIRM_CANVAS_READY = 'CONFIRM_CANVAS_READY', DRAG_CANVAS = 'DRAG_CANVAS', ZOOM_CANVAS = 'ZOOM_CANVAS', - DESTROY_CANVAS = 'DESTROY_CANVAS', SELECT_ISSUE_POSITION = 'SELECT_ISSUE_POSITION', MERGE_OBJECTS = 'MERGE_OBJECTS', GROUP_OBJECTS = 'GROUP_OBJECTS', @@ -1025,7 +1024,7 @@ export function getJobAsync(tid: number, jid: number, initialFrame: number, init loadJobEvent.close(await jobInfoGenerator(job)); - dispatch({ type: AnnotationActionTypes.DESTROY_CANVAS }); + state.annotation.canvas.instance.destroy(); const openTime = Date.now(); dispatch({ diff --git a/cvat-ui/src/actions/boundaries-actions.ts b/cvat-ui/src/actions/boundaries-actions.ts index 8b878c39b17..c2e344dd8fc 100644 --- a/cvat-ui/src/actions/boundaries-actions.ts +++ b/cvat-ui/src/actions/boundaries-actions.ts @@ -7,7 +7,7 @@ import { } from 'utils/redux'; import getCore from 'cvat-core-wrapper'; import { LogType } from 'cvat-logger'; -import { AnnotationActionTypes, computeZRange } from './annotation-actions'; +import { computeZRange } from './annotation-actions'; const cvat = getCore(); @@ -43,7 +43,8 @@ export function resetAfterErrorAsync(): ThunkAction { const state = getState(); const job = state.annotation.job.instance; - dispatch(createAction(AnnotationActionTypes.DESTROY_CANVAS)); + state.annotation.canvas.instance.destroy(); + if (job) { const currentFrame = state.annotation.player.frame.number; const { showAllInterpolationTracks } = state.settings.workspace; diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index 4db7581ba87..72d84616350 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -465,12 +465,6 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { }, }; } - case AnnotationActionTypes.DESTROY_CANVAS: { - state.canvas.instance.destroy(); - return { - ...state, - }; - } case AnnotationActionTypes.REMEMBER_CREATED_OBJECT: { const { payload } = action; From ce896e5a947894f6fb53c92b571fa6db7b2da9b3 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 15 Nov 2021 14:33:21 +0300 Subject: [PATCH 5/7] comment fixes --- cvat-canvas/src/typescript/canvas.ts | 2 +- cvat-canvas/src/typescript/canvasModel.ts | 6 +++++ cvat-canvas/src/typescript/canvasView.ts | 23 ++++++++----------- .../src/typescript/interactionHandler.ts | 5 ++-- cvat-canvas3d/src/typescript/canvas3dModel.ts | 7 ++++-- cvat-canvas3d/src/typescript/canvas3dView.ts | 8 ------- cvat-ui/src/actions/annotation-actions.ts | 2 -- cvat-ui/src/actions/boundaries-actions.ts | 2 -- cvat-ui/src/reducers/annotation-reducer.ts | 2 ++ 9 files changed, 27 insertions(+), 30 deletions(-) diff --git a/cvat-canvas/src/typescript/canvas.ts b/cvat-canvas/src/typescript/canvas.ts index 05ae02c35f9..3ccbbaa1d0f 100644 --- a/cvat-canvas/src/typescript/canvas.ts +++ b/cvat-canvas/src/typescript/canvas.ts @@ -166,7 +166,7 @@ class CanvasImpl implements Canvas { } public destroy(): void { - this.view.destroy(); + this.model.destroy(); } } diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts index 27e23cae45f..22f571d3ad8 100644 --- a/cvat-canvas/src/typescript/canvasModel.ts +++ b/cvat-canvas/src/typescript/canvasModel.ts @@ -146,6 +146,7 @@ export enum UpdateReasons { ZOOM_CANVAS = 'zoom_canvas', CONFIG_UPDATED = 'config_updated', DATA_FAILED = 'data_failed', + DESTROY = 'destroy', } export enum Mode { @@ -210,6 +211,7 @@ export interface CanvasModel { isAbleToChangeFrame(): boolean; configure(configuration: Configuration): void; cancel(): void; + destroy(): void; } export class CanvasModelImpl extends MasterImpl implements CanvasModel { @@ -685,6 +687,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel { this.notify(UpdateReasons.CANCEL); } + public destroy(): void { + this.notify(UpdateReasons.DESTROY); + } + public get configuration(): Configuration { return { ...this.data.configuration }; } diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index e83c22196f9..a4af1149e7d 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -51,7 +51,6 @@ import { export interface CanvasView { html(): HTMLDivElement; - destroy(): void; } export class CanvasViewImpl implements CanvasView, Listener { @@ -1359,6 +1358,16 @@ export class CanvasViewImpl implements CanvasView, Listener { }, }); this.canvas.dispatchEvent(event); + } else if (reason === UpdateReasons.DESTROY) { + this.canvas.dispatchEvent( + new CustomEvent('canvas.destroy', { + bubbles: false, + cancelable: true, + }), + ); + // We can't call namespaced svgjs event + // see - https://svgjs.dev/docs/2.7/events/ + this.adoptedContent.fire('destroy'); } if (model.imageBitmap && [UpdateReasons.IMAGE_CHANGED, UpdateReasons.OBJECTS_UPDATED].includes(reason)) { @@ -1370,18 +1379,6 @@ export class CanvasViewImpl implements CanvasView, Listener { return this.canvas; } - public destroy(): void { - this.canvas.dispatchEvent( - new CustomEvent('canvas.destroy', { - bubbles: false, - cancelable: true, - }), - ); - // We can't call namespaced svgjs event - // see - https://svgjs.dev/docs/2.7/events/ - this.adoptedContent.fire('destroy'); - } - private redrawBitmap(): void { const width = +this.background.style.width.slice(0, -2); const height = +this.background.style.height.slice(0, -2); diff --git a/cvat-canvas/src/typescript/interactionHandler.ts b/cvat-canvas/src/typescript/interactionHandler.ts index 9e77c7dbd7b..dbb56ebc1f6 100644 --- a/cvat-canvas/src/typescript/interactionHandler.ts +++ b/cvat-canvas/src/typescript/interactionHandler.ts @@ -375,7 +375,8 @@ export class InteractionHandlerImpl implements InteractionHandler { return false; } - private onKeyUp = (e:KeyboardEvent):void => { + private onKeyUp = (e: KeyboardEvent): void => { + console.log('keyup'); if (this.interactionData.enabled && e.keyCode === 17) { if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { this.interactionData.onChangeToolsBlockerState('keyup'); @@ -387,7 +388,7 @@ export class InteractionHandlerImpl implements InteractionHandler { } }; - private onKeyDown = (e:KeyboardEvent):void => { + private onKeyDown = (e: KeyboardEvent): void => { if (!e.repeat && this.interactionData.enabled && e.keyCode === 17) { if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { this.interactionData.onChangeToolsBlockerState('keydown'); diff --git a/cvat-canvas3d/src/typescript/canvas3dModel.ts b/cvat-canvas3d/src/typescript/canvas3dModel.ts index 41c566cf8d7..928e16c4d4e 100644 --- a/cvat-canvas3d/src/typescript/canvas3dModel.ts +++ b/cvat-canvas3d/src/typescript/canvas3dModel.ts @@ -126,6 +126,7 @@ export interface Canvas3dModel { configureShapes(shapeProperties: any): void; fit(): void; group(groupData: GroupData): void; + destroy(): void; } export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel { @@ -234,8 +235,8 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel { } public isAbleToChangeFrame(): boolean { - const isUnable = [Mode.DRAG, Mode.EDIT, Mode.RESIZE, Mode.INTERACT, Mode.BUSY].includes(this.data.mode) - || (this.data.mode === Mode.DRAW && typeof this.data.drawData.redraw === 'number'); + const isUnable = [Mode.DRAG, Mode.EDIT, Mode.RESIZE, Mode.INTERACT, Mode.BUSY].includes(this.data.mode) || + (this.data.mode === Mode.DRAW && typeof this.data.drawData.redraw === 'number'); return !isUnable; } @@ -340,4 +341,6 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel { public get groupData(): GroupData { return { ...this.data.groupData }; } + + public destroy(): void {} } diff --git a/cvat-canvas3d/src/typescript/canvas3dView.ts b/cvat-canvas3d/src/typescript/canvas3dView.ts index f42665bca35..229d22c3de2 100644 --- a/cvat-canvas3d/src/typescript/canvas3dView.ts +++ b/cvat-canvas3d/src/typescript/canvas3dView.ts @@ -19,7 +19,6 @@ export interface Canvas3dView { html(): ViewsDOM; render(): void; keyControls(keys: KeyboardEvent): void; - destroy(): void; } export enum CameraAction { @@ -1877,11 +1876,4 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener { front: this.views.front.renderer.domElement, }; } - - public destroy(): void { - this.dispatchEvent(new CustomEvent('canvas.destroy', { - bubbles: false, - cancelable: true, - })); - } } diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 654ec43b0ef..99bfb84ca92 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -1024,8 +1024,6 @@ export function getJobAsync(tid: number, jid: number, initialFrame: number, init loadJobEvent.close(await jobInfoGenerator(job)); - state.annotation.canvas.instance.destroy(); - const openTime = Date.now(); dispatch({ type: AnnotationActionTypes.GET_JOB_SUCCESS, diff --git a/cvat-ui/src/actions/boundaries-actions.ts b/cvat-ui/src/actions/boundaries-actions.ts index c2e344dd8fc..71c8f9668b2 100644 --- a/cvat-ui/src/actions/boundaries-actions.ts +++ b/cvat-ui/src/actions/boundaries-actions.ts @@ -43,8 +43,6 @@ export function resetAfterErrorAsync(): ThunkAction { const state = getState(); const job = state.annotation.job.instance; - state.annotation.canvas.instance.destroy(); - if (job) { const currentFrame = state.annotation.player.frame.number; const { showAllInterpolationTracks } = state.settings.workspace; diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index 72d84616350..e99cfa634fc 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -166,6 +166,8 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { activeShapeType = ShapeType.CUBOID; } + state.canvas.instance.destroy(); + return { ...state, job: { From 2fd7b9f1bccd87f59b5b2b506ebd7a3b92e9ea66 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 15 Nov 2021 14:37:20 +0300 Subject: [PATCH 6/7] changelog update --- CHANGELOG.md | 3 +-- cvat-canvas/src/typescript/interactionHandler.ts | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e5817f84e2..a23ab6e2cca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - TDB ### Fixed -- TDB +- Fixed Interaction handler keyboard handlers () ### Security - TDB @@ -63,7 +63,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Helm settings for external psql database were unused by backend () - Updated WSL setup for development () - Helm chart config () -- Fixed Interaction handler keyboard handlers () ### Security diff --git a/cvat-canvas/src/typescript/interactionHandler.ts b/cvat-canvas/src/typescript/interactionHandler.ts index dbb56ebc1f6..0a4a3209f16 100644 --- a/cvat-canvas/src/typescript/interactionHandler.ts +++ b/cvat-canvas/src/typescript/interactionHandler.ts @@ -376,7 +376,6 @@ export class InteractionHandlerImpl implements InteractionHandler { } private onKeyUp = (e: KeyboardEvent): void => { - console.log('keyup'); if (this.interactionData.enabled && e.keyCode === 17) { if (this.interactionData.onChangeToolsBlockerState && !this.thresholdWasModified) { this.interactionData.onChangeToolsBlockerState('keyup'); From 58dd3ce3a5c29bc77b2b86263017f26feb1b498c Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 15 Nov 2021 14:55:51 +0300 Subject: [PATCH 7/7] canvas3d destroy call upd --- cvat-canvas3d/src/typescript/canvas3d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cvat-canvas3d/src/typescript/canvas3d.ts b/cvat-canvas3d/src/typescript/canvas3d.ts index 80c8a90a1b7..ef6e1ff131b 100644 --- a/cvat-canvas3d/src/typescript/canvas3d.ts +++ b/cvat-canvas3d/src/typescript/canvas3d.ts @@ -107,7 +107,7 @@ class Canvas3dImpl implements Canvas3d { } public destroy(): void { - this.view.destroy(); + this.model.destroy(); } }