Initial commit
This commit is contained in:
379
App.tsx
Normal file
379
App.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Canvas, useFrame } from '@react-three/fiber';
|
||||
import { OrbitControls, Grid } from '@react-three/drei';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import { IOPanel } from './components/IOPanel';
|
||||
import { LadderEditor } from './components/LadderEditor';
|
||||
import {
|
||||
SimObject, ObjectType, AxisObject, CylinderObject, SwitchObject, LedObject,
|
||||
IOLogicRule, LogicCondition, LogicAction, ProjectData
|
||||
} from './types';
|
||||
import { EditableObject } from './components/SceneObjects';
|
||||
import { Layout as LayoutIcon, Cpu, Play, Pause, Square } from 'lucide-react';
|
||||
|
||||
// --- Simulation Manager (PLC Scan Cycle) ---
|
||||
const SimulationLoop = ({
|
||||
isPlaying,
|
||||
objects,
|
||||
setObjects,
|
||||
logicRules,
|
||||
manualInputs,
|
||||
manualOutputs,
|
||||
setInputs,
|
||||
setOutputs
|
||||
}: {
|
||||
isPlaying: boolean,
|
||||
objects: SimObject[],
|
||||
setObjects: React.Dispatch<React.SetStateAction<SimObject[]>>,
|
||||
logicRules: IOLogicRule[],
|
||||
manualInputs: boolean[],
|
||||
manualOutputs: boolean[],
|
||||
setInputs: (inputs: boolean[]) => void,
|
||||
setOutputs: (outputs: boolean[]) => void
|
||||
}) => {
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (!isPlaying) return;
|
||||
|
||||
// --- 1. PLC Input Scan (Physical + Manual Force) ---
|
||||
const sensorInputs = new Array(16).fill(false);
|
||||
objects.forEach(obj => {
|
||||
if (obj.type === ObjectType.SWITCH && (obj as SwitchObject).isOn) {
|
||||
const port = (obj as SwitchObject).inputPort;
|
||||
if (port >= 0 && port < 16) sensorInputs[port] = true;
|
||||
}
|
||||
if ((obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) && (obj as AxisObject).triggers) {
|
||||
const axis = obj as AxisObject;
|
||||
axis.triggers.forEach(trig => {
|
||||
const met = trig.condition === '>' ? axis.currentValue > trig.position : axis.currentValue < trig.position;
|
||||
if (met && trig.targetInputPort >= 0 && trig.targetInputPort < 16) sensorInputs[trig.targetInputPort] = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const effectiveInputs = sensorInputs.map((bit, i) => bit || manualInputs[i]);
|
||||
setInputs(effectiveInputs);
|
||||
|
||||
// --- 2. PLC Logic Execution ---
|
||||
const logicOutputs = new Array(16).fill(false);
|
||||
logicRules.forEach(rule => {
|
||||
if (!rule.enabled) return;
|
||||
const inputState = effectiveInputs[rule.inputPort];
|
||||
const conditionMet = rule.condition === LogicCondition.IS_ON ? inputState : !inputState;
|
||||
if (conditionMet && rule.action === LogicAction.SET_ON) {
|
||||
logicOutputs[rule.outputPort] = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Effective Outputs = Logic OR Manual Force
|
||||
const effectiveOutputs = logicOutputs.map((bit, i) => bit || manualOutputs[i]);
|
||||
setOutputs(effectiveOutputs);
|
||||
|
||||
// --- 3. Physical Update Scan ---
|
||||
setObjects(prevObjects => {
|
||||
let hasChanges = false;
|
||||
const newObjects = prevObjects.map(obj => {
|
||||
let newObj = { ...obj };
|
||||
let changed = false;
|
||||
|
||||
if (obj.type === ObjectType.LED) {
|
||||
const led = obj as LedObject;
|
||||
const shouldBeOn = effectiveOutputs[led.outputPort];
|
||||
if (led.isOn !== shouldBeOn) {
|
||||
newObj = { ...led, isOn: shouldBeOn };
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
else if (obj.type === ObjectType.CYLINDER) {
|
||||
const cyl = obj as CylinderObject;
|
||||
const shouldExtend = effectiveOutputs[cyl.outputPort];
|
||||
const targetPos = shouldExtend ? cyl.stroke : 0;
|
||||
if (Math.abs(cyl.currentPosition - targetPos) > 0.01) {
|
||||
const step = cyl.speed * delta * 5;
|
||||
if (cyl.currentPosition < targetPos) {
|
||||
newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.min(targetPos, cyl.currentPosition + step) };
|
||||
} else {
|
||||
newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.max(targetPos, cyl.currentPosition - step) };
|
||||
}
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
else if (obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) {
|
||||
const axis = obj as AxisObject;
|
||||
if (axis.currentValue !== axis.targetValue) {
|
||||
const diff = axis.targetValue - axis.currentValue;
|
||||
const step = axis.speed * delta * 10;
|
||||
if (Math.abs(diff) < step) {
|
||||
newObj = { ...axis, currentValue: axis.targetValue };
|
||||
} else {
|
||||
newObj = { ...axis, currentValue: axis.currentValue + Math.sign(diff) * step };
|
||||
}
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (changed) hasChanges = true;
|
||||
return newObj;
|
||||
});
|
||||
return hasChanges ? newObjects : prevObjects;
|
||||
});
|
||||
});
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const [activeView, setActiveView] = useState<'layout' | 'logic'>('layout');
|
||||
const [objects, setObjects] = useState<SimObject[]>([]);
|
||||
const [logicRules, setLogicRules] = useState<IOLogicRule[]>([]);
|
||||
|
||||
const [inputs, setInputs] = useState<boolean[]>(new Array(16).fill(false));
|
||||
const [outputs, setOutputs] = useState<boolean[]>(new Array(16).fill(false));
|
||||
const [manualInputs, setManualInputs] = useState<boolean[]>(new Array(16).fill(false));
|
||||
const [manualOutputs, setManualOutputs] = useState<boolean[]>(new Array(16).fill(false));
|
||||
|
||||
const [inputNames, setInputNames] = useState<string[]>(new Array(16).fill(''));
|
||||
const [outputNames, setOutputNames] = useState<string[]>(new Array(16).fill(''));
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPlaying) {
|
||||
setObjects(prev => prev.map(obj => {
|
||||
if (obj.type === ObjectType.LED) {
|
||||
const led = obj as LedObject;
|
||||
return { ...led, isOn: manualOutputs[led.outputPort] };
|
||||
}
|
||||
if (obj.type === ObjectType.CYLINDER) {
|
||||
const cyl = obj as CylinderObject;
|
||||
const extended = manualOutputs[cyl.outputPort];
|
||||
return { ...cyl, extended, currentPosition: extended ? cyl.stroke : 0 };
|
||||
}
|
||||
return obj;
|
||||
}));
|
||||
setInputs([...manualInputs]);
|
||||
setOutputs([...manualOutputs]);
|
||||
}
|
||||
}, [manualInputs, manualOutputs, isPlaying]);
|
||||
|
||||
const handleUpdatePortName = (type: 'input' | 'output', index: number, name: string) => {
|
||||
if (type === 'input') {
|
||||
const next = [...inputNames]; next[index] = name; setInputNames(next);
|
||||
} else {
|
||||
const next = [...outputNames]; next[index] = name; setOutputNames(next);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleManualInput = (index: number) => {
|
||||
const next = [...manualInputs]; next[index] = !next[index]; setManualInputs(next);
|
||||
};
|
||||
|
||||
const handleToggleManualOutput = (index: number) => {
|
||||
const next = [...manualOutputs]; next[index] = !next[index]; setManualOutputs(next);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setIsPlaying(false);
|
||||
setManualInputs(new Array(16).fill(false));
|
||||
setManualOutputs(new Array(16).fill(false));
|
||||
setObjects(prev => prev.map(o => {
|
||||
if(o.type === ObjectType.AXIS_LINEAR || o.type === ObjectType.AXIS_ROTARY) return {...o, currentValue: (o as AxisObject).min, targetValue: (o as AxisObject).min};
|
||||
if(o.type === ObjectType.CYLINDER) return {...o, currentPosition: 0, extended: false};
|
||||
if(o.type === ObjectType.LED) return {...o, isOn: false};
|
||||
if(o.type === ObjectType.SWITCH) return {...o, isOn: false};
|
||||
return o;
|
||||
}));
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
const project: ProjectData = { version: "1.0", objects, logicRules, inputNames, outputNames };
|
||||
const blob = new Blob([JSON.stringify(project, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url; a.download = `motion-sim-project.json`; a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.target?.result as string) as ProjectData;
|
||||
if (data.objects) setObjects(data.objects);
|
||||
if (data.logicRules) setLogicRules(data.logicRules);
|
||||
if (data.inputNames) setInputNames(data.inputNames);
|
||||
if (data.outputNames) setOutputNames(data.outputNames);
|
||||
} catch (err) { alert("Invalid JSON"); }
|
||||
};
|
||||
reader.readAsText(file);
|
||||
e.target.value = '';
|
||||
};
|
||||
|
||||
const handleAddObject = (type: ObjectType) => {
|
||||
const id = crypto.randomUUID();
|
||||
const position = { x: 0, y: 0.1, z: 0 };
|
||||
let newObj: SimObject;
|
||||
switch (type) {
|
||||
case ObjectType.AXIS_LINEAR:
|
||||
newObj = { id, type, name: 'Linear Axis', position, rotation: {x:0,y:0,z:0}, min: 0, max: 100, currentValue: 0, targetValue: 0, speed: 1, isOscillating: false, triggers: [] } as AxisObject;
|
||||
break;
|
||||
case ObjectType.AXIS_ROTARY:
|
||||
newObj = { id, type, name: 'Rotary Axis', position, rotation: {x:0,y:0,z:0}, min: 0, max: 360, currentValue: 0, targetValue: 0, speed: 1, isOscillating: false, triggers: [] } as AxisObject;
|
||||
break;
|
||||
case ObjectType.CYLINDER:
|
||||
newObj = { id, type, name: 'Cylinder', position, rotation: {x:0,y:0,z:0}, stroke: 2, extended: false, currentPosition: 0, speed: 2, outputPort: 0 } as CylinderObject;
|
||||
break;
|
||||
case ObjectType.SWITCH:
|
||||
newObj = { id, type, name: 'Switch', position, rotation: {x:0,y:0,z:0}, isOn: false, isMomentary: true, inputPort: 0 } as SwitchObject;
|
||||
break;
|
||||
case ObjectType.LED:
|
||||
newObj = { id, type, name: 'LED', position, rotation: {x:0,y:0,z:0}, isOn: false, color: '#00ff00', outputPort: 0 } as LedObject;
|
||||
break;
|
||||
default: return;
|
||||
}
|
||||
setObjects(prev => [...prev, newObj]);
|
||||
setSelectedId(id);
|
||||
setActiveView('layout');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-screen h-screen bg-black text-white overflow-hidden font-sans">
|
||||
|
||||
{/* Top Navigation */}
|
||||
<div className="h-16 bg-gray-900 border-b border-gray-800 flex items-center px-6 justify-between shrink-0 z-20 shadow-lg">
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(37,99,235,0.4)]">M</div>
|
||||
<span className="font-bold tracking-tight text-lg">MotionSim</span>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-gray-950 p-1 rounded-xl border border-gray-800 shadow-inner">
|
||||
<button
|
||||
onClick={() => setActiveView('layout')}
|
||||
className={`flex items-center gap-2 px-6 py-2 rounded-lg text-sm font-bold transition-all ${activeView === 'layout' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:text-gray-300'}`}
|
||||
>
|
||||
<LayoutIcon size={16}/> Layout
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveView('logic')}
|
||||
className={`flex items-center gap-2 px-6 py-2 rounded-lg text-sm font-bold transition-all ${activeView === 'logic' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:text-gray-300'}`}
|
||||
>
|
||||
<Cpu size={16}/> Logic
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Global Controls */}
|
||||
<div className="flex items-center gap-4">
|
||||
{isPlaying && (
|
||||
<div className="bg-green-900/20 border border-green-500/30 px-4 py-1.5 rounded-full flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_#22c55e]" />
|
||||
<span className="text-[10px] font-black text-green-400 tracking-[0.2em] uppercase">PLC ACTIVE</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="h-8 w-[1px] bg-gray-800 mx-2" />
|
||||
|
||||
<div className="flex items-center gap-2 bg-gray-950 p-1 rounded-xl border border-gray-800">
|
||||
<button
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
title={isPlaying ? "Stop PLC" : "Start PLC"}
|
||||
className={`flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-black transition-all ${isPlaying ? 'bg-red-600/20 text-red-500 hover:bg-red-600/30' : 'bg-green-600 text-white hover:bg-green-500 shadow-lg shadow-green-900/20'}`}
|
||||
>
|
||||
{isPlaying ? <><Pause size={14}/> STOP</> : <><Play size={14}/> RUN</>}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
title="Reset System"
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-all"
|
||||
>
|
||||
<Square size={16} fill="currentColor" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
|
||||
{/* Left Side: Permanent IO Panel */}
|
||||
<IOPanel
|
||||
inputs={inputs}
|
||||
outputs={outputs}
|
||||
inputNames={inputNames}
|
||||
outputNames={outputNames}
|
||||
onToggleInput={handleToggleManualInput}
|
||||
onToggleOutput={handleToggleManualOutput}
|
||||
/>
|
||||
|
||||
{/* Center/Right: Dynamic Content based on tab */}
|
||||
{activeView === 'layout' ? (
|
||||
<div className="flex-1 flex overflow-hidden relative">
|
||||
<div className="flex-1 relative cursor-crosshair">
|
||||
<Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}>
|
||||
<color attach="background" args={['#0f172a']} />
|
||||
<ambientLight intensity={0.5} />
|
||||
<directionalLight position={[10, 10, 5]} intensity={1} castShadow />
|
||||
<Grid position={[0, -0.01, 0]} args={[20, 20]} cellSize={1} cellThickness={0.5} cellColor="#1e293b" sectionSize={5} sectionThickness={1} sectionColor="#334155" fadeDistance={30} infiniteGrid />
|
||||
<OrbitControls makeDefault enabled={!isPlaying || !selectedId} />
|
||||
|
||||
{objects.map(obj => (
|
||||
<EditableObject
|
||||
key={obj.id}
|
||||
data={obj}
|
||||
isSelected={obj.id === selectedId}
|
||||
isPlaying={isPlaying}
|
||||
enableTransform={true}
|
||||
onSelect={setSelectedId}
|
||||
onUpdate={(id, updates) => setObjects(prev => prev.map(o => o.id === id ? {...o, ...updates} as SimObject : o))}
|
||||
onInteract={(id) => setObjects(prev => prev.map(o => (o.id === id && o.type === ObjectType.SWITCH) ? { ...o, isOn: !o.isOn } as SwitchObject : o))}
|
||||
/>
|
||||
))}
|
||||
|
||||
<SimulationLoop
|
||||
isPlaying={isPlaying}
|
||||
objects={objects}
|
||||
setObjects={setObjects}
|
||||
logicRules={logicRules}
|
||||
manualInputs={manualInputs}
|
||||
manualOutputs={manualOutputs}
|
||||
setInputs={setInputs}
|
||||
setOutputs={setOutputs}
|
||||
/>
|
||||
</Canvas>
|
||||
</div>
|
||||
|
||||
<Sidebar
|
||||
objects={objects}
|
||||
selectedId={selectedId}
|
||||
isPlaying={isPlaying}
|
||||
inputNames={inputNames}
|
||||
outputNames={outputNames}
|
||||
onAddObject={handleAddObject}
|
||||
onDeleteObject={(id) => { setObjects(prev => prev.filter(o => o.id !== id)); setSelectedId(null); }}
|
||||
onUpdateObject={(id, updates) => setObjects(prev => prev.map(o => o.id === id ? { ...o, ...updates } as SimObject : o))}
|
||||
onSelect={setSelectedId}
|
||||
onUpdatePortName={handleUpdatePortName}
|
||||
onExport={handleExport}
|
||||
onImport={handleImport}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<LadderEditor
|
||||
logicRules={logicRules}
|
||||
inputNames={inputNames}
|
||||
outputNames={outputNames}
|
||||
currentInputs={inputs}
|
||||
currentOutputs={outputs}
|
||||
onAddRule={(r) => setLogicRules(prev => [...prev, r])}
|
||||
onDeleteRule={(id) => setLogicRules(prev => prev.filter(r => r.id !== id))}
|
||||
onUpdateRule={(id, updates) => setLogicRules(prev => prev.map(r => r.id === id ? {...r, ...updates} : r))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user