diff --git a/apps/viewer/src/components/gm/GmWindow.vue b/apps/viewer/src/components/gm/GmWindow.vue index c14f043..9fa106b 100644 --- a/apps/viewer/src/components/gm/GmWindow.vue +++ b/apps/viewer/src/components/gm/GmWindow.vue @@ -21,19 +21,12 @@ const emit = defineEmits<{ const windowEl = ref(null); const x = ref(props.initialX); const y = ref(props.initialY); -const w = ref(props.initialWidth); -const h = ref(props.initialHeight); const isDragging = ref(false); let dragOffsetX = 0; let dragOffsetY = 0; function onTitleMouseDown(e: MouseEvent) { if ((e.target as HTMLElement).closest("button")) return; - // Snapshot current rendered size so resize isn't lost on drag - if (windowEl.value) { - w.value = windowEl.value.offsetWidth; - h.value = windowEl.value.offsetHeight; - } isDragging.value = true; dragOffsetX = e.clientX - x.value; dragOffsetY = e.clientY - y.value; @@ -53,6 +46,12 @@ function onMouseUp() { onMounted(() => { window.addEventListener("mousemove", onMouseMove); window.addEventListener("mouseup", onMouseUp); + // Set initial size imperatively so Vue's reactive style binding never + // touches width/height — the browser's CSS resize handle owns them. + if (windowEl.value) { + windowEl.value.style.width = `${props.initialWidth}px`; + windowEl.value.style.height = `${props.initialHeight}px`; + } }); onUnmounted(() => { @@ -68,8 +67,6 @@ onUnmounted(() => { :style="{ left: `${x}px`, top: `${y}px`, - width: `${w}px`, - height: `${h}px`, cursor: isDragging ? 'grabbing' : 'default', zIndex: 200, }"