Refactor OpenLayers

packages/core/src/commands/registry.ts

@@ -14,6 +14,7 @@ import type { PasteComponentCommandRegistryRun } from './view/PasteComponent';
 import type { CanvasMoveCommandRegistryRun, CanvasMoveCommandRegistryStop } from './view/CanvasMove';
 import type { CanvasClearCommandRegistryRun } from './view/CanvasClear';
 import type { ExportTemplateCommandRegistryRun, ExportTemplateCommandRegistryStop } from './view/ExportTemplate';
+import type { OpenLayersCommandRegistryRun, OpenLayersCommandRegistryStop } from './view/OpenLayers';
 
 type CommandRegistryHandler = (...args: any[]) => any;
 type CommandRegistryEntry<TRegistry, TId extends string> = TId extends keyof TRegistry
@@ -30,14 +31,16 @@ export interface CommandRegistryRun
     PasteComponentCommandRegistryRun,
     CanvasMoveCommandRegistryRun,
     CanvasClearCommandRegistryRun,
-    ExportTemplateCommandRegistryRun {}
+    ExportTemplateCommandRegistryRun,
+    OpenLayersCommandRegistryRun {}
 
 export interface CommandRegistryStop
   extends FullscreenCommandRegistryStop,
     PreviewCommandRegistryStop,
     ResizeCommandRegistryStop,
     CanvasMoveCommandRegistryStop,
-    ExportTemplateCommandRegistryStop {}
+    ExportTemplateCommandRegistryStop,
+    OpenLayersCommandRegistryStop {}
 
 export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>;
 export type CommandStopKnownId = Extract<keyof CommandRegistryStop, string>;

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

@@ -1,7 +1,21 @@
-import { CommandObject } from './CommandAbstract';
+import Editor from '../../editor';
+import type { CommandPublicFnFromHandler } from '../registryHelpers';
+import CommandAbstract from './CommandAbstract';
 
-export default {
-  run(editor) {
+export interface OpenLayersCommandRegistryRun {
+  'core:open-layers': CommandPublicFnFromHandler<CommandOpenLayers['run']>;
+  'open-layers': CommandPublicFnFromHandler<CommandOpenLayers['run']>;
+}
+
+export interface OpenLayersCommandRegistryStop {
+  'core:open-layers': CommandPublicFnFromHandler<CommandOpenLayers['stop']>;
+  'open-layers': CommandPublicFnFromHandler<CommandOpenLayers['stop']>;
+}
+
+export default class CommandOpenLayers extends CommandAbstract {
+  layers?: HTMLDivElement;
+
+  run(editor: Editor) {
     const lm = editor.LayerManager;
     const pn = editor.Panels;
     const lmConfig = lm.getConfig();
@@ -11,7 +25,6 @@ export default {
     if (!this.layers) {
       const id = 'views-container';
       const layers = document.createElement('div');
-      // @ts-ignore
       const panels = pn.getPanel(id) || pn.addPanel({ id });
 
       if (lmConfig.custom) {
@@ -25,10 +38,10 @@ export default {
     }
 
     this.layers.style.display = 'block';
-  },
+  }
 
   stop() {
     const { layers } = this;
     layers && (layers.style.display = 'none');
-  },
-} as CommandObject<{}, { [k: string]: any }>;
+  }
+}

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

@@ -0,0 +1,35 @@
+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 render = jest.fn(() => document.createElement('div'));
+    const editor = {
+      LayerManager: {
+        getConfig: jest.fn(() => ({})),
+        render,
+      },
+      Panels: {
+        getPanel: jest.fn(() => panel),
+        addPanel: jest.fn(),
+      },
+    } as any;
+
+    command.run(editor);
+
+    expect(panel.set).toHaveBeenCalled();
+    expect(command.layers?.style.display).toBe('block');
+  });
+
+  test('stop should hide layers container', () => {
+    const command = new OpenLayers({});
+    command.layers = document.createElement('div');
+    command.layers.style.display = 'block';
+
+    command.stop();
+
+    expect(command.layers.style.display).toBe('none');
+  });
+});