Touch And Mobile Controls
Touch-oriented views use the same graph, renderer, and behavior APIs as desktop
views. A few options tell Helios how much of the touch interaction surface it
should own and how the interface behavior should classify compact layouts.
Custom behaviors are for app-specific logic that needs lifecycle, state,
subscriptions, or coordination with built-in behaviors. They are not required
for small scripts, but they are useful when a feature should attach and detach
cleanly.
suppressBrowserGestures tells Helios that the canvas should own gestures such
as pan and pinch inside the visualization area. The interface behavior options
configure compact-state thresholds, while hover options show how behavior tuning
can remain declarative.
Configure Touch Interaction
Register A Custom Behavior
This custom behavior selects the first few nodes when it attaches. The important
detail is that it composes with the default behavior namespace: custom code uses
context.helios.behavior.selection instead of duplicating selection state.
Register A Custom Behavior
{"importMap": {"helios-web": "../vendor/helios/helios-web.es.js", "helios-network": "../vendor/helios/helios-network.js"}, "examples": [{"id": "examples--helios-web--mobile-custom.md--example-1", "title": "Configure Touch Interaction", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "470px", "headerName": null, "headerCode": "", "bodyName": "helios_web_mobile_touch", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(14);\n\nnetwork.addEdges(Array.from(nodes).flatMap((node, index) => [\n [node, nodes[(index + 1) % nodes.length]],\n [node, nodes[(index + 5) % nodes.length]],\n]));\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n suppressBrowserGestures: true,\n behaviors: {\n interface: { compactBreakpoint: 520, preferredDockSide: 'right' },\n hover: { edgeHover: true },\n },\n});\n\nawait helios.ready;\nhelios.behavior.interface.setViewportWidth(360);\nhelios.frameNetwork({ animate: false });", "headerRefs": [], "bodyRefs": []}, {"id": "examples--helios-web--mobile-custom.md--example-2", "title": "Register A Custom Behavior", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "480px", "headerName": null, "headerCode": "", "bodyName": "helios_web_custom_behavior", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Behavior, Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\nconst nodes = network.addNodes(18);\n\nnetwork.addEdges(Array.from(nodes).flatMap((node, index) => [\n [node, nodes[(index + 1) % nodes.length]],\n [node, nodes[(index + 6) % nodes.length]],\n]));\n\nclass SelectFirstNodesBehavior extends Behavior {\n static id = 'select-first-nodes';\n\n attach(context) {\n super.attach(context);\n context.helios.behavior.selection.selectNodes(\n Array.from(nodes).slice(0, 4),\n { mode: 'replace' },\n );\n return this;\n }\n}\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n});\n\nawait helios.ready;\nhelios.registerBehavior('select-first-nodes', SelectFirstNodesBehavior);\nhelios.useBehavior('select-first-nodes');\nhelios.frameNetwork({ animate: false });", "headerRefs": [], "bodyRefs": []}]}