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

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

@@ -45,9 +45,7 @@ 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();
@@ -92,7 +90,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
projectId,
selectedVersion?.versionId || ""
);
console.log("response: ", response?.zoneName);
if (!response) return;
@@ -108,7 +105,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
});
} catch (error) {
echo.error("Failed to select zone");
console.log(error);
}
}
@@ -140,13 +136,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
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
// )
// );
}
}
@@ -253,8 +242,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}}
>
<div
className={`list-item ${
selectedZone.zoneUuid === item.id ? "active" : ""
className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
}`}
>
<div className="zone-header">
@@ -298,8 +286,7 @@ 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">

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 { 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 { useSocketStore } from '../../../../../../store/builder/store';
import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -20,9 +20,11 @@ import { upsertProductOrEventApi } from '../../../../../../services/simulation/p
export function useModelEventHandlers({
boundingBox,
groupRef,
asset
}: {
boundingBox: THREE.Box3 | null,
groupRef: React.RefObject<THREE.Group>,
asset: Asset
}) {
const { controls, gl, camera } = useThree();
const { activeTool } = useActiveTool();
@@ -32,12 +34,13 @@ export function useModelEventHandlers({
const { socket } = useSocketStore();
const { eventStore, productStore, assetStore, undoRedo3DStore } = useSceneContext();
const { push3D } = undoRedo3DStore();
const { removeAsset } = assetStore();
const { getAssetById, removeAsset } = assetStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { removeEvent, getEventByModelUuid } = eventStore();
const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
const { setSelectedFloorItem } = useSelectedFloorItem();
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
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) => {
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 (
<group

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

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

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

@@ -10,10 +10,7 @@ import {
export default function ZoneCentreTarget() {
const { selectedZone } = useSelectedZoneStore();
//
const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
null
);
const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
const sphereRef = useRef<THREE.Mesh>(null);
const { controls }: any = useThree();
const { setZonePosition } = usezonePosition();