zonr bug fix
This commit is contained in:
@@ -4,13 +4,13 @@ import RenameInput from "../inputs/RenameInput";
|
||||
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
|
||||
import { getZoneData } from "../../../services/visulization/zone/getZones";
|
||||
import useModuleStore, {
|
||||
useSubModuleStore,
|
||||
useSubModuleStore,
|
||||
} from "../../../store/useModuleStore";
|
||||
import {
|
||||
ArrowIcon,
|
||||
EyeIcon,
|
||||
LockIcon,
|
||||
RemoveIcon,
|
||||
ArrowIcon,
|
||||
EyeIcon,
|
||||
LockIcon,
|
||||
RemoveIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { useZoneAssetId } from "../../../store/builder/store";
|
||||
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
|
||||
@@ -21,326 +21,313 @@ import { useSceneContext } from "../../../modules/scene/sceneContext";
|
||||
import { useVersionContext } from "../../../modules/builder/version/versionContext";
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
name: string;
|
||||
position?: [number, number, number]; // Proper 3D vector
|
||||
rotation?: { x: number; y: number; z: number }; // Proper rotation format
|
||||
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;
|
||||
id: string;
|
||||
name: string;
|
||||
assets?: Asset[];
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
interface ListProps {
|
||||
items?: ZoneItem[];
|
||||
remove?: boolean;
|
||||
items?: ZoneItem[];
|
||||
remove?: boolean;
|
||||
}
|
||||
|
||||
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||
const { activeModule } = useModuleStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
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 } = useSceneContext();
|
||||
const { setName } = assetStore();
|
||||
const { organization } = getUserData();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { zoneStore } = useSceneContext();
|
||||
const { zones, setZoneName } = zoneStore();
|
||||
const { setSubModule } = useSubModuleStore();
|
||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
|
||||
const { projectId } = useParams();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { setName } = assetStore();
|
||||
const { organization } = getUserData();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { zoneStore } = useSceneContext();
|
||||
const { zones, setZoneName } = zoneStore();
|
||||
|
||||
useEffect(() => {
|
||||
useSelectedZoneStore.getState().setSelectedZone({
|
||||
zoneName: "",
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
zoneUuid: "",
|
||||
zoneViewPortTarget: [],
|
||||
zoneViewPortPosition: [],
|
||||
widgets: [],
|
||||
});
|
||||
}, [activeModule]);
|
||||
|
||||
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 || ""
|
||||
);
|
||||
console.log("response: ", response?.zoneName);
|
||||
|
||||
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");
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
// setZones((prevZones: any[]) =>
|
||||
// prevZones.map((zone) =>
|
||||
// zone.zoneUuid === selectedZone.zoneUuid
|
||||
// ? { ...zone, zoneName: newName }
|
||||
// : zone
|
||||
// )
|
||||
// );
|
||||
}
|
||||
}
|
||||
|
||||
async function handleZoneAssetName(newName: string) {
|
||||
if (zoneAssetId?.id) {
|
||||
let response = await setAssetsApi({
|
||||
modelUuid: zoneAssetId.id,
|
||||
modelName: newName,
|
||||
projectId,
|
||||
});
|
||||
// console.log("response: ", response);
|
||||
|
||||
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: "",
|
||||
useEffect(() => {
|
||||
useSelectedZoneStore.getState().setSelectedZone({
|
||||
zoneName: "",
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
widgets: [],
|
||||
zoneUuid: "",
|
||||
zoneViewPortTarget: [],
|
||||
zoneViewPortPosition: [],
|
||||
});
|
||||
setZoneAssetId({
|
||||
id: "",
|
||||
name: "",
|
||||
});
|
||||
setSubModule("properties");
|
||||
}
|
||||
}
|
||||
widgets: [],
|
||||
});
|
||||
}, [activeModule]);
|
||||
|
||||
const toggleZoneExpansion = (zoneUuid: string) => {
|
||||
setExpandedZones((prev) => ({
|
||||
...prev,
|
||||
[zoneUuid]: !prev[zoneUuid],
|
||||
}));
|
||||
};
|
||||
|
||||
if (selectedZone.zoneName! === "" && activeModule === "Builder") {
|
||||
document.addEventListener("mousedown", onMouseDown);
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onMouseDown);
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
};
|
||||
}, [selectedZone, activeModule]);
|
||||
function handleAssetClick(asset: Asset) {
|
||||
setZoneAssetId(asset);
|
||||
}
|
||||
|
||||
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}
|
||||
/>
|
||||
</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" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="list-item">
|
||||
<button
|
||||
id={`${asset.name}-${asset.id}`}
|
||||
className="value"
|
||||
onClick={() => handleAssetClick(asset)}
|
||||
>
|
||||
<RenameInput
|
||||
value={asset.name}
|
||||
onRename={handleZoneAssetName}
|
||||
/>
|
||||
</button>
|
||||
<div className="options-container">
|
||||
<button className="lock option" id="lock-btn">
|
||||
<LockIcon isLocked />
|
||||
</button>
|
||||
<button className="visibe option" id="visible-btn">
|
||||
<EyeIcon isClosed />
|
||||
</button>
|
||||
{remove && (
|
||||
<button className="remove option" id="remove-btn">
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
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,
|
||||
});
|
||||
// console.log("response: ", response);
|
||||
|
||||
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);
|
||||
};
|
||||
}, [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}
|
||||
/>
|
||||
</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" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="list-item">
|
||||
<button
|
||||
id={`${asset.name}-${asset.id}`}
|
||||
className="value"
|
||||
onClick={() => handleAssetClick(asset)}
|
||||
>
|
||||
<RenameInput
|
||||
value={asset.name}
|
||||
onRename={handleZoneAssetName}
|
||||
/>
|
||||
</button>
|
||||
<div className="options-container">
|
||||
<button className="lock option" id="lock-btn">
|
||||
<LockIcon isLocked />
|
||||
</button>
|
||||
<button className="visibe option" id="visible-btn">
|
||||
<EyeIcon isClosed />
|
||||
</button>
|
||||
{remove && (
|
||||
<button className="remove option" id="remove-btn">
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="list-wrapper">
|
||||
<div className="no-item">No items to display</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
</ul>
|
||||
) : (
|
||||
<div className="list-wrapper">
|
||||
<div className="no-item">No items to display</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default List;
|
||||
|
||||
Reference in New Issue
Block a user