Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

fix: make scene save as visible #8664

Merged
merged 7 commits into from
Sep 8, 2023
Merged

fix: make scene save as visible #8664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2a7aceb
fix: savenewscenedialog component fields
aditya-mitra Sep 6, 2023
bcf9885
fix: name change listener and png image format
aditya-mitra Sep 6, 2023
3025e7e
chore: remove console logs
aditya-mitra Sep 6, 2023
da7d317
remove: previewdialog
aditya-mitra Sep 6, 2023
a7a55dc
fix: change pixel ratio before resizing
aditya-mitra Sep 6, 2023
e1be6c2
Merge branch 'dev' into fix/scene-save-as
HexaField Sep 6, 2023
686e9cb
fixes
HexaField Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 8 additions & 12 deletions packages/editor/src/components/EditorContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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))
Expand Down Expand Up @@ -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!)}
Expand All @@ -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)
}
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand Down
58 changes: 0 additions & 58 deletions packages/editor/src/components/dialogs/PreviewDialog.tsx
View file
Open in desktop

This file was deleted.

93 changes: 52 additions & 41 deletions packages/editor/src/components/dialogs/SaveNewSceneDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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()
Expand All @@ -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>
)
}

Expand Down
7 changes: 3 additions & 4 deletions packages/editor/src/functions/takeScreenshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pixel ratio must be preserved here

Copy link
Collaborator Author

@aditya-mitra aditya-mitra Sep 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried this a few times, viewport comes out to be like 0 0 512 320 and height and width are also 320 and 512 respectively but pixelRatio is 2. So, the condition is not fulfilled. Also,pixelRatio is defined outside the promise so it does not change even though the promise inside changes the pixelRatio to 1.

console.log('Resized viewport')
clearTimeout(timeout)
clearInterval(interval)
resolve()
}
}, 10)

const timeout = setTimeout(() => {
console.warn('Could not resize viewport in time')
clearTimeout(timeout)
Expand Down Expand Up @@ -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
Expand Down