305 lines
13 KiB
TypeScript
305 lines
13 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import RenameInput from "../inputs/RenameInput";
|
|
|
|
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
|
|
import { getZoneData } from "../../../services/visulization/zone/getZones";
|
|
import useModuleStore, { useSubModuleStore } from "../../../store/ui/useModuleStore";
|
|
import { ArrowIcon, EyeIcon, LockIcon, RemoveIcon } from "../../icons/ExportCommonIcons";
|
|
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";
|
|
import { getUserData } from "../../../functions/getUserData";
|
|
import { useSceneContext } from "../../../modules/scene/sceneContext";
|
|
|
|
interface Asset {
|
|
id: string;
|
|
name: string;
|
|
position?: [number, number, number]; // Proper 3D vector
|
|
rotation?: { x: number; y: number; z: number }; // Proper rotation format
|
|
}
|
|
|
|
interface ZoneItem {
|
|
id: string;
|
|
name: string;
|
|
assets?: Asset[];
|
|
active?: boolean;
|
|
}
|
|
|
|
interface ListProps {
|
|
items?: ZoneItem[];
|
|
remove?: boolean;
|
|
}
|
|
|
|
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|
const { activeModule } = useModuleStore();
|
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
|
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
|
|
|
const { setSubModule } = useSubModuleStore();
|
|
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
|
|
const { projectId } = useParams();
|
|
const { assetStore, versionStore, zoneStore } = useSceneContext();
|
|
const { setName } = assetStore();
|
|
const { selectedVersion } = versionStore();
|
|
const { zones, setZoneName } = zoneStore();
|
|
const { organization } = getUserData();
|
|
|
|
useEffect(() => {
|
|
useSelectedZoneStore.getState().setSelectedZone({
|
|
zoneName: "",
|
|
activeSides: [],
|
|
panelOrder: [],
|
|
lockedPanels: [],
|
|
zoneUuid: "",
|
|
zoneViewPortTarget: [],
|
|
zoneViewPortPosition: [],
|
|
widgets: [],
|
|
});
|
|
}, [activeModule]);
|
|
|
|
useEffect(() => {
|
|
const expanded: Record<string, boolean> = { "unassigned-zone": true };
|
|
if (zones.length > 0) {
|
|
zones.forEach((zone: any) => {
|
|
expanded[zone.zoneUuid] = true;
|
|
});
|
|
}
|
|
setExpandedZones(expanded);
|
|
// eslint-disable-next-line
|
|
}, [zones.length]);
|
|
|
|
const toggleZoneExpansion = (zoneUuid: string) => {
|
|
setExpandedZones((prev) => ({
|
|
...prev,
|
|
[zoneUuid]: !prev[zoneUuid],
|
|
}));
|
|
};
|
|
|
|
async function handleSelectZone(id: string) {
|
|
try {
|
|
if (selectedZone?.zoneUuid === id || id === "unassigned-zone") {
|
|
return;
|
|
}
|
|
|
|
setSubModule("zoneProperties");
|
|
|
|
let response = await getZoneData(id, organization, projectId, selectedVersion?.versionId || "");
|
|
|
|
if (!response) return;
|
|
|
|
setSelectedZone({
|
|
zoneName: response?.zoneName,
|
|
activeSides: response?.activeSides ?? [],
|
|
panelOrder: response?.panelOrder ?? [],
|
|
lockedPanels: response?.lockedPanels ?? [],
|
|
widgets: response?.widgets ?? [],
|
|
zoneUuid: response?.zoneUuid,
|
|
zoneViewPortTarget: response?.viewPortTarget ?? [],
|
|
zoneViewPortPosition: response?.viewPortPosition ?? [],
|
|
});
|
|
} catch (error) {
|
|
echo.error("Failed to select zone");
|
|
}
|
|
}
|
|
|
|
function handleAssetClick(asset: Asset) {
|
|
setZoneAssetId(asset);
|
|
}
|
|
|
|
async function handleZoneNameChange(newName: string) {
|
|
const isDuplicate = zones.some((zone: any) => zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() && zone.zoneUuid !== selectedZone.zoneUuid);
|
|
|
|
if (isDuplicate) {
|
|
alert("Zone name already exists. Please choose a different name.");
|
|
return; // DO NOT update state
|
|
}
|
|
const zonesdata = {
|
|
zoneUuid: selectedZone.zoneUuid,
|
|
zoneName: newName,
|
|
};
|
|
const response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
|
|
if (response.message === "zone updated") {
|
|
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
|
|
setZoneName(selectedZone.zoneUuid, newName);
|
|
}
|
|
}
|
|
|
|
async function handleZoneAssetName(newName: string) {
|
|
if (zoneAssetId?.id) {
|
|
let response = await setAssetsApi({
|
|
modelUuid: zoneAssetId.id,
|
|
modelName: newName,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
});
|
|
|
|
setName(zoneAssetId.id, response.modelName);
|
|
}
|
|
}
|
|
const checkZoneNameDuplicate = (name: string) => {
|
|
return zones.some((zone: any) => zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() && zone.zoneUuid !== selectedZone.zoneUuid);
|
|
};
|
|
|
|
useEffect(() => {
|
|
let drag = false;
|
|
let isLeftMouseDown = false;
|
|
|
|
const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
|
|
|
|
const isOutsideClick = (target: EventTarget | null) => {
|
|
if (!(target instanceof HTMLElement)) return true;
|
|
return !contextClassNames.some((className) => target.closest(`.${className}`));
|
|
};
|
|
|
|
const onMouseDown = (evt: MouseEvent) => {
|
|
if (evt.button === 0) {
|
|
isLeftMouseDown = true;
|
|
drag = false;
|
|
}
|
|
};
|
|
|
|
const onMouseMove = () => {
|
|
if (isLeftMouseDown) {
|
|
drag = true;
|
|
}
|
|
};
|
|
|
|
const onMouseUp = (evt: MouseEvent) => {
|
|
if (evt.button === 0) {
|
|
isLeftMouseDown = false;
|
|
if (drag) return;
|
|
|
|
if (isOutsideClick(evt.target)) {
|
|
// Clear selected zone
|
|
setSelectedZone({
|
|
zoneUuid: "",
|
|
zoneName: "",
|
|
activeSides: [],
|
|
panelOrder: [],
|
|
lockedPanels: [],
|
|
widgets: [],
|
|
zoneViewPortTarget: [],
|
|
zoneViewPortPosition: [],
|
|
});
|
|
setZoneAssetId({
|
|
id: "",
|
|
name: "",
|
|
});
|
|
setSubModule("properties");
|
|
}
|
|
}
|
|
};
|
|
|
|
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);
|
|
};
|
|
// eslint-disable-next-line
|
|
}, [selectedZone, activeModule]);
|
|
|
|
return (
|
|
<>
|
|
{items?.length > 0 ? (
|
|
<ul className="list-wrapper">
|
|
{items?.map((item) => (
|
|
<React.Fragment key={`zone-${item.id}`}>
|
|
<li
|
|
className="list-container"
|
|
onClick={() => {
|
|
handleSelectZone(item.id);
|
|
toggleZoneExpansion(item.id);
|
|
}}
|
|
>
|
|
<div className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""}`}>
|
|
<div className="zone-header">
|
|
<button className="value" id="zone-name">
|
|
<RenameInput value={item.name} onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} canEdit={item.id !== "unassigned-zone"} />
|
|
</button>
|
|
</div>
|
|
<div className="options-container">
|
|
<div className="lock option">
|
|
<LockIcon isLocked />
|
|
</div>
|
|
<div className="visibe option">
|
|
<EyeIcon isClosed />
|
|
</div>
|
|
{remove && (
|
|
<div className="remove option">
|
|
<RemoveIcon />
|
|
</div>
|
|
)}
|
|
{item.assets && item.assets.length > 0 && (
|
|
<button id="expand-btn" className="expand-icon option" onClick={() => toggleZoneExpansion(item.id)}>
|
|
<ArrowIcon />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{/* Nested assets list - only shown when expanded */}
|
|
{item.assets && item.assets.length > 0 && expandedZones[item.id] && (
|
|
<ul className="asset-list">
|
|
{item.assets.map((asset) => (
|
|
<li key={`asset-${asset.id}`} className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`} onClick={() => handleAssetClick(asset)}>
|
|
<div className="list-item">
|
|
<button id={`${asset.name}-${asset.id}`} className="value">
|
|
<RenameInput value={asset.name} onRename={handleZoneAssetName} />
|
|
</button>
|
|
<div className="options-container">
|
|
<button
|
|
className="lock option"
|
|
id="lock-btn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<LockIcon isLocked />
|
|
</button>
|
|
<button
|
|
className="visibe option"
|
|
id="visible-btn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<EyeIcon isClosed />
|
|
</button>
|
|
{remove && (
|
|
<button
|
|
className="remove option"
|
|
id="remove-btn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<RemoveIcon />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<div className="list-wrapper">
|
|
<div className="no-item">No items to display</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default List;
|