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

v2-ui #91

Merged
Vishnu merged 8 commits from v2-ui into main 2025-05-21 07:36:21 +00:00
Conversation 0 Commits 8 Files Changed 18 +515 -98
18 changed files with 515 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
View File

@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => {
};
// Call your API to update the zone
let response = await zoneCameraUpdate(zonesdata, organization);
console.log("response: ", response);
// console.log("response: ", response);
if (response.message === "updated successfully") {
setZones((prevZones: any[]) =>
prevZones.map((zone) =>

1
app/src/components/ui/list/DropDownList.tsx
View File

@ -98,6 +98,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
assets: assetsInZone,
};
});
setZoneDataList(updatedZoneList);
}, [zones, floorItems]);

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

@ -19,6 +19,7 @@ import {
} from "../../../store/builder/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import OuterClick from "../../../utils/outerClick";
interface Asset {
id: string;
@ -43,13 +44,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { activeModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { zones } = useZones();
const { zones, setZones } = useZones();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
const { setFloorItems } = useFloorItems();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@ -82,7 +84,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
let response = await getZoneData(id, organization);
setSelectedZone({
zoneName: response?.zoneName,
activeSides: response?.activeSides ?? [],
@ -125,6 +126,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const response = await zoneCameraUpdate(zonesdata, organization);
if (response.message === "updated successfully") {
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
setZones((prevZones: any[]) =>
prevZones.map((zone) =>
zone.zoneId === selectedZone.zoneId
? { ...zone, zoneName: newName }
: zone
)
);
}
}
@ -138,7 +147,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
zoneAssetId.id,
newName
);
console.log("response: ", response);
// console.log("response: ", response);
setFloorItems((prevFloorItems: any[]) =>
prevFloorItems.map((floorItems) =>
floorItems.modelUuid === zoneAssetId.id
@ -156,6 +165,69 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
);
};
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({
zoneId: '',
zoneName: '',
activeSides: [],
panelOrder: [],
lockedPanels: [],
widgets: [],
zoneViewPortTarget: [],
zoneViewPortPosition: []
});
setZoneAssetId({
id: '',
name: '',
});
}
}
};
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);
};
}, []);
return (
<>
{items?.length > 0 ? (
@ -169,7 +241,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
toggleZoneExpansion(item.id);
}}
>
<div className={`list-item ${item.active ? "active" : ""}`}>
<div className={`list-item ${selectedZone.zoneId === item.id ? "active" : ""}`}>
<div className="zone-header">
<button className="value" id="zone-name">
<RenameInput
@ -211,7 +283,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className="list-container asset-item"
className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
>
<div className="list-item">
<button

2
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -533,7 +533,7 @@ const ZoneGroup: React.FC = () => {
<group
key={zone.zoneId}
name={zone.zoneName}
visible={zone.zoneName === selectedZone.zoneName}
visible={zone.zoneId === selectedZone.zoneId}
>
{zone.points
.slice(0, -1)

17
app/src/modules/simulation/events/arrows/arrows.tsx
View File

@ -160,29 +160,26 @@ export function ArrowOnQuadraticBezier({
const arrowRadius = 0.01 * scale;
const arrowHeadRadius = arrowRadius * 2.5;
const curveLength = useMemo(() => fullCurve.getLength(), [fullCurve]);
const arrowHeadTOffset = useMemo(() => Math.min(arrowHeadLength / curveLength, 0.5), [arrowHeadLength, curveLength]);
const endT = 1 - arrowHeadTOffset;
const subCurve = useMemo(() => {
const t1 = Math.max(0, endT - segmentSize / 2);
const t2 = Math.min(1, endT + segmentSize / 2);
const centerT = 0.5;
const t1 = Math.max(0, centerT - segmentSize / 2);
const t2 = Math.min(1, centerT + segmentSize / 2);
const divisions = 10;
const subPoints = Array.from({ length: divisions + 1 }, (_, i) => {
const t = THREE.MathUtils.lerp(t1, t2, i / divisions);
return fullCurve.getPoint(t);
});
return new THREE.CatmullRomCurve3(subPoints);
}, [fullCurve, endT, segmentSize]);
}, [fullCurve, segmentSize]);
const tubeGeometry = useMemo(
() => new THREE.TubeGeometry(subCurve, 20, arrowRadius, 8, false),
[subCurve, arrowRadius]
);
const arrowPosition = useMemo(() => fullCurve.getPoint(1), [fullCurve]);
const arrowTangent = useMemo(() => fullCurve.getTangent(1).normalize(), [fullCurve]);
const arrowPosition = useMemo(() => subCurve.getPoint(1), [subCurve]);
const arrowTangent = useMemo(() => subCurve.getTangent(1).normalize(), [subCurve]);
const arrowRotation = useMemo(() => {
return new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), arrowTangent);

22
app/src/modules/simulation/events/points/creator/pointsCreator.tsx
View File

@ -15,7 +15,7 @@ function PointsCreator() {
const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore();
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2 } = useProductStore();
const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2, getPointByUuid: getPointByUuidFromProduct } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { activeModule } = useModuleStore();
const transformRef = useRef<any>(null);
@ -76,7 +76,7 @@ function PointsCreator() {
}, [selectedEventSphere]);
const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
let point = JSON.parse(
let point: PointsScheme = JSON.parse(
JSON.stringify(
getPointByUuid(
selectedEventSphere.userData.modelUuid,
@ -90,15 +90,30 @@ function PointsCreator() {
selectedEventSphere.position.y,
selectedEventSphere.position.z,
];
point.rotation = [
selectedEventSphere.rotation.x,
selectedEventSphere.rotation.y,
selectedEventSphere.rotation.z,
];
const event = getEventByModelUuidFromProduct(selectedProduct.productId, selectedEventSphere.userData.modelUuid);
if (event && selectedProduct.productId !== '') {
const updatedPoint = JSON.parse(
JSON.stringify(
getPointByUuidFromProduct(selectedProduct.productId, selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)
)
);
if (updatedPoint) {
updatedPoint.position = point.position;
updatedPoint.rotation = point.rotation;
const updatedEvent = updatePointFromProduct(
selectedProduct.productId,
selectedEventSphere.userData.modelUuid,
selectedEventSphere.userData.pointUuid,
point
updatedPoint
)
if (updatedEvent) {
updatePoint(
@ -115,6 +130,7 @@ function PointsCreator() {
}
}
}
}
};
useEffect(() => {

65
app/src/modules/simulation/machine/eventManager/useMachineEventManager.ts Normal file
View File

@ -0,0 +1,65 @@
import { useEffect, useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { useMachineStore } from '../../../../store/simulation/useMachineStore';
type MachineCallback = {
machineId: string;
callback: () => void;
};
export function useMachineEventManager() {
const { getMachineById } = useMachineStore();
const callbacksRef = useRef<MachineCallback[]>([]);
const isMonitoringRef = useRef(false);
// Add a new machine to monitor
const addMachineToMonitor = (machineId: string, callback: () => void) => {
// Avoid duplicates
if (!callbacksRef.current.some((entry) => entry.machineId === machineId)) {
callbacksRef.current.push({ machineId, callback });
}
// Start monitoring if not already running
if (!isMonitoringRef.current) {
isMonitoringRef.current = true;
}
};
// Remove a machine from monitoring
const removeMachineFromMonitor = (machineId: string) => {
callbacksRef.current = callbacksRef.current.filter(
(entry) => entry.machineId !== machineId
);
// Stop monitoring if no more machines to track
if (callbacksRef.current.length === 0) {
isMonitoringRef.current = false;
}
};
// Check machine states every frame
useFrame(() => {
if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
callbacksRef.current.forEach(({ machineId, callback }) => {
const machine = getMachineById(machineId);
if (machine && machine.isActive === false && machine.state === 'idle' && !machine.currentAction) {
callback();
removeMachineFromMonitor(machineId); // Remove after triggering
}
});
});
// Cleanup on unmount
useEffect(() => {
return () => {
callbacksRef.current = [];
isMonitoringRef.current = false;
};
}, []);
return {
addMachineToMonitor,
removeMachineFromMonitor,
};
}

167
app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts
View File

@ -10,6 +10,8 @@ import { useStorageUnitStore } from '../../../../store/simulation/useStorageUnit
import { useArmBotEventManager } from '../../roboticArm/eventManager/useArmBotEventManager';
import { useConveyorStore } from '../../../../store/simulation/useConveyorStore';
import { useConveyorEventManager } from '../../conveyor/eventManager/useConveyorEventManager';
import { useVehicleEventManager } from '../../vehicle/instances/eventManager/useVehicleEventManager';
import { useMachineEventManager } from '../../machine/eventManager/useMachineEventManager';
export function useTriggerHandler() {
const { handleAction } = useActionHandler();
@ -19,6 +21,8 @@ export function useTriggerHandler() {
const { getConveyorById } = useConveyorStore();
const { addArmBotToMonitor } = useArmBotEventManager();
const { addConveyorToMonitor } = useConveyorEventManager();
const { addVehicleToMonitor } = useVehicleEventManager();
const { addMachineToMonitor } = useMachineEventManager();
const { getVehicleById } = useVehicleStore();
const { getMachineById } = useMachineStore();
const { getStorageUnitById } = useStorageUnitStore();
@ -89,7 +93,7 @@ export function useTriggerHandler() {
if (vehicle) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
setIsVisible(materialId, false);
@ -98,8 +102,10 @@ export function useTriggerHandler() {
} else {
// Event Manager Needed
// Handle current action using Event Manager
addVehicleToMonitor(vehicle.modelUuid, () => {
handleAction(action, materialId);
})
}
}
}
@ -140,7 +146,78 @@ export function useTriggerHandler() {
if (action) {
if (armBot) {
if (action && action.triggers.length > 0 &&
action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid &&
action.triggers[0]?.triggeredAsset?.triggeredAction?.actionUuid &&
action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid) {
const model = getEventByModelUuid(selectedProduct.productId, action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid);
if (model?.type === 'vehicle') {
const vehicle = getVehicleById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid);
if (vehicle) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
// Handle current action from vehicle
setIsPaused(materialId, true);
handleAction(action, materialId);
} else {
// Handle current action using Event Manager
setIsPaused(materialId, true);
addVehicleToMonitor(vehicle.modelUuid,
() => {
handleAction(action, materialId);
}
)
}
}
} else if (model?.type === 'machine') {
const armBot = getArmBotById(trigger.triggeredAsset?.triggeredModel.modelUuid);
if (armBot) {
if (armBot.isActive === false && armBot.state === 'idle') {
const machine = getMachineById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid);
if (machine) {
if (machine.isActive === false && machine.state === 'idle' && !machine.currentAction) {
setIsPaused(materialId, true);
handleAction(action, materialId);
} else {
// Handle current action using Event Manager
setIsPaused(materialId, true);
addMachineToMonitor(machine.modelUuid,
() => {
handleAction(action, materialId);
}
)
}
}
} else {
addArmBotToMonitor(armBot.modelUuid,
() => {
const machine = getMachineById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
if (machine) {
if (machine.isActive === false && machine.state === 'idle' && !machine.currentAction) {
setIsPaused(materialId, true);
handleAction(action, materialId);
} else {
// Handle current action using Event Manager
setIsPaused(materialId, true);
addMachineToMonitor(machine.modelUuid,
() => {
handleAction(action, materialId);
}
)
}
}
}
);
}
}
} else {
if (armBot.isActive === false && armBot.state === 'idle') {
// Handle current action from arm bot
@ -149,7 +226,7 @@ export function useTriggerHandler() {
} else {
// Event Manager Needed
// Handle current action using Event Manager
setIsPaused(materialId, true);
addArmBotToMonitor(armBot.modelUuid,
() => handleAction(action, materialId)
@ -157,6 +234,24 @@ export function useTriggerHandler() {
}
}
} else {
if (armBot.isActive === false && armBot.state === 'idle') {
// Handle current action from arm bot
setIsPaused(materialId, true);
handleAction(action, materialId);
} else {
// Handle current action using Event Manager
setIsPaused(materialId, true);
addArmBotToMonitor(armBot.modelUuid,
() => handleAction(action, materialId)
);
}
}
}
}
}
}
@ -334,11 +429,20 @@ export function useTriggerHandler() {
if (model?.type === 'transfer') {
const conveyor = getConveyorById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
if (conveyor) {
const previousModel = getEventByModelUuid(selectedProduct.productId, material.previous?.modelUuid || '');
if (previousModel) {
if (previousModel.type === 'transfer' && previousModel.modelUuid === model.modelUuid) {
handleAction(action, materialId)
} else {
addConveyorToMonitor(conveyor.modelUuid,
() => {
handleAction(action, materialId)
}
)
}
} else {
handleAction(action, materialId)
}
// handleAction(action, materialId)
}
} else {
@ -347,18 +451,28 @@ export function useTriggerHandler() {
} else {
// Event Manager Needed
// Handle current action using Event Manager
addArmBotToMonitor(armBot.modelUuid,
() => {
const model = getEventByModelUuid(selectedProduct.productId, action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
if (model?.type === 'transfer') {
const conveyor = getConveyorById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
if (conveyor) {
const previousModel = getEventByModelUuid(selectedProduct.productId, material.previous?.modelUuid || '');
if (previousModel) {
if (previousModel.type === 'transfer' && previousModel.modelUuid === model.modelUuid) {
handleAction(action, materialId)
} else {
addConveyorToMonitor(conveyor.modelUuid,
() => {
handleAction(action, materialId)
}
)
}
} else {
handleAction(action, materialId)
}
// handleAction(action, materialId)
}
} else {
@ -432,17 +546,54 @@ export function useTriggerHandler() {
if (vehicle) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
setPreviousLocation(material.materialId, {
modelUuid: material.current.modelUuid,
pointUuid: material.current.pointUuid,
actionUuid: material.current.actionUuid,
})
setCurrentLocation(material.materialId, {
modelUuid: action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '',
pointUuid: action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid || '',
actionUuid: action.triggers[0]?.triggeredAsset?.triggeredAction?.actionUuid || '',
});
setNextLocation(material.materialId, null);
setIsVisible(materialId, false);
setIsPaused(materialId, false);
// Handle current action from vehicle
handleAction(nextAction, materialId);
} else {
// Event Manager Needed
// Handle current action using Event Manager
setIsPaused(materialId, true);
addVehicleToMonitor(vehicle.modelUuid,
() => {
setPreviousLocation(material.materialId, {
modelUuid: material.current.modelUuid,
pointUuid: material.current.pointUuid,
actionUuid: material.current.actionUuid,
})
setCurrentLocation(material.materialId, {
modelUuid: action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '',
pointUuid: action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid || '',
actionUuid: action.triggers[0]?.triggeredAsset?.triggeredAction?.actionUuid || '',
});
setNextLocation(material.materialId, null);
setIsPaused(materialId, false);
setIsVisible(materialId, false);
handleAction(nextAction, materialId);
}
)
}
}
}
@ -491,7 +642,7 @@ export function useTriggerHandler() {
if (vehicle) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
setIsVisible(materialId, false);

65
app/src/modules/simulation/vehicle/instances/eventManager/useVehicleEventManager.ts Normal file
View File

@ -0,0 +1,65 @@
import { useEffect, useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
type VehicleCallback = {
vehicleId: string;
callback: () => void;
};
export function useVehicleEventManager() {
const { getVehicleById } = useVehicleStore();
const callbacksRef = useRef<VehicleCallback[]>([]);
const isMonitoringRef = useRef(false);
// Add a new vehicle to monitor
const addVehicleToMonitor = (vehicleId: string, callback: () => void) => {
// Avoid duplicates
if (!callbacksRef.current.some((entry) => entry.vehicleId === vehicleId)) {
callbacksRef.current.push({ vehicleId, callback });
}
// Start monitoring if not already running
if (!isMonitoringRef.current) {
isMonitoringRef.current = true;
}
};
// Remove a vehicle from monitoring
const removeVehicleFromMonitor = (vehicleId: string) => {
callbacksRef.current = callbacksRef.current.filter(
(entry) => entry.vehicleId !== vehicleId
);
// Stop monitoring if no more vehicles to track
if (callbacksRef.current.length === 0) {
isMonitoringRef.current = false;
}
};
// Check vehicle states every frame
useFrame(() => {
if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
callbacksRef.current.forEach(({ vehicleId, callback }) => {
const vehicle = getVehicleById(vehicleId);
if (vehicle && vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
callback();
removeVehicleFromMonitor(vehicleId); // Remove after triggering
}
});
});
// Cleanup on unmount
useEffect(() => {
return () => {
callbacksRef.current = [];
isMonitoringRef.current = false;
};
}, []);
return {
addVehicleToMonitor,
removeVehicleFromMonitor,
};
}

59
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@ -41,6 +41,7 @@ export default function Dropped3dWidgets() {
const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
const { widgetSubOption } = useWidgetSubOption();
const { selectedZone } = useSelectedZoneStore();
let lastClientY = useRef<number | null>(null);
const { top, setTop } = useTopData();
const { left, setLeft } = useLeftData();
const { rightSelect, setRightSelect } = useRightSelected();
@ -412,6 +413,7 @@ export default function Dropped3dWidgets() {
}
};
const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedZoneId = Object.keys(zoneWidgetData).find(
@ -465,18 +467,51 @@ export default function Dropped3dWidgets() {
}
}
// if (rightSelect === "Vertical Move") {
// // console.log('rightSelect: ', rightSelect);
// // console.log('floorPlanesVertical: ', floorPlanesVertical);
// // console.log('planeIntersect.current: ', planeIntersect.current);
// // const intersect = raycaster.ray.intersectPlane(
// // floorPlanesVertical,
// // planeIntersect.current
// // );
// // console.log('intersect: ', intersect);
// let intersect = event.clientY
// if (intersect && typeof intersectcontextmenu === "number") {
// console.log('intersect: ', intersect);
// const diff = intersect - intersectcontextmenu;
// const unclampedY = selectedWidget.position[1] + diff;
// const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
// setintersectcontextmenu(intersect);
// const newPosition: [number, number, number] = [
// selectedWidget.position[0],
// newY,
// selectedWidget.position[2],
// ];
// console.log('newPosition: ', newPosition);
// updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
// }
// }
if (rightSelect === "Vertical Move") {
const intersect = raycaster.ray.intersectPlane(
floorPlanesVertical,
planeIntersect.current
);
if (lastClientY.current === null) {
lastClientY.current = event.clientY;
return;
}
if (intersect && typeof intersectcontextmenu === "number") {
const diff = intersect.y - intersectcontextmenu;
const unclampedY = selectedWidget.position[1] + diff;
const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
const diff = lastClientY.current - event.clientY; // dragging up = increase Y
const scaleFactor = 0.05; // tune this based on your scene scale
setintersectcontextmenu(intersect.y);
const unclampedY = selectedWidget.position[1] + diff * scaleFactor;
const newY = Math.max(0, unclampedY);
lastClientY.current = event.clientY;
const newPosition: [number, number, number] = [
selectedWidget.position[0],
@ -486,7 +521,6 @@ export default function Dropped3dWidgets() {
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
}
}
if (rightSelect?.startsWith("Rotate")) {
const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
@ -668,9 +702,12 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera);
const up = new THREE.Vector3(0, 1, 0);
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
const verticalPlane = new THREE.Plane(cameraDirection);
const right = new THREE.Vector3().crossVectors(up, cameraDirection).normalize();
const verticalPlane = new THREE.Plane(right, 0);
// const verticalPlane = new THREE.Plane(cameraDirection);
setFloorPlanesVertical(verticalPlane);
const intersectPoint = raycaster.ray.intersectPlane(

20
app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

@ -198,31 +198,31 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
useEffect(() => { }, [rotation]);
return (
<Html
// data
position={position}
scale={[0.5, 0.5, 0.5]}
rotation={rotation}
// class
wrapperClass="pointer-none"
// other
transform
sprite={true}
zIndexRange={[1, 0]}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out",
// }}
prepend
// sprite
distanceFactor={20}
// events
onDragOver={(e) => {
e.preventDefault();
e.stopPropagation();
}}
onDrop={(e) => {
e.preventDefault();
// e.stopPropagation();
}}
wrapperClass="pointer-none"
>
<div
className={`productionCapacity-wrapper card ${
selectedChartId?.id === id ? "activeChart" : ""
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}

12
app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
View File

@ -242,12 +242,12 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
rotation={rotation}
scale={[0.5, 0.5, 0.5]}
transform
sprite={true}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out",
// }}
zIndexRange={[1, 0]}
prepend
distanceFactor={20}
>
<div
className={`returnOfInvestment card ${

4
app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
View File

@ -121,7 +121,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite={true}
// sprite={true}
prepend
distanceFactor={20}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",

4
app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
View File

@ -223,7 +223,9 @@ const Throughput: React.FC<ThroughputProps> = ({
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite={true}
prepend
distanceFactor={20}
// sprite={true}
>
<div
className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""

1
app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@ -478,7 +478,6 @@ const DroppedObjects: React.FC = () => {
const widthMultiplier = parseFloat(containerWidth) * 0.13;
console.log('zone?.objects: ', zone?.objects);
return (
<div
onPointerMove={handlePointerMove}

2
app/src/modules/visualization/zone/DisplayZone.tsx
View File

@ -176,7 +176,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await getSelect2dZoneData(zoneId, organization);
console.log("response: ", response);
let res = await getFloatingZoneData(zoneId, organization);
console.log("res: ", res);

9
app/src/styles/components/lists.scss
View File

@ -85,3 +85,12 @@
margin-left: 20px;
}
}
.list-container.active {
.list-item {
background: var(--highlight-accent-color);
.input-value {
color: var(--highlight-text-color);
}
}
}

1
app/src/styles/components/simulation/simulation.scss
View File

@ -105,6 +105,7 @@
height: fit-content;
cursor: pointer;
transition: all 0.2s;
outline: 1px solid transparent;
&:hover {
outline: 1px solid var(--border-color);