partially fix snap grid example

Author: qcp

docs/.vitepress/components/v2/Examples/SnapGrid/Example.vue

@@ -40,7 +40,13 @@
           :step-x="40"
           :step-y="40"
         >
-          <SnapChip>Drag me</SnapChip>
+          <SnapChip 
+            :style="{
+              height: '40px',
+              width: '80px'
+          }">
+            Drag
+          </SnapChip>
         </GridCanvas>
       </DnDProvider>
     </div>
@@ -58,7 +64,13 @@
           :step-x="80"
           :step-y="40"
         >
-          <SnapChip>Drag me</SnapChip>
+          <SnapChip 
+            :style="{
+              height: '40px',
+              width: '80px'
+          }">
+            Drag
+          </SnapChip>
         </GridCanvas>
       </DnDProvider>
     </div>

docs/.vitepress/components/v2/Examples/SnapGrid/GridCanvas.vue

@@ -1,14 +1,38 @@
 <script setup lang="ts">
+  import {computed, useTemplateRef} from 'vue'
+
   const props = defineProps<{
     stepX: number;
     stepY: number;
   }>();
+
+  const canvasRef = useTemplateRef('canvasRef');
+
+  /** Workaround for example 
+   * snap on DragPreview must be handle "round" logic, based on parent position
+  */
+  const canvasPadding = computed(() => {
+    const rect = canvasRef.value?.getBoundingClientRect()
+    if(!rect)
+      return { pX: 0, pY: 0 }
+
+    const pX = rect.left % props.stepX * -1
+    const pY = rect.top % props.stepY * -1
+
+    return { pX, pY }
+  })
 </script>
 
 <template>
   <div
+    ref="canvasRef"
     class="canvas"
-    :style="{ '--gx': `${props.stepX}px`, '--gy': `${props.stepY}px` }"
+    :style="{ 
+      '--gx': `${props.stepX}px`, 
+      '--gy': `${props.stepY}px`, 
+      '--px': `${canvasPadding.pX}px`, 
+      '--py': `${canvasPadding.pY}px` 
+    }"
   >
     <slot />
   </div>
@@ -25,6 +49,7 @@
       linear-gradient(rgba(62, 175, 124, 0.15) 1px, transparent 1px),
       linear-gradient(90deg, rgba(62, 175, 124, 0.15) 1px, transparent 1px);
     background-size: var(--gx) var(--gy);
+    background-position: var(--px) var(--py);
     display: flex;
     align-items: center;
     justify-content: center;

docs/.vitepress/components/v2/Examples/SnapGrid/SnapChip.vue

@@ -27,6 +27,7 @@
     cursor: grab;
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
     transition: box-shadow 0.15s;