From 9379ae4dc8ff6c6ff32dceaf4645edd94f400e9c Mon Sep 17 00:00:00 2001 From: santiago Date: Wed, 15 Oct 2025 22:56:44 +0200 Subject: [PATCH] Modificaciones para mover la imagen --- src/app/globals.css | 3 - src/app/page.tsx | 119 +++++++++++++++++++++++++-- src/public/organigrama_FES102025.svg | 1 + 3 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 src/public/organigrama_FES102025.svg diff --git a/src/app/globals.css b/src/app/globals.css index 56da866..b91d4ac 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -22,9 +22,6 @@ } */ -.boton-buscar { - background-color: #c0dff8; -} body { background: var(--background); diff --git a/src/app/page.tsx b/src/app/page.tsx index bd04e45..cbb8ec3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ 'use client' -import React, { useState } from 'react'; +import React, { useState, useRef, useCallback } from 'react'; import Image from 'next/image'; import BuscarFuncionario from '@/components/BuscarFuncionario'; import { Funcionario } from '@/types/Funcionarios'; @@ -9,6 +9,68 @@ import organigrama from '@/public/organigrama_FES102025.png'; // Asegúrate de l export default function Home() { const [resultados, setResultados] = useState([]); + // Zoom / Pan state + const imgRef = useRef(null); + const [scale, setScale] = useState(1); + const [translate, setTranslate] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); + const lastTouch = useRef<{ x: number; y: number } | null>(null); + const isPanning = useRef(false); + const lastMouse = useRef<{ x: number; y: number } | null>(null); + + const clamp = (v: number, a = 0.5, b = 5) => Math.min(Math.max(v, a), b); + + const handleWheel = useCallback((e: React.WheelEvent) => { + e.preventDefault(); + const delta = -e.deltaY; // invert so wheel up = zoom in + const zoomFactor = delta > 0 ? 1.1 : 0.9; + setScale((s) => { + const newScale = clamp(s * zoomFactor); + return newScale; + }); + }, []); + + const handleMouseDown = (e: React.MouseEvent) => { + isPanning.current = true; + lastMouse.current = { x: e.clientX, y: e.clientY }; + }; + + const handleMouseMove = (e: React.MouseEvent) => { + if (!isPanning.current || !lastMouse.current) return; + const dx = e.clientX - lastMouse.current.x; + const dy = e.clientY - lastMouse.current.y; + lastMouse.current = { x: e.clientX, y: e.clientY }; + setTranslate((t) => ({ x: t.x + dx, y: t.y + dy })); + }; + + const handleMouseUp = () => { + isPanning.current = false; + lastMouse.current = null; + }; + + const handleTouchStart = (e: React.TouchEvent) => { + if (e.touches.length === 1) { + const t0 = e.touches[0]; + lastTouch.current = { x: t0.clientX, y: t0.clientY }; + } + }; + + const handleTouchMove = (e: React.TouchEvent) => { + if (e.touches.length === 1 && lastTouch.current) { + const t0 = e.touches[0]; + const dx = t0.clientX - lastTouch.current.x; + const dy = t0.clientY - lastTouch.current.y; + lastTouch.current = { x: t0.clientX, y: t0.clientY }; + setTranslate((t) => ({ x: t.x + dx, y: t.y + dy })); + } + // pinch-to-zoom could be added later + }; + + const zoomIn = () => setScale((s) => clamp(s * 1.2)); + const zoomOut = () => setScale((s) => clamp(s / 1.2)); + const resetView = () => { + setScale(1); + setTranslate({ x: 0, y: 0 }); + }; return (
@@ -21,16 +83,55 @@ export default function Home() {
{resultados.length === 0 ? (
- No hay resultados (lastTouch.current = null)} style={{ - width: '100%', - height: 'auto', + width: '100%', + height: 'auto', + overflow: 'hidden', + touchAction: 'none', + position: 'relative', + borderRadius: 6, + border: '1px solid #ddd', + background: '#fff', }} - /> + > +
+
+
+ Organigrama +
+
+
+ + {/* Controls */} +
+ + + +
+
) : ( resultados.map((persona, i) => ( diff --git a/src/public/organigrama_FES102025.svg b/src/public/organigrama_FES102025.svg new file mode 100644 index 0000000..c96cb35 --- /dev/null +++ b/src/public/organigrama_FES102025.svg @@ -0,0 +1 @@ +DIRECCIÓNDEPARTAMENTO DE LA OFICINA DE PRENSACOORDINACIÓN DE COMUNICACIÓN SOCIALCOORDINACIÓN DE GESTIÓNSECRETARÍA GENERALDIVISIÓN DE MATEMÁTICAS E INGENIERÍADIVISIÓN DE DISEÑO Y EDIFICACIÓNDIVISIÓN DE HUMANIDADESDIVISIÓN DE CIENCIAS Y SOCIOECONÓMICASDIVISIÓN DE CIENCIAS JURÍDICASDIVISIÓN DE SISTEMA DE SUAYEDDIVISIÓN DE SISTEMA DE SUAYEDSECRETARÍA AUXILIAR DE LA SECRETARÍA GENERALSECRETARÍA DE POSGRADO E INVESTIGACIÓNCOORDINACIÓN DE ESTUDIOS DE POSGRADOUNIDAD DE ADMINISTRACIÓN ESCOLARCOORDINACIÓN DEL CENTRO DE ENSEÑANZA DE IDIOMASUNIDAD DEL CENTRO DE INFORMACIÓN Y DOCUMENTACIÓNUNIDAD DEL CENTRO DE DESARROLLO TECNOLÓGICOUNIDAD DE SERVICIOS EDITORIALESUNIDAD DE TALLERES, LABORATORIOS Y AUDIOVISUALESCOORDINACIÓN DEL CENTRO TECNOLÓGICO PARA LA EDUCACIÓN A DISTANCIACOORDINACIÓN DEL CENTRO DE ESTUDIOS MUNICIPALES Y METROPOLITANOSCOORDINACIÓN DEL CENTRO DE DIFUSIÓN CULTURALCOORDINACIÓN DE ACTIVIDADES DEPORTIVAS Y RECREATIVASSECRETARÍA AUXILIAR DE EXTENSIÓN UNIVERSITARIA Y VINCULACIÓN INSTITUCIONALSECRETARÍA TÉCNICA DE EXTENSIÓN UNIVERSITARIA Y VINCULACIÓN INSTITUCIONALSECRETARÍA AUXILIAR DE LA SECRETARÍA DE ASUNTOS ACADÉMICOS ESTUDIANTILESDEPARTAMENTO DE MOVILIDAD ESTUDIANTIL, INTERCAMBIO, BECAS Y SERVICIOS DE SALUDSECRETARÍA AUXILIAR DE POSGRADO E INVESTIGACIÓNCOORDINACIÓN DE LA UNIDAD DE INVESTIGACIÓN MULTIDISCIPLINARIA APLICADASECRETARÍA DE ASUNTOS ACADÉMICOS ESTUDIANTILESSECRETARÍA DE EXTENSIÓN UNIVERSITARIA Y VINCULACIÓN INSTITUCIONALCOORDINACIÓN DE SERVICIOS ACADÉMICOSUNIDAD DE LA OFICINA JURÍDICAUNIDAD DE PLANEACIÓNCOORDINACIÓN DE CUERPOS COLEGIADOSSECRETARÍA ADMINISTRATIVAUNIDAD DE ADMINISTRACIÓN DE RECURSOSSUPERINTENDENCIA DE OBRAS Y MANTENIMIENTOCOORDINACIÓN DE PLANTA DE TRATAMIENTO DE AGUAS RESIDUALESUNIDAD DE SERVICIOS A LA COMUNIDADDEPARTAMENTO DE PROYECTOS ADMINISTRATIVOS \ No newline at end of file