googlechromelabs / pinch-zoom

A web component for pinch zooming DOM elements.

Usage

npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Now the above can be pinch-zoomed!

API

<pinch-zoom class="my-pinch-zoom">
  <h1>Hello!</h1>
</pinch-zoom>
<script>
  const pinchZoom = document.querySelector('.my-pinch-zoom');
</script>

Properties

pinchZoom.x; // x offset
pinchZoom.y; // y offset
pinchZoom.scale; // scale

Methods

Set the transform. All values are optional.

pinchZoom.setTransform({
  scale: 1,
  x: 0,
  y: 0,
  // Fire a 'change' event if values are different to current values
  allowChangeEvent: false,
});

Scale in/out of a particular point.

pinchZoom.scaleTo(scale, {
  // Transform origin. Can be a number, or string percent, eg "50%"
  originX: 0,
  originY: 0,
  // Should the transform origin be relative to the container, or content?
  relativeTo: 'content',
  // Fire a 'change' event if values are different to current values
  allowChangeEvent: false,
});

Demo

Simple image pinch-zoom. Although you can put any element in <pinch-zoom>.

Files

• lib/index.ts - Original TypeScript.
• dist/pinch-zoom.mjs - JS module. Default exports PinchZoom.
• dist/pinch-zoom.js - Plain JS. Exposes PinchZoom on the global.
• dist/pinch-zoom-min.js - Minified plain JS. 2.3k gzipped.

pinch-zoom's Issues

customElements is not defined

Hey guys I tested it and works great on my phone. But on some other phones and also some emulators I tested on, I got "customElements is not defined" error. My phone is Andorid v5.0, strangely emulator works on v7.1.1

Thanks.

Vue TSLint Error

When using this webcomponent inside a Vue based PWA i get the following TSLint Error:

