hamzamoudnib · March 7, 2021 20:04 · Mar 7, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<p>
+  Create a simple network with some nodes and edges. Some of the events are
+  logged in the console in improve readability.
+</p>
+
+<div id="mynetwork"></div>
+
+<h2 id="eventSpanHeading"></h2>
+<pre id="eventSpanContent"></pre>
diff --git a/script.js b/script.js
@@ -0,0 +1,161 @@
+// create an array with nodes
+var nodes = new vis.DataSet([
+  { id: 1, label: "Node 1", title: "I have a popup!" },
+  { id: 2, label: "Node 2", title: "I have a popup!" },
+  { id: 3, label: "Node 3", title: "I have a popup!" },
+  { id: 4, label: "Node 4", title: "I have a popup!" },
+  { id: 5, label: "Node 5", title: "I have a popup!" },
+]);
+
+// create an array with edges
+var edges = new vis.DataSet([
+  { from: 1, to: 3 },
+  { from: 1, to: 2 },
+  { from: 2, to: 4 },
+  { from: 2, to: 5 },
+]);
+
+// create a network
+var container = document.getElementById("mynetwork");
+var data = {
+  nodes: nodes,
+  edges: edges,
+};
+
+var options = {
+  interaction: { hover: true },
+  manipulation: {
+    enabled: true,
+  },
+};
+
+var network = new vis.Network(container, data, options);
+
+network.on("click", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText = "Click event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+  console.log(
+    "click event, getNodeAt returns: " + this.getNodeAt(params.pointer.DOM)
+  );
+});
+network.on("doubleClick", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText = "doubleClick event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+});
+network.on("oncontext", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText =
+    "oncontext (right click) event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+});
+network.on("dragStart", function (params) {
+  // There's no point in displaying this event on screen, it gets immediately overwritten
+  params.event = "[original event]";
+  console.log("dragStart Event:", params);
+  console.log(
+    "dragStart event, getNodeAt returns: " + this.getNodeAt(params.pointer.DOM)
+  );
+});
+network.on("dragging", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText = "dragging event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+});
+network.on("dragEnd", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText = "dragEnd event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+  console.log("dragEnd Event:", params);
+  console.log(
+    "dragEnd event, getNodeAt returns: " + this.getNodeAt(params.pointer.DOM)
+  );
+});
+network.on("controlNodeDragging", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText =
+    "control node dragging event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+});
+network.on("controlNodeDragEnd", function (params) {
+  params.event = "[original event]";
+  document.getElementById("eventSpanHeading").innerText =
+    "control node drag end event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+  console.log("controlNodeDragEnd Event:", params);
+});
+network.on("zoom", function (params) {
+  document.getElementById("eventSpanHeading").innerText = "zoom event:";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+});
+network.on("showPopup", function (params) {
+  document.getElementById("eventSpanHeading").innerText = "showPopup event: ";
+  document.getElementById("eventSpanContent").innerText = JSON.stringify(
+    params,
+    null,
+    4
+  );
+});
+network.on("hidePopup", function () {
+  console.log("hidePopup Event");
+});
+network.on("select", function (params) {
+  console.log("select Event:", params);
+});
+network.on("selectNode", function (params) {
+  console.log("selectNode Event:", params);
+});
+network.on("selectEdge", function (params) {
+  console.log("selectEdge Event:", params);
+});
+network.on("deselectNode", function (params) {
+  console.log("deselectNode Event:", params);
+});
+network.on("deselectEdge", function (params) {
+  console.log("deselectEdge Event:", params);
+});
+network.on("hoverNode", function (params) {
+  console.log("hoverNode Event:", params);
+});
+network.on("hoverEdge", function (params) {
+  console.log("hoverEdge Event:", params);
+});
+network.on("blurNode", function (params) {
+  console.log("blurNode Event:", params);
+});
+network.on("blurEdge", function (params) {
+  console.log("blurEdge Event:", params);
+});
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,5 @@
+#mynetwork {
+  width: 600px;
+  height: 400px;
+  border: 1px solid lightgray;
+}
diff --git a/vis-network-events-interaction-events.markdown b/vis-network-events-interaction-events.markdown
@@ -0,0 +1,7 @@
+Vis Network | Events | Interaction events
+-----------------------------------------
+
+
+A [Pen](https://codepen.io/hamzamoudnib/pen/vYyzqxb) by [hamzamoudnib](https://codepen.io/hamzamoudnib) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/hamzamoudnib/pen/vYyzqxb/license).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>