@bikariya/image-viewer - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/module.json

 {
   "name": "@bikariya/image-viewer",
   "configKey": "image-viewer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "builder": {
@@ -6,0 +6,0 @@ "@nuxt/module-builder": "1.0.2",

dist/runtime/image-viewer.vue

@@ -77,3 +77,3 @@ <script setup>
     const finalHeight = startRect.height * rate2;
-    if (isOverLimit(finalWidth, finalHeight, rate2)) {
+    if (isSizeOutOfBounds(finalWidth, finalHeight, rate2)) {
       return;
@@ -112,3 +112,3 @@ }
   const finalHeight = height * rate2;
-  if (isOverLimit(finalWidth, finalHeight, rate2)) {
+  if (isSizeOutOfBounds(finalWidth, finalHeight, rate2)) {
     return;
@@ -125,24 +125,24 @@ }
   const { left, top, width, height } = rootEl.value.getBoundingClientRect();
-  const { size: [coverWidth, coverHeight], advantageSide } = getFitSize("cover");
-  if (width < coverWidth && height < coverHeight) {
-    const [finalLeft, finalTop] = advantageSide === "height" ? [
-      `calc(50% - ${Math.round(coverWidth / 2)}px)`,
-      `${top - (event.clientY - top) * (coverHeight / height - 1)}px`
-    ] : [
-      `${left - (event.clientX - left) * (coverWidth / width - 1)}px`,
-      `calc(50% - ${Math.round(coverHeight / 2)}px)`
-    ];
+  const { containSize, coverSize, advantageSide } = getFitSize();
+  if (width < coverSize.width && height < coverSize.height) {
+    const centerLoc = {
+      left: `calc(50% - ${Math.round(coverSize.width / 2)}px)`,
+      top: `calc(50% - ${Math.round(coverSize.height / 2)}px)`
+    };
+    const pointerLoc = {
+      left: `${left - (event.clientX - left) * (coverSize.width / width - 1)}px`,
+      top: `${top - (event.clientY - top) * (coverSize.height / height - 1)}px`
+    };
     rootEl.value.animate({
-      left: finalLeft,
-      top: finalTop,
-      width: Math.ceil(coverWidth) + "px",
-      height: Math.ceil(coverHeight) + "px"
+      left: advantageSide === "height" ? centerLoc.left : pointerLoc.left,
+      top: advantageSide === "height" ? pointerLoc.top : centerLoc.top,
+      width: Math.ceil(coverSize.width) + "px",
+      height: Math.ceil(coverSize.height) + "px"
     }, options.value);
   } else {
-    const { size: [containWidth, containHeight] } = getFitSize("contain");
     rootEl.value.animate({
-      left: `calc(50% - ${Math.round(containWidth / 2)}px)`,
-      top: `calc(50% - ${Math.round(containHeight / 2)}px)`,
-      width: Math.floor(containWidth) + "px",
-      height: Math.floor(containHeight) + "px"
+      left: `calc(50% - ${Math.round(containSize.width / 2)}px)`,
+      top: `calc(50% - ${Math.round(containSize.height / 2)}px)`,
+      width: Math.floor(containSize.width) + "px",
+      height: Math.floor(containSize.height) + "px"
     }, options.value);
@@ -152,8 +152,8 @@ }
 const onEnter = (el) => {
-  const { size: [containWidth, containHeight] } = getFitSize("contain");
+  const { containSize } = getFitSize();
   el.animate([getOriginalKeyframe(), {
-    top: `calc(50% - ${Math.round(containHeight / 2)}px)`,
-    left: `calc(50% - ${Math.round(containWidth / 2)}px)`,
-    width: Math.floor(containWidth) + "px",
-    height: Math.floor(containHeight) + "px",
+    top: `calc(50% - ${Math.round(containSize.height / 2)}px)`,
+    left: `calc(50% - ${Math.round(containSize.width / 2)}px)`,
+    width: Math.floor(containSize.width) + "px",
+    height: Math.floor(containSize.height) + "px",
     clipPath: "inset(0)"
@@ -163,12 +163,12 @@ }], options.value);
 const onLeave = (el, done) => {
-  const { left: elLeft, top: elTop } = el.getBoundingClientRect();
-  const { scrollX: x, scrollY: y } = window;
+  const { left, top } = el.getBoundingClientRect();
+  const { scrollX, scrollY } = window;
   const animation = el.animate([{
-    top: 2 * y + elTop + "px",
-    left: 2 * x + elLeft + "px",
+    top: 2 * scrollY + top + "px",
+    left: 2 * scrollX + left + "px",
     clipPath: "inset(0)"
-  }, getOriginalKeyframe(x, y)], options.value);
+  }, getOriginalKeyframe(scrollX, scrollY)], options.value);
   animation.addEventListener("finish", done);
 };
-function getFitSize(mode) {
+function getFitSize() {
   const fixedWidth = window.innerWidth * rate;
@@ -178,4 +178,13 @@ const fixedHeight = window.innerHeight * rate;
   const advantageSide = fixedWidth / fixedHeight > naturalRatio ? "height" : "width";
+  const widthSize = {
+    width: fixedWidth,
+    height: fixedWidth / naturalRatio
+  };
+  const heightSize = {
+    width: fixedHeight * naturalRatio,
+    height: fixedHeight
+  };
   return {
-    size: +(advantageSide === "height") ^ +(mode === "cover") ? [fixedHeight * naturalRatio, fixedHeight] : [fixedWidth, fixedWidth / naturalRatio],
+    containSize: advantageSide === "height" ? heightSize : widthSize,
+    coverSize: advantageSide === "height" ? widthSize : heightSize,
     advantageSide
@@ -196,9 +205,9 @@ };
   if (ratio > naturalRatio) {
-    const fullHeight = naturalHeight * width / naturalWidth;
-    clipTop = (fullHeight - height) * vertical;
-    clipBottom = fullHeight - height - clipTop;
+    const rest = width / naturalRatio - height;
+    clipTop = rest * vertical;
+    clipBottom = rest - clipTop;
   } else {
-    const fullWidth = naturalWidth * height / naturalHeight;
-    clipLeft = (fullWidth - width) * horizontal;
-    clipRight = fullWidth - width - clipLeft;
+    const rest = height * naturalRatio - width;
+    clipLeft = rest * horizontal;
+    clipRight = rest - clipLeft;
   }
@@ -213,3 +222,3 @@ return {
 }
-function isOverLimit(width, height, rate2) {
+function isSizeOutOfBounds(width, height, rate2) {
   if (!clamp) {
@@ -216,0 +225,0 @@ return false;

package.json

 {
   "name": "@bikariya/image-viewer",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Bikariya image viewer for Nuxt",
@@ -6,0 +6,0 @@ "author": "KazariEX",

No alert changes

Improved metrics

Total package byte prevSize

13158

1.21%

No dependency changes