vue-zoomer - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

dist/vue-zoomer.esm.js

@@ -0,1 +1,4 @@
+// vue-zoomer v0.3.5 - Jarvis Niu
+// https://github.com/jarvisniu/vue-zoomer
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -568,3 +571,3 @@
       lastWheelTime: 0,
-      lastWheelDirection: 'x',
+      lastWheelDirection: 'y',
       isPointerDown: false,
@@ -637,3 +640,3 @@ pointerPosX: -1,
     // scale
-    // Zoom the image with the point at the pointer(mouse or pintch center) pinned.
+    // Zoom the image with the point at the pointer(mouse or pinch center) pinned.
     // Simplify: This can be regard as vector pointer to old-image-center scaling.
@@ -746,4 +749,5 @@ tryToScale (scaleDelta) {
     refreshContainerPos () {
-      this.containerLeft = +this.$el.offsetLeft || 0;
-      this.containerTop = +this.$el.offsetTop || 0;
+      let rect = this.$el.getBoundingClientRect();
+      this.containerLeft = rect.left;
+      this.containerTop = rect.top;
     },
@@ -769,2 +773,3 @@ loop () {
     onMouseWheel (ev) {
+      if (ev.detail) ev.wheelDelta = ev.detail * -10;
       let currTime = Date.now();
@@ -774,3 +779,3 @@ if (Math.abs(ev.wheelDelta) === 120) {
         if (currTime - this.lastFullWheelTime > 50) {
-          this.onMouseWheelDo(ev);
+          this.onMouseWheelDo(ev.wheelDelta);
           this.lastFullWheelTime = currTime;
@@ -780,3 +785,3 @@ }
         if (currTime - this.lastWheelTime > 50 && typeof ev.deltaX === 'number') {
-          this.lastWheelDirection = Math.abs(ev.deltaX) > Math.abs(ev.deltaY) ? 'x' : 'y';
+          this.lastWheelDirection = (ev.detail == 0 && Math.abs(ev.deltaX) > Math.abs(ev.deltaY)) ? 'x' : 'y';
           if (this.lastWheelDirection === 'x') {
@@ -787,3 +792,3 @@ this.$emit('swipe', ev.deltaX > 0 ? 'left' : 'right');
         if (this.lastWheelDirection === 'y') {
-          this.onMouseWheelDo(ev);
+          this.onMouseWheelDo(ev.wheelDelta);
         }
@@ -793,6 +798,5 @@ }
     },
-    onMouseWheelDo (ev) {
+    onMouseWheelDo (wheelDelta) {
       // Value basis: One mouse wheel (wheelDelta=+-120) means 1.25/0.8 scale.
-      let scaleDelta = Math.pow(1.25, ev.wheelDelta / 120);
-      // console.log('onMouseWheel', ev.wheelDelta, scaleDelta)
+      let scaleDelta = Math.pow(1.25, wheelDelta / 120);
       this.tryToScale(scaleDelta);
@@ -1029,2 +1033,3 @@ this.onInteractionEnd();
         },
+        DOMMouseScroll: _vm.onMouseWheel,
         mousedown: _vm.onMouseDown,
@@ -1055,7 +1060,7 @@ mouseup: _vm.onMouseUp,
     if (!inject) return
-    inject("data-v-0abd83cc_0", { source: ".vue-zoomer[data-v-0abd83cc] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-0abd83cc] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-0abd83cc] {\n  vertical-align: top;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
+    inject("data-v-3cd05a06_0", { source: ".vue-zoomer[data-v-3cd05a06] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-3cd05a06] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-3cd05a06] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-0abd83cc";
+  const __vue_scope_id__ = "data-v-3cd05a06";
   /* module identifier */
@@ -1181,2 +1186,9 @@ const __vue_module_identifier__ = undefined;
     },
+    selIndex() {
+      this.$nextTick(() => {
+        this.$refs.zoomers.forEach(zoomer => {
+          zoomer.refreshContainerPos();
+        });
+      });
+    },
   },
@@ -1375,7 +1387,7 @@ mounted () {
     if (!inject) return
-    inject("data-v-205e5a23_0", { source: ".vue-zoomer-gallery[data-v-205e5a23] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-205e5a23] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-205e5a23] {\n  transition: left 0.4s;\n}\n.slide[data-v-205e5a23] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
+    inject("data-v-4e4fbc04_0", { source: ".vue-zoomer-gallery[data-v-4e4fbc04] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-4e4fbc04] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-4e4fbc04] {\n  transition: left 0.4s;\n}\n.slide[data-v-4e4fbc04] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1 = "data-v-205e5a23";
+  const __vue_scope_id__$1 = "data-v-4e4fbc04";
   /* module identifier */
@@ -1382,0 +1394,0 @@ const __vue_module_identifier__$1 = undefined;

dist/vue-zoomer.js

@@ -0,1 +1,4 @@
+// vue-zoomer v0.3.5 - Jarvis Niu
+// https://github.com/jarvisniu/vue-zoomer
+
 (function (global, factory) {
@@ -574,3 +577,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 	      lastWheelTime: 0,
-	      lastWheelDirection: 'x',
+	      lastWheelDirection: 'y',
 	      isPointerDown: false,
@@ -643,3 +646,3 @@ pointerPosX: -1,
 	    // scale
-	    // Zoom the image with the point at the pointer(mouse or pintch center) pinned.
+	    // Zoom the image with the point at the pointer(mouse or pinch center) pinned.
 	    // Simplify: This can be regard as vector pointer to old-image-center scaling.
@@ -752,4 +755,5 @@ tryToScale (scaleDelta) {
 	    refreshContainerPos () {
-	      this.containerLeft = +this.$el.offsetLeft || 0;
-	      this.containerTop = +this.$el.offsetTop || 0;
+	      let rect = this.$el.getBoundingClientRect();
+	      this.containerLeft = rect.left;
+	      this.containerTop = rect.top;
 	    },
@@ -775,2 +779,3 @@ loop () {
 	    onMouseWheel (ev) {
+	      if (ev.detail) ev.wheelDelta = ev.detail * -10;
 	      let currTime = Date.now();
@@ -780,3 +785,3 @@ if (Math.abs(ev.wheelDelta) === 120) {
 	        if (currTime - this.lastFullWheelTime > 50) {
-	          this.onMouseWheelDo(ev);
+	          this.onMouseWheelDo(ev.wheelDelta);
 	          this.lastFullWheelTime = currTime;
@@ -786,3 +791,3 @@ }
 	        if (currTime - this.lastWheelTime > 50 && typeof ev.deltaX === 'number') {
-	          this.lastWheelDirection = Math.abs(ev.deltaX) > Math.abs(ev.deltaY) ? 'x' : 'y';
+	          this.lastWheelDirection = (ev.detail == 0 && Math.abs(ev.deltaX) > Math.abs(ev.deltaY)) ? 'x' : 'y';
 	          if (this.lastWheelDirection === 'x') {
@@ -793,3 +798,3 @@ this.$emit('swipe', ev.deltaX > 0 ? 'left' : 'right');
 	        if (this.lastWheelDirection === 'y') {
-	          this.onMouseWheelDo(ev);
+	          this.onMouseWheelDo(ev.wheelDelta);
 	        }
@@ -799,6 +804,5 @@ }
 	    },
-	    onMouseWheelDo (ev) {
+	    onMouseWheelDo (wheelDelta) {
 	      // Value basis: One mouse wheel (wheelDelta=+-120) means 1.25/0.8 scale.
-	      let scaleDelta = Math.pow(1.25, ev.wheelDelta / 120);
-	      // console.log('onMouseWheel', ev.wheelDelta, scaleDelta)
+	      let scaleDelta = Math.pow(1.25, wheelDelta / 120);
 	      this.tryToScale(scaleDelta);
@@ -1035,2 +1039,3 @@ this.onInteractionEnd();
 	        },
+	        DOMMouseScroll: _vm.onMouseWheel,
 	        mousedown: _vm.onMouseDown,
@@ -1061,7 +1066,7 @@ mouseup: _vm.onMouseUp,
 	    if (!inject) return
-	    inject("data-v-0abd83cc_0", { source: ".vue-zoomer[data-v-0abd83cc] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-0abd83cc] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-0abd83cc] {\n  vertical-align: top;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
+	    inject("data-v-3cd05a06_0", { source: ".vue-zoomer[data-v-3cd05a06] {\n  overflow: hidden;\n  transition: background-color 0.5s;\n}\n.zoomer[data-v-3cd05a06] {\n  transform-origin: 50% 50%;\n  width: 100%;\n  height: 100%;\n}\n.zoomer > img[data-v-3cd05a06] {\n  vertical-align: top;\n  user-drag: none;\n  -webkit-user-drag: none;\n  -moz-user-drag: none;\n}\n", map: undefined, media: undefined });
 
 	  };
 	  /* scoped */
-	  const __vue_scope_id__ = "data-v-0abd83cc";
+	  const __vue_scope_id__ = "data-v-3cd05a06";
 	  /* module identifier */
@@ -1187,2 +1192,9 @@ const __vue_module_identifier__ = undefined;
 	    },
+	    selIndex() {
+	      this.$nextTick(() => {
+	        this.$refs.zoomers.forEach(zoomer => {
+	          zoomer.refreshContainerPos();
+	        });
+	      });
+	    },
 	  },
@@ -1381,7 +1393,7 @@ mounted () {
 	    if (!inject) return
-	    inject("data-v-205e5a23_0", { source: ".vue-zoomer-gallery[data-v-205e5a23] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-205e5a23] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-205e5a23] {\n  transition: left 0.4s;\n}\n.slide[data-v-205e5a23] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
+	    inject("data-v-4e4fbc04_0", { source: ".vue-zoomer-gallery[data-v-4e4fbc04] {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  min-width: 100px;\n  min-height: 100px;\n}\n.vue-zoomer-gallery > *[data-v-4e4fbc04] {\n  display: inline-block;\n}\n.vue-zoomer-gallery.anim .slide[data-v-4e4fbc04] {\n  transition: left 0.4s;\n}\n.slide[data-v-4e4fbc04] {\n  position: absolute;\n  top: 0;\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  -webkit-user-drag: none;\n}\n", map: undefined, media: undefined });
 
 	  };
 	  /* scoped */
-	  const __vue_scope_id__$1 = "data-v-205e5a23";
+	  const __vue_scope_id__$1 = "data-v-4e4fbc04";
 	  /* module identifier */
@@ -1388,0 +1400,0 @@ const __vue_module_identifier__$1 = undefined;

package.json

 {
   "name": "vue-zoomer",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Zoom the image or other thing with mouse or touch",
-  "main": "dist/vue-zoomer.js",
+  "main": "dist/vue-zoomer.min.js",
   "module": "dist/vue-zoomer.esm.js",
@@ -34,2 +34,3 @@ "scripts": {
     "rollup-plugin-stylus-css-modules": "^1.5.0",
+    "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-vue": "^5.0.1",
@@ -36,0 +37,0 @@ "stylus": "^0.54.5",

README.md

@@ -23,3 +23,2 @@ # vue-zoomer
 import VueZoomer from 'vue-zoomer'
-import 'vue-zoomer/dist/vue-zoomer.css'
 
@@ -54,4 +53,4 @@ Vue.use(VueZoomer)
 
-- `maxScale: number` - Maximum scale limit, default is 1;
-- `minScale: number` - Minimum scale limit, default is 5;
+- `maxScale: number` - Maximum scale limit, default is 5;
+- `minScale: number` - Minimum scale limit, default is 1;
 - `zoomed: out boolean` - Whether zoomed in (scale equals to 1). `out` means the prop is a child to parent one-way binding. So there must have a `.sync` modifier.
@@ -58,0 +57,0 @@ - `pivot: 'cursor' | 'image-center'` - The pivot when zoom the content, default is `cursor`, can set to be `image-center`;

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2438679

increased by0.78%

Number of package files

18

increased by5.88%

Lines of code

3364

increased by2.62%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

14

increased by7.69%

Number of lines in readme file

82

decreased by-1.2%

No dependency changes