feat: add unmount-webview

Author: moonrailgun

src/main/preload.ts

@@ -4,6 +4,7 @@ import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
 export type Channels =
   | 'mount-webview'
+  | 'unmount-webview'
   | 'update-webview-rect'
   | 'hide-all-webview'
   | 'clear-all-webview';

src/main/webviewManager.ts

@@ -58,6 +58,22 @@ export function initWebviewManager(win: BrowserWindow) {
     webviewMap.set(key, { view, url, hidden: false });
   });
 
+  ipcMain.on('unmount-webview', (e, info) => {
+    if (!win) {
+      console.log('[unmount-webview]', 'cannot get mainWindow');
+      return;
+    }
+
+    console.log('[unmount-webview] info:', info);
+
+    const key = info.key;
+    const webview = webviewMap.get(key);
+    if (webview) {
+      win.removeBrowserView(webview.view);
+      webviewMap.delete(key);
+    }
+  });
+
   ipcMain.on('update-webview-rect', (e, info) => {
     console.log('[update-webview-rect] info:', info);
 

src/renderer/components/SideTree.tsx

@@ -1,6 +1,6 @@
 import { Menu, Tree, Trigger } from '@arco-design/web-react';
 import { IconDown, IconPlus } from '@arco-design/web-react/icon';
-import React from 'react';
+import React, { useState } from 'react';
 import {
   generateDefaultNode,
   WebsiteTreeNode,
@@ -49,6 +49,7 @@ export const SideTree: React.FC = React.memo(() => {
     addTreeNodeChildren,
     deleteTreeNode,
   } = useTreeStore();
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
 
   return (
     <div>
@@ -61,6 +62,10 @@ export const SideTree: React.FC = React.memo(() => {
         draggable={true}
         blockNode={true}
         selectedKeys={selectedNode ? [selectedNode.key] : []}
+        expandedKeys={expandedKeys}
+        onExpand={(expandedKeys) => {
+          setExpandedKeys(expandedKeys);
+        }}
         treeData={treeData}
         icons={{
           switcherIcon: <IconDown />,
@@ -112,7 +117,13 @@ export const SideTree: React.FC = React.memo(() => {
                   return;
                 }
 
-                addTreeNodeChildren(node._key!, generateDefaultNode());
+                const key = node.dataRef.key;
+                if (!key) {
+                  return;
+                }
+
+                setExpandedKeys([...expandedKeys, key]);
+                addTreeNodeChildren(key, generateDefaultNode());
               }}
             />
           );

src/renderer/components/main/WebInvalidUrl.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 import webpageSvg from '../../assets/web-page.svg';
+import { useTreeStore } from '../../store/tree';
 
 const WebInvalidUrlRoot = styled.div`
   height: 100%;
@@ -19,6 +20,12 @@ const WebInvalidUrlRoot = styled.div`
 
 export const WebInvalidUrl: React.FC = React.memo(() => {
   useEffect(() => {
+    const selectedNode = useTreeStore.getState().selectedNode;
+    if (selectedNode) {
+      window.electron.ipcRenderer.sendMessage('unmount-webview', {
+        key: selectedNode.key,
+      });
+    }
     window.electron.ipcRenderer.sendMessage('hide-all-webview');
   }, []);
 

src/renderer/store/tree.ts

@@ -16,8 +16,8 @@ export type WebsiteTreeNode = {
 };
 
 interface TreeStoreState {
-  treeData: WebsiteTreeNode[];
   selectedNode: WebsiteTreeNode | null;
+  treeData: WebsiteTreeNode[];
   setSelectedNode: (selectedNode: WebsiteTreeNode | null) => void;
   setTreeData: (treeData: WebsiteTreeNode[]) => void;
   addTreeNode: (treeNode: WebsiteTreeNode) => void;
@@ -49,6 +49,13 @@ const defaultTreeData = [
     children: [],
     isLeaf: false,
   },
+  {
+    key: 'webbox',
+    title: 'webbox',
+    url: 'https://github.com/msgbyte/webbox',
+    children: [],
+    isLeaf: false,
+  },
 ];
 
 export const useTreeStore = create<TreeStoreState>()(