@bikariya/image-viewer 0.0.5 → 0.0.7

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@bikariya/image-viewer",
   "configKey": "image-viewer",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/image-viewer.d.vue.ts

@@ -1,13 +1,9 @@
-type __VLS_Props = {
+import type { ModalProps } from "#modals";
+type __VLS_Props = ModalProps & {
     /**
      * 目标 `<img>` 元素
      */
     target: HTMLImageElement;
-    /**
-     * 过渡动画时长 (ms)
-     * @default 400
-     */
-    duration?: number;
     /**
      * 放大后占窗口比率
      * @default 0.9
@@ -18,7 +14,6 @@ type __VLS_Props = {
      * @default false
      */
     clamp?: boolean;
-    open?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;

package/dist/runtime/image-viewer.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref, useEventListener, usePointer, useTemplateRef } from "#imports";
-const { target, duration = 400, rate = 0.9, clamp } = defineProps({
-  target: { type: null, required: true },
+const { target, duration, rate = 0.9, clamp } = defineProps({
   duration: { type: Number, required: false },
+  open: { type: Boolean, required: false },
+  target: { type: null, required: true },
   rate: { type: Number, required: false },
-  clamp: { type: Boolean, required: false },
-  open: { type: Boolean, required: false }
+  clamp: { type: Boolean, required: false }
 });
 const emit = defineEmits(["close"]);
 const rootEl = useTemplateRef("root");
@@ -74,7 +74,7 @@ const { isHolding } = usePointer(rootEl, {
     const finalTop = top - (center.value.y - top) * (rate2 - 1);
     const finalWidth = startRect.width * rate2;
     const finalHeight = startRect.height * rate2;
-    if (isOverLimit(finalWidth, finalHeight, rate2)) {
+    if (isSizeOutOfBounds(finalWidth, finalHeight, rate2)) {
       return;
     }
     rootEl.value.animate({
@@ -108,7 +108,7 @@ function onWheel(event) {
   const finalTop = top - (event.clientY - top) * (rate2 - 1);
   const finalWidth = width * rate2;
   const finalHeight = height * rate2;
-  if (isOverLimit(finalWidth, finalHeight, rate2)) {
+  if (isSizeOutOfBounds(finalWidth, finalHeight, rate2)) {
     return;
   }
   rootEl.value.animate({
@@ -120,58 +120,67 @@ function onWheel(event) {
 }
 function onDoubleClick(event) {
   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);
   }
 }
 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)"
   }], 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: `calc(${2 * scrollY + top}px + 50dvh - 50svh)`,
+    left: `calc(${2 * scrollX + left}px + 50dvw - 50svw)`,
     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;
   const fixedHeight = window.innerHeight * rate;
   const naturalRatio = target.naturalWidth / target.naturalHeight;
   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
   };
 }
@@ -187,13 +196,13 @@ function getOriginalKeyframe(x = 0, y = 0) {
   let clipLeft = 0;
   let clipRight = 0;
   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;
   }
   return {
     top: y + top - clipTop + "px",
@@ -203,7 +212,7 @@ function getOriginalKeyframe(x = 0, y = 0) {
     clipPath: `inset(${clipTop}px ${clipRight}px ${clipBottom}px ${clipLeft}px)`
   };
 }
-function isOverLimit(width, height, rate2) {
+function isSizeOutOfBounds(width, height, rate2) {
   if (!clamp) {
     return false;
   }

package/dist/runtime/image-viewer.vue.d.ts

@@ -1,13 +1,9 @@
-type __VLS_Props = {
+import type { ModalProps } from "#modals";
+type __VLS_Props = ModalProps & {
     /**
      * 目标 `<img>` 元素
      */
     target: HTMLImageElement;
-    /**
-     * 过渡动画时长 (ms)
-     * @default 400
-     */
-    duration?: number;
     /**
      * 放大后占窗口比率
      * @default 0.9
@@ -18,7 +14,6 @@ type __VLS_Props = {
      * @default false
      */
     clamp?: boolean;
-    open?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bikariya/image-viewer",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Bikariya image viewer for Nuxt",
   "author": "KazariEX",
   "license": "MIT",
@@ -15,8 +15,8 @@
     "dist"
   ],
   "dependencies": {
-    "@bikariya/modals": "",
-    "@nuxt/kit": "^4.3.0"
+    "@nuxt/kit": "^4.3.1",
+    "@bikariya/modals": "0.0.7"
   },
   "scripts": {
     "build": "nuxt-module-build build",