diff --git a/.babelrc b/.babelrc index a78771c4bb..f77f4dcb12 100644 --- a/.babelrc +++ b/.babelrc @@ -3,7 +3,9 @@ [ "@babel/preset-env", { - "targets": "> 0.1% or not dead" + "targets": "> 0.1% or not dead", + "useBuiltIns": "usage", + "corejs": 3 } ], "@babel/preset-typescript" @@ -11,8 +13,7 @@ "plugins": [ "css-modules-transform", "@babel/proposal-class-properties", - "@babel/proposal-object-rest-spread", - "@babel/plugin-transform-runtime" + "@babel/proposal-object-rest-spread" ], "env": { "test": { diff --git a/.eslintrc.js b/.eslintrc.js index e4b33ffb8e..2c177ad783 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -103,8 +103,6 @@ module.exports = { }, { files: [ - "lib/index-bundle.ts", - "lib/index.ts", "lib/network/gephiParser.ts", "test/NodesHandler.test.ts", "test/dot-parser/dot-parser.test.ts", diff --git a/.gitignore b/.gitignore index 88ee4168c6..dc9f43a575 100644 --- a/.gitignore +++ b/.gitignore @@ -17,5 +17,12 @@ gen/ .nyc_output/ coverage/ .rpt2_cache -vis-network-*.tgz + +# built files +/declarations/ /dist/ +/examples/index.html +/examples/thumbnails/ +/peer/ +/standalone/ +vis-network-*.tgz diff --git a/README.md b/README.md index e6ef87648d..c76a81929f 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Install via npm: ## Example -A basic example on loading a Timeline is shown below. More examples can be +A basic example on loading a Network is shown below. More examples can be found in the [examples directory](https://github.com/visjs/vis-network/tree/master/examples/) of the project. @@ -27,8 +27,7 @@ of the project. Network - - + - - -
-
-

Vis Network

-
-
- Basic usage
- -
- -
-
-
-
- Basic usage
 -
-
-

Data

-
-
- Custom Scaling
- -
- -
-
-
-
- Custom Scaling
- DataSet
- -
- -
-
-
-
- DataSet
- DOT edge styles
- -
- -
-
-
-
- DOT edge styles
- DOT Language
- -
- -
-
-
-
- DOT Language
- DOT language playground
- -
- -
-
-
-
- DOT language playground
- Dynamic Data
- -
- -
-
-
-
- Dynamic Data
- Dynamic filtering
- -
- -
-
-
-
- Dynamic filtering
- Importing from Gephi (JSON)
- -
- -
-
-
-
- Importing from Gephi (JSON)
- Scaling Labels
- -
- -
-
-
-
- Scaling Labels
- Scaling Nodes and Edges
- -
- -
-
-
-
- Scaling Nodes and Edges
 -
-
-
-

Edge Styles

-
-
- Arrow Alignment
- -
- -
-
-
-
- Arrow Alignment
- Arrow Types
- -
- -
-
-
-
- Arrow Types
- Arrows
- -
- -
-
-
-
- Arrows
- Colors
- -
- -
-
-
-
- Colors
- Dashes
- -
- -
-
-
-
- Dashes
- Edge background
- -
- -
-
-
-
- Edge background
- Static smooth curves
- -
- -
-
-
-
- Static smooth curves
 -
- Static smooth curves - World Cup Network
 -
-
-
-

Events

-
-
- Interaction events
- -
- -
-
-
-
- Interaction events
- Physics Events
- -
- -
-
-
-
- Physics Events
- Rendering Events
- -
- -
-
-
-
- Rendering Events
 -
-
-
-

Example Applications

-
-
- Disassembler
- -
- -
-
-
-
- Disassembler
- Les miserables
- -
- -
-
-
-
- Les miserables
- Loading Bar
- -
- -
-
-
-
- Loading Bar
- Neighbourhood Highlighting
- -
- -
-
-
-
- Neighbourhood Highlighting
- Node Legend
- -
- -
-
-
-
- Node Legend
- World Cup Network
- -
- -
-
-
-
- World Cup Network
 -
-
-
-

Labels

-
-
- Label Alignment
- -
- -
-
-
-
- Label Alignment
- Label Background
- -
- -
-
-
-
- Label Background
- Label Color and Size
- -
- -
-
-
-
- Label Color and Size
- Label Margins
- -
- -
-
-
-
- Label Margins
- Label stroke
- -
- -
-
-
-
- Label stroke
- Multifont Labels
- -
- -
-
-
-
- Multifont Labels
- Multiline text
- -
- -
-
-
-
- Multiline text
 -
-
-
-

Layouts

-
-
- Dynamic Hierarchical Layout Changes
- -
- -
-
-
-
- Dynamic Hierarchical Layout Changes
- Hierarchical Layout
- -
- -
-
-
-
- Hierarchical Layout
- Hierarchical Layout Difference
- -
- -
-
-
-
- Hierarchical Layout Difference
- Hierarchical Layout without Physics
- -
- -
-
-
-
- Hierarchical Layout without Physics
- Setting the Random Seed
- -
- -
-
-
-
- Setting the Random Seed
- User Defined Hierarchical Layout (Big)
- -
- -
-
-
-
- User Defined Hierarchical Layout (Big)
 -
- User Defined Hierarchical Layout (Configurable)
 -
-
-
-

Manipulation

-
-
- Edit Edge Without Drag
- -
- -
-
-
-
- Edit Edge Without Drag
- Manipulation with Localization
- -
- -
-
-
-
- Manipulation with Localization
 -
-
-
-

Migrating from 5.4.1 to 6.0.0

-
-
- Edit Edge Without Drag
- -
- -
-
-
-
- Edit Edge Without Drag
 -
-
-
-

Node Styles

-
-
- Circular Images
- -
- -
-
-
-
- Circular Images
- Colors
- -
- -
-
-
-
- Colors
- Custom Groups
- -
- -
-
-
-
- Custom Groups
- Groups
- -
- -
-
-
-
- Groups
- HTML in Nodes
- -
- -
-
-
-
- HTML in Nodes
- Icons
- -
- -
-
-
-
- Icons
- Images
- -
- -
-
-
-
- Images
- Images with Borders
- -
- -
-
-
-
- Images with Borders
- Images with Borders and Image Padding
- -
- -
-
-
-
- Images with Borders and Image Padding
- Label Width and Height Settings
- -
- -
-
-
-
- Label Width and Height Settings
- Overriding Group Styles
- -
- -
-
-
-
- Overriding Group Styles
- Selected/Unselected Image
- -
- -
-
-
-
- Selected/Unselected Image
- Shadows
- -
- -
-
-
-
- Shadows
- Shapes
- -
- -
-
-
-
- Shapes
- Shapes with Dashed Borders
- -
- -
-
-
-
- Shapes with Dashed Borders
 -
-
-
-

Other

-
-
- Animations
- -
- -
-
-
-
- Animations
- Changing Clustered Edges and Nodes
- -
- -
-
-
-
- Changing Clustered Edges and Nodes
- Chosen Elements
- -
- -
-
-
-
- Chosen Elements
- Clustering
- -
- -
-
-
-
- Clustering
- Clustering by Zoom Level
- -
- -
-
-
-
- Clustering by Zoom Level
- Clustering Clusters
- -
- -
-
-
-
- Clustering Clusters
- Cursor Change
- -
- -
-
-
-
- Cursor Change
- Navigation
- -
- -
-
-
-
- Navigation
- On Load Animation
- -
- -
-
-
-
- On Load Animation
- Performance
- -
- -
-
-
-
- Performance
- Playing with Physics
- -
- -
-
-
-
- Playing with Physics
- Saving and Loading Networks
- -
- -
-
-
-
- Saving and Loading Networks
 -
-
-
-

Physics

-
-
- Playing with Physics
- -
- -
-
-
-
- Playing with Physics
 -
-
-
-

Tests

-
-
- Hidden Edge Test
- -
- -
-
-
-
- Hidden Edge Test
 -
-
-
-
- - diff --git a/examples/network/basicUsage.html b/examples/network/basicUsage.html index c06c072ff0..44c0d6a9b0 100644 --- a/examples/network/basicUsage.html +++ b/examples/network/basicUsage.html @@ -3,8 +3,7 @@ Vis Network | Basic usage - - + + + + + + + +
+
+

Vis Network

+

Basic Usage

+

Legacy Build

+
+ +

+ Create a simple network with some nodes and edges. +

+ +

+ This is kept only for backwards compatibility as this build is broken. + It doesn't play well with tree shaking, doesn't work with other Vis + family packages and atop of that contains bloatware that is not used by + Vis Network at all. +

+ +

When to use

+

+ Please don't use this. Use the + standalone build + instead. +

+ +

Content

+ + +

How to use

+ +
Browser UMD
+ 

+<script type="text/javascript" src="https://unpkg.com/vis-network/dist/vis-network.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/vis-network/dist/vis-network.min.css" />
+<!--
+  Including other packages like Vis Timeline or Vis Graph3D here won't work.
+  You need the peer build to do that.
+-->
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    { id: 1, label: "Node 1" },
+    { id: 2, label: "Node 2" },
+    { id: 3, label: "Node 3" },
+    { id: 4, label: "Node 4" },
+    { id: 5, label: "Node 5" }
+  ]);
+
+  // 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 },
+    { from: 3, to: 3 }
+  ]);
+
+  // create a network
+  var container = document.getElementById("mynetwork");
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var network = new vis.Network(container, data, options);
+</script>
+
+ +
Bundled ESM
+ 

