Implement global axis system and advanced motion logic
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Trash2, PlusCircle, Power } from 'lucide-react';
|
||||
import { IOLogicRule, LogicCondition, LogicAction } from '../types';
|
||||
import { Trash2, PlusCircle, Power, Zap, Gauge, Move } from 'lucide-react';
|
||||
import { IOLogicRule, LogicCondition, LogicAction, LogicTriggerType, LogicActionType, AxisData } from '../types';
|
||||
|
||||
interface LadderEditorProps {
|
||||
logicRules: IOLogicRule[];
|
||||
@@ -12,6 +12,7 @@ interface LadderEditorProps {
|
||||
onAddRule: (rule: IOLogicRule) => void;
|
||||
onDeleteRule: (id: string) => void;
|
||||
onUpdateRule: (id: string, updates: Partial<IOLogicRule>) => void;
|
||||
axes: AxisData[];
|
||||
}
|
||||
|
||||
export const LadderEditor: React.FC<LadderEditorProps> = ({
|
||||
@@ -22,29 +23,36 @@ export const LadderEditor: React.FC<LadderEditorProps> = ({
|
||||
currentOutputs,
|
||||
onAddRule,
|
||||
onDeleteRule,
|
||||
onUpdateRule
|
||||
onUpdateRule,
|
||||
axes
|
||||
}) => {
|
||||
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"
|
||||
<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
|
||||
<button
|
||||
onClick={() => onAddRule({
|
||||
id: crypto.randomUUID(),
|
||||
enabled: true,
|
||||
triggerType: LogicTriggerType.INPUT_BIT,
|
||||
inputPort: 0,
|
||||
condition: LogicCondition.IS_ON,
|
||||
triggerAxisIndex: 0,
|
||||
triggerCompareOp: LogicCondition.GREATER,
|
||||
triggerValue: 0,
|
||||
actionType: LogicActionType.OUTPUT_COIL,
|
||||
outputPort: 0,
|
||||
action: LogicAction.SET_ON,
|
||||
enabled: true
|
||||
targetAxisIndex: 0,
|
||||
targetAxisValue: 0
|
||||
})}
|
||||
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
|
||||
<PlusCircle size={14} /> Add New Rung
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -57,69 +65,146 @@ export const LadderEditor: React.FC<LadderEditorProps> = ({
|
||||
|
||||
<div className="w-full max-w-4xl space-y-12">
|
||||
{logicRules.map((rule, index) => {
|
||||
const inputActive = currentInputs[rule.inputPort];
|
||||
const outputActive = currentOutputs[rule.outputPort];
|
||||
|
||||
const isInputTrigger = rule.triggerType === LogicTriggerType.INPUT_BIT;
|
||||
const isAxisTrigger = rule.triggerType === LogicTriggerType.AXIS_COMPARE;
|
||||
const isOutputAction = rule.actionType === LogicActionType.OUTPUT_COIL;
|
||||
const isAxisAction = rule.actionType === LogicActionType.AXIS_MOVE;
|
||||
|
||||
const inputActive = isInputTrigger && currentInputs[rule.inputPort];
|
||||
const outputActive = isOutputAction && currentOutputs[rule.outputPort];
|
||||
|
||||
return (
|
||||
<div key={rule.id} className="relative flex items-center group">
|
||||
<div key={rule.id} className="relative flex items-center group mb-4 p-4 rounded-xl border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition-colors">
|
||||
{/* Rung Number */}
|
||||
<div className="absolute -left-12 text-[10px] font-mono text-gray-700">{(index + 1).toString().padStart(3, '0')}</div>
|
||||
|
||||
<div className="absolute -left-8 text-[10px] font-mono text-gray-600">{(index + 1).toString().padStart(3, '0')}</div>
|
||||
|
||||
{/* Delete Button */}
|
||||
<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"
|
||||
className="absolute -right-8 p-2 text-gray-700 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 size={16}/>
|
||||
<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]" />}
|
||||
<div className="flex-1 flex items-center gap-6">
|
||||
|
||||
{/* 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}`}
|
||||
{/* LEFT: TRIGGER */}
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<button
|
||||
onClick={() => onUpdateRule(rule.id, { triggerType: LogicTriggerType.INPUT_BIT })}
|
||||
className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isInputTrigger ? 'bg-green-500/10 border-green-500 text-green-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
|
||||
>
|
||||
<Zap size={10} /> IO Input
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onUpdateRule(rule.id, { triggerType: LogicTriggerType.AXIS_COMPARE })}
|
||||
className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isAxisTrigger ? 'bg-blue-500/10 border-blue-500 text-blue-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
|
||||
>
|
||||
<Gauge size={10} /> Axis Logic
|
||||
</button>
|
||||
</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 className="h-16 bg-gray-950 border border-gray-800 rounded-lg flex items-center justify-center relative p-2">
|
||||
{isInputTrigger ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-[10px] text-gray-500 mb-1">{inputNames[rule.inputPort] || `Input ${rule.inputPort}`}</span>
|
||||
<div className={`relative w-8 h-8 flex items-center justify-center border-2 rounded ${inputActive ? 'border-green-500 bg-green-500/20' : 'border-gray-700'}`}>
|
||||
<select
|
||||
className="bg-transparent text-xs font-bold text-center w-full h-full outline-none appearance-none cursor-pointer text-white"
|
||||
value={rule.inputPort}
|
||||
onChange={(e) => onUpdateRule(rule.id, { inputPort: parseInt(e.target.value) })}
|
||||
>
|
||||
{Array.from({ length: 32 }).map((_, i) => <option key={i} value={i} className="bg-gray-900 border-none">X{i}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<select
|
||||
className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-20 outline-none"
|
||||
value={rule.triggerAxisIndex}
|
||||
onChange={(e) => onUpdateRule(rule.id, { triggerAxisIndex: parseInt(e.target.value) })}
|
||||
>
|
||||
{axes.map(a => <option key={a.id} value={a.id}>CH{a.id}</option>)}
|
||||
</select>
|
||||
<select
|
||||
className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-1 py-1 w-12 text-center outline-none"
|
||||
value={rule.triggerCompareOp}
|
||||
onChange={(e) => onUpdateRule(rule.id, { triggerCompareOp: e.target.value as LogicCondition })}
|
||||
>
|
||||
<option value={LogicCondition.GREATER}>></option>
|
||||
<option value={LogicCondition.LESS}><</option>
|
||||
<option value={LogicCondition.EQUAL}>=</option>
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-16 outline-none"
|
||||
value={rule.triggerValue}
|
||||
onChange={(e) => onUpdateRule(rule.id, { triggerValue: parseFloat(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</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}`}
|
||||
{/* ARROW */}
|
||||
<div className="text-gray-700">➡</div>
|
||||
|
||||
{/* RIGHT: ACTION */}
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 mb-1 justify-end">
|
||||
<button
|
||||
onClick={() => onUpdateRule(rule.id, { actionType: LogicActionType.OUTPUT_COIL })}
|
||||
className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isOutputAction ? 'bg-red-500/10 border-red-500 text-red-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
|
||||
>
|
||||
<Zap size={10} /> Output
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onUpdateRule(rule.id, { actionType: LogicActionType.AXIS_MOVE })}
|
||||
className={`flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-0.5 rounded border ${isAxisAction ? 'bg-blue-500/10 border-blue-500 text-blue-500' : 'border-transparent text-gray-600 hover:bg-gray-800'}`}
|
||||
>
|
||||
<Move size={10} /> Move Axis
|
||||
</button>
|
||||
</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 className="h-16 bg-gray-950 border border-gray-800 rounded-lg flex items-center justify-center relative p-2">
|
||||
{isOutputAction ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-[10px] text-gray-500 mb-1">{outputNames[rule.outputPort] || `Output ${rule.outputPort}`}</span>
|
||||
<div className={`relative w-8 h-8 flex items-center justify-center rounded-full border-2 ${outputActive ? 'border-red-500 bg-red-500/20 shadow-[0_0_10px_#ef4444]' : 'border-gray-700'}`}>
|
||||
<select
|
||||
className="bg-transparent text-xs font-bold text-center w-full h-full outline-none appearance-none cursor-pointer text-white"
|
||||
value={rule.outputPort}
|
||||
onChange={(e) => onUpdateRule(rule.id, { outputPort: parseInt(e.target.value) })}
|
||||
>
|
||||
{Array.from({ length: 32 }).map((_, i) => <option key={i} value={i} className="bg-gray-900 border-none">Y{i}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<span className="text-[9px] text-gray-500 font-bold">MOVE</span>
|
||||
<select
|
||||
className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-20 outline-none"
|
||||
value={rule.targetAxisIndex}
|
||||
onChange={(e) => onUpdateRule(rule.id, { targetAxisIndex: parseInt(e.target.value) })}
|
||||
>
|
||||
{axes.map(a => <option key={a.id} value={a.id}>CH{a.id}</option>)}
|
||||
</select>
|
||||
<span className="text-[9px] text-gray-500 font-bold">TO</span>
|
||||
<input
|
||||
type="number"
|
||||
className="bg-gray-900 border border-gray-700 rounded text-[10px] text-white px-2 py-1 w-16 outline-none"
|
||||
placeholder="Pos"
|
||||
value={rule.targetAxisValue}
|
||||
onChange={(e) => onUpdateRule(rule.id, { targetAxisValue: parseFloat(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user