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

Feat: Add panning, grid snap, and view control buttons

Browse Source
This commit is contained in:
tindevil
2025-12-21 23:02:25 +09:00
parent 30b5f94856
commit 182c364e37
2 changed files with 132 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
App.tsx
View File

@@ -1,7 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber'; import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Grid } from '@react-three/drei'; import { MOUSE } from 'three';
import { OrbitControls, Grid, GizmoHelper, GizmoViewcube } 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';
@@ -10,7 +11,7 @@ import {
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, Download, Upload } from 'lucide-react'; import { Layout as LayoutIcon, Cpu, Play, Pause, Square, Download, Upload, Magnet } from 'lucide-react';
// --- Simulation Manager (PLC Scan Cycle) --- // --- Simulation Manager (PLC Scan Cycle) ---
const SimulationLoop = ({ const SimulationLoop = ({
@@ -137,6 +138,24 @@ export default function App() {
const [outputNames, setOutputNames] = useState<string[]>(new Array(16).fill('')); const [outputNames, setOutputNames] = useState<string[]>(new Array(16).fill(''));
const [selectedId, setSelectedId] = useState<string | null>(null); const [selectedId, setSelectedId] = useState<string | null>(null);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [isSnapEnabled, setIsSnapEnabled] = useState(false);
const controlsRef = useRef<any>(null);
const handleSetView = (view: 'TOP' | 'BOTTOM' | 'FRONT' | 'BACK' | 'LEFT' | 'RIGHT') => {
const ctrl = controlsRef.current;
if (!ctrl) return;
const dist = 15;
ctrl.target.set(0, 0, 0);
switch (view) {
case 'TOP': ctrl.object.position.set(0, dist, 0); break;
case 'BOTTOM': ctrl.object.position.set(0, -dist, 0); break;
case 'FRONT': ctrl.object.position.set(0, 0, dist); break;
case 'BACK': ctrl.object.position.set(0, 0, -dist); break;
case 'RIGHT': ctrl.object.position.set(dist, 0, 0); break;
case 'LEFT': ctrl.object.position.set(-dist, 0, 0); break;
}
ctrl.update();
};
useEffect(() => { useEffect(() => {
if (!isPlaying) { if (!isPlaying) {
@@ -267,6 +286,16 @@ export default function App() {
<div className="h-8 w-[1px] bg-gray-800 mx-2" /> <div className="h-8 w-[1px] bg-gray-800 mx-2" />
<button
onClick={() => setIsSnapEnabled(!isSnapEnabled)}
className={`p-2 rounded-lg transition-all ${isSnapEnabled ? 'bg-blue-600 text-white shadow shadow-blue-500/50' : 'bg-gray-950 text-gray-500 hover:text-gray-300 border border-gray-800'}`}
title={isSnapEnabled ? "Snap: ON (1.0 Unit)" : "Snap: OFF"}
>
<Magnet size={18} />
</button>
<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"> <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"> <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} /> <Download size={18} />
@@ -325,13 +354,39 @@ export default function App() {
{/* Center/Right: Dynamic Content based on tab */} {/* Center/Right: Dynamic Content based on tab */}
{activeView === 'layout' ? ( {activeView === 'layout' ? (
<div className="flex-1 flex overflow-hidden relative"> <div className="flex-1 flex overflow-hidden relative">
{/* View Controls Overlay */}
<div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 flex gap-2">
<div className="bg-gray-900/90 p-1.5 rounded-xl border border-gray-700/50 backdrop-blur-sm shadow-xl flex items-center gap-1">
<ViewBtn label="TOP" onClick={() => handleSetView('TOP')} color="text-blue-400" />
<ViewBtn label="BTM" onClick={() => handleSetView('BOTTOM')} color="text-blue-400" />
<div className="w-[1px] h-4 bg-gray-700 mx-1" />
<ViewBtn label="FRT" onClick={() => handleSetView('FRONT')} color="text-red-400" />
<ViewBtn label="BCK" onClick={() => handleSetView('BACK')} color="text-red-400" />
<div className="w-[1px] h-4 bg-gray-700 mx-1" />
<ViewBtn label="L" onClick={() => handleSetView('LEFT')} color="text-green-400" />
<ViewBtn label="R" onClick={() => handleSetView('RIGHT')} color="text-green-400" />
</div>
</div>
<div className="flex-1 relative cursor-crosshair"> <div className="flex-1 relative cursor-crosshair">
<Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}> <Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}>
<color attach="background" args={['#0f172a']} /> <color attach="background" args={['#0f172a']} />
<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 /> <OrbitControls
ref={controlsRef}
makeDefault
mouseButtons={{
LEFT: MOUSE.ROTATE,
MIDDLE: MOUSE.PAN,
RIGHT: MOUSE.PAN
}}
/>
<GizmoHelper alignment="top-right" margin={[80, 80]}>
<GizmoViewcube />
</GizmoHelper>
{objects.map(obj => ( {objects.map(obj => (
<EditableObject <EditableObject
@@ -340,6 +395,7 @@ export default function App() {
isSelected={obj.id === selectedId} isSelected={obj.id === selectedId}
isPlaying={isPlaying} isPlaying={isPlaying}
enableTransform={true} enableTransform={true}
snap={isSnapEnabled ? 0.5 : null}
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))}
@@ -388,3 +444,12 @@ export default function App() {
</div> </div>
); );
} }
const ViewBtn: React.FC<{ label: string, onClick: () => void, color?: string }> = ({ label, onClick, color = "text-gray-400" }) => (
<button
onClick={onClick}
className={`w-8 h-8 flex items-center justify-center rounded-lg bg-gray-950 border border-gray-800 ${color} hover:bg-gray-800 hover:text-white text-[10px] font-black transition-all hover:scale-105 active:scale-95`}
>
{label}
</button>
);

64
components/SceneObjects.tsx
View File

@@ -71,7 +71,7 @@ export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying,
rotation={[axis.rotation.x, axis.rotation.y, axis.rotation.z]} rotation={[axis.rotation.x, axis.rotation.y, axis.rotation.z]}
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(axis.id); }} onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(axis.id); }}
> >
<Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom"> <Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
{axis.name} ({axis.currentValue.toFixed(0)}°) {axis.name} ({axis.currentValue.toFixed(0)}°)
</Text> </Text>
@@ -91,10 +91,10 @@ export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying,
</mesh> </mesh>
</group> </group>
{isSelected && !isPlaying && ( {isSelected && !isPlaying && (
<mesh position={[0, 0.4, 0]}> <mesh position={[0, 0.4, 0]}>
<cylinderGeometry args={[0.9, 0.9, 1, 16]} /> <cylinderGeometry args={[0.9, 0.9, 1, 16]} />
<primitive object={selectedMaterial} attach="material" /> <primitive object={selectedMaterial} attach="material" />
</mesh> </mesh>
)} )}
</group> </group>
@@ -113,29 +113,29 @@ export const Cylinder: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, o
rotation={[cyl.rotation.x, cyl.rotation.y, cyl.rotation.z]} rotation={[cyl.rotation.x, cyl.rotation.y, cyl.rotation.z]}
onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(cyl.id); }} onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(cyl.id); }}
> >
<Text position={[housingLen/2, 0.6, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom"> <Text position={[housingLen / 2, 0.6, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
{cyl.name} {cyl.name}
</Text> </Text>
<mesh rotation={[0, 0, -Math.PI/2]} position={[housingLen/2, 0, 0]}> <mesh rotation={[0, 0, -Math.PI / 2]} position={[housingLen / 2, 0, 0]}>
<cylinderGeometry args={[0.3, 0.3, housingLen, 16]} /> <cylinderGeometry args={[0.3, 0.3, housingLen, 16]} />
<meshStandardMaterial color="#64748b" opacity={0.8} transparent /> <meshStandardMaterial color="#64748b" opacity={0.8} transparent />
</mesh> </mesh>
<mesh <mesh
rotation={[0, 0, -Math.PI/2]} rotation={[0, 0, -Math.PI / 2]}
position={[housingLen + (extension/2), 0, 0]} position={[housingLen + (extension / 2), 0, 0]}
> >
<cylinderGeometry args={[0.15, 0.15, extension + 0.2, 16]} /> <cylinderGeometry args={[0.15, 0.15, extension + 0.2, 16]} />
<meshStandardMaterial color="#cbd5e1" metalness={0.8} roughness={0.2} /> <meshStandardMaterial color="#cbd5e1" metalness={0.8} roughness={0.2} />
</mesh> </mesh>
<mesh position={[housingLen + extension, 0, 0]}> <mesh position={[housingLen + extension, 0, 0]}>
<boxGeometry args={[0.2, 0.4, 0.4]} /> <boxGeometry args={[0.2, 0.4, 0.4]} />
<meshStandardMaterial color="#475569" /> <meshStandardMaterial color="#475569" />
</mesh> </mesh>
{isSelected && !isPlaying && ( {isSelected && !isPlaying && (
<mesh position={[housingLen/2 + extension/2, 0, 0]}> <mesh position={[housingLen / 2 + extension / 2, 0, 0]}>
<boxGeometry args={[housingLen + extension + 0.5, 0.7, 0.7]} /> <boxGeometry args={[housingLen + extension + 0.5, 0.7, 0.7]} />
<primitive object={selectedMaterial} attach="material" /> <primitive object={selectedMaterial} attach="material" />
</mesh> </mesh>
@@ -155,7 +155,7 @@ export const Switch: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onS
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (!isPlaying) onSelect(sw.id); if (!isPlaying) onSelect(sw.id);
if(onInteract) onInteract(sw.id); if (onInteract) onInteract(sw.id);
}} }}
> >
<Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom"> <Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom">
@@ -210,7 +210,7 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
/> />
</mesh> </mesh>
{isSelected && !isPlaying && ( {isSelected && !isPlaying && (
<mesh position={[0, 0.2, 0]}> <mesh position={[0, 0.2, 0]}>
<boxGeometry args={[0.6, 0.6, 0.6]} /> <boxGeometry args={[0.6, 0.6, 0.6]} />
<primitive object={selectedMaterial} attach="material" /> <primitive object={selectedMaterial} attach="material" />
@@ -220,37 +220,39 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
); );
}; };
export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean }> = (props) => { export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean, snap?: number | null }> = (props) => {
const { data, enableTransform, isPlaying, onUpdate } = props; const { data, enableTransform, isPlaying, onUpdate, snap } = props;
const handleTransformChange = (e: any) => { const handleTransformChange = (e: any) => {
if (e.target.object) { if (e.target.object) {
const o = 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 }, 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 } rotation: { x: o.rotation.x, y: o.rotation.y, z: o.rotation.z }
}); });
} }
}; };
const Component = const Component =
data.type === ObjectType.AXIS_LINEAR ? LinearAxis : data.type === ObjectType.AXIS_LINEAR ? LinearAxis :
data.type === ObjectType.AXIS_ROTARY ? RotaryAxis : data.type === ObjectType.AXIS_ROTARY ? RotaryAxis :
data.type === ObjectType.CYLINDER ? Cylinder : data.type === ObjectType.CYLINDER ? Cylinder :
data.type === ObjectType.SWITCH ? Switch : data.type === ObjectType.SWITCH ? Switch :
Led; Led;
return ( return (
<> <>
<Component {...props} /> <Component {...props} />
{props.isSelected && enableTransform && !isPlaying && ( {props.isSelected && enableTransform && !isPlaying && (
<TransformControls <TransformControls
object={undefined} object={undefined}
position={[data.position.x, data.position.y, data.position.z]} position={[data.position.x, data.position.y, data.position.z]}
rotation={[data.rotation.x, data.rotation.y, data.rotation.z]} rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
onMouseUp={handleTransformChange} onMouseUp={handleTransformChange}
size={0.6} size={0.6}
mode="translate" mode="translate"
translationSnap={snap ?? undefined}
rotationSnap={snap ? Math.PI / 12 : undefined}
/> />
)} )}
</> </>