From 97618d72909bf8c40f09d30640f5519f929e8542 Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 22:59:03 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 .../examples/network/nodeStyles/shapes.html   | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/network/nodeStyles/shapes.html
diff --git a/js/dos/ext/vis/examples/network/nodeStyles/shapes.html b/js/dos/ext/vis/examples/network/nodeStyles/shapes.html
new file mode 100644
index 0000000..1f4b92b
--- /dev/null
+++ b/js/dos/ext/vis/examples/network/nodeStyles/shapes.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Shapes</title>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 1000px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function draw() {
+      nodes = [
+        {id: 1,  label: 'circle',  shape: 'circle' },
+        {id: 2,  label: 'ellipse', shape: 'ellipse'},
+        {id: 3,  label: 'database',shape: 'database'},
+        {id: 4,  label: 'box',     shape: 'box'    },
+        {id: 5,  label: 'diamond', shape: 'diamond'},
+        {id: 6,  label: 'dot',     shape: 'dot'},
+        {id: 7,  label: 'square',  shape: 'square'},
+        {id: 8,  label: 'triangle',shape: 'triangle'},
+        {id: 9,  label: 'triangleDown', shape: 'triangleDown'},
+        {id: 10, label: 'text',    shape: 'text'},
+        {id: 11, label: 'star',    shape: 'star'},
+        {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' },
+        {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse'},
+        {id: 23, font:{size:30},          label: 'big database',shape: 'database'},
+        {id: 24, font:{size:30},          label: 'big box',     shape: 'box'    },
+        {id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
+        {id: 26, font:{size:30}, size:40, label: 'big dot',     shape: 'dot'},
+        {id: 27, font:{size:30}, size:40, label: 'big square',  shape: 'square'},
+        {id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
+        {id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
+        {id: 30, font:{size:30},          label: 'big text',    shape: 'text'},
+        {id: 31, font:{size:30}, size:40, label: 'big star',    shape: 'star'}
+      ];
+
+      edges = [
+      ];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+
+<body onload="draw()">
+
+<p>
+  Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
+</p>
+<div id="mynetwork"></div>
+
+<div id="info"></div>
+</body>
+</html>
