refactor: tighten screenshot renderable guard

Author: nighca

spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue

@@ -471,17 +471,18 @@ function handleWheel(e: KonvaEventObject<WheelEvent>) {
 
 // TODO: implement a standalone screenshot taker which does not depend on StageViewer
 // See details in https://github.com/goplus/builder/issues/1807 .
-const canTakeScreenshot = computed(() => {
-  const size = containerSizeRef.value
-  return container.value != null && container.value.isConnected && size != null && size.width > 0 && size.height > 0
-})
+const canTakeScreenshot = computed(() => stageConfig.value != null)
 
-async function takeScreenshot(name: string, signal?: AbortSignal) {
+function ensureCanTakeScreenshot() {
   if (!canTakeScreenshot.value) throw new Error('stage viewer is not renderable for screenshot')
+}
+
+async function takeScreenshot(name: string, signal?: AbortSignal) {
+  ensureCanTakeScreenshot()
   const stage = await untilNotNull(stageRef, signal)
   const nodeTransformer = await untilNotNull(nodeTransformerRef, signal)
   await until(() => !loading.value, signal)
-  if (!canTakeScreenshot.value) throw new Error('stage viewer is not renderable for screenshot')
+  ensureCanTakeScreenshot()
   // Omit transform control when taking screenshot
   const blob = await nodeTransformer.withHidden(
     () =>

spx-gui/src/models/spx/project.test.ts

@@ -7,13 +7,13 @@ import { fromText, toConfig, type Files } from '../common/file'
 import * as hashHelper from '../common/hash'
 import { Backdrop } from './backdrop'
 import { Monitor } from './widget/monitor'
-import { SpxProject, projectConfigFilePath, type RawProjectConfig } from './project'
+import { SpxProject, projectConfigFilePath, type RawProjectConfig, type ScreenshotTaker } from './project'
 
 function mockFile(name = 'mocked') {
   return fromText(name, Math.random() + '')
 }
 
-function makeProject(screenshotTaker: (() => Promise<ReturnType<typeof mockFile>>) | null = async () => mockFile()) {
+function makeProject(screenshotTaker: ScreenshotTaker | null = async () => mockFile()) {
   const project = new SpxProject()
   const sound = new Sound('sound', mockFile())
   project.addSound(sound)
@@ -104,6 +104,7 @@ describe('Project', () => {
     const thumbnail = mockFile('thumbnail')
     const unbindScreenshotTaker = project.bindScreenshotTaker(async () => thumbnail)
 
+    // Schedule the debounced update first, then flush it immediately for a deterministic assertion.
     project['updateThumbnail']()
     await project['updateThumbnail'].flush()
     unbindScreenshotTaker()