Touch gestures for zooming in & out on specific document areas

Using JavaScript with Hype
2

Well, I believe I solved it myself, or at least it looks like it so far from my testing. I couldn’t get it in the end to work with Interact.JS, probably because I don’t quite get their event handling system, but it works just fine with Hammer.JS (https://hammerjs.github.io).

If anybody is stumbling over similar problems, here is the code I used on OnSceneLoad:

	myElement = hypeDocument.getElementById('Karte');
	
	var hammertime = new Hammer(myElement);
	
	var scale = 1,
		last_scale = 1,
	    posX = 0,
        posY = 	0,
        last_posX = 0,
        last_posY = 0,
        max_pos_x = 0,
        max_pos_y = 0,
        el = myElement;
	
	hammertime.get('pinch').set({ enable: true });
	
	hammertime.on('pan panend pinch pinchend', function(ev) {
		
		if (scale != 1) {
            posX = last_posX + ev.deltaX;
            posY = last_posY + ev.deltaY;
            max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
            
            if (posX > max_pos_x) {
                posX = max_pos_x;
            }
            if (posX < -max_pos_x) {
                posX = -max_pos_x;
            }
            if (posY > max_pos_y) {
                posY = max_pos_y;
            }
            if (posY < -max_pos_y) {
                posY = -max_pos_y;
            }
        }
        
		if(ev.type == "panend"){
            last_posX = posX < max_pos_x ? posX : max_pos_x;
            last_posY = posY < max_pos_y ? posY : max_pos_y;
        }
        
		if (ev.type == "pinch") {
			scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
		}
		
		if (ev.type == "pinchend") {
			last_scale = scale;
		} 
		
		if (scale != 1) {
           	hypeDocument.setElementProperty(myElement, 'top', posY);
			hypeDocument.setElementProperty(myElement, 'left', posX);
			
           	hypeDocument.setElementProperty(myElement, 'scaleX', scale);
			hypeDocument.setElementProperty(myElement, 'scaleY', scale);

        }
	});

It works smoothly in Chrome, and also the Hammer event handling doesn’t get in the way of other touch events (like Tap), which can be managed and reacted to natively from within Hype.

1 Like