Interaction handler keyboard handlers fix

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() | + | + | + | + | + | + | + | + | + | + | + |
 
 <!--lint enable maximum-line-length-->
 

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": {

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;

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);

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);
  });
  }
 

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 {

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,
+ }));
+ }
 }

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": {

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,

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;

cvat-ui/src/reducers/annotation-reducer.ts

@@ -465,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;