[3d] add tooltip (#2524)

Co-authored-by: github-actions <github-actions@github.com>

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

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'
     )

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)
   }
 

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)
   }
 

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"
   }
 }

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",

src/locales/ja/main.json

@@ -311,6 +311,14 @@
       "maxLength": "メッセージが長すぎます"
     }
   },
+  "load3d": {
+    "backgroundColor": "背景色",
+    "fov": "FOV",
+    "lightIntensity": "光の強度",
+    "previewOutput": "出力のプレビュー",
+    "showGrid": "グリッドを表示",
+    "switchCamera": "カメラを切り替える"
+  },
   "maintenance": {
     "None": "なし",
     "OK": "OK",

src/locales/ko/main.json

@@ -311,6 +311,14 @@
       "maxLength": "메시지가 너무 깁니다"
     }
   },
+  "load3d": {
+    "backgroundColor": "배경색",
+    "fov": "FOV",
+    "lightIntensity": "조명 강도",
+    "previewOutput": "출력 미리보기",
+    "showGrid": "그리드 표시",
+    "switchCamera": "카메라 전환"
+  },
   "maintenance": {
     "None": "없음",
     "OK": "확인",

src/locales/ru/main.json

@@ -311,6 +311,14 @@
       "maxLength": "Сообщение слишком длинное"
     }
   },
+  "load3d": {
+    "backgroundColor": "Цвет фона",
+    "fov": "Угол обзора",
+    "lightIntensity": "Интенсивность света",
+    "previewOutput": "Предварительный просмотр",
+    "showGrid": "Показать сетку",
+    "switchCamera": "Переключить камеру"
+  },
   "maintenance": {
     "None": "Нет",
     "OK": "OK",

src/locales/zh/main.json

@@ -311,6 +311,14 @@
       "maxLength": "消息过长"
     }
   },
+  "load3d": {
+    "backgroundColor": "背景颜色",
+    "fov": "视场",
+    "lightIntensity": "光照强度",
+    "previewOutput": "预览输出",
+    "showGrid": "显示网格",
+    "switchCamera": "切换摄像头"
+  },
   "maintenance": {
     "None": "无",
     "OK": "确定",

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