thecodealer / vue-panzoom

Vue plugin to zoom/pan dom elements
MIT License
89 stars 20 forks source link

boundsPadding: 1 now working #23

Closed SkyHolder closed 3 years ago

SkyHolder commented 3 years ago

Hello, i start panZoom like this ` <panZoom :options="{ minZoom: 0.2, maxZoom: 1, initialZoom: 0.2, autocenter: true, boundsPadding: 1, }"

`

but on start image has this transform transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 338, 554); 338, 554 - size of my modal

when i move image transform change to this transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, -4, -1);

initialZoom and autocenter not aplying, what is my mistake?

looks like var transformAdjusted = keepTransformInsideBounds(); working wrong, but i not shure.

thecodealer commented 3 years ago

Hello, i start panZoom like this <panZoom :options="{ minZoom: 0.2, maxZoom: 1, initialZoom: 0.2, autocenter: true, boundsPadding: 1, }" > <img :src="image.path" /> </panZoom>

but on start image has this transform transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 338, 554); 338, 554 - size of my modal

when i move image transform change to this transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, -4, -1);

initialZoom and autocenter not aplying, what is my mistake?

looks like var transformAdjusted = keepTransformInsideBounds(); working wrong, but i not shure.

Kindly update the package to the latest v1.1.3

SkyHolder commented 3 years ago

I updated the package, but I did not see any changes I use @init event for manual moving image on open

onPanZoomInit(panzoomInstance) {
     let img = document.querySelector(".zoomed-img");
     let modal = document.querySelector(".full-image-modal");
     img.addEventListener("load", () => {
          panzoomInstance.zoomTo(-img.offsetWidth / 2 + modal.offsetWidth / 2, -img.offsetHeight / 2 + modal.offsetHeight / 2, 0.5);
            });
        },

Works as expected, but pinch zoom does not work when the edge reaches the edge .vue-pan-zoom-scene When I reach the minimum zoom, the image fits into the modal and it becomes impossible to enlarge it

my markup is

<panZoom
    @init="onPanZoomInit"
    :options="{
        minZoom: 0.2,
        maxZoom: 1,
        bounds: true,
        boundsPadding: 1,
    }"
>
    <img :src="existImages.path" alt="" class="zoomed-img" data-not-lazy />
</panZoom>

Thanks for the quick response