From 9b60b969238e8f3322cb215399559c393bc5ca35 Mon Sep 17 00:00:00 2001
From: martsi <martsisme@gmail.com>
Date: Fri, 19 Jul 2024 20:55:52 +0800
Subject: [PATCH] feat(tooltip)

---
 src/G6/plugins.ts                 | 16 ++++++++++++++++
 src/api/index.ts                  |  4 ++--
 src/components/BreakdownChart.vue |  2 ++
 3 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/G6/plugins.ts

diff --git a/src/G6/plugins.ts b/src/G6/plugins.ts
new file mode 100644
index 0000000..c32b4e2
--- /dev/null
+++ b/src/G6/plugins.ts
@@ -0,0 +1,16 @@
+import G6 from "@antv/g6";
+import { Task } from "@/type.ts";
+
+export const tooltip = new G6.Tooltip({
+  offsetX: 10,
+  offsetY: 20,
+  getContent(e) {
+    const outDiv = document.createElement("div");
+    outDiv.style.width = "180px";
+    outDiv.innerHTML = `
+      <p>${(e?.item?.getModel().task as Task).name}</p>
+    `;
+    return outDiv;
+  },
+  itemTypes: ["node"],
+});
diff --git a/src/api/index.ts b/src/api/index.ts
index 6487230..e7b6ed0 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -5,8 +5,8 @@
  */
 
 // 手动修改 Mock 接口
-// export * from "./job.ts";
-export * from "./mock.ts";
+export * from "./job.ts";
+// export * from "./mock.ts";
 export * from "./qgis.ts";
 
 // TODO: interface definition of api
diff --git a/src/components/BreakdownChart.vue b/src/components/BreakdownChart.vue
index 26ccece..28532ff 100644
--- a/src/components/BreakdownChart.vue
+++ b/src/components/BreakdownChart.vue
@@ -6,6 +6,7 @@ import { IG6GraphEvent } from "@antv/g6-core/lib/types";
 import { useGraphStore } from "@/store/graph.ts";
 import { storeToRefs } from "pinia";
 import { Task } from "@/type.ts";
+import { tooltip } from "@/G6/plugins.ts";
 
 const props = defineProps<{
   graphId: string;
@@ -35,6 +36,7 @@ onMounted(() => {
         "drag-canvas",
       ],
     },
+    plugins: [tooltip],
     defaultNode: {
       type: "breakdownNode",
     },