Add selection for device manager

src/device_manager/index.js

@@ -45,6 +45,7 @@ export const evAdd = `${evPfx}add`;
 export const evAddBefore = `${evAdd}:before`;
 export const evRemove = `${evPfx}remove`;
 export const evRemoveBefore = `${evRemove}:before`;
+const chnSel = 'change:device';
 
 export default () => {
   let c = {};
@@ -80,10 +81,20 @@ export default () => {
       this.em = em;
       this.all = devices;
       this.__initListen();
+      em.on(chnSel, this._onSelect, this);
 
       return this;
     },
 
+    _onSelect(m, deviceId, opts) {
+      const { em, events } = this;
+      const prevId = m.previous('device');
+      const newDevice = this.get(deviceId);
+      const ev = events.select;
+      em.trigger(ev, newDevice, this.get(prevId));
+      this.__catchAllEvent(ev, newDevice, opts);
+    },
+
     /**
      * Add new device
      * @param {Object} props Device properties
@@ -169,6 +180,31 @@ export default () => {
       return devices.models;
     },
 
+    /**
+     * Change the selected device. This will update the frame in the canvas
+     * @param {String|[Device]} device Device or device id
+     * @example
+     * deviceManager.select('some-id');
+     * // or by passing the page
+     * const device = deviceManager.get('some-id');
+     * deviceManager.select(device);
+     */
+    select(device, opts = {}) {
+      const md = isString(device) ? this.get(device) : device;
+      md && this.em.set('device', md.get('id'), opts);
+      return this;
+    },
+
+    /**
+     * Get the selected device
+     * @returns {[Device]}
+     * @example
+     * const selected = deviceManager.getSelected();
+     */
+    getSelected() {
+      return this.get(this.em.get('device'));
+    },
+
     getAll() {
       return devices;
     },

test/specs/device_manager/index.js

@@ -132,6 +132,33 @@ describe('DeviceManager', () => {
       expect(event).toBeCalledWith(model, up, opts);
     });
 
+    test('Select device', () => {
+      const event = jest.fn();
+      const eventAll = jest.fn();
+      const model = obj.add({ id: 'dev-1' });
+      const model2 = obj.add({ id: 'dev-2' });
+
+      em.on(obj.events.select, event);
+      em.on(obj.events.all, eventAll);
+      // Select from the manager
+      obj.select(model);
+      expect(em.get('device')).toBe('dev-1');
+      expect(obj.getSelected()).toBe(model);
+      expect(event).toBeCalledTimes(1);
+      expect(eventAll).toBeCalled();
+
+      // Select from the manager with id
+      obj.select('dev-2');
+      expect(em.get('device')).toBe('dev-2');
+      expect(obj.getSelected()).toBe(model2);
+      expect(event).toBeCalledTimes(2);
+
+      // Select from the editor
+      em.set('device', 'dev-1');
+      expect(obj.getSelected()).toBe(model);
+      expect(event).toBeCalledTimes(3);
+    });
+
     test('Render devices', () => {
       expect(obj.render()).toBeTruthy();
     });