Add types.ts for device manager

packages/core/src/canvas/model/Canvas.ts

@@ -1,7 +1,7 @@
 import CanvasModule from '..';
 import { ModuleModel } from '../../abstract';
 import { Coordinates, CoordinatesTypes, DEFAULT_COORDS, ObjectAny } from '../../common';
-import { evUpdate as evDeviceUpdate } from '../../device_manager';
+import DeviceEvents from '../../device_manager/types';
 import Page from '../../pages/model/Page';
 import PagesEvents from '../../pages/types';
 import Frame from './Frame';
@@ -33,7 +33,7 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     this.on('change:zoom', this.onZoomChange);
     this.on('change:x change:y', this.onCoordsChange);
     this.on('change:pointer change:pointerScreen', this.onPointerChange);
-    this.listenTo(em, `change:device ${evDeviceUpdate}`, this.updateDevice);
+    this.listenTo(em, `change:device ${DeviceEvents.update}`, this.updateDevice);
     this.listenTo(em, PagesEvents.select, this._pageUpdated);
   }
 

packages/core/src/device_manager/index.ts

@@ -39,32 +39,14 @@ import defConfig, { DeviceManagerConfig } from './config/config';
 import Device, { DeviceProperties } from './model/Device';
 import Devices from './model/Devices';
 import DevicesView from './view/DevicesView';
-
-export const evAll = 'device';
-export const evPfx = `${evAll}:`;
-export const evSelect = `${evPfx}select`;
-export const evSelectBefore = `${evSelect}:before`;
-export const evUpdate = `${evPfx}update`;
-export const evAdd = `${evPfx}add`;
-export const evAddBefore = `${evAdd}:before`;
-export const evRemove = `${evPfx}remove`;
-export const evRemoveBefore = `${evRemove}:before`;
-const chnSel = 'change:device';
-const deviceEvents = {
-  all: evAll,
-  select: evSelect,
-  update: evUpdate,
-  add: evAdd,
-  remove: evRemove,
-  removeBefore: evRemoveBefore,
-};
+import DeviceEvents from './types';
 
 export default class DeviceManager extends ItemManagerModule<
   DeviceManagerConfig & { appendTo?: HTMLElement | string },
   Devices
 > {
   devices: Devices;
-  events!: typeof deviceEvents;
+  events!: typeof DeviceEvents;
   view?: DevicesView;
 
   Device = Device;
@@ -74,11 +56,11 @@ export default class DeviceManager extends ItemManagerModule<
   storageKey = '';
 
   constructor(em: EditorModel) {
-    super(em, 'DeviceManager', new Devices(), deviceEvents, defConfig());
+    super(em, 'DeviceManager', new Devices(), DeviceEvents, defConfig());
     this.devices = this.all;
     this.config.devices?.forEach((device) => this.add(device, { silent: true }));
     this.select(this.config.default || this.devices.at(0));
-    em.on(chnSel, this._onSelect, this);
+    em.on('change:device', this._onSelect, this);
     return this;
   }
 

packages/core/src/device_manager/types.ts

@@ -0,0 +1,62 @@
+/**{START_EVENTS}*/
+export enum DeviceEvents {
+  /**
+   * @event `device:add` New device added to the collection. The `Device` is passed as an argument.
+   * @example
+   * editor.on('device:add', ({device}) => { ... });
+   */
+  add = 'device:add',
+
+  /**
+   * @event `device:add:before` Event triggered before a new device is added.
+   * @example
+   * editor.on('device:add:before', ({device}) => { ... });
+   */
+  addBefore = 'device:add:before',
+
+  /**
+   * @event `device:remove` Device removed from the collection. The `Device` is passed as an argument.
+   * @example
+   * editor.on('device:remove', ({device}) => { ... });
+   */
+  remove = 'device:remove',
+
+  /**
+   * @event `device:remove:before` Event triggered before a device is removed.
+   * @example
+   * editor.on('device:remove:before', ({device}) => { ... });
+   */
+  removeBefore = 'device:remove:before',
+
+  /**
+   * @event `device:select` A new device is selected. The `Device` is passed as an argument.
+   * @example
+   * editor.on('device:select', ({device}) => { ... });
+   */
+  select = 'device:select',
+
+  /**
+   * @event `device:select:before` Event triggered before a new device is selected.
+   * @example
+   * editor.on('device:select:before', ({device}) => { ... });
+   */
+  selectBefore = 'device:select:before',
+
+  /**
+   * @event `device:update` Device updated. The `Device` and the object containing changes are passed as arguments.
+   * @example
+   * editor.on('device:update', ({device}) => { ... });
+   */
+  update = 'device:update',
+
+  /**
+   * @event `device` Catch-all event for all the events mentioned above.
+   * @example
+   * editor.on('device', ({ event, model, ... }) => { ... });
+   */
+  all = 'device',
+}
+/**{END_EVENTS}*/
+
+// This is necessary to prevent the TS documentation generator from breaking.
+export default DeviceEvents;