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

2025-12-21 23:02:25 +09:00
parent 30b5f94856
commit 182c364e37
2 changed files with 132 additions and 65 deletions
--- 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>
+);
--- a/components/SceneObjects.tsx
+++ b/components/SceneObjects.tsx
@@ -220,8 +220,8 @@ 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) {
@@ -251,6 +251,8 @@ export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean }
          onMouseUp={handleTransformChange}
          size={0.6}
          mode="translate"
+          translationSnap={snap ?? undefined}
+          rotationSnap={snap ? Math.PI / 12 : undefined}
        />
      )}
    </>