@bikariya/image-viewer 0.0.4 → 0.0.6

package/dist/module.json

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

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

@@ -1,7 +1,24 @@
 type __VLS_Props = {
+    /**
+     * 目标 `<img>` 元素
+     */
     target: HTMLImageElement;
+    /**
+     * 过渡动画时长 (ms)
+     * @default 400
+     */
     duration?: number;
-    isOpening?: boolean;
+    /**
+     * 放大后占窗口比率
+     * @default 0.9
+     */
+    rate?: number;
+    /**
+     * 是否限制缩放比例
+     * @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,16 +1,22 @@
 <script setup>
 import { computed, ref, useEventListener, usePointer, useTemplateRef } from "#imports";
-const props = defineProps({
+const { target, duration = 400, rate = 0.9, clamp } = defineProps({
   target: { type: null, required: true },
   duration: { type: Number, required: false },
-  isOpening: { type: Boolean, required: false }
+  rate: { type: Number, required: false },
+  clamp: { type: Boolean, required: false },
+  open: { type: Boolean, required: false }
 });
 const emit = defineEmits(["close"]);
 const rootEl = useTemplateRef("root");
-const rate = 0.9;
+useEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    emit("close");
+  }
+});
 const options = computed(() => {
   return {
-    duration: props.duration ?? 400,
+    duration,
     easing: "ease",
     fill: "forwards"
   };
@@ -19,9 +25,7 @@ let startRect;
 let startCenter;
 let startDistance;
 const pointers = ref({});
-const fingers = computed(() => {
-  return Object.values(pointers.value).slice(0, 2);
-});
+const fingers = computed(() => Object.values(pointers.value).slice(0, 2));
 const center = computed(() => getCenter("current"));
 const distance = computed(() => getDistance("current"));
 function getCenter(mode) {
@@ -68,11 +72,16 @@ const { isHolding } = usePointer(rootEl, {
     const top = startRect.top + center.value.y - startCenter.y;
     const finalLeft = left - (center.value.x - left) * (rate2 - 1);
     const finalTop = top - (center.value.y - top) * (rate2 - 1);
+    const finalWidth = startRect.width * rate2;
+    const finalHeight = startRect.height * rate2;
+    if (isSizeOutOfBounds(finalWidth, finalHeight, rate2)) {
+      return;
+    }
     rootEl.value.animate({
       left: finalLeft + "px",
       top: finalTop + "px",
-      width: startRect.width * rate2 + "px",
-      height: startRect.height * rate2 + "px"
+      width: finalWidth + "px",
+      height: finalHeight + "px"
     }, {
       duration: 0,
       fill: "forwards"
@@ -97,45 +106,88 @@ function onWheel(event) {
   const { left, top, width, height } = rootEl.value.getBoundingClientRect();
   const finalLeft = left - (event.clientX - left) * (rate2 - 1);
   const finalTop = top - (event.clientY - top) * (rate2 - 1);
+  const finalWidth = width * rate2;
+  const finalHeight = height * rate2;
+  if (isSizeOutOfBounds(finalWidth, finalHeight, rate2)) {
+    return;
+  }
   rootEl.value.animate({
     left: finalLeft + "px",
     top: finalTop + "px",
-    width: width * rate2 + "px",
-    height: height * rate2 + "px"
+    width: finalWidth + "px",
+    height: finalHeight + "px"
   }, options.value);
 }
-useEventListener("keydown", (event) => {
-  if (event.key === "Escape") {
-    emit("close");
+function onDoubleClick(event) {
+  const { left, top, width, height } = rootEl.value.getBoundingClientRect();
+  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: 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 {
+    rootEl.value.animate({
+      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 fixedWidth = window.innerWidth * rate;
-  const fixedHeight = window.innerHeight * rate;
-  const naturalRatio = props.target.naturalWidth / props.target.naturalHeight;
-  const [finalWidth, finalHeight] = fixedWidth / fixedHeight > naturalRatio ? [fixedHeight * naturalRatio, fixedHeight] : [fixedWidth, fixedWidth / naturalRatio];
+  const { containSize } = getFitSize();
   el.animate([getOriginalKeyframe(), {
-    top: `calc(50% - ${Math.floor(finalHeight / 2)}px)`,
-    left: `calc(50% - ${Math.floor(finalWidth / 2)}px)`,
-    width: Math.floor(finalWidth) + "px",
-    height: Math.floor(finalHeight) + "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: 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() {
+  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 {
+    containSize: advantageSide === "height" ? heightSize : widthSize,
+    coverSize: advantageSide === "height" ? widthSize : heightSize,
+    advantageSide
+  };
+}
 function getOriginalKeyframe(x = 0, y = 0) {
-  const { left, top, width, height } = props.target.getBoundingClientRect();
-  const { naturalWidth, naturalHeight } = props.target;
-  const { objectPosition } = getComputedStyle(props.target);
+  const { left, top, width, height } = target.getBoundingClientRect();
+  const { naturalWidth, naturalHeight } = target;
+  const { objectPosition } = getComputedStyle(target);
   const [horizontal, vertical] = objectPosition.split(" ").map((pos) => Number(pos.slice(0, -1)) / 100);
   const ratio = width / height;
   const naturalRatio = naturalWidth / naturalHeight;
@@ -144,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",
@@ -160,16 +212,27 @@ function getOriginalKeyframe(x = 0, y = 0) {
     clipPath: `inset(${clipTop}px ${clipRight}px ${clipBottom}px ${clipLeft}px)`
   };
 }
+function isSizeOutOfBounds(width, height, rate2) {
+  if (!clamp) {
+    return false;
+  }
+  if (rate2 > 1) {
+    return width > Math.max(window.innerWidth, target.width, target.naturalWidth) && height > Math.max(window.innerHeight, target.height, target.naturalHeight);
+  } else {
+    return width < Math.min(window.innerWidth, target.width, target.naturalWidth) && height < Math.min(window.innerHeight, target.height, target.naturalHeight);
+  }
+}
 </script>
 
 <template>
     <transition @enter="onEnter" @leave="onLeave">
         <img
-            v-if="isOpening"
+            v-if="open"
             ref="root"
             class="bikariya-image-viewer"
             :src="target.src"
             :draggable="false"
+            @dblclick="onDoubleClick"
             @wheel.prevent="onWheel"
         />
     </transition>

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

@@ -1,7 +1,24 @@
 type __VLS_Props = {
+    /**
+     * 目标 `<img>` 元素
+     */
     target: HTMLImageElement;
+    /**
+     * 过渡动画时长 (ms)
+     * @default 400
+     */
     duration?: number;
-    isOpening?: boolean;
+    /**
+     * 放大后占窗口比率
+     * @default 0.9
+     */
+    rate?: number;
+    /**
+     * 是否限制缩放比例
+     * @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.4",
+  "version": "0.0.6",
   "description": "Bikariya image viewer for Nuxt",
   "author": "KazariEX",
   "license": "MIT",