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;
const listener: IGetImageListener = {
imageReady: (id, texture, image) =>
{
if(!image && texture)
{
image = TextureUtils.generateImage(texture);
}
image.onload = () => setImageElement(image);
},
imageReady: async (id, texture, image) => setImageElement(await TextureUtils.generateImage(texture)),
imageFailed: null
};
@ -67,12 +59,9 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
break;
}
if(imageResult)
{
const image = imageResult.getImage();
if(!imageResult) return;
image.onload = () => setImageElement(image);
}
(async () => setImageElement(await TextureUtils.generateImage(imageResult.data)))();
}, [ productType, productClassId, direction, extraData ]);
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;
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;
@ -80,7 +80,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
else if(texture)
{
setPetUrl(TextureUtils.generateImageUrl(texture));
setPetUrl(await TextureUtils.generateImageUrl(texture));
setWidth(texture.width);
setHeight(texture.height);
}
@ -93,7 +93,9 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
if(imageResult)
{
const image = imageResult.getImage();
(async () =>
{
const image = await imageResult.getImage();
if(image)
{
@ -101,6 +103,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
setWidth(image.width);
setHeight(image.height);
}
})();
}
}, [ 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 { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react';
import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react';
export interface LayoutRoomPreviewerViewProps
{
@ -11,7 +11,6 @@ export interface LayoutRoomPreviewerViewProps
export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
{
const { roomPreviewer = null, height = 0, children = null } = props;
const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
const elementRef = useRef<HTMLDivElement>();
const onClick = (event: MouseEvent<HTMLDivElement>) =>
@ -24,44 +23,33 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
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();
const renderingCanvas = roomPreviewer.getRenderingCanvas();
if(!renderingCanvas.canvasUpdated) return;
elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`;
}
GetRenderer().render({
target: texture,
container: renderingCanvas.master,
clear: true
});
if(!renderingCanvas)
{
if(elementRef.current && roomPreviewer)
{
const computed = document.defaultView.getComputedStyle(elementRef.current, null);
let canvas = GetRenderer().texture.generateCanvas(texture);
const base64 = canvas.toDataURL('image/png');
let backgroundColor = computed.backgroundColor;
canvas = null;
backgroundColor = ColorConverter.rgbStringToHex(backgroundColor);
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);
}
elementRef.current.style.backgroundImage = `url(${ base64 })`;
}
GetTicker().add(update);
@ -74,19 +62,22 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
roomPreviewer.modifyRoomCanvas(width, height);
update(-1);
update(GetTicker());
});
roomPreviewer.getRoomCanvas(width, height);
resizeObserver.observe(elementRef.current);
return () =>
{
GetTicker().remove(update);
resizeObserver.disconnect();
GetTicker().remove(update);
texture.destroy(true);
}
}, [ renderingCanvas, roomPreviewer, elementRef, height ]);
}, [ roomPreviewer, elementRef, height ]);
return (
<div className="room-preview-container">