feat: Add UI support for PTZ presets (#1920)

- Closes #1889

Whilst a simple change theoretically, the card has such a collection of
surfaces that can overlap other surfaces, it's challenging to get this
to work right! There's a real chance this will have broken something
z-index related (e.g. X overlaps Y when it should not), or (for related
reasons) broken curver corners on the card.

tests/components-lib/menu-controller.test.ts

@@ -1,8 +1,13 @@
 import { handleActionConfig } from '@dermotduffy/custom-card-helpers';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MenuController } from '../../src/components-lib/menu-controller';
+import { SubmenuItem } from '../../src/components/submenu/types';
 import { MenuConfig, menuConfigSchema } from '../../src/config/types';
-import { createInteractionEvent, createLitElement } from '../test-utils';
+import {
+  createInteractionActionEvent,
+  createLitElement,
+  createSubmenuInteractionActionEvent,
+} from '../test-utils';
 
 vi.mock('@dermotduffy/custom-card-helpers');
 vi.mock('../../src/utils/ha');
@@ -365,7 +370,7 @@ describe('MenuController', () => {
   describe('should handle actions', () => {
     it('should bail without config', () => {
       const controller = new MenuController(createLitElement());
-      controller.actionHandler(createInteractionEvent('tap'));
+      controller.handleAction(createInteractionActionEvent('tap'));
       expect(vi.mocked(handleActionConfig)).not.toBeCalled();
     });
 
@@ -376,7 +381,7 @@ describe('MenuController', () => {
 
       const controller = new MenuController(host);
 
-      controller.actionHandler(createInteractionEvent('tap'), tapActionConfig);
+      controller.handleAction(createInteractionActionEvent('tap'), tapActionConfig);
       expect(handler).toBeCalledWith(
         expect.objectContaining({
           detail: { action: [action], config: tapActionConfig },
@@ -392,7 +397,9 @@ describe('MenuController', () => {
 
       const controller = new MenuController(host);
 
-      controller.actionHandler(createInteractionEvent('tap', tapActionConfig));
+      controller.handleAction(
+        createSubmenuInteractionActionEvent('tap', tapActionConfig as SubmenuItem),
+      );
       expect(handler).toBeCalledWith(
         expect.objectContaining({
           detail: { action: [action], config: tapActionConfig },
@@ -407,7 +414,7 @@ describe('MenuController', () => {
 
       const controller = new MenuController(host);
 
-      controller.actionHandler(createInteractionEvent('tap'), tapActionConfigMulti);
+      controller.handleAction(createInteractionActionEvent('tap'), tapActionConfigMulti);
 
       expect(handler).toBeCalledWith(
         expect.objectContaining({
@@ -429,7 +436,7 @@ describe('MenuController', () => {
         controller.setExpanded(true);
         expect(controller.isExpanded()).toBeTruthy();
 
-        controller.actionHandler(createInteractionEvent('tap'), tapActionConfig);
+        controller.handleAction(createInteractionActionEvent('tap'), tapActionConfig);
         expect(controller.isExpanded()).toBeFalsy();
       });
 
@@ -445,7 +452,7 @@ describe('MenuController', () => {
         controller.setExpanded(true);
         expect(controller.isExpanded()).toBeTruthy();
 
-        controller.actionHandler(createInteractionEvent('end_tap'), {
+        controller.handleAction(createInteractionActionEvent('end_tap'), {
           end_tap_action: action,
         });
         expect(controller.isExpanded()).toBeFalsy();
@@ -465,7 +472,7 @@ describe('MenuController', () => {
         controller.setExpanded(true);
         expect(controller.isExpanded()).toBeTruthy();
 
-        controller.actionHandler(createInteractionEvent('start_tap'), {
+        controller.handleAction(createInteractionActionEvent('start_tap'), {
           start_tap_action: action,
           end_tap_action: action,
         });
@@ -484,7 +491,7 @@ describe('MenuController', () => {
         controller.setExpanded(false);
         expect(controller.isExpanded()).toBeFalsy();
 
-        controller.actionHandler(createInteractionEvent('tap'), {
+        controller.handleAction(createInteractionActionEvent('tap'), {
           camera_entity: 'foo',
           tap_action: menuToggleAction,
         });
@@ -503,7 +510,10 @@ describe('MenuController', () => {
         controller.setExpanded(true);
         expect(controller.isExpanded()).toBeTruthy();
 
-        controller.actionHandler(createInteractionEvent('end_tap'), tapActionConfig);
+        controller.handleAction(
+          createInteractionActionEvent('end_tap'),
+          tapActionConfig,
+        );
         expect(controller.isExpanded()).toBeTruthy();
       });
     });

tests/components-lib/ptz/ptz-controller.test.ts

@@ -200,6 +200,7 @@ describe('PTZController', () => {
               down: ['relative'],
               zoomIn: ['relative'],
               zoomOut: ['relative'],
+              presets: ['door', 'window'],
             },
           }),
         },
@@ -215,6 +216,148 @@ describe('PTZController', () => {
         },
       });
     });
+
+    it('only presets', () => {
+      const controller = new PTZController(document.createElement('div'));
+      controller.setConfig(createConfig());
+
+      const store = createStore([
+        {
+          cameraID: 'camera.office',
+          capabilities: new Capabilities({
+            ptz: {
+              presets: ['door', 'window'],
+            },
+          }),
+        },
+      ]);
+
+      const cameraManager = createCameraManager(store);
+      controller.setCamera(cameraManager, 'camera.office');
+
+      expect(controller.getPTZActions()['presets']).toEqual([
+        {
+          actions: {
+            tap_action: {
+              action: 'fire-dom-event',
+              advanced_camera_card_action: 'ptz_multi',
+              ptz_action: 'preset',
+              ptz_preset: 'door',
+            },
+          },
+          preset: 'door',
+        },
+        {
+          actions: {
+            tap_action: {
+              action: 'fire-dom-event',
+              advanced_camera_card_action: 'ptz_multi',
+              ptz_action: 'preset',
+              ptz_preset: 'window',
+            },
+          },
+          preset: 'window',
+        },
+      ]);
+    });
+
+    it('should return digital PTZ actions without camera capabilities', () => {
+      const controller = new PTZController(document.createElement('div'));
+      controller.setConfig(createConfig());
+
+      expect(controller.getPTZActions()).toEqual({
+        down: {
+          end_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'down',
+            ptz_phase: 'stop',
+          },
+          start_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'down',
+            ptz_phase: 'start',
+          },
+        },
+        home: {
+          tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+          },
+        },
+        left: {
+          end_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'left',
+            ptz_phase: 'stop',
+          },
+          start_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'left',
+            ptz_phase: 'start',
+          },
+        },
+        right: {
+          end_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'right',
+            ptz_phase: 'stop',
+          },
+          start_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'right',
+            ptz_phase: 'start',
+          },
+        },
+        up: {
+          end_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'up',
+            ptz_phase: 'stop',
+          },
+          start_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'up',
+            ptz_phase: 'start',
+          },
+        },
+        zoom_in: {
+          end_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'zoom_in',
+            ptz_phase: 'stop',
+          },
+          start_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'zoom_in',
+            ptz_phase: 'start',
+          },
+        },
+        zoom_out: {
+          end_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'zoom_out',
+            ptz_phase: 'stop',
+          },
+          start_tap_action: {
+            action: 'fire-dom-event',
+            advanced_camera_card_action: 'ptz_multi',
+            ptz_action: 'zoom_out',
+            ptz_phase: 'start',
+          },
+        },
+      });
+    });
   });
 
   describe('should handle action', () => {
@@ -276,103 +419,4 @@ describe('PTZController', () => {
       expect(handler).not.toBeCalled();
     });
   });
-
-  describe('should identify useful actions', () => {
-    it('without a camera', () => {
-      const controller = new PTZController(document.createElement('div'));
-      expect(controller.hasUsefulAction()).toEqual({
-        pt: true,
-        z: true,
-        home: true,
-      });
-    });
-
-    it('without camera PTZ capabilities', () => {
-      const controller = new PTZController(document.createElement('div'));
-
-      const store = createStore([
-        {
-          cameraID: 'camera.office',
-          capabilities: createCapabilities({
-            ptz: {},
-          }),
-        },
-      ]);
-      const cameraManager = createCameraManager(store);
-      controller.setCamera(cameraManager, 'camera.office');
-
-      expect(controller.hasUsefulAction()).toEqual({
-        pt: true,
-        z: true,
-        home: true,
-      });
-    });
-
-    it('with camera pan and tilt capabilities', () => {
-      const controller = new PTZController(document.createElement('div'));
-      const store = createStore([
-        {
-          cameraID: 'camera.office',
-          capabilities: createCapabilities({
-            ptz: {
-              left: ['relative'],
-              right: ['relative'],
-              up: ['relative'],
-              down: ['relative'],
-            },
-          }),
-        },
-      ]);
-      controller.setCamera(createCameraManager(store), 'camera.office');
-
-      expect(controller.hasUsefulAction()).toEqual({
-        pt: true,
-        z: false,
-        home: false,
-      });
-    });
-
-    it('with camera zoom capabilities', () => {
-      const controller = new PTZController(document.createElement('div'));
-      const store = createStore([
-        {
-          cameraID: 'camera.office',
-          capabilities: createCapabilities({
-            ptz: {
-              zoomIn: ['relative'],
-              zoomOut: ['relative'],
-            },
-          }),
-        },
-      ]);
-      controller.setCamera(createCameraManager(store), 'camera.office');
-
-      expect(controller.hasUsefulAction()).toEqual({
-        pt: false,
-        z: true,
-        home: false,
-      });
-    });
-
-    it('with camera presets', () => {
-      const controller = new PTZController(document.createElement('div'));
-      const store = createStore([
-        {
-          cameraID: 'camera.office',
-          capabilities: createCapabilities({
-            ptz: {
-              presets: ['door'],
-            },
-          }),
-        },
-      ]);
-      controller.setCamera(createCameraManager(store), 'camera.office');
-
-      expect(controller.hasUsefulAction()).toEqual({
-        pt: false,
-        z: false,
-        home: true,
-      });
-    });
-  });
 });

tests/components-lib/status-bar-controller.test.ts

@@ -2,7 +2,7 @@ import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 import { StatusBarController } from '../../src/components-lib/status-bar-controller';
 import { StatusBarConfig, statusBarConfigSchema } from '../../src/config/types';
 import { setOrRemoveAttribute } from '../../src/utils/basic';
-import { createInteractionEvent, createLitElement } from '../test-utils';
+import { createInteractionActionEvent, createLitElement } from '../test-utils';
 
 const createConfig = (config?: unknown): StatusBarConfig => {
   return statusBarConfigSchema.parse(config);
@@ -300,7 +300,7 @@ describe('StatusBarController', () => {
       host.addEventListener('advanced-camera-card:action:execution-request', handler);
 
       const controller = new StatusBarController(host);
-      controller.actionHandler(createInteractionEvent('tap'));
+      controller.actionHandler(createInteractionActionEvent('tap'));
       expect(handler).not.toBeCalled();
     });
 
@@ -318,7 +318,7 @@ describe('StatusBarController', () => {
         tap_action: action,
       };
 
-      controller.actionHandler(createInteractionEvent('tap'), tapActionConfig);
+      controller.actionHandler(createInteractionActionEvent('tap'), tapActionConfig);
 
       expect(handler).toBeCalledWith(
         expect.objectContaining({