Diseñé y construí un organigrama interactivo que permite a los usuarios ver las organizaciones comerciales en un formato jerárquico. De manera predeterminada, solo se ve la primera fila debajo del nodo raíz del gráfico, pero los usuarios pueden hacer clic para expandir aún más el gráfico y, por lo tanto, cambiar el tamaño del gráfico. Los usuarios también pueden arrastrar y soltar nodos para simular una reorganización del negocio.
Actualmente estoy usando react-zoom-pan-pellizcar para permitir a los usuarios hacer zoom y desplazar el gráfico. Funciona muy bien cuando el organigrama no se ha expandido demasiado, pero se vuelve problemático en escalas de organigrama más grandes.
El problema es que las organizaciones representadas por el gráfico son muy amplias en comparación con su profundidad, lo que significa que un gráfico completamente expandido es un rectángulo horizontal, no un cuadrado. react-zoom-pan-pinch solo me permitirá alejarme hasta la extensión vertical máxima del gráfico, lo que significa que los usuarios no pueden ver una organización completamente expandida sin desplazarse de un lado a otro. Este no es un comportamiento aceptable.
Esto es para el trabajo, por lo que no puedo publicar código sin violar numerosos acuerdos. En su lugar, me he vinculado a la documentación de react-zoom-pan-pinch y repasaré lo que he intentado cambiar.
El primer lugar que busqué fue la sección TransformWrapper Props de la documentación.
Allí encontré los inititalScale , minScale y maxScale .
Puedo establecer la propiedad initialScale en un valor de menos de 1 y obtener algo cercano al resultado que quiero al principio. Establecerlo en 0,5 da como resultado que el gráfico se aleje más de lo que normalmente es posible, pero cuando amplío a un valor de 1, no puedo alejarme. Esto era de esperar, ya que el apoyo minScale todavía estaba configurado en 1.
Habiendo verificado que los accesorios realmente funcionan, continué y configuré minScale en 0.5, asumiendo que podría volver a alejarme a la vista inicial que se ve cuando initialScale está configurado en 0.5. Esto parecía que debería funcionar, pero no fue así. Incluso con la propiedad minScale configurada en 0.5, no puedo alejarme después de acercarme a un valor de 1. Esto es muy extraño para mí, ya que la aceptación de 0.5 como propiedad initialScale y la representación posterior del gráfico indica que los valores por debajo de 1 son aceptables.
Ahora estoy jugando con el resto de los accesorios enumerados en la documentación, pero aún tengo que lograr el resultado deseado (alejamiento infinito).
Creo que la raíz del problema es que react-zoom-pan-pinch está diseñado para imágenes, no para cosas que cambian el tamaño y la relación de aspecto, pero es un buen paquete y preferiría seguir usándolo.
¿Alguien está lo suficientemente familiarizado con este paquete para conocer la configuración que debo usar para permitir un alejamiento infinito y, de ser así, cuáles son esas configuraciones?
Descubrí la respuesta a mi propia pregunta. Resulta que minScale , maxScale y otros accesorios no se pasaban correctamente al componente. Una vez que se pasan correctamente, el paquete funciona muy bien. Aquí está mi explicación/arreglo
La documentación sugiere hacer esto:
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; class Example extends Component { render() { return ( <TransformWrapper initialScale={1} minScale={0.5} maxScale={7} initialPositionX={200} initialPositionY={100} > {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( <React.Fragment> <div className="tools"> <button onClick={() => zoomIn()}>+</button> <button onClick={() => zoomOut()}>-</button> <button onClick={() => resetTransform()}>x</button> </div> <TransformComponent> <img src="image.jpg" alt="test" /> <div>Example text</div> </TransformComponent> </React.Fragment> )} </TransformWrapper> ); } } Lo anterior no funciona, y los minScale y maxScale no se pasan al componente. Si abre las herramientas de desarrollo de React en su navegador y va a TransformWrapper , verá los valores predeterminados de 1 para minScale y 8 para maxScale , no los valores que ingresó en su código.
Puedes resolver el problema creando un objeto:
const transformOptions = { initialScale: 1, minScale: 0.5, maxScale: 2 } Luego, establezca un accesorio de options dentro del componente TransformWrapper igual al objeto, así:
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; class Example extends Component { render() { return ( <TransformWrapper initialScale={1} options={transformOptions} initialPositionX={200} initialPositionY={100} > {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( <React.Fragment> <div className="tools"> <button onClick={() => zoomIn()}>+</button> <button onClick={() => zoomOut()}>-</button> <button onClick={() => resetTransform()}>x</button> </div> <TransformComponent> <img src="image.jpg" alt="test" /> <div>Example text</div> </TransformComponent> </React.Fragment> )} </TransformWrapper> ); } }Lo mismo se aplica a las opciones de panorámica, rueda y zoom. No funcionan si se configuran directamente en el componente como se sugiere en la documentación, pero funcionan si crea objetos como lo hice anteriormente.