+import { DataSet, Network } from "vis-network";
+import "vis-network/styles/vis-network.css";
+
+// create an array with nodes
+const nodes = new DataSet([
+  { id: 1, label: "Node 1" },
+  { id: 2, label: "Node 2" },
+  { id: 3, label: "Node 3" },
+  { id: 4, label: "Node 4" },
+  { id: 5, label: "Node 5" }
+]);
+
+// create an array with edges
+const edges = new DataSet([
+  { from: 1, to: 3 },
+  { from: 1, to: 2 },
+  { from: 2, to: 4 },
+  { from: 2, to: 5 },
+  { from: 3, to: 3 }
+]);
+
+// create a network
+const container = document.getElementById("mynetwork");
+const data = {
+  nodes: nodes,
+  edges: edges
+};
+const options = {};
+const network = new Network(container, data, options);
+
+
+ +
+ + + diff --git a/examples/network/basic_usage/peer.html b/examples/network/basic_usage/peer.html new file mode 100644 index 0000000000..1a5d45b994 --- /dev/null +++ b/examples/network/basic_usage/peer.html @@ -0,0 +1,201 @@ + + + + + + Network | Basic Usage | Peer Build + + + + + + + + + + + +
+
+

Vis Network

+

Basic Usage

+

Peer Build

