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

Enhance MachineMechanics and InputWithDropDown components; add connections to path interfaces

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-03-27 12:24:15 +05:30
parent 6b92b6c235
commit 2dfd34f27b
8 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useState, useMemo } from "react";
import React, { useRef, useState, useMemo, useEffect } from "react";
import {
AddIcon,
InfoIcon,
@@ -325,10 +325,11 @@ const MachineMechanics: React.FC = () => {
}
};
const [selectedItem, setSelectedItem] = useState<{
type: "action" | "trigger";
item: any;
} | null>(null);
const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
useEffect(() => {
setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
}, [selectedActionSphere]);
return (
<div className="machine-mechanics-container">
@@ -479,18 +480,14 @@ const MachineMechanics: React.FC = () => {
{selectedItem.item.type === 'Spawn' && (
<InputWithDropDown
label="Spawn Interval"
value={selectedItem.item.spawnInterval === 'Inherit'
? undefined
: selectedItem.item.spawnInterval}
min={0}
defaultValue={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
value={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
onChange={(value) => {
const numValue = parseInt(value);
handleSpawnIntervalChange(
selectedItem.item.uuid,
!value ? 'Inherit' : numValue
);
handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
}}
/>
)}
</>
)}

7
app/src/components/ui/inputs/InputWithDropDown.tsx
View File

@@ -4,6 +4,8 @@ import RenameInput from "./RenameInput";
type InputWithDropDownProps = {
label: string;
value: string;
min?: number
defaultValue?: string;
options?: string[]; // Array of dropdown options
activeOption?: string; // The currently active dropdown option
onClick?: () => void;
@@ -15,6 +17,8 @@ type InputWithDropDownProps = {
const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
label,
value,
min,
defaultValue,
options,
activeOption,
onClick,
@@ -40,8 +44,9 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
)}
<div className="input default" id={separatedWords}>
<input
min={min}
type="number"
// defaultValue={value}
defaultValue={value}
onChange={(e) => {
onChange(e.target.value);
}}

10
app/src/modules/simulation/behaviour/behaviour.tsx
View File

@@ -3,7 +3,6 @@ import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes';
import { useEffect } from 'react';
interface Path {
modeluuid: string;
modelName: string;
@@ -13,7 +12,7 @@ interface Path {
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] } | [];
}[];
pathPosition: [number, number, number];
pathRotation: [number, number, number];
@@ -33,8 +32,8 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
const point2Position = new THREE.Vector3(0, 1.25, -3.3);
const point1UUID = THREE.MathUtils.generateUUID();
const point2UUID = THREE.MathUtils.generateUUID();
const middlePointUUID = THREE.MathUtils.generateUUID();
const point2UUID = THREE.MathUtils.generateUUID();
const newPath: Path = {
modeluuid: item.modeluuid,
@@ -46,6 +45,7 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
rotation: [0, 0, 0],
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
triggers: [],
connections: [],
},
{
uuid: middlePointUUID,
@@ -53,6 +53,7 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
rotation: [0, 0, 0],
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
triggers: [],
connections: [],
},
{
uuid: point2UUID,
@@ -60,6 +61,7 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
rotation: [0, 0, 0],
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
triggers: [],
connections: [],
},
],
pathPosition: [...item.position],
@@ -77,4 +79,4 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
return null;
}
export default Behaviour;
export default Behaviour;

9
app/src/modules/simulation/path/pathConnector.tsx
View File

@@ -2,11 +2,11 @@ import { useFrame, useThree } from '@react-three/fiber';
import React, { useEffect, useState } from 'react';
import * as THREE from 'three';
import { QuadraticBezierLine } from '@react-three/drei';
import { useConnections, useIsConnecting, useSimulationPaths } from '../../../store/store';
import { useConnections, useIsConnecting, useSimulationPaths } from '../../../store/store';
import useModuleStore from '../../../store/useModuleStore';
function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
const { activeModule } = useModuleStore();
const { activeModule } = useModuleStore();
const { gl, raycaster, scene, pointer, camera } = useThree();
const { connections, setConnections, addConnection } = useConnections();
const { isConnecting, setIsConnecting } = useIsConnecting();
@@ -232,8 +232,9 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
return (
<>
{connections.map((connection, index) => {
const fromSphere = scene.getObjectByProperty('uuid', connection.fromUUID);
const toSphere = scene.getObjectByProperty('uuid', connection.toConnections[0].toUUID);
if (!pathsGroupRef.current) return;
const fromSphere = pathsGroupRef.current.getObjectByProperty('uuid', connection.fromUUID);
const toSphere = pathsGroupRef.current.getObjectByProperty('uuid', connection.toConnections[0].toUUID);
if (fromSphere && toSphere) {
const fromWorldPosition = new THREE.Vector3();

1
app/src/modules/simulation/path/pathCreation.tsx
View File

@@ -14,6 +14,7 @@ interface Path {
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] } | [];
}[];
pathPosition: [number, number, number];
pathRotation: [number, number, number];

2
app/src/modules/simulation/simulation.tsx
View File

@@ -32,9 +32,9 @@ function Simulation() {
return (
<>
<Behaviour setSimulationPaths={setSimulationPaths} />
{activeModule === 'simulation' && (
<>
<Behaviour setSimulationPaths={setSimulationPaths} />
<PathCreation pathsGroupRef={pathsGroupRef} />
<PathConnector pathsGroupRef={pathsGroupRef} />
</>

2
app/src/pages/Project.tsx
View File

@@ -55,7 +55,7 @@ const Project: React.FC = () => {
<SideBarRight />
<RealTimeVisulization />
{activeModule !== "market" && <Tools />}
<SimulationUI />
{/* <SimulationUI /> */}
</div>
);
};

1
app/src/store/store.ts
View File

@@ -307,6 +307,7 @@ interface Path {
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] } | [];
}[];
pathPosition: [number, number, number];
pathRotation: [number, number, number];