drozhzhin-n-e / ngx-pinch-zoom Goto Github PK

Is it possible to lock/disable the zoom?

I am creating a drawing app, and the zoom works great with the canvas. But when you zoom, you also draw. I like to lock the zoom when drawing.

with the following setting I get a flickering when zoom level is greater than 3. watch here

<pinch-zoom *ngIf="withZoom" [limit-zoom]="20" [backgroundColor]="'transparent'" [disableZoomControl]="'disable'" [limitPan]="true" [minScale]="0.95" [wheelZoomFactor]="1" [transition-duration]="230"> <img class="content-image-cover" [src]="image.src"> </pinch-zoom>

Hi! Cool component!
But I didn't find a way how to apply custom scale - initial = 1, zoomed = 2.
Maybe you can add 1 more @input() scaleRate parameter, to configure that?
Then replace 468 line to
this.scale = this.initialScale * this.scaleRate;

Actually, I´d like to use a image map to several clicks... it that possible?
thanks

How can I add a html image or video element dynamicly to pinch-zoom as child element?
I preload large images and video element before I display them in the view. The content should be able to zoom with this component and I would like to use the already created elements.

Hi im having a trouble in this.
can you help me to fix this issue

Logs

Implementation

CSS

When you have a pinch-zoom element within a scrollable container, you can get some unexpected behavior. If you zoom in and then drag down you'll be restricted vertically prior to getting to the bottom of the image. That's because pinch-zoom prevents default on swipe so the image wont scroll down within its container. You need to zoom out, scroll down, then zoom back in

When implementing ngx-pinch-zoom for an SVG, when I zoom in (via mouse scroll) it is possible to "pan" off the edge of the image on the RIGHT and BOTTOM sides of the image. Then when I zoom back out (via mouse scroll) the image is off-centre.

Ideally I would expect the act of zooming back out to the maximum would re-centre the image.

Please see this codesandbox for an example:

https://codesandbox.io/s/scaling-svg-pinch-zoom-3qhmf

This is what the image should look like zoomed out:

Then when I zoom in close to the bottom-right of the image, then pan to the right a little more, then zoom back out it ends up off-centre, like this:

The only way to fix it is to click the button once to zoom in, then again to zoom out.

I am running into the same issues as seen in this question: https://stackoverflow.com/questions/57819231/ngx-pinch-zoom-angular-7-toggle-zoom-using-event-not-working-its-gives-error-in

I've tried debugging for a while now but haven't been able to pinpoint the root cause.

Hi,

I'm using your technology but i'm blocked to apply it on a gestion map. I can't reset the default view of my image (no zoom apply, center image, no click point) and the default level of zoom when I change the level of my map.

When I swap the level, I want to comeback to the default parameters but I can't because when I realised a single moovement (pan, click, pinch) the screen use the latest touch point (when i've zoomed the latest time) to zoom and set the next level of zoom. Can you give me one tip to reset the default parameters ?

Thank you in advance, cordially

Hey!

I was wondering if it is possible to limit the amount of zoom (Also if there is, how would one achieve this?)

Thank you :D

Hello everyone.

Just noticed the fullImage, when loaded, turns the image blank in iOS. While in Android, the image loads in the background, just becoming visible when it's done.

Is there any workaround? I'm using the Pro version.

Thanks in advance!

when using in a cordova app on an Iphone, the scrolling is very sluggish.
In other components of the application, where scrolling is needed, I add:
-webkit-overflow-scrolling: touch;
to the css of the container where scroll is needed and then scrolling is smooth.

Can you advice how to over come the issue in ngx-pinch-zoom?

Good day! I install [email protected] to my Ionic 5.1.1 project and see such error Cannot read property 'isDragging' of undefined.

main-es2015.37eb728e495d1fcd6056.js:1 ERROR TypeError: Cannot read property 'isDragging' of undefined
at a.get isDragging [as isDragging] (main-es2015.37eb728e495d1fcd6056.js:1)
at Object.updateRenderer (main-es2015.37eb728e495d1fcd6056.js:1)
at Object.updateRenderer (main-es2015.37eb728e495d1fcd6056.js:1)
at Nl (main-es2015.37eb728e495d1fcd6056.js:1)
at Ul (main-es2015.37eb728e495d1fcd6056.js:1)
at zl (main-es2015.37eb728e495d1fcd6056.js:1)
at Nl (main-es2015.37eb728e495d1fcd6056.js:1)
at Ul (main-es2015.37eb728e495d1fcd6056.js:1)
at zl (main-es2015.37eb728e495d1fcd6056.js:1)
at Nl (main-es2015.37eb728e495d1fcd6056.js:1)

