@ozdao/martyrs 0.2.424 → 0.2.426

package/src/components/PhotoViewer/PhotoViewer.vue

@@ -3,47 +3,119 @@
     <img loading="lazy" :src="photoUrl" :style="imgStyle" ref="image" @load="initialize" />
   </div>
 </template>
-
 <script setup>
-import { ref, reactive, computed } from 'vue';
-
+import { ref, reactive, computed, onMounted, watch } from 'vue';
 const props = defineProps({
   photoUrl: String,
   show: Boolean,
 });
-
 const scale = ref(1);
 const position = reactive({ x: 0, y: 0 });
 const dragging = ref(false);
 const startPosition = reactive({ x: 0, y: 0 });
 const startScale = ref(1);
 const startDistance = ref(0);
+const image = ref(null);
+const container = ref(null);
 
 const imgStyle = computed(() => ({
   transform: `scale(${scale.value}) translate(${position.x}px, ${position.y}px)`,
 }));
 
+// Наблюдаем за изменением масштаба, чтобы ограничивать позицию
+watch(scale, () => {
+  constrainPosition();
+});
+
+const getImageDimensions = () => {
+  if (!image.value) return { width: 0, height: 0 };
+  
+  // Используем естественные размеры изображения
+  const imgWidth = image.value.naturalWidth;
+  const imgHeight = image.value.naturalHeight;
+  
+  // Получаем размеры контейнера
+  const containerRect = image.value.parentElement?.getBoundingClientRect();
+  if (!containerRect) return { width: 0, height: 0 };
+  
+  const containerWidth = containerRect.width;
+  const containerHeight = containerRect.height;
+  
+  // Определяем, как изображение вписывается в контейнер (с учетом object-fit: scale-down)
+  let renderedWidth, renderedHeight;
+  
+  if (imgWidth > containerWidth || imgHeight > containerHeight) {
+    const ratioX = containerWidth / imgWidth;
+    const ratioY = containerHeight / imgHeight;
+    const ratio = Math.min(ratioX, ratioY);
+    
+    renderedWidth = imgWidth * ratio;
+    renderedHeight = imgHeight * ratio;
+  } else {
+    renderedWidth = imgWidth;
+    renderedHeight = imgHeight;
+  }
+  
+  return {
+    renderedWidth,
+    renderedHeight,
+    containerWidth,
+    containerHeight
+  };
+};
+
 const handleWheel = (event) => {
   event.preventDefault();
+  
   const delta = event.deltaY > 0 ? -0.1 : 0.1;
-  scale.value = Math.min(Math.max(1, scale.value + delta), 3);
+  const newScale = Math.min(Math.max(1, scale.value + delta), 3);
+  
+  // Рассчитываем позицию курсора относительно центра изображения
+  const rect = image.value.getBoundingClientRect();
+  const mouseX = event.clientX - rect.left - rect.width / 2;
+  const mouseY = event.clientY - rect.top - rect.height / 2;
+  
+  // Сохраняем соотношение позиции курсора к изображению при масштабировании
+  const scaleChange = newScale / scale.value;
+  
+  // Обновляем позицию так, чтобы точка под курсором оставалась на месте
+  position.x = position.x - (mouseX / scale.value) * (scaleChange - 1);
+  position.y = position.y - (mouseY / scale.value) * (scaleChange - 1);
+  
+  // Обновляем масштаб
+  scale.value = newScale;
+  
+  // Ограничиваем позицию после обновления масштаба
+  constrainPosition();
 };
 
 const startDrag = (event) => {
   event.preventDefault();
+  if (scale.value <= 1) return; // Не позволяем перетаскивать при масштабе 1
+  
   dragging.value = true;
   startPosition.x = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
   startPosition.y = event.type === 'mousedown' ? event.clientY : event.touches[0].clientY;
+  
   const move = (moveEvent) => {
     if (dragging.value) {
       const currentX = moveEvent.type === 'mousemove' ? moveEvent.clientX : moveEvent.touches[0].clientX;
       const currentY = moveEvent.type === 'mousemove' ? moveEvent.clientY : moveEvent.touches[0].clientY;
-      position.x += (currentX - startPosition.x) / scale.value;
-      position.y += (currentY - startPosition.y) / scale.value;
+      
+      const deltaX = (currentX - startPosition.x) / scale.value;
+      const deltaY = (currentY - startPosition.y) / scale.value;
+      
+      position.x += deltaX;
+      position.y += deltaY;
+      
+      // Ограничиваем позицию после перемещения
+      constrainPosition();
+      
       startPosition.x = currentX;
       startPosition.y = currentY;
     }
   };
+  
   const endDrag = () => {
     dragging.value = false;
     document.removeEventListener('mousemove', move);
@@ -51,6 +123,7 @@ const startDrag = (event) => {
     document.removeEventListener('touchmove', move);
     document.removeEventListener('touchend', endDrag);
   };
+  
   document.addEventListener('mousemove', move);
   document.addEventListener('mouseup', endDrag);
   document.addEventListener('touchmove', move);
@@ -79,7 +152,25 @@ const handleTouchMove = (event) => {
     const distanceY = Math.abs(touch1.clientY - touch2.clientY);
     const newDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
     const scaleFactor = newDistance / startDistance.value;
-    scale.value = Math.min(Math.max(1, startScale.value * scaleFactor), 3);
+    
+    // Получаем центр между двумя касаниями
+    const centerX = (touch1.clientX + touch2.clientX) / 2;
+    const centerY = (touch1.clientY + touch2.clientY) / 2;
+    
+    // Получаем координаты центра касания относительно изображения
+    const rect = image.value.getBoundingClientRect();
+    const touchCenterX = centerX - rect.left - rect.width / 2;
+    const touchCenterY = centerY - rect.top - rect.height / 2;
+    
+    const newScale = Math.min(Math.max(1, startScale.value * scaleFactor), 3);
+    const scaleChange = newScale / scale.value;
+    
+    // Обновляем позицию, чтобы центр касания оставался на месте
+    position.x = position.x - (touchCenterX / scale.value) * (scaleChange - 1);
+    position.y = position.y - (touchCenterY / scale.value) * (scaleChange - 1);
+    
+    scale.value = newScale;
+    constrainPosition();
   }
 };
 
@@ -94,8 +185,45 @@ const initialize = () => {
   position.x = 0;
   position.y = 0;
 };
-</script>
 
+const constrainPosition = () => {
+  // Если масштаб 1, сбрасываем позицию в центр
+  if (scale.value <= 1) {
+    position.x = 0;
+    position.y = 0;
+    return;
+  }
+  
+  const { renderedWidth, renderedHeight, containerWidth, containerHeight } = getImageDimensions();
+  
+  // Вычисляем максимальное смещение
+  const scaledWidth = renderedWidth * scale.value;
+  const scaledHeight = renderedHeight * scale.value;
+  
+  // Отступ от края изображения до края контейнера при текущем масштабе
+  const horizontalOffset = (scaledWidth - containerWidth) / 2 / scale.value;
+  const verticalOffset = (scaledHeight - containerHeight) / 2 / scale.value;
+  
+  // Ограничиваем смещение, чтобы изображение не выходило за пределы контейнера
+  if (horizontalOffset > 0) {
+    position.x = Math.max(-horizontalOffset, Math.min(horizontalOffset, position.x));
+  } else {
+    position.x = 0;
+  }
+  
+  if (verticalOffset > 0) {
+    position.y = Math.max(-verticalOffset, Math.min(verticalOffset, position.y));
+  } else {
+    position.y = 0;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    constrainPosition();
+  });
+});
+</script>
 <style>
 .photo-container {
   width: 100%;
@@ -105,11 +233,11 @@ const initialize = () => {
   position: relative;
   cursor: grab;
 }
-
 .photo-container img {
   width: 100%;
   height: 100%;
   object-fit: scale-down;
-  transition: transform 0.3s;
+  transition: transform 0.05s;
+  transform-origin: center center;
 }
-</style>
+</style>

package/src/modules/products/components/blocks/ImagesThumbnails.vue

@@ -1,14 +1,41 @@
 <template>
-  <div class="o-scroll w-100 product-images">
-    <div class="no-responsive w-max flex flex-nowrap gap-thin">
-      <img loading="lazy" 
-        v-for="(image, index) in images"
-        :key="index"
-        :src="(FILE_SERVER_URL || '') + image" 
-        @click="openPopup(image)"
-        class="flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
+  <div class="w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative">
+    <!-- Main image container -->
+    <div class="pd-semi w-100 bg-light radius-semi o-hidden" @click="openPopup(images[0])">
+      <Images360
+        v-if="product && product.image3d"
+        class="h-100 w-100"
+        :imagePath="`/assets/images/products/${product.image3d}`"
+        :imageCount="36"
       />
+      <img
+        loading="lazy"
+        v-if="images[0] && !product?.image3d"
+        class="h-max h-max-15r bg-white radius-semi w-100"
+        style="object-fit: contain;"
+        :src="(FILE_SERVER_URL || '') + images[0]"
+      />
+      <PlaceholderImage
+        v-if="!images[0] && !product?.image3d"
+        class="h-max-20r h-100 w-100"
+        style="object-fit: cover;"
+      />
+    </div>
+    
+    <!-- Thumbnails -->
+    <div v-if="images.length > 1" class="o-scroll w-100 pd-semi pd-t-zero">
+      <div class="no-responsive w-max flex flex-nowrap gap-thin">
+        <img loading="lazy" 
+          v-for="(image, index) in images"
+          :key="index"
+          :src="(FILE_SERVER_URL || '') + image" 
+          @click="openPopup(image)"
+          class="flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
+        />
+      </div>
     </div>
+    
+    <!-- Popup with photo viewer -->
     <Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-medium o-hidden">
       <PhotoViewer
         :photoUrl="(FILE_SERVER_URL || '') + selectedImage"
@@ -20,20 +47,28 @@
 <script setup>
 import { ref } from "vue";
 
-import Popup from '@martyrs/src/components/Popup/Popup.vue'
-import PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue'
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';
+
+
+import Images360 from '@martyrs/src/modules/products/components/blocks/Images360.vue'
 
 const props = defineProps({
   images: {
     type: Array,
     required: true,
-  }
+  },
+  product: {
+    type: Object,
+    default: () => ({})
+  },
 });
 
 const isPopupVisible = ref(false);
 const selectedImage = ref(null);
 
 const openPopup = (image) => {
+  if (!image) return;
   selectedImage.value = image;
   isPopupVisible.value = true;
 };
