visualizer-zoomable
Some visualizer implementations will provide their own zooming and panning functionality. For example, the SpeckleViewer handles this with a 3D camera and map controls like MapboxGL provide this.
However, for other content such as Colorizer canvases or SVG imagery, we want a standard solution to provide that functionality.
This code builds on the TransformComponent and TransformWrapper components from "react-zoom-pan-pinch", but simplifies and standardizes the implementation within the Visualizer.
Single vs Multiple
The Visualizer allows numerous configurations for layouts on screen.
One at a time
One viewer may be shown at a time; with the option to switch to a different viewer;
<div className={'stage'}>
{activeView === 'colorizer' && <Zoomable ...zoomBindings()><ColorizerViewer ...bindings() /></Zoomable>}
{activeView === 'html' && <HtmlViewer ...bindings() />}
</div>
Multiple, Independent Controls
Multiple viewers may be shown side by side, and controlled independently.
<div className={'stage'}>
<Zoomable ...zoomBindings()><ColorizerViewer ...bindings() /></Zoomable>
</div>
<div className={'stage'}>
<HtmlViewer ...bindings() />
</div>
Multiple, Shared Controls
Multiple viewers may share space on the same larger 'canvas' and be controlled by a single zoom/pan controller.
<div className={'stage'}>
<Zoomable ...zoomBindings()>
<div className={'zoomies'}>
<div className={'positioned'} style={getPosition(0)}>
<ColorizerViewer ...bindings() />
</div>
<div className={'positioned'} style={getPosition(1)}>
<HtmlViewer ...bindings() />
</div>
</div>
</Zoomable>
</div>
The current implementation returns a viewer object that each app can maintain that exposes functions like zoomIn etc However, this does not support the use case where viewers are combined on the same canvas.
Perhaps we can return and manage a series of iZoomables instead. these would be returned for each zoomable element.
How do we connect these to the zoom actions within the TransformWrapper?