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 { Sidebar } from './components/Sidebar';
import { IOPanel } from './components/IOPanel'; import { IOPanel } from './components/IOPanel';
import { LadderEditor } from './components/LadderEditor'; import { LadderEditor } from './components/LadderEditor';
import { import {
SimObject, ObjectType, AxisObject, CylinderObject, SwitchObject, LedObject, SimObject, ObjectType, AxisObject, CylinderObject, SwitchObject, LedObject,
IOLogicRule, LogicCondition, LogicAction, ProjectData IOLogicRule, LogicCondition, LogicAction, ProjectData
} from './types'; } from './types';
import { EditableObject } from './components/SceneObjects'; 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) --- // --- Simulation Manager (PLC Scan Cycle) ---
const SimulationLoop = ({ const SimulationLoop = ({
isPlaying, isPlaying,
objects, objects,
setObjects, setObjects,
logicRules, logicRules,
manualInputs, manualInputs,
manualOutputs, manualOutputs,
setInputs, setInputs,
setOutputs setOutputs
}: { }: {
isPlaying: boolean, isPlaying: boolean,
objects: SimObject[], objects: SimObject[],
setObjects: React.Dispatch<React.SetStateAction<SimObject[]>>, setObjects: React.Dispatch<React.SetStateAction<SimObject[]>>,
logicRules: IOLogicRule[], logicRules: IOLogicRule[],
manualInputs: boolean[], manualInputs: boolean[],
@@ -32,7 +32,7 @@ const SimulationLoop = ({
setInputs: (inputs: boolean[]) => void, setInputs: (inputs: boolean[]) => void,
setOutputs: (outputs: boolean[]) => void setOutputs: (outputs: boolean[]) => void
}) => { }) => {
useFrame((state, delta) => { useFrame((state, delta) => {
if (!isPlaying) return; if (!isPlaying) return;
@@ -78,39 +78,39 @@ const SimulationLoop = ({
let changed = false; let changed = false;
if (obj.type === ObjectType.LED) { if (obj.type === ObjectType.LED) {
const led = obj as LedObject; const led = obj as LedObject;
const shouldBeOn = effectiveOutputs[led.outputPort]; const shouldBeOn = effectiveOutputs[led.outputPort];
if (led.isOn !== shouldBeOn) { if (led.isOn !== shouldBeOn) {
newObj = { ...led, isOn: shouldBeOn }; newObj = { ...led, isOn: shouldBeOn };
changed = true; changed = true;
} }
} }
else if (obj.type === ObjectType.CYLINDER) { else if (obj.type === ObjectType.CYLINDER) {
const cyl = obj as CylinderObject; const cyl = obj as CylinderObject;
const shouldExtend = effectiveOutputs[cyl.outputPort]; const shouldExtend = effectiveOutputs[cyl.outputPort];
const targetPos = shouldExtend ? cyl.stroke : 0; const targetPos = shouldExtend ? cyl.stroke : 0;
if (Math.abs(cyl.currentPosition - targetPos) > 0.01) { if (Math.abs(cyl.currentPosition - targetPos) > 0.01) {
const step = cyl.speed * delta * 5; const step = cyl.speed * delta * 5;
if (cyl.currentPosition < targetPos) { if (cyl.currentPosition < targetPos) {
newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.min(targetPos, cyl.currentPosition + step) }; newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.min(targetPos, cyl.currentPosition + step) };
} else { } else {
newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.max(targetPos, cyl.currentPosition - step) }; newObj = { ...cyl, extended: shouldExtend, currentPosition: Math.max(targetPos, cyl.currentPosition - step) };
} }
changed = true; changed = true;
} }
} }
else if (obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) { else if (obj.type === ObjectType.AXIS_LINEAR || obj.type === ObjectType.AXIS_ROTARY) {
const axis = obj as AxisObject; const axis = obj as AxisObject;
if (axis.currentValue !== axis.targetValue) { if (axis.currentValue !== axis.targetValue) {
const diff = axis.targetValue - axis.currentValue; const diff = axis.targetValue - axis.currentValue;
const step = axis.speed * delta * 10; const step = axis.speed * delta * 10;
if (Math.abs(diff) < step) { if (Math.abs(diff) < step) {
newObj = { ...axis, currentValue: axis.targetValue }; newObj = { ...axis, currentValue: axis.targetValue };
} else { } else {
newObj = { ...axis, currentValue: axis.currentValue + Math.sign(diff) * step }; newObj = { ...axis, currentValue: axis.currentValue + Math.sign(diff) * step };
}
changed = true;
} }
changed = true;
}
} }
if (changed) hasChanges = true; if (changed) hasChanges = true;
@@ -127,7 +127,7 @@ export default function App() {
const [activeView, setActiveView] = useState<'layout' | 'logic'>('layout'); const [activeView, setActiveView] = useState<'layout' | 'logic'>('layout');
const [objects, setObjects] = useState<SimObject[]>([]); const [objects, setObjects] = useState<SimObject[]>([]);
const [logicRules, setLogicRules] = useState<IOLogicRule[]>([]); const [logicRules, setLogicRules] = useState<IOLogicRule[]>([]);
const [inputs, setInputs] = useState<boolean[]>(new Array(16).fill(false)); const [inputs, setInputs] = useState<boolean[]>(new Array(16).fill(false));
const [outputs, setOutputs] = 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 [manualInputs, setManualInputs] = useState<boolean[]>(new Array(16).fill(false));
@@ -178,11 +178,11 @@ export default function App() {
setManualInputs(new Array(16).fill(false)); setManualInputs(new Array(16).fill(false));
setManualOutputs(new Array(16).fill(false)); setManualOutputs(new Array(16).fill(false));
setObjects(prev => prev.map(o => { 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.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.CYLINDER) return { ...o, currentPosition: 0, extended: false };
if(o.type === ObjectType.LED) return {...o, isOn: false}; if (o.type === ObjectType.LED) return { ...o, isOn: false };
if(o.type === ObjectType.SWITCH) return {...o, isOn: false}; if (o.type === ObjectType.SWITCH) return { ...o, isOn: false };
return o; return o;
})); }));
}; };
@@ -218,19 +218,19 @@ export default function App() {
let newObj: SimObject; let newObj: SimObject;
switch (type) { switch (type) {
case ObjectType.AXIS_LINEAR: 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; break;
case ObjectType.AXIS_ROTARY: 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; break;
case ObjectType.CYLINDER: 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; break;
case ObjectType.SWITCH: 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; break;
case ObjectType.LED: 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; break;
default: return; default: return;
} }
@@ -241,7 +241,7 @@ export default function App() {
return ( return (
<div className="flex flex-col w-screen h-screen bg-black text-white overflow-hidden font-sans"> <div className="flex flex-col w-screen h-screen bg-black text-white overflow-hidden font-sans">
{/* Top Navigation */} {/* 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="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-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> <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> <span className="font-bold tracking-tight text-lg">MotionSim</span>
</div> </div>
<div className="flex bg-gray-950 p-1 rounded-xl border border-gray-800 shadow-inner"> <div className="flex bg-gray-950 p-1 rounded-xl border border-gray-800 shadow-inner">
<button <button
onClick={() => setActiveView('layout')} 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'}`} 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 <button
onClick={() => setActiveView('logic')} 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'}`} 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> </button>
</div> </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> </div>
{/* Global Controls */} {/* Global Controls */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{isPlaying && ( {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="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]" /> <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> <span className="text-[10px] font-black text-green-400 tracking-[0.2em] uppercase">PLC ACTIVE</span>
</div> </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"> <div className="flex items-center gap-2 bg-gray-950 p-1 rounded-xl border border-gray-800">
<button <button
onClick={() => setIsPlaying(!isPlaying)} onClick={() => setIsPlaying(!isPlaying)}
title={isPlaying ? "Stop PLC" : "Start PLC"} 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'}`} 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</>} {isPlaying ? <><Pause size={14} /> STOP</> : <><Play size={14} /> RUN</>}
</button> </button>
<button <button
onClick={handleReset} onClick={handleReset}
title="Reset System" title="Reset System"
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-all" className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-all"
> >
<Square size={16} fill="currentColor" /> <Square size={16} fill="currentColor" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
{/* Main Content Area */} {/* Main Content Area */}
<div className="flex-1 flex overflow-hidden"> <div className="flex-1 flex overflow-hidden">
{/* Left Side: Permanent IO Panel */} {/* Left Side: Permanent IO Panel */}
<IOPanel <IOPanel
inputs={inputs} inputs={inputs}
outputs={outputs} outputs={outputs}
inputNames={inputNames} inputNames={inputNames}
outputNames={outputNames} outputNames={outputNames}
onToggleInput={handleToggleManualInput} onToggleInput={handleToggleManualInput}
onToggleOutput={handleToggleManualOutput} onToggleOutput={handleToggleManualOutput}
@@ -318,35 +331,35 @@ export default function App() {
<ambientLight intensity={0.5} /> <ambientLight intensity={0.5} />
<directionalLight position={[10, 10, 5]} intensity={1} castShadow /> <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 /> <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 => ( {objects.map(obj => (
<EditableObject <EditableObject
key={obj.id} key={obj.id}
data={obj} data={obj}
isSelected={obj.id === selectedId} isSelected={obj.id === selectedId}
isPlaying={isPlaying} isPlaying={isPlaying}
enableTransform={true} enableTransform={true}
onSelect={setSelectedId} 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))} onInteract={(id) => setObjects(prev => prev.map(o => (o.id === id && o.type === ObjectType.SWITCH) ? { ...o, isOn: !o.isOn } as SwitchObject : o))}
/> />
))} ))}
<SimulationLoop <SimulationLoop
isPlaying={isPlaying} isPlaying={isPlaying}
objects={objects} objects={objects}
setObjects={setObjects} setObjects={setObjects}
logicRules={logicRules} logicRules={logicRules}
manualInputs={manualInputs} manualInputs={manualInputs}
manualOutputs={manualOutputs} manualOutputs={manualOutputs}
setInputs={setInputs} setInputs={setInputs}
setOutputs={setOutputs} setOutputs={setOutputs}
/> />
</Canvas> </Canvas>
</div> </div>
<Sidebar <Sidebar
objects={objects} objects={objects}
selectedId={selectedId} selectedId={selectedId}
isPlaying={isPlaying} 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))} onUpdateObject={(id, updates) => setObjects(prev => prev.map(o => o.id === id ? { ...o, ...updates } as SimObject : o))}
onSelect={setSelectedId} onSelect={setSelectedId}
onUpdatePortName={handleUpdatePortName} onUpdatePortName={handleUpdatePortName}
onExport={handleExport}
onImport={handleImport}
/> />
</div> </div>
) : ( ) : (
<LadderEditor <LadderEditor
logicRules={logicRules} logicRules={logicRules}
inputNames={inputNames} inputNames={inputNames}
outputNames={outputNames} outputNames={outputNames}
@@ -370,7 +381,7 @@ export default function App() {
currentOutputs={outputs} currentOutputs={outputs}
onAddRule={(r) => setLogicRules(prev => [...prev, r])} onAddRule={(r) => setLogicRules(prev => [...prev, r])}
onDeleteRule={(id) => setLogicRules(prev => prev.filter(r => r.id !== id))} 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> </div>

16
Dockerfile Normal file
View File

@@ -0,0 +1,16 @@
# 1단계: 빌드 (Node.js)
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# 2단계: 실행 (Nginx)
FROM nginx:stable-alpine
# 빌드된 파일들을 Nginx의 기본 경로로 복사
COPY --from=build /app/dist /usr/share/nginx/html
# (선택) 커스텀 nginx 설정을 넣고 싶다면 아래 주석 해제
# COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

76
components/Sidebar.tsx
View File

@@ -1,12 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Trash2, Trash2,
Settings, Link as LinkIcon, Move, RotateCw, Power, Settings, Link as LinkIcon, Move, RotateCw, Power,
Download, Upload, Box Download, Upload, Box
} from 'lucide-react'; } from 'lucide-react';
import { import {
SimObject, ObjectType, AxisObject, SimObject, ObjectType, AxisObject,
CylinderObject, LedObject, SwitchObject CylinderObject, LedObject, SwitchObject
} from '../types'; } from '../types';
@@ -21,8 +21,6 @@ interface SidebarProps {
onUpdateObject: (id: string, updates: Partial<SimObject>) => void; onUpdateObject: (id: string, updates: Partial<SimObject>) => void;
onSelect: (id: string | null) => void; onSelect: (id: string | null) => void;
onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void; onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
onExport: () => void;
onImport: (e: React.ChangeEvent<HTMLInputElement>) => void;
} }
export const Sidebar: React.FC<SidebarProps> = ({ export const Sidebar: React.FC<SidebarProps> = ({
@@ -34,9 +32,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
onAddObject, onAddObject,
onDeleteObject, onDeleteObject,
onUpdateObject, onUpdateObject,
onUpdatePortName, onUpdatePortName
onExport,
onImport
}) => { }) => {
const [activeTab, setActiveTab] = useState<'properties' | 'system'>('properties'); const [activeTab, setActiveTab] = useState<'properties' | 'system'>('properties');
const selectedObject = objects.find(o => o.id === selectedId); const selectedObject = objects.find(o => o.id === selectedId);
@@ -50,8 +46,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors" className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors"
value={value} value={value}
onChange={(e) => { onChange={(e) => {
const val = type === 'number' ? parseFloat(e.target.value) : e.target.value; const val = type === 'number' ? parseFloat(e.target.value) : e.target.value;
onChange(val); onChange(val);
}} }}
/> />
</div> </div>
@@ -59,18 +55,18 @@ export const Sidebar: React.FC<SidebarProps> = ({
return ( 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"> <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 */} {/* Sub-navigation */}
<div className="p-4 border-b border-gray-800 bg-gray-950/50 flex items-center justify-between"> <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> <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"> <div className="flex bg-gray-800 p-1 rounded-lg">
<button <button
onClick={() => setActiveTab('properties')} 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'}`} 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 Props
</button> </button>
<button <button
onClick={() => setActiveTab('system')} 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'}`} 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'}`}
> >
@@ -83,11 +79,11 @@ export const Sidebar: React.FC<SidebarProps> = ({
<> <>
{/* Tool Box */} {/* Tool Box */}
<div className="p-4 grid grid-cols-3 gap-2 border-b border-gray-800 bg-gray-950/20"> <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={<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={<RotateCw size={16} />} label="Rot Axis" onClick={() => onAddObject(ObjectType.AXIS_ROTARY)} />
<ToolBtn icon={<LinkIcon size={16}/>} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} /> <ToolBtn icon={<LinkIcon size={16} />} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} />
<ToolBtn icon={<Power size={16}/>} label="Switch" onClick={() => onAddObject(ObjectType.SWITCH)} /> <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)} /> <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> </div>
{/* Properties Form */} {/* Properties Form */}
@@ -95,7 +91,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
{!selectedObject ? ( {!selectedObject ? (
<div className="flex flex-col items-center justify-center h-64 text-gray-600 opacity-50 space-y-3"> <div className="flex flex-col items-center justify-center h-64 text-gray-600 opacity-50 space-y-3">
<Box size={32} /> <Box size={32} />
<p className="text-[10px] font-black uppercase tracking-widest text-center">Select an object<br/>to edit properties</p> <p className="text-[10px] font-black uppercase tracking-widest text-center">Select an object<br />to edit properties</p>
</div> </div>
) : ( ) : (
<div className="space-y-6"> <div className="space-y-6">
@@ -108,12 +104,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
<div className="bg-gray-950/50 p-4 rounded-xl border border-gray-800/50 space-y-4"> <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 }))} {renderInput("Object Name", selectedObject.name, (val) => onUpdateObject(selectedObject.id, { name: val }))}
{selectedObject.type === ObjectType.SWITCH && ( {selectedObject.type === ObjectType.SWITCH && (
<> <>
<div> <div>
<label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Assigned Input Port</label> <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Assigned Input Port</label>
<select <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" 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} value={(selectedObject as SwitchObject).inputPort}
onChange={(e) => onUpdateObject(selectedObject.id, { inputPort: parseInt(e.target.value) })} onChange={(e) => onUpdateObject(selectedObject.id, { inputPort: parseInt(e.target.value) })}
@@ -134,7 +130,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
<> <>
<div> <div>
<label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label> <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label>
<select <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" 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} value={(selectedObject as LedObject).outputPort}
onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })} onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })}
@@ -149,11 +145,11 @@ export const Sidebar: React.FC<SidebarProps> = ({
)} )}
{(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && ( {(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && (
<div> <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> <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} <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) })} 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" /> className="w-full h-1.5 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-500" />
</div> </div>
)} )}
</div> </div>
@@ -165,29 +161,19 @@ export const Sidebar: React.FC<SidebarProps> = ({
{activeTab === 'system' && ( {activeTab === 'system' && (
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-6"> <div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-6">
<div className="grid grid-cols-2 gap-2">
<button onClick={onExport} className="bg-blue-600 hover:bg-blue-500 py-2.5 rounded-lg text-xs font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-900/20">
<Download size={14}/> EXPORT
</button>
<label className="bg-purple-600 hover:bg-purple-500 py-2.5 rounded-lg text-xs font-bold flex items-center justify-center gap-2 cursor-pointer transition-all shadow-lg shadow-purple-900/20">
<Upload size={14}/> IMPORT
<input type="file" className="hidden" accept=".json" onChange={onImport} />
</label>
</div>
<div className="space-y-4"> <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> <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 className="space-y-6">
<div> <div>
<h4 className="text-[10px] font-bold text-green-500 mb-3 uppercase flex items-center gap-2"> <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) <div className="w-1.5 h-1.5 rounded-full bg-green-500" /> Inputs (X0 - X15)
</h4> </h4>
<div className="grid gap-1"> <div className="grid gap-1">
{inputNames.map((name, i) => ( {inputNames.map((name, i) => (
<div key={i} className="flex items-center gap-2 group"> <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> <span className="w-6 text-[9px] text-gray-600 font-mono">X{i.toString().padStart(2, '0')}</span>
<input <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" 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..." placeholder="Tag name..."
value={name} value={name}
@@ -200,13 +186,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
<div> <div>
<h4 className="text-[10px] font-bold text-red-500 mb-3 uppercase flex items-center gap-2"> <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) <div className="w-1.5 h-1.5 rounded-full bg-red-500" /> Outputs (Y0 - Y15)
</h4> </h4>
<div className="grid gap-1"> <div className="grid gap-1">
{outputNames.map((name, i) => ( {outputNames.map((name, i) => (
<div key={i} className="flex items-center gap-2 group"> <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> <span className="w-6 text-[9px] text-gray-600 font-mono">Y{i.toString().padStart(2, '0')}</span>
<input <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" 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..." placeholder="Tag name..."
value={name} value={name}
@@ -225,7 +211,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
}; };
const ToolBtn: React.FC<{ icon: React.ReactNode, label: string, onClick: () => void }> = ({ icon, label, onClick }) => ( const ToolBtn: React.FC<{ icon: React.ReactNode, label: string, onClick: () => void }> = ({ icon, label, onClick }) => (
<button <button
onClick={onClick} onClick={onClick}
className="flex flex-col items-center justify-center p-3 bg-gray-950 border border-gray-800 rounded-xl hover:bg-gray-800 hover:border-blue-500 hover:scale-[1.05] transition-all group" className="flex flex-col items-center justify-center p-3 bg-gray-950 border border-gray-800 rounded-xl hover:bg-gray-800 hover:border-blue-500 hover:scale-[1.05] transition-all group"
> >

37
vite.config.ts
View File

@@ -3,21 +3,26 @@ import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
const env = loadEnv(mode, '.', ''); const env = loadEnv(mode, '.', '');
return { return {
server: { base: '/motionsim/',
port: 3000, server: {
host: '0.0.0.0', port: 4173,
}, host: '0.0.0.0',
plugins: [react()], },
define: { preview: {
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), port: 4173,
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) host: '0.0.0.0',
}, },
resolve: { plugins: [react()],
alias: { define: {
'@': path.resolve(__dirname, '.'), 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
} 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
},
resolve: {
alias: {
'@': path.resolve(__dirname, '.'),
} }
}; }
};
}); });