[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) => {