From 29cd6933359b9d1eb4bc87ecf47b8632cfb8e252 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Tue, 11 Feb 2025 22:28:24 -0500
Subject: [PATCH] [3d] add tooltip (#2524)

Co-authored-by: github-actions <github-actions@github.com>
---
 src/components/load3d/Load3DControls.vue      | 27 ++++++++++++++++---
 src/extensions/core/load3d.ts                 |  8 ------
 src/extensions/core/load3d/Load3d.ts          |  2 ++
 src/extensions/core/load3d/Load3dAnimation.ts |  2 ++
 src/locales/en/main.json                      |  8 ++++++
 src/locales/fr/main.json                      |  8 ++++++
 src/locales/ja/main.json                      |  8 ++++++
 src/locales/ko/main.json                      |  8 ++++++
 src/locales/ru/main.json                      |  8 ++++++
 src/locales/zh/main.json                      |  8 ++++++
 src/services/load3dService.ts                 |  2 ++
 11 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 329fda821..068c9e47f 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="absolute top-2 left-2 flex flex-col gap-2 z-20">
     <Button class="p-button-rounded p-button-text" @click="toggleCamera">
-      <i class="pi pi-camera text-white text-lg"></i>
+      <i
+        class="pi pi-camera text-white text-lg"
+        v-tooltip.right="{ value: t('load3d.switchCamera'), showDelay: 300 }"
+      ></i>
     </Button>
 
     <Button
       class="p-button-rounded p-button-text"
       :class="{ 'p-button-outlined': showGrid }"
       @click="toggleGrid"
+      v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
     >
       <i class="pi pi-table text-white text-lg"></i>
     </Button>
 
     <Button class="p-button-rounded p-button-text" @click="openColorPicker">
-      <i class="pi pi-palette text-white text-lg"></i>
+      <i
+        class="pi pi-palette text-white text-lg"
+        v-tooltip.right="{ value: t('load3d.backgroundColor'), showDelay: 300 }"
+      ></i>
       <input
         type="color"
         ref="colorPickerRef"
@@ -30,7 +37,13 @@
         class="p-button-rounded p-button-text"
         @click="toggleLightIntensity"
       >
-        <i class="pi pi-sun text-white text-lg"></i>
+        <i
+          class="pi pi-sun text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.lightIntensity'),
+            showDelay: 300
+          }"
+        ></i>
       </Button>
       <div
         v-show="showLightIntensity"
@@ -50,7 +63,10 @@
 
     <div class="relative" v-if="showFOVButton">
       <Button class="p-button-rounded p-button-text" @click="toggleFOV">
-        <i class="pi pi-expand text-white text-lg"></i>
+        <i
+          class="pi pi-expand text-white text-lg"
+          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
+        ></i>
       </Button>
       <div
         v-show="showFOV"
@@ -76,6 +92,7 @@
             showPreview ? 'pi-eye' : 'pi-eye-slash',
             'text-white text-lg'
           ]"
+          v-tooltip.right="{ value: t('load3d.previewOutput'), showDelay: 300 }"
         ></i>
       </Button>
     </div>
