Merge pull request #8 from nkolba/tab-selection-focus

split tab select topic into one topic going from main to renderer and…
finos · Mar 31, 2022 · 8441228 · 8441228
2 parents e9fc800 + 6ff8565
commit 8441228
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/packages/main/src/constants.ts b/packages/main/src/constants.ts
@@ -20,7 +20,8 @@ export enum TOPICS {
   OPEN_CHANNEL_PICKER_CLICK = 'UI:openChannelPicker',
   OPEN_FRAME_TOOLS_CLICK = 'UI:openFrameTools',
   OPEN_TAB_TOOLS_CLICK = 'UI:openTabTools',
-  SELECT_TAB = 'WORK:selectTab',
+  SELECT_TAB = 'WORK:selectTab', //tab state changes from event in the main process (i.e. change of focus from new view or intent resolution)
+  TAB_SELECTED = 'WORK:tabSelected', //tab is selected by user action in the UI
   CLOSE_TAB = 'WORK:closeTab',
   DROP_TAB = 'WORK:dropTab',
   JOIN_CHANNEL = 'WORK:joinChannel',

diff --git a/packages/main/src/listeners/listener.ts b/packages/main/src/listeners/listener.ts
@@ -46,7 +46,7 @@ export class RuntimeListener {
     //start with clean IPC
     ipcMain.removeAllListeners();
 
-    ipcMain.on(TOPICS.SELECT_TAB, (event, args) => {
+    ipcMain.on(TOPICS.TAB_SELECTED, (event, args) => {
       //bring selected browserview to front
       const workspace = this.runtime.getWorkspace(args.source);
       if (workspace) {

diff --git a/packages/main/src/workspace.ts b/packages/main/src/workspace.ts
@@ -141,15 +141,18 @@ export class Workspace {
       if (view) {
         try {
           if (this.window) {
-            //just make sure the browserview is actually attached to the window
-            console.log('setSelectedTab addBrowserView', view.content);
-
+            //ensure the browserview is actually attached to the window
             this.window.addBrowserView(view.content);
             // setTimeout(() => {
             if (this.window) {
               try {
                 console.log('setting top browser view');
                 this.window.setTopBrowserView(view.content);
+                this.window.webContents.send(TOPICS.SELECT_TAB, {
+                  viewId: tabId,
+                });
+                //focus the workspace window
+                this.window.focus();
               } catch (err) {
                 console.error('setSelectedTab', err);
               }

diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
@@ -68,8 +68,8 @@ document.addEventListener(TOPICS.JOIN_CHANNEL, ((event: CustomEvent) => {
   });
 }) as EventListener);
 
-document.addEventListener(TOPICS.SELECT_TAB, ((event: CustomEvent) => {
-  ipcRenderer.send(TOPICS.SELECT_TAB, {
+document.addEventListener(TOPICS.TAB_SELECTED, ((event: CustomEvent) => {
+  ipcRenderer.send(TOPICS.TAB_SELECTED, {
     source: id,
     selected: event.detail.selected,
   });

diff --git a/packages/renderer/src/Frame.tsx b/packages/renderer/src/Frame.tsx
@@ -59,7 +59,7 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT
 
         this.setState({selectedTab:newTabId});
 
-        document.dispatchEvent(new CustomEvent(TOPICS.SELECT_TAB, {detail:{
+        document.dispatchEvent(new CustomEvent(TOPICS.TAB_SELECTED, {detail:{
             selected:newTabId
           }}));
         }
@@ -85,7 +85,7 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT
     }
 
     componentDidMount() {
-      (document as any).addEventListener(TOPICS.ADD_TAB,(event : CustomEvent) => {
+      document.addEventListener(TOPICS.ADD_TAB,((event : CustomEvent) => {
           console.log("Add Tab called", event.detail);
           const tabId = event.detail.viewId;
           const tabName = event.detail.title;
@@ -100,13 +100,13 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT
             //select the new Tab?
             //selectTab(tabId);
           }
-      });
+      }) as EventListener);
 
-      (document as any).addEventListener(TOPICS.SELECT_TAB, (event : CustomEvent) => {
+      document.addEventListener(TOPICS.SELECT_TAB, ((event : CustomEvent) => {
         if (event.detail.selected){
           this.setState({selectedTab:event.detail.selected});
         }
-      });
+      }) as EventListener);
   }
 
   render() {