@thangdevalone/meet-layout-grid-vue 1.3.2 → 1.3.3

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { ref, onMounted, computed, defineComponent, provide, h, inject } from 'vue';
+import { ref, onMounted, computed, defineComponent, provide, h, inject, watch } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
-import { createMeetGrid, getSpringConfig } from '@thangdevalone/meet-layout-grid-core';
-export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
-import { motion } from 'motion-v';
+import { createMeetGrid, getSpringConfig, resolveFloatSize } from '@thangdevalone/meet-layout-grid-core';
+export { DEFAULT_FLOAT_BREAKPOINTS, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { useMotionValue, animate, motion } from 'motion-v';
 
 function useGridDimensions(elementRef) {
   const width = ref(0);
@@ -123,6 +123,25 @@ const GridContainer = defineComponent({
       type: Array,
       default: void 0
     },
+    /** Custom width for the floating PiP item in 2-person mode */
+    floatWidth: {
+      type: Number,
+      default: void 0
+    },
+    /** Custom height for the floating PiP item in 2-person mode */
+    floatHeight: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Responsive breakpoints for the floating PiP in 2-person mode.
+     * When provided, PiP size auto-adjusts based on container width.
+     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     */
+    floatBreakpoints: {
+      type: Array,
+      default: void 0
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -144,7 +163,10 @@ const GridContainer = defineComponent({
       currentPage: props.currentPage,
       maxVisible: props.maxVisible,
       currentVisiblePage: props.currentVisiblePage,
-      itemAspectRatios: props.itemAspectRatios
+      itemAspectRatios: props.itemAspectRatios,
+      floatWidth: props.floatWidth,
+      floatHeight: props.floatHeight,
+      floatBreakpoints: props.floatBreakpoints
     }));
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {
@@ -214,11 +236,11 @@ const GridItem = defineComponent({
     });
     const isFloat = computed(() => grid.value.floatIndex === props.index);
     const floatDims = computed(() => grid.value.floatDimensions ?? { width: 120, height: 160 });
-    const floatAnchor = ref("bottom-right");
-    const floatDragging = ref(false);
-    const floatDragOffset = ref({ x: 0, y: 0 });
-    const floatStartPos = ref({ x: 0, y: 0 });
-    const floatDisplayPos = ref({ x: 0, y: 0 });
+    const floatAnchor = ref(
+      "bottom-right"
+    );
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
     const floatInitialized = ref(false);
     const getFloatCornerPos = (corner) => {
       const padding = 12;
@@ -237,11 +259,11 @@ const GridItem = defineComponent({
           return { x: dims.width - fw - padding, y: dims.height - fh - padding };
       }
     };
-    const findFloatNearestCorner = (x, y) => {
+    const findFloatNearestCorner = (posX, posY) => {
       const fw = floatDims.value.width;
       const fh = floatDims.value.height;
-      const centerX = x + fw / 2;
-      const centerY = y + fh / 2;
+      const centerX = posX + fw / 2;
+      const centerY = posY + fh / 2;
       const dims = containerDimensions.value;
       const isLeft = centerX < dims.width / 2;
       const isTop = centerY < dims.height / 2;
@@ -253,46 +275,77 @@ const GridItem = defineComponent({
         return "bottom-left";
       return "bottom-right";
     };
-    const floatCornerPos = computed(() => getFloatCornerPos(floatAnchor.value));
-    const handleFloatDragStart = (e) => {
-      floatDragging.value = true;
-      const pos = "touches" in e ? e.touches[0] : e;
-      floatStartPos.value = { x: pos.clientX, y: pos.clientY };
-      floatDragOffset.value = { x: 0, y: 0 };
-    };
-    const handleFloatDragMove = (e) => {
-      if (!floatDragging.value)
-        return;
-      e.preventDefault();
-      const pos = "touches" in e ? e.touches[0] : e;
-      floatDragOffset.value = {
-        x: pos.clientX - floatStartPos.value.x,
-        y: pos.clientY - floatStartPos.value.y
-      };
-      floatDisplayPos.value = {
-        x: floatCornerPos.value.x + floatDragOffset.value.x,
-        y: floatCornerPos.value.y + floatDragOffset.value.y
-      };
-    };
-    const handleFloatDragEnd = () => {
-      if (!floatDragging.value)
-        return;
-      floatDragging.value = false;
-      const nearest = findFloatNearestCorner(floatDisplayPos.value.x, floatDisplayPos.value.y);
-      floatAnchor.value = nearest;
-      floatDisplayPos.value = getFloatCornerPos(nearest);
-      floatDragOffset.value = { x: 0, y: 0 };
-    };
+    watch(isFloat, (floating) => {
+      if (!floating) {
+        floatInitialized.value = false;
+      }
+    });
+    watch(
+      [isFloat, () => containerDimensions.value.width, () => containerDimensions.value.height],
+      ([floating, w, h2]) => {
+        if (floating && w > 0 && h2 > 0 && !floatInitialized.value) {
+          const pos = getFloatCornerPos(floatAnchor.value);
+          x.set(pos.x);
+          y.set(pos.y);
+          floatInitialized.value = true;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      [floatAnchor, () => containerDimensions.value.width, () => containerDimensions.value.height],
+      ([, w, h2]) => {
+        if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
+          const pos = getFloatCornerPos(floatAnchor.value);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          animate(x, pos.x, springCfg);
+          animate(y, pos.y, springCfg);
+        }
+      }
+    );
     const isLastVisibleOther = computed(() => {
       const lastVisibleOthersIndex = grid.value.getLastVisibleOthersIndex();
       return props.index === lastVisibleOthersIndex;
     });
     const hiddenCount = computed(() => grid.value.hiddenCount);
     const springConfig = getSpringConfig(springPreset);
+    const gridX = useMotionValue(0);
+    const gridY = useMotionValue(0);
+    const gridAnimReady = ref(false);
+    watch(
+      [
+        () => position.value.top,
+        () => position.value.left,
+        isFloat,
+        isHidden
+      ],
+      ([, , floating, hidden]) => {
+        if (floating || hidden) {
+          gridAnimReady.value = false;
+          return;
+        }
+        const pos = position.value;
+        if (!gridAnimReady.value) {
+          gridX.set(pos.left);
+          gridY.set(pos.top);
+          gridAnimReady.value = true;
+        } else {
+          const cfg = {
+            type: "spring",
+            stiffness: springConfig.stiffness,
+            damping: springConfig.damping
+          };
+          animate(gridX, pos.left, cfg);
+          animate(gridY, pos.top, cfg);
+        }
+      },
+      { immediate: true }
+    );
     const slotProps = computed(() => ({
       contentDimensions: contentDimensions.value,
       isLastVisibleOther: isLastVisibleOther.value,
-      hiddenCount: hiddenCount.value
+      hiddenCount: hiddenCount.value,
+      isFloat: isFloat.value
     }));
     return () => {
       if (isHidden.value) {
@@ -302,88 +355,90 @@ const GridItem = defineComponent({
         const dims = containerDimensions.value;
         if (dims.width === 0 || dims.height === 0)
           return null;
-        if (!floatInitialized.value) {
-          floatDisplayPos.value = floatCornerPos.value;
-          floatInitialized.value = true;
-        }
+        const dragConstraints = {
+          left: 12,
+          right: dims.width - floatDims.value.width - 12,
+          top: 12,
+          bottom: dims.height - floatDims.value.height - 12
+        };
+        const handleDragEnd = () => {
+          const currentX = x.get();
+          const currentY = y.get();
+          const nearestCorner = findFloatNearestCorner(currentX, currentY);
+          floatAnchor.value = nearestCorner;
+          const snapPos = getFloatCornerPos(nearestCorner);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          animate(x, snapPos.x, springCfg);
+          animate(y, snapPos.y, springCfg);
+        };
         return h(
           motion.div,
           {
-            animate: {
-              x: floatDisplayPos.value.x,
-              y: floatDisplayPos.value.y,
-              opacity: 1,
-              scale: floatDragging.value ? 1.05 : 1
-            },
-            transition: floatDragging.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+            // Key forces Vue to recreate this element when switching float↔grid
+            key: `float-${props.index}`,
+            drag: true,
+            dragMomentum: false,
+            dragElastic: 0.1,
+            dragConstraints,
             style: {
               position: "absolute",
               width: `${floatDims.value.width}px`,
               height: `${floatDims.value.height}px`,
               borderRadius: "12px",
-              boxShadow: floatDragging.value ? "0 8px 32px rgba(0,0,0,0.4)" : "0 4px 20px rgba(0,0,0,0.3)",
+              boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
               overflow: "hidden",
-              cursor: floatDragging.value ? "grabbing" : "grab",
+              cursor: "grab",
               zIndex: 100,
               touchAction: "none",
               left: 0,
-              top: 0
+              top: 0,
+              x,
+              y
             },
+            whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+            transition: { type: "spring", stiffness: 400, damping: 30 },
             "data-grid-index": props.index,
             "data-grid-float": true,
-            onMousedown: handleFloatDragStart,
-            onMousemove: handleFloatDragMove,
-            onMouseup: handleFloatDragEnd,
-            onMouseleave: handleFloatDragEnd,
-            onTouchstart: handleFloatDragStart,
-            onTouchmove: handleFloatDragMove,
-            onTouchend: handleFloatDragEnd
+            onDragEnd: handleDragEnd
           },
           () => slots.default?.(slotProps.value)
         );
       }
-      const animateProps = {
-        width: dimensions.value.width,
-        height: dimensions.value.height,
-        top: position.value.top,
-        left: position.value.left
-      };
+      const itemWidth = dimensions.value.width;
+      const itemHeight = dimensions.value.height;
       if (props.disableAnimation) {
         return h(
           props.tag,
           {
             style: {
               position: "absolute",
-              ...animateProps,
-              width: `${animateProps.width}px`,
-              height: `${animateProps.height}px`,
-              top: `${animateProps.top}px`,
-              left: `${animateProps.left}px`
+              width: `${itemWidth}px`,
+              height: `${itemHeight}px`,
+              top: `${position.value.top}px`,
+              left: `${position.value.left}px`
             },
             "data-grid-index": props.index,
             "data-grid-main": isMain.value
           },
-          // Pass all slot props
           slots.default?.(slotProps.value)
         );
       }
       return h(
         motion.div,
         {
-          as: props.tag,
-          animate: animateProps,
-          transition: {
-            type: springConfig.type,
-            stiffness: springConfig.stiffness,
-            damping: springConfig.damping
-          },
+          key: `grid-${props.index}`,
           style: {
-            position: "absolute"
+            position: "absolute",
+            top: 0,
+            left: 0,
+            x: gridX,
+            y: gridY,
+            width: `${itemWidth}px`,
+            height: `${itemHeight}px`
           },
           "data-grid-index": props.index,
           "data-grid-main": isMain.value
         },
-        // Pass all slot props
         () => slots.default?.(slotProps.value)
       );
     };
@@ -428,16 +483,26 @@ const GridOverlay = defineComponent({
 const FloatingGridItem = defineComponent({
   name: "FloatingGridItem",
   props: {
-    /** Width of the floating item */
+    /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
     width: {
       type: Number,
       default: 120
     },
-    /** Height of the floating item */
+    /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
     height: {
       type: Number,
       default: 160
     },
+    /**
+     * Responsive breakpoints for PiP sizing.
+     * When provided, width/height auto-adjust based on container width.
+     * Overrides the fixed `width`/`height` props.
+     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     */
+    breakpoints: {
+      type: Array,
+      default: void 0
+    },
     /** Initial position (x, y from container edges) */
     initialPosition: {
       type: Object,
@@ -478,10 +543,14 @@ const FloatingGridItem = defineComponent({
     }
     const { dimensions } = context;
     const currentAnchor = ref(props.anchor);
-    const isDragging = ref(false);
-    const dragOffset = ref({ x: 0, y: 0 });
-    const startPos = ref({ x: 0, y: 0 });
-    const displayPosition = ref({ x: 0, y: 0 });
+    const effectiveSize = computed(() => {
+      if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
+        return resolveFloatSize(dimensions.value.width, props.breakpoints);
+      }
+      return { width: props.width, height: props.height };
+    });
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
     const isInitialized = ref(false);
     const containerDimensions = computed(() => ({
       width: dimensions.value.width,
@@ -490,21 +559,23 @@ const FloatingGridItem = defineComponent({
     const getCornerPosition = (corner) => {
       const padding = props.edgePadding + props.initialPosition.x;
       const dims = containerDimensions.value;
+      const ew = effectiveSize.value.width;
+      const eh = effectiveSize.value.height;
       switch (corner) {
         case "top-left":
           return { x: padding, y: padding };
         case "top-right":
-          return { x: dims.width - props.width - padding, y: padding };
+          return { x: dims.width - ew - padding, y: padding };
         case "bottom-left":
-          return { x: padding, y: dims.height - props.height - padding };
+          return { x: padding, y: dims.height - eh - padding };
         case "bottom-right":
         default:
-          return { x: dims.width - props.width - padding, y: dims.height - props.height - padding };
+          return { x: dims.width - ew - padding, y: dims.height - eh - padding };
       }
     };
-    const findNearestCorner = (x, y) => {
-      const centerX = x + props.width / 2;
-      const centerY = y + props.height / 2;
+    const findNearestCorner = (posX, posY) => {
+      const centerX = posX + effectiveSize.value.width / 2;
+      const centerY = posY + effectiveSize.value.height / 2;
       const dims = containerDimensions.value;
       const containerCenterX = dims.width / 2;
       const containerCenterY = dims.height / 2;
@@ -518,78 +589,95 @@ const FloatingGridItem = defineComponent({
         return "bottom-left";
       return "bottom-right";
     };
-    const currentPos = computed(() => getCornerPosition(currentAnchor.value));
-    const handleDragStart = (e) => {
-      isDragging.value = true;
-      const pos = "touches" in e ? e.touches[0] : e;
-      startPos.value = { x: pos.clientX, y: pos.clientY };
-      dragOffset.value = { x: 0, y: 0 };
-    };
-    const handleDragMove = (e) => {
-      if (!isDragging.value)
-        return;
-      e.preventDefault();
-      const pos = "touches" in e ? e.touches[0] : e;
-      dragOffset.value = {
-        x: pos.clientX - startPos.value.x,
-        y: pos.clientY - startPos.value.y
-      };
-      displayPosition.value = {
-        x: currentPos.value.x + dragOffset.value.x,
-        y: currentPos.value.y + dragOffset.value.y
-      };
-    };
-    const handleDragEnd = () => {
-      if (!isDragging.value)
-        return;
-      isDragging.value = false;
-      const finalX = displayPosition.value.x;
-      const finalY = displayPosition.value.y;
-      const nearestCorner = findNearestCorner(finalX, finalY);
-      currentAnchor.value = nearestCorner;
-      emit("anchorChange", nearestCorner);
-      displayPosition.value = getCornerPosition(nearestCorner);
-      dragOffset.value = { x: 0, y: 0 };
-    };
+    watch(
+      [() => containerDimensions.value.width, () => containerDimensions.value.height],
+      ([w, h2]) => {
+        if (w > 0 && h2 > 0 && !isInitialized.value) {
+          const pos = getCornerPosition(currentAnchor.value);
+          x.set(pos.x);
+          y.set(pos.y);
+          isInitialized.value = true;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      [
+        () => props.anchor,
+        () => containerDimensions.value.width,
+        () => containerDimensions.value.height
+      ],
+      ([newAnchor, w, h2]) => {
+        if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
+          currentAnchor.value = newAnchor;
+          const pos = getCornerPosition(newAnchor);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          animate(x, pos.x, springCfg);
+          animate(y, pos.y, springCfg);
+        }
+      }
+    );
+    watch(
+      [() => effectiveSize.value.width, () => effectiveSize.value.height],
+      () => {
+        if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
+          const pos = getCornerPosition(currentAnchor.value);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          animate(x, pos.x, springCfg);
+          animate(y, pos.y, springCfg);
+        }
+      }
+    );
     return () => {
       const dims = containerDimensions.value;
       if (!props.visible || dims.width === 0 || dims.height === 0) {
         return null;
       }
-      if (!isInitialized.value) {
-        displayPosition.value = currentPos.value;
-        isInitialized.value = true;
-      }
+      const ew = effectiveSize.value.width;
+      const eh = effectiveSize.value.height;
+      const padding = props.edgePadding + props.initialPosition.x;
+      const dragConstraints = {
+        left: padding,
+        right: dims.width - ew - padding,
+        top: padding,
+        bottom: dims.height - eh - padding
+      };
+      const handleDragEnd = () => {
+        const currentX = x.get();
+        const currentY = y.get();
+        const nearestCorner = findNearestCorner(currentX, currentY);
+        currentAnchor.value = nearestCorner;
+        emit("anchorChange", nearestCorner);
+        const snapPos = getCornerPosition(nearestCorner);
+        const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+        animate(x, snapPos.x, springCfg);
+        animate(y, snapPos.y, springCfg);
+      };
       return h(
         motion.div,
         {
-          animate: {
-            x: displayPosition.value.x,
-            y: displayPosition.value.y,
-            opacity: 1,
-            scale: isDragging.value ? 1.05 : 1
-          },
-          transition: isDragging.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+          drag: true,
+          dragMomentum: false,
+          dragElastic: 0.1,
+          dragConstraints,
           style: {
             position: "absolute",
-            width: `${props.width}px`,
-            height: `${props.height}px`,
+            width: `${ew}px`,
+            height: `${eh}px`,
             borderRadius: `${props.borderRadius}px`,
-            boxShadow: isDragging.value ? "0 8px 32px rgba(0,0,0,0.4)" : props.boxShadow,
+            boxShadow: props.boxShadow,
             overflow: "hidden",
-            cursor: isDragging.value ? "grabbing" : "grab",
+            cursor: "grab",
             zIndex: 100,
             touchAction: "none",
             left: 0,
-            top: 0
+            top: 0,
+            x,
+            y
           },
-          onMousedown: handleDragStart,
-          onMousemove: handleDragMove,
-          onMouseup: handleDragEnd,
-          onMouseleave: handleDragEnd,
-          onTouchstart: handleDragStart,
-          onTouchmove: handleDragMove,
-          onTouchend: handleDragEnd
+          whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+          transition: { type: "spring", stiffness: 400, damping: 30 },
+          onDragEnd: handleDragEnd
         },
         slots.default?.()
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meet-layout-grid-vue",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Vue 3 integration for meet-layout-grid with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.0",
     "motion-v": "^1.0.0",
-    "@thangdevalone/meet-layout-grid-core": "1.3.2"
+    "@thangdevalone/meet-layout-grid-core": "1.3.3"
   },
   "devDependencies": {
     "vue": "^3.4.0",