diff --git a/packages/core/src/commands/registry.ts b/packages/core/src/commands/registry.ts index 8b0db06a7..42d1e4d51 100644 --- a/packages/core/src/commands/registry.ts +++ b/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 = 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; export type CommandStopKnownId = Extract; diff --git a/packages/core/src/commands/view/CanvasMove.ts b/packages/core/src/commands/view/CanvasMove.ts index 1014a1379..f55a74b4d 100644 --- a/packages/core/src/commands/view/CanvasMove.ts +++ b/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; +} + +export interface CanvasMoveCommandRegistryStop { + 'core:canvas-move': CommandPublicFnFromHandler; +} + +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; } ->; +} diff --git a/packages/core/test/specs/commands/view/CanvasMove.ts b/packages/core/test/specs/commands/view/CanvasMove.ts new file mode 100644 index 000000000..df2f720d1 --- /dev/null +++ b/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'); + }); +});