any ideas?

When installing the package and added it to my module & HTML file. The following error pops up when building:

Error: Can't resolve 'core-js/proposals/reflect-metadata'

I'm using the latest version of ngx-pinch-zoom and Angular. If you need futher information, please let me know!

When try to open page with pinch-zoom image on SSR - the error has happened.

TypeError: Cannot read property 'destroy' of undefined
    at PinchZoomComponent.Ysow.PinchZoomComponent.destroy (C:\Projects\my-project\dist\server\main.js:200137:28)
    at PinchZoomComponent.Ysow.PinchZoomComponent.ngOnDestroy (C:\Projects\my-project\dist\server\main.js:200028:18)
    at callProviderLifecycles (C:\Projects\my-project\dist\server\main.js:80907:22)
    at callElementProvidersLifecycles (C:\Projects\my-project\dist\server\main.js:80875:17)
    at callLifecycleHooksChildrenFirst (C:\Projects\my-project\dist\server\main.js:80865:33)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89033:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execEmbeddedViewsAction (C:\Projects\my-project\dist\server\main.js:89102:21)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89031:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execComponentViewsAction (C:\Projects\my-project\dist\server\main.js:89081:17)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89032:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execEmbeddedViewsAction (C:\Projects\my-project\dist\server\main.js:89102:21)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89031:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execEmbeddedViewsAction (C:\Projects\my-project\dist\server\main.js:89102:21)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89031:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execComponentViewsAction (C:\Projects\my-project\dist\server\main.js:89081:17)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89032:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execEmbeddedViewsAction (C:\Projects\my-project\dist\server\main.js:89102:21)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89031:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execComponentViewsAction (C:\Projects\my-project\dist\server\main.js:89081:17)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89032:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execEmbeddedViewsAction (C:\Projects\my-project\dist\server\main.js:89102:21)
    at destroyView (C:\Projects\my-project\dist\server\main.js:89031:9)
    at callViewAction (C:\Projects\my-project\dist\server\main.js:89159:17)
    at execComponentViewsAction (C:\Projects\my-project\dist\server\main.js:89081:17)
    at Object.destroyView (C:\Projects\my-project\dist\server\main.js:89032:9)
    at ViewRef_.destroy (C:\Projects\my-project\dist\server\main.js:80196:22)
    at C:\Projects\my-project\dist\server\main.js:86636:71
    at Array.forEach (<anonymous>)
    at ApplicationRef.ngOnDestroy (C:\Projects\my-project\dist\server\main.js:86636:33)
    at callNgModuleLifecycle (C:\Projects\my-project\dist\server\main.js:79808:35)
    at NgModuleRef_.destroy (C:\Projects\my-project\dist\server\main.js:80409:13)
    at C:\Projects\my-project\dist\server\main.js:86286:77
    at Array.forEach (<anonymous>)
    at PlatformRef.destroy (C:\Projects\my-project\dist\server\main.js:86286:35)
    at complete (C:\Projects\my-project\dist\server\main.js:96238:30)
    at C:\Projects\my-project\dist\server\main.js:96242:28
    at ZoneDelegate.invoke (C:\Projects\my-project\dist\server.js:599:26)
    at Zone.run (C:\Projects\my-project\dist\server.js:358:43)
    at C:\Projects\my-project\dist\server.js:1118:34
    at ZoneDelegate.invokeTask (C:\Projects\my-project\dist\server.js:631:31)
    at Zone.runTask (C:\Projects\my-project\dist\server.js:403:47)
    at drainMicroTaskQueue (C:\Projects\my-project\dist\server.js:809:35)

any ideas? Could it work with SSR?

Angular 8.1.2 running with Ivy broken the component and always show de message below:

Cannot read property 'getElementsByTagName' of undefined

In debugger, this message is related with line 426 of builded ngx-pinch-zoom component.

Search in web I have found the correct configuration for ViewChild selector:

@ViewChild('content', {static: true}) contentElement: ElementRef;

Actualy, the declaration is:

@ViewChild('content') contentElement: ElementRef;

Reference: https://angular.io/guide/static-query-migration

how about pdf support ? i made something for ng2-pdf-viewer but this one seems better, my repo link

When use with angular 7, npm install with the following dependencies warning.
Everything work fine except these warning.

npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

I'm getting the following warning message in the console:
Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

I'm using version 1.2.5.

Is it possible to solve this warning message?
Thanks for responsing 😄

Adding the wheel="false" attribute to seems to not do anything.

Hi, I have the following setting.

