139 lines
6.8 KiB
TypeScript
139 lines
6.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Trash2, PlusCircle, Power } from 'lucide-react';
|
|
import { IOLogicRule, LogicCondition, LogicAction } from '../types';
|
|
|
|
interface LadderEditorProps {
|
|
logicRules: IOLogicRule[];
|
|
inputNames: string[];
|
|
outputNames: string[];
|
|
currentInputs: boolean[];
|
|
currentOutputs: boolean[];
|
|
onAddRule: (rule: IOLogicRule) => void;
|
|
onDeleteRule: (id: string) => void;
|
|
onUpdateRule: (id: string, updates: Partial<IOLogicRule>) => void;
|
|
}
|
|
|
|
export const LadderEditor: React.FC<LadderEditorProps> = ({
|
|
logicRules,
|
|
inputNames,
|
|
outputNames,
|
|
currentInputs,
|
|
currentOutputs,
|
|
onAddRule,
|
|
onDeleteRule,
|
|
onUpdateRule
|
|
}) => {
|
|
return (
|
|
<div className="flex-1 bg-gray-950 flex flex-col relative overflow-hidden">
|
|
{/* Background Grid Pattern */}
|
|
<div className="absolute inset-0 opacity-[0.03] pointer-events-none"
|
|
style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
|
|
|
|
{/* Toolbar */}
|
|
<div className="h-12 border-b border-gray-800 flex items-center px-6 justify-between shrink-0 bg-gray-900/50 backdrop-blur-md">
|
|
<h3 className="text-xs font-black uppercase tracking-widest text-gray-400">Main Controller (Ladder Logic)</h3>
|
|
<button
|
|
onClick={() => onAddRule({
|
|
id: crypto.randomUUID(),
|
|
inputPort: 0,
|
|
condition: LogicCondition.IS_ON,
|
|
outputPort: 0,
|
|
action: LogicAction.SET_ON,
|
|
enabled: true
|
|
})}
|
|
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded-full text-xs font-bold transition-all transform active:scale-95"
|
|
>
|
|
<PlusCircle size={14}/> Add New Rung
|
|
</button>
|
|
</div>
|
|
|
|
{/* Programming Workspace */}
|
|
<div className="flex-1 overflow-y-auto p-12 custom-scrollbar relative flex flex-col items-center">
|
|
{/* Left Bus Bar (Hot) */}
|
|
<div className="absolute left-10 top-0 bottom-0 w-1 bg-gradient-to-b from-red-600 via-red-500 to-red-600 shadow-[0_0_10px_rgba(239,68,68,0.5)] z-10" />
|
|
{/* Right Bus Bar (Neutral) */}
|
|
<div className="absolute right-10 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-600 via-blue-500 to-blue-600 shadow-[0_0_10px_rgba(59,130,246,0.5)] z-10" />
|
|
|
|
<div className="w-full max-w-4xl space-y-12">
|
|
{logicRules.map((rule, index) => {
|
|
const inputActive = currentInputs[rule.inputPort];
|
|
const outputActive = currentOutputs[rule.outputPort];
|
|
|
|
return (
|
|
<div key={rule.id} className="relative flex items-center group">
|
|
{/* Rung Number */}
|
|
<div className="absolute -left-12 text-[10px] font-mono text-gray-700">{(index + 1).toString().padStart(3, '0')}</div>
|
|
|
|
{/* Delete Button */}
|
|
<button
|
|
onClick={() => onDeleteRule(rule.id)}
|
|
className="absolute -right-16 p-2 text-gray-700 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
|
|
>
|
|
<Trash2 size={16}/>
|
|
</button>
|
|
|
|
{/* The Rung Wire */}
|
|
<div className="flex-1 flex items-center h-[2px] bg-gray-800 relative">
|
|
{/* Energized segments */}
|
|
{inputActive && <div className="absolute left-0 w-1/2 h-full bg-green-500 shadow-[0_0_8px_#22c55e]" />}
|
|
{outputActive && <div className="absolute left-1/2 right-0 h-full bg-green-500 shadow-[0_0_8px_#22c55e]" />}
|
|
|
|
{/* Contact (Input) */}
|
|
<div className="absolute left-[20%] -translate-x-1/2 flex flex-col items-center">
|
|
<div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
|
|
{inputNames[rule.inputPort] || `Input ${rule.inputPort}`}
|
|
</div>
|
|
<div className="relative h-12 w-12 flex items-center justify-center">
|
|
{/* Terminal Brackets */}
|
|
<div className="absolute left-0 w-2 h-8 border-l-4 border-gray-600 rounded-sm" />
|
|
<div className="absolute right-0 w-2 h-8 border-r-4 border-gray-600 rounded-sm" />
|
|
|
|
{/* Selector Area */}
|
|
<select
|
|
className={`bg-gray-900 text-[10px] font-bold border-2 rounded px-1 appearance-none text-center h-6 w-8 z-10 cursor-pointer ${inputActive ? 'border-green-500 text-green-500' : 'border-gray-700 text-gray-400'}`}
|
|
value={rule.inputPort}
|
|
onChange={(e) => onUpdateRule(rule.id, { inputPort: parseInt(e.target.value) })}
|
|
>
|
|
{Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Coil (Output) */}
|
|
<div className="absolute right-[20%] translate-x-1/2 flex flex-col items-center">
|
|
<div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
|
|
{outputNames[rule.outputPort] || `Output ${rule.outputPort}`}
|
|
</div>
|
|
<div className="relative h-12 w-12 flex items-center justify-center">
|
|
{/* Coil Brackets (Parens style) */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className={`w-8 h-8 rounded-full border-4 ${outputActive ? 'border-green-500 shadow-[0_0_15px_#22c55e]' : 'border-gray-700'}`} />
|
|
</div>
|
|
|
|
<select
|
|
className={`bg-gray-900 text-[10px] font-bold border-2 rounded px-1 appearance-none text-center h-6 w-8 z-10 cursor-pointer ${outputActive ? 'border-green-500 text-green-500' : 'border-gray-700 text-gray-400'}`}
|
|
value={rule.outputPort}
|
|
onChange={(e) => onUpdateRule(rule.id, { outputPort: parseInt(e.target.value) })}
|
|
>
|
|
{Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* End of Program */}
|
|
<div className="flex items-center justify-center py-10 opacity-20 select-none">
|
|
<div className="h-[2px] w-20 bg-gray-600" />
|
|
<span className="mx-4 text-xs font-black tracking-widest uppercase">End of Program</span>
|
|
<div className="h-[2px] w-20 bg-gray-600" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|