95271f065a
Remove CSS width/height !important override that broke Guacamole's internal rendering pipeline. Replace with display.scale() auto-fitting using ResizeObserver for responsive container sizing. Scale mouse coordinates back to remote display space to keep input accurate. Clean up diagnostic instruction logging. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRdp } from '~/composables/useRdp'
|
|
|
|
const props = defineProps<{
|
|
hostId: number
|
|
hostName: string
|
|
sessionId: string
|
|
color?: string | null
|
|
}>()
|
|
|
|
const container = ref<HTMLDivElement | null>(null)
|
|
const { connectRdp } = useRdp()
|
|
|
|
let rdpSession: ReturnType<ReturnType<typeof useRdp>['connectRdp']> | null = null
|
|
|
|
// Expose to parent (RdpToolbar uses these)
|
|
const sendClipboard = (text: string) => rdpSession?.sendClipboardText(text)
|
|
const disconnect = () => rdpSession?.disconnect()
|
|
|
|
defineExpose({ sendClipboard, disconnect })
|
|
|
|
onMounted(() => {
|
|
if (!container.value) return
|
|
|
|
rdpSession = connectRdp(
|
|
container.value,
|
|
props.hostId,
|
|
props.hostName,
|
|
props.color ?? null,
|
|
props.sessionId,
|
|
{
|
|
width: container.value.clientWidth,
|
|
height: container.value.clientHeight,
|
|
},
|
|
)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
rdpSession?.disconnect()
|
|
rdpSession = null
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Full-size container for the Guacamole display canvas.
|
|
The Guacamole client appends its own <canvas> element here. -->
|
|
<div
|
|
ref="container"
|
|
class="rdp-canvas-container"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rdp-canvas-container {
|
|
@apply absolute inset-0 bg-gray-950 overflow-hidden cursor-default;
|
|
}
|
|
|
|
/* Guacamole manages its own display element sizing via display.scale().
|
|
Do NOT override width/height — it breaks the internal rendering pipeline. */
|
|
.rdp-canvas-container :deep(canvas) {
|
|
display: block;
|
|
}
|
|
</style>
|