GoogleAIBuilder/MotionSimulator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Move Export/Import to top nav, enable 3D scene controls

Browse Source
This commit is contained in:
tindevil
2025-12-21 22:45:00 +09:00
parent c206a31af6
commit 30b5f94856
4 changed files with 183 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
App.tsx
View File

@@ -5,26 +5,26 @@ 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,
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';
import { Layout as LayoutIcon, Cpu, Play, Pause, Square, Download, Upload } from 'lucide-react';
// --- Simulation Manager (PLC Scan Cycle) ---
const SimulationLoop = ({
isPlaying,
objects,
setObjects,
const SimulationLoop = ({
isPlaying,
objects,
setObjects,
logicRules,
manualInputs,
manualOutputs,
setInputs,
setOutputs
}: {
isPlaying: boolean,
objects: SimObject[],
}: {
isPlaying: boolean,
objects: SimObject[],
setObjects: React.Dispatch<React.SetStateAction<SimObject[]>>,
logicRules: IOLogicRule[],
manualInputs: boolean[],
@@ -32,7 +32,7 @@ const SimulationLoop = ({
setInputs: (inputs: boolean[]) => void,
setOutputs: (outputs: boolean[]) => void
}) => {
useFrame((state, delta) => {
if (!isPlaying) return;
@@ -78,39 +78,39 @@ const SimulationLoop = ({
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;
}
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;
}
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;
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;
@@ -127,7 +127,7 @@ 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));
@@ -178,11 +178,11 @@ export default function App() {
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;
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;
}));
};
@@ -218,19 +218,19 @@ export default function App() {
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;
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;
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;
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;
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;
newObj = { id, type, name: 'LED', position, rotation: { x: 0, y: 0, z: 0 }, isOn: false, color: '#00ff00', outputPort: 0 } as LedObject;
break;
default: return;
}
@@ -241,7 +241,7 @@ export default function App() {
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">
@@ -249,61 +249,74 @@ export default function App() {
<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
<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
<LayoutIcon size={16} /> Layout
</button>
<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
<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>
)}
{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="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 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}
<IOPanel
inputs={inputs}
outputs={outputs}
inputNames={inputNames}
outputNames={outputNames}
onToggleInput={handleToggleManualInput}
onToggleOutput={handleToggleManualOutput}
@@ -318,35 +331,35 @@ export default function App() {
<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} />
<OrbitControls makeDefault />
{objects.map(obj => (
<EditableObject
key={obj.id}
data={obj}
isSelected={obj.id === selectedId}
<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))}
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}
<SimulationLoop
isPlaying={isPlaying}
objects={objects}
setObjects={setObjects}
logicRules={logicRules}
manualInputs={manualInputs}
manualOutputs={manualOutputs}
setInputs={setInputs}
setOutputs={setOutputs}
/>
</Canvas>
</div>
<Sidebar
<Sidebar
objects={objects}
selectedId={selectedId}
isPlaying={isPlaying}
@@ -357,12 +370,10 @@ export default function App() {
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
<LadderEditor
logicRules={logicRules}
inputNames={inputNames}
outputNames={outputNames}
@@ -370,7 +381,7 @@ export default function App() {
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))}
onUpdateRule={(id, updates) => setLogicRules(prev => prev.map(r => r.id === id ? { ...r, ...updates } : r))}
/>
)}
</div>