From dc6ce0dc0fe599e0dd613d7d27915379553e9a13 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Wed, 14 May 2025 19:47:01 +0100
Subject: [PATCH] fix: allow dragging off-bounds

---
 .../src/components/skin/SkinPreviewRenderer.vue  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/skin/SkinPreviewRenderer.vue b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
index 0bb7ab5d7..804a37d16 100644
--- a/packages/ui/src/components/skin/SkinPreviewRenderer.vue
+++ b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
@@ -10,7 +10,7 @@
     <TresCanvas
       shadows
       alpha
-      :antialias="false"
+      :antialias="antialias"
       @pointerdown="onPointerDown"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
@@ -69,11 +69,14 @@ import { useGLTF } from '@tresjs/cientos'
 import { useTexture, TresCanvas } from '@tresjs/core'
 import {ref, computed, watch} from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   textureSrc: string
   modelSrc: string
   nametag?: string
-}>()
+  antialias?: boolean
+}>(), {
+  antialias: false,
+})
 
 const { scene } = await useGLTF(props.modelSrc)
 
@@ -132,6 +135,8 @@ const isDragging = ref(false)
 const previousX = ref(0)
 
 const onPointerDown = (event: PointerEvent) => {
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+
   isDragging.value = true
   previousX.value = event.clientX
 }
@@ -143,8 +148,9 @@ const onPointerMove = (event: PointerEvent) => {
   previousX.value = event.clientX
 }
 
-const onPointerUp = () => {
-  isDragging.value = false
+const onPointerUp = (event: PointerEvent) => {
+  isDragging.value = false;
+  (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
 }
 
 const radialTexture = createRadialTexture(512)