2021-08-06 05:38:57 +02:00
|
|
|
import { IGetImageListener, ImageResult, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
|
2021-05-11 21:08:18 +02:00
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
2021-06-23 05:59:02 +02:00
|
|
|
import { GetRoomEngine } from '../../../api';
|
2022-02-06 05:28:18 +01:00
|
|
|
import { Base } from '../../../common/Base';
|
2022-01-06 04:07:01 +01:00
|
|
|
import { ProductTypeEnum } from '../../../components/catalog/common/ProductTypeEnum';
|
2022-02-06 05:28:18 +01:00
|
|
|
|
|
|
|
interface FurniImageViewProps
|
|
|
|
{
|
|
|
|
productType: string;
|
|
|
|
productClassId: number;
|
|
|
|
direction?: number;
|
|
|
|
extraData?: string;
|
|
|
|
scale?: number;
|
|
|
|
}
|
2021-05-11 21:08:18 +02:00
|
|
|
|
|
|
|
export const FurniImageView: FC<FurniImageViewProps> = props =>
|
|
|
|
{
|
2022-02-06 05:28:18 +01:00
|
|
|
const { productType = 's', productClassId = -1, direction = 0, extraData = '', scale = 1 } = props;
|
2021-05-11 21:08:18 +02:00
|
|
|
const [ imageElement, setImageElement ] = useState<HTMLImageElement>(null);
|
|
|
|
|
|
|
|
const buildImage = useCallback(() =>
|
|
|
|
{
|
|
|
|
let imageResult: ImageResult = null;
|
|
|
|
|
|
|
|
const listener: IGetImageListener = {
|
2021-07-16 19:17:52 +02:00
|
|
|
imageReady: (id, texture, image) =>
|
2021-05-11 21:08:18 +02:00
|
|
|
{
|
|
|
|
if(!image && texture)
|
|
|
|
{
|
|
|
|
image = TextureUtils.generateImage(texture);
|
|
|
|
}
|
|
|
|
|
|
|
|
image.onload = () => setImageElement(image);
|
|
|
|
},
|
|
|
|
imageFailed: null
|
|
|
|
};
|
|
|
|
|
2022-02-06 05:28:18 +01:00
|
|
|
switch(productType.toLocaleLowerCase())
|
2021-05-11 21:08:18 +02:00
|
|
|
{
|
|
|
|
case ProductTypeEnum.FLOOR:
|
2022-02-06 05:28:18 +01:00
|
|
|
imageResult = GetRoomEngine().getFurnitureFloorImage(productClassId, new Vector3d(direction), 64, listener, 0, extraData);
|
2021-05-11 21:08:18 +02:00
|
|
|
break;
|
|
|
|
case ProductTypeEnum.WALL:
|
2022-02-06 05:28:18 +01:00
|
|
|
imageResult = GetRoomEngine().getFurnitureWallImage(productClassId, new Vector3d(direction), 64, listener, 0, extraData);
|
2021-05-11 21:08:18 +02:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(imageResult)
|
|
|
|
{
|
|
|
|
const image = imageResult.getImage();
|
2021-09-12 05:16:09 +02:00
|
|
|
|
2021-05-11 21:08:18 +02:00
|
|
|
image.onload = () => setImageElement(image);
|
|
|
|
}
|
2022-02-06 05:28:18 +01:00
|
|
|
}, [ productType, productClassId, direction, extraData ]);
|
2021-05-11 21:08:18 +02:00
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
buildImage();
|
|
|
|
}, [ buildImage ]);
|
|
|
|
|
|
|
|
if(!imageElement) return null;
|
|
|
|
|
|
|
|
const imageUrl = `url('${ imageElement.src }')`;
|
2022-02-06 05:28:18 +01:00
|
|
|
|
|
|
|
return <Base classNames={ [ 'furni-image', `scale-${ scale }` ] } style={ { backgroundImage: imageUrl, width: imageElement.width, height: imageElement.height } } />;
|
2021-05-11 21:08:18 +02:00
|
|
|
}
|