Implement pinch-zoom

[bergie]

dataflow needs to implement its own pinch zoom support. On touch screen devices, the ports are too small to hit on default zoom level, and if we allow browser to zoom, it zooms the rest of the chrome as well when we'd only want to zoom the canvas.

Quick solution:

• Detect pinch zoom gestures on JavaScript level (for example with hammer.js)
• Change the CSS zoom attribute of the .dataflow-graph element accordingly

For smoothness we should include a CSS transition for this as well.

Bonus points for detecting a zoom level that the whole graph fits into, and starting at that level.

[bergie]

CSS rules for quick proof-of-concept:

.dataflow-graph:hover {
  zoom: 1.2;
}

.dataflow-graph {
  transition: all 0.5s ease;
}

[bergie]

@forresto one issue with zooming as implemented in d192b1be911496d352e99b0883ed29dd8a92a928 is that the port plug being moved is outside the .dataflow-graph area, and therefore not affected by zooming.

Two possible fixes:

• Read zoom attribute from Graph.View instance and tune positions accordingly
• Move the port plug into the correct element

[forresto]

Hmm the plug's draggable helper? I think I did that because of relative stacking issues... but in the helper function could try to append it to .dataflow-graph instead of body.

[forresto]

Tried the css scale instead of zoom idea, but SVG ruins everything. Looks like the port offsets are returning wrong.