From 182c364e3728ca57be316ffd49af8fa46a95ed33 Mon Sep 17 00:00:00 2001
From: arDTDev <tindevil82@gmail.com>
Date: Sun, 21 Dec 2025 23:02:25 +0900
Subject: [PATCH] Feat: Add panning, grid snap, and view control buttons

---
 App.tsx                     |  73 +++++++++++++++++++--
 components/SceneObjects.tsx | 124 ++++++++++++++++++------------------
 2 files changed, 132 insertions(+), 65 deletions(-)

diff --git a/App.tsx b/App.tsx
index 8a2c015..246976a 100644
--- a/App.tsx
+++ b/App.tsx
@@ -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 { 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 { IOPanel } from './components/IOPanel';
 import { LadderEditor } from './components/LadderEditor';
@@ -10,7 +11,7 @@ import {
   IOLogicRule, LogicCondition, LogicAction, ProjectData
 } from './types';
 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) ---
 const SimulationLoop = ({
@@ -137,6 +138,24 @@ export default function App() {
   const [outputNames, setOutputNames] = useState<string[]>(new Array(16).fill(''));
   const [selectedId, setSelectedId] = useState<string | null>(null);
   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(() => {
     if (!isPlaying) {
@@ -267,6 +286,16 @@ export default function App() {
 
           <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">
             <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} />
@@ -325,13 +354,39 @@ export default function App() {
         {/* Center/Right: Dynamic Content based on tab */}
         {activeView === 'layout' ? (
           <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">
               <Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}>
                 <color attach="background" args={['#0f172a']} />
                 <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 />
+                <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 => (
                   <EditableObject
@@ -340,6 +395,7 @@ export default function App() {
                     isSelected={obj.id === selectedId}
                     isPlaying={isPlaying}
                     enableTransform={true}
+                    snap={isSnapEnabled ? 0.5 : null}
                     onSelect={setSelectedId}
                     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))}
@@ -388,3 +444,12 @@ export default function App() {
     </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>
+);
diff --git a/components/SceneObjects.tsx b/components/SceneObjects.tsx
index 4d77452..f3b6943 100644
--- a/components/SceneObjects.tsx
+++ b/components/SceneObjects.tsx
@@ -2,13 +2,13 @@
 import React, { useRef } from 'react';
 import { TransformControls, Text } from '@react-three/drei';
 import * as THREE from 'three';
-import { 
-  SimObject, 
-  ObjectType, 
-  AxisObject, 
-  CylinderObject, 
-  LedObject, 
-  SwitchObject 
+import {
+  SimObject,
+  ObjectType,
+  AxisObject,
+  CylinderObject,
+  LedObject,
+  SwitchObject
 } from '../types';
 
 interface ObjectProps {
@@ -31,8 +31,8 @@ export const LinearAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying,
   const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
 
   return (
-    <group 
-      position={[axis.position.x, axis.position.y, axis.position.z]} 
+    <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); }}
     >
@@ -44,7 +44,7 @@ export const LinearAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying,
         <boxGeometry args={[railLength + 0.5, 0.2, 0.5]} />
         <meshStandardMaterial color="#475569" />
       </mesh>
-      
+
       <mesh position={[safePos, 0.25, 0]}>
         <boxGeometry args={[0.8, 0.3, 0.6]} />
         <meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
@@ -66,12 +66,12 @@ export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying,
   const rotationAngle = (axis.currentValue % 360) * (Math.PI / 180);
 
   return (
-    <group 
-      position={[axis.position.x, axis.position.y, axis.position.z]} 
+    <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">
+      <Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
         {axis.name} ({axis.currentValue.toFixed(0)}°)
       </Text>
 
@@ -91,10 +91,10 @@ export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying,
         </mesh>
       </group>
 
-       {isSelected && !isPlaying && (
+      {isSelected && !isPlaying && (
         <mesh position={[0, 0.4, 0]}>
           <cylinderGeometry args={[0.9, 0.9, 1, 16]} />
-           <primitive object={selectedMaterial} attach="material" />
+          <primitive object={selectedMaterial} attach="material" />
         </mesh>
       )}
     </group>
@@ -108,34 +108,34 @@ export const Cylinder: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, o
   const extension = Math.min(cyl.stroke, Math.max(0, cyl.currentPosition));
 
   return (
-    <group 
-      position={[cyl.position.x, cyl.position.y, cyl.position.z]} 
+    <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); }}
     >
-      <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}
       </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]} />
         <meshStandardMaterial color="#64748b" opacity={0.8} transparent />
       </mesh>
 
-      <mesh 
-        rotation={[0, 0, -Math.PI/2]} 
-        position={[housingLen + (extension/2), 0, 0]}
+      <mesh
+        rotation={[0, 0, -Math.PI / 2]}
+        position={[housingLen + (extension / 2), 0, 0]}
       >
         <cylinderGeometry args={[0.15, 0.15, extension + 0.2, 16]} />
         <meshStandardMaterial color="#cbd5e1" metalness={0.8} roughness={0.2} />
       </mesh>
-       <mesh position={[housingLen + extension, 0, 0]}>
-         <boxGeometry args={[0.2, 0.4, 0.4]} />
-         <meshStandardMaterial color="#475569" />
-       </mesh>
+      <mesh position={[housingLen + extension, 0, 0]}>
+        <boxGeometry args={[0.2, 0.4, 0.4]} />
+        <meshStandardMaterial color="#475569" />
+      </mesh>
 
       {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]} />
           <primitive object={selectedMaterial} attach="material" />
         </mesh>
@@ -147,21 +147,21 @@ export const Cylinder: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, o
 // -- Switch Component --
 export const Switch: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect, onInteract }) => {
   const sw = data as SwitchObject;
-  
+
   return (
-    <group 
-      position={[sw.position.x, sw.position.y, sw.position.z]} 
+    <group
+      position={[sw.position.x, sw.position.y, sw.position.z]}
       rotation={[sw.rotation.x, sw.rotation.y, sw.rotation.z]}
-      onClick={(e) => { 
-        e.stopPropagation(); 
-        if (!isPlaying) onSelect(sw.id); 
-        if(onInteract) onInteract(sw.id);
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!isPlaying) onSelect(sw.id);
+        if (onInteract) onInteract(sw.id);
       }}
     >
       <Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom">
         {sw.name}
       </Text>
-      
+
       <mesh position={[0, 0.1, 0]}>
         <boxGeometry args={[0.6, 0.2, 0.6]} />
         <meshStandardMaterial color="#334155" />
@@ -185,17 +185,17 @@ export const Switch: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onS
 // -- LED Component --
 export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
   const led = data as LedObject;
-  
+
   return (
-    <group 
-      position={[led.position.x, led.position.y, led.position.z]} 
+    <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); }}
     >
       <Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom">
         {led.name}
       </Text>
-      
+
       <mesh position={[0, 0.1, 0]}>
         <cylinderGeometry args={[0.2, 0.25, 0.2, 16]} />
         <meshStandardMaterial color="#334155" />
@@ -203,14 +203,14 @@ export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSele
 
       <mesh position={[0, 0.3, 0]}>
         <sphereGeometry args={[0.2, 16, 16]} />
-        <meshStandardMaterial 
-          color={led.isOn ? led.color : '#334155'} 
+        <meshStandardMaterial
+          color={led.isOn ? led.color : '#334155'}
           emissive={led.isOn ? led.color : '#000000'}
           emissiveIntensity={led.isOn ? 2 : 0}
         />
       </mesh>
 
-       {isSelected && !isPlaying && (
+      {isSelected && !isPlaying && (
         <mesh position={[0, 0.2, 0]}>
           <boxGeometry args={[0.6, 0.6, 0.6]} />
           <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) => {
-  const { data, enableTransform, isPlaying, onUpdate } = props;
+export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean, snap?: number | null }> = (props) => {
+  const { data, enableTransform, isPlaying, onUpdate, snap } = props;
 
   const handleTransformChange = (e: any) => {
     if (e.target.object) {
-        const o = e.target.object;
-        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 o = e.target.object;
+      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 = 
+  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;
+      data.type === ObjectType.AXIS_ROTARY ? RotaryAxis :
+        data.type === ObjectType.CYLINDER ? Cylinder :
+          data.type === ObjectType.SWITCH ? Switch :
+            Led;
 
   return (
     <>
       <Component {...props} />
       {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]}
-            onMouseUp={handleTransformChange}
-            size={0.6}
-            mode="translate"
+        <TransformControls
+          object={undefined}
+          position={[data.position.x, data.position.y, data.position.z]}
+          rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
+          onMouseUp={handleTransformChange}
+          size={0.6}
+          mode="translate"
+          translationSnap={snap ?? undefined}
+          rotationSnap={snap ? Math.PI / 12 : undefined}
         />
       )}
     </>