@@ -44,14 +79,6 @@ const closePopup = () => {
 </script>
 
 <style scoped>
-.magnifier {
-  max-width: 32rem;
-}
-.product-images {
-  display: flex;
-  flex-direction: column;
-}
-
 .thumbnail {
   width: 100%;
   max-width: 6rem;
@@ -59,22 +86,4 @@ const closePopup = () => {
   object-fit: cover;
   cursor: pointer;
 }
-
-.popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: zoom-out;
-}
-
-.popup-image {
-  max-width: 90%;
-  max-height: 90%;
-}
 </style>

package/src/modules/products/components/pages/Product.vue

@@ -1,33 +1,11 @@
 <template>
   <div v-if="products.state.current._id" class="h-100 w-100 mobile:pd-thin pd-big bg-white">
     <div class="cols-2-1_2 w-100 gap-medium">
-      <div class="w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative">
-        <div class="pd-semi w-100 bg-light radius-semi o-hidden">
-          <Images360
-            v-if="product && product.image3d"
-            class="h-100 w-100"
-            :imagePath="`/assets/images/products/${product.image3d}`"
-            :imageCount="36"
-          />
-          <img
-            loading="lazy"
-            v-if="images[0] && !product.image3d"
-            class="h-max h-max-15r bg-white radius-semi w-100"
-            style="object-fit: contain;"
-            :src="(FILE_SERVER_URL || '') + images[0]"
-          />
-          <PlaceholderImage
-            v-if="!images[0] && !product.image3d"
-            class="h-max-20r h-100 w-100"
-            style="object-fit: cover;"
-          />
-        </div>
-        <ImagesThumbnails
-          v-if="images.length > 1"
-          :images="images"
-          class="pd-semi pd-t-zero"
-        />
-      </div>
+
+      <ImagesThumbnails
+        :images="images"
+        :product="product"
+      />
 
       <div class="pos-relative w-100 h-100 flex-column flex-h-center flex">
         <IconEdit
@@ -138,7 +116,6 @@ import PopupDateSelector from '@martyrs/src/modules/globals/views/components/blo
 import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'
 import IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue'
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
-import Images360 from '@martyrs/src/modules/products/components/blocks/Images360.vue'
 import ImagesThumbnails from '@martyrs/src/modules/products/components/blocks/ImagesThumbnails.vue'
 import Price from '@martyrs/src/modules/products/components/elements/Price.vue'
 import PopularProducts from '@martyrs/src/modules/products/components/sections/PopularProducts.vue'

package/dist/martyrs/src/components/Tooltip/Tooltip.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.vue.js","sources":["../../../../../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<template>\n  <div class=\"cursor-pointer tooltip-container\" @mouseover=\"showTooltip\" @mouseleave=\"hideTooltip\">\n    <slot></slot>\n    <div  class=\"tooltip-content\" :style=\"tooltipStyle\">\n      {{ text }}\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive } from 'vue';\n\nconst props = defineProps({\n  text: {\n    type: String,\n    required: true\n  }\n});\n\nconst visible = ref(false);\n\nconst tooltipStyle = reactive({\n  position: 'absolute',\n  width: 'max-content',\n  zIndex: 1000,\n  background: '#333',\n  color: '#fff',\n  padding: '5px 10px',\n  borderRadius: '3px',\n  fontSize: '14px',\n  display: 'none',\n});\n\nfunction showTooltip(event) {\n  visible.value = true;\n  tooltipStyle.left = `${(event.clientX / 100) + 10 }px`;\n  tooltipStyle.top = `${(event.clientY / 100) + 10 }px`;\n  tooltipStyle.display = 'block';\n}\n\nfunction hideTooltip() {\n  visible.value = false;\n  tooltipStyle.display = 'none';\n}\n</script>\n\n<style >\n.tooltip-container {\n  position: relative;\n  display: inline-block;\n}\n\n.tooltip-content {\n  pointer-events: none;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;AAmBA,UAAM,UAAU,IAAI,KAAK;AAEzB,UAAM,eAAe,SAAS;AAAA,MAC5B,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,UAAU;AAAA,MACV,SAAS;AAAA,IACX,CAAC;AAED,aAAS,YAAY,OAAO;AAC1B,cAAQ,QAAQ;AAChB,mBAAa,OAAO,GAAI,MAAM,UAAU,MAAO,EAAE;AACjD,mBAAa,MAAM,GAAI,MAAM,UAAU,MAAO,EAAE;AAChD,mBAAa,UAAU;AAAA,IACzB;AAEA,aAAS,cAAc;AACrB,cAAQ,QAAQ;AAChB,mBAAa,UAAU;AAAA,IACzB;;;;;;;;;;;;;;;;"}