+
+ +

+ Create a simple network with some nodes and edges. +

+ +

+ Peer build is designed to work well with other packages from the Vis + family. Compared to the standalone or legacy builds it doesn't include + dependencies which allows the same DataSet (and other dependencies) to + be used in Network and other packages (e.g. Timeline). In UMD version + this build doesn't suffer from the bug where exported members from + different packages get overwritten rendering some functionality + unusable. +

+ +

When to use

+

+ When you need multiple packages from the Vis family on the same page or + finer control over what gets loaded. +

+ +

Content

+ + +

How to use

+ +
Browser UMD
+ 

+<script type="text/javascript" src="https://unpkg.com/vis-util/peer/umd/vis-util.min.js"></script>
+<script type="text/javascript" src="https://unpkg.com/vis-data/peer/umd/vis-data.min.js"></script>
+<script type="text/javascript" src="https://unpkg.com/vis-network/peer/umd/vis-network.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/vis-network/styles/vis-network.min.css" />
+<!-- You may include other packages like Vis Timeline or Vis Graph3D here. -->
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    { id: 1, label: "Node 1" },
+    { id: 2, label: "Node 2" },
+    { id: 3, label: "Node 3" },
+    { id: 4, label: "Node 4" },
+    { id: 5, label: "Node 5" }
+  ]);
+
+  // 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 },
+    { from: 3, to: 3 }
+  ]);
+
+  // create a network
+  var container = document.getElementById("mynetwork");
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var network = new vis.Network(container, data, options);
+</script>
+
+ +
Bundled ESM
+ 

