[3d] some improvement for load3d recording video (#3794)

src/components/load3d/Load3D.vue

@@ -28,6 +28,7 @@
       @background-image-change="listenBackgroundImageChange"
       @up-direction-change="listenUpDirectionChange"
       @edge-threshold-change="listenEdgeThresholdChange"
+      @recording-status-change="listenRecordingStatusChange"
     />
     <Load3DControls
       :input-spec="inputSpec"
@@ -289,6 +290,15 @@ const listenEdgeThresholdChange = (value: number) => {
   edgeThreshold.value = value
 }
 
+const listenRecordingStatusChange = (value: boolean) => {
+  isRecording.value = value
+
+  if (!value && load3DSceneRef.value?.load3d) {
+    hasRecording.value = true
+    recordingDuration.value = load3DSceneRef.value.load3d.getRecordingDuration()
+  }
+}
+
 const listenBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 }

src/components/load3d/Load3DScene.vue

@@ -68,7 +68,9 @@ const eventConfig = {
   },
   textureLoadingStart: () =>
     loadingOverlayRef.value?.startLoading(t('load3d.applyingTexture')),
-  textureLoadingEnd: () => loadingOverlayRef.value?.endLoading()
+  textureLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
+  recordingStatusChange: (value: boolean) =>
+    emit('recordingStatusChange', value)
 } as const
 
 watchEffect(async () => {
@@ -120,6 +122,7 @@ const emit = defineEmits<{
   (e: 'backgroundImageChange', backgroundImage: string): void
   (e: 'upDirectionChange', upDirection: string): void
   (e: 'edgeThresholdChange', threshold: number): void
+  (e: 'recordingStatusChange', status: boolean): void
 }>()
 
 const handleEvents = (action: 'add' | 'remove') => {

src/components/load3d/controls/RecordingControls.vue

@@ -15,7 +15,10 @@
       </Button>
       <Button
         class="p-button-rounded p-button-text"
-        :class="{ 'p-button-danger': isRecording }"
+        :class="{
+          'p-button-danger': isRecording,
+          'recording-button-blink': isRecording
+        }"
         @click="toggleRecording"
       >
         <i
@@ -75,16 +78,16 @@
 import { IWidget, LGraphNode } from '@comfyorg/litegraph'
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { ref, watch } from 'vue'
 
 import { t } from '@/i18n'
+import { useLoad3dService } from '@/services/load3dService'
 
 const vTooltip = Tooltip
 
-const props = defineProps<{
-  node: LGraphNode
-  isRecording: boolean
+const { hasRecording, isRecording, node, recordingDuration } = defineProps<{
   hasRecording: boolean
+  isRecording: boolean
+  node: LGraphNode
   recordingDuration: number
 }>()
 
@@ -95,46 +98,16 @@ const emit = defineEmits<{
   (e: 'clearRecording'): void
 }>()
 
-const node = ref(props.node)
-const isRecording = ref(props.isRecording)
-const hasRecording = ref(props.hasRecording)
-const recordingDuration = ref(props.recordingDuration)
-
-watch(
-  () => props.isRecording,
-  (newValue) => {
-    isRecording.value = newValue
-  }
-)
-
-watch(
-  () => props.hasRecording,
-  (newValue) => {
-    hasRecording.value = newValue
-  }
-)
-
-watch(
-  () => props.recordingDuration,
-  (newValue) => {
-    recordingDuration.value = newValue
-  }
-)
-
 const resizeNodeMatchOutput = () => {
   console.log('resizeNodeMatchOutput')
 
-  const outputWidth = node.value.widgets?.find(
-    (w: IWidget) => w.name === 'width'
-  )
-  const outputHeight = node.value.widgets?.find(
-    (w: IWidget) => w.name === 'height'
-  )
+  const outputWidth = node.widgets?.find((w: IWidget) => w.name === 'width')
+  const outputHeight = node.widgets?.find((w: IWidget) => w.name === 'height')
 
   if (outputWidth && outputHeight && outputHeight.value && outputWidth.value) {
-    const [oldWidth, oldHeight] = node.value.size
+    const [oldWidth, oldHeight] = node.size
 
-    const scene = node.value.widgets?.find((w: IWidget) => w.name === 'image')
+    const scene = node.widgets?.find((w: IWidget) => w.name === 'image')
 
     const sceneHeight = scene?.computedHeight
 
@@ -144,16 +117,21 @@ const resizeNodeMatchOutput = () => {
       const outputRatio = Number(outputHeight.value) / Number(outputWidth.value)
       const expectSceneHeight = sceneWidth * outputRatio
 
-      node.value.setSize([
-        oldWidth,
-        oldHeight + (expectSceneHeight - sceneHeight)
-      ])
+      node.setSize([oldWidth, oldHeight + (expectSceneHeight - sceneHeight)])
+
+      node.graph?.setDirtyCanvas(true, true)
+
+      const load3d = useLoad3dService().getLoad3d(node as LGraphNode)
+
+      if (load3d) {
+        load3d.refreshViewport()
+      }
     }
   }
 }
 
 const toggleRecording = () => {
-  if (isRecording.value) {
+  if (isRecording) {
     emit('stopRecording')
   } else {
     emit('startRecording')
@@ -174,3 +152,19 @@ const formatDuration = (seconds: number): string => {
   return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
 }
 </script>
+
+<style scoped>
+.recording-button-blink {
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>

src/extensions/core/load3d/Load3d.ts

@@ -456,6 +456,8 @@ class Load3d {
     this.viewHelperManager.visibleViewHelper(true)
 
     this.recordingManager.stopRecording()
+
+    this.eventManager.emitEvent('recordingStatusChange', false)
   }
 
   public isRecording(): boolean {