feat: clear website and delete tree node

Author: moonrailgun

src/main/preload.ts

@@ -2,7 +2,10 @@
 /* eslint no-unused-vars: off */
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
-export type Channels = 'mount-webview' | 'update-webview-rect';
+export type Channels =
+  | 'mount-webview'
+  | 'update-webview-rect'
+  | 'clear-webview';
 
 const electronHandler = {
   ipcRenderer: {

src/main/webviewManager.ts

@@ -7,9 +7,9 @@ const webviewMap = new Map<string, BrowserView>();
  */
 function fixRect(rect: Rectangle): Rectangle {
   return {
-    x: Math.round(rect.x),
+    x: Math.round(rect.x) + 1,
     y: Math.round(rect.y) + 28,
-    width: Math.round(rect.width),
+    width: Math.round(rect.width) - 1,
     height: Math.round(rect.height),
   };
 }
@@ -47,4 +47,14 @@ export function initWebviewManager(win: BrowserWindow) {
       view.setBounds(fixRect(info.rect));
     });
   });
+
+  ipcMain.on('clear-webview', (e) => {
+    console.log('[clear-webview]');
+
+    win.getBrowserViews().forEach((view) => {
+      win.removeBrowserView(view);
+    });
+
+    webviewMap.clear();
+  });
 }

src/renderer/components/ClearWebsiteBtn.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@arco-design/web-react';
+import React from 'react';
+import { useTreeStore } from '../store/tree';
+
+export const ClearWebsiteBtn: React.FC = React.memo(() => {
+  const { setSelectedNode } = useTreeStore();
+
+  return (
+    <>
+      <Button
+        long={true}
+        onClick={() => {
+          setSelectedNode(null);
+          window.electron.ipcRenderer.sendMessage('clear-webview');
+        }}
+      >
+        Clear Website
+      </Button>
+    </>
+  );
+});
+ClearWebsiteBtn.displayName = 'ClearWebsiteBtn';

src/renderer/components/SideTree.tsx

@@ -1,31 +1,84 @@
-import { Tree } from '@arco-design/web-react';
+import { Menu, Tooltip, Tree, Trigger } from '@arco-design/web-react';
 import { IconDown, IconPlus } from '@arco-design/web-react/icon';
 import React from 'react';
 import { generateFakeNode, WebsiteTreeNode, useTreeStore } from '../store/tree';
 import { AddWebsiteBtn } from './AddWebsiteBtn';
 import styled from 'styled-components';
+import { ClearWebsiteBtn } from './ClearWebsiteBtn';
 
 const StyledTree = styled(Tree)`
+  margin-top: 0.5rem;
+
   .arco-tree-node-title:hover .arco-tree-node-drag-icon {
     opacity: 0;
   }
+
+  .arco-tree-node-title {
+    padding: 0;
+    padding-right: 4px;
+
+    & .arco-tree-node-title-text > div {
+      padding: 5px 0 5px 4px;
+    }
+  }
 ` as unknown as typeof Tree;
 
+const StyledMenu = styled(Menu)`
+  box-shadow: 0 0 5px rgb(0, 0, 0, 0.25);
+
+  .arco-menu-item {
+    line-height: 32px;
+  }
+` as unknown as typeof Menu;
+
 export const SideTree: React.FC = React.memo(() => {
-  const { treeData, moveTreeNode, setSelectedNode, addTreeNodeChildren } =
-    useTreeStore();
+  const {
+    treeData,
+    selectedNode,
+    moveTreeNode,
+    setSelectedNode,
+    addTreeNodeChildren,
+    deleteTreeNode,
+  } = useTreeStore();
 
   return (
     <div>
       <AddWebsiteBtn />
+      <ClearWebsiteBtn />
 
       <StyledTree
         draggable={true}
         blockNode={true}
+        selectedKeys={selectedNode ? [selectedNode.key] : []}
         treeData={treeData}
         icons={{
           switcherIcon: <IconDown />,
         }}
+        renderTitle={(props) => (
+          <Trigger
+            position="br"
+            popupAlign={{
+              right: [20, 20],
+            }}
+            popup={() => (
+              <StyledMenu>
+                <Menu.Item
+                  key="del"
+                  onClick={() => {
+                    if (props.dataRef && props.dataRef.key) {
+                      deleteTreeNode(props.dataRef.key);
+                    }
+                  }}
+                >
+                  Delete
+                </Menu.Item>
+              </StyledMenu>
+            )}
+            trigger={'contextMenu'}
+          >
+            <div>{props.title}</div>
+          </Trigger>
+        )}
         onSelect={(_, extra) => {
           const nodeData = extra.node.props.dataRef;
           if (nodeData) {

src/renderer/store/tree.ts

@@ -16,7 +16,7 @@ export type WebsiteTreeNode = Pick<TreeDataType, 'title'> & {
 interface TreeStoreState {
   treeData: WebsiteTreeNode[];
   selectedNode: WebsiteTreeNode | null;
-  setSelectedNode: (selectedNode: WebsiteTreeNode) => void;
+  setSelectedNode: (selectedNode: WebsiteTreeNode | null) => void;
   setTreeData: (treeData: WebsiteTreeNode[]) => void;
   addTreeNode: (treeNode: WebsiteTreeNode) => void;
   addTreeNodeChildren: (parentKey: string, treeNode: WebsiteTreeNode) => void;
@@ -25,6 +25,7 @@ interface TreeStoreState {
     dropNode: NodeInstance | null,
     dropPosition: number
   ) => void;
+  deleteTreeNode: (key: string) => void;
 }
 
 const defaultTreeData = [
@@ -49,7 +50,7 @@ export const useTreeStore = create<TreeStoreState>()(
     immer((set) => ({
       treeData: defaultTreeData,
       selectedNode: null,
-      setSelectedNode: (selectedNode: WebsiteTreeNode) => {
+      setSelectedNode: (selectedNode: WebsiteTreeNode | null) => {
         set({
           selectedNode,
         });
@@ -136,6 +137,11 @@ export const useTreeStore = create<TreeStoreState>()(
           state.treeData = [...data];
         });
       },
+      deleteTreeNode: (key: string) => {
+        set((state) => {
+          deleteTreeNode(state.treeData, key);
+        });
+      },
     })),
     {
       name: 'webbox-tree',
@@ -148,15 +154,11 @@ function findTreeNode(
   treeData: WebsiteTreeNode[],
   key: string
 ): WebsiteTreeNode | null {
-  const targetNode = treeData.find((node) => {
-    return node.key === key;
-  });
-
-  if (targetNode) {
-    return targetNode;
-  }
-
   for (const node of treeData) {
+    if (node.key === key) {
+      return node;
+    }
+
     if (node.children && node.children.length > 0) {
       const res = findTreeNode(node.children, key);
       if (res) {
@@ -168,6 +170,28 @@ function findTreeNode(
   return null;
 }
 
+/**
+ * in-place algorithm
+ */
+function deleteTreeNode(treeData: WebsiteTreeNode[], key: string): boolean {
+  for (let i = 0; i < treeData.length; i++) {
+    const node = treeData[i];
+    if (node.key === key) {
+      treeData.splice(i, 1);
+      return true;
+    }
+
+    if (node.children && node.children.length > 0) {
+      const fixed = deleteTreeNode(node.children, key);
+      if (fixed) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
 export function generateFakeNode(): WebsiteTreeNode {
   const key = 'fooo' + Math.random();
   return {