I have created a simple wrapper-component in Angular, that contains the pinch-zoom-component with an image. The image src is bound to a variable, that might get updated over time. The current template is quite minimalistic:

<pinch-zoom>
    <img [src]="innerImg"/>
</pinch-zoom>

The innerImg is assigned on the setter-function of a component input

@Input() set image(img: any) {
      if (!!img) {
         this.innerImg = img;
      }
}

Expected behaviour

The image can be zoomed and dragged normally.

Current behaviour

The image cannot be zoomed via mouse wheel. Zooming with the button at the bottom works as intended and when zoomed, dragging works too.

Weirdly, when browser focus is in another tab and the app is rebuild (due to a change from my IDE), the mouse wheel zoom works as intended, when I switch to the tab of my app.

Did I miss something when using your library?

Hi,
Great job with this component. Is it possible to disable the behavior entirely on non-mobile devices? The issue that I have with desktop devices is that the component prevents drag/drop functionality (the ability to save an image by dragging it to your desktop). Thanks!

Hi,
would be a great addition.

Cheers.

Would it be possible to bump angular to version 10?

Hi, I use pinch-zoom to show picture with Ionic framework,and that page have a small keyboard(some divs),When click the key twice quickly on Keyboard , click event just fire once ,This happens on mobile devices.If comment pinch-zoom tag in HTML file,It's OK.
To reduce this issue,Check out https://github.com/pppp0836/testimg.git

Thanks!

Is it possible to get info if image zoomed in? Also want to say THANK YOU, Great component!!!

Can we have the console.logs removed (constructor and initPinchZoom)?

Hi. I use pinch-zoom around a konvajs canvas. in this canvas the one finger touch is used for drawing and when I zoom the view, drawing and panning has conflict with each other.

<pinch-zoom 
  [disablePan]="togglePan== true? true:false"
  [double-tap]="false"
  style="height: 700px; width: 100%;">
  // konvajs canvas
  <div  id="container"></div>
</pinch-zoom>

