Interaction handler keyboard handlers fix

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