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

refactor: updating outline

Browse Source
This commit is contained in:
Vishnu
2025-08-22 14:01:44 +05:30
parent 0b7ef13a81
commit c78f9edb5c
5 changed files with 133 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/components/layout/scenes/MainScene.tsx
View File

@@ -75,13 +75,13 @@ function MainScene() {
clearComparisonProduct();
setIsVersionSaved(false);
}
}, [activeModule])
}, [activeModule, clearComparisonProduct, setIsVersionSaved])
useEffect(() => {
if (versionHistory.length > 0) {
setSelectedVersion(versionHistory[0])
}
}, [versionHistory])
}, [setSelectedVersion, versionHistory])
const handleSelectVersion = (option: string) => {
const version = versionHistory.find((version) => version.versionName === option);
@@ -140,7 +140,7 @@ function MainScene() {
{!selectedUser && (
<>
<KeyPressListener />
{/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
{loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
{!isPlaying && (
<>
{toggleThreeD && !isVersionSaved && <ModuleToggle />}
@@ -155,7 +155,7 @@ function MainScene() {
)}
{(isPlaying) &&
activeModule === "simulation" &&
loadingProgress == 0 && <SimulationPlayer />}
loadingProgress === 0 && <SimulationPlayer />}
{(isPlaying) &&
activeModule !== "simulation" && <ControlsPlayer />}
@@ -188,7 +188,7 @@ function MainScene() {
}
onDragOver={(event) => event.preventDefault()}
>
{/* <Scene layout="Main Layout" /> */}
<Scene layout="Main Layout" />
</div>
{selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (

104
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@@ -4,54 +4,92 @@ import DropDownList from "../../ui/list/DropDownList";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import { isPointInsidePolygon } from "../../../functions/isPointInsidePolygon";
interface AssetData {
id: string;
name: string;
position?: [];
rotation?: {};
}
interface ZoneData {
id: string;
name: string;
assets: { id: string; name: string; position?: []; rotation?: {} }[];
assets: AssetData[];
}
const Outline: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
const [isLayersOpen, setIsLayersOpen] = useState(true);
const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
const [isZonesOpen, setIsZonesOpen] = useState(false);
const [sceneAssetsDataList, setSceneAssetsDataList] = useState<
ZoneData[] | AssetData[]
>([]);
// const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
// const [isLayersOpen, setIsLayersOpen] = useState(true);
// const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
const [isZonesOpen, setIsZonesOpen] = useState(true);
const { assetStore, zoneStore } = useSceneContext();
const { assets } = assetStore();
const { zones } = zoneStore();
useEffect(() => {
const updatedZoneList: ZoneData[] = zones?.map((zone: any) => {
const polygon2D = zone.points.map((p: any) => [p.position[0], p.position[2]]);
const assetsInZone = assets.filter((item: any) => {
const [x, , z] = item.position;
return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
})
.map((item: any) => ({
id: item.modelUuid,
name: item.modelName,
position: item.position,
rotation: item.rotation,
}));
const assignedAssets = new Set<string>();
return {
id: zone.zoneUuid,
name: zone.zoneName,
assets: assetsInZone,
};
});
const updatedZoneList: ZoneData[] =
zones?.map((zone: any) => {
const polygon2D = zone.points.map((p: any) => [
p.position[0],
p.position[2],
]);
const assetsInZone = assets
.filter((item: any) => {
const [x, , z] = item.position;
const inside = isPointInsidePolygon(
[x, z],
polygon2D as [number, number][]
);
if (inside) assignedAssets.add(item.modelUuid);
return inside;
})
.map((item: any) => ({
id: item.modelUuid,
name: item.modelName,
position: item.position,
rotation: item.rotation,
}));
setZoneDataList(updatedZoneList);
return {
id: zone.zoneUuid,
name: zone.zoneName,
assets: assetsInZone,
};
}) ?? [];
// Collect unassigned assets
const unassignedAssets = assets
.filter((item: any) => !assignedAssets.has(item.modelUuid))
.map((item: any) => ({
id: item.modelUuid,
name: item.modelName,
position: item.position,
rotation: item.rotation,
}));
// Add as a separate "zone"
if (unassignedAssets.length > 0) {
updatedZoneList.push({
id: "unassigned-zone",
name: "Unassigned",
assets: unassignedAssets,
});
}
setSceneAssetsDataList(updatedZoneList);
}, [zones, assets]);
const handleSearchChange = (value: string) => {
setSearchValue(value);
};
const dropdownItems = [{ id: "1", name: "Ground Floor" }];
// const dropdownItems = [{ id: "1", name: "Ground Floor" }];
return (
<div className="outline-container">
@@ -63,7 +101,7 @@ const Outline: React.FC = () => {
</div>
) : (
<div className="outline-content-container">
<section className="outline-section">
{/* <section className="outline-section">
<DropDownList
value="Layers"
items={dropdownItems}
@@ -73,19 +111,19 @@ const Outline: React.FC = () => {
showFocusIcon={true}
remove
/>
</section>
</section> */}
<section className="outline-section overflow">
<DropDownList
{/* <DropDownList
value="Buildings"
items={buildingsList}
isOpen={isBuildingsOpen}
onToggle={() => setIsBuildingsOpen((prev) => !prev)}
showKebabMenu={false}
showAddIcon={false}
/>
/> */}
<DropDownList
value="Zones"
items={zoneDataList}
items={sceneAssetsDataList}
isOpen={isZonesOpen}
onToggle={() => setIsZonesOpen((prev) => !prev)}
showKebabMenu={false}

8
app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
View File

@@ -1,9 +1,9 @@
import React, { useState } from 'react'
import NavigateCatagory from '../../NavigateCatagory'
import { useState } from 'react'
// import NavigateCatagory from '../../NavigateCatagory'
import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
import assetImage from "../../../../../../assets/image/asset-image.png"
const AssetManagement = () => {
const [selectedCategory, setSelectedCategory] = useState("All Assets");
// const [selectedCategory, setSelectedCategory] = useState("All Assets");
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
const dummyAssets = [
@@ -56,7 +56,7 @@ const AssetManagement = () => {
<div className='assetManagement-container assetManagement-wrapper'>
{dummyAssets.map((asset, index) => (
<div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
<div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`} key={index}>
<header>
<div className="header-wrapper">

80
app/src/components/ui/list/List.tsx
View File

@@ -12,9 +12,7 @@ import {
LockIcon,
RemoveIcon,
} from "../../icons/ExportCommonIcons";
import {
useZoneAssetId,
} from "../../../store/builder/store";
import { useZoneAssetId } from "../../../store/builder/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
import { useParams } from "react-router-dom";
@@ -47,7 +45,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
const { projectId } = useParams();
const { assetStore } = useSceneContext();
const { setName } = assetStore();
@@ -55,7 +55,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { zoneStore } = useSceneContext();
const { zones, setZoneName } = zoneStore()
const { zones, setZoneName } = zoneStore();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
@@ -78,14 +78,24 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
};
async function handleSelectZone(id: string) {
try {
if (selectedZone?.zoneUuid === id) {
if (selectedZone?.zoneUuid === id || id === 'unassigned-zone') {
return;
}
setSubModule("zoneProperties");
let response = await getZoneData(id, organization, projectId, selectedVersion?.versionId || "");
let response = await getZoneData(
id,
organization,
projectId,
selectedVersion?.versionId || ""
);
console.log("response: ", response?.zoneName);
if (!response) return;
setSelectedZone({
zoneName: response?.zoneName,
activeSides: response?.activeSides ?? [],
@@ -121,10 +131,15 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
zoneUuid: selectedZone.zoneUuid,
zoneName: newName,
};
const response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
const response = await zoneCameraUpdate(
zonesdata,
organization,
projectId,
selectedVersion?.versionId || ""
);
if (response.message === "zone updated") {
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
setZoneName(selectedZone.zoneUuid, newName)
setZoneName(selectedZone.zoneUuid, newName);
// setZones((prevZones: any[]) =>
// prevZones.map((zone) =>
// zone.zoneUuid === selectedZone.zoneUuid
@@ -140,7 +155,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
let response = await setAssetsApi({
modelUuid: zoneAssetId.id,
modelName: newName,
projectId
projectId,
});
// console.log("response: ", response);
@@ -159,11 +174,15 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
let drag = false;
let isLeftMouseDown = false;
const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
const contextClassNames = [
"list-wrapper",
"zone-properties-container",
"list-container",
];
const isOutsideClick = (target: EventTarget | null) => {
if (!(target instanceof HTMLElement)) return true;
return !contextClassNames.some(className =>
return !contextClassNames.some((className) =>
target.closest(`.${className}`)
);
};
@@ -189,38 +208,37 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
if (isOutsideClick(evt.target)) {
// Clear selected zone
setSelectedZone({
zoneUuid: '',
zoneName: '',
zoneUuid: "",
zoneName: "",
activeSides: [],
panelOrder: [],
lockedPanels: [],
widgets: [],
zoneViewPortTarget: [],
zoneViewPortPosition: []
zoneViewPortPosition: [],
});
setZoneAssetId({
id: '',
name: '',
id: "",
name: "",
});
setSubModule("properties")
setSubModule("properties");
}
}
};
if (selectedZone.zoneName! === '' && activeModule === 'Builder') {
document.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
if (selectedZone.zoneName! === "" && activeModule === "Builder") {
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
}
return () => {
document.removeEventListener('mousedown', onMouseDown);
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener("mousedown", onMouseDown);
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
}, [selectedZone, activeModule]);
return (
<>
{items?.length > 0 ? (
@@ -234,7 +252,11 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
toggleZoneExpansion(item.id);
}}
>
<div className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""}`}>
<div
className={`list-item ${
selectedZone.zoneUuid === item.id ? "active" : ""
}`}
>
<div className="zone-header">
<button className="value" id="zone-name">
<RenameInput
@@ -276,7 +298,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
className={`list-container asset-item ${
zoneAssetId?.id === asset.id ? "active" : ""
}`}
>
<div className="list-item">
<button

3
app/src/pages/Project.tsx
View File

@@ -4,7 +4,6 @@ import {
useSocketStore,
useOrganization,
useUserName,
useSaveVersion,
useProjectName,
useActiveTool,
} from "../store/builder/store";
@@ -33,7 +32,7 @@ const Project: React.FC = () => {
const { setUserName } = useUserName();
const { setOrganization } = useOrganization();
const { projectId } = useParams();
const { projectName, setProjectName } = useProjectName();
const { setProjectName } = useProjectName();
const { userId, email, organization, userName } = getUserData();
const { selectedUser } = useSelectedUserStore();
const { isLogListVisible } = useLogger();