v2-ui #84

Merged
Vishnu merged 53 commits from v2-ui into main 2025-05-10 13:42:19 +00:00
11 changed files with 59 additions and 39 deletions
Showing only changes of commit 25697f99a3 - Show all commits

View File

@ -8,7 +8,7 @@ import SwapAction from "../actions/SwapAction";
import SpawnAction from "../actions/SpawnAction";
import DefaultAction from "../actions/DefaultAction";
import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useSelectedAction, useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import ActionsList from "../components/ActionsList";
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
@ -19,6 +19,7 @@ function ConveyorMechanics() {
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { setSelectedAction, clearSelectedAction } = useSelectedAction();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
@ -33,9 +34,12 @@ function ConveyorMechanics() {
if (point && "action" in point) {
setSelectedPointData(point);
setActiveOption(point.action.actionType as | "default" | "spawn" | "swap" | "delay" | "despawn");
setSelectedAction(point.action.actionUuid, point.action.actionName);
}
} else {
clearSelectedAction();
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
}, [selectedProduct, selectedEventData]);
const updateBackend = (
productName: string,

View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import RenameInput from "../../../../../ui/inputs/RenameInput";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useSelectedAction, useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import ProcessAction from "../actions/ProcessAction";
import ActionsList from "../components/ActionsList";
@ -14,6 +14,7 @@ function MachineMechanics() {
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { setSelectedAction, clearSelectedAction } = useSelectedAction();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
@ -28,9 +29,12 @@ function MachineMechanics() {
if (point && "action" in point) {
setSelectedPointData(point);
setActiveOption(point.action.actionType as "process");
setSelectedAction(point.action.actionUuid, point.action.actionName);
}
} else {
clearSelectedAction();
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
}, [selectedProduct, selectedEventData]);
const updateBackend = (
productName: string,
@ -137,7 +141,7 @@ function MachineMechanics() {
</div>
</div>
<div className="tirgger">
<Trigger selectedPointData={selectedPointData as any} type= {'Machine'} />
<Trigger selectedPointData={selectedPointData as any} type={'Machine'} />
</div>
</section>
)}

View File

@ -258,7 +258,7 @@ function RoboticArmMechanics() {
<div className="selected-actions-details">
<div className="selected-actions-header">
<RenameInput
value={selectedAction.actionName}
value={selectedAction.actionName || ''}
onRename={handleRenameAction}
/>
</div>

View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import RenameInput from "../../../../../ui/inputs/RenameInput";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useSelectedAction, useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import StorageAction from "../actions/StorageAction";
import ActionsList from "../components/ActionsList";
@ -14,6 +14,7 @@ function StorageMechanics() {
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { setSelectedAction, clearSelectedAction } = useSelectedAction();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
@ -28,9 +29,12 @@ function StorageMechanics() {
if (point && "action" in point) {
setSelectedPointData(point);
setActiveOption(point.action.actionType as "store" | "spawn");
setSelectedAction(point.action.actionUuid, point.action.actionName);
}
} else {
clearSelectedAction();
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
}, [selectedProduct, selectedEventData]);
const updateBackend = (
productName: string,
@ -146,7 +150,7 @@ function StorageMechanics() {
</div>
</div>
<div className="tirgger">
<Trigger selectedPointData={selectedPointData as any} type= {'StorageUnit'} />
<Trigger selectedPointData={selectedPointData as any} type={'StorageUnit'} />
</div>
</section>
)}

View File

@ -4,6 +4,7 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import Trigger from "../trigger/Trigger";
import {
useSelectedAction,
useSelectedEventData,
useSelectedProduct,
} from "../../../../../../store/simulation/useSimulationStore";
@ -18,6 +19,7 @@ function VehicleMechanics() {
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { setSelectedAction, clearSelectedAction } = useSelectedAction();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
@ -33,9 +35,12 @@ function VehicleMechanics() {
if (point) {
setSelectedPointData(point);
setActiveOption(point.action.actionType as "travel");
setSelectedAction(point.action.actionUuid, point.action.actionName);
}
} else {
clearSelectedAction();
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
}, [selectedProduct, selectedEventData]);
const updateBackend = (
productName: string,
@ -235,7 +240,7 @@ function VehicleMechanics() {
</div>
</div>
<div className="tirgger">
<Trigger selectedPointData={selectedPointData as any} type= {'Vehicle'} />
<Trigger selectedPointData={selectedPointData as any} type={'Vehicle'} />
</div>
</section>
</>

View File

@ -37,7 +37,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
actionUuid = (selectedPointData as ConveyorPointSchema | VehiclePointSchema | MachinePointSchema | StoragePointSchema).action?.actionUuid;
} else if (type === 'RoboticArm' && selectedAction) {
} else if (type === 'RoboticArm' && selectedAction && selectedAction.actionId) {
actionUuid = selectedAction.actionId;
}

View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { useSubModuleStore } from "../../../../store/useModuleStore";
import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
import { useSelectedAction, useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
@ -22,7 +22,7 @@ interface ConnectionLine {
function TriggerConnector() {
const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore();
const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getPointUuidByActionUuid, getProductById } = useProductStore();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const { selectedProduct } = useSelectedProduct();
const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
@ -31,6 +31,7 @@ function TriggerConnector() {
const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3; end: THREE.Vector3; mid: THREE.Vector3; } | null>(null);
const { deleteTool } = useDeleteTool();
const { isPlaying } = usePlayButtonStore();
const { selectedAction } = useSelectedAction();
const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
productId: string;
@ -50,7 +51,7 @@ function TriggerConnector() {
organization: string,
eventData: EventsSchema
) => {
const data =upsertProductOrEventApi({
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
@ -201,6 +202,7 @@ function TriggerConnector() {
);
const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
const clickedPointUuid = getPointUuidByActionUuid(selectedProduct.productId, selectedAction.actionId || '');
if (!point || !event) {
setFirstSelectedPoint(null);
@ -215,11 +217,12 @@ function TriggerConnector() {
}
if (!firstSelectedPoint) {
if (point.uuid !== clickedPointUuid) return;
setFirstSelectedPoint({
productId: selectedProduct.productId,
modelUuid,
pointUuid,
actionUuid
actionUuid: selectedAction.actionId || ''
});
} else {
const trigger: TriggerSchema = {
@ -323,11 +326,13 @@ function TriggerConnector() {
}
};
if (subModule === 'simulations' && !deleteTool) {
if (subModule === 'mechanics' && !deleteTool && selectedAction.actionId && selectedAction.actionName) {
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
canvasElement.addEventListener('contextmenu', handleRightClick);
} else {
setFirstSelectedPoint(null);
}
return () => {
@ -337,8 +342,7 @@ function TriggerConnector() {
canvasElement.removeEventListener('contextmenu', handleRightClick);
};
}, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool]);
}, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool, selectedAction]);
useFrame(() => {
if (firstSelectedPoint) {

View File

@ -1,7 +1,7 @@
import React from 'react'
import TriggerConnector from './connector/triggerConnector'
function Trigger() {
return (
<>

View File

@ -133,8 +133,6 @@ export function useTriggerHandler() {
if (armBot.isActive === false && armBot.state === 'idle') {
setIsPaused(material.materialId, true);
// Handle current action from arm bot
handleAction(action, materialId);
@ -265,6 +263,7 @@ export function useTriggerHandler() {
if (materialId && trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
const material = getMaterialById(materialId);
if (material) {
setIsPaused(material.materialId, false);
setPreviousLocation(material.materialId, {
@ -357,18 +356,6 @@ export function useTriggerHandler() {
const action = getActionByUuid(selectedProduct.productId, trigger.triggeredAsset.triggeredAction.actionUuid);
const vehicle = getVehicleById(trigger.triggeredAsset?.triggeredModel.modelUuid);
setPreviousLocation(material.materialId, {
modelUuid: material.current.modelUuid,
pointUuid: material.current.pointUuid,
actionUuid: material.current.actionUuid,
})
setCurrentLocation(material.materialId, {
modelUuid: trigger.triggeredAsset.triggeredModel.modelUuid,
pointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
setNextLocation(material.materialId, null);
if (action) {
@ -379,6 +366,18 @@ export function useTriggerHandler() {
setIsVisible(materialId, false);
setPreviousLocation(material.materialId, {
modelUuid: material.current.modelUuid,
pointUuid: material.current.pointUuid,
actionUuid: material.current.actionUuid,
})
setCurrentLocation(material.materialId, {
modelUuid: trigger.triggeredAsset.triggeredModel.modelUuid,
pointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
// Handle current action from vehicle
handleAction(action, materialId);

View File

@ -53,7 +53,7 @@ const ArmBotUI = () => {
if (selectedEventSphere) {
const selectedArmBot = getEventByModelUuid(selectedProduct.productId, selectedEventSphere.userData.modelUuid);
if (selectedArmBot?.type === "roboticArm") {
if (selectedArmBot?.type === "roboticArm" && selectedAction.actionId) {
setSelectedArmBotData(selectedArmBot);
const defaultPositions = getDefaultPositions(selectedArmBot.modelUuid);
const matchingAction = getActionByUuid(selectedProduct.productId, selectedAction.actionId);

View File

@ -93,14 +93,14 @@ export const useSelectedProduct = create<SelectedProductState>()(
);
interface SelectedActionState {
selectedAction: { actionId: string; actionName: string };
selectedAction: { actionId: string | null; actionName: string | null };
setSelectedAction: (actionId: string, actionName: string) => void;
clearSelectedAction: () => void;
}
export const useSelectedAction = create<SelectedActionState>()(
immer((set) => ({
selectedAction: { actionId: '', actionName: '' },
selectedAction: { actionId: null, actionName: null },
setSelectedAction: (actionId, actionName) => {
set((state) => {
state.selectedAction.actionId = actionId;
@ -109,8 +109,8 @@ export const useSelectedAction = create<SelectedActionState>()(
},
clearSelectedAction: () => {
set((state) => {
state.selectedAction.actionId = '';
state.selectedAction.actionName = '';
state.selectedAction.actionId = null;
state.selectedAction.actionName = null;
});
},
}))