Simplified custom-events.ts

Author: midlik

src/app/custom-events.ts

@@ -1,56 +1,54 @@
-import { PluginContext } from 'Molstar/mol-plugin/context';
-import { lociDetails, EventDetail } from './loci-details';
 import { InteractivityManager } from 'Molstar/mol-plugin-state/manager/interactivity';
+import { PluginContext } from 'Molstar/mol-plugin/context';
 import { debounceTime } from 'rxjs/operators';
+import { EventDetail, lociDetails } from './loci-details';
 
-export namespace CustomEvents {
 
-    function create(eventTypeArr: string[]) {
-        const eventObj = {} as any;
-        for (let ei = 0, el = eventTypeArr.length; ei < el; ei++) {
-            const eventType = eventTypeArr[ei];
-            let event;
-            if (typeof MouseEvent == 'function') {
-                // current standard
-                event = new MouseEvent(eventType, { 'view': window, 'bubbles': true, 'cancelable': true });
-            } else if (typeof document.createEvent == 'function') {
-                // older standard
-                event = document.createEvent('MouseEvents');
-                event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
-
-            }
-            eventObj[eventType] = event;
-        };
-        return eventObj;
+export namespace CustomEvents {
+    function createEvent(eventType: string): MouseEvent {
+        if (typeof MouseEvent == 'function') {
+            // current standard
+            return new MouseEvent(eventType, { 'view': window, 'bubbles': true, 'cancelable': true });
+        } else if (typeof document.createEvent == 'function') {
+            // older standard
+            const event = document.createEvent('MouseEvents');
+            event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
+            return event;
+        } else {
+            throw new Error('Cannot create event');
+        }
     }
 
-    function dispatchCustomEvent(event: any, eventData: EventDetail, targetElement: HTMLElement) {
-        if (typeof eventData !== 'undefined') {
-            (eventData as any)['residueNumber'] = eventData.seq_id;
-            event['eventData'] = eventData;
-            event.eventData.residueNumber = eventData.seq_id;
+    function dispatchCustomEvent(event: UIEvent, eventData: EventDetail, targetElement: HTMLElement) {
+        if (eventData !== undefined) {
+            if (eventData.seq_id !== undefined) {
+                (eventData as any).residueNumber = eventData.seq_id;
+            }
+            (event as any).eventData = eventData;
             targetElement.dispatchEvent(event);
         }
     }
 
     export function add(plugin: PluginContext, targetElement: HTMLElement) {
-        const pdbevents = create(['PDB.molstar.click', 'PDB.molstar.mouseover', 'PDB.molstar.mouseout']);
+        const PDB_molstar_click = createEvent('PDB.molstar.click');
+        const PDB_molstar_mouseover = createEvent('PDB.molstar.mouseover');
+        const PDB_molstar_mouseout = createEvent('PDB.molstar.mouseout');
+
         plugin.behaviors.interaction.click.subscribe((e: InteractivityManager.ClickEvent) => {
             if (e.button === 1 && e.current && e.current.loci.kind !== 'empty-loci') {
                 const evData = lociDetails(e.current.loci);
-                if (evData) dispatchCustomEvent(pdbevents['PDB.molstar.click'], evData, targetElement);
+                if (evData) dispatchCustomEvent(PDB_molstar_click, evData, targetElement);
             }
         });
         plugin.behaviors.interaction.hover.pipe(debounceTime(100)).subscribe((e: InteractivityManager.HoverEvent) => {
             if (e.current && e.current.loci && e.current.loci.kind !== 'empty-loci') {
                 const evData = lociDetails(e.current.loci);
-                if (evData) dispatchCustomEvent(pdbevents['PDB.molstar.mouseover'], evData, targetElement);
+                if (evData) dispatchCustomEvent(PDB_molstar_mouseover, evData, targetElement);
             }
 
             if (e.current && e.current.loci && e.current.loci.kind === 'empty-loci') {
-                dispatchCustomEvent(pdbevents['PDB.molstar.mouseout'], {}, targetElement);
+                dispatchCustomEvent(PDB_molstar_mouseout, {}, targetElement);
             }
         });
     }
-
-}
+}

src/app/index.ts

@@ -189,7 +189,7 @@ export class PDBeMolstarPlugin {
         if (this.initParams.hideCanvasControls.includes('animation')) pdbePluginSpec.config.push([PluginConfig.Viewport.ShowAnimation, false]);
         if (this.initParams.hideCanvasControls.includes('controlToggle')) pdbePluginSpec.config.push([PluginConfig.Viewport.ShowControls, false]);
         if (this.initParams.hideCanvasControls.includes('controlInfo')) pdbePluginSpec.config.push([PluginConfig.Viewport.ShowSettings, false]);
-        if (this.initParams.superposition){
+        if (this.initParams.superposition) {
             pdbePluginSpec.config.push([PluginConfig.Viewport.ShowAnimation, false]);
             pdbePluginSpec.config.push([PluginConfig.Viewport.ShowTrajectoryControls, false]);
         }
@@ -272,12 +272,12 @@ export class PDBeMolstarPlugin {
                 this.load({ url: dataSource.url, format: dataSource.format as BuiltInTrajectoryFormat, assemblyId: this.initParams.assemblyId, isBinary: dataSource.isBinary, progressMessage: `Loading ${this.initParams.moleculeId ?? ''} ...` });
             }
 
-            // Binding to other PDB Component events
+            // Subscribe to events from other PDB Component
             if (this.initParams.subscribeEvents) {
                 subscribeToComponentEvents(this);
             }
 
-            // Event handling
+            // Emit events for other PDB Components
             CustomEvents.add(this.plugin, this.targetElement);
 
         }

src/app/ui/split-ui/components.ts

@@ -9,6 +9,5 @@ export const UIComponents = {
     /** Component containing 1D view of the sequences (top panel in default layout) */
     SequenceView,
     // TODO add all meaningful components
-    // TODO fix overlay
     // TODO test events
 } as const satisfies Record<string, JSXElementConstructor<any>>;