INTERNAL ERROR(undefined,undefined) Invalid "extends" configuration value - could not require "tslint-config-airbnb". Review the Node lookup algorithm (https://nodejs.org/api/modules.html#modules_all_together) for the approximate method TSLint uses to find the referenced configuration file. stack trace: Error: Invalid "extends" configuration value - could not require "tslint-config-airbnb". Review the Node lookup algorithm (https://nodejs.org/api/modules.html#modules_all_together) for the approximate method TSLint uses to find the referenced configuration file. at resolveConfigurationPath (/Users/jappy/code/Unitect/gui/node_modules/tslint/lib/configuration.js:219:15) at loadExtendsRecursive (/Users/jappy/code/Unitect/gui/node_modules/tslint/lib/configuration.js:406:32) at parseConfigFile (/Users/jappy/code/Unitect/gui/node_modules/tslint/lib/configuration.js:395:12) at Object.loadConfigurationFromPath (/Users/jappy/code/Unitect/gui/node_modules/tslint/lib/configuration.js:163:16) at loadLinterConfig (/Users/jappy/code/Unitect/gui/node_modules/fork-ts-checker-webpack-plugin/lib/linterConfigHelpers.js:9:33) at getLinterConfig (/Users/jappy/code/Unitect/gui/node_modules/fork-ts-checker-webpack-plugin/lib/linterConfigHelpers.js:19:28) at IncrementalChecker.getLinterConfig (/Users/jappy/code/Unitect/gui/node_modules/fork-ts-checker-webpack-plugin/lib/linterConfigHelpers.js:27:42) at /Users/jappy/code/Unitect/gui/node_modules/fork-ts-checker-webpack-plugin/lib/IncrementalChecker.js:193:24 at WorkSet.forEach (/Users/jappy/code/Unitect/gui/node_modules/fork-ts-checker-webpack-plugin/lib/WorkSet.js:18:13) at IncrementalChecker.getLints (/Users/jappy/code/Unitect/gui/node_modules/fork-ts-checker-webpack-plugin/lib/IncrementalChecker.js:189:17)

What i did was:

yarn add pinch-zoom-element

then "import 'pinch-zoom-element'" inside my main.ts
then used the tag inside a Vue-Component.

Bugs out in safari on iPhone

When panning and zooming for a few times in safari on iphone, it gets stuck in zooming. and after a while it just freezes completely. Is this something you could look into? or is there any quick fixes?

Feature request: Additional event in case of reaches of the minScale case

Current behavior just prevents the execution of scaling https://github.com/GoogleChromeLabs/pinch-zoom/blob/master/lib/pinch-zoom.ts#L273

but would be nice to dispatch some event to be able to handle the case when we are out of the minScale boundaries.

I have a logic, now subscribed to 'change' event when this.scale === minScale I prevent moving changes, by setting

this.setTransform({ scale: minScale, x: 0, y: 0, allowChangeEvent: false})

But in the case when provided line executed before, I couldn't check on my code level am I out of the minScale constrains or not

Feature request: ability to disable pinch-zooming

As I describe in this blog post, sometimes it's nice to be able to toggle the pinch-zoom functionality on and off, for instance when the <pinch-zoom> is part of a scrollable list, and you normally want single-pointer events to scroll the list rather than move the zoomable element.

As is, you can simply swap <pinch-zoom> with its contents, but it would be fewer DOM operations to just toggle something like disabled="true" / disabled="false":

<pinch-zoom disabled="true">
  <my-element></my-element>
</pinch-zoom

Presumably this would just attach/unattach the listeners, or have the listeners do nothing, or something like that.

It doesn't work on IE

Firefox not working properly?

When I open the demo in FireFox, pinch zooming does strange things.

dead demo link

link to the demo is not working

https://pinch-zoom-element.glitch.me/

Feature request: zoom entire view port

First of all thanks for great light weight library for pinch zooming in touch devices. I want to use the entire view port when zooming in like Instagram / facebook in mobile devices. I see image zooms in within the parent div element and doesn't use the entire screen. Sorry if this feature already exist, if exist then can you throw some light how I can achieve.

Draggable element inside pinch-zoom component

So I have an element in my DOM tree which is draggable. Of course as soon as I apply pinch-zoom around it I can't drag it any more. I wonder if anyone managed to overcome this problem?

Configurable zoom factor using mouse wheel

When zooming using the mouse-wheel the zoom steps are very large.
Allow the mouse wheel zoom factor to be configurable, preferably with an attribute for more fine-grained zooming. For example:

<pinch-zoom wheel-zoom-factor=".05">
  ...
</pinch-zoom>

Allow setting bounds

I admit that I didn't look at the code in detail to see if this is already possible, but I know from having implemented this on mobile platforms before that it is common that you have a max and min scale, and still allow pinching beyond that, but then when letting go, it would just bounce back with a nice animation.

It might make sense doing something similar.

The Safari browser on iOS does this (or used to, as I don't use any iOS devices for a while)

There are some CSS properties for overscroll scrolling, so might make sense to minic that for this as well

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
https://developers.google.com/web/updates/2017/11/overscroll-behavior

Pro installation instructions are unclear

Trying to upgrade from base to pro IvyPinch. The instructions say to put the new files into /src/app, and then change the imports to point to "patch_to_ivypinch'. When I try this, my app fails to compile because it can't find 'patch_to_ivypinch'.

I think I'm taking something too literally, but I haven't been able to figure out how to fix it. Should I be replacing 'patch_to_ivypinch' with something else? If so, what?

pointer-tracker not found

When including this module in a typescript project, it reports that 'pointer-tracker' is not found (also noted when I do a roll-up build) it looks like it has been locally resolved.

The dist/ folder output has a reference to it, but the source doesn't - src/index.ts mentions it in an import, but it's not resolved. It looks like https://github.com/GoogleChromeLabs/pointer-tracker exists so I think it needs to be a dep in the package.json

Affects whole screen on Chrome on iOS

I have the pinch zoom on a restricted area of my website but on Chrome on iOS the entire browser view receives the touch event for the pinch zoom component, which makes all other interaction with the web site impossible.
It works as expected on Safari.

Makes zoom by clicks and taps actions

How do you think about a feature that makes a zoom in a pinch-zoom component, in accord to click and taps user actions?

Its an alternative and direct option, instead of a pinch, specially at mobile devices.

Text inputs inside pinch-zoom are not interactable

See https://codepen.io/artemv-the-encoder/pen/aboEPbv:

Same issue in every browser I tried on MacOS (Chrome 76, Safari 12, FF 68)

support rotation

Is this in scope for this project?
Feel free to close if not, just curious.

pinch-zoom injects styles into <head>, won't work in ShadowRoots.

Styling pinch-zoom from the main document just isn't going to work inside of ShadowRoots, and so pinch-zoom isn't going to work in ShadowRoots.

The styles should be written to each pinch-zoom elements' ShadowRoot for proper scoping, and in Chrome 73 and later ideally should be added to the ShadowRoot's adoptedStyleSheets array.

Add min-scale

I integrated this into my blog and a lot of people suggested that we add a minscale property to stop zooming out.

Prevent translation out of pinch-zoom

It's currently possible to completely pan the content of pinch-zoom out of view. It would be nice to have a setting that prevents the bounds of the content from being moved within the bounds of pinch-zoom.

In other words, if the content is not zoomed out, then boundaries of pinch-zoom should be equal to or contained within the boundaries of the content.