Refactor SwitchVisibility

packages/core/src/commands/registry.ts

@@ -17,6 +17,7 @@ import type { ExportTemplateCommandRegistryRun, ExportTemplateCommandRegistrySto
 import type { OpenAssetsCommandRegistryRun, OpenAssetsCommandRegistryStop } from './view/OpenAssets';
 import type { OpenLayersCommandRegistryRun, OpenLayersCommandRegistryStop } from './view/OpenLayers';
 import type { OpenBlocksCommandRegistryRun, OpenBlocksCommandRegistryStop } from './view/OpenBlocks';
+import type { SwitchVisibilityCommandRegistryRun, SwitchVisibilityCommandRegistryStop } from './view/SwitchVisibility';
 import type {
   OpenStyleManagerCommandRegistryRun,
   OpenStyleManagerCommandRegistryStop,
@@ -46,7 +47,8 @@ export interface CommandRegistryRun
     OpenBlocksCommandRegistryRun,
     OpenLayersCommandRegistryRun,
     OpenStyleManagerCommandRegistryRun,
-    OpenTraitManagerCommandRegistryRun {}
+    OpenTraitManagerCommandRegistryRun,
+    SwitchVisibilityCommandRegistryRun {}
 
 export interface CommandRegistryStop
   extends FullscreenCommandRegistryStop,
@@ -58,7 +60,8 @@ export interface CommandRegistryStop
     OpenBlocksCommandRegistryStop,
     OpenLayersCommandRegistryStop,
     OpenStyleManagerCommandRegistryStop,
-    OpenTraitManagerCommandRegistryStop {}
+    OpenTraitManagerCommandRegistryStop,
+    SwitchVisibilityCommandRegistryStop {}
 
 export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>;
 export type CommandStopKnownId = Extract<keyof CommandRegistryStop, string>;

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

@@ -1,21 +1,32 @@
 import { bindAll } from 'underscore';
 import Frame from '../../canvas/model/Frame';
 import Editor from '../../editor';
-import { CommandObject } from './CommandAbstract';
 import { isDef } from '../../utils/mixins';
+import type { CommandPublicFnFromHandler } from '../registryHelpers';
+import CommandAbstract from './CommandAbstract';
 
-export default {
+export interface SwitchVisibilityCommandRegistryRun {
+  'core:component-outline': CommandPublicFnFromHandler<CommandSwitchVisibility['run']>;
+  'sw-visibility': CommandPublicFnFromHandler<CommandSwitchVisibility['run']>;
+}
+
+export interface SwitchVisibilityCommandRegistryStop {
+  'core:component-outline': CommandPublicFnFromHandler<CommandSwitchVisibility['stop']>;
+  'sw-visibility': CommandPublicFnFromHandler<CommandSwitchVisibility['stop']>;
+}
+
+export default class CommandSwitchVisibility extends CommandAbstract {
   init() {
     bindAll(this, '_onFramesChange');
-  },
+  }
 
-  run(ed) {
+  run(ed: Editor) {
     this.toggleVis(ed, true);
-  },
+  }
 
-  stop(ed) {
+  stop(ed: Editor) {
     this.toggleVis(ed, false);
-  },
+  }
 
   toggleVis(ed: Editor, active = true) {
     if (!ed.Commands.isActive('preview')) {
@@ -25,7 +36,7 @@ export default {
       canvasModel[mth]('change:frames', this._onFramesChange);
       this.handleFrames(cv.getFrames(), active);
     }
-  },
+  }
 
   handleFrames(frames: Frame[], active?: boolean) {
     frames.forEach((frame: Frame & { __ol?: boolean }) => {
@@ -36,11 +47,11 @@ export default {
         frame.__ol = true;
       }
     });
-  },
+  }
 
   _onFramesChange(_: any, frames: Frame[]) {
     this.handleFrames(frames);
-  },
+  }
 
   _upFrame(frame: Frame, active?: boolean) {
     const { ppfx, em, id } = this;
@@ -48,10 +59,5 @@ export default {
     const method = isActive ? 'add' : 'remove';
     const cls = `${ppfx}dashed`;
     frame.view?.getBody().classList[method](cls);
-  },
-} as CommandObject<
-  {},
-  {
-    [key: string]: any;
   }
->;
+}

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

