duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade the Async in the layouts

Browse Source
This commit is contained in:
duckietm 2024-04-02 17:03:52 +02:00
parent 9031a26955
commit fb6272379c
3 changed files with 42 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/common/layout/LayoutFurniImageView.tsx
View File

@ -45,15 +45,7 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
let imageResult: ImageResult = null; let imageResult: ImageResult = null;
const listener: IGetImageListener = { const listener: IGetImageListener = {
imageReady: (id, texture, image) => imageReady: async (id, texture, image) => setImageElement(await TextureUtils.generateImage(texture)),
{
if(!image && texture)
{
image = TextureUtils.generateImage(texture);
}
image.onload = () => setImageElement(image);
},
imageFailed: null imageFailed: null
}; };
@ -67,12 +59,9 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
break; break;
} }
if(imageResult) if(!imageResult) return;
{
const image = imageResult.getImage();
image.onload = () => setImageElement(image); (async () => setImageElement(await TextureUtils.generateImage(imageResult.data)))();
}
}, [ productType, productClassId, direction, extraData ]); }, [ productType, productClassId, direction, extraData ]);
if(!imageElement) return null; if(!imageElement) return null;

9
src/common/layout/LayoutPetImageView.tsx
View File

@ -67,7 +67,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
if(petTypeId === 16) petHeadOnly = false; if(petTypeId === 16) petHeadOnly = false;
const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor1, new Vector3d((direction * 45)), 64, { const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor1, new Vector3d((direction * 45)), 64, {
imageReady: (id, texture, image) => imageReady: async (id, texture, image) =>
{ {
if(isDisposed.current) return; if(isDisposed.current) return;
@ -80,7 +80,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
else if(texture) else if(texture)
{ {
setPetUrl(TextureUtils.generateImageUrl(texture)); setPetUrl(await TextureUtils.generateImageUrl(texture));
setWidth(texture.width); setWidth(texture.width);
setHeight(texture.height); setHeight(texture.height);
} }
@ -93,7 +93,9 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
if(imageResult) if(imageResult)
{ {
const image = imageResult.getImage(); (async () =>
{
const image = await imageResult.getImage();
if(image) if(image)
{ {
@ -101,6 +103,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
setWidth(image.width); setWidth(image.width);
setHeight(image.height); setHeight(image.height);
} }
})();
} }
}, [ figure, typeId, paletteId, petColor, customParts, posture, headOnly, direction ]); }, [ figure, typeId, paletteId, petColor, customParts, posture, headOnly, direction ]);

61
src/common/layout/LayoutRoomPreviewerView.tsx
View File

@ -1,5 +1,5 @@
import { ColorConverter, GetTicker, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer'; import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react'; import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react';
export interface LayoutRoomPreviewerViewProps export interface LayoutRoomPreviewerViewProps
{ {
@ -11,7 +11,6 @@ export interface LayoutRoomPreviewerViewProps
export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props => export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
{ {
const { roomPreviewer = null, height = 0, children = null } = props; const { roomPreviewer = null, height = 0, children = null } = props;
const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
const elementRef = useRef<HTMLDivElement>(); const elementRef = useRef<HTMLDivElement>();
const onClick = (event: MouseEvent<HTMLDivElement>) => const onClick = (event: MouseEvent<HTMLDivElement>) =>
@ -24,44 +23,33 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
useEffect(() => useEffect(() =>
{ {
if(!roomPreviewer) return; if(!elementRef) return;
const update = (time: number) => const width = elementRef.current.parentElement.clientWidth;
const texture = TextureUtils.createRenderTexture(width, height);
const update = async (ticker: NitroTicker) =>
{ {
if(!roomPreviewer || !renderingCanvas || !elementRef.current) return; if(!roomPreviewer || !elementRef.current) return;
roomPreviewer.updatePreviewRoomView(); roomPreviewer.updatePreviewRoomView();
const renderingCanvas = roomPreviewer.getRenderingCanvas();
if(!renderingCanvas.canvasUpdated) return; if(!renderingCanvas.canvasUpdated) return;
elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`; GetRenderer().render({
} target: texture,
container: renderingCanvas.master,
clear: true
});
if(!renderingCanvas) let canvas = GetRenderer().texture.generateCanvas(texture);
{ const base64 = canvas.toDataURL('image/png');
if(elementRef.current && roomPreviewer)
{
const computed = document.defaultView.getComputedStyle(elementRef.current, null);
let backgroundColor = computed.backgroundColor; canvas = null;
backgroundColor = ColorConverter.rgbStringToHex(backgroundColor); elementRef.current.style.backgroundImage = `url(${ base64 })`;
backgroundColor = backgroundColor.replace('#', '0x');
roomPreviewer.backgroundColor = parseInt(backgroundColor, 16);
const width = elementRef.current.parentElement.clientWidth;
roomPreviewer.getRoomCanvas(width, height);
const canvas = roomPreviewer.getRenderingCanvas();
setRenderingCanvas(canvas);
canvas.canvasUpdated = true;
update(-1);
}
} }
GetTicker().add(update); GetTicker().add(update);
@ -74,19 +62,22 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
roomPreviewer.modifyRoomCanvas(width, height); roomPreviewer.modifyRoomCanvas(width, height);
update(-1); update(GetTicker());
}); });
roomPreviewer.getRoomCanvas(width, height);
resizeObserver.observe(elementRef.current); resizeObserver.observe(elementRef.current);
return () => return () =>
{ {
GetTicker().remove(update);
resizeObserver.disconnect(); resizeObserver.disconnect();
GetTicker().remove(update); texture.destroy(true);
} }
}, [ roomPreviewer, elementRef, height ]);
}, [ renderingCanvas, roomPreviewer, elementRef, height ]);
return ( return (
<div className="room-preview-container"> <div className="room-preview-container">