[3d] refactor legacy code by using new vue style (#3161)

src/components/load3d/Load3D.vue

@@ -7,7 +7,7 @@
     <Load3DScene
       ref="load3DSceneRef"
       :node="node"
-      :type="type"
+      :inputSpec="inputSpec"
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
       :lightIntensity="lightIntensity"
@@ -30,6 +30,7 @@
       @edgeThresholdChange="listenEdgeThresholdChange"
     />
     <Load3DControls
+      :inputSpec="inputSpec"
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
       :showPreview="showPreview"
@@ -42,7 +43,6 @@
       :hasBackgroundImage="hasBackgroundImage"
       :upDirection="upDirection"
       :materialMode="materialMode"
-      :isAnimation="false"
       :edgeThreshold="edgeThreshold"
       @updateBackgroundImage="handleBackgroundImageUpdate"
       @switchCamera="switchCamera"

src/components/load3d/Load3DAnimation.vue

@@ -7,7 +7,7 @@
     <Load3DAnimationScene
       ref="load3DAnimationSceneRef"
       :node="node"
-      :type="type"
+      :inputSpec="inputSpec"
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
       :lightIntensity="lightIntensity"
@@ -35,6 +35,7 @@
     />
     <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
       <Load3DControls
+        :inputSpec="inputSpec"
         :backgroundColor="backgroundColor"
         :showGrid="showGrid"
         :showPreview="showPreview"
@@ -47,7 +48,6 @@
         :hasBackgroundImage="hasBackgroundImage"
         :upDirection="upDirection"
         :materialMode="materialMode"
-        :isAnimation="true"
         @updateBackgroundImage="handleBackgroundImageUpdate"
         @switchCamera="switchCamera"
         @toggleGrid="toggleGrid"

src/components/load3d/Load3DAnimationScene.vue

@@ -1,7 +1,7 @@
 <template>
   <Load3DScene
     :node="node"
-    :type="type"
+    :inputSpec="inputSpec"
     :backgroundColor="backgroundColor"
     :showGrid="showGrid"
     :lightIntensity="lightIntensity"
@@ -29,14 +29,14 @@ import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import {
   CameraType,
-  Load3DAnimationNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const props = defineProps<{
   node: any
-  type: Load3DAnimationNodeType
+  inputSpec: CustomInputSpec
   backgroundColor: string
   showGrid: boolean
   lightIntensity: number

src/components/load3d/Load3DControls.vue

@@ -43,9 +43,9 @@
 
       <ModelControls
         v-if="activeCategory === 'model'"
+        :inputSpec="inputSpec"
         :upDirection="upDirection"
         :materialMode="materialMode"
-        :isAnimation="isAnimation"
         :edgeThreshold="edgeThreshold"
         @updateUpDirection="handleUpdateUpDirection"
         @updateMaterialMode="handleUpdateMaterialMode"
@@ -101,10 +101,12 @@ import {
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const vTooltip = Tooltip
 
 const props = defineProps<{
+  inputSpec: CustomInputSpec
   backgroundColor: string
   showGrid: boolean
   showPreview: boolean
@@ -117,7 +119,6 @@ const props = defineProps<{
   hasBackgroundImage?: boolean
   upDirection: UpDirection
   materialMode: MaterialMode
-  isAnimation: boolean
   edgeThreshold?: number
 }>()
 

src/components/load3d/Load3DScene.vue

@@ -13,17 +13,16 @@ 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'
 import { t } from '@/i18n'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 
 const props = defineProps<{
   node: LGraphNode
-  type: Load3DNodeType | Load3DAnimationNodeType
+  inputSpec: CustomInputSpec
   backgroundColor: string
   showGrid: boolean
   lightIntensity: number
@@ -135,7 +134,7 @@ onMounted(() => {
     node.value as LGraphNode,
     // @ts-expect-error fixme ts strict error
     container.value,
-    props.type
+    props.inputSpec
   )
   handleEvents('add')
 })

src/components/load3d/controls/ModelControls.vue

@@ -100,13 +100,14 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const vTooltip = Tooltip
 
 const props = defineProps<{
+  inputSpec: CustomInputSpec
   upDirection: UpDirection
   materialMode: MaterialMode
-  isAnimation: boolean
   edgeThreshold?: number
 }>()
 
@@ -141,7 +142,7 @@ const materialModes = computed(() => {
     //'depth' disable for now
   ]
 
-  if (!props.isAnimation) {
+  if (!props.inputSpec.isAnimation && !props.inputSpec.isPreview) {
     modes.push('lineart')
   }