391 lines
17 KiB
TypeScript
391 lines
17 KiB
TypeScript
|
|
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, Download, Upload } 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 className="h-8 w-[1px] bg-gray-800 mx-2" />
|
|
|
|
<div className="flex bg-gray-950 p-1 rounded-xl border border-gray-800 shadow-inner">
|
|
<button onClick={handleExport} className="px-3 py-2 rounded-lg text-gray-400 hover:text-blue-400 hover:bg-gray-800 transition-all" title="Export Project">
|
|
<Download size={18} />
|
|
</button>
|
|
<label className="px-3 py-2 rounded-lg text-gray-400 hover:text-purple-400 hover:bg-gray-800 cursor-pointer transition-all flex items-center" title="Import Project">
|
|
<Upload size={18} />
|
|
<input type="file" className="hidden" accept=".json" onChange={handleImport} />
|
|
</label>
|
|
</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 />
|
|
|
|
{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}
|
|
/>
|
|
</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>
|
|
);
|
|
}
|