Skip to content

Commit 1c29cb3

Browse files
janbenderjanbender
committed
- added touch events
1 parent 06eaafd commit 1c29cb3

4 files changed

Lines changed: 240 additions & 2 deletions

File tree

‎examples/region_based_shape_matching.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,6 +576,11 @@ <h3>References</h3>
576576
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
577577
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
578578
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
579+
// register touch event listeners (mobile / tablet)
580+
// passive:false is required so we can call preventDefault() to suppress scrolling
581+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
582+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
583+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
579584
}
580585

581586
// set simulation parameters from GUI and start mainLoop
@@ -787,6 +792,61 @@ <h3>References</h3>
787792
if (this.zoom < 1)
788793
this.zoom = 1;
789794
}
795+
796+
// Convert the first touch point to a plain {clientX, clientY} object
797+
// so it can be passed directly to the existing mouse handlers.
798+
getTouchClient(event)
799+
{
800+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
801+
return { clientX: t.clientX, clientY: t.clientY };
802+
}
803+
804+
touchStart(event)
805+
{
806+
event.preventDefault();
807+
if (event.touches.length === 1)
808+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
809+
else if (event.touches.length === 2)
810+
this.lastPinchDist = this.getPinchDist(event);
811+
}
812+
813+
touchMove(event)
814+
{
815+
event.preventDefault();
816+
if (event.touches.length === 1)
817+
{
818+
this.lastPinchDist = null;
819+
this.mouseMove(this.getTouchClient(event));
820+
}
821+
else if (event.touches.length === 2)
822+
{
823+
// deselect any dragged particle while pinching
824+
this.selectedParticle = -1;
825+
const dist = this.getPinchDist(event);
826+
if (this.lastPinchDist !== null)
827+
{
828+
this.zoom += (dist - this.lastPinchDist) * 0.3;
829+
if (this.zoom < 1) this.zoom = 1;
830+
}
831+
this.lastPinchDist = dist;
832+
}
833+
}
834+
835+
touchEnd(event)
836+
{
837+
event.preventDefault();
838+
if (event.touches.length < 2)
839+
this.lastPinchDist = null;
840+
if (event.touches.length === 0)
841+
this.mouseUp(event);
842+
}
843+
844+
getPinchDist(event)
845+
{
846+
const dx = event.touches[0].clientX - event.touches[1].clientX;
847+
const dy = event.touches[0].clientY - event.touches[1].clientY;
848+
return Math.sqrt(dx*dx + dy*dy);
849+
}
790850
}
791851

792852
gui = new GUI();

‎examples/sdf_box_plot.html‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,11 @@ <h3>Closest point on the surface</h3>
165165
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
166166
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
167167
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
168+
// register touch event listeners (mobile / tablet)
169+
// passive:false is required so we can call preventDefault() to suppress scrolling
170+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
171+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
172+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
168173
}
169174

170175
// update GUI
@@ -347,7 +352,61 @@ <h3>Closest point on the surface</h3>
347352
this.zoom += event.deltaY * -0.05;
348353
if (this.zoom < 1)
349354
this.zoom = 1;
350-
this.requestID = window.requestAnimationFrame(this.mainLoop.bind(this));
355+
}
356+
357+
// Convert the first touch point to a plain {clientX, clientY} object
358+
// so it can be passed directly to the existing mouse handlers.
359+
getTouchClient(event)
360+
{
361+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
362+
return { clientX: t.clientX, clientY: t.clientY };
363+
}
364+
365+
touchStart(event)
366+
{
367+
event.preventDefault();
368+
if (event.touches.length === 1)
369+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
370+
else if (event.touches.length === 2)
371+
this.lastPinchDist = this.getPinchDist(event);
372+
}
373+
374+
touchMove(event)
375+
{
376+
event.preventDefault();
377+
if (event.touches.length === 1)
378+
{
379+
this.lastPinchDist = null;
380+
this.mouseMove(this.getTouchClient(event));
381+
}
382+
else if (event.touches.length === 2)
383+
{
384+
// deselect any dragged particle while pinching
385+
this.selectedParticle = -1;
386+
const dist = this.getPinchDist(event);
387+
if (this.lastPinchDist !== null)
388+
{
389+
this.zoom += (dist - this.lastPinchDist) * 0.3;
390+
if (this.zoom < 1) this.zoom = 1;
391+
}
392+
this.lastPinchDist = dist;
393+
}
394+
}
395+
396+
touchEnd(event)
397+
{
398+
event.preventDefault();
399+
if (event.touches.length < 2)
400+
this.lastPinchDist = null;
401+
if (event.touches.length === 0)
402+
this.mouseUp(event);
403+
}
404+
405+
getPinchDist(event)
406+
{
407+
const dx = event.touches[0].clientX - event.touches[1].clientX;
408+
const dy = event.touches[0].clientY - event.touches[1].clientY;
409+
return Math.sqrt(dx*dx + dy*dy);
351410
}
352411
}
353412