@@ -87,6 +104,8 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import { t } from '@/i18n'
+
 const props = defineProps<{
   backgroundColor: string
   showGrid: boolean
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index 1d0aa7fa9..8c79fa109 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -117,8 +117,6 @@ app.registerExtension({
 
     const load3d = useLoad3dService().getLoad3d(node)
 
-    load3d.setNode(node)
-
     const modelWidget = node.widgets.find(
       (w: IWidget) => w.name === 'model_file'
     )
@@ -275,8 +273,6 @@ app.registerExtension({
 
     const load3d = useLoad3dService().getLoad3d(node) as Load3dAnimation
 
-    load3d.setNode(node)
-
     const modelWidget = node.widgets.find(
       (w: IWidget) => w.name === 'model_file'
     )
@@ -398,8 +394,6 @@ app.registerExtension({
 
     const load3d = useLoad3dService().getLoad3d(node)
 
-    load3d.setNode(node)
-
     const modelWidget = node.widgets.find(
       (w: IWidget) => w.name === 'model_file'
     )
@@ -509,8 +503,6 @@ app.registerExtension({
 
     const load3d = useLoad3dService().getLoad3d(node)
 
-    load3d.setNode(node)
-
     const modelWidget = node.widgets.find(
       (w: IWidget) => w.name === 'model_file'
     )
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index eb1be68e6..ee30f962a 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,4 +1,5 @@
 import { LGraphNode } from '@comfyorg/litegraph'
+import Tooltip from 'primevue/tooltip'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'
@@ -180,6 +181,7 @@ class Load3d {
       onUpdateFOV: (fov: number) => this.setFOV(fov)
     })
 
+    this.controlsApp.directive('tooltip', Tooltip)
     this.controlsApp.mount(controlsMount)
   }
 
diff --git a/src/extensions/core/load3d/Load3dAnimation.ts b/src/extensions/core/load3d/Load3dAnimation.ts
index 318bee855..959c3221e 100644
--- a/src/extensions/core/load3d/Load3dAnimation.ts
+++ b/src/extensions/core/load3d/Load3dAnimation.ts
@@ -1,4 +1,5 @@
 import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
 import * as THREE from 'three'
 import { createApp } from 'vue'
 
@@ -52,6 +53,7 @@ class Load3dAnimation extends Load3d {
     })
 
     this.controlsApp.use(PrimeVue)
+    this.controlsApp.directive('tooltip', Tooltip)
     this.controlsApp.mount(controlsMount)
   }
 
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 13d590cc7..93f6a3c66 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -769,5 +769,13 @@
     "successMessage": "Copied to clipboard",
     "errorMessage": "Failed to copy to clipboard",
     "errorNotSupported": "Clipboard API not supported in your browser"
+  },
+  "load3d": {
+    "switchCamera": "Switch Camera",
+    "showGrid": "Show Grid",
+    "backgroundColor": "Background Color",
+    "lightIntensity": "Light Intensity",
+    "fov": "FOV",
+    "previewOutput": "Preview Output"
   }
 }
\ No newline at end of file
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index c27ac44dc..52c48978f 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -311,6 +311,14 @@
       "maxLength": "Message trop long"
     }
   },
+  "load3d": {
+    "backgroundColor": "Couleur de fond",
+    "fov": "FOV",
+    "lightIntensity": "Intensité de la lumière",
+    "previewOutput": "Aperçu de la sortie",
+    "showGrid": "Afficher la grille",
+    "switchCamera": "Changer de caméra"
+  },
   "maintenance": {
     "None": "Aucun",
     "OK": "OK",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 9c59328ac..a14fcc97b 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -311,6 +311,14 @@
       "maxLength": "メッセージが長すぎます"
     }
   },
+  "load3d": {
+    "backgroundColor": "背景色",
+    "fov": "FOV",
+    "lightIntensity": "光の強度",
+    "previewOutput": "出力のプレビュー",
+    "showGrid": "グリッドを表示",
+    "switchCamera": "カメラを切り替える"
+  },
   "maintenance": {
     "None": "なし",
     "OK": "OK",
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 84e5f2249..e25233a20 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -311,6 +311,14 @@
       "maxLength": "메시지가 너무 깁니다"
     }
   },
+  "load3d": {
+    "backgroundColor": "배경색",
+    "fov": "FOV",
+    "lightIntensity": "조명 강도",
+    "previewOutput": "출력 미리보기",
+    "showGrid": "그리드 표시",
+    "switchCamera": "카메라 전환"
+  },
   "maintenance": {
     "None": "없음",
     "OK": "확인",
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index e823ad7a9..f2648a044 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -311,6 +311,14 @@
       "maxLength": "Сообщение слишком длинное"
     }
   },
+  "load3d": {
+    "backgroundColor": "Цвет фона",
+    "fov": "Угол обзора",
+    "lightIntensity": "Интенсивность света",
+    "previewOutput": "Предварительный просмотр",
+    "showGrid": "Показать сетку",
+    "switchCamera": "Переключить камеру"
+  },
   "maintenance": {
     "None": "Нет",
     "OK": "OK",
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 056ca76a3..9c2a5f93c 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -311,6 +311,14 @@
       "maxLength": "消息过长"
     }
   },
+  "load3d": {
+    "backgroundColor": "背景颜色",
+    "fov": "视场",
+    "lightIntensity": "光照强度",
+    "previewOutput": "预览输出",
+    "showGrid": "显示网格",
+    "switchCamera": "切换摄像头"
+  },
   "maintenance": {
     "None": "无",
     "OK": "确定",
diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts
index 9008d8014..4a48d347b 100644
--- a/src/services/load3dService.ts
+++ b/src/services/load3dService.ts
@@ -33,6 +33,8 @@ export class Load3dService {
 
     const instance = new Load3dClass(container, { createPreview: !isPreview })
 
+    instance.setNode(node)
+
     this.nodeToLoad3dMap.set(node, instance)
 
     return instance