Thumbnail viewer mouse position offset

[tanthammar]

On the demo page for Thumbnail viewer. The positioning of the mouse pointer is not aligned with the click in the rectangle. The pointer is outside the rectangle restrained by the thumbnail container so it is impossible to move the image down-right. If you click inside the rectangle the pointer moves down-right when you start to drag. (tested on Chrome 61.0.3163.100 and Safari 11.0)

Also pinching on a mac powerbook does not work in safari. It envokes safaris minimize window function. On a powerbook panzoom only works with a separate mouse or using the +/- buttons. (macOS High Sierra v10.13, Safari 11.0)

[bumbu]

Hi @tanthammar

Thank you for the report. It would be super useful if you could open separate issues for all 3 issues you reported (say leave this issue for thumbnail viewer and open 2 more the other 2 issues). This way we can discuss them separately and hopefully have some progress at least for few of them.

Best, Alex

[dgroh]

Hi it's been one year since this issue. Is there any workaround for this?

[boshka]

Hi, Alex! is there a fix for the "mouse pointer is not aligned with the click in the rectangle"? The rectangle shall not do a jump once pan starts (observed in Goggle Chrome). Thank you!

[Iftahh]

I found a bug in the thumbnail pan - when dragging moving the mouse in the thumbnail the main pan wasn't calculated correctly.

I fixed it by changing the code to this

        var _updateMainViewPan = function(offsetX, offsetY, scopeContainer, main, thumb){
            var mainWidth   = main.getSizes().width
            , mainHeight  = main.getSizes().height
            , mainZoom    = main.getSizes().realZoom
            , thumbZoom =  thumb.getSizes().realZoom
            , thumbPanX = thumb.getPan().x
            , thumbPanY = thumb.getPan().y;

            var mainByThumbZoomRatio = mainZoom / thumbZoom;

            var scopeWidth = mainWidth / mainByThumbZoomRatio;
            var scopeHeight = mainHeight / mainByThumbZoomRatio;
            var newPanX = (offsetX - thumbPanX - scopeWidth/2);
            var newPanY = (offsetY - thumbPanY - scopeHeight/2);
            var mainPanX = -newPanX * mainByThumbZoomRatio;
            var mainPanY = -newPanY * mainByThumbZoomRatio;
            main.pan({x:mainPanX, y:mainPanY});
        };

        var updateMainViewPan = function(evt){
            if(evt.which == 0 && evt.button == 0){
                return false;
            }
            var scopeContainer = document.getElementById('scopeContainer');
            _updateMainViewPan(evt.offsetX, evt.offsetY, scopeContainer, main, thumb);
        }

[rmelchner]

@Iftahh your solution is working - thank you.

[echolove38]

I found a bug in the thumbnail pan - when dragging moving the mouse in the thumbnail the main pan wasn't calculated correctly.

I fixed it by changing the code to this

        var _updateMainViewPan = function(offsetX, offsetY, scopeContainer, main, thumb){
            var mainWidth   = main.getSizes().width
            , mainHeight  = main.getSizes().height
            , mainZoom    = main.getSizes().realZoom
            , thumbZoom =  thumb.getSizes().realZoom
            , thumbPanX = thumb.getPan().x
            , thumbPanY = thumb.getPan().y;

            var mainByThumbZoomRatio = mainZoom / thumbZoom;

            var scopeWidth = mainWidth / mainByThumbZoomRatio;
            var scopeHeight = mainHeight / mainByThumbZoomRatio;
            var newPanX = (offsetX - thumbPanX - scopeWidth/2);
            var newPanY = (offsetY - thumbPanY - scopeHeight/2);
            var mainPanX = -newPanX * mainByThumbZoomRatio;
            var mainPanY = -newPanY * mainByThumbZoomRatio;
            main.pan({x:mainPanX, y:mainPanY});
        };

        var updateMainViewPan = function(evt){
            if(evt.which == 0 && evt.button == 0){
                return false;
            }
            var scopeContainer = document.getElementById('scopeContainer');
            _updateMainViewPan(evt.offsetX, evt.offsetY, scopeContainer, main, thumb);
        }

your solution is working - thank you.

[nanfb]

I found a bug in the thumbnail pan - when dragging moving the mouse in the thumbnail the main pan wasn't calculated correctly.

I fixed it by changing the code to this

        var _updateMainViewPan = function(offsetX, offsetY, scopeContainer, main, thumb){
            var mainWidth   = main.getSizes().width
            , mainHeight  = main.getSizes().height
            , mainZoom    = main.getSizes().realZoom
            , thumbZoom =  thumb.getSizes().realZoom
            , thumbPanX = thumb.getPan().x
            , thumbPanY = thumb.getPan().y;

            var mainByThumbZoomRatio = mainZoom / thumbZoom;

            var scopeWidth = mainWidth / mainByThumbZoomRatio;
            var scopeHeight = mainHeight / mainByThumbZoomRatio;
            var newPanX = (offsetX - thumbPanX - scopeWidth/2);
            var newPanY = (offsetY - thumbPanY - scopeHeight/2);
            var mainPanX = -newPanX * mainByThumbZoomRatio;
            var mainPanY = -newPanY * mainByThumbZoomRatio;
            main.pan({x:mainPanX, y:mainPanY});
        };

        var updateMainViewPan = function(evt){
            if(evt.which == 0 && evt.button == 0){
                return false;
            }
            var scopeContainer = document.getElementById('scopeContainer');
            _updateMainViewPan(evt.offsetX, evt.offsetY, scopeContainer, main, thumb);
        }

👍great help

[webstermobile]

I found a bug in the thumbnail pan - when dragging moving the mouse in the thumbnail the main pan wasn't calculated correctly.

I fixed it by changing the code to this

        var _updateMainViewPan = function(offsetX, offsetY, scopeContainer, main, thumb){
            var mainWidth   = main.getSizes().width
            , mainHeight  = main.getSizes().height
            , mainZoom    = main.getSizes().realZoom
            , thumbZoom =  thumb.getSizes().realZoom
            , thumbPanX = thumb.getPan().x
            , thumbPanY = thumb.getPan().y;

            var mainByThumbZoomRatio = mainZoom / thumbZoom;

            var scopeWidth = mainWidth / mainByThumbZoomRatio;
            var scopeHeight = mainHeight / mainByThumbZoomRatio;
            var newPanX = (offsetX - thumbPanX - scopeWidth/2);
            var newPanY = (offsetY - thumbPanY - scopeHeight/2);
            var mainPanX = -newPanX * mainByThumbZoomRatio;
            var mainPanY = -newPanY * mainByThumbZoomRatio;
            main.pan({x:mainPanX, y:mainPanY});
        };

        var updateMainViewPan = function(evt){
            if(evt.which == 0 && evt.button == 0){
                return false;
            }
            var scopeContainer = document.getElementById('scopeContainer');
            _updateMainViewPan(evt.offsetX, evt.offsetY, scopeContainer, main, thumb);
        }

still have bug, you can try : pan from point a to point b , release mouse. click and pan again , the start point is not correct. by the way _updateMainViewPan(evt.offsetX, evt.offsetY, scopeContainer, main, thumb); should be _updateMainViewPan(evt.offsetX, evt.offsetY, scopeContainer, window.main, window.thumb);