@@ -14,7 +14,7 @@ describe('CanvasMove command', () => {
 
   test('onKeyUp should stop the command on space key', () => {
     const command = new CanvasMove({});
-    command.editor = { stopCommand: jest.fn() };
+    command.editor = { stopCommand: jest.fn() } as any;
     command.id = 'core:canvas-move';
 
     command.onKeyUp({ which: 32 } as KeyboardEvent);

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

@@ -10,7 +10,7 @@ describe('CopyComponent command', () => {
       getSelectedAll: jest.fn(() => selected),
     };
 
-    command.run(editor);
+    command.run(editor as any);
 
     expect(set).toHaveBeenCalledWith('clipboard', selected);
   });
@@ -29,7 +29,7 @@ describe('CopyComponent command', () => {
       getSelectedAll: jest.fn(() => [component]),
     };
 
-    command.run(editor);
+    command.run(editor as any);
 
     expect(component.delegate.copy).toHaveBeenCalledWith(component);
     expect(set).toHaveBeenCalledWith('clipboard', [delegated]);

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

@@ -4,34 +4,36 @@ describe('OpenAssets command', () => {
   test('open should open the modal', () => {
     const onceClose = jest.fn();
     const command = new OpenAssets({});
-    command.editor = {
+    const editor = {
       Modal: {
         open: jest.fn(() => ({ onceClose })),
       },
       stopCommand: jest.fn(),
     } as any;
+    command.editor = editor;
     command.am = { __customData: jest.fn() };
     command.config = { custom: false };
     command.title = 'Assets';
 
     command.open('content');
 
-    expect(command.editor.Modal.open).toHaveBeenCalledWith({ title: 'Assets', content: 'content' });
+    expect(editor.Modal.open).toHaveBeenCalledWith({ title: 'Assets', content: 'content' });
     expect(onceClose).toHaveBeenCalledTimes(1);
   });
 
   test('stop should close the modal', () => {
     const command = new OpenAssets({});
-    command.editor = {
+    const editor = {
       Modal: {
         close: jest.fn(),
       },
     } as any;
+    command.editor = editor;
     command.am = { __customData: jest.fn() };
     command.config = { custom: false };
 
-    command.stop(command.editor);
+    command.stop(editor);
 
-    expect(command.editor.Modal.close).toHaveBeenCalledTimes(1);
+    expect(editor.Modal.close).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -3,8 +3,8 @@ import OpenLayers from '../../../../src/commands/view/OpenLayers';
 describe('OpenLayers command', () => {
   test('should show layers container when opened', () => {
     const command = new OpenLayers({});
-    const trigger = jest.fn(() => ({ trigger }));
-    const panel = { set: jest.fn(() => ({ trigger })) };
+    const panelTrigger = jest.fn();
+    const panel = { set: jest.fn(() => ({ trigger: panelTrigger })) };
     const render = jest.fn(() => document.createElement('div'));
     const editor = {
       LayerManager: {

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

@@ -4,13 +4,16 @@ describe('SwitchVisibility command', () => {
   let fakeEditor: any;
   let fakeFrames: any;
   let fakeIsActive: any;
+  let command: SwitchVisibility;
 
   beforeEach(() => {
     fakeFrames = [];
     fakeIsActive = false;
+    command = new SwitchVisibility({ em: { Commands: { isActive: jest.fn(() => false) } }, pStylePrefix: 'gjs-' });
 
     fakeEditor = {
       Canvas: {
+        getModel: jest.fn(() => ({ on: jest.fn(), off: jest.fn() })),
         getFrames: jest.fn(() => fakeFrames),
       },
 
@@ -24,8 +27,25 @@ describe('SwitchVisibility command', () => {
     it('should do nothing if the preview command is active', () => {
       expect(fakeEditor.Canvas.getFrames).not.toHaveBeenCalled();
       fakeIsActive = true;
-      SwitchVisibility.toggleVis(fakeEditor);
+      command.toggleVis(fakeEditor);
       expect(fakeEditor.Canvas.getFrames).not.toHaveBeenCalled();
     });
+
+    it('should remove the dashed class on stop', () => {
+      const remove = jest.fn();
+      fakeFrames = [
+        {
+          view: {
+            loaded: true,
+            getBody: jest.fn(() => ({ classList: { add: jest.fn(), remove } })),
+          },
+          on: jest.fn(),
+        },
+      ];
+
+      command.stop(fakeEditor);
+
+      expect(remove).toHaveBeenCalledWith('gjs-dashed');
+    });
   });
 });