Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove wall and aisle creator bug and added zone properties

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-09-29 12:45:06 +05:30
parent 6ee922a760
commit a064244eaf
13 changed files with 2442 additions and 2314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -21,6 +21,8 @@ import SelectedWallProperties from "./properties/SelectedWallProperties";
import SelectedFloorProperties from "./properties/SelectedFloorProperties";
import SelectedDecalProperties from "./properties/SelectedDecalProperties";
import SelectedAisleProperties from "./properties/SelectedAisleProperties";
import SelectedZoneProperties from "./properties/SelectedZoneProperties";
import ResourceManagement from "./resourceManagement/ResourceManagement";
import { useSceneContext } from "../../../modules/scene/sceneContext";
@@ -35,6 +37,7 @@ type DisplayComponent =
| "selectedFloorProperties"
| "selectedDecalProperties"
| "selectedAisleProperties"
| "selectedZoneProperties"
| "zoneProperties"
| "simulations"
| "mechanics"
@@ -44,12 +47,11 @@ type DisplayComponent =
| "none";
const SideBarRight: React.FC = () => {
const { selectedDecal } = useBuilderStore();
const { activeModule } = useModuleStore();
const { toggleUIRight } = useToggleStore();
const { toolMode } = useToolMode();
const { subModule, setSubModule } = useSubModuleStore();
const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
const { selectedWall, selectedFloor, selectedAisle, selectedZone, selectedDecal } = useBuilderStore();
const { selectedEventData } = useSelectedEventData();
const { selectedEventSphere } = useSelectedEventSphere();
const { versionStore, assetStore } = useSceneContext();
@@ -114,26 +116,30 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("assetProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedDecal && selectedWall) {
if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedDecal && !selectedZone && selectedWall) {
setDisplayComponent("selectedWallProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedDecal && selectedFloor) {
if (selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedDecal && !selectedZone && selectedFloor) {
setDisplayComponent("selectedFloorProperties");
return;
}
if (viewVersionHistory && selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal) {
if (viewVersionHistory && selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal && !selectedZone) {
setDisplayComponent("versionHistory");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedWall && selectedDecal) {
if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedWall && !selectedZone && selectedDecal) {
setDisplayComponent("selectedDecalProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && selectedAisle) {
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedZone && selectedAisle) {
setDisplayComponent("selectedAisleProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle && selectedZone) {
setDisplayComponent("selectedZoneProperties");
return;
}
if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle) {
if (toolMode === "Aisle") {
setDisplayComponent("aisleProperties");
@@ -158,7 +164,7 @@ const SideBarRight: React.FC = () => {
}
setDisplayComponent("none");
}, [viewVersionHistory, activeModule, subModule, isComparing, selectedAssets, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal]);
}, [viewVersionHistory, activeModule, subModule, isComparing, selectedAssets, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal, selectedZone]);
const renderComponent = () => {
switch (displayComponent) {
@@ -184,6 +190,8 @@ const SideBarRight: React.FC = () => {
return <SelectedDecalProperties />;
case "selectedAisleProperties":
return <SelectedAisleProperties />;
case "selectedZoneProperties":
return <SelectedZoneProperties />;
case "simulations":
return <Simulations />;
case "mechanics":

4
app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { useParams } from "react-router-dom";
import { ArrowIcon } from "../../../icons/ExportCommonIcons";
@@ -351,7 +351,7 @@ const SelectedAisleProperties: React.FC = () => {
return (
<div className="aisle-properties-container">
<div className="header">Properties</div>
<div className="header">Aisle Properties</div>
{/* Basic Properties */}
<section>

2
app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx
View File

@@ -100,6 +100,8 @@ const SelectedFloorProperties = () => {
return (
<div className="wall-properties-container">
<div className="header">Floor Properties</div>
<section className="wall-properties-section">
<div className="header">Floor</div>
<div className="wall-properties">

4
app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx
View File

@@ -14,12 +14,12 @@ import useWallResponseHandler from "../../../../modules/collaboration/responseHa
import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
const SelectedWallProperties = () => {
const { projectId } = useParams();
const { selectedWall } = useBuilderStore();
const { wallStore, versionStore } = useSceneContext();
const { selectedVersion } = versionStore();
const { builderSocket } = useSocketStore();
const { userId, organization } = getUserData();
const { projectId } = useParams();
const { peekUpdateWall } = wallStore();
const { updateWallInScene } = useWallResponseHandler();
@@ -99,6 +99,8 @@ const SelectedWallProperties = () => {
return (
<div className="wall-properties-container">
<div className="header">Wall Properties</div>
<section className="wall-properties-section">
<div className="header">Wall</div>
<div className="wall-properties">

134
app/src/components/layout/sidebarRight/properties/SelectedZoneProperties.tsx Normal file
View File

@@ -0,0 +1,134 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import { ArrowIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import { useSceneContext } from "../../../../modules/scene/sceneContext";
import { useSocketStore } from "../../../../store/socket/useSocketStore";
import { getUserData } from "../../../../functions/getUserData";
import useZoneResponseHandler from "../../../../modules/collaboration/responseHandler/useZoneResponseHandler";
import { upsertZoneApi } from "../../../../services/factoryBuilder/zone/upsertZoneApi";
interface TextureList {
color: string;
id: string;
zoneType: string;
}
export const zoneTextureList: TextureList[] = [
{ color: "blue", id: "#0000ff", zoneType: "" },
{ color: "red", id: "#ff0000", zoneType: "" },
{ color: "yellow", id: "#FBE50E", zoneType: "" },
{ color: "white", id: "#ffffff", zoneType: "" },
{ color: "green", id: "#43C06D", zoneType: "" },
{ color: "orange", id: "#FF711B", zoneType: "" },
{ color: "purple", id: "#AF52DE", zoneType: "" },
];
function SelectedZoneProperties() {
const { projectId } = useParams();
const { selectedZone } = useBuilderStore();
const { zoneStore, versionStore } = useSceneContext();
const { selectedVersion } = versionStore();
const { builderSocket } = useSocketStore();
const { userId, organization } = getUserData();
const { peekUpdateZone } = zoneStore();
const { updateZoneInScene } = useZoneResponseHandler();
const [collapseTexture, setCollapseTexture] = useState(true);
if (!selectedZone?.zoneMesh) return null;
const updateZoneToBackend = (updatedZone: Zone | undefined) => {
if (projectId && updatedZone) {
if (!builderSocket?.connected) {
// API
upsertZoneApi(projectId, selectedVersion?.versionId || "", updatedZone)
.then((data) => {
if (!data.message || !data.data) {
echo.error(`Error updating zone: ${updatedZone.zoneUuid}`);
return;
}
if (data.message === "Zone Updated Successfully") {
updateZoneInScene(updatedZone, () => {
echo.info(`Updated zone: ${updatedZone.zoneUuid}`);
});
} else {
echo.error(`Error updating zone: ${updatedZone.zoneUuid}`);
}
})
.catch(() => {
echo.error(`Error updating zone: ${updatedZone.zoneUuid}`);
});
} else {
// SOCKET
const data = {
zoneData: updatedZone,
projectId: projectId,
versionId: selectedVersion?.versionId || "",
userId: userId,
organization: organization,
};
builderSocket.emit("v1:zone:add", data);
}
}
};
const handleHeightChange = (val: string) => {
const height = parseFloat(val);
if (!isNaN(height)) {
const updatedZone = peekUpdateZone(selectedZone.zoneData.zoneUuid, { zoneHeight: height });
updateZoneToBackend(updatedZone);
}
};
const handleColorChange = (val: string) => {
const updatedZone = peekUpdateZone(selectedZone.zoneData.zoneUuid, { zoneColor: val });
updateZoneToBackend(updatedZone);
};
return (
<div className="zone-properties-container">
<div className="header">Zone Properties</div>
{/* Basic Properties */}
<section className="zone-properties-section">
<div className="header">{selectedZone.zoneData.zoneName}</div>
<div className="zone-properties">
<InputWithDropDown label="Height" value={selectedZone.zoneData.zoneHeight.toString()} min={1} max={25} step={1} onChange={handleHeightChange} />
</div>
</section>
{/* Texture */}
<section>
<button className="header" onClick={() => setCollapseTexture(!collapseTexture)} aria-expanded={!collapseTexture}>
<div className="value">Zone Texture</div>
<div className="icon" style={{ rotate: collapseTexture ? "" : "-90deg" }}>
<ArrowIcon />
</div>
</button>
{collapseTexture && (
<div className="zone-texture-container">
{zoneTextureList.map((val) => (
<button
key={val.id}
className={`zone-list ${selectedZone.zoneData.zoneColor === val.id ? "selected" : ""}`}
onClick={() => handleColorChange(val.id)}
aria-pressed={selectedZone.zoneData.zoneColor === val.id}
>
<div className={`texture-display ${val.id}`} style={{ background: val.id }}></div>
<div className="zone-color">{val.color}</div>
</button>
))}
<input type="color" className="custom-color-picker" value={selectedZone.zoneData.zoneColor} onChange={(e) => handleColorChange(e.target.value)} />
</div>
)}
</section>
</div>
);
}
export default SelectedZoneProperties;

1
app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx
View File

@@ -191,6 +191,7 @@ function AisleCreator() {
addAilseToBackend(aisle);
setTempPoints([newPoint]);
setIsCreating(true);
};
const onContext = (event: any) => {

4
app/src/modules/builder/wall/wallCreator/wallCreator.tsx
View File

@@ -105,7 +105,7 @@ function WallCreator() {
};
builderSocket.emit("v1:model-Wall:add", data);
setTempPoints([]);
setIsCreating(false);
}
@@ -334,6 +334,7 @@ function WallCreator() {
});
setTempPoints([newPoint]);
setIsCreating(true);
}
return;
@@ -403,6 +404,7 @@ function WallCreator() {
});
setTempPoints([newPoint]);
setIsCreating(true);
}
};

10
app/src/modules/collaboration/socket/builderResponses.tsx
View File

@@ -12,7 +12,7 @@ import useZoneResponseHandler from "../responseHandler/useZoneResponseHandler";
function BuilderResponses() {
const { assetStore } = useSceneContext();
const { getAssetById, movedObjects, initialStates, updateAsset, resetAsset, setInitialState } = assetStore();
const { selectedAisle, setSelectedAisle, selectedWall, setSelectedWall, selectedFloor, setSelectedFloor } = useBuilderStore();
const { selectedAisle, setSelectedAisle, selectedWall, setSelectedWall, selectedFloor, setSelectedFloor, selectedZone, setSelectedZone } = useBuilderStore();
const { builderSocket } = useSocketStore();
const { addAssetToScene, updateAssetInScene, removeAssetFromScene } = useAssetResponseHandler();
const { addWallAssetToScene, updateWallAssetInScene, removeWallAssetFromScene } = useWallAssetResponseHandler();
@@ -510,9 +510,9 @@ function BuilderResponses() {
};
updateZoneInScene(zone, () => {
// if (selectedZone?.zoneData.zoneUuid === zone.zoneUuid) {
// setSelectedZone({ zoneData: zone, zoneMesh: selectedZone.zoneMesh });
// }
if (selectedZone?.zoneData.zoneUuid === zone.zoneUuid) {
setSelectedZone({ zoneData: zone, zoneMesh: selectedZone.zoneMesh });
}
echo.info(`Updated zone: ${zone.zoneName}`);
});
@@ -543,7 +543,7 @@ function BuilderResponses() {
builderSocket.off("v1:zone:response:delete");
}
};
}, [builderSocket]);
}, [builderSocket, selectedZone]);
//#endregion
return null;

1
app/src/services/simulation/products/UpsertProductOrEventApi.ts
View File

@@ -26,6 +26,7 @@ export const upsertProductOrEventApi = async (body: any) => {
}
const result = await response.json();
console.log('result: ', result);
return result;
} catch {
echo.error("Failed to upsert product or event");

1
app/src/services/simulation/products/deleteEventDataApi.ts
View File

@@ -28,6 +28,7 @@ export const deleteEventDataApi = async (body: any) => {
}
const result = await response.json();
console.log('result: ', result);
return result;
} catch {
echo.error("Failed to delete event data");

1
app/src/services/simulation/products/deleteProductApi.ts
View File

@@ -26,6 +26,7 @@ export const deleteProductApi = async (body: any) => {
}
const result = await response.json();
console.log('result: ', result);
return result;
} catch {
echo.error("Failed to delete product");

10
app/src/store/builder/useZoneStore.ts
View File

@@ -6,6 +6,7 @@ interface ZoneStore {
setZones: (zones: Zone[]) => void;
addZone: (zone: Zone) => void;
updateZone: (uuid: string, updated: Partial<Zone>) => void;
peekUpdateZone: (uuid: string, updated: Partial<Zone>) => Zone | undefined;
setZoneName: (uuid: string, name: string) => void;
setZoneHeight: (uuid: string, height: number) => void;
setZoneColor: (uuid: string, color: string) => void;
@@ -48,6 +49,15 @@ export const createZoneStore = () => {
}
}),
peekUpdateZone: (uuid, updated) => {
const zone = get().zones.find((z) => z.zoneUuid === uuid);
if (!zone) return undefined;
return {
...JSON.parse(JSON.stringify(zone)),
...updated,
} as Zone;
},
setZoneName: (uuid, name) =>
set((state) => {
const zone = state.zones.find((z) => z.zoneUuid === uuid);

4560
app/src/styles/layout/_sidebar.scss
View File

File diff suppressed because it is too large Load Diff