nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update room previewer

Browse Source
This commit is contained in:
billsonnn 2024-03-26 21:02:45 -04:00
parent 0322c169ac
commit 509043f618
1 changed files with 25 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { ColorConverter, GetTicker, IRoomRenderingCanvas, NitroTicker, 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 width = elementRef.current.parentElement.clientWidth;
const texture = TextureUtils.createRenderTexture(width, height);
const update = async (ticker: NitroTicker) => 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(${ await 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)
{ canvas = null;
const computed = document.defaultView.getComputedStyle(elementRef.current, null);
let backgroundColor = computed.backgroundColor; elementRef.current.style.backgroundImage = `url(${ base64 })`;
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(GetTicker());
}
} }
GetTicker().add(update); GetTicker().add(update);
@ -76,17 +64,20 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
update(GetTicker()); 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">