+import { DataSet } from "vis-data/peer/esm/vis-data";
+import { Network } from "vis-network/peer/esm/vis-network";
+import "vis-network/styles/vis-network.css";
+
+// create an array with nodes
+const nodes = new DataSet([
+  { id: 1, label: "Node 1" },
+  { id: 2, label: "Node 2" },
+  { id: 3, label: "Node 3" },
+  { id: 4, label: "Node 4" },
+  { id: 5, label: "Node 5" }
+]);
+
+// create an array with edges
+const edges = new DataSet([
+  { from: 1, to: 3 },
+  { from: 1, to: 2 },
+  { from: 2, to: 4 },
+  { from: 2, to: 5 },
+  { from: 3, to: 3 }
+]);
+
+// create a network
+const container = document.getElementById("mynetwork");
+const data = {
+  nodes: nodes,
+  edges: edges
+};
+const options = {};
+const network = new Network(container, data, options);
+
+
+ +
+ + + diff --git a/examples/network/basic_usage/standalone.html b/examples/network/basic_usage/standalone.html new file mode 100644 index 0000000000..36ffed12c1 --- /dev/null +++ b/examples/network/basic_usage/standalone.html @@ -0,0 +1,205 @@ + + + + + + Network | Basic Usage | Standalone Build + + + + + + + + +
+
+

Vis Network

+

Basic Usage

+

Standalone Build

+
+ +

+ Create a simple network with some nodes and edges. +

+ +

+ Standalone build doesn't work with other packages from the Vis family + because it bundles all dependencies. This leads to situation where + DataSets (and other dependencies) from one package (e.g. Timeline) don't + work in Network because Network expects it's own bundled DataSets to be + used. It is inteded as a convenience build for cases where multiple + packages are not necessary but ease of use is (like JSFiddle MEWs or + examples). This build is available in ESM and UMD versions each of them + has minified and unminified variant. +

+ +

When to use

+

+ When you don't need only Network (no Timeline, Graph3D etc.) and don't + want to deal with dependencies and styles (everything is bundled in this + build ready to use). +

+ +

Content

+ + +

How to use

+ +
Browser UMD
+ 

+<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+<!--
+  Including other packages like Vis Timeline or Vis Graph3D here won't work.
+  You need the peer build to do that.
+-->
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    { id: 1, label: "Node 1" },
+    { id: 2, label: "Node 2" },
+    { id: 3, label: "Node 3" },
+    { id: 4, label: "Node 4" },
+    { id: 5, label: "Node 5" }
+  ]);
+
+  // 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 },
+    { from: 3, to: 3 }
+  ]);
+
+  // create a network
+  var container = document.getElementById("mynetwork");
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var network = new vis.Network(container, data, options);
+</script>
+
+ +
Bundled ESM
+ 

