Support touch based interaction in Sigma Graph component

[fkraeutli]

Currently Sigma Graph component only reacts to clicks. Expand to support touch events as well.

[PietroLiuzzo]

Dear Florian, do you think adding the following to the register which you pointed out via email

would be enough?

touchup: () => {
                if (draggedNode) {
                    setDraggedNode(null);
                    sigma.getGraph().removeNodeAttribute(draggedNode, "highlighted");
                } 
                if (activeNode) {
                    handleNodeClicked(activeNode);
                }
            },
            touchdown: () => {
                // Stop the layout
                stop();
                // Disable the autoscale at the first down interaction
                if (!sigma.getCustomBBox()) {
                    sigma.setCustomBBox(sigma.getBBox()) 
                }
                if (activeNode) {
                    setDraggedNode(activeNode);
                }
            },
            touchmove: (e) => {
                if (draggedNode) {
                    // Get new position of node
                    const pos = sigma.viewportToGraph(e);
                    sigma.getGraph().setNodeAttribute(draggedNode, "x", pos.x);
                    sigma.getGraph().setNodeAttribute(draggedNode, "y", pos.y);
                    sigma.refresh();
                    // Prevent sigma to move camera:
                    e.preventSigmaDefault();
                }
            }

I assumed that it would react to a touchstart in the same way as to mousedown, touchend the same as mouseup, and touchmove the same as mousemove

[fkraeutli]

Hi Pietro, The events come from React Sigma. You can find the documentation here: https://sim51.github.io/react-sigma/docs/example/events/ (appears to be touchup, touchdown and touchmove). However I'm not sure how dragging would behave on touch devices. But maybe implementing touchup is enough.