Refactor CommandCanvasMove

packages/core/src/commands/registry.ts

@@ -11,6 +11,7 @@ import type { PreviewCommandRegistryRun, PreviewCommandRegistryStop } from './vi
 import type { ResizeCommandRegistryRun, ResizeCommandRegistryStop } from './view/Resize';
 import type { CopyComponentCommandRegistryRun } from './view/CopyComponent';
 import type { PasteComponentCommandRegistryRun } from './view/PasteComponent';
+import type { CanvasMoveCommandRegistryRun, CanvasMoveCommandRegistryStop } from './view/CanvasMove';
 
 type CommandRegistryHandler = (...args: any[]) => any;
 type CommandRegistryEntry<TRegistry, TId extends string> = TId extends keyof TRegistry
@@ -24,12 +25,14 @@ export interface CommandRegistryRun
     PreviewCommandRegistryRun,
     ResizeCommandRegistryRun,
     CopyComponentCommandRegistryRun,
-    PasteComponentCommandRegistryRun {}
+    PasteComponentCommandRegistryRun,
+    CanvasMoveCommandRegistryRun {}
 
 export interface CommandRegistryStop
   extends FullscreenCommandRegistryStop,
     PreviewCommandRegistryStop,
-    ResizeCommandRegistryStop {}
+    ResizeCommandRegistryStop,
+    CanvasMoveCommandRegistryStop {}
 
 export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>;
 export type CommandStopKnownId = Extract<keyof CommandRegistryStop, string>;

packages/core/src/commands/view/CanvasMove.ts

@@ -1,34 +1,49 @@
 import { bindAll } from 'underscore';
 import { CanvasEvents } from '../../canvas/types';
+import Editor from '../../editor';
 import Dragger from '../../utils/Dragger';
 import { getKeyChar, off, on } from '../../utils/dom';
-import { CommandObject } from './CommandAbstract';
+import type { CommandPublicFnFromHandler } from '../registryHelpers';
+import CommandAbstract from './CommandAbstract';
 
-export default {
-  run(ed) {
+export interface CanvasMoveCommandRegistryRun {
+  'core:canvas-move': CommandPublicFnFromHandler<CommandCanvasMove['run']>;
+}
+
+export interface CanvasMoveCommandRegistryStop {
+  'core:canvas-move': CommandPublicFnFromHandler<CommandCanvasMove['stop']>;
+}
+
+export default class CommandCanvasMove extends CommandAbstract {
+  editor!: Editor;
+  canvasModel: any;
+  dragger?: Dragger;
+
+  run(ed: Editor) {
     bindAll(this, 'onKeyUp', 'enableDragger', 'disableDragger');
     this.editor = ed;
     this.canvasModel = this.canvas.getCanvasView().model;
-    this.toggleMove(1);
-  },
-  stop(ed) {
+    this.toggleMove(true);
+  }
+
+  stop() {
     this.toggleMove();
-    this.disableDragger();
-  },
+    this.disableDragger(new MouseEvent('mouseup'));
+  }
 
   onKeyUp(ev: KeyboardEvent) {
     if (getKeyChar(ev) === ' ') {
-      this.editor.stopCommand(this.id);
+      this.editor.stopCommand(this.id as string);
     }
-  },
+  }
 
   enableDragger(ev: Event) {
-    this.toggleDragger(1, ev);
-  },
+    this.toggleDragger(true, ev);
+  }
 
-  disableDragger(ev: Event) {
-    this.toggleDragger(0, ev);
-  },
+  disableDragger(ev?: Event) {
+    this.toggleDragger(false, ev as Event);
+  }
 
   toggleDragger(enable: boolean, ev: Event) {
     const { canvasModel, em } = this;
@@ -47,23 +62,23 @@ export default {
         setPosition({ x, y }) {
           canvasModel.set({ x, y });
         },
-        onStart(ev, dragger) {
+        onStart(_ev, dragger) {
           em.trigger(CanvasEvents.moveStart, dragger);
         },
-        onDrag(ev, dragger) {
+        onDrag(_ev, dragger) {
           em.trigger(CanvasEvents.move, dragger);
         },
-        onEnd(ev, dragger) {
+        onEnd(_ev, dragger) {
           em.trigger(CanvasEvents.moveEnd, dragger);
         },
       });
       this.dragger = dragger;
     }
 
-    enable ? dragger.start(ev) : dragger.stop();
-  },
+    enable ? dragger!.start(ev) : dragger!.stop(ev);
+  }
 
-  toggleMove(enable: boolean) {
+  toggleMove(enable = false) {
     const { ppfx } = this;
     const methodCls = enable ? 'add' : 'remove';
     const methodEv = enable ? 'on' : 'off';
@@ -75,10 +90,5 @@ export default {
     methodsEv[methodEv](document, 'keyup', this.onKeyUp);
     methodsEv[methodEv](canvas, 'mousedown', this.enableDragger);
     methodsEv[methodEv](document, 'mouseup', this.disableDragger);
-  },
-} as CommandObject<
-  any,
-  {
-    [key: string]: any;
   }
->;
+}

packages/core/test/specs/commands/view/CanvasMove.ts

@@ -0,0 +1,24 @@
+import CanvasMove from '../../../../src/commands/view/CanvasMove';
+
+describe('CanvasMove command', () => {
+  test('stop should toggle move off and disable the dragger', () => {
+    const command = new CanvasMove({});
+    command.toggleMove = jest.fn();
+    command.disableDragger = jest.fn();
+
+    command.stop();
+
+    expect(command.toggleMove).toHaveBeenCalledWith();
+    expect(command.disableDragger).toHaveBeenCalledWith(expect.any(MouseEvent));
+  });
+
+  test('onKeyUp should stop the command on space key', () => {
+    const command = new CanvasMove({});
+    command.editor = { stopCommand: jest.fn() };
+    command.id = 'core:canvas-move';
+
+    command.onKeyUp({ which: 32 } as KeyboardEvent);
+
+    expect(command.editor.stopCommand).toHaveBeenCalledWith('core:canvas-move');
+  });
+});