Remove React component & refactor main code

README.md

@@ -1,30 +1,50 @@
 # pinch-zoom-pan
 
-A React component lets you add pinch-zoom and pan sub components.
+A simple module that add pinch-zoom and pan to your HTML element.
 
-## Install
+### Using
 
 ```bash
 npm i -S pinch-zoom-pan
 ```
 
-## Usage
+```html
+<div class="root" id="root">
+  <div class="point">
+    <div class="canvas">
+      <!-- your content here -->
+    </div>
+  </div>
+</div>
+```
 
-```typescript jsx
-import PinchZoomPan from 'pinch-zoom-pan';
+```css
+.root {
+  position: relative;
+  transform: translateZ(0);
+  overflow: hidden;
+}
+
+.point {
+  position: absolute;
+  width: 0;
+  height: 0;
+  transform: translate(0, 0) scale(1);
+  transform-origin: center;
+  will-change: transform;
+}
+
+.canvas {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+```
 
-<PinchZoomPan style={{ width: 300, height: 300 }}>
-  <img width="600" height="400" />
-</PinchZoomPan>
+```javascript
+import { create } from 'pinch-zoom-pan';
+create({ element: document.getElementById('root') });
 ```
 
-### Props
+#### Frameworks & libraries
 
-| name | description | type | default |
-|------|-------------|------|---------|
-|className? | additional css class | `string` | `''` |
-|style? | additional style | `React.CSSProperties` | `{}` |
-|min? | minimal zoom | `number` | `0.1` |
-|max? | maximal zoom | `number` | `3.5` |
-|captureWheel? | capture wheel event, otherwise zoom works with holding `Alt` key | `boolean` | `false` |
-|debug? | render debug info | `boolean` | `false` |
+* [React example](https://github.com/SanichKotikov/react-family-tree-example/tree/master/src/components/PinchZoomPan)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pinch-zoom-pan",
   "version": "3.0.0",
-  "description": "A react component that lets you add pinch-zoom and pan sub components",
+  "description": "A simple module that add pinch-zoom and pan to your HTML element",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "sideEffects": false,
@@ -19,8 +19,6 @@
     "lib"
   ],
   "keywords": [
-    "react",
-    "react-component",
     "component",
     "pinch",
     "zoom",
@@ -31,13 +29,8 @@
   "bugs": {
     "url": "https://github.com/SanichKotikov/pinch-zoom-pan/issues"
   },
-  "peerDependencies": {
-    "react": ">= 16.8.0"
-  },
   "devDependencies": {
     "@size-limit/preset-small-lib": "4.5.5",
-    "@types/react": "16.9.43",
-    "react": "16.13.1",
     "size-limit": "4.5.5",
     "typescript": "3.9.7"
   },

src/constants.ts

@@ -0,0 +1,4 @@
+export const MIN_ZOOM = 0.1;
+export const MAX_ZOOM = 3.5;
+
+export const DEFAULT_STATE = { x: 0, y: 0, z: 1 };

src/helpers.ts

@@ -1,33 +1,52 @@
-export const isTouch = (): boolean => (
-  (typeof window !== 'undefined' && 'ontouchstart' in window) ||
-  !!(typeof navigator !== 'undefined' && (navigator.maxTouchPoints || navigator.msMaxTouchPoints))
-);
-
-export const getClientXY = (e: TouchEvent | MouseEvent) => {
-  if (e instanceof MouseEvent) {
-    return { X: e.clientX, Y: e.clientY };
+export function isTouch() {
+  return window.matchMedia('(hover: none) and (pointer: coarse)').matches;
+}
+
+export function isTouchEvent(event: any): event is TouchEvent {
+  // IE & (old) EDGE doesn't have TouchEvent
+  return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;
+}
+
+export function getClientXY(event: TouchEvent | MouseEvent) {
+  const point = event instanceof MouseEvent ? event : event.touches[0];
+  return { X: point.clientX, Y: point.clientY };
+}
+
+export function getMidXY(event: TouchEvent) {
+  const [a, b] = Array.from(event.touches);
+  return {
+    mX: (a.pageX + b.pageX) / 2,
+    mY: (a.pageY + b.pageY) / 2,
+  };
+}
+
+export function limitZoom(z: number, min: number, max: number) {
+  return Math.max(Math.min(z, max), min);
+}
+
+export function getTouchesRange(event: TouchEvent) {
+  const [a, b] = Array.from(event.touches);
+  return Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+}
+
+export function getScale(event: TouchEvent, currRange: number) {
+  // Webkit
+  let scale: number = (event as any).scale;
+  let pageX: number = (event as any).pageX;
+  let pageY: number = (event as any).pageY;
+
+  // Other browsers
+  if ([scale, pageX, pageY].some(val => val === undefined)) {
+    scale = getTouchesRange(event) / currRange;
+    const { mX, mY } = getMidXY(event);
+    pageX = mX;
+    pageY = mY;
   }
-  const touch = e.touches[0];
-  return { X: touch.clientX, Y: touch.clientY };
-};
-
-export const getMidXY = (e: TouchEvent) => ({
-  mX: (e.touches[0].pageX + e.touches[1].pageX) / 2,
-  mY: (e.touches[0].pageY + e.touches[1].pageY) / 2,
-});
-
-export const limitZoom = (z: number, min: number, max: number) =>
-  Math.max(Math.min(z, max), min);
-
-// return Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
-export const getTouchesRange = (e: TouchEvent): number => (
-  Math.sqrt(
-    Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2) +
-    Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
-  )
-);
-
-export const getWheelDelta = (event: WheelEvent): number => {
+
+  return { scale, pageX, pageY };
+}
+
+export function getWheelDelta(event: WheelEvent) {
   const delta = event.deltaY;
 
   switch (event.deltaMode) {
@@ -45,4 +64,4 @@ export const getWheelDelta = (event: WheelEvent): number => {
         ? delta / 10000
         : delta / 1000;
   }
-};
+}