Add IME input support.

This commit is contained in:
bruvzg 2024-05-06 11:57:17 +03:00 committed by Relintai
parent dad761a628
commit 8cec3e8e0b
4 changed files with 316 additions and 16 deletions

View File

@ -28,6 +28,119 @@
/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
/*************************************************************************/
/*
* IME API helper.
*/
const PandemoniumIME = {
$PandemoniumIME__deps: ['$PandemoniumRuntime', '$PandemoniumEventListeners'],
$PandemoniumIME__postset: 'PandemoniumOS.atexit(function(resolve, reject) { PandemoniumIME.clear(); resolve(); });',
$PandemoniumIME: {
ime: null,
active: false,
getModifiers: function (evt) {
return (evt.shiftKey + 0) + ((evt.altKey + 0) << 1) + ((evt.ctrlKey + 0) << 2) + ((evt.metaKey + 0) << 3);
},
ime_active: function (active) {
function focus_timer() {
PandemoniumIME.active = true;
PandemoniumIME.ime.focus();
}
if (PandemoniumIME.ime) {
if (active) {
PandemoniumIME.ime.style.display = 'block';
setInterval(focus_timer, 100);
} else {
PandemoniumIME.ime.style.display = 'none';
PandemoniumConfig.canvas.focus();
PandemoniumIME.active = false;
}
}
},
ime_position: function (x, y) {
if (PandemoniumIME.ime) {
const canvas = PandemoniumConfig.canvas;
const rect = canvas.getBoundingClientRect();
const rw = canvas.width / rect.width;
const rh = canvas.height / rect.height;
const clx = (x / rw) + rect.x;
const cly = (y / rh) + rect.y;
PandemoniumIME.ime.style.left = `${clx}px`;
PandemoniumIME.ime.style.top = `${cly}px`;
}
},
init: function (ime_cb, key_cb, code, key) {
function key_event_cb(pressed, evt) {
const modifiers = PandemoniumIME.getModifiers(evt);
PandemoniumRuntime.stringToHeap(evt.code, code, 32);
PandemoniumRuntime.stringToHeap(evt.key, key, 32);
key_cb(pressed, evt.repeat, modifiers);
evt.preventDefault();
}
function ime_event_cb(event) {
if (PandemoniumIME.ime) {
if (event.type === 'compositionstart') {
ime_cb(0, null);
PandemoniumIME.ime.innerHTML = '';
} else if (event.type === 'compositionupdate') {
const ptr = PandemoniumRuntime.allocString(event.data);
ime_cb(1, ptr);
PandemoniumRuntime.free(ptr);
} else if (event.type === 'compositionend') {
const ptr = PandemoniumRuntime.allocString(event.data);
ime_cb(2, ptr);
PandemoniumRuntime.free(ptr);
PandemoniumIME.ime.innerHTML = '';
}
}
}
const ime = document.createElement('div');
ime.className = 'ime';
ime.style.background = 'none';
ime.style.opacity = 0.0;
ime.style.position = 'fixed';
ime.style.textAlign = 'left';
ime.style.fontSize = '1px';
ime.style.left = '0px';
ime.style.top = '0px';
ime.style.width = '100%';
ime.style.height = '40px';
ime.style.display = 'none';
ime.contentEditable = 'true';
PandemoniumEventListeners.add(ime, 'compositionstart', ime_event_cb, false);
PandemoniumEventListeners.add(ime, 'compositionupdate', ime_event_cb, false);
PandemoniumEventListeners.add(ime, 'compositionend', ime_event_cb, false);
PandemoniumEventListeners.add(ime, 'keydown', key_event_cb.bind(null, 1), false);
PandemoniumEventListeners.add(ime, 'keyup', key_event_cb.bind(null, 0), false);
ime.onblur = function () {
this.style.display = 'none';
PandemoniumConfig.canvas.focus();
PandemoniumIME.active = false;
};
PandemoniumConfig.canvas.parentElement.appendChild(ime);
PandemoniumIME.ime = ime;
},
clear: function () {
if (PandemoniumIME.ime) {
PandemoniumIME.ime.remove();
PandemoniumIME.ime = null;
}
},
},
};
mergeInto(LibraryManager.library, PandemoniumIME);
/*
* Gamepad API helper.
*/
@ -339,7 +452,7 @@ mergeInto(LibraryManager.library, PandemoniumInputDragDrop);
* Pandemonium exposed input functions.
*/
const PandemoniumInput = {
$PandemoniumInput__deps: ['$PandemoniumRuntime', '$PandemoniumConfig', '$PandemoniumEventListeners', '$PandemoniumInputGamepads', '$PandemoniumInputDragDrop'],
$PandemoniumInput__deps: ['$PandemoniumRuntime', '$PandemoniumConfig', '$PandemoniumEventListeners', '$PandemoniumInputGamepads', '$PandemoniumInputDragDrop', '$PandemoniumIME'],
$PandemoniumInput: {
getModifiers: function(evt) {
return (evt.shiftKey + 0) + ((evt.altKey + 0) << 1) + ((evt.ctrlKey + 0) << 2) + ((evt.metaKey + 0) << 3);
@ -462,6 +575,35 @@ const PandemoniumInput = {
PandemoniumEventListeners.add(PandemoniumConfig.canvas, 'keyup', key_cb.bind(null, 0), false);
},
/*
* IME API
*/
pandemonium_js_set_ime_active__proxy: 'sync',
pandemonium_js_set_ime_active__sig: 'vi',
pandemonium_js_set_ime_active: function (p_active) {
PandemoniumIME.ime_active(p_active);
},
pandemonium_js_set_ime_position__proxy: 'sync',
pandemonium_js_set_ime_position__sig: 'vii',
pandemonium_js_set_ime_position: function (p_x, p_y) {
PandemoniumIME.ime_position(p_x, p_y);
},
pandemonium_js_set_ime_cb__proxy: 'sync',
pandemonium_js_set_ime_cb__sig: 'viiii',
pandemonium_js_set_ime_cb: function (p_ime_cb, p_key_cb, code, key) {
const ime_cb = PandemoniumRuntime.get_func(p_ime_cb);
const key_cb = PandemoniumRuntime.get_func(p_key_cb);
PandemoniumIME.init(ime_cb, key_cb, code, key);
},
pandemonium_js_is_ime_focused__proxy: 'sync',
pandemonium_js_is_ime_focused__sig: 'i',
pandemonium_js_is_ime_focused: function () {
return PandemoniumIME.active;
},
/*
* Gamepad API
*/
@ -544,7 +686,7 @@ const PandemoniumInput = {
pandemonium_js_input_vibrate_handheld__sig: 'vi',
pandemonium_js_input_vibrate_handheld: function(p_duration_ms) {
if (typeof navigator.vibrate !== 'function') {
GodotRuntime.print('This browser does not support vibration.');
PandemoniumRuntime.print('This browser does not support vibration.');
} else {
navigator.vibrate(p_duration_ms);
}
@ -552,4 +694,4 @@ const PandemoniumInput = {
};
autoAddDeps(PandemoniumInput, '$PandemoniumInput');
mergeInto(LibraryManager.library, PandemoniumInput);
mergeInto(LibraryManager.library, PandemoniumInput);

View File

@ -86,6 +86,9 @@ void OS_JavaScript::send_notification_callback(int p_notification) {
if (p_notification == MainLoop::NOTIFICATION_WM_MOUSE_ENTER || p_notification == MainLoop::NOTIFICATION_WM_MOUSE_EXIT) {
os->cursor_inside_canvas = p_notification == MainLoop::NOTIFICATION_WM_MOUSE_ENTER;
}
if (pandemonium_js_is_ime_focused() && (p_notification == MainLoop::NOTIFICATION_WM_FOCUS_IN || p_notification == MainLoop::NOTIFICATION_WM_FOCUS_OUT)) {
return;
}
MainLoop *loop = os->get_main_loop();
if (loop) {
loop->notification(p_notification);
@ -192,22 +195,39 @@ static void dom2pandemonium_mod(Ref<InputEventWithModifiers> ev, int p_mod) {
void OS_JavaScript::key_callback(int p_pressed, int p_repeat, int p_modifiers) {
OS_JavaScript *os = get_singleton();
JSKeyEvent &key_event = os->key_event;
const String code = String::utf8(key_event.code);
const String key = String::utf8(key_event.key);
// Resume audio context after input in case autoplay was denied.
os->resume_audio();
Ref<InputEventKey> ev;
ev.instance();
ev->set_echo(p_repeat);
ev->set_scancode(dom_code2pandemonium_scancode(key_event.code, key_event.key, false));
ev->set_physical_scancode(dom_code2pandemonium_scancode(key_event.code, key_event.key, true));
ev->set_pressed(p_pressed);
dom2pandemonium_mod(ev, p_modifiers);
String unicode = String::utf8(key_event.key);
if (unicode.length() == 1) {
ev->set_unicode(unicode[0]);
if (os->ime_started) {
return;
}
os->input->parse_input_event(ev);
wchar_t c = 0x00;
String unicode = key;
if (unicode.length() == 1) {
c = unicode[0];
}
uint32_t keycode = dom_code2pandemonium_scancode(code.utf8().get_data(), key.utf8().get_data(), false);
uint32_t scancode = dom_code2pandemonium_scancode(code.utf8().get_data(), key.utf8().get_data(), true);
OS_JavaScript::KeyEvent ke;
ke.pressed = p_pressed;
ke.echo = p_repeat;
ke.raw = true;
ke.keycode = keycode;
ke.physical_keycode = scancode;
ke.unicode = c;
ke.mod = p_modifiers;
if (os->key_event_pos >= os->key_event_buffer.size()) {
os->key_event_buffer.resize(1 + os->key_event_pos);
}
os->key_event_buffer.write[os->key_event_pos++] = ke;
// Make sure to flush all events so we can call restricted APIs inside the event.
os->input->flush_buffered_events();
@ -487,7 +507,7 @@ OS::MouseMode OS_JavaScript::get_mouse_mode() const {
int OS_JavaScript::mouse_wheel_callback(double p_delta_x, double p_delta_y) {
OS_JavaScript *os = get_singleton();
if (!pandemonium_js_display_canvas_is_focused()) {
if (!pandemonium_js_display_canvas_is_focused() && !pandemonium_js_is_ime_focused()) {
if (os->cursor_inside_canvas) {
pandemonium_js_display_canvas_focus();
} else {
@ -578,6 +598,90 @@ void OS_JavaScript::touch_callback(int p_type, int p_count) {
}
}
// IME.
void OS_JavaScript::ime_callback(int p_type, const char *p_text) {
OS_JavaScript *os = get_singleton();
// Resume audio context after input in case autoplay was denied.
os->resume_audio();
switch (p_type) {
case 0: {
// IME start.
os->ime_text = String();
os->ime_selection = Vector2i();
for (int i = os->key_event_pos - 1; i >= 0; i--) {
// Delete last raw keydown event from query.
if (os->key_event_buffer[i].pressed && os->key_event_buffer[i].raw) {
os->key_event_buffer.remove(i);
os->key_event_pos--;
break;
}
}
os->get_main_loop()->notification(MainLoop::NOTIFICATION_OS_IME_UPDATE);
os->ime_started = true;
} break;
case 1: {
// IME update.
if (os->ime_active && os->ime_started) {
os->ime_text = String::utf8(p_text);
os->ime_selection = Vector2i(os->ime_text.length(), os->ime_text.length());
os->get_main_loop()->notification(MainLoop::NOTIFICATION_OS_IME_UPDATE);
}
} break;
case 2: {
// IME commit.
if (os->ime_active && os->ime_started) {
os->ime_started = false;
os->ime_text = String();
os->ime_selection = Vector2i();
os->get_main_loop()->notification(MainLoop::NOTIFICATION_OS_IME_UPDATE);
String text = String::utf8(p_text);
for (int i = 0; i < text.length(); i++) {
OS_JavaScript::KeyEvent ke;
ke.pressed = true;
ke.echo = false;
ke.raw = false;
ke.keycode = 0;
ke.physical_keycode = 0;
ke.unicode = text[i];
ke.mod = 0;
if (os->key_event_pos >= os->key_event_buffer.size()) {
os->key_event_buffer.resize(1 + os->key_event_pos);
}
os->key_event_buffer.write[os->key_event_pos++] = ke;
}
}
} break;
default:
break;
}
os->process_keys();
os->input->flush_buffered_events();
}
void OS_JavaScript::set_ime_active(const bool p_active) {
ime_active = p_active;
pandemonium_js_set_ime_active(p_active);
}
void OS_JavaScript::set_ime_position(const Point2 &p_pos) {
pandemonium_js_set_ime_position(p_pos.x, p_pos.y);
}
Point2 OS_JavaScript::get_ime_selection() const {
return ime_selection;
}
String OS_JavaScript::get_ime_text() const {
return ime_text;
}
// Gamepad
void OS_JavaScript::gamepad_callback(int p_index, int p_connected, const char *p_id, const char *p_guid) {
InputDefault *input = get_singleton()->input;
@ -615,6 +719,26 @@ void OS_JavaScript::process_joypads() {
}
}
void OS_JavaScript::process_keys() {
for (int i = 0; i < key_event_pos; i++) {
const OS_JavaScript::KeyEvent &ke = key_event_buffer[i];
Ref<InputEventKey> ev;
ev.instance();
ev->set_pressed(ke.pressed);
ev->set_echo(ke.echo);
ev->set_scancode(ke.keycode);
ev->set_physical_scancode(ke.physical_keycode);
ev->set_unicode(ke.unicode);
if (ke.raw) {
dom2pandemonium_mod(ev, ke.mod);
}
input->parse_input_event(ev);
}
key_event_pos = 0;
}
bool OS_JavaScript::is_joy_known(int p_device) {
return input->is_joy_mapped(p_device);
}
@ -749,6 +873,7 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
pandemonium_js_input_gamepad_cb(&OS_JavaScript::gamepad_callback);
pandemonium_js_input_paste_cb(&OS_JavaScript::update_clipboard_callback);
pandemonium_js_input_drop_files_cb(&OS_JavaScript::drop_files_callback);
pandemonium_js_set_ime_cb(&OS_JavaScript::ime_callback, &OS_JavaScript::key_callback, key_event.code, key_event.key);
// JS Display interface (js/libs/library_pandemonium_display.js)
pandemonium_js_display_fullscreen_cb(&OS_JavaScript::fullscreen_change_callback);
@ -830,6 +955,7 @@ bool OS_JavaScript::main_loop_iterate() {
pandemonium_js_os_fs_sync(&OS_JavaScript::fs_sync_callback);
}
process_keys();
input->flush_buffered_events();
if (pandemonium_js_input_gamepad_sample() == OK) {

View File

@ -55,6 +55,24 @@ private:
};
JSKeyEvent key_event;
bool ime_active = false;
bool ime_started = false;
String ime_text;
Vector2 ime_selection;
struct KeyEvent {
bool pressed = false;
bool echo = false;
bool raw = false;
uint32_t keycode = 0;
uint32_t physical_keycode = 0;
uint32_t unicode = 0;
int mod = 0;
};
Vector<KeyEvent> key_event_buffer;
int key_event_pos = 0;
VideoMode video_mode;
bool transparency_enabled;
@ -91,6 +109,7 @@ private:
static void gamepad_callback(int p_index, int p_connected, const char *p_id, const char *p_guid);
static void input_text_callback(const char *p_text, int p_cursor);
void process_joypads();
void process_keys();
static void file_access_close_callback(const String &p_file, int p_flags);
@ -101,6 +120,7 @@ private:
static void fs_sync_callback();
static void update_clipboard_callback(const char *p_text);
static void update_pwa_state_callback();
static void ime_callback(int p_type, const char *p_text);
protected:
void resume_audio();
@ -147,6 +167,12 @@ public:
virtual float get_screen_scale(int p_screen = -1) const;
virtual float get_screen_max_scale() const;
virtual void set_ime_active(const bool p_active);
virtual void set_ime_position(const Point2 &p_pos);
virtual Point2 get_ime_selection() const;
virtual String get_ime_text() const;
virtual Point2 get_mouse_position() const;
virtual int get_mouse_button_state() const;
virtual void set_cursor_shape(CursorShape p_shape);

View File

@ -61,6 +61,12 @@ extern void pandemonium_js_input_touch_cb(void (*p_callback)(int p_type, int p_c
extern void pandemonium_js_input_key_cb(void (*p_callback)(int p_type, int p_repeat, int p_modifiers), char r_code[32], char r_key[32]);
extern void pandemonium_js_input_vibrate_handheld(int p_duration_ms);
// IME
extern void pandemonium_js_set_ime_active(int p_active);
extern void pandemonium_js_set_ime_position(int p_x, int p_y);
extern void pandemonium_js_set_ime_cb(void (*p_input)(int p_type, const char *p_text), void (*p_callback)(int p_type, int p_repeat, int p_modifiers), char r_code[32], char r_key[32]);
extern int pandemonium_js_is_ime_focused();
// Input gamepad
extern void pandemonium_js_input_gamepad_cb(void (*p_on_change)(int p_index, int p_connected, const char *p_id, const char *p_guid));
extern int pandemonium_js_input_gamepad_sample();