/ graph_markers.html
graph_markers.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 7 <title>Graph Markers — Space.js</title> 8 9 <link rel="preconnect" href="https://fonts.gstatic.com"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono"> 11 <link rel="stylesheet" href="assets/css/style.css"> 12 13 <style> 14 *, :after, :before { 15 touch-action: unset; 16 } 17 18 body { 19 position: unset; 20 height: unset; 21 min-height: 100%; 22 padding: 55px 0px; 23 display: flex; 24 justify-content: center; 25 align-content: center; 26 flex-wrap: wrap; 27 gap: 55px 150px; 28 } 29 30 .ui > .info { 31 background-color: var(--bg-color); 32 border-radius: 4px; 33 } 34 </style> 35 36 <script type="module"> 37 import { Graph, RadialGraph, Stage, UI, clamp, mapLinear, ticker } from './src/index.js'; 38 39 class App { 40 static async init() { 41 this.instructionsCounter = 0; 42 43 this.initViews(); 44 45 this.addListeners(); 46 this.onResize(); 47 } 48 49 static initViews() { 50 this.graph = new RadialGraph({ 51 value: Array.from({ length: 10 }, () => Math.random()), 52 precision: 2, 53 lookupPrecision: 200, 54 markers: [ // An array of normalized positions 55 [0.5, 'Marker 1'], 56 [1, 'Drag me'] 57 ] 58 }); 59 document.body.appendChild(this.graph.element); 60 61 this.graph2 = new RadialGraph({ 62 value: Array.from({ length: 10 }, () => Math.random()), 63 precision: 2, 64 lookupPrecision: 200, 65 markers: [ // An array of normalized positions 66 [0.5, 'Not me'], 67 [1, 'Marker 2'] 68 ], 69 // noMarker: true, 70 noMarkerDrag: true 71 }); 72 document.body.appendChild(this.graph2.element); 73 74 this.graph3 = new Graph({ 75 value: Array.from({ length: 10 }, () => Math.random()), 76 precision: 2, 77 lookupPrecision: 200 78 }); 79 // An array of normalized positions 80 this.graph3.setMarkers([ 81 [0.5, 'Marker 1'], 82 [1, 'Drag me'] 83 ]); 84 document.body.appendChild(this.graph3.element); 85 86 this.ui = new UI({ 87 instructions: { 88 content: `${navigator.maxTouchPoints ? 'Tap' : 'Click'} graph to add marker` 89 } 90 }); 91 this.ui.instructions.animateIn(); 92 document.body.appendChild(this.ui.element); 93 } 94 95 static addListeners() { 96 Stage.events.on('marker', this.onMarker); 97 document.addEventListener('dblclick', this.preventZoom); 98 window.addEventListener('resize', this.onResize); 99 window.addEventListener('load', this.onLoad); 100 ticker.add(this.onUpdate); 101 ticker.start(); 102 } 103 104 // Event handlers 105 106 static preventZoom = e => { 107 e.preventDefault(); 108 }; 109 110 static onMarker = e => { 111 console.log('Marker event:', e); 112 113 if (e.type === 'add') { 114 if (this.instructionsCounter === 0) { 115 this.ui.instructions.animateOut(() => { 116 this.ui.instructions.setContent('Drag away marker to remove'); 117 this.ui.instructions.animateIn(); 118 }); 119 120 this.instructionsCounter++; 121 } 122 } else { 123 if (this.instructionsCounter === 1) { 124 this.ui.instructions.animateOut(); 125 this.instructionsCounter++; 126 } 127 } 128 }; 129 130 static onResize = () => { 131 const width = document.documentElement.clientWidth; 132 const height = document.documentElement.clientHeight; 133 134 if (width < height) { 135 this.graph.setSize(250, 250); 136 } else { 137 this.graph.setSize(300, 300); 138 } 139 140 if (width < height) { 141 this.graph2.setSize(250, 250); 142 } else { 143 this.graph2.setSize(300, 300); 144 } 145 146 this.graph3.setSize(width * 0.74, clamp(mapLinear(height, 600, 1000, 40, 80), 40, 80)); 147 }; 148 149 static onUpdate = () => { 150 this.graph.update(); 151 this.graph2.update(); 152 this.graph3.update(); 153 this.ui.update(); 154 }; 155 156 static onLoad = () => { 157 this.graph.animateIn(); 158 this.graph2.animateIn(); 159 this.graph3.animateIn(); 160 this.ui.animateIn(); 161 }; 162 } 163 164 App.init(); 165 </script> 166 </head> 167 <body> 168 </body> 169 </html>