‎examples/sdf_sphere_plot.html‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,11 @@ <h3>Closest point on the surface</h3>
129129
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
130130
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
131131
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
132+
// register touch event listeners (mobile / tablet)
133+
// passive:false is required so we can call preventDefault() to suppress scrolling
134+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
135+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
136+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
132137
}
133138

134139
// update GUI
@@ -307,7 +312,61 @@ <h3>Closest point on the surface</h3>
307312
this.zoom += event.deltaY * -0.05;
308313
if (this.zoom < 1)
309314
this.zoom = 1;
310-
this.requestID = window.requestAnimationFrame(this.mainLoop.bind(this));
315+
}
316+
317+
// Convert the first touch point to a plain {clientX, clientY} object
318+
// so it can be passed directly to the existing mouse handlers.
319+
getTouchClient(event)
320+
{
321+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
322+
return { clientX: t.clientX, clientY: t.clientY };
323+
}
324+
325+
touchStart(event)
326+
{
327+
event.preventDefault();
328+
if (event.touches.length === 1)
329+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
330+
else if (event.touches.length === 2)
331+
this.lastPinchDist = this.getPinchDist(event);
332+
}
333+
334+
touchMove(event)
335+
{
336+
event.preventDefault();
337+
if (event.touches.length === 1)
338+
{
339+
this.lastPinchDist = null;
340+
this.mouseMove(this.getTouchClient(event));
341+
}
342+
else if (event.touches.length === 2)
343+
{
344+
// deselect any dragged particle while pinching
345+
this.selectedParticle = -1;
346+
const dist = this.getPinchDist(event);
347+
if (this.lastPinchDist !== null)
348+
{
349+
this.zoom += (dist - this.lastPinchDist) * 0.3;
350+
if (this.zoom < 1) this.zoom = 1;
351+
}
352+
this.lastPinchDist = dist;
353+
}
354+
}
355+
356+
touchEnd(event)
357+
{
358+
event.preventDefault();
359+
if (event.touches.length < 2)
360+
this.lastPinchDist = null;
361+
if (event.touches.length === 0)
362+
this.mouseUp(event);
363+
}
364+
365+
getPinchDist(event)
366+
{
367+
const dx = event.touches[0].clientX - event.touches[1].clientX;
368+
const dy = event.touches[0].clientY - event.touches[1].clientY;
369+
return Math.sqrt(dx*dx + dy*dy);
311370
}
312371
}
313372

‎examples/shape_matching.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,11 @@ <h3>References</h3>
414414
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
415415
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
416416
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
417+
// register touch event listeners (mobile / tablet)
418+
// passive:false is required so we can call preventDefault() to suppress scrolling
419+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
420+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
421+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
417422
}
418423

419424
// set simulation parameters from GUI and start mainLoop
@@ -655,6 +660,61 @@ <h3>References</h3>
655660
if (this.zoom < 1)
656661
this.zoom = 1;
657662
}
663+
664+
// Convert the first touch point to a plain {clientX, clientY} object
665+
// so it can be passed directly to the existing mouse handlers.
666+
getTouchClient(event)
667+
{
668+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
669+
return { clientX: t.clientX, clientY: t.clientY };
670+
}
671+
672+
touchStart(event)
673+
{
674+
event.preventDefault();
675+
if (event.touches.length === 1)
676+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
677+
else if (event.touches.length === 2)
678+
this.lastPinchDist = this.getPinchDist(event);
679+
}
680+
681+
touchMove(event)
682+
{
683+
event.preventDefault();
684+
if (event.touches.length === 1)
685+
{
686+
this.lastPinchDist = null;
687+
this.mouseMove(this.getTouchClient(event));
688+
}
689+
else if (event.touches.length === 2)
690+
{
691+
// deselect any dragged particle while pinching
692+
this.selectedParticle = -1;
693+
const dist = this.getPinchDist(event);
694+
if (this.lastPinchDist !== null)
695+
{
696+
this.zoom += (dist - this.lastPinchDist) * 0.3;
697+
if (this.zoom < 1) this.zoom = 1;
698+
}
699+
this.lastPinchDist = dist;
700+
}
701+
}
702+
703+
touchEnd(event)
704+
{
705+
event.preventDefault();
706+
if (event.touches.length < 2)
707+
this.lastPinchDist = null;
708+
if (event.touches.length === 0)
709+
this.mouseUp(event);
710+
}
711+
712+
getPinchDist(event)
713+
{
714+
const dx = event.touches[0].clientX - event.touches[1].clientX;
715+
const dy = event.touches[0].clientY - event.touches[1].clientY;
716+
return Math.sqrt(dx*dx + dy*dy);
717+
}
658718
}
659719

660720
gui = new GUI();

0 commit comments

Comments
 (0)