<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sigma example : Node drag'n'drop, with mouse graph creation</title> </head> <body> <style> html, body { font-family: sans-serif; background: #f9f9f9; } main { margin: auto; max-width: 800px; } #sigma-container { height: 600px; background: white; } </style> <main> <p> <strong> To be able to test the integration of sigma and its mouse interaction capabilities in a scrollable webpage, we added some random texts around the container. </strong> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a justo vel velit efficitur ullamcorper non ut augue. Nunc ultrices massa nulla, non rutrum justo accumsan eget. Aenean volutpat pharetra dolor, in mollis felis consectetur faucibus. Vestibulum varius ligula et tempor varius. Suspendisse et neque vitae est porttitor malesuada sit amet consectetur quam. Nam vestibulum vestibulum ante sit amet bibendum. Integer vel porta massa, ac suscipit velit. In auctor ex eu tristique dignissim. Praesent vitae faucibus eros, vel ultricies lectus. Integer at turpis ut ex ultrices tristique. Mauris venenatis imperdiet dignissim. Quisque eleifend dui ac neque consectetur, in sollicitudin elit consequat. Sed suscipit mauris nec leo tristique, id lacinia purus aliquam. </p> <p> Duis nisl metus, pellentesque nec egestas nec, finibus eu erat. Morbi mollis, dui in rutrum blandit, tellus mauris vestibulum eros, ac gravida orci augue eget mauris. Maecenas pharetra convallis est placerat lacinia. Curabitur ipsum metus, sagittis vitae efficitur congue, suscipit quis nunc. Integer convallis, nisl sed mattis consectetur, mi nunc rutrum purus, at bibendum quam mi nec elit. Aliquam vulputate posuere ipsum, quis condimentum tortor ultricies vitae. Nunc vitae justo id neque dictum vulputate quis nec enim. Ut a venenatis metus. </p> <p> Etiam ut mattis ligula. Vestibulum a nisl vel magna fermentum sodales et ac metus. Ut cursus libero tincidunt nisl imperdiet, vel vulputate tellus pulvinar. Donec ac nulla tempus, aliquam tellus vitae, ornare velit. Nam quis massa ac elit scelerisque finibus eu ac metus. Nullam faucibus nunc id interdum tincidunt. Maecenas ut neque a justo ultricies pretium. Integer efficitur sit amet est in mattis. Vivamus interdum erat in quam sodales sagittis. Sed laoreet urna at neque volutpat rutrum. Duis id ornare lectus. Praesent in felis vitae tortor viverra congue. Pellentesque commodo diam eu lorem dapibus, ac scelerisque turpis tristique. </p> <p> <strong> You can move nodes with your mouse. Also, clicking the stage will create new nodes, connected to the closest nodes. </strong> </p> <div id="sigma-container"></div> <p> Duis justo sapien, auctor a ligula eget, iaculis pharetra nulla. In sed malesuada arcu. Quisque viverra tortor sed imperdiet euismod. Aliquam quis sem vitae metus consequat posuere id ornare elit. Donec porttitor nulla id euismod luctus. In euismod a quam a convallis. Vivamus sit amet vehicula sapien, nec vulputate ex. Fusce non enim a felis luctus mattis ac nec nulla. </p> <p> Praesent tortor risus, sagittis at aliquet vel, egestas a ligula. Aliquam euismod lobortis magna, a varius massa tincidunt et. Praesent et ultrices turpis, sed rhoncus quam. Praesent quis congue tortor, sed ultrices mi. Curabitur tincidunt placerat tincidunt. Sed non varius risus. Proin suscipit magna arcu, a congue augue tempor vel. Sed hendrerit nisi a tellus luctus, eu venenatis orci semper. Vestibulum a nulla semper, elementum elit at, consequat nisl. Mauris ipsum mauris, ultrices nec ante et, elementum rhoncus diam. Mauris nisl arcu, maximus at ultricies at, convallis nec justo. Integer congue placerat sem, id ultrices odio porttitor consequat. Vestibulum porttitor tincidunt justo, vel sodales dui imperdiet ut. Mauris eget accumsan sapien, et viverra ante. Donec et turpis et neque euismod sollicitudin. Donec sit amet vulputate felis. </p> </main> <script src="build/bundle.js"></script> </body> </html>