DrawPane zoom messing up the view

[NeilAgg]

You can see this behavior on the Zoom & Pan showcase https://smartclient.com/smartgwt/showcase/#zoom_and_pan

Set the zoom to 1 and move the pane so you can see the Line and Sector:


Now, change the zoom to 2 and without doing anything else, you are looking at the Curve:


This is undesirable. How do I keep the view in the same place when I zoom in and out?

[Isomorphic]

The zoom and pan methods do what they say they do to the viewport; what you are looking for is a combination of zooming and panning.

You should probably just create a single slider and do the coordinate math to apply the combination of change in zoom and position that you want.

[NeilAgg]

You should probably just create a single slider and do the coordinate math to apply the combination of change in zoom and position that you want

OK, I will look into that.

[NeilAgg]

The DrawPane JavaDoc page mentions there is a viewbox coordinate system when drag scrolling is enabled.
I am having trouble understanding how to get the location of the viewbox and its size.
I tried to use getScrollLeft(), but that is not giving me numbers I expect.
Is there a guide on this? I have searched the Internet and this forum and not finding anything.

[Isomorphic]

If your goal is to zoom in on the center of the viewport, then what you're probably looking for is how to get the position of the viewport in viewbox coordinates. The viewbox's width and height are specified by drawingWidth and drawingHeight, respectively. and when zoomed the viewport will only show a portion of this.

First we can modify the ZoomAndPanSample SGWT example you referenced, extending the DrawPane class with APIs to access the viewport position in viewbox coordinates:

    private MyDrawPane drawPane; // type changed to MyDrawPane

    static class MyDrawPane extends DrawPane { // new code...

        public double getViewPortLeftInViewBox() {
            return this.getScrollLeft() / this.getZoomLevel();
        }

        public double getViewPortTopInViewBox() {
            return this.getScrollTop() / this.getZoomLevel();
        }

        public double getViewPortWidthInViewBox() {
            return this.getInnerContentWidth() / this.getZoomLevel();
        }

        public double getViewPortHeightInViewBox() {
            return this.getInnerContentHeight() / this.getZoomLevel();
        }
    }

Then we can modify the handler for the zoom slider to reposition the viewport as a zoom occurs:

    ValueChangedHandler zoomSliderValueChangeHandler = new ValueChangedHandler() {
            @Override
            public void onValueChanged(ValueChangedEvent event) {
                if (!drawPane.isCreated()) return;
                double newZoom = event.getValue();

                // calculate the center of the viewport in viewbox coordinates
                double centerX = drawPane.getViewPortLeftInViewBox() + drawPane.getViewPortWidthInViewBox()/2;
                double centerY = drawPane.getViewPortTopInViewBox() + drawPane.getViewPortHeightInViewBox()/2;

                // update the zoom value
                drawPane.zoom(newZoom);

                // restore the original center, relative to viewbox coordinates
                drawPane.scrollTo((int)(newZoom * centerX - drawPane.getInnerContentWidth()/2),
                                  (int)(newZoom * centerY - drawPane.getInnerContentHeight()/2));
            }
    };

Now when you move the slider, the zoom targets the center of the content. Note that it will still move off center as you're zooming out if you hit the edge of the viewbox.

We'll add the APIs to get the viewport location in viewbox coordinates, but you'll have to handle applying the special zoom behavior you want.

Note also that the documentation should say "the viewbox coordinate system is the drawing coordinate system with the DrawPane.translate and DrawPane.rotation transforms applied." The zoomLevel doesn't get applied to the viewbox coordinate system. We''ll correct this.

[NeilAgg]

This is great, thank you!