made some more improvements to tear outs. now tears out into a new wi…

…ndow on drag leave of the tab bar. Plus better squashing of default behavior on drop. Still a WIP in some areas - but overall, should be a much smoother experience
finos · Jul 19, 2022 · 78d90b5 · 78d90b5
1 parent 526a452
commit 78d90b5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 9 deletions.
diff --git a/packages/main/src/constants.ts b/packages/main/src/constants.ts
@@ -25,6 +25,7 @@ export enum TOPICS {
   CLOSE_TAB = 'WORK:closeTab',
   TAB_DRAG_START = 'WORK:tabDragStart',
   TAB_DRAG_END = 'WORK:tabDragEnd',
+  TEAR_OUT_TAB = 'WORK:tearOutTab',
   DROP_TAB = 'WORK:dropTab',
   REMOVE_TAB = 'WORK:removeTab', //prune tab without closing the view (when moving tab from one window to another)
   JOIN_CHANNEL = 'WORK:joinChannel',

diff --git a/packages/main/src/listeners/listener.ts b/packages/main/src/listeners/listener.ts
@@ -100,16 +100,9 @@ export class RuntimeListener {
         //workspace
         if (oldWorkspace && draggedView) {
           //send event to UI to visually remove the tab
-          /* if (oldWorkspace.window){
-            console.log("removing tab - sending message to client");
-            oldWorkspace.window.webContents.send(TOPICS.REMOVE_TAB, {
-              tabId: this.draggedTab.tabId
-            });
-          }*/
           console.log('calling remove tab');
-
-          await targetWS.addTab(draggedView.id);
           await oldWorkspace.removeTab(draggedView.id);
+          await targetWS.addTab(draggedView.id);
         }
       } else if (tabId) {
         //make a new workspace and window
@@ -146,6 +139,52 @@ export class RuntimeListener {
       }
     });
 
+    ipcMain.on(TOPICS.TEAR_OUT_TAB, async (event, args) => {
+      console.log('tab tear out', event, args.tabId, args.frameTarget);
+      let tabId: string | undefined;
+
+      if (this.draggedTab) {
+        tabId = this.draggedTab.tabId;
+        this.draggedTab = null;
+      }
+      //to do: handle droppng on an existing workspace
+      //get cursor position
+      const p: Point = screen.getCursorScreenPoint();
+      if (tabId) {
+        //make a new workspace and window
+        const workspace = this.runtime.createWorkspace({
+          x: p.x,
+          y: p.y,
+          onInit: () => {
+            console.log('workspace created', workspace.id);
+            return new Promise((resolve) => {
+              if (tabId) {
+                const oldWorkspace = this.runtime.getWorkspace(args.source);
+                const draggedView = this.runtime.getView(tabId);
+                //workspace
+                if (oldWorkspace && draggedView) {
+                  //send event to UI to visually remove the tab
+                  if (oldWorkspace.window) {
+                    console.log('removing tab - sending message to client');
+                    oldWorkspace.window.webContents.send(TOPICS.REMOVE_TAB, {
+                      tabId: tabId,
+                    });
+                  }
+                  oldWorkspace.removeTab(tabId).then(() => {
+                    if (tabId) {
+                      workspace.addTab(tabId);
+                    }
+                  });
+                }
+              }
+              resolve();
+            });
+          },
+        });
+        this.draggedTab = null;
+      }
+    });
+
     ipcMain.on(TOPICS.CLOSE_TAB, (event, args) => {
       //bring selected browserview to front
       const workspace = this.runtime.getWorkspace(args.source);

diff --git a/packages/main/src/workspace.ts b/packages/main/src/workspace.ts
@@ -531,6 +531,7 @@ export class Workspace {
                     viewId: view.id,
                     title: view.getTitle(),
                   });
+
                   if (this.channel && view.channel !== this.channel) {
                     await joinViewToChannel(this.channel, view);
                   }

diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
@@ -109,6 +109,13 @@ document.addEventListener(TOPICS.DROP_TAB, ((event: CustomEvent) => {
   });
 }) as EventListener);
 
+document.addEventListener(TOPICS.TEAR_OUT_TAB, ((event: CustomEvent) => {
+  ipcRenderer.send(TOPICS.TEAR_OUT_TAB, {
+    source: id,
+    tabId: event.detail.tabId,
+  });
+}) as EventListener);
+
 document.addEventListener(TOPICS.SEARCH, ((event: CustomEvent) => {
   const query = event.detail.query;
   ipcRenderer.once(

diff --git a/packages/renderer/src/Frame.tsx b/packages/renderer/src/Frame.tsx
@@ -250,7 +250,7 @@ export class Frame extends React.Component<
 
     const frameDrop = (ev: SyntheticDragEvent) => {
       ev.preventDefault();
-
+      ev.stopPropagation();
       console.log('tabDropped on frame target');
       document.dispatchEvent(
         new CustomEvent(TOPICS.DROP_TAB, {
@@ -263,8 +263,10 @@ export class Frame extends React.Component<
 
     const dragEnd = (ev: SyntheticDragEvent) => {
       ev.preventDefault();
+
       console.log('dragEnd', draggedTab);
       if (draggedTab) {
+        ev.stopPropagation();
         console.log('tabDropped outside target', draggedTab);
         document.dispatchEvent(
           new CustomEvent(TOPICS.DROP_TAB, {
@@ -276,12 +278,29 @@ export class Frame extends React.Component<
       }
     };
 
+    const tearOut = (ev: SyntheticDragEvent) => {
+      ev.preventDefault();
+      //only tear out if there is more than one tab in the set
+      console.log('tearOut?', draggedTab, this.state.tabs.length);
+      if (draggedTab && this.state.tabs.length > 1) {
+        ev.stopPropagation();
+        document.dispatchEvent(
+          new CustomEvent(TOPICS.TEAR_OUT_TAB, {
+            detail: {
+              tabId: draggedTab,
+            },
+          }),
+        );
+      }
+    };
+
     return (
       <ThemeProvider theme={darkTheme}>
         <Paper>
           <div
             className="frameContainer"
             onDrop={frameDrop}
+            onDragLeave={tearOut}
             onDragOver={allowFrameDrop}
           >
             <AppBar position="static" color="inherit">