+import { DataSet, Network } from "vis-network/standalone/esm/vis-network";
+// CSS will be automatically injected into the page.
+
+// create an array with nodes
+const nodes = new DataSet([
+  { id: 1, label: "Node 1" },
+  { id: 2, label: "Node 2" },
+  { id: 3, label: "Node 3" },
+  { id: 4, label: "Node 4" },
+  { id: 5, label: "Node 5" }
+]);
+
+// create an array with edges
+const edges = new DataSet([
+  { from: 1, to: 3 },
+  { from: 1, to: 2 },
+  { from: 2, to: 4 },
+  { from: 2, to: 5 },
+  { from: 3, to: 3 }
+]);
+
+// create a network
+const container = document.getElementById("mynetwork");
+const data = {
+  nodes: nodes,
+  edges: edges
+};
+const options = {};
+const network = new Network(container, data, options);
+
+
+ +
+ + + diff --git a/examples/network/data/datasets.html b/examples/network/data/datasets.html index 565528f9db..3038d372ea 100644 --- a/examples/network/data/datasets.html +++ b/examples/network/data/datasets.html @@ -3,8 +3,7 @@ Vis Network | Data | Dynamic Data - - + - - + - + + + - - + - + - + - + diff --git a/examples/network/edgeStyles/arrowTypes.html b/examples/network/edgeStyles/arrowTypes.html index 3a6ddeb1d0..0c6177ceb0 100644 --- a/examples/network/edgeStyles/arrowTypes.html +++ b/examples/network/edgeStyles/arrowTypes.html @@ -3,8 +3,7 @@ Vis Network | Edge Styles | Arrow Types - - + - - + diff --git a/examples/network/exampleApplications/lesMiserables.html b/examples/network/exampleApplications/lesMiserables.html index 7decb4a85f..39a151084e 100644 --- a/examples/network/exampleApplications/lesMiserables.html +++ b/examples/network/exampleApplications/lesMiserables.html @@ -11,8 +11,7 @@ } - - + - + - + diff --git a/examples/network/exampleApplications/nodeLegend.html b/examples/network/exampleApplications/nodeLegend.html index 0815ce7805..f1e8445f84 100644 --- a/examples/network/exampleApplications/nodeLegend.html +++ b/examples/network/exampleApplications/nodeLegend.html @@ -18,8 +18,7 @@ } - - + - + diff --git a/examples/network/imageSelected/imageSelected.html b/examples/network/imageSelected/imageSelected.html index e7ad36cc81..78cbc4a7d8 100644 --- a/examples/network/imageSelected/imageSelected.html +++ b/examples/network/imageSelected/imageSelected.html @@ -2,8 +2,7 @@ Vis Network | Node Styles | Selected/Unselected Image - - + - diff --git a/examples/network/labels/labelMargins.html b/examples/network/labels/labelMargins.html index c2a7e2f211..6b24e138f4 100644 --- a/examples/network/labels/labelMargins.html +++ b/examples/network/labels/labelMargins.html @@ -3,8 +3,7 @@ Vis Network | Labels | Label Margins - - + - diff --git a/examples/network/labels/multilineText.html b/examples/network/labels/multilineText.html index 010cb48b13..a99e905676 100644 --- a/examples/network/labels/multilineText.html +++ b/examples/network/labels/multilineText.html @@ -11,8 +11,7 @@ } - - + - - - + - + - + - - + + + + - + - - + - + - + - - + - - diff --git a/examples/network/nodeStyles/groups.html b/examples/network/nodeStyles/groups.html index 71bdcb2a45..93a602405f 100644 --- a/examples/network/nodeStyles/groups.html +++ b/examples/network/nodeStyles/groups.html @@ -18,10 +18,7 @@ } - - - - + diff --git a/examples/network/nodeStyles/icons.html b/examples/network/nodeStyles/icons.html index 9ce4e3655e..d198f5d713 100644 --- a/examples/network/nodeStyles/icons.html +++ b/examples/network/nodeStyles/icons.html @@ -7,8 +7,7 @@ - - + diff --git a/examples/network/nodeStyles/images.html b/examples/network/nodeStyles/images.html index e1f8c24575..6b97b05a5d 100644 --- a/examples/network/nodeStyles/images.html +++ b/examples/network/nodeStyles/images.html @@ -11,8 +11,7 @@ } - - + - + - + - + diff --git a/examples/network/nodeStyles/shadows.html b/examples/network/nodeStyles/shadows.html index 16373d151b..1cf564dbc4 100644 --- a/examples/network/nodeStyles/shadows.html +++ b/examples/network/nodeStyles/shadows.html @@ -18,10 +18,7 @@ } - - - - + diff --git a/examples/network/nodeStyles/shapes.html b/examples/network/nodeStyles/shapes.html index d462d5f78f..7dfd92fbea 100644 --- a/examples/network/nodeStyles/shapes.html +++ b/examples/network/nodeStyles/shapes.html @@ -11,8 +11,7 @@ } - - + - + - + - - + - + - - + - - + - - + - + + + - - + - - - - + diff --git a/examples/network/physics/physicsConfiguration.html b/examples/network/physics/physicsConfiguration.html index 70873f6f28..d8e3a950fa 100644 --- a/examples/network/physics/physicsConfiguration.html +++ b/examples/network/physics/physicsConfiguration.html @@ -23,8 +23,7 @@ - - + - + + +