feat: add webview render

Author: moonrailgun

package.json

@@ -97,6 +97,7 @@
   },
   "dependencies": {
     "@arco-design/web-react": "^2.44.1",
+    "ahooks": "^3.7.5",
     "allotment": "^1.18.0",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",

pnpm-lock.yaml

@@ -14,6 +14,7 @@ import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
+import { initWebviewManager } from './webviewManager';
 
 class AppUpdater {
   constructor() {
@@ -110,6 +111,8 @@ const createWindow = async () => {
   // Remove this if your app does not use auto updates
   // eslint-disable-next-line
   new AppUpdater();
+
+  initWebviewManager(mainWindow);
 };
 
 /**

src/main/main.ts

@@ -2,12 +2,12 @@
 /* eslint no-unused-vars: off */
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
-export type Channels = 'ipc-example';
+export type Channels = 'mount-webview' | 'update-webview-rect';
 
 const electronHandler = {
   ipcRenderer: {
-    sendMessage(channel: Channels, args: unknown[]) {
-      ipcRenderer.send(channel, args);
+    sendMessage(channel: Channels, ...args: unknown[]) {
+      ipcRenderer.send(channel, ...args);
     },
     on(channel: Channels, func: (...args: unknown[]) => void) {
       const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>

src/main/preload.ts

@@ -0,0 +1,54 @@
+import { BrowserView, BrowserWindow, ipcMain, Rectangle } from 'electron';
+
+const webviewMap = new Map<string, BrowserView>();
+
+/**
+ * fix rect into correct size
+ */
+function fixRect(rect: Rectangle): Rectangle {
+  return {
+    x: Math.round(rect.x),
+    y: Math.round(rect.y) + 28,
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+  };
+}
+
+export function initWebviewManager(win: BrowserWindow) {
+  ipcMain.on('mount-webview', (e, info) => {
+    const key = info.key;
+    const url = info.url;
+    if (!url) {
+      return;
+    }
+
+    if (webviewMap.has(key)) {
+      win.setTopBrowserView(webviewMap.get(key)!);
+      return;
+    }
+
+    console.log('[mount-webview] info:', info);
+
+    const view = new BrowserView({
+      webPreferences: {
+        nodeIntegration: false,
+      },
+    });
+    win.addBrowserView(view);
+    view.setBounds(fixRect(info.rect));
+    view.webContents.loadURL(url);
+    webviewMap.set(key, view);
+  });
+
+  ipcMain.on('update-webview-rect', (e, info) => {
+    const key = info.key;
+    if (!webviewMap.has(key)) {
+      return;
+    }
+
+    console.log('[update-webview-rect] info:', info);
+
+    const view = webviewMap.get(key)!;
+    view.setBounds(fixRect(info.rect));
+  });
+}

src/main/webviewManager.ts

@@ -1,7 +1,7 @@
 import { Tree } from '@arco-design/web-react';
 import { IconDown, IconPlus } from '@arco-design/web-react/icon';
 import React from 'react';
-import { generateFakeNode, useTreeStore } from '../store/tree';
+import { generateFakeNode, WebsiteTreeNode, useTreeStore } from '../store/tree';
 import { AddWebsiteBtn } from './AddWebsiteBtn';
 import styled from 'styled-components';
 
@@ -12,7 +12,8 @@ const StyledTree = styled(Tree)`
 ` as unknown as typeof Tree;
 
 export const SideTree: React.FC = React.memo(() => {
-  const { treeData, moveTreeNode, addTreeNodeChildren } = useTreeStore();
+  const { treeData, moveTreeNode, setSelectedNode, addTreeNodeChildren } =
+    useTreeStore();
 
   return (
     <div>
@@ -25,6 +26,12 @@ export const SideTree: React.FC = React.memo(() => {
         icons={{
           switcherIcon: <IconDown />,
         }}
+        onSelect={(_, extra) => {
+          const nodeData = extra.node.props.dataRef;
+          if (nodeData) {
+            setSelectedNode(nodeData as WebsiteTreeNode);
+          }
+        }}
         renderExtra={(node) => {
           return (
             <IconPlus

src/renderer/components/SideTree.tsx

@@ -1,6 +1,77 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { useTreeStore, WebsiteTreeNode } from '../store/tree';
+
+const WebviewRender: React.FC<{ node: WebsiteTreeNode }> = React.memo(
+  (props) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const node = props.node;
+
+    useEffect(() => {
+      if (!containerRef.current) {
+        return;
+      }
+
+      const rect = containerRef.current.getBoundingClientRect();
+
+      window.electron.ipcRenderer.sendMessage('mount-webview', {
+        key: node.key,
+        url: node.url,
+        rect: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+        },
+      });
+    }, [node.key]);
+
+    useEffect(() => {
+      if (!containerRef.current) {
+        return;
+      }
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const { target } = entry;
+          if (!target.parentElement) {
+            return;
+          }
+
+          const rect = target.getBoundingClientRect();
+
+          window.electron.ipcRenderer.sendMessage('update-webview-rect', {
+            key: node.key,
+            rect: {
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height,
+            },
+          });
+        });
+      });
+
+      resizeObserver.observe(containerRef.current);
+
+      return () => {
+        if (containerRef.current) {
+          resizeObserver.unobserve(containerRef.current);
+        }
+      };
+    }, [node.key]);
+
+    return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  }
+);
+WebviewRender.displayName = 'WebviewRender';
 
 export const WebContent: React.FC = React.memo(() => {
-  return <div>fooooooooo</div>;
+  const selectedNode = useTreeStore((state) => state.selectedNode);
+
+  if (!selectedNode) {
+    return <div>Please Select Node</div>;
+  }
+
+  return <WebviewRender node={selectedNode} />;
 });
 WebContent.displayName = 'WebContent';

src/renderer/components/WebContent.tsx

@@ -6,7 +6,7 @@
       http-equiv="Content-Security-Policy"
       content="script-src 'self' 'unsafe-inline'"
     />
-    <title>Hello Electron React!</title>
+    <title>Webbox</title>
   </head>
   <body>
     <div id="root"></div>

src/renderer/index.ejs

@@ -1,4 +1,4 @@
-import { ElectronHandler } from 'main/preload';
+import { ElectronHandler } from '../main/preload';
 
 declare global {
   // eslint-disable-next-line no-unused-vars