feat: improve tree back (#86)

* feat: add github icon and homepage toast

* fix: online mode cant load size module

* feat: add size module loading and reset

* feat: add background

* fix: background adapt

* feat: add screen self-adaptation

packages/cli/src/createServer.ts

@@ -36,7 +36,9 @@ function createWs(graph: Graph, option: Config) {
           size: true,
           depth: Number(wsData.newDepth),
         });
+        // setTimeout(async () => {
         ws.send(formatMes("size", await combineRes(graph)));
+        // }, 5000);
       } else if (wsData.type === "depth") {
         const graph = generateGraph("", {
           ...option,

packages/view/src/components/FirstTreeMap/index.tsx

@@ -7,6 +7,8 @@ import { Node } from "../../../types/types";
 import DrawStore from "./store";
 import "./index.scss";
 import { useStore } from "../../contexts";
+import Loading from "../Loading";
+import { throttle } from "@/utils/throttle";
 /*
  @return {
     name: string;
@@ -62,6 +64,7 @@ const FirstTreeMap = ({
   margin = 0,
   padding = 2,
   RectFontSize = 14,
+  fullScreen = false,
   loading = (
     <div
       style={{
@@ -72,10 +75,15 @@ const FirstTreeMap = ({
         alignItems: "center",
       }}
     >
-      loading...
+      <Loading />
     </div>
   ),
 }: DrawSVGProps) => {
+  if (fullScreen) {
+    width = window.innerWidth;
+    height = window.innerHeight;
+  }
+
   const [state, setState] = useState<number>(0); // control transition
   const [data, setData] = useState<Data>();
   const [treeMap, setTreeMap] = useState<d3.HierarchyRectangularNode<Data>>();
@@ -85,12 +93,15 @@ const FirstTreeMap = ({
       setSelectNode: store.setSelectSizeNode,
     };
   });
+  const [innerWidth, setInnerWidth] = useState(width);
+  const [innerHeight, setInnerHeight] = useState(height);
+
   // init
   useEffect(() => {
-    console.log(selectedNode);
-
+    if (!selectedNode) setTreeMap(void 0);
     setData(changeData(selectedNode));
   }, [selectedNode]);
+
   const updateTreeMap = useCallback(
     (data: Data) => {
       if (!data) return;
@@ -175,10 +186,12 @@ const FirstTreeMap = ({
     },
     [height, margin, width],
   );
+
   // data change options
   useEffect(() => {
     if (data) updateTreeMap(data);
   }, [data, updateTreeMap]);
+
   const handle_rect_click = (data: Data) => {
     /*data:{name,size,children,_children} */
     return () => {
@@ -198,14 +211,26 @@ const FirstTreeMap = ({
     };
   };
 
+  useEffect(() => {
+    // 监听窗口大小变化
+    window.addEventListener(
+      "resize",
+      throttle(() => {
+        setInnerWidth(window.innerWidth);
+        setInnerHeight(window.innerHeight);
+      }),
+      false,
+    );
+  }, []);
+
   return (
     <DrawStore value={{ handle_rect_click, loading, RectFontSize }}>
       <div
         // className={`relative w-[${width}px] h-[${height}px] bg-[#1a3055ff]`}
         style={{
           position: "relative",
-          width: width,
-          height: height,
+          width: innerWidth,
+          height: innerHeight,
           backgroundColor: "var(--color-border)",
         }}
         className="text-dark-500"

packages/view/src/components/GridBack/index.tsx

@@ -0,0 +1,60 @@
+import { useStore } from "@/contexts";
+import { throttle } from "@/utils/throttle";
+import React, { useEffect, useRef, useState } from "react";
+
+function GridBackground() {
+  const canvasRef = useRef(null);
+  const { theme } = useStore((state) => state);
+  const [innerWidth, setInnerWidth] = useState(window.innerWidth);
+  const [innerHeight, setInnerHeight] = useState(window.innerHeight);
+
+  useEffect(() => {
+    window.addEventListener(
+      "resize",
+      throttle(() => {
+        setInnerWidth(window.innerWidth);
+        setInnerHeight(window.innerHeight);
+      }),
+    );
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+
+    // 设置Canvas的宽度和高度
+    canvas.width = innerWidth;
+    canvas.height = innerHeight;
+
+    // 定义格子的大小和间隔
+    const gridSpacing = 30;
+
+    // 绘制格子背景
+    if (theme === "light") {
+      ctx.strokeStyle = "#000000e0"; // 格子线的颜色
+    } else {
+      ctx.strokeStyle = "#ffffffd9"; // 格子线的颜色
+    }
+    ctx.lineWidth = 0.1;
+
+    for (let x = 0; x < canvas.width; x += gridSpacing) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, canvas.height);
+      ctx.stroke();
+    }
+
+    for (let y = 0; y < canvas.height; y += gridSpacing) {
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(canvas.width, y);
+      ctx.stroke();
+    }
+  }, [theme, innerWidth, innerHeight]);
+
+  return (
+    <div>
+      <canvas ref={canvasRef} />
+    </div>
+  );
+}
+
+export default GridBackground;

packages/view/src/contexts/index.ts

@@ -137,6 +137,8 @@ if (import.meta.env.VITE_BUILD_MODE == "offline") {
         codependency,
         selectedNode: tempNode,
       });
+      // 清空 selectedSizeNode
+      useStore.setState({ selectedSizeNode: null });
       // 更新完 depth 后，需要重新获取 size
       const { depth } = useStore.getState();
       ws.send(JSON.stringify({ type: "size", newDepth: depth }));

packages/view/src/pages/AnalyzePage/index.tsx

@@ -15,6 +15,9 @@ import {
 import Skeleton from "@/components/Skeleton";
 import FirstTreeMap from "@/components/FirstTreeMap";
 import SizeTree from "@/components/SizeTree";
+import "./index.scss";
+import GridBackground from "@/components/GridBack";
+
 export default function AnalyzePage() {
   const [searchParams] = useSearchParams();
   const {
@@ -29,6 +32,7 @@ export default function AnalyzePage() {
     setSizeLoading,
   } = useStore((state) => state, shallow);
   const svg = useRef(null);
+
   useEffect(() => {
     if (import.meta.env.VITE_BUILD_MODE == "online") {
       setRootLoading(true);
@@ -39,22 +43,27 @@ export default function AnalyzePage() {
       });
     }
   }, [depth, info]);
+
   useEffect(() => {
     setRoot(null);
   }, [info]);
+
   if (rootLoading && !root) {
     return <Skeleton></Skeleton>;
   }
 
   return (
-    <main className="w-screen h-screen overflow-hidden  bg-bg-container">
+    <main className="w-screen h-screen overflow-hidden">
       <div className="fixed">
         {sizeTree ? (
-          <FirstTreeMap width={innerWidth} height={innerHeight}></FirstTreeMap>
+          <FirstTreeMap fullScreen={true}></FirstTreeMap>
         ) : (
           <Tree ref={svg}></Tree>
         )}
       </div>
+      <div className="fixed -z-50 bg-bg-container">
+        <GridBackground></GridBackground>
+      </div>
       <Sidebar />
       <div className="fixed flex p-5">
         <LanguageIcon />

packages/view/src/utils/throttle.ts

@@ -0,0 +1,10 @@
+export const throttle = (func, delay = 500) => {
+  let timer = null;
+  return (...args) => {
+    if (timer) return;
+    timer = setTimeout(() => {
+      func(...args);
+      timer = null;
+    }, delay);
+  };
+};