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

Merge remote-tracking branch 'origin/v2-ui' into v2

This commit is contained in:
Jerald-Golden-B 2025-05-10 16:27:15 +05:30
parent 9746cfdf80 07ce17fe84
commit e16a0a6d8b
10 changed files with 704 additions and 601 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
View File

@ -1,24 +1,27 @@
import React from "react";
import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
interface PickAndPlaceActionProps {
pickPointValue: string;
pickPointOnChange: (value: string) => void;
placePointValue: string;
placePointOnChange: (value: string) => void;
clearPoints: () => void;
}
const PickAndPlaceAction: React.FC<PickAndPlaceActionProps> = ({
pickPointValue,
pickPointOnChange,
placePointValue,
placePointOnChange,
clearPoints,
}) => {
return (
<>
<EyeDropInput label="Pick Point" value={pickPointValue} onChange={pickPointOnChange} />
<EyeDropInput label="Unload Point" value={placePointValue} onChange={placePointOnChange} />
</>
<div className="selected-actions-list">
<div className="value-field-container">
<div className="label">Reset</div>
<button
type="button"
className="regularDropdown-container"
onClick={() => {
clearPoints();
}}
>
Clear
</button>
</div>
</div>
);
};

22
app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx
View File

@ -25,6 +25,7 @@ interface TravelActionProps {
value: string;
onChange: (value: string) => void;
};
clearPoints: () => void;
}
const TravelAction: React.FC<TravelActionProps> = ({
@ -32,6 +33,7 @@ const TravelAction: React.FC<TravelActionProps> = ({
unloadDuration,
pickPoint,
unloadPoint,
clearPoints,
}) => {
return (
<>
@ -41,9 +43,9 @@ const TravelAction: React.FC<TravelActionProps> = ({
min={loadCapacity.min}
max={loadCapacity.max}
defaultValue={loadCapacity.defaultValue}
step={0.1}
step={1}
activeOption="s"
onClick={() => { }}
onClick={() => {}}
onChange={loadCapacity.onChange}
/>
<InputWithDropDown
@ -54,9 +56,23 @@ const TravelAction: React.FC<TravelActionProps> = ({
defaultValue={unloadDuration.defaultValue}
step={0.1}
activeOption="s"
onClick={() => { }}
onClick={() => {}}
onChange={unloadDuration.onChange}
/>
<div className="selected-actions-list">
<div className="value-field-container">
<div className="label">Reset</div>
<button
type="button"
className="regularDropdown-container"
onClick={() => {
clearPoints();
}}
>
Clear
</button>
</div>
</div>
{pickPoint && (
<EyeDropInput
label="Pick Point"

142
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
View File

@ -4,22 +4,38 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
import RenameInput from "../../../../../ui/inputs/RenameInput";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
import {
useSelectedEventData,
useSelectedProduct,
useSelectedAction,
} from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import PickAndPlaceAction from "../actions/PickAndPlaceAction";
import ActionsList from "../components/ActionsList";
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function RoboticArmMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">(
"default"
);
const [selectedPointData, setSelectedPointData] = useState<
RoboticArmPointSchema | undefined
>();
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, getEventByModelUuid, getActionByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
const {
getPointByUuid,
getEventByModelUuid,
updateEvent,
updateAction,
addAction,
removeAction,
} = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
const { selectedAction, setSelectedAction, clearSelectedAction } =
useSelectedAction();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
useEffect(() => {
if (selectedEventData) {
@ -31,8 +47,13 @@ function RoboticArmMechanics() {
if (point?.actions) {
setSelectedPointData(point);
if (point.actions.length > 0) {
setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
setActiveOption(
point.actions[0].actionType as "default" | "pickAndPlace"
);
setSelectedAction(
point.actions[0].actionUuid,
point.actions[0].actionName
);
}
}
} else {
@ -50,17 +71,23 @@ function RoboticArmMechanics() {
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData
})
}
eventDatas: eventData,
});
};
const handleRenameAction = (newName: string) => {
if (!selectedAction.actionId) return;
const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName });
const event = updateAction(
selectedProduct.productId,
selectedAction.actionId,
{ actionName: newName }
);
if (selectedPointData) {
const updatedActions = selectedPointData.actions.map((action) =>
action.actionUuid === selectedAction.actionId ? { ...action, actionName: newName } : action
action.actionUuid === selectedAction.actionId
? { ...action, actionName: newName }
: action
);
setSelectedPointData({
...selectedPointData,
@ -80,9 +107,13 @@ function RoboticArmMechanics() {
const handleSpeedChange = (value: string) => {
if (!selectedEventData) return;
const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
const event = updateEvent(
selectedProduct.productId,
selectedEventData.data.modelUuid,
{
speed: parseFloat(value),
});
}
);
if (event) {
updateBackend(
@ -93,17 +124,19 @@ function RoboticArmMechanics() {
);
}
};
const handlePickPointChange = (value: string) => {
const handleClearPoints = () => {
if (!selectedAction.actionId || !selectedPointData) return;
const [x, y, z] = value.split(",").map(Number);
const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
const event = updateAction(
selectedProduct.productId,
selectedAction.actionId,
{
process: {
startPoint: [x, y, z] as [number, number, number],
endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
startPoint: null,
endPoint: null,
},
});
}
);
if (event) {
updateBackend(
@ -115,28 +148,6 @@ function RoboticArmMechanics() {
}
};
const handlePlacePointChange = (value: string) => {
if (!selectedAction.actionId || !selectedPointData) return;
const [x, y, z] = value.split(",").map(Number);
const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
process: {
startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
endPoint: [x, y, z] as [number, number, number],
},
});
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
};
const handleAddAction = () => {
if (!selectedEventData || !selectedPointData) return;
@ -189,8 +200,12 @@ function RoboticArmMechanics() {
);
}
const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid);
const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
const index = selectedPointData.actions.findIndex(
(a) => a.actionUuid === actionUuid
);
const newActions = selectedPointData.actions.filter(
(a) => a.actionUuid !== actionUuid
);
const updatedPoint = {
...selectedPointData,
@ -213,11 +228,17 @@ function RoboticArmMechanics() {
options: ["pickAndPlace"],
};
const currentSpeed = (getEventByModelUuid(
selectedProduct.productId, selectedEventData?.data.modelUuid || ""
) as RoboticArmEventSchema | undefined)?.speed?.toString() || "0.5";
const currentSpeed =
(
getEventByModelUuid(
selectedProduct.productId,
selectedEventData?.data.modelUuid || ""
) as RoboticArmEventSchema | undefined
)?.speed?.toString() || "0.5";
const currentAction = selectedPointData?.actions.find((a) => a.actionUuid === selectedAction.actionId);
const currentAction = selectedPointData?.actions.find(
(a) => a.actionUuid === selectedAction.actionId
);
const currentPickPoint = currentAction?.process.startPoint
? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
@ -239,14 +260,13 @@ function RoboticArmMechanics() {
defaultValue={"0.5"}
max={10}
activeOption="m/s"
onClick={() => { }}
onClick={() => {}}
onChange={handleSpeedChange}
/>
</div>
</div>
</div>
<section>
<ActionsList
selectedPointData={selectedPointData}
multipleAction
@ -258,7 +278,7 @@ function RoboticArmMechanics() {
<div className="selected-actions-details">
<div className="selected-actions-header">
<RenameInput
value={selectedAction.actionName || ''}
value={selectedAction.actionName || ""}
onRename={handleRenameAction}
/>
</div>
@ -266,18 +286,16 @@ function RoboticArmMechanics() {
<LabledDropdown
defaultOption={activeOption}
options={availableActions.options}
onSelect={() => { }}
onSelect={() => {}}
disabled={true}
/>
<PickAndPlaceAction
pickPointValue={currentPickPoint}
pickPointOnChange={handlePickPointChange}
placePointValue={currentPlacePoint}
placePointOnChange={handlePlacePointChange}
/>
<PickAndPlaceAction clearPoints={handleClearPoints} />
</div>
<div className="tirgger">
<Trigger selectedPointData={selectedPointData as any} type={'RoboticArm'} />
<Trigger
selectedPointData={selectedPointData as any}
type={"RoboticArm"}
/>
</div>
</div>
)}

126
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
View File

@ -6,26 +6,34 @@ import Trigger from "../trigger/Trigger";
import {
useSelectedAction,
useSelectedEventData,
useSelectedEventSphere,
useSelectedProduct,
} from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import TravelAction from "../actions/TravelAction";
import ActionsList from "../components/ActionsList";
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
import { useVehicleStore } from "../../../../../../store/simulation/useVehicleStore";
function VehicleMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
const [activeOption, setActiveOption] = useState<"default" | "travel">(
"default"
);
const [selectedPointData, setSelectedPointData] = useState<
VehiclePointSchema | undefined
>();
const { selectedEventData } = useSelectedEventData();
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } =
useProductStore();
const { selectedProduct } = useSelectedProduct();
const { setSelectedAction, clearSelectedAction } = useSelectedAction();
const { getVehicleById } = useVehicleStore();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
useEffect(() => {
if (selectedEventData && selectedEventData.data.type === 'vehicle') {
if (selectedEventData && selectedEventData.data.type === "vehicle") {
const point = getPointByUuid(
selectedProduct.productId,
selectedEventData.data.modelUuid,
@ -52,15 +60,19 @@ function VehicleMechanics() {
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData
})
}
eventDatas: eventData,
});
};
const handleSpeedChange = (value: string) => {
if (!selectedEventData) return;
const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
const event = updateEvent(
selectedProduct.productId,
selectedEventData.data.modelUuid,
{
speed: parseFloat(value),
});
}
);
if (event) {
updateBackend(
@ -77,9 +89,13 @@ function VehicleMechanics() {
const validOption = option as "travel";
setActiveOption(validOption);
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
const event = updateAction(
selectedProduct.productId,
selectedPointData.action.actionUuid,
{
actionType: validOption,
});
}
);
if (event) {
updateBackend(
@ -93,7 +109,11 @@ function VehicleMechanics() {
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
const event = updateAction(
selectedProduct.productId,
selectedPointData.action.actionUuid,
{ actionName: newName }
);
if (event) {
updateBackend(
@ -107,9 +127,13 @@ function VehicleMechanics() {
const handleLoadCapacityChange = (value: string) => {
if (!selectedPointData) return;
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
const event = updateAction(
selectedProduct.productId,
selectedPointData.action.actionUuid,
{
loadCapacity: parseFloat(value),
});
}
);
if (event) {
updateBackend(
@ -123,9 +147,13 @@ function VehicleMechanics() {
const handleUnloadDurationChange = (value: string) => {
if (!selectedPointData) return;
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
const event = updateAction(
selectedProduct.productId,
selectedPointData.action.actionUuid,
{
unLoadDuration: parseFloat(value),
});
}
);
if (event) {
updateBackend(
@ -147,9 +175,13 @@ function VehicleMechanics() {
// Get current values from store
const currentSpeed = (getEventByModelUuid(
selectedProduct.productId, selectedEventData?.data.modelUuid || ""
) as VehicleEventSchema | undefined)?.speed?.toString() || "0.5";
const currentSpeed =
(
getEventByModelUuid(
selectedProduct.productId,
selectedEventData?.data.modelUuid || ""
) as VehicleEventSchema | undefined
)?.speed?.toString() || "0.5";
const currentActionName = selectedPointData
? selectedPointData.action.actionName
@ -163,9 +195,45 @@ function VehicleMechanics() {
? selectedPointData.action.unLoadDuration.toString()
: "1";
const currentPickPoint = selectedPointData?.action.pickUpPoint;
const { selectedEventSphere } = useSelectedEventSphere();
const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
function handleClearPoints() {
const updatedVehicle = getVehicleById(
selectedEventSphere?.userData.modelUuid
);
if (
!selectedProduct?.productId ||
!selectedEventSphere?.userData?.modelUuid ||
!updatedVehicle?.point
)
return;
const event = updateEvent(
selectedProduct.productId,
selectedEventSphere.userData.modelUuid,
{
point: {
...updatedVehicle.point,
action: {
...updatedVehicle.point?.action,
pickUpPoint: null,
unLoadPoint: null,
steeringAngle: 0,
},
},
}
);
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
}
const availableActions = {
defaultOption: "travel",
@ -187,16 +255,14 @@ function VehicleMechanics() {
defaultValue={"0.5"}
max={10}
activeOption="m/s"
onClick={() => { }}
onClick={() => {}}
onChange={handleSpeedChange}
/>
</div>
</div>
</div>
<section>
<ActionsList
selectedPointData={selectedPointData}
/>
<ActionsList selectedPointData={selectedPointData} />
<div className="selected-actions-details">
<div className="selected-actions-header">
<RenameInput
@ -227,6 +293,7 @@ function VehicleMechanics() {
defaultValue: "1",
onChange: handleUnloadDurationChange,
}}
clearPoints={handleClearPoints}
// pickPoint={{
// value: currentPickPoint,
// onChange: handlePickPointChange,
@ -240,7 +307,10 @@ function VehicleMechanics() {
</div>
</div>
<div className="tirgger">
<Trigger selectedPointData={selectedPointData as any} type={'Vehicle'} />
<Trigger
selectedPointData={selectedPointData as any}
type={"Vehicle"}
/>
</div>
</section>
</>

18
app/src/components/ui/inputs/EyeDropInput.tsx
View File

@ -1,21 +1,18 @@
import React from "react";
import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
import RegularDropDown from "./RegularDropDown";
interface EyeDropInputProps {
label: string;
value: string;
onChange: (value: string) => void;
options?: string[];
}
const EyeDropInput: React.FC<EyeDropInputProps> = ({
label = "Object",
value,
onChange,
}) => {
const handleEyeDropClick = () => {
// Here you would typically implement the eye dropper functionality
// For now, we'll just simulate selecting a value
const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
onChange(simulatedValue);
};
@ -24,15 +21,12 @@ const EyeDropInput: React.FC<EyeDropInputProps> = ({
<div className="eye-dropper-input-container">
<div className="label">{label}</div>
<div className="input-container">
{/* <input disabled type="text" /> */}
<RegularDropDown
header="select object"
options={[]}
onSelect={() => { }}
/>
<div className="eye-picker-button" onClick={handleEyeDropClick}>
<input disabled type="text" value={value}/>
{/* <input type="text" value={activeValue ?? "null"} disabled /> */}
{/* <input type="button" value="Clear" onClick={handleEyeDropClick}/> */}
<button className="eye-picker-button" onClick={handleEyeDropClick}>
<EyeDroperIcon isActive={false} />
</div>
</button>
</div>
</div>
);

7
app/src/components/ui/simulation/AssetDetailsCard.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from "react";
import {
CartBagIcon,
ExpandIcon,
IndicationArrow,
SimulationStatusIcon,
@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
<div className="value-container">
<div className="progress-bar">
{[...Array(5)].map((_, i) => {
const percentage = (count ?? 0 / totalCapacity) * 100;
const percentage = (count! / totalCapacity) * 100;
const start = i * 20;
const end = (i + 1) * 20;
// fill amount: 0 to 100
@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
fillPercent = ((percentage - start) / 20) * 100;
}
return (
<div key={i} className="block">
<div key={`block-${i}-${start}-${end}`} className="block">
<div
className="fill"
style={
@ -134,7 +133,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
})}
</div>
<div className="value">
{Math.round((count ?? 0 / totalCapacity) * 100).toString()}%
{Math.round((count! / totalCapacity) * 100).toString()}%
</div>
</div>
</div>

4
app/src/modules/simulation/spatialUI/arm/armBotUI.tsx
View File

@ -3,6 +3,7 @@ import { useSelectedAction, useSelectedEventSphere, useSelectedProduct } from '.
import { useGLTF } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useProductStore } from '../../../../store/simulation/useProductStore';
import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
import PickDropPoints from './PickDropPoints';
import useDraggableGLTF from './useDraggableGLTF';
import * as THREE from 'three';
@ -23,6 +24,7 @@ const ArmBotUI = () => {
const { selectedProduct } = useSelectedProduct();
const { scene } = useThree();
const { selectedAction } = useSelectedAction();
const { armBots } = useArmBotStore();
const armUiPick = useGLTF(armPick) as any;
const armUiDrop = useGLTF(armDrop) as any;
@ -73,7 +75,7 @@ const ArmBotUI = () => {
}
}
}
}, [selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
}, [armBots, selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
function getDefaultPositions(modelUuid: string): Positions {
const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid);

4
app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx
View File

@ -23,7 +23,7 @@ const VehicleUI = () => {
const prevMousePos = useRef({ x: 0, y: 0 });
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedProduct } = useSelectedProduct();
const { getVehicleById } = useVehicleStore();
const { vehicles, getVehicleById } = useVehicleStore();
const { updateEvent } = useProductStore();
const [startPosition, setStartPosition] = useState<[number, number, number]>([
0, 1, 0,
@ -144,7 +144,7 @@ const VehicleUI = () => {
setSteeringRotation([0, steeringAngle, 0]);
}
}, 10);
}, [selectedEventSphere, outerGroup.current]);
}, [selectedEventSphere, outerGroup.current, vehicles]);
const handlePointerDown = (
e: any,

2
app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx
View File

@ -58,7 +58,7 @@ const MaterialAnimator = ({
}, [storageModel, storage.currentMaterials]);
return (
<group position={[0, -padding, 0]}>
<group {...{ position: [0, -padding, 0] }}>
{hasLoad &&
storage.currentMaterials.map((mat, index) => (
<MaterialModel

9
app/src/styles/layout/sidebar.scss
View File

@ -271,6 +271,7 @@
height: calc(100% - 16px);
max-height: 46vh;
overflow: auto;
margin: 0;
}
}
}
@ -454,7 +455,6 @@
height: calc(100% - 36px);
position: relative;
width: 304px;
padding-bottom: 10px;
.no-event-selected {
color: #666;
@ -780,8 +780,9 @@
.simulations-container,
.event-proprties-wrapper {
position: relative;
max-height: calc(60vh - (47px - 35px));
max-height: calc(62vh - (47px - 35px));
width: 304px;
border-radius: #{$border-radius-large};
overflow-x: hidden;
.header {
@ -1175,8 +1176,8 @@
}
.analysis-content-container {
min-height: 50vh;
max-height: 60vh;
min-height: 48vh;
max-height: 56vh;
overflow-y: auto;
.dropdown-header-container,