can I use two finger touch for panning and one finger for drawing on canvas?
or at least bind disablePan to a property inside parent component "togglePan"? as I did in the code above (that just work for the first time and does not get update when "togglePan" value changes?

The demos aren't working on a windows 10 surface pro (I checked latest edge & chrome) and I was unable to make it work myself neither.

drozhzhin-n-e , good day ! I am trying to use your ngx-pinch-zoom … it working perfectly. But above the image I draw html span with special coordinates … something like hot spots … Is it possible to detect image clientWidth and clientHeight during pinch event for redrawing hot spots according image scale ?

Having weird Issue in ionic 4.

<pinch-zoom>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</pinch-zoom>

Screenshot With Double Tap zoom Image.

Screenshot of Pinching with 2 Fingers

Also i had to add it to my Page Module to make it work it was not working by just adding it to app.module.ts

Hey everyone,

I'm using this module to zoom a pdf component, I customize the core of the module and its work on Android devices but I get an issue with ios devices.

Why does the image quality get pixelated when zoomed in just on ios devices ?

I have a requirement to zoom my container with certain html inside it, I've a image in that container which loads from remote URL, When I wrap the image inside it throws error.

Try this ,

<pinch-zoom>
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" />
  </pinch-zoom>

It would be really great if there's a move while zooming feature.
When we pinch and zoom image, it's very handy to keep our two fingers on screen and start in dragging the zoomed image to see more specific details of certain area of the image.
it's like zoom and drag all together.

Hope you can add this.

Thanks in advance.

<pinch-zoom> <img class="image" src={{url}}> <img class="image" src={{url}}> </pinch-zoom>

It seems like with this, the two images will be positioned next to each other due to display: flex, and disabling it breaks the zoom (it'll zoom into the centre instead of where you tap). Any fixes?

Hey,
Since the angular 8 has been released a long while, will it be ready to promote it up to support angular 8 officially?
Thanks.

Fast zooming and dragging with two fingers causes the following error:

TypeError: "touches[1] is undefined"
    getDistance ngx-pinch-zoom.js:493
    handlePinch ngx-pinch-zoom.js:363
    touchmoveHandler ngx-pinch-zoom.js:223

Version: 1.2.5
I'm on a Thinkpad L380 Yoga (Windows 10/ Firefox).
Using Angular 6 currently, don't know if that matters.

Error: ./node_modules/ngx-pinch-zoom/lib/pinch-zoom.directive.ts
Module build failed: Error: ENOENT: no such file or directory, open 'F:\Work\oylaApp\node_modules\ngx-pinch-zoom\lib\pinch-zoom.directive.js'
@ ./node_modules/ngx-pinch-zoom/components.js 1:29-66
@ ./src/app/app.module.ts
@ ./src/app/main.ts
at new BuildError (F:\Work\oylaApp\node_modules@ionic\app-scripts\dist\util\errors.js:16:28)
at callback (F:\Work\oylaApp\node_modules@ionic\app-scripts\dist\webpack.js:121:28)
at emitRecords.err (F:\Work\oylaApp\node_modules\webpack\lib\Compiler.js:269:13)
at Compiler.emitRecords (F:\Work\oylaApp\node_modules\webpack\lib\Compiler.js:375:38)
at emitAssets.err (F:\Work\oylaApp\node_modules\webpack\lib\Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (F:\Work\oylaApp\node_modules\webpack\lib\Compiler.js:368:12)
at next (F:\Work\oylaApp\node_modules\tapable\lib\Tapable.js:218:11)
at Compiler.compiler.plugin (F:\Work\oylaApp\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (F:\Work\oylaApp\node_modules\tapable\lib\Tapable.js:222:13)
at Compiler.afterEmit (F:\Work\oylaApp\node_modules\webpack\lib\Compiler.js:365:9)

Hi,

what are the values that need to be changed to increase/decrease the amount of zoom that happens on double tap?

PS. I've purchased the premium version of pinch zoom

First off - great work! I have tried other solutions but this library works quite well in our Angular application.
I am missing a feature that I haven't discovered so far: the ability to programmatically zoom to a DOM element.

My code looks somewhat like this:

<pinch-zoom>
  <svg id="super-large">
    Lot's of other elements in here
   <circle id="scroll-to-me-please"></circle>
  </svg>
</pinch-zoom>

I want to programmatically zoom close to the scroll-to-me-please element.

Any idea how can this already be achieved with the library or could this maybe become a feature of this library?

Thanks in advance!

EDIT: On second look, maybe this feature of the pro version could fulfill my use case. Would something like this work?

@ViewChild('myPinch') myPinch;
zoomToElement(elem) {
  const options = {x: someNumber, y: someNumber, scale: someNumber});
  myPinch.setTransform(options);
}

In state of zoom out, can't read property 'clientY' error occur when drag pinch-zoom element by touch
In state of zoom in, there is no error.

even event error occurred, the module working properly.

-- my environment
angular: 7.1
ngx-pinch-zoom: 1.2.1
multi-touchable monitor on windows 10

Good day! I try to handle touch event but nothing happend. Could anyone help please.

        <pinch-zoom (events)="handlePinchZoomEvents($event)">
          <img src="{{url}}">
        </pinch-zoom>

  handlePinchZoomEvents(event) {
    console.log("handlePinchZoomEvents", event);
  }

I am trying to fork this repo and installing the forked repo with npm (npm i emillime/ngx-pinch-zoom). When doing this it does not seem to build the library. Maybe adding a postinstall script would help?
I tried to add that myself but even after building manually I get the error Cannot find module 'ngx-pinch-zoom'.
Any help with this? How are you supposed to use it when installing from a Github repo?

Hi!

Your demo link is working fine on a mobile. However a new project created using your component is not working properly on mobile devices.

Can you please share the source code of your demo link?

Regards

I have issue when I put into component html content img and rectangles over it. Can all of this fit to 100% width like img?

Hey there,

Apparently it's possible to toggle the zoom programmatically depending on the current state.
What If I only want to zoom out whenever it's zoomed in on a specific action?

Can I somehow get the current zoom state (zoomed in, or zoomed out)?

I find it quite strange that there is only a toggle and not for example a zoomOut and zoomIn. Or at least a state to determine when to toggle.

Can I just check for the class pz-dragging?

Add support for the tag.

In chrome after destroying component, I can't select some text on the page. After research I found that after destroy component of pinch-zoom, on element events don't stop listening. So on we still have event mousemove and with this event we can't select a text on a page

First of all thanks @drozhzhin-n-e for this great library and awesome work.
Here's the issue I'm facing:
When limit-zoom option is set to more than 1 scroll(mousewheel) to zoom out not working after image zoom reaches it's limit zoom value. The mousewheel just doesn't work to zoom out of the image, the cursor value becomes cursor: all-scroll; in css.

Below is my setting of the pinch

<pinch-zoom limit-zoom="4"
        auto-zoom-out="true"
        disableZoomControl="auto"
        draggableImage="true"
        class="pinch_zoom_container">
            <img width="400px" [src]="zoomImgSrc" />
        </pinch-zoom>