Merge pull request #28 from tohsaka888/0.1.41

v0.1.41

KnowledgeGraph/Controller/ConfigController.tsx

@@ -9,7 +9,18 @@ type Props = {
 
 function ConfigController({ graphConfig, children }: Props) {
   return (
-    <ConfigContext.Provider value={{ config: graphConfig }}>
+    <ConfigContext.Provider
+      value={{
+        config: {
+          showHelper: true,
+          helperConfig: {
+            color: "#cecece",
+            size: 24,
+          },
+          ...graphConfig,
+        },
+      }}
+    >
       {children}
     </ConfigContext.Provider>
   );

KnowledgeGraph/Controller/FullScreenController.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useState } from "react";
+
+type FullScreenContextProps = {
+  isFullScreen: boolean;
+  setIsFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const FullScreenContext = createContext<FullScreenContextProps | null>(
+  null
+);
+
+function FullScreenController({ children }: { children: React.ReactNode }) {
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
+  return (
+    <FullScreenContext.Provider value={{ isFullScreen, setIsFullScreen }}>
+      {children}
+    </FullScreenContext.Provider>
+  );
+}
+
+export default FullScreenController;

KnowledgeGraph/Graph.tsx

@@ -6,20 +6,58 @@
  * @Description: 全局配置
  */
 
-import React from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { Provider } from "react-redux";
 import Canvas from "./Canvas";
+import { ConfigContext } from "./context";
 import ConfigController from "./Controller/ConfigController";
+import FullScreenController, {
+  FullScreenContext,
+} from "./Controller/FullScreenController";
 import RightMenuController from "./Controller/RightMenuController";
+import Helper from "./Helper";
 import { store } from "./store";
 import { ConfigProps } from "./typings/Config";
 
+function GraphContainer({ children }: { children: React.ReactNode }) {
+  const { config } = useContext(ConfigContext)!;
+  const { isFullScreen } = useContext(FullScreenContext)!;
+  const screenRef = useRef<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    screenRef.current.width = window.screen.width;
+    screenRef.current.height = window.screen.height;
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: !isFullScreen ? config.width : screenRef.current.width,
+        height: !isFullScreen ? config.height : screenRef.current.height,
+        overflow: "hidden",
+      }}
+      id={"knowledge-graph-container"}
+    >
+      {children}
+    </div>
+  );
+}
+
 function Graph(graphConfig: ConfigProps) {
   return (
     <ConfigController graphConfig={graphConfig}>
       <Provider store={store}>
         <RightMenuController>
-          <Canvas />
+          <FullScreenController>
+            <GraphContainer>
+              <Helper />
+              <Canvas />
+            </GraphContainer>
+          </FullScreenController>
         </RightMenuController>
       </Provider>
     </ConfigController>

KnowledgeGraph/Helper/index.tsx

@@ -0,0 +1,92 @@
+import React, { useContext, useState } from "react";
+import { BsFillQuestionCircleFill } from "react-icons/bs";
+import { AnimatePresence, motion } from "framer-motion";
+import { ConfigContext } from "../context";
+
+function Helper() {
+  const { config } = useContext(ConfigContext)!;
+  const [visible, setVisible] = useState<boolean>(false);
+
+  return (
+    <>
+      {config.showHelper && (
+        <motion.div
+          initial={{
+            position: "absolute",
+            top: "16px",
+            right: "16px",
+            background: "transparent",
+            cursor: "pointer",
+            userSelect: "none",
+          }}
+          onClick={() => setVisible(!visible)}
+        >
+          <BsFillQuestionCircleFill
+            size={config.helperConfig!.size}
+            color={config.helperConfig!.color}
+          />
+          <AnimatePresence>
+            {visible && (
+              <motion.div
+                initial={{
+                  position: "absolute",
+                  right: "0px",
+                  padding: "8px 16px",
+                  opacity: 0,
+                  fontSize: "0px",
+                  border: "1px solid #cecece",
+                  background: "#fff",
+                  width: "max-content",
+                  overflow: "hidden",
+                }}
+                animate={{
+                  borderRadius: "4px",
+                  opacity: 1,
+                  fontSize: "12px",
+                }}
+                exit={{
+                  opacity: 0,
+                  position: "absolute",
+                  right: "0px",
+                }}
+                transition={{
+                  duration: 0.5,
+                }}
+              >
+                <motion.ul
+                  initial={{
+                    margin: "0px 0px 0px 16px",
+                    padding: "0px",
+                  }}
+                >
+                  <motion.li>双击节点-探索/取消探索</motion.li>
+                  <motion.li>悬停节点-高亮节点并且高亮与其有关系的边</motion.li>
+                  <motion.li>拖拽空白画布-移动画布</motion.li>
+                  <motion.li>滑动滚轮-缩放画布</motion.li>
+                  <motion.li>拖拽节点-移动节点</motion.li>
+                  <motion.li>点击边-隐藏/显示边</motion.li>
+                  <motion.li>右键空白画布-画布选项菜单</motion.li>
+                  <motion.li>复位画布-将画布移动缩放恢复</motion.li>
+                  <motion.li>全屏-当前图谱全屏显示</motion.li>
+                  <motion.li>
+                    下载当前图谱-下载当前图谱为选中格式(jpg,jpeg,png,bmp)
+                  </motion.li>
+                  <motion.li>右键节点-节点选项菜单</motion.li>
+                  <motion.li>
+                    当前实体居中-在原缩放比例下将当前节点放置画布中央
+                  </motion.li>
+                  <motion.li>
+                    显示当前节点关系-仅显示当前节点及其子节点和当前节点和子节点的关系
+                  </motion.li>
+                  <motion.li>显示所有节点-显示所有隐藏的节点</motion.li>
+                </motion.ul>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.div>
+      )}
+    </>
+  );
+}
+
+export default Helper;

KnowledgeGraph/Node/index.tsx

@@ -144,6 +144,7 @@ function UnmemoNode({ node }: { node: NodeFrontProps }) {
                 moveNodeAndEdge({ node, dx: info.offset.x, dy: info.offset.y })
               );
               dispatch(onMoveEnd(undefined));
+              dispatch(notHighlight(undefined));
             }}
             initial={{
               x: parentNode ? parentNode.position.x : position.x,

KnowledgeGraph/RightClickMenu/index.tsx

@@ -27,6 +27,7 @@ import {
   moveCanvasToPosition,
   resetCanvas,
 } from "../Controller/canvasConfigSlice";
+import { FullScreenContext } from "../Controller/FullScreenController";
 
 const canvasItems = ["复位画布", "下载当前图谱", "全屏"];
 const nodeItems = ["当前实体居中", "显示当前节点关系", "显示所有节点"];
@@ -110,6 +111,7 @@ function RightMenuContent() {
   );
 
   const [isDownload, setIsDownload] = useState<boolean>(false);
+  const { setIsFullScreen } = useContext(FullScreenContext)!;
 
   return (
     <>
@@ -145,8 +147,10 @@ function RightMenuContent() {
                         if (value === "全屏" || value === "退出全屏") {
                           if (document.fullscreenElement) {
                             document.exitFullscreen();
+                            setIsFullScreen(false);
                           } else {
                             document.documentElement.requestFullscreen();
+                            setIsFullScreen(true);
                           }
                           setEvent(null);
                         }

KnowledgeGraph/typings/Config.ts

@@ -44,6 +44,13 @@ type ConfigProps = {
   position: { x: number; y: number };
   typeConfig?: TypeConfig;
   edgeConfig?: EdgeConfig;
+  width: number | string;
+  height: number | string;
+  showHelper?: boolean;
+  helperConfig?: {
+    color?: string;
+    size?: number;
+  };
 };
 
 type CanvasConfig = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-knowledge-graph",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "React知识图谱组件",
   "private": false,
   "scripts": {

pages/index.tsx

@@ -8,13 +8,10 @@
 import { KnowledgeGraph } from "../KnowledgeGraph";
 import { baseUrl } from "../config/baseUrl";
 import type { NextPage } from "next";
-import { Key, useState } from "react";
-import { Button, message } from "antd";
+import { message } from "antd";
 
 const Home: NextPage = () => {
-  const [width, setWidth] = useState<number>(1);
-
-  const getNode = async (id: Key, direction: "inside" | "outside") => {
+  const getNode = async (id: string, direction: "inside" | "outside") => {
     const res = await fetch(`${baseUrl}/api/${direction}/${id}`);
     const data = await res.json();
     return data;
@@ -39,72 +36,64 @@ const Home: NextPage = () => {
   };
 
   return (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        border: "1px solid #cecece",
-        overflow: "hidden",
+    <KnowledgeGraph
+      explore={explore}
+      basicDistence={38}
+      width={800}
+      height={500}
+      position={{ x: 100, y: 100 }}
+      node={{
+        id: "node-0",
+        type: "根节点",
+        hasMore: true,
+        direction: "root",
+        name: "根节点",
+      }}
+      onExploreEnd={() => {
+        message.info("已经到尾节点了!");
       }}
-    >
-      <Button onClick={() => setWidth(width + 1)}>click</Button>
-      <KnowledgeGraph
-        explore={explore}
-        basicDistence={38}
-        position={{ x: 100, y: 100 }}
-        node={{
-          id: "node-0",
-          type: "根节点",
-          hasMore: true,
-          direction: "root",
-          name: "根节点",
-        }}
-        onExploreEnd={() => {
-          message.info("已经到尾节点了!");
-        }}
-        edgeConfig={{
-          hoveredColor: "#e27272",
-          stroke: "#DEDEDE",
-          strokeWidth: 1,
-        }}
-        typeConfig={{
-          根节点: {
-            radius: 20,
-            fill: "#747ba6",
-            hoverStyle: {
-              fill: "#3949a3",
-            },
+      edgeConfig={{
+        hoveredColor: "#e27272",
+        stroke: "#DEDEDE",
+        strokeWidth: 1,
+      }}
+      typeConfig={{
+        根节点: {
+          radius: 20,
+          fill: "#747ba6",
+          hoverStyle: {
+            fill: "#3949a3",
           },
-          model: {
-            radius: 15,
-            fill: "#b4e5a2",
-            typeSize: 8,
-            nameSize: 8,
-            hoverStyle: {
-              fill: "#6be73e",
-            },
+        },
+        model: {
+          radius: 15,
+          fill: "#b4e5a2",
+          typeSize: 8,
+          nameSize: 8,
+          hoverStyle: {
+            fill: "#6be73e",
           },
-          data: {
-            radius: 15,
-            fill: "#ea52ea",
-            typeSize: 8,
-            nameSize: 8,
-            hoverStyle: {
-              fill: "#e5a2e5",
-            },
+        },
+        data: {
+          radius: 15,
+          fill: "#ea52ea",
+          typeSize: 8,
+          nameSize: 8,
+          hoverStyle: {
+            fill: "#e5a2e5",
           },
-          test: {
-            radius: 13,
-            fill: "#89c4fb",
-            typeSize: 8,
-            nameSize: 8,
-            hoverStyle: {
-              fill: "#2f8fe8",
-            },
+        },
+        test: {
+          radius: 13,
+          fill: "#89c4fb",
+          typeSize: 8,
+          nameSize: 8,
+          hoverStyle: {
+            fill: "#2f8fe8",
           },
-        }}
-      />
-    </div>
+        },
+      }}
+    />
   );
 };