[3d] apply new vue desige (#3018)

src/components/load3d/Load3D.vue

@@ -61,16 +61,22 @@ import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import {
   CameraType,
+  Load3DNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComponentWidget } from '@/scripts/domWidget'
 
-const props = defineProps<{
-  node: any
-  type: 'Load3D' | 'Preview3D'
+const { widget } = defineProps<{
+  widget: ComponentWidget<string[]>
 }>()
 
-const node = ref(props.node)
+const inputSpec = widget.inputSpec as CustomInputSpec
+
+const node = widget.node
+const type = inputSpec.type as Load3DNodeType
+
 const backgroundColor = ref('#000000')
 const showGrid = ref(true)
 const showPreview = ref(false)
@@ -86,7 +92,7 @@ const materialMode = ref<MaterialMode>('original')
 const edgeThreshold = ref(85)
 
 const showPreviewButton = computed(() => {
-  return !props.type.includes('Preview')
+  return !type.includes('Preview')
 })
 
 const switchCamera = () => {
@@ -95,68 +101,68 @@ const switchCamera = () => {
 
   showFOVButton.value = cameraType.value === 'perspective'
 
-  node.value.properties['Camera Type'] = cameraType.value
+  node.properties['Camera Type'] = cameraType.value
 }
 
 const togglePreview = (value: boolean) => {
   showPreview.value = value
 
-  node.value.properties['Show Preview'] = showPreview.value
+  node.properties['Show Preview'] = showPreview.value
 }
 
 const toggleGrid = (value: boolean) => {
   showGrid.value = value
 
-  node.value.properties['Show Grid'] = showGrid.value
+  node.properties['Show Grid'] = showGrid.value
 }
 
 const handleUpdateLightIntensity = (value: number) => {
   lightIntensity.value = value
 
-  node.value.properties['Light Intensity'] = lightIntensity.value
+  node.properties['Light Intensity'] = lightIntensity.value
 }
 
 const handleBackgroundImageUpdate = async (file: File | null) => {
   if (!file) {
     hasBackgroundImage.value = false
     backgroundImage.value = ''
-    node.value.properties['Background Image'] = ''
+    node.properties['Background Image'] = ''
     return
   }
 
   backgroundImage.value = await Load3dUtils.uploadFile(file)
 
-  node.value.properties['Background Image'] = backgroundImage.value
+  node.properties['Background Image'] = backgroundImage.value
 }
 
 const handleUpdateFOV = (value: number) => {
   fov.value = value
 
-  node.value.properties['FOV'] = fov.value
+  node.properties['FOV'] = fov.value
 }
 
 const handleUpdateEdgeThreshold = (value: number) => {
   edgeThreshold.value = value
 
-  node.value.properties['Edge Threshold'] = edgeThreshold.value
+  node.properties['Edge Threshold'] = edgeThreshold.value
 }
 
 const handleBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 
-  node.value.properties['Background Color'] = value
+  node.properties['Background Color'] = value
 }
 
 const handleUpdateUpDirection = (value: UpDirection) => {
   upDirection.value = value
 
-  node.value.properties['Up Direction'] = value
+  node.properties['Up Direction'] = value
 }
 
 const handleUpdateMaterialMode = (value: MaterialMode) => {
   materialMode.value = value
 
-  node.value.properties['Material Mode'] = value
+  node.properties['Material Mode'] = value
 }
 
 const listenMaterialModeChange = (mode: MaterialMode) => {

src/components/load3d/Load3DAnimation.vue

@@ -74,16 +74,22 @@ import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import {
   AnimationItem,
   CameraType,
+  Load3DAnimationNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComponentWidget } from '@/scripts/domWidget'
 
-const props = defineProps<{
-  node: any
-  type: 'Load3DAnimation' | 'Preview3DAnimation'
+const { widget } = defineProps<{
+  widget: ComponentWidget<string[]>
 }>()
 
-const node = ref(props.node)
+const inputSpec = widget.inputSpec as CustomInputSpec
+
+const node = widget.node
+const type = inputSpec.type as Load3DAnimationNodeType
+
 const backgroundColor = ref('#000000')
 const showGrid = ref(true)
 const showPreview = ref(false)
@@ -101,7 +107,7 @@ const selectedAnimation = ref(0)
 const backgroundImage = ref('')
 
 const showPreviewButton = computed(() => {
-  return !props.type.includes('Preview')
+  return !type.includes('Preview')
 })
 
 const switchCamera = () => {
@@ -110,44 +116,44 @@ const switchCamera = () => {
 
   showFOVButton.value = cameraType.value === 'perspective'
 
-  node.value.properties['Camera Type'] = cameraType.value
+  node.properties['Camera Type'] = cameraType.value
 }
 
 const togglePreview = (value: boolean) => {
   showPreview.value = value
 
-  node.value.properties['Show Preview'] = showPreview.value
+  node.properties['Show Preview'] = showPreview.value
 }
 
 const toggleGrid = (value: boolean) => {
   showGrid.value = value
 
-  node.value.properties['Show Grid'] = showGrid.value
+  node.properties['Show Grid'] = showGrid.value
 }
 
 const handleUpdateLightIntensity = (value: number) => {
   lightIntensity.value = value
 
-  node.value.properties['Light Intensity'] = lightIntensity.value
+  node.properties['Light Intensity'] = lightIntensity.value
 }
 
 const handleBackgroundImageUpdate = async (file: File | null) => {
   if (!file) {
     hasBackgroundImage.value = false
     backgroundImage.value = ''
-    node.value.properties['Background Image'] = ''
+    node.properties['Background Image'] = ''
     return
   }
 
   backgroundImage.value = await Load3dUtils.uploadFile(file)
 
-  node.value.properties['Background Image'] = backgroundImage.value
+  node.properties['Background Image'] = backgroundImage.value
 }
 
 const handleUpdateFOV = (value: number) => {
   fov.value = value
 
-  node.value.properties['FOV'] = fov.value
+  node.properties['FOV'] = fov.value
 }
 
 const materialMode = ref<MaterialMode>('original')
@@ -156,19 +162,19 @@ const upDirection = ref<UpDirection>('original')
 const handleUpdateUpDirection = (value: UpDirection) => {
   upDirection.value = value
 
-  node.value.properties['Up Direction'] = value
+  node.properties['Up Direction'] = value
 }
 
 const handleUpdateMaterialMode = (value: MaterialMode) => {
   materialMode.value = value
 
-  node.value.properties['Material Mode'] = value
+  node.properties['Material Mode'] = value
 }
 
 const handleBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 
-  node.value.properties['Background Color'] = value
+  node.properties['Background Color'] = value
 }
 
 const togglePlay = (value: boolean) => {

src/components/load3d/Load3DAnimationScene.vue

@@ -28,13 +28,14 @@ import { ref, watch } from 'vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import {
   CameraType,
+  Load3DAnimationNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 
 const props = defineProps<{
   node: any
-  type: 'Load3DAnimation' | 'Preview3DAnimation'
+  type: Load3DAnimationNodeType
   backgroundColor: string
   showGrid: boolean
   lightIntensity: number

src/components/load3d/Load3DScene.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="w-full h-full relative">
+  <div ref="container" class="w-full h-full relative comfy-load-3d">
     <LoadingOverlay ref="loadingOverlayRef" />
   </div>
 </template>
@@ -13,6 +13,8 @@ import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import {
   CameraType,
+  Load3DAnimationNodeType,
+  Load3DNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
@@ -20,8 +22,8 @@ import { t } from '@/i18n'
 import { useLoad3dService } from '@/services/load3dService'
 
 const props = defineProps<{
-  node: any
-  type: 'Load3D' | 'Load3DAnimation' | 'Preview3D' | 'Preview3DAnimation'
+  node: LGraphNode
+  type: Load3DNodeType | Load3DAnimationNodeType
   backgroundColor: string
   showGrid: boolean
   lightIntensity: number