Refactor CommandOpenStyleManager

packages/core/src/commands/registry.ts

@@ -15,6 +15,10 @@ import type { CanvasMoveCommandRegistryRun, CanvasMoveCommandRegistryStop } from
 import type { CanvasClearCommandRegistryRun } from './view/CanvasClear';
 import type { ExportTemplateCommandRegistryRun, ExportTemplateCommandRegistryStop } from './view/ExportTemplate';
 import type { OpenLayersCommandRegistryRun, OpenLayersCommandRegistryStop } from './view/OpenLayers';
+import type {
+  OpenStyleManagerCommandRegistryRun,
+  OpenStyleManagerCommandRegistryStop,
+} from './view/OpenStyleManager';
 
 type CommandRegistryHandler = (...args: any[]) => any;
 type CommandRegistryEntry<TRegistry, TId extends string> = TId extends keyof TRegistry
@@ -32,7 +36,8 @@ export interface CommandRegistryRun
     CanvasMoveCommandRegistryRun,
     CanvasClearCommandRegistryRun,
     ExportTemplateCommandRegistryRun,
-    OpenLayersCommandRegistryRun {}
+    OpenLayersCommandRegistryRun,
+    OpenStyleManagerCommandRegistryRun {}
 
 export interface CommandRegistryStop
   extends FullscreenCommandRegistryStop,
@@ -40,7 +45,8 @@ export interface CommandRegistryStop
     ResizeCommandRegistryStop,
     CanvasMoveCommandRegistryStop,
     ExportTemplateCommandRegistryStop,
-    OpenLayersCommandRegistryStop {}
+    OpenLayersCommandRegistryStop,
+    OpenStyleManagerCommandRegistryStop {}
 
 export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>;
 export type CommandStopKnownId = Extract<keyof CommandRegistryStop, string>;

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

@@ -1,8 +1,26 @@
 import { $ } from '../../common';
-import { CommandObject } from './CommandAbstract';
+import Editor from '../../editor';
+import type { CommandPublicFnFromHandler } from '../registryHelpers';
+import CommandAbstract from './CommandAbstract';
 
-export default {
+export interface OpenStyleManagerCommandRegistryRun {
-  run(editor, sender) {
+  'core:open-styles': CommandPublicFnFromHandler<CommandOpenStyleManager['run']>;
+  'open-sm': CommandPublicFnFromHandler<CommandOpenStyleManager['run']>;
+}
+
+export interface OpenStyleManagerCommandRegistryStop {
+  'core:open-styles': CommandPublicFnFromHandler<CommandOpenStyleManager['stop']>;
+  'open-sm': CommandPublicFnFromHandler<CommandOpenStyleManager['stop']>;
+}
+
+export default class CommandOpenStyleManager extends CommandAbstract {
+  sender?: any;
+  sm?: any;
+  $cnt?: any;
+  $cntInner?: any;
+  $header?: any;
+
+  run(editor: Editor, sender: any) {
     this.sender = sender;
 
     if (!this.$cnt) {
@@ -19,14 +37,12 @@ export default {
       $cntInner.append($cntSm);
       $cnt.append($cntInner);
 
-      // Device Manager
       if (DeviceManager && config.showDevices) {
         const devicePanel = Panels.addPanel({ id: 'devices-c' });
         const dvEl = DeviceManager.render();
         devicePanel.set('appendContent', dvEl).trigger(trgEvCnt);
       }
 
-      // Selector Manager container
       const slmConfig = SelectorManager.getConfig();
       if (slmConfig.custom) {
         SelectorManager.__trgCustom({ container: $cntSlm.get(0) });
@@ -34,7 +50,6 @@ export default {
         $cntSlm.append(SelectorManager.render([]));
       }
 
-      // Style Manager
       this.sm = StyleManager;
       const smConfig = StyleManager.getConfig();
       const pfx = smConfig.stylePrefix;
@@ -47,20 +62,16 @@ export default {
         $cntSm.append(StyleManager.render());
       }
 
-      // Create panel if not exists
       const pnCnt = 'views-container';
       const pnl = Panels.getPanel(pnCnt) || Panels.addPanel({ id: pnCnt });
-
-      // Add all containers to the panel
       pnl.set('appendContent', $cnt).trigger(trgEvCnt);
 
-      // Toggle Style Manager on target selection
       const em = editor.getModel();
       this.listenTo(em, StyleManager.events.target, this.toggleSm);
     }
 
     this.toggleSm();
-  },
+  }
 
   /**
    * Toggle Style Manager visibility
@@ -77,10 +88,10 @@ export default {
       $cntInner?.hide();
       $header?.show();
     }
-  },
+  }
 
   stop() {
     this.$cntInner?.hide();
     this.$header?.hide();
-  },
+  }
-} as CommandObject<{}, { [k: string]: any }>;
+}

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

@@ -0,0 +1,27 @@
+import OpenStyleManager from '../../../../src/commands/view/OpenStyleManager';
+
+describe('OpenStyleManager command', () => {
+  test('toggleSm should show content when a target is selected', () => {
+    const command = new OpenStyleManager({});
+    command.sender = { get: jest.fn(() => true) };
+    command.sm = { getSelected: jest.fn(() => true) };
+    command.$cntInner = { show: jest.fn(), hide: jest.fn() };
+    command.$header = { show: jest.fn(), hide: jest.fn() };
+
+    command.toggleSm();
+
+    expect(command.$cntInner.show).toHaveBeenCalledTimes(1);
+    expect(command.$header.hide).toHaveBeenCalledTimes(1);
+  });
+
+  test('stop should hide content and header', () => {
+    const command = new OpenStyleManager({});
+    command.$cntInner = { hide: jest.fn() };
+    command.$header = { hide: jest.fn() };
+
+    command.stop();
+
+    expect(command.$cntInner.hide).toHaveBeenCalledTimes(1);
+    expect(command.$header.hide).toHaveBeenCalledTimes(1);
+  });
+});