Skip to content

Commit

Permalink
ref #3 : handling touch events
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggerganov
ggerganov committed Jul 7, 2019
1 parent efa047c commit a4ae622
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 9 deletions.
4 changes: 4 additions & 0 deletions examples/headless-with-input/main.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,13 +181,17 @@ void State::handle(ImGuiWS::Event && event) {
{
if (event.clientId == curIdControl) {
lastMouseDown[event.mouse_but] = true;
lastMousePos.x = event.mouse_x;
lastMousePos.y = event.mouse_y;
}
}
break;
case ImGuiWS::Event::MouseUp:
{
if (event.clientId == curIdControl) {
lastMouseDown[event.mouse_but] = false;
lastMousePos.x = event.mouse_x;
lastMousePos.y = event.mouse_y;
}
}
break;
Expand Down
40 changes: 37 additions & 3 deletions src/common.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,9 @@ var imgui_ws = {
var onpointerdown = this.canvas_on_pointerdown.bind(this);
var onpointerup = this.canvas_on_pointerup.bind(this);
var onwheel = this.canvas_on_wheel.bind(this);
var ontouch = this.canvas_on_touch.bind(this);
this.canvas.style.touchAction = 'none'; // Disable browser handling of all panning and zooming gestures.
//this.canvas.style.touchAction = 'none'; // Disable browser handling of all panning and zooming gestures.
//this.canvas.addEventListener('blur', this.canvas_on_blur);
this.canvas.addEventListener('keyup', onkeyup, true);
Expand All @@ -68,6 +69,11 @@ var imgui_ws = {
this.canvas.addEventListener('contextmenu', function(event) { event.preventDefault(); });
this.canvas.addEventListener('wheel', onwheel, false);
this.canvas.addEventListener('touchstart', ontouch);
this.canvas.addEventListener('touchmove', ontouch);
this.canvas.addEventListener('touchend', ontouch);
this.canvas.addEventListener('touchcancel', ontouch);
this.gl = this.canvas.getContext('webgl');
this.vertex_buffer = this.gl.createBuffer();
Expand Down Expand Up @@ -283,6 +289,7 @@ var imgui_ws = {
canvas_on_pointerdown: function(event) {},
canvas_on_pointerup: function(event) {},
canvas_on_wheel: function(event) {},
canvas_on_touch: function(event) {},
set_incppect_handlers: function(incppect) {
this.canvas_on_keyup = function(event) {
Expand Down Expand Up @@ -316,11 +323,11 @@ var imgui_ws = {
this.io.mouse_x = event.offsetX * this.device_pixel_ratio;
this.io.mouse_y = event.offsetY * this.device_pixel_ratio;
incppect.send('1 ' + event.button);
incppect.send('1 ' + event.button + ' ' + this.io.mouse_x + ' ' + this.io.mouse_y);
};
this.canvas_on_pointerup = function(event) {
incppect.send('2 ' + event.button);
incppect.send('2 ' + event.button + ' ' + this.io.mouse_x + ' ' + this.io.mouse_y);
if (this.io.want_capture_mouse) {
event.preventDefault();
Expand Down Expand Up @@ -350,6 +357,33 @@ var imgui_ws = {
event.preventDefault();
}
};
this.canvas_on_touch = function (event) {
if (event.touches.length > 1) {
return;
}
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type) {
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
};
},
}
Expand Down
9 changes: 6 additions & 3 deletions src/imgui-ws.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,27 +138,30 @@ bool ImGuiWS::init(int port, const char * pathHttp) {
int type = -1;
ss >> type;

//printf("Received event %d\n", type);
//printf("Received event %d '%s'\n", type, ss.str().c_str());
switch (type) {
case 0:
{
// mouse move
event.type = Event::MouseMove;
ss >> event.mouse_x >> event.mouse_y;
//printf(" mouse %g %g\n", event.mouse_x, event.mouse_y);
}
break;
case 1:
{
// mouse down
event.type = Event::MouseDown;
ss >> event.mouse_but;
ss >> event.mouse_but >> event.mouse_x >> event.mouse_y;
//printf(" mouse %d down\n", event.mouse_but);
}
break;
case 2:
{
// mouse up
event.type = Event::MouseUp;
ss >> event.mouse_but;
ss >> event.mouse_but >> event.mouse_x >> event.mouse_y;
//printf(" mouse %d up\n", event.mouse_but);
}
break;
case 3:
Expand Down
40 changes: 37 additions & 3 deletions src/imgui-ws.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,9 @@ var imgui_ws = {
var onpointerdown = this.canvas_on_pointerdown.bind(this);
var onpointerup = this.canvas_on_pointerup.bind(this);
var onwheel = this.canvas_on_wheel.bind(this);
var ontouch = this.canvas_on_touch.bind(this);

this.canvas.style.touchAction = 'none'; // Disable browser handling of all panning and zooming gestures.
//this.canvas.style.touchAction = 'none'; // Disable browser handling of all panning and zooming gestures.
//this.canvas.addEventListener('blur', this.canvas_on_blur);

this.canvas.addEventListener('keyup', onkeyup, true);
Expand All @@ -58,6 +59,11 @@ var imgui_ws = {
this.canvas.addEventListener('contextmenu', function(event) { event.preventDefault(); });
this.canvas.addEventListener('wheel', onwheel, false);

this.canvas.addEventListener('touchstart', ontouch);
this.canvas.addEventListener('touchmove', ontouch);
this.canvas.addEventListener('touchend', ontouch);
this.canvas.addEventListener('touchcancel', ontouch);

this.gl = this.canvas.getContext('webgl');

this.vertex_buffer = this.gl.createBuffer();
Expand Down Expand Up @@ -273,6 +279,7 @@ var imgui_ws = {
canvas_on_pointerdown: function(event) {},
canvas_on_pointerup: function(event) {},
canvas_on_wheel: function(event) {},
canvas_on_touch: function(event) {},

set_incppect_handlers: function(incppect) {
this.canvas_on_keyup = function(event) {
Expand Down Expand Up @@ -306,11 +313,11 @@ var imgui_ws = {
this.io.mouse_x = event.offsetX * this.device_pixel_ratio;
this.io.mouse_y = event.offsetY * this.device_pixel_ratio;

incppect.send('1 ' + event.button);
incppect.send('1 ' + event.button + ' ' + this.io.mouse_x + ' ' + this.io.mouse_y);
};

this.canvas_on_pointerup = function(event) {
incppect.send('2 ' + event.button);
incppect.send('2 ' + event.button + ' ' + this.io.mouse_x + ' ' + this.io.mouse_y);

if (this.io.want_capture_mouse) {
event.preventDefault();
Expand Down Expand Up @@ -340,6 +347,33 @@ var imgui_ws = {
event.preventDefault();
}
};

this.canvas_on_touch = function (event) {
if (event.touches.length > 1) {
return;
}

var touches = event.changedTouches,
first = touches[0],
type = "";

switch(event.type) {
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}

// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);

var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);

first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
};
},

}

0 comments on commit a4ae622

Please sign in to comment.