Implement global axis system and advanced motion logic
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { AxisData } from '../types';
|
||||
|
||||
interface IOPanelProps {
|
||||
inputs: boolean[];
|
||||
@@ -7,21 +8,25 @@ interface IOPanelProps {
|
||||
outputNames: string[];
|
||||
onToggleInput: (index: number) => void;
|
||||
onToggleOutput: (index: number) => void;
|
||||
axes: AxisData[];
|
||||
setAxes: React.Dispatch<React.SetStateAction<AxisData[]>>;
|
||||
}
|
||||
|
||||
export const IOPanel: React.FC<IOPanelProps> = ({
|
||||
inputs,
|
||||
outputs,
|
||||
inputNames,
|
||||
export const IOPanel: React.FC<IOPanelProps> = ({
|
||||
inputs,
|
||||
outputs,
|
||||
inputNames,
|
||||
outputNames,
|
||||
onToggleInput,
|
||||
onToggleOutput
|
||||
onToggleOutput,
|
||||
axes,
|
||||
setAxes
|
||||
}) => {
|
||||
const renderBits = (
|
||||
bits: boolean[],
|
||||
names: string[],
|
||||
colorClass: string,
|
||||
label: string,
|
||||
bits: boolean[],
|
||||
names: string[],
|
||||
colorClass: string,
|
||||
label: string,
|
||||
onToggle: (i: number) => void
|
||||
) => (
|
||||
<div className="mb-6">
|
||||
@@ -29,14 +34,13 @@ export const IOPanel: React.FC<IOPanelProps> = ({
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{bits.map((isActive, i) => (
|
||||
<div key={i} className="flex flex-col items-center group relative">
|
||||
<button
|
||||
<button
|
||||
onClick={() => onToggle(i)}
|
||||
title={`${label} ${i}: ${names[i] || 'Unnamed'}`}
|
||||
className={`w-7 h-7 rounded-md border border-gray-700 flex items-center justify-center text-[10px] font-mono transition-all duration-150 active:scale-90 ${
|
||||
isActive
|
||||
? `${colorClass} shadow-[0_0_10px_rgba(255,255,255,0.3)] border-transparent text-black font-bold`
|
||||
: 'bg-gray-850 text-gray-500 hover:bg-gray-700'
|
||||
}`}
|
||||
className={`w-7 h-7 rounded-md border border-gray-700 flex items-center justify-center text-[10px] font-mono transition-all duration-150 active:scale-90 ${isActive
|
||||
? `${colorClass} shadow-[0_0_10px_rgba(255,255,255,0.3)] border-transparent text-black font-bold`
|
||||
: 'bg-gray-850 text-gray-500 hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{i}
|
||||
</button>
|
||||
@@ -56,7 +60,7 @@ export const IOPanel: React.FC<IOPanelProps> = ({
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
|
||||
I/O Monitor
|
||||
</h2>
|
||||
|
||||
|
||||
{renderBits(inputs, inputNames, 'bg-green-500', 'Inputs', onToggleInput)}
|
||||
<hr className="border-gray-800 my-4" />
|
||||
{renderBits(outputs, outputNames, 'bg-red-500', 'Outputs', onToggleOutput)}
|
||||
@@ -66,6 +70,33 @@ export const IOPanel: React.FC<IOPanelProps> = ({
|
||||
<p>• Click bits to toggle state</p>
|
||||
<p>• Hover to see port names</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-2" style={{ maxHeight: '20vh' }}>
|
||||
<h4 className="text-[10px] uppercase text-blue-500 font-bold mb-2 sticky top-0 bg-gray-900/90 backdrop-blur pb-1 z-10">Axis Channels</h4>
|
||||
<div className="space-y-2">
|
||||
{axes.map((axis, i) => (
|
||||
<div key={i} className="flex flex-col gap-1 p-2 bg-gray-800/50 rounded border border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[10px] text-gray-400 font-mono">CH{i}</span>
|
||||
<span className="text-[10px] text-white font-bold truncate max-w-[80px]" title={axis.name}>{axis.name}</span>
|
||||
<span className="text-[10px] text-blue-400 font-mono">{axis.value.toFixed(1)}</span>
|
||||
</div>
|
||||
{/* Miniature Slider for quick view/control */}
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={axis.type === 'rotary' ? 360 : 100}
|
||||
value={axis.value}
|
||||
onChange={(e) => {
|
||||
const val = parseFloat(e.target.value);
|
||||
setAxes(prev => prev.map((a, idx) => idx === i ? { ...a, value: val, target: val } : a));
|
||||
}}
|
||||
className="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -2,119 +2,129 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { TransformControls, Text } from '@react-three/drei';
|
||||
import * as THREE from 'three';
|
||||
import { useFrame } from '@react-three/fiber';
|
||||
import {
|
||||
SimObject,
|
||||
ObjectType,
|
||||
AxisObject,
|
||||
CylinderObject,
|
||||
LedObject,
|
||||
SwitchObject
|
||||
SwitchObject,
|
||||
AxisData
|
||||
} from '../types';
|
||||
|
||||
interface ObjectProps {
|
||||
data: SimObject;
|
||||
isSelected: boolean;
|
||||
isSelected?: boolean;
|
||||
isPlaying?: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
onUpdate: (id: string, updates: Partial<SimObject>) => void;
|
||||
onSelect?: (id: string) => void;
|
||||
onUpdate?: (id: string, updates: Partial<SimObject>) => void;
|
||||
onInteract?: (id: string) => void;
|
||||
axes?: AxisData[];
|
||||
}
|
||||
|
||||
// -- Helper Material --
|
||||
const selectedMaterial = new THREE.MeshBasicMaterial({ color: '#4ade80', wireframe: true, transparent: true, opacity: 0.5 });
|
||||
|
||||
// -- Linear Axis Component --
|
||||
export const LinearAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
|
||||
const axis = data as AxisObject;
|
||||
const railLength = 5;
|
||||
const normalizedPos = ((axis.currentValue - axis.min) / (axis.max - axis.min)) * railLength;
|
||||
const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
|
||||
// -- Axis Visualizer Component --
|
||||
const AxisVisualizer = ({ object, isPlaying, axes, isSelected }: { object: AxisObject, isPlaying: boolean, axes?: AxisData[], isSelected?: boolean }) => {
|
||||
const carriageRef = useRef<THREE.Mesh>(null);
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
|
||||
return (
|
||||
<group
|
||||
position={[axis.position.x, axis.position.y, axis.position.z]}
|
||||
rotation={[axis.rotation.x, axis.rotation.y, axis.rotation.z]}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(axis.id); }}
|
||||
>
|
||||
<Text position={[railLength / 2, 0.8, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
|
||||
{axis.name} ({axis.currentValue.toFixed(1)})
|
||||
</Text>
|
||||
// Resolve current value from Global Axis Channel
|
||||
const axisValue = axes && object.axisIndex !== undefined && axes[object.axisIndex] ? axes[object.axisIndex].value : 0; // Fallback to 0 if axes not provided or index invalid
|
||||
|
||||
<mesh position={[railLength / 2, 0, 0]}>
|
||||
<boxGeometry args={[railLength + 0.5, 0.2, 0.5]} />
|
||||
<meshStandardMaterial color="#475569" />
|
||||
</mesh>
|
||||
useFrame(() => {
|
||||
if (object.type === ObjectType.AXIS_LINEAR && carriageRef.current) {
|
||||
const railLength = 5;
|
||||
const normalizedPos = ((axisValue - object.min) / (object.max - object.min)) * railLength;
|
||||
const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
|
||||
carriageRef.current.position.x = safePos;
|
||||
} else if (object.type === ObjectType.AXIS_ROTARY && groupRef.current) {
|
||||
const rotationAngle = (axisValue % 360) * (Math.PI / 180);
|
||||
// The inner group for rotary axis is rotated, not the carriage directly
|
||||
const innerRotaryGroup = groupRef.current.children.find(child => child.name === 'rotary-inner-group');
|
||||
if (innerRotaryGroup) {
|
||||
innerRotaryGroup.rotation.y = -rotationAngle;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
<mesh position={[safePos, 0.25, 0]}>
|
||||
<boxGeometry args={[0.8, 0.3, 0.6]} />
|
||||
<meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
|
||||
</mesh>
|
||||
if (object.type === ObjectType.AXIS_LINEAR) {
|
||||
const railLength = 5;
|
||||
const normalizedPos = ((axisValue - object.min) / (object.max - object.min)) * railLength;
|
||||
const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
<Text position={[railLength / 2, 0.8, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
|
||||
{object.name} ({axisValue.toFixed(1)})
|
||||
</Text>
|
||||
|
||||
{isSelected && !isPlaying && (
|
||||
<mesh position={[railLength / 2, 0, 0]}>
|
||||
<boxGeometry args={[railLength + 0.6, 0.3, 0.6]} />
|
||||
<primitive object={selectedMaterial} attach="material" />
|
||||
<boxGeometry args={[railLength + 0.5, 0.2, 0.5]} />
|
||||
<meshStandardMaterial color="#475569" />
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
// -- Rotary Axis Component --
|
||||
export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
|
||||
const axis = data as AxisObject;
|
||||
const rotationAngle = (axis.currentValue % 360) * (Math.PI / 180);
|
||||
|
||||
return (
|
||||
<group
|
||||
position={[axis.position.x, axis.position.y, axis.position.z]}
|
||||
rotation={[axis.rotation.x, axis.rotation.y, axis.rotation.z]}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(axis.id); }}
|
||||
>
|
||||
<Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
|
||||
{axis.name} ({axis.currentValue.toFixed(0)}°)
|
||||
</Text>
|
||||
|
||||
<mesh position={[0, 0.25, 0]}>
|
||||
<cylinderGeometry args={[0.8, 0.8, 0.5, 32]} />
|
||||
<meshStandardMaterial color="#475569" />
|
||||
</mesh>
|
||||
|
||||
<group rotation={[0, -rotationAngle, 0]} position={[0, 0.6, 0]}>
|
||||
<mesh>
|
||||
<cylinderGeometry args={[0.7, 0.7, 0.2, 32]} />
|
||||
<mesh ref={carriageRef} position={[safePos, 0.25, 0]}>
|
||||
<boxGeometry args={[0.8, 0.3, 0.6]} />
|
||||
<meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
|
||||
</mesh>
|
||||
<mesh position={[0.5, 0.15, 0]}>
|
||||
<boxGeometry args={[0.3, 0.1, 0.1]} />
|
||||
<meshStandardMaterial color="white" />
|
||||
</mesh>
|
||||
</group>
|
||||
|
||||
{isSelected && !isPlaying && (
|
||||
<mesh position={[0, 0.4, 0]}>
|
||||
<cylinderGeometry args={[0.9, 0.9, 1, 16]} />
|
||||
<primitive object={selectedMaterial} attach="material" />
|
||||
{isSelected && !isPlaying && (
|
||||
<mesh position={[railLength / 2, 0, 0]}>
|
||||
<boxGeometry args={[railLength + 0.6, 0.3, 0.6]} />
|
||||
<primitive object={selectedMaterial} attach="material" />
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
} else if (object.type === ObjectType.AXIS_ROTARY) {
|
||||
const rotationAngle = (axisValue % 360) * (Math.PI / 180);
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
<Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
|
||||
{object.name} ({axisValue.toFixed(0)}°)
|
||||
</Text>
|
||||
|
||||
<mesh position={[0, 0.25, 0]}>
|
||||
<cylinderGeometry args={[0.8, 0.8, 0.5, 32]} />
|
||||
<meshStandardMaterial color="#475569" />
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
|
||||
<group name="rotary-inner-group" rotation={[0, -rotationAngle, 0]} position={[0, 0.6, 0]}>
|
||||
<mesh>
|
||||
<cylinderGeometry args={[0.7, 0.7, 0.2, 32]} />
|
||||
<meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
|
||||
</mesh>
|
||||
<mesh position={[0.5, 0.15, 0]}>
|
||||
<boxGeometry args={[0.3, 0.1, 0.1]} />
|
||||
<meshStandardMaterial color="white" />
|
||||
</mesh>
|
||||
</group>
|
||||
|
||||
{isSelected && !isPlaying && (
|
||||
<mesh position={[0, 0.4, 0]}>
|
||||
<cylinderGeometry args={[0.9, 0.9, 1, 16]} />
|
||||
<primitive object={selectedMaterial} attach="material" />
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// -- Cylinder Component --
|
||||
export const Cylinder: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
|
||||
const cyl = data as CylinderObject;
|
||||
// -- Cylinder Visualizer Component --
|
||||
const CylinderVisualizer = ({ object, isPlaying, isSelected }: { object: CylinderObject, isPlaying: boolean, isSelected?: boolean }) => {
|
||||
const housingLen = 2;
|
||||
const extension = Math.min(cyl.stroke, Math.max(0, cyl.currentPosition));
|
||||
const extension = Math.min(object.stroke, Math.max(0, object.currentPosition));
|
||||
|
||||
return (
|
||||
<group
|
||||
position={[cyl.position.x, cyl.position.y, cyl.position.z]}
|
||||
rotation={[cyl.rotation.x, cyl.rotation.y, cyl.rotation.z]}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(cyl.id); }}
|
||||
>
|
||||
<group>
|
||||
<Text position={[housingLen / 2, 0.6, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
|
||||
{cyl.name}
|
||||
{object.name}
|
||||
</Text>
|
||||
|
||||
<mesh rotation={[0, 0, -Math.PI / 2]} position={[housingLen / 2, 0, 0]}>
|
||||
@@ -154,7 +164,7 @@ export const Switch: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onS
|
||||
rotation={[sw.rotation.x, sw.rotation.y, sw.rotation.z]}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (!isPlaying) onSelect(sw.id);
|
||||
if (!isPlaying) onSelect?.(sw.id);
|
||||
if (onInteract) onInteract(sw.id);
|
||||
}}
|
||||
>
|
||||
@@ -190,7 +200,7 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
|
||||
<group
|
||||
position={[led.position.x, led.position.y, led.position.z]}
|
||||
rotation={[led.rotation.x, led.rotation.y, led.rotation.z]}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(led.id); }}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect?.(led.id); }}
|
||||
>
|
||||
<Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom">
|
||||
{led.name}
|
||||
@@ -220,34 +230,50 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean, snap?: number | null }> = (props) => {
|
||||
const { data, enableTransform, isPlaying, onUpdate, snap } = props;
|
||||
export const EditableObject: React.FC<ObjectProps & { enableTransform?: boolean, snap?: number | null }> = (props) => {
|
||||
const { data, enableTransform, isPlaying, onUpdate, snap, axes } = props;
|
||||
|
||||
const handleTransformChange = (e: any) => {
|
||||
if (e.target.object) {
|
||||
const o = e.target.object;
|
||||
onUpdate(data.id, {
|
||||
onUpdate?.(data.id, {
|
||||
position: { x: o.position.x, y: o.position.y, z: o.position.z },
|
||||
rotation: { x: o.rotation.x, y: o.rotation.y, z: o.rotation.z }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const Component =
|
||||
data.type === ObjectType.AXIS_LINEAR ? LinearAxis :
|
||||
data.type === ObjectType.AXIS_ROTARY ? RotaryAxis :
|
||||
data.type === ObjectType.CYLINDER ? Cylinder :
|
||||
data.type === ObjectType.SWITCH ? Switch :
|
||||
Led;
|
||||
let ComponentToRender;
|
||||
switch (data.type) {
|
||||
case ObjectType.AXIS_LINEAR:
|
||||
case ObjectType.AXIS_ROTARY:
|
||||
ComponentToRender = <AxisVisualizer object={data as AxisObject} isPlaying={isPlaying!} axes={axes} isSelected={props.isSelected} />;
|
||||
break;
|
||||
case ObjectType.CYLINDER:
|
||||
ComponentToRender = <CylinderVisualizer object={data as CylinderObject} isPlaying={isPlaying!} isSelected={props.isSelected} />;
|
||||
break;
|
||||
case ObjectType.SWITCH:
|
||||
ComponentToRender = <Switch {...props} />;
|
||||
break;
|
||||
case ObjectType.LED:
|
||||
ComponentToRender = <Led {...props} />;
|
||||
break;
|
||||
default:
|
||||
ComponentToRender = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Component {...props} />
|
||||
<group
|
||||
position={[data.position.x, data.position.y, data.position.z]}
|
||||
rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isPlaying) props.onSelect?.(data.id); }}
|
||||
>
|
||||
{ComponentToRender}
|
||||
{props.isSelected && enableTransform && !isPlaying && (
|
||||
<TransformControls
|
||||
object={undefined}
|
||||
position={[data.position.x, data.position.y, data.position.z]}
|
||||
rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
|
||||
object={undefined} // TransformControls will apply to its children, not a specific object prop
|
||||
position={[0, 0, 0]} // Position relative to the group
|
||||
rotation={[0, 0, 0]} // Rotation relative to the group
|
||||
onMouseUp={handleTransformChange}
|
||||
size={0.6}
|
||||
mode="translate"
|
||||
@@ -255,6 +281,6 @@ export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean,
|
||||
rotationSnap={snap ? Math.PI / 12 : undefined}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
SimObject, ObjectType, AxisObject,
|
||||
CylinderObject, LedObject, SwitchObject
|
||||
CylinderObject, LedObject, SwitchObject, AxisData
|
||||
} from '../types';
|
||||
|
||||
interface SidebarProps {
|
||||
@@ -16,10 +16,12 @@ interface SidebarProps {
|
||||
isPlaying: boolean;
|
||||
inputNames: string[];
|
||||
outputNames: string[];
|
||||
axes: AxisData[];
|
||||
onAddObject: (type: ObjectType) => void;
|
||||
onDeleteObject: (id: string) => void;
|
||||
onUpdateObject: (id: string, updates: Partial<SimObject>) => void;
|
||||
onSelect: (id: string | null) => void;
|
||||
onUpdateAxis: (index: number, updates: Partial<AxisData>) => void;
|
||||
onSelect: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
|
||||
}
|
||||
|
||||
@@ -29,12 +31,14 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
isPlaying,
|
||||
inputNames,
|
||||
outputNames,
|
||||
axes,
|
||||
onAddObject,
|
||||
onDeleteObject,
|
||||
onUpdateObject,
|
||||
onUpdatePortName
|
||||
onUpdateAxis,
|
||||
onSelect,
|
||||
onUpdatePortName,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'properties' | 'system'>('properties');
|
||||
const selectedObject = objects.find(o => o.id === selectedId);
|
||||
|
||||
const renderInput = (label: string, value: any, onChange: (val: any) => void, type = "text", step?: number) => (
|
||||
@@ -56,156 +60,123 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
return (
|
||||
<div className="w-80 bg-gray-900 border-l border-gray-800 flex flex-col h-full overflow-hidden select-none shadow-xl shrink-0">
|
||||
|
||||
{/* Sub-navigation */}
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-gray-800 bg-gray-950/50 flex items-center justify-between">
|
||||
<h2 className="text-xs font-black uppercase tracking-widest text-gray-400">Layout Config</h2>
|
||||
<div className="flex bg-gray-800 p-1 rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveTab('properties')}
|
||||
className={`px-3 py-1 rounded text-[10px] font-black uppercase ${activeTab === 'properties' ? 'bg-gray-600 text-white shadow' : 'text-gray-400 hover:text-gray-300'}`}
|
||||
>
|
||||
Props
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('system')}
|
||||
className={`px-3 py-1 rounded text-[10px] font-black uppercase ${activeTab === 'system' ? 'bg-gray-600 text-white shadow' : 'text-gray-400 hover:text-gray-300'}`}
|
||||
>
|
||||
System
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeTab === 'properties' && (
|
||||
<>
|
||||
{/* Tool Box */}
|
||||
<div className="p-4 grid grid-cols-3 gap-2 border-b border-gray-800 bg-gray-950/20">
|
||||
<ToolBtn icon={<Move size={16} />} label="Lin Axis" onClick={() => onAddObject(ObjectType.AXIS_LINEAR)} />
|
||||
<ToolBtn icon={<RotateCw size={16} />} label="Rot Axis" onClick={() => onAddObject(ObjectType.AXIS_ROTARY)} />
|
||||
<ToolBtn icon={<LinkIcon size={16} />} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} />
|
||||
<ToolBtn icon={<Power size={16} />} label="Switch" onClick={() => onAddObject(ObjectType.SWITCH)} />
|
||||
<ToolBtn icon={<div className="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]" />} label="LED" onClick={() => onAddObject(ObjectType.LED)} />
|
||||
{/* Tool Box */}
|
||||
<div className="p-4 grid grid-cols-3 gap-2 border-b border-gray-800 bg-gray-950/20">
|
||||
<ToolBtn icon={<Move size={16} />} label="Lin Axis" onClick={() => onAddObject(ObjectType.AXIS_LINEAR)} />
|
||||
<ToolBtn icon={<RotateCw size={16} />} label="Rot Axis" onClick={() => onAddObject(ObjectType.AXIS_ROTARY)} />
|
||||
<ToolBtn icon={<LinkIcon size={16} />} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} />
|
||||
<ToolBtn icon={<Power size={16} />} label="Switch" onClick={() => onAddObject(ObjectType.SWITCH)} />
|
||||
<ToolBtn icon={<div className="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]" />} label="LED" onClick={() => onAddObject(ObjectType.LED)} />
|
||||
</div>
|
||||
|
||||
{/* Properties Form */}
|
||||
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
||||
{!selectedObject ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-600 opacity-50 space-y-3">
|
||||
<Box size={32} />
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-center">Select an object<br />to edit properties</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-xs font-black text-blue-500 uppercase tracking-[2px]">Component Detail</h3>
|
||||
<button onClick={() => onDeleteObject(selectedObject.id)} className="p-1.5 text-red-500 hover:bg-red-500/10 rounded transition-colors">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Properties Form */}
|
||||
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
||||
{!selectedObject ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-600 opacity-50 space-y-3">
|
||||
<Box size={32} />
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-center">Select an object<br />to edit properties</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-xs font-black text-blue-500 uppercase tracking-[2px]">Component Detail</h3>
|
||||
<button onClick={() => onDeleteObject(selectedObject.id)} className="p-1.5 text-red-500 hover:bg-red-500/10 rounded transition-colors">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-950/50 p-4 rounded-xl border border-gray-800/50 space-y-4">
|
||||
{renderInput("Object Name", selectedObject.name, (val) => onUpdateObject(selectedObject.id, { name: val }))}
|
||||
|
||||
<div className="bg-gray-950/50 p-4 rounded-xl border border-gray-800/50 space-y-4">
|
||||
{renderInput("Object Name", selectedObject.name, (val) => onUpdateObject(selectedObject.id, { name: val }))}
|
||||
{selectedObject.type === ObjectType.SWITCH && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Assigned Input Port</label>
|
||||
<select
|
||||
className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
|
||||
value={(selectedObject as SwitchObject).inputPort}
|
||||
onChange={(e) => onUpdateObject(selectedObject.id, { inputPort: parseInt(e.target.value) })}
|
||||
>
|
||||
{inputNames.map((name, i) => (
|
||||
<option key={i} value={i}>X{i}: {name || '---'}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<input type="checkbox" className="w-4 h-4 rounded bg-gray-900 border-gray-700" checked={(selectedObject as SwitchObject).isMomentary} onChange={(e) => onUpdateObject(selectedObject.id, { isMomentary: e.target.checked })} />
|
||||
<span className="text-xs text-gray-300">Momentary Contact</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedObject.type === ObjectType.SWITCH && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Assigned Input Port</label>
|
||||
<select
|
||||
className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
|
||||
value={(selectedObject as SwitchObject).inputPort}
|
||||
onChange={(e) => onUpdateObject(selectedObject.id, { inputPort: parseInt(e.target.value) })}
|
||||
>
|
||||
{inputNames.map((name, i) => (
|
||||
<option key={i} value={i}>X{i}: {name || '---'}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<input type="checkbox" className="w-4 h-4 rounded bg-gray-900 border-gray-700" checked={(selectedObject as SwitchObject).isMomentary} onChange={(e) => onUpdateObject(selectedObject.id, { isMomentary: e.target.checked })} />
|
||||
<span className="text-xs text-gray-300">Momentary Contact</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedObject.type === ObjectType.LED && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label>
|
||||
<select
|
||||
className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
|
||||
value={(selectedObject as LedObject).outputPort}
|
||||
onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })}
|
||||
>
|
||||
{outputNames.map((name, i) => (
|
||||
<option key={i} value={i}>Y{i}: {name || '---'}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{renderInput("Light Color", (selectedObject as LedObject).color, (v) => onUpdateObject(selectedObject.id, { color: v }), "color")}
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedObject.type === ObjectType.LED && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label>
|
||||
<select
|
||||
className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
|
||||
value={(selectedObject as LedObject).outputPort}
|
||||
onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })}
|
||||
>
|
||||
{outputNames.map((name, i) => (
|
||||
<option key={i} value={i}>Y{i}: {name || '---'}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{renderInput("Light Color", (selectedObject as LedObject).color, (v) => onUpdateObject(selectedObject.id, { color: v }), "color")}
|
||||
</>
|
||||
)}
|
||||
{(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && (
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-500 mb-2 font-bold uppercase tracking-wider">Bind to Global Axis</label>
|
||||
<select
|
||||
className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
|
||||
value={(selectedObject as AxisObject).axisIndex}
|
||||
onChange={(e) => onUpdateObject(selectedObject.id, { axisIndex: parseInt(e.target.value) })}
|
||||
>
|
||||
{axes.map((axis) => (
|
||||
<option key={axis.id} value={axis.id}>
|
||||
Channel {axis.id}: {axis.name} ({axis.type})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && (
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-500 mb-2 font-bold uppercase tracking-wider">Manual Position ({(selectedObject as AxisObject).currentValue.toFixed(1)})</label>
|
||||
<input type="range" min={(selectedObject as AxisObject).min} max={(selectedObject as AxisObject).max} value={(selectedObject as AxisObject).currentValue} step={0.1}
|
||||
onChange={(e) => onUpdateObject(selectedObject.id, { currentValue: parseFloat(e.target.value), targetValue: parseFloat(e.target.value) })}
|
||||
className="w-full h-1.5 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-500" />
|
||||
{/* Axis Control Slider in Sidebar */}
|
||||
<div className="mt-4 p-3 bg-gray-900 rounded border border-gray-800">
|
||||
<div className="flex justify-between items-end mb-2">
|
||||
<span className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Manual Jog</span>
|
||||
<span className="text-xs font-mono text-blue-400">
|
||||
{axes[(selectedObject as AxisObject).axisIndex]?.value.toFixed(1) || '0.0'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={axes[(selectedObject as AxisObject).axisIndex]?.type === 'rotary' ? 360 : 100}
|
||||
step={0.1}
|
||||
value={axes[(selectedObject as AxisObject).axisIndex]?.value || 0}
|
||||
onChange={(e) => {
|
||||
const val = parseFloat(e.target.value);
|
||||
const idx = (selectedObject as AxisObject).axisIndex;
|
||||
if (axes[idx]) {
|
||||
onUpdateAxis(idx, { value: val, target: val });
|
||||
}
|
||||
}}
|
||||
className="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'system' && (
|
||||
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-[10px] font-black text-gray-500 uppercase tracking-widest border-b border-gray-800 pb-2">Hardware Mapping</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold text-green-500 mb-3 uppercase flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-green-500" /> Inputs (X0 - X15)
|
||||
</h4>
|
||||
<div className="grid gap-1">
|
||||
{inputNames.map((name, i) => (
|
||||
<div key={i} className="flex items-center gap-2 group">
|
||||
<span className="w-6 text-[9px] text-gray-600 font-mono">X{i.toString().padStart(2, '0')}</span>
|
||||
<input
|
||||
className="flex-1 bg-gray-950 border border-gray-800 rounded px-2 py-1 text-[11px] focus:border-green-500 outline-none transition-colors"
|
||||
placeholder="Tag name..."
|
||||
value={name}
|
||||
onChange={(e) => onUpdatePortName('input', i, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold text-red-500 mb-3 uppercase flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-red-500" /> Outputs (Y0 - Y15)
|
||||
</h4>
|
||||
<div className="grid gap-1">
|
||||
{outputNames.map((name, i) => (
|
||||
<div key={i} className="flex items-center gap-2 group">
|
||||
<span className="w-6 text-[9px] text-gray-600 font-mono">Y{i.toString().padStart(2, '0')}</span>
|
||||
<input
|
||||
className="flex-1 bg-gray-950 border border-gray-800 rounded px-2 py-1 text-[11px] focus:border-red-500 outline-none transition-colors"
|
||||
placeholder="Tag name..."
|
||||
value={name}
|
||||
onChange={(e) => onUpdatePortName('output', i, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
195
components/SystemSetupDialog.tsx
Normal file
195
components/SystemSetupDialog.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
import { AxisData } from '../types';
|
||||
|
||||
interface SystemSetupDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
inputNames: string[];
|
||||
outputNames: string[];
|
||||
axes: AxisData[];
|
||||
onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
|
||||
onUpdateAxis: (index: number, updates: Partial<AxisData>) => void;
|
||||
}
|
||||
|
||||
export const SystemSetupDialog: React.FC<SystemSetupDialogProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
inputNames,
|
||||
outputNames,
|
||||
onUpdatePortName,
|
||||
axes,
|
||||
onUpdateAxis
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = React.useState<'io' | 'axes'>('io');
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-2xl w-full max-w-4xl h-[85vh] flex flex-col shadow-2xl animate-in zoom-in-95 duration-200 cursor-default">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-800 bg-gray-950/50 rounded-t-2xl">
|
||||
<div className="flex items-center gap-8">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white tracking-tight">System Setup</h2>
|
||||
<p className="text-gray-400 text-sm mt-1">Configure Hardware & Drives</p>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-gray-800 p-1 rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveTab('io')}
|
||||
className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'io' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:text-white'}`}
|
||||
>
|
||||
I/O Mapping
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('axes')}
|
||||
className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'axes' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:text-white'}`}
|
||||
>
|
||||
Axis Drives
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
|
||||
|
||||
{activeTab === 'io' && (
|
||||
<div className="grid grid-cols-2 gap-12">
|
||||
|
||||
{/* Input Configuration */}
|
||||
<div>
|
||||
<h3 className="flex items-center gap-3 text-sm font-bold text-green-400 uppercase tracking-widest mb-6 border-b border-green-500/20 pb-3">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_#22c55e]" />
|
||||
Input Mapping (X00 - X31)
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{inputNames.map((name, i) => (
|
||||
<div key={i} className="flex items-center gap-3 group">
|
||||
<span className="w-8 text-xs font-mono text-gray-500 group-hover:text-green-400 transition-colors">
|
||||
X{i.toString().padStart(2, '0')}
|
||||
</span>
|
||||
<input
|
||||
className="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm text-gray-300 focus:text-white focus:border-green-500 focus:ring-1 focus:ring-green-500/50 outline-none transition-all placeholder:text-gray-700"
|
||||
placeholder={`Input ${i} Tag Name...`}
|
||||
value={name}
|
||||
onChange={(e) => onUpdatePortName('input', i, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output Configuration */}
|
||||
<div>
|
||||
<h3 className="flex items-center gap-3 text-sm font-bold text-red-500 uppercase tracking-widest mb-6 border-b border-red-500/20 pb-3">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500 shadow-[0_0_10px_#ef4444]" />
|
||||
Output Mapping (Y00 - Y31)
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{outputNames.map((name, i) => (
|
||||
<div key={i} className="flex items-center gap-3 group">
|
||||
<span className="w-8 text-xs font-mono text-gray-500 group-hover:text-red-400 transition-colors">
|
||||
Y{i.toString().padStart(2, '0')}
|
||||
</span>
|
||||
<input
|
||||
className="flex-1 bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm text-gray-300 focus:text-white focus:border-red-500 focus:ring-1 focus:ring-red-500/50 outline-none transition-all placeholder:text-gray-700"
|
||||
placeholder={`Output ${i} Tag Name...`}
|
||||
value={name}
|
||||
onChange={(e) => onUpdatePortName('output', i, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'axes' && (
|
||||
<div className="space-y-6">
|
||||
<h3 className="flex items-center gap-3 text-sm font-bold text-blue-400 uppercase tracking-widest mb-2 border-b border-blue-500/20 pb-3">
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6]" />
|
||||
Global Axis Configuration (8 Channels)
|
||||
</h3>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{axes.map((axis, i) => (
|
||||
<div key={i} className="bg-gray-950/50 border border-gray-800 rounded-xl p-4 flex items-center gap-6 hover:border-gray-700 transition-colors">
|
||||
<div className="flex flex-col gap-1 w-48 shrink-0">
|
||||
<label className="text-[10px] items-center text-gray-500 font-black uppercase tracking-widest flex gap-2">
|
||||
<span className="w-4 h-4 rounded bg-gray-800 flex items-center justify-center text-white">{i}</span> Axis Name
|
||||
</label>
|
||||
<input
|
||||
value={axis.name}
|
||||
onChange={(e) => onUpdateAxis(i, { name: e.target.value })}
|
||||
className="bg-gray-900 border border-gray-800 rounded px-2 py-1 text-sm text-white focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex justify-between items-end">
|
||||
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Jog Control</label>
|
||||
<span className="text-xs font-mono text-blue-400">
|
||||
{axis.value.toFixed(1)} <span className="text-gray-600">{axis.type === 'rotary' ? 'deg' : 'mm'}</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={axis.type === 'rotary' ? 360 : 100}
|
||||
step={0.1}
|
||||
value={axis.value}
|
||||
onChange={(e) => {
|
||||
const val = parseFloat(e.target.value);
|
||||
onUpdateAxis(i, { value: val, target: val });
|
||||
}}
|
||||
className="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-600 hover:accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-32 flex flex-col gap-1">
|
||||
<label className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Type</label>
|
||||
<select
|
||||
value={axis.type}
|
||||
onChange={(e) => onUpdateAxis(i, { type: e.target.value as any })}
|
||||
className="bg-gray-900 border border-gray-800 rounded px-2 py-1 text-xs text-gray-300 outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="linear">Linear (mm)</option>
|
||||
<option value="rotary">Rotary (deg)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-gray-800 bg-gray-950/30 rounded-b-2xl flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2 bg-gray-800 hover:bg-gray-700 text-white text-sm font-bold rounded-lg transition-colors"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user