show thumbnail of scene on scene save as

packages/editor/src/components/EditorContainer.tsx

@@ -177,12 +177,12 @@ const onSaveAs = async () => {
   const abortController = new AbortController()
   try {
     if (sceneName || editorState.sceneModified.value) {
-      const blob = await takeScreenshot(512, 320, 'ktx2')
-      const file = new File([blob!], editorState.sceneName + '.thumbnail.ktx2')
+      const [ktx2Blob, thumbnailBlob] = await takeScreenshot(512, 320, 'jpeg')
+      const file = new File([ktx2Blob!], editorState.sceneName + '.thumbnail.ktx2')
       const result: { name: string } | void = await new Promise((resolve) => {
         DialogState.setDialog(
           <SaveNewSceneDialog
-            thumbnailUrl={URL.createObjectURL(blob!)}
+            thumbnailUrl={URL.createObjectURL(thumbnailBlob!)}
             initialName={Engine.instance.scene.name}
             onConfirm={resolve}
             onCancel={resolve}
@@ -232,8 +232,13 @@ const onSaveScene = async () => {
     return
   }
 
+  const [ktx2Blob, thumbnailBlob] = await takeScreenshot(512, 320)
+  const file = new File([ktx2Blob!], sceneName + '.thumbnail.ktx2')
+
   const result = (await new Promise((resolve) => {
-    DialogState.setDialog(<SaveSceneDialog onConfirm={resolve} onCancel={resolve} />)
+    DialogState.setDialog(
+      <SaveSceneDialog onConfirm={resolve} onCancel={resolve} thumbnailUrl={URL.createObjectURL(thumbnailBlob!)} />
+    )
   })) as any
 
   if (!result) {
@@ -261,9 +266,6 @@ const onSaveScene = async () => {
     if (projectName) {
       const isGenerateThumbnailsEnabled = getState(EditorHelperState).isGenerateThumbnailsEnabled
       if (isGenerateThumbnailsEnabled) {
-        const blob = await takeScreenshot(512, 320, 'ktx2')
-        const file = new File([blob!], sceneName + '.thumbnail.ktx2')
-
         await uploadSceneBakeToServer()
         await saveScene(projectName, sceneName, file, abortController.signal)
       } else {

packages/editor/src/components/dialogs/SaveNewSceneDialog.tsx

@@ -30,25 +30,6 @@ import FormField from '../inputs/FormField'
 import StringInput from '../inputs/StringInput'
 import Dialog from './Dialog'
 
-const leftContentStyles = {
-  display: 'flex',
-  width: '360px',
-  borderTopLeftRadius: 'inherit',
-  alignItems: 'center',
-  padding: '30px'
-}
-
-const imgStyles = {
-  borderRadius: '6px'
-}
-
-const rightContentStyles: React.CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1',
-  padding: '30px 30px'
-}
-
 /**
  * SaveNewSceneDialog used to show dialog when to save new scene.
  */
@@ -89,11 +70,19 @@ export function SaveNewSceneDialog({
       onCancel={onCancelCallback}
       confirmLabel={t('editor:dialog.saveScene.lbl-confirm')}
     >
-      <div style={{ display: 'flex' }}>
-        <div style={leftContentStyles}>
-          <img src={thumbnailUrl} alt="" crossOrigin="anonymous" style={imgStyles} />
-        </div>
-        <div style={rightContentStyles}>
+      <div style={{ width: '100%' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+          <img
+            src={thumbnailUrl}
+            alt=""
+            crossOrigin="anonymous"
+            style={{
+              borderRadius: '6px',
+              marginBottom: '10px'
+            }}
+            height={160}
+            width={256}
+          />
           <FormField>
             <label htmlFor="name">{t('editor:dialog.saveNewScene.lbl-name')}</label>
             <StringInput

packages/editor/src/components/dialogs/SaveSceneDialog.tsx

@@ -36,12 +36,16 @@ import Dialog from './Dialog'
 
 /**
  * SaveSceneDialog used to show dialog when to save scene.
- *
- * @param       {function} onConfirm
- * @param       {function} onCancel
- * @constructor
  */
-export function SaveSceneDialog({ onConfirm, onCancel }) {
+export function SaveSceneDialog({
+  onConfirm,
+  onCancel,
+  thumbnailUrl
+}: {
+  onConfirm: (val: boolean) => void
+  onCancel: (val?: boolean) => void
+  thumbnailUrl: string
+}) {
   const { t } = useTranslation()
   const state = useHookstate(getMutableState(EditorHelperState).isGenerateThumbnailsEnabled)
 
@@ -83,10 +87,31 @@ export function SaveSceneDialog({ onConfirm, onCancel }) {
       onCancel={onCancelCallback}
       confirmLabel={t('editor:dialog.saveScene.lbl-confirm')}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', margin: '10px' }}>
-        <BooleanInput value={state.value} onChange={onChangeGenerateThumbnails} />
-        <label style={{ marginLeft: '10px' }}>{t('editor:dialog.saveScene.lbl-thumbnail')}</label>
-      </Box>
+      <div style={{ width: '100%' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            margin: '10px'
+          }}
+        >
+          <img
+            src={thumbnailUrl}
+            alt=""
+            crossOrigin="anonymous"
+            style={{
+              borderRadius: '6px',
+              marginBottom: '10px'
+            }}
+            height={160}
+            width={256}
+          />
+          <BooleanInput value={state.value} onChange={onChangeGenerateThumbnails} />
+          <label style={{ marginLeft: '10px' }}>{t('editor:dialog.saveScene.lbl-thumbnail')}</label>
+        </Box>
+      </div>
     </Dialog>
   )
 }

packages/editor/src/functions/takeScreenshot.ts

@@ -162,10 +162,10 @@ export async function previewScreenshot(
 export async function takeScreenshot(
   width: number,
   height: number,
-  format = 'ktx2' as 'png' | 'ktx2' | 'jpeg',
+  format = 'jpeg' as 'jpeg' | 'png',
   scenePreviewCamera?: PerspectiveCamera,
   hideHelpers = true
-): Promise<Blob | null> {
+): Promise<[Blob | null, Blob | null]> {
   // Getting Scene preview camera or creating one if not exists
   if (!scenePreviewCamera) {
     for (const entity of query()) {
@@ -235,19 +235,17 @@ export async function takeScreenshot(
 
   const canvas = getResizedCanvas(EngineRenderer.instance.renderer.domElement, width, height)
 
-  let blob: Blob | null = null
-
-  if (format === 'ktx2') {
-    const imageData = canvas.getContext('2d')!.getImageData(0, 0, width, height)
-    const ktx2texture = (await ktx2Encoder.encode(imageData, {
-      ...getState(ScreenshotSettings).ktx2,
-      yFlip: true
-    })) as ArrayBuffer
-
-    blob = new Blob([ktx2texture])
-  } else {
-    blob = await getCanvasBlob(canvas, format === 'jpeg' ? 'image/jpeg' : 'image/png', format === 'jpeg' ? 0.9 : 1)
-  }
+  const imageData = canvas.getContext('2d')!.getImageData(0, 0, width, height)
+  const ktx2texture = (await ktx2Encoder.encode(imageData, {
+    ...getState(ScreenshotSettings).ktx2,
+    yFlip: true
+  })) as ArrayBuffer
+  const ktx2Blob = new Blob([ktx2texture])
+  const imageBlob = await getCanvasBlob(
+    canvas,
+    format === 'jpeg' ? 'image/jpeg' : 'image/png',
+    format === 'jpeg' ? 0.9 : 1
+  )
 
   // restore
   EngineRenderer.instance.effectComposer.setMainCamera(getComponent(Engine.instance.cameraEntity, CameraComponent))
@@ -258,13 +256,13 @@ export async function takeScreenshot(
   scenePreviewCamera.aspect = prevAspect
   scenePreviewCamera.updateProjectionMatrix()
 
-  return blob
+  return [ktx2Blob, imageBlob]
 }
 
 /** @todo make size, compression & format configurable */
 export const downloadScreenshot = () => {
   takeScreenshot(1920 * 4, 1080 * 4, 'png', getComponent(Engine.instance.cameraEntity, CameraComponent), false).then(
-    (blob) => {
+    ([_, blob]) => {
       if (!blob) return
 
       const blobUrl = URL.createObjectURL(blob)