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

zonr bug fix

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-22 14:37:49 +05:30
parent c78f9edb5c
commit d8a7f3b2da
6 changed files with 396 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

22
app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
View File

@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
import { ThreeEvent, useThree } from '@react-three/fiber'; import { ThreeEvent, useThree } from '@react-three/fiber';
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView } from '../../../../../../store/builder/store'; import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore'; import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
import { useSocketStore } from '../../../../../../store/builder/store'; import { useSocketStore } from '../../../../../../store/builder/store';
import { useSceneContext } from '../../../../../scene/sceneContext'; import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -20,9 +20,11 @@ import { upsertProductOrEventApi } from '../../../../../../services/simulation/p
export function useModelEventHandlers({ export function useModelEventHandlers({
boundingBox, boundingBox,
groupRef, groupRef,
asset
}: { }: {
boundingBox: THREE.Box3 | null, boundingBox: THREE.Box3 | null,
groupRef: React.RefObject<THREE.Group>, groupRef: React.RefObject<THREE.Group>,
asset: Asset
}) { }) {
const { controls, gl, camera } = useThree(); const { controls, gl, camera } = useThree();
const { activeTool } = useActiveTool(); const { activeTool } = useActiveTool();
@@ -32,12 +34,13 @@ export function useModelEventHandlers({
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { eventStore, productStore, assetStore, undoRedo3DStore } = useSceneContext(); const { eventStore, productStore, assetStore, undoRedo3DStore } = useSceneContext();
const { push3D } = undoRedo3DStore(); const { push3D } = undoRedo3DStore();
const { removeAsset } = assetStore(); const { getAssetById, removeAsset } = assetStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { removeEvent, getEventByModelUuid } = eventStore(); const { removeEvent, getEventByModelUuid } = eventStore();
const { getIsEventInProduct, addPoint, deleteEvent } = productStore(); const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset(); const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem(); const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
const { setSelectedFloorItem } = useSelectedFloorItem(); const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { selectedProductStore } = useProductContext(); const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore(); const { selectedProduct } = selectedProductStore();
const { selectedVersionStore } = useVersionContext(); const { selectedVersionStore } = useVersionContext();
@@ -66,6 +69,19 @@ export function useModelEventHandlers({
}); });
}; };
useEffect(() => {
if (!zoneAssetId) return
if (zoneAssetId.id === asset.modelUuid) {
handleDblClick(asset);
}
}, [zoneAssetId])
useEffect(() => {
if (!selectedFloorItem) {
setZoneAssetId(null);
}
}, [selectedFloorItem])
const handleDblClick = (asset: Asset) => { const handleDblClick = (asset: Asset) => {
if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') { if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {

2
app/src/modules/builder/asset/models/model/model.tsx
View File

@@ -158,7 +158,7 @@ function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendere
}); });
}, []); }, []);
const { handleDblClick, handleClick, handlePointerOver, handlePointerOut, handleContextMenu } = useModelEventHandlers({ boundingBox, groupRef }); const { handleDblClick, handleClick, handlePointerOver, handlePointerOut, handleContextMenu } = useModelEventHandlers({ boundingBox, groupRef, asset });
return ( return (
<group <group

3
app/src/modules/visualization/visualization.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import Dropped3dWidgets from './widgets/3d/Dropped3dWidget' import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
import ZoneCentreTarget from './zone/zoneCameraTarget' import ZoneCentreTarget from './zone/zoneCameraTarget'
import ZoneAssets from './zone/zoneAssets'
import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents' import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
const Visualization:React.FC = () => { const Visualization:React.FC = () => {
@@ -12,8 +11,6 @@ const Visualization:React.FC = () => {
<ZoneCentreTarget /> <ZoneCentreTarget />
<ZoneAssets />
<MqttEvents /> <MqttEvents />
{/* <DrieHtmlTemp /> */} {/* <DrieHtmlTemp /> */}

78
app/src/modules/visualization/zone/zoneAssets.tsx
View File

@@ -1,78 +0,0 @@
import React, { useEffect, useRef } from 'react'
import { useSelectedFloorItem, useZoneAssetId } from '../../../store/builder/store';
import * as THREE from "three";
import { useThree } from '@react-three/fiber';
import * as Types from "../../../types/world/worldTypes";
export default function ZoneAssets() {
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { setSelectedFloorItem } = useSelectedFloorItem();
const { raycaster, controls, scene }: any = useThree();
useEffect(() => {
// console.log('zoneAssetId: ', zoneAssetId);
if (!zoneAssetId) return
let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
if (AssetMesh) {
const bbox = new THREE.Box3().setFromObject(AssetMesh);
const size = bbox.getSize(new THREE.Vector3());
const center = bbox.getCenter(new THREE.Vector3());
const front = new THREE.Vector3(0, 0, 1);
AssetMesh.localToWorld(front);
front.sub(AssetMesh.position).normalize();
const distance = Math.max(size.x, size.y, size.z) * 2;
const newPosition = center.clone().addScaledVector(front, distance);
controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
controls.setTarget(center.x, center.y, center.z, true);
controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
setSelectedFloorItem(AssetMesh);
} else {
if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
let selectedAssetPosition = [
zoneAssetId.position[0],
10,
zoneAssetId.position[2]
];
let selectedAssetTarget = [
zoneAssetId.position[0],
zoneAssetId.position[1],
zoneAssetId.position[2]
];
const setCam = async () => {
await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
setTimeout(() => {
let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
if (AssetMesh) {
const bbox = new THREE.Box3().setFromObject(AssetMesh);
const size = bbox.getSize(new THREE.Vector3());
const center = bbox.getCenter(new THREE.Vector3());
const front = new THREE.Vector3(0, 0, 1);
AssetMesh.localToWorld(front);
front.sub(AssetMesh.position).normalize();
const distance = Math.max(size.x, size.y, size.z) * 2;
const newPosition = center.clone().addScaledVector(front, distance);
controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
controls.setTarget(center.x, center.y, center.z, true);
controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
setSelectedFloorItem(AssetMesh);
}
}, 500)
};
setCam();
}
}
}, [zoneAssetId, scene, controls])
return (
<>
</>
)
}

177
app/src/modules/visualization/zone/zoneCameraTarget.tsx
View File

@@ -3,101 +3,98 @@ import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three"; import * as THREE from "three";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
import { import {
useEditPosition, useEditPosition,
usezonePosition, usezonePosition,
usezoneTarget, usezoneTarget,
} from "../../../store/builder/store"; } from "../../../store/builder/store";
export default function ZoneCentreTarget() { export default function ZoneCentreTarget() {
const { selectedZone } = useSelectedZoneStore(); const { selectedZone } = useSelectedZoneStore();
// const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>( const sphereRef = useRef<THREE.Mesh>(null);
null const { controls }: any = useThree();
); const { setZonePosition } = usezonePosition();
const sphereRef = useRef<THREE.Mesh>(null); const { setZoneTarget } = usezoneTarget();
const { controls }: any = useThree(); const { Edit } = useEditPosition();
const { setZonePosition } = usezonePosition();
const { setZoneTarget } = usezoneTarget();
const { Edit } = useEditPosition();
const TRANSITION_SPEED = 2000; const TRANSITION_SPEED = 2000;
useEffect(() => { useEffect(() => {
if ( if (
selectedZone.zoneViewPortTarget && selectedZone.zoneViewPortTarget &&
JSON.stringify(previousZoneCentre) !== JSON.stringify(previousZoneCentre) !==
JSON.stringify(selectedZone.zoneViewPortTarget) JSON.stringify(selectedZone.zoneViewPortTarget)
) { ) {
setPreviousZoneCentre(selectedZone.zoneViewPortTarget); setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
}
}, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
const centrePoint = useMemo(() => {
if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
return previousZoneCentre.map(
(value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
);
}, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
useEffect(() => {
if (selectedZone.zoneName !== "") {
if (sphereRef.current) {
sphereRef.current.position.set(
selectedZone.zoneViewPortTarget[0],
selectedZone.zoneViewPortTarget[1],
selectedZone.zoneViewPortTarget[2]
);
}
if (centrePoint) {
if (centrePoint.length > 0) {
const setCam = async () => {
controls.setLookAt(
centrePoint[0],
26,
centrePoint[2],
...centrePoint,
true,
TRANSITION_SPEED
);
setTimeout(() => {
controls?.setLookAt(
...selectedZone.zoneViewPortPosition,
...selectedZone.zoneViewPortTarget,
true,
TRANSITION_SPEED
);
}, 100);
};
setCam();
} else {
const setCam = async () => {
controls?.setLookAt(
...selectedZone.zoneViewPortPosition,
...selectedZone.zoneViewPortTarget,
true,
TRANSITION_SPEED
);
};
setCam();
} }
} }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedZone.zoneViewPortTarget]);
useFrame(() => { const centrePoint = useMemo(() => {
if (Edit) { if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
setZonePosition([ return previousZoneCentre.map(
controls.getPosition().x, (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
controls.getPosition().y, );
controls.getPosition().z, }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
]);
setZoneTarget([ useEffect(() => {
controls.getTarget().x, if (selectedZone.zoneName !== "") {
controls.getTarget().y, if (sphereRef.current) {
controls.getTarget().z, sphereRef.current.position.set(
]); selectedZone.zoneViewPortTarget[0],
} selectedZone.zoneViewPortTarget[1],
}); selectedZone.zoneViewPortTarget[2]
return <></>; );
}
if (centrePoint) {
if (centrePoint.length > 0) {
const setCam = async () => {
controls.setLookAt(
centrePoint[0],
26,
centrePoint[2],
...centrePoint,
true,
TRANSITION_SPEED
);
setTimeout(() => {
controls?.setLookAt(
...selectedZone.zoneViewPortPosition,
...selectedZone.zoneViewPortTarget,
true,
TRANSITION_SPEED
);
}, 100);
};
setCam();
} else {
const setCam = async () => {
controls?.setLookAt(
...selectedZone.zoneViewPortPosition,
...selectedZone.zoneViewPortTarget,
true,
TRANSITION_SPEED
);
};
setCam();
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedZone.zoneViewPortTarget]);
useFrame(() => {
if (Edit) {
setZonePosition([
controls.getPosition().x,
controls.getPosition().y,
controls.getPosition().z,
]);
setZoneTarget([
controls.getTarget().x,
controls.getTarget().y,
controls.getTarget().z,
]);
}
});
return <></>;
} }