69 lines
1.5 KiB
Vue
69 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 appends a display div; make it fill the container */
|
|
.rdp-canvas-container :deep(> div) {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.rdp-canvas-container :deep(canvas) {
|
|
display: block;
|
|
}
|
|
</style>
|