cutsraka.blogg.se - june 2022

#Angular imageviewer zoom pan full
#Angular imageviewer zoom pan free

I realise that this will limit adoption, but for an enterprising developer out there, I can't imagine that adding mobile support would be nearly as big of a challenge as it was to port the library to Angular from AngularJS! Installation As long as this remains the case, I respecfully ask for no more issues concerning mobile support, please.

#Angular imageviewer zoom pan full

As the application that this library was developed for was never intended for use with mobile devices, there are no plans to implement full mobile support. The library implements some basic support that may work with some mobile devices, though pinch-to-zoom still needs considerable work. I am actively soliciting pull requests for mobile support.

Mobile Support - Actively Soliciting PR's

Touchscreen support works, but it is not great.

The widget has not been migrated from the original project, though this probably shouldn't be hard to do.

New API methods panToPoint(), panDelta(), panDeltaPercent(), panDeltaAbsolute(), and many others have been added.The zoomIn() and zoomOut() API functions can zoom to either the last zoomed point rather or to the view's centre point, depending on the value of zoomType ( lastPoint or viewCenter).A convenience method resetView() has been provided to animate the view back to its initial settings.zoomToFit() animation - using the zoomToFit() function now will animate the view to the a desired rectangle.Zoom can now be smoothly and freely controlled using the mouse wheel or trackpad.

#Angular imageviewer zoom pan free

Free zoom - zooming is no longer limited to switching between two distinct zoom levels.The pan-zoom service has been eliminated.Renamed class panzoomOverlay to pan-zoom-overlay.Renamed class zoomElement to zoom-element.Renamed class panElement to pan-element.Renamed Ng2PanZoomModule to NgxPanZoomModule.Added proper TypeScript definitions for API methods.Defines which point to zoom to/from: either the centre of the screen or the last point zoomed to/from. Added options lastPoint (default for backwards-compatibility) and viewCenter to zoomIn() and zoomOut() API methods.

Config option dynamicContentDimensions, and new API methods detectContentDimensions() and updateContentDimensions() for when the content size isn't predictable.

New API helper methods centerContent(), centerTopLeft(), centerBottomLeft(), centerTopRight(), centerBottomRight(), centerX(), and centerY().

Updated for and compiled with Angular 10.x.

The jQuery dependency has finally been removed!.

Per the Angular guidance at the time of writing ( ), Ivy is not used for the NPM repo build. Version 10.x is compiled using Angular 10.x.

Improved single-touch pan handling (thanks to Fix for config input being marked as private.

No longer supports previous Angular major versions.

Compiled in Ivy partial compilation mode.

When releasing the mouse button or touch surface whilst panning, the pan will come to a gradual stop.

Pan using click/touch and drag, or API calls.

Zoom using mouse wheel, touch surface, double click, or API controls tied to your own UI.

If there is some brave soul out there would like to take over the maintenance of this module, please do contact me and I'll be happy to discuss it with you. Sadly, other life priorities just don't allow the time for it, and that doesn't seem likely to change in the near future. This Module is on Life Support - New Maintainer Needed!ĭoubtless many will have noticed that there has been little by way of support for this library as of late. By using this approach, it is hoped that compatibility and performance will be maximised. But as this library doesn't fit the traditional Angular model, as its purpose is only to apply CSS transforms to a certain part of the DOM, without moving or changing anything else, it has no impact on an application's state (except if the app consumes modelChanged observables). We apply CSS transforms directly to the DOM. This library deliberately parts with certain received Angular wisdom of using only Angular-ish methods to accomplish things.

It is only tested with the corresponding version of Angular. It is therefore no longer compatible with legacy Angular version which are still using the View Engine. It is built using Angular CLI 13.x in partial Ivy compilation mode. Many thanks go out to Martin Vindahl Olsen for having written it, and for his blessing in this undertaking. It was adapted from the angular-pan-zoom library for AngularJS, but it has been heavily modified. Provides rudimentary support for touchscreens (read section on mobile support). An Angular component for panning and zooming an element or elements using the mouse and mousewheel.