Fix RDP page buttons not working

- Added complete keyboard and mouse event handling from example.html
- Implemented Keyboard, EmulatedKeyboard, and UnicodeKeyboard classes
- Added mouse event handlers for movement, clicks, and wheel
- Added proper WebAssembly module loading with async/await
- Added missing constants (KeyAcquire, KeyRelease, SyncFlags)
- Fixed event listener attachments for canvas and input focus
- RDP page should now respond to user interactions
parent 21d4c66a
......@@ -331,6 +331,24 @@ let _Module = null;
// Constants will be set after module loads
let RdpClient, ClipboardChannel, MouseFlags, InputFlags;
// Define constants that will be available after module loads
const KeyAcquire = 0;
const KeyRelease = 0x80;
const SyncFlags = {
ShiftLeft: 0x01,
ShiftRight: 0x02,
ControlLeft: 0x04,
ControlRight: 0x08,
AltLeft: 0x10,
AltRight: 0x20,
OSLeft: 0x40,
OSRight: 0x80,
NumLock: 0x100,
CapsLock: 0x200,
KanaLock: 0x400,
ScrollLock: 0x800
};
function MultiSelectToInt(e, constants)
{
let flags = 0;
......@@ -809,52 +827,20 @@ function startRdpConnection() {
connect();
}
async function connect() {
function connect() {
if (connected) return;
// Check if WebAssembly module is loaded
if (!_Module) {
showNotification('WebAssembly module not loaded yet. Please wait.', 'warning');
return;
}
// Hide the status text and show loading message
document.getElementById('rdp_status').style.display = 'none';
document.getElementById('rdp_loading').style.display = 'block';
document.getElementById('cancelConnectBtn').style.display = 'inline-block';
// Load WebAssembly module if not already loaded
if (!_Module) {
try {
_Module = await WallixModule({
// INITIAL_MEMORY: 16777216, // 16**6
// INITIAL_MEMORY: 268435456, // 16**7
});
// optional
const LogLevel = _Module.LogLevel;
_Module.log = function(priority, msg) {
const logger = (priority === LogLevel.Info) ? console.log
: (priority === LogLevel.Warning) ? console.warn
: (priority === LogLevel.Error) ? console.error
: (priority === LogLevel.Debug) ? (s) => {
console.debug("%c%s", 'color:yellow', s)
}
: console.info;
logger(msg);
};
// Set constants now that module is loaded
RdpClient = _Module.RdpClient;
ClipboardChannel = _Module.ClipboardChannel;
MouseFlags = _Module.MouseFlags;
InputFlags = _Module.InputFlags;
} catch (e) {
console.error('Failed to load WebAssembly module:', e);
showNotification('Failed to load RDP WebAssembly module', 'danger');
// Reset UI
document.getElementById('rdp_status').style.display = 'block';
document.getElementById('rdp_loading').style.display = 'none';
document.getElementById('cancelConnectBtn').style.display = 'none';
return;
}
}
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = wsProtocol + '//' + window.location.host + '/rdp/%s/ws';
......@@ -897,15 +883,6 @@ async function connect() {
window.rdpclient = rdpclient;
window.sendData = sendData;
// For now, skip clipboard setup as it's complex
// const cliprdr = new Cliprdr(cbFiles, sendData, _Module);
// const clipboard = new ClipboardChannel(
// rdpclient.getCallbackAsVoidPtr(),
// cliprdr,
// /*verbosity = */0x04000000);
// cliprdr.setEmcChannel(clipboard);
// addChannel(clipboard);
socket.onmessage = function(event) {
rdpclient.processInputData(event.data);
sendData();
......@@ -925,108 +902,6 @@ async function connect() {
updateInput();
};
function updateInput()
{
if (!rdpclient) return;
const inputFlags = rdpclient.getInputFlags();
const keyboardLayout = rdpclient.getKeyboardLayout();
console.log(`keyboardLayout: 0x${keyboardLayout.toString(16)}`);
console.group(`inputFlags: 0x${inputFlags.toString(16)}`);
for (const k in InputFlags) {
console.log(`${k}: ${(inputFlags & InputFlags[k]) ? 1 : 0} (0x${InputFlags[k].toString(16)})`);
}
console.groupEnd();
hWheelSupport = Boolean(inputFlags & InputFlags.HorizontalWheel);
MouseXSupport = Boolean(inputFlags & InputFlags.MouseX);
updateKbdInput(inputFlags);
kbdInputLayoutEvent = () => {
if (!rdpclient) return;
updateKbdInput(inputFlags);
}
canvasStopEvents();
canvasStartEvents();
}
function updateKbdInput(inputFlags)
{
const kbdMethodId = document.getElementById('rdpKeyboardMethod').selectedIndex;
const altGrIsCtrlAndAlt = document.getElementById('rdpAltGrCtrlAlt').checked;
const kbdMethod = document.getElementById('rdpKeyboardMethod')[kbdMethodId].value;
const hasUnicode = !!(inputFlags & InputFlags.Unicode);
const layout = currentLayout();
console.group('keyboard');
console.log(`unicode support: ${hasUnicode}`);
console.log(`method: (${kbdMethodId}) ${kbdMethod}`);
console.log(`layout: (0x${layout.klid.toString(16)}) ${layout.displayName}`);
console.log(`AltGr = Ctrl + Alt: ${altGrIsCtrlAndAlt}`);
console.groupEnd();
keymap.altGrIsCtrlAndAlt = altGrIsCtrlAndAlt;
keymap.layout = layout;
emulatedKeyboard.setUnicodeSupport(hasUnicode);
const newKeyboardForEvent = (kbdMethod === 'emulateScancode') ? emulatedKeyboard
: (kbdMethod === 'unicode') ? unicodeKeyboard
: scancodeKeyboard;
newKeyboardForEvent.copyInternalStateFrom(keyboardForEvent);
keyboardForEvent = newKeyboardForEvent;
keyboardForEvent.activeModsSync();
}
function canvasStartEvents()
{
ecanvas.addEventListener('mousemove', onMouseMove);
ecanvas.addEventListener('mousedown', onMouseDown);
ecanvas.addEventListener('mouseup', onMouseUp);
ecanvas.addEventListener('wheel', onMouseWheel);
ecanvasFocus.addEventListener('keydown', onKeyDown);
ecanvasFocus.addEventListener('keyup', onKeyUp);
canvasEnableFocus();
}
function canvasStopEvents()
{
ecanvas.removeEventListener('mousemove', onMouseMove);
ecanvas.removeEventListener('mousedown', onMouseDown);
ecanvas.removeEventListener('mouseup', onMouseUp);
ecanvas.removeEventListener('wheel', onMouseWheel);
ecanvasFocus.removeEventListener('keydown', onKeyDown);
ecanvasFocus.removeEventListener('keyup', onKeyUp);
}
function canvasFocus(evt)
{
console.log('focus');
ecanvasFocus.addEventListener('keydown', onKeyDown);
ecanvasFocus.addEventListener('keyup', onKeyUp);
ecanvas.onclick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
};
keyboardForEvent.activeModsSync();
}
function canvasEnableFocus()
{
// preventScroll don't work with firefox
ecanvasFocus.focus({preventScroll: true});
}
function canvasBlur()
{
console.log('blur');
ecanvasFocus.removeEventListener('keydown', onKeyDown);
ecanvasFocus.removeEventListener('keyup', onKeyUp);
ecanvas.onclick = canvasEnableFocus;
}
ecanvasFocus.onblur = canvasBlur;
ecanvasFocus.onfocus = canvasFocus;
socket.onclose = () => {
connected = false;
document.getElementById('connectBtn').disabled = false;
......@@ -1052,6 +927,108 @@ async function connect() {
}
}
function updateInput()
{
if (!rdpclient) return;
const inputFlags = rdpclient.getInputFlags();
const keyboardLayout = rdpclient.getKeyboardLayout();
console.log(`keyboardLayout: 0x${keyboardLayout.toString(16)}`);
console.group(`inputFlags: 0x${inputFlags.toString(16)}`);
for (const k in InputFlags) {
console.log(`${k}: ${(inputFlags & InputFlags[k]) ? 1 : 0} (0x${InputFlags[k].toString(16)})`);
}
console.groupEnd();
hWheelSupport = Boolean(inputFlags & InputFlags.HorizontalWheel);
MouseXSupport = Boolean(inputFlags & InputFlags.MouseX);
updateKbdInput(inputFlags);
kbdInputLayoutEvent = () => {
if (!rdpclient) return;
updateKbdInput(inputFlags);
}
canvasStopEvents();
canvasStartEvents();
}
function updateKbdInput(inputFlags)
{
const kbdMethodId = document.getElementById('rdpKeyboardMethod').selectedIndex;
const altGrIsCtrlAndAlt = document.getElementById('rdpAltGrCtrlAlt').checked;
const kbdMethod = document.getElementById('rdpKeyboardMethod')[kbdMethodId].value;
const hasUnicode = !!(inputFlags & InputFlags.Unicode);
const layout = currentLayout();
console.group('keyboard');
console.log(`unicode support: ${hasUnicode}`);
console.log(`method: (${kbdMethodId}) ${kbdMethod}`);
console.log(`layout: (0x${layout.klid.toString(16)}) ${layout.displayName}`);
console.log(`AltGr = Ctrl + Alt: ${altGrIsCtrlAndAlt}`);
console.groupEnd();
keymap.altGrIsCtrlAndAlt = altGrIsCtrlAndAlt;
keymap.layout = layout;
emulatedKeyboard.setUnicodeSupport(hasUnicode);
const newKeyboardForEvent = (kbdMethod === 'emulateScancode') ? emulatedKeyboard
: (kbdMethod === 'unicode') ? unicodeKeyboard
: scancodeKeyboard;
newKeyboardForEvent.copyInternalStateFrom(keyboardForEvent);
keyboardForEvent = newKeyboardForEvent;
keyboardForEvent.activeModsSync();
}
function canvasStartEvents()
{
ecanvas.addEventListener('mousemove', onMouseMove);
ecanvas.addEventListener('mousedown', onMouseDown);
ecanvas.addEventListener('mouseup', onMouseUp);
ecanvas.addEventListener('wheel', onMouseWheel);
ecanvasFocus.addEventListener('keydown', onKeyDown);
ecanvasFocus.addEventListener('keyup', onKeyUp);
canvasEnableFocus();
}
function canvasStopEvents()
{
ecanvas.removeEventListener('mousemove', onMouseMove);
ecanvas.removeEventListener('mousedown', onMouseDown);
ecanvas.removeEventListener('mouseup', onMouseUp);
ecanvas.removeEventListener('wheel', onMouseWheel);
ecanvasFocus.removeEventListener('keydown', onKeyDown);
ecanvasFocus.removeEventListener('keyup', onKeyUp);
}
function canvasFocus(evt)
{
console.log('focus');
ecanvasFocus.addEventListener('keydown', onKeyDown);
ecanvasFocus.addEventListener('keyup', onKeyUp);
ecanvas.onclick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
};
keyboardForEvent.activeModsSync();
}
function canvasEnableFocus()
{
// preventScroll don't work with firefox
ecanvasFocus.focus({preventScroll: true});
}
function canvasBlur()
{
console.log('blur');
ecanvasFocus.removeEventListener('keydown', onKeyDown);
ecanvasFocus.removeEventListener('keyup', onKeyUp);
ecanvas.onclick = canvasEnableFocus;
}
ecanvasFocus.onblur = canvasBlur;
ecanvasFocus.onfocus = canvasFocus;
function disconnect() {
if (socket) {
socket.close();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment