v3-ui #99

Merged
Vishnu merged 28 commits from v3-ui into main 2025-06-12 04:27:40 +00:00
20 changed files with 65 additions and 67 deletions
Showing only changes of commit 6bb2947e24 - Show all commits

View File

@ -7,7 +7,7 @@ import { retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
async function loadInitialWallItems(
setWallItems: Types.setWallItemSetState,
projectId?:string
projectId?: string
): Promise<void> {
try {
const email = localStorage.getItem('email');
@ -16,7 +16,7 @@ async function loadInitialWallItems(
}
const organization = email.split("@")[1].split(".")[0];
const items = await getWallItems(organization,projectId);
const items = await getWallItems(organization, projectId);
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
@ -34,33 +34,33 @@ async function loadInitialWallItems(
const loadedWallItems = await Promise.all(items.map(async (item: Types.WallItem) => {
// Check THREE.js cache first
const cachedModel = THREE.Cache.get(item.modelfileID!);
const cachedModel = THREE.Cache.get(item.assetId!);
if (cachedModel) {
return processModel(cachedModel, item);
}
// Check IndexedDB cache
const cachedModelBlob = await retrieveGLTF(item.modelfileID!);
const cachedModelBlob = await retrieveGLTF(item.assetId!);
if (cachedModelBlob) {
const blobUrl = URL.createObjectURL(cachedModelBlob);
return new Promise<Types.WallItem>((resolve) => {
loader.load(blobUrl, (gltf) => {
URL.revokeObjectURL(blobUrl);
THREE.Cache.add(item.modelfileID!, gltf);
THREE.Cache.add(item.assetId!, gltf);
resolve(processModel(gltf, item));
});
});
}
// Load from original URL if not cached
const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.modelfileID!}`;
const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.assetId!}`;
return new Promise<Types.WallItem>((resolve) => {
loader.load(modelUrl, async (gltf) => {
try {
// Cache the model
const modelBlob = await fetch(modelUrl).then((res) => res.blob());
await storeGLTF(item.modelfileID!, modelBlob);
THREE.Cache.add(item.modelfileID!, gltf);
await storeGLTF(item.assetId!, modelBlob);
THREE.Cache.add(item.assetId!, gltf);
resolve(processModel(gltf, item));
} catch (error) {
console.error('Failed to cache model:', error);
@ -91,7 +91,7 @@ function processModel(gltf: GLTF, item: Types.WallItem): Types.WallItem {
type: item.type,
model: model,
modelName: item.modelName,
modelfileID: item.modelfileID,
assetId: item.assetId,
scale: item.scale,
csgscale: item.csgscale,
csgposition: item.csgposition,

View File

@ -63,7 +63,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
getFloorAssets(organization, projectId).then((data) => {
if (data.length > 0) {
const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.modelfileID === item.modelfileID));
const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.assetId === item.assetId));
totalAssets = uniqueItems.length;
if (totalAssets === 0) {
updateLoadingProgress(100);
@ -96,7 +96,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
assets.push({
modelUuid: item.modelUuid,
modelName: item.modelName,
assetId: item.modelfileID,
assetId: item.assetId,
position: item.position,
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
isLocked: item.isLocked,
@ -236,7 +236,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
assets.push({
modelUuid: item.modelUuid,
modelName: item.modelName,
assetId: item.modelfileID,
assetId: item.assetId,
position: item.position,
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
isLocked: item.isLocked,

View File

@ -136,7 +136,7 @@ async function handleModelLoad(
// organization,
// newFloorItem.modelUuid,
// newFloorItem.modelName,
// newFloorItem.modelfileID,
// newFloorItem.assetId,
// newFloorItem.position,
// { x: 0, y: 0, z: 0 },
// false,
@ -352,7 +352,7 @@ async function handleModelLoad(
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.assetId,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: {
x: model.rotation.x,
@ -372,7 +372,7 @@ async function handleModelLoad(
const asset: Asset = {
modelUuid: completeData.modelUuid,
modelName: completeData.modelName,
assetId: completeData.modelfileID,
assetId: completeData.assetId,
position: completeData.position,
rotation: [
completeData.rotation.x,
@ -392,7 +392,7 @@ async function handleModelLoad(
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.assetId,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: {
x: model.rotation.x,
@ -411,7 +411,7 @@ async function handleModelLoad(
const asset = {
modelUuid: data.modelUuid,
modelName: data.modelName,
assetId: data.modelfileID,
assetId: data.assetId,
position: data.position,
rotation: [data.rotation.x, data.rotation.y, data.rotation.z] as [number, number, number],
isLocked: data.isLocked,

View File

@ -95,7 +95,6 @@ async function drawWall(
userId
}
console.log('input: ', input);
socket.emit('v1:Line:create', input);
setNewLines([newLines[0], newLines[1], line.current]);
@ -158,7 +157,6 @@ async function drawWall(
userId
}
console.log('input: ', input);
socket.emit('v1:Line:create', input);
setNewLines([line.current])

View File

@ -91,7 +91,7 @@ async function AddWallItems(
type: selected.subCategory,
model: model,
modelName: selected.name,
modelfileID: selected.id,
assetId: selected.id,
scale: [1, 1, 1] as [number, number, number],
csgscale: csgscale,
csgposition: csgposition,
@ -107,7 +107,7 @@ async function AddWallItems(
organization: organization,
modelUuid: model.uuid,
modelName: newWallItem.modelName,
modelfileID: selected.id,
assetId: selected.id,
type: selected.subCategory,
csgposition: newWallItem.csgposition,
csgscale: newWallItem.csgscale,
@ -119,7 +119,6 @@ async function AddWallItems(
userId
};
// console.log('data: ', data);
socket.emit('v1:wallItems:set', data);
setWallItems((prevItems) => {

View File

@ -130,7 +130,7 @@ const WallItemsGroup = ({
// organization,
// currentItem?.model?.uuid,
// currentItem.modelName,
// currentItem.modelfileID,
// currentItem.assetId,
// currentItem.type!,
// currentItem.csgposition!,
// currentItem.csgscale!,
@ -144,7 +144,7 @@ const WallItemsGroup = ({
const data = {
organization: organization,
modelUuid: currentItem.model?.uuid!,
modelfileID: currentItem.modelfileID,
assetId: currentItem.assetId,
modelName: currentItem.modelName!,
type: currentItem.type!,
csgposition: currentItem.csgposition!,

View File

@ -99,7 +99,7 @@ export default function SocketResponses({
const asset: Asset = {
modelUuid: data.data.modelUuid,
modelName: data.data.modelName,
assetId: data.data.modelfileID,
assetId: data.data.assetId,
position: data.data.position,
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
isLocked: data.data.isLocked,
@ -120,7 +120,7 @@ export default function SocketResponses({
const asset: Asset = {
modelUuid: data.data.modelUuid,
modelName: data.data.modelName,
assetId: data.data.modelfileID,
assetId: data.data.assetId,
position: data.data.position,
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
isLocked: data.data.isLocked,
@ -469,13 +469,14 @@ export default function SocketResponses({
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
socket.on("v1:wallItem:Response:Delete", (data: any) => {
// console.log('data: ', data);
if (socket.id === data.socketId) {
return;
}
if (organization !== data.organization) {
return;
}
if (data.message === "wallitem deleted") {
if (data.message === "wall Item deleted successfully") {
const deletedUUID = data.data.modelUuid;
let WallItemsRef = wallItems;
const Items = WallItemsRef.filter((item: any) => item.model?.uuid !== deletedUUID);
@ -499,6 +500,7 @@ export default function SocketResponses({
});
socket.on("v1:wallItems:Response:Update", (data: any) => {
// console.log('data: ', data);
//
if (socket.id === data.socketId) {
return;
@ -506,7 +508,7 @@ export default function SocketResponses({
if (organization !== data.organization) {
return;
}
if (data.message === "wallIitem created") {
if (data.message === "wall Item created successfully") {
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
@ -514,20 +516,20 @@ export default function SocketResponses({
loader.setDRACOLoader(dracoLoader);
// Check THREE.js cache first
const cachedModel = THREE.Cache.get(data.data.modelfileID);
const cachedModel = THREE.Cache.get(data.data.assetId);
if (cachedModel) {
handleModelLoad(cachedModel);
return;
}
// Check IndexedDB cache
retrieveGLTF(data.data.modelfileID).then((cachedModelBlob) => {
retrieveGLTF(data.data.assetId).then((cachedModelBlob) => {
if (cachedModelBlob) {
const blobUrl = URL.createObjectURL(cachedModelBlob);
loader.load(blobUrl, (gltf) => {
URL.revokeObjectURL(blobUrl);
THREE.Cache.remove(blobUrl);
THREE.Cache.add(data.data.modelfileID, gltf);
THREE.Cache.add(data.data.assetId, gltf);
handleModelLoad(gltf);
});
return;
@ -535,11 +537,11 @@ export default function SocketResponses({
})
// Load from backend if not in any cache
loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`, async (gltf) => {
loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.assetId}`, async (gltf) => {
try {
const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`).then((res) => res.blob());
await storeGLTF(data.data.modelfileID, modelBlob);
THREE.Cache.add(data.data.modelfileID, gltf);
const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.assetId}`).then((res) => res.blob());
await storeGLTF(data.data.assetId, modelBlob);
THREE.Cache.add(data.data.assetId, gltf);
await handleModelLoad(gltf);
} catch (error) {
@ -562,7 +564,7 @@ export default function SocketResponses({
type: data.data.type,
model: model,
modelName: data.data.modelName,
modelfileID: data.data.modelfileID,
assetId: data.data.assetId,
scale: data.data.scale,
csgscale: data.data.csgscale,
csgposition: data.data.csgposition,
@ -587,7 +589,7 @@ export default function SocketResponses({
});
}
} else if (data.message === "wallIitem updated") {
} else if (data.message === "Updated successfully") {
const updatedUUID = data.data.modelUuid;
setWallItems((prevItems: any) => {

View File

@ -10,7 +10,7 @@ interface ModelData {
description: string;
filename: string;
isArchieve: boolean;
modelfileID: string;
assetId: string;
tags: string;
thumbnail: string;
uploadDate: number;
@ -65,7 +65,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
onSelectCard={handleCardSelect}
AssetID={assetDetail.AssetID}
image={assetDetail.thumbnail}
modelUrl={assetDetail.modelfileID}
modelUrl={assetDetail.assetId}
description={assetDetail.description}
/>
</React.Fragment>

View File

@ -10,7 +10,7 @@ interface ModelData {
description: string;
filename: string;
isArchieve: boolean;
modelfileID: string;
assetId: string;
tags: string;
thumbnail: string;
uploadDate: number;

View File

@ -10,7 +10,7 @@ interface ModelData {
description: string;
filename: string;
isArchieve: boolean;
modelfileID: string;
assetId: string;
tags: string;
thumbnail: string;
uploadDate: number;

View File

@ -158,7 +158,7 @@ const CopyPasteControls = ({
const newFloorItem: Types.FloorItemType = {
modelUuid: THREE.MathUtils.generateUUID(),
modelName: obj.userData.modelName,
modelfileID: obj.userData.assetId,
assetId: obj.userData.assetId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
isLocked: false,
@ -352,7 +352,7 @@ const CopyPasteControls = ({
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
@ -368,7 +368,7 @@ const CopyPasteControls = ({
obj.userData = {
name: newFloorItem.modelName,
modelId: newFloorItem.modelfileID,
modelId: newFloorItem.assetId,
modelUuid: newFloorItem.modelUuid,
eventData: JSON.parse(JSON.stringify(eventData))
};
@ -376,7 +376,7 @@ const CopyPasteControls = ({
const asset: Asset = {
modelUuid: data.modelUuid,
modelName: data.modelName,
assetId: data.modelfileID,
assetId: data.assetId,
position: data.position,
rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
isLocked: data.isLocked,
@ -409,7 +409,7 @@ const CopyPasteControls = ({
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
@ -425,7 +425,7 @@ const CopyPasteControls = ({
const asset: Asset = {
modelUuid: data.modelUuid,
modelName: data.modelName,
assetId: data.modelfileID,
assetId: data.assetId,
position: data.position,
rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
isLocked: data.isLocked,

View File

@ -133,7 +133,7 @@ const DuplicationControls = ({
const newFloorItem: Types.FloorItemType = {
modelUuid: THREE.MathUtils.generateUUID(),
modelName: obj.userData.modelName,
modelfileID: obj.userData.assetId,
assetId: obj.userData.assetId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
isLocked: false,
@ -327,7 +327,7 @@ const DuplicationControls = ({
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
@ -344,7 +344,7 @@ const DuplicationControls = ({
const asset: Asset = {
modelUuid: data.modelUuid,
modelName: data.modelName,
assetId: data.modelfileID,
assetId: data.assetId,
position: data.position,
rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
isLocked: data.isLocked,
@ -378,7 +378,7 @@ const DuplicationControls = ({
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
@ -394,7 +394,7 @@ const DuplicationControls = ({
const asset: Asset = {
modelUuid: data.modelUuid,
modelName: data.modelName,
assetId: data.modelfileID,
assetId: data.assetId,
position: data.position,
rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
isLocked: data.isLocked,

View File

@ -237,7 +237,7 @@ function MoveControls({
const newFloorItem: Types.FloorItemType = {
modelUuid: obj.userData.modelUuid,
modelName: obj.userData.modelName,
modelfileID: obj.userData.assetId,
assetId: obj.userData.assetId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
@ -304,7 +304,7 @@ function MoveControls({
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,

View File

@ -203,7 +203,7 @@ function RotateControls({
const newFloorItem: Types.FloorItemType = {
modelUuid: obj.userData.modelUuid,
modelName: obj.userData.modelName,
modelfileID: obj.userData.assetId,
assetId: obj.userData.assetId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
@ -263,7 +263,7 @@ function RotateControls({
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
assetId: newFloorItem.assetId,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,

View File

@ -124,7 +124,7 @@ export default function TransformControl() {
organization,
modelUuid: asset.modelUuid,
modelName: asset.modelName,
modelfileID: asset.assetId,
assetId: asset.assetId,
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
rotation: { x: selectedFloorItem.rotation.x, y: selectedFloorItem.rotation.y, z: selectedFloorItem.rotation.z },
isLocked: false,

View File

@ -1,6 +1,6 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const getFloorAssets = async (organization: string,projectId?:string) => {
export const getFloorAssets = async (organization: string, projectId?: string) => {
try {
const response = await fetch(
`${url_Backend_dwinzo}/api/V1/floorAssets/${projectId}`,

View File

@ -3,7 +3,7 @@ export const setFloorItemApi = async (
organization: string,
modelUuid?: string,
modelName?: string,
modelfileID?: string,
assetId?: string,
position?: Object,
rotation?: Object,
isLocked?: boolean,
@ -16,7 +16,7 @@ export const setFloorItemApi = async (
modelName,
position,
rotation,
modelfileID,
assetId,
isLocked,
isVisible,
};

View File

@ -21,7 +21,6 @@ export const getWallItems = async (organization: string,projectId?:string) => {
}
const result = await response.json();
// console.log('result: ', result);
return result;
} catch (error) {
echo.error("Failed to get wall items");

View File

@ -13,14 +13,14 @@ onmessage = async (event) => {
const { floorItems } = event.data;
const uniqueItems = floorItems.filter((item, index, self) =>
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
index === self.findIndex((t) => t.assetId === item.assetId)
);
for (const item of uniqueItems) {
if(item.modelfileID === null || item.modelfileID === undefined) {
continue; // Skip items without a valid modelfileID
if(item.assetId === null || item.assetId === undefined) {
continue; // Skip items without a valid assetId
}
const modelID = item.modelfileID;
const modelID = item.assetId;
const indexedDBModel = await retrieveGLTF(modelID);
let modelBlob;

View File

@ -193,7 +193,7 @@ export type FloorItemType = {
modelName: string;
position: [number, number, number];
rotation: { x: number; y: number; z: number };
modelfileID: string;
assetId: string;
isLocked: boolean;
isVisible: boolean;
eventData?: {
@ -224,7 +224,7 @@ interface WallItem {
type: "fixed-move" | "free-move" | undefined;
model?: THREE.Group;
modelUuid?: string;
modelfileID: string;
assetId: string;
modelName?: string;
scale?: [number, number, number];
csgscale?: [number, number, number];