fix: make scene save as visible (#8664)

* fix: savenewscenedialog component fields * fix: name change listener and png image format * chore: remove console logs * remove: previewdialog * fix: change pixel ratio before resizing * fixes --------- Co-authored-by: HexaField <[email protected]>
EtherealEngine · Sep 8, 2023 · f909830 · f909830
1 parent d4c3151
commit f909830
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 115 deletions.
diff --git a/packages/editor/src/components/EditorContainer.tsx b/packages/editor/src/components/EditorContainer.tsx
@@ -91,8 +91,6 @@ const logger = multiLogger.child({ component: 'editor:EditorContainer' })
 
 /**
  *component used as dock container.
- *
- * @type {type}
  */
 export const DockContainer = ({ children, id = 'dock', dividerAlpha = 0 }) => {
   const dockContainerStyles = {
@@ -108,7 +106,6 @@ export const DockContainer = ({ children, id = 'dock', dividerAlpha = 0 }) => {
 
 /**
  * EditorContainer class used for creating container for Editor
- *
  */
 const EditorContainer = () => {
   const editorState = useHookstate(getMutableState(EditorState))
@@ -275,9 +272,9 @@ const EditorContainer = () => {
     const abortController = new AbortController()
     try {
       if (sceneName.value || editorState.sceneModified.value) {
-        const blob = await takeScreenshot(512, 320)
-        const file = new File([blob!], editorState.sceneName + '.thumbnail.png')
-        const result: { name: string } = (await new Promise((resolve) => {
+        const blob = await takeScreenshot(512, 320, 'ktx2')
+        const file = new File([blob!], editorState.sceneName + '.thumbnail.ktx2')
+        const result: { name: string } | void = await new Promise((resolve) => {
           setDialogComponent(
             <SaveNewSceneDialog
               thumbnailUrl={URL.createObjectURL(blob!)}
@@ -286,9 +283,8 @@ const EditorContainer = () => {
               onCancel={resolve}
             />
           )
-        })) as any
-        if (result && projectName.value) {
-          await uploadBPCEMBakeToServer(getState(SceneState).sceneEntity)
+        })
+        if (result?.name && projectName.value) {
           await saveScene(projectName.value, result.name, file, abortController.signal)
           editorState.sceneModified.set(false)
         }
@@ -297,7 +293,7 @@ const EditorContainer = () => {
     } catch (error) {
       logger.error(error)
       setDialogComponent(
-        <ErrorDialog title={t('editor:savingError')} message={error.message || t('editor:savingErrorMsg')} />
+        <ErrorDialog title={t('editor:savingError')} message={error?.message || t('editor:savingErrorMsg')} />
       )
     }
     setToggleRefetchScenes(!toggleRefetchScenes)
@@ -417,8 +413,8 @@ const EditorContainer = () => {
     try {
       if (projectName.value) {
         if (result.generateThumbnails) {
-          const blob = await takeScreenshot(512, 320)
-          const file = new File([blob!], editorState.sceneName + '.thumbnail.png')
+          const blob = await takeScreenshot(512, 320, 'ktx2')
+          const file = new File([blob!], editorState.sceneName + '.thumbnail.ktx2')
 
           await uploadBPCEMBakeToServer(getState(SceneState).sceneEntity)
           await saveScene(projectName.value, sceneName.value, file, abortController.signal)

diff --git a/packages/editor/src/components/dialogs/PreviewDialog.tsx b/packages/editor/src/components/dialogs/PreviewDialog.tsx
diff --git a/packages/editor/src/components/dialogs/SaveNewSceneDialog.tsx b/packages/editor/src/components/dialogs/SaveNewSceneDialog.tsx
@@ -28,33 +28,44 @@ import { useTranslation } from 'react-i18next'
 
 import FormField from '../inputs/FormField'
 import StringInput from '../inputs/StringInput'
-import PreviewDialog from './PreviewDialog'
+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.
- *
- * @param       {string} thumbnailUrl
- * @param       {string} initialName
- * @param       {function} onConfirm
- * @param       {function} onCancel
- * @constructor
  */
-export function SaveNewSceneDialog({ thumbnailUrl, initialName, onConfirm, onCancel }) {
+export function SaveNewSceneDialog({
+  thumbnailUrl,
+  initialName,
+  onConfirm,
+  onCancel
+}: {
+  thumbnailUrl: string
+  initialName: string
+  onConfirm: (value: { name: string }) => void
+  onCancel: () => void
+}) {
   const [name, setName] = useState(initialName)
   const { t } = useTranslation()
 
-  const onChangeName = useCallback(
-    (value) => {
-      setName(value)
-    },
-    [setName]
-  )
-
-  /**
-   * onConfirmCallback callback function is used handle confirm dialog.
-   *
-   * @type {function}
-   */
   const onConfirmCallback = useCallback(
     (e) => {
       e.preventDefault()
@@ -63,11 +74,6 @@ export function SaveNewSceneDialog({ thumbnailUrl, initialName, onConfirm, onCan
     [name, onConfirm]
   )
 
-  /**
-   * onCancelCallback callback function used to handle cancel of dialog.
-   *
-   * @type {function}
-   */
   const onCancelCallback = useCallback(
     (e) => {
       e.preventDefault()
@@ -76,27 +82,32 @@ export function SaveNewSceneDialog({ thumbnailUrl, initialName, onConfirm, onCan
     [onCancel]
   )
 
-  //returning view for dialog view.
   return (
-    <PreviewDialog
-      imageSrc={thumbnailUrl}
+    <Dialog
       title={t('editor:dialog.saveNewScene.title')}
       onConfirm={onConfirmCallback}
       onCancel={onCancelCallback}
-      confirmLabel={t('editor:dialog.saveNewScene.lbl-confirm')}
+      confirmLabel={t('editor:dialog.saveScene.lbl-confirm')}
     >
-      <FormField>
-        <label htmlFor="name">{t('editor:dialog.saveNewScene.lbl-name')}</label>
-        <StringInput
-          id="name"
-          required
-          pattern={'[A-Za-z0-9-\':"!@#$%^&*(),.?~ ]{4,64}'}
-          title={t('editor:dialog.saveNewScene.info-name')}
-          value={name}
-          onChange={onChangeName}
-        />
-      </FormField>
-    </PreviewDialog>
+      <div style={{ display: 'flex' }}>
+        <div style={leftContentStyles}>
+          <img src={thumbnailUrl} alt="" crossOrigin="anonymous" style={imgStyles} />
+        </div>
+        <div style={rightContentStyles}>
+          <FormField>
+            <label htmlFor="name">{t('editor:dialog.saveNewScene.lbl-name')}</label>
+            <StringInput
+              id="name"
+              required
+              pattern={'[A-Za-z0-9-\':"!@#$%^&*(),.?~ ]{4,64}'}
+              title={t('editor:dialog.saveNewScene.info-name')}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </FormField>
+        </div>
+      </div>
+    </Dialog>
   )
 }
 

diff --git a/packages/editor/src/functions/takeScreenshot.ts b/packages/editor/src/functions/takeScreenshot.ts
@@ -195,7 +195,6 @@ export async function takeScreenshot(
   scenePreviewCamera.layers.set(ObjectLayers.Scene)
 
   const originalSize = EngineRenderer.instance.renderer.getSize(new Vector2())
-
   const pixelRatio = EngineRenderer.instance.renderer.getPixelRatio()
 
   // Rendering the scene to the new canvas with given size
@@ -204,14 +203,14 @@ export async function takeScreenshot(
       const viewport = EngineRenderer.instance.renderContext.getParameter(
         EngineRenderer.instance.renderContext.VIEWPORT
       )
-      // todo - scrolling in and out sometimes causes weird pixel ratios that can cause this to fail
-      if (viewport[2] === Math.round(width * pixelRatio) && viewport[3] === Math.round(height * pixelRatio)) {
+      if (viewport[2] === Math.round(width) && viewport[3] === Math.round(height)) {
         console.log('Resized viewport')
         clearTimeout(timeout)
         clearInterval(interval)
         resolve()
       }
     }, 10)
+
     const timeout = setTimeout(() => {
       console.warn('Could not resize viewport in time')
       clearTimeout(timeout)
@@ -268,8 +267,8 @@ export async function takeScreenshot(
 
   // restore
   EngineRenderer.instance.effectComposer.setMainCamera(getComponent(Engine.instance.cameraEntity, CameraComponent))
-  EngineRenderer.instance.effectComposer.setSize(originalSize.width, originalSize.height, false)
   EngineRenderer.instance.renderer.setPixelRatio(pixelRatio)
+  EngineRenderer.instance.effectComposer.setSize(originalSize.width, originalSize.height, false)
 
   // Restoring previous state
   scenePreviewCamera.aspect = prevAspect