New: Add properties setters and getters (#93)

* New: Add node properties setters

* New: Add edge properties setters

* New: Add properties getters

* New: Add patch for nodes and edges

* Fix: Make getters return copies

* Fix: Edge factory listeners copying

* Fix: Jest outdated tests

* Fix: Github actions node version

* Chore: Refactor observer interface

* Chore: Refactor node/edge constructor settings

* Chore: Refactor node/edge function grouping

* Chore: Refactor node/edge function grouping

* Fix: Listeners behaviour

* Chore: Refactor property copying

* Chore: Refactor subject implementation

* Fix: Set position behaviour on node drag

* Chore: Upgrade node version

* Chore: Refactor function type check

* Fix: Remove listener behaviour

* Chore: Refactor util naming

* Chore: Remove unused type assertion

* Chore: Refactor position setter options

* Chore: Refactor property patch function

* Fix: Set map node position behaviour

* Chore: Refactor simulator data patching

* Chore: Change observers to callbacks

* New: Add state setters with options (#95)

* New: Add state setters with options

* Chore: Remove leftover comments

* Chore: Refactor state setter logic

* Chore: Refactor state types

* Fix: Rename merged function usage

* Fix: Merged variable naming

* Chore: Fix tests

.github/workflows/build.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: "16.x"
+          node-version: "18.x"
 
       - name: 'Install'
         run: npm ci

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: "16.x"
+          node-version: "18.x"
 
       - name: 'Install'
         run: npm ci

examples/example-custom-styled-graph.html

@@ -58,11 +58,11 @@ <h1>Example 2 - Basic + Custom default style</h1>
           colorHover: '#e7644e',
           colorSelected: '#e7644e',
           fontSize: 3,
-          label: node.data.label,
+          label: node.getData().label,
           size: 6,
         };
 
-        if (node.data.label === 'Node A') {
+        if (node.getData().label === 'Node A') {
           return {
             ...basicStyle,
             size: 10,
@@ -84,7 +84,7 @@ <h1>Example 2 - Basic + Custom default style</h1>
           width: 0.3,
           widthHover: 0.9,
           widthSelected: 0.9,
-          label: edge.data.label,
+          label: edge.getData().label,
         };
       },
     });

examples/example-fixed-coordinates-graph.html

@@ -43,7 +43,7 @@ <h1>Example 3 - Fixed coordinates</h1>
     ];
 
     const orb = new Orb.OrbView(container, {
-      getPosition: (node) => ({ x: node.data.x, y: node.data.y })
+      getPosition: (node) => ({ x: node.getData().x, y: node.getData().y })
     });
 
     // Initialize nodes and edges
@@ -59,7 +59,7 @@ <h1>Example 3 - Fixed coordinates</h1>
           colorHover: '#e7644e',
           colorSelected: '#e7644e',
           fontSize: 3,
-          label: node.data.label,
+          label: node.getData().label,
           size: 6,
         };
       },
@@ -72,7 +72,7 @@ <h1>Example 3 - Fixed coordinates</h1>
           width: 0.3,
           widthHover: 0.9,
           widthSelected: 0.9,
-          label: edge.data.label,
+          label: edge.getData().label,
         };
       },
     });

examples/example-graph-data-changes.html

@@ -57,7 +57,7 @@ <h1>Example 5 - Dynamics</h1>
           colorHover: '#e7644e',
           colorSelected: '#e7644e',
           fontSize: 3,
-          label: node.data.label,
+          label: node.getData().label,
           size: 6,
         };
       },
@@ -70,7 +70,7 @@ <h1>Example 5 - Dynamics</h1>
           width: 0.3,
           widthHover: 0.9,
           widthSelected: 0.9,
-          label: edge.data.label,
+          label: edge.getData().label,
         };
       },
     });
@@ -97,7 +97,7 @@ <h1>Example 5 - Dynamics</h1>
         if (currentNodes.length) {
           const newEdge = {
             id: n,
-            start: currentNodes[Math.floor(Math.random() * currentNodes.length)].id,
+            start: currentNodes[Math.floor(Math.random() * currentNodes.length)].getId(),
             end: n,
             label: `Edge ${n} (new)`
           };
@@ -115,7 +115,7 @@ <h1>Example 5 - Dynamics</h1>
 
     orb.events.on(Orb.OrbEventType.NODE_CLICK, (event) => {
       console.log('Node clicked: ', event.node);
-      orb.data.remove({ nodeIds: [event.node.id] });
+      orb.data.remove({ nodeIds: [event.node.getId()] });
       orb.render();
     });
 

examples/example-graph-events.html

@@ -65,7 +65,7 @@ <h1>Example 4 - Events</h1>
           colorHover: '#e7644e',
           colorSelected: '#e7644e',
           fontSize: 3,
-          label: node.data.label,
+          label: node.getData().label,
           size: 6,
         };
       },
@@ -78,7 +78,7 @@ <h1>Example 4 - Events</h1>
           width: 0.3,
           widthHover: 0.9,
           widthSelected: 0.9,
-          label: edge.data.label,
+          label: edge.getData().label,
         };
       },
     });
@@ -103,27 +103,27 @@ <h1>Example 4 - Events</h1>
 
     orb.events.on(Orb.OrbEventType.NODE_CLICK, (event) => {
       console.log('Event: node-click', event);
-      output.innerHTML = `<b>${event.node.data.label}</b> clicked!`;
+      output.innerHTML = `<b>${event.node.getData().label}</b> clicked!`;
     });
     orb.events.on(Orb.OrbEventType.NODE_HOVER, (event) => {
       console.log('Event: node-hover', event);
-      output.innerHTML = `<b>${event.node.data.label}</b> hovered!`;
+      output.innerHTML = `<b>${event.node.getData().label}</b> hovered!`;
     });
     orb.events.on(Orb.OrbEventType.EDGE_CLICK, (event) => {
       console.log('Event: edge-click', event);
-      output.innerHTML = `Edge with id <b>${event.edge.data.id}</b> clicked!`;
+      output.innerHTML = `Edge with id <b>${event.edge.getData().id}</b> clicked!`;
     });
 
     orb.events.on(Orb.OrbEventType.NODE_RIGHT_CLICK, (data) => {
       data.event.preventDefault();
       console.log("Event: node-right-click", data);
-      output.innerHTML = `<b>${data.node.data.label}</b> right clicked!`;
+      output.innerHTML = `<b>${data.node.getData().label}</b> right clicked!`;
     })
 
     orb.events.on(Orb.OrbEventType.EDGE_RIGHT_CLICK, (data) => {
       data.event.preventDefault();
       console.log("Event: edge-right-click", data);
-      output.innerHTML = `Edge with id <b>${data.edge.data.id}</b> right clicked!`;
+      output.innerHTML = `Edge with id <b>${data.edge.getData().id}</b> right clicked!`;
     })
 
     orb.events.on(Orb.OrbEventType.MOUSE_RIGHT_CLICK, (data) => {
@@ -136,12 +136,12 @@ <h1>Example 4 - Events</h1>
 
     orb.events.on(Orb.OrbEventType.NODE_DOUBLE_CLICK, (data) => {
       console.log("Event: node-double-click", data);
-      output.innerHTML = `<b>${data.node.data.label}</b> double clicked!`;
+      output.innerHTML = `<b>${data.node.getData().label}</b> double clicked!`;
     })
 
     orb.events.on(Orb.OrbEventType.EDGE_DOUBLE_CLICK, (data) => {
       console.log("Event: edge-double-click", data);
-      output.innerHTML = `Edge with id <b>${data.edge.data.id}</b> double clicked!`;
+      output.innerHTML = `Edge with id <b>${data.edge.getData().id}</b> double clicked!`;
     })
 
     orb.events.on(Orb.OrbEventType.MOUSE_DOUBLE_CLICK, (data) => {

examples/example-graph-on-map.html

@@ -45,7 +45,7 @@ <h1>Example 6 - Map</h1>
     ];
 
     const orb = new Orb.OrbMapView(container, {
-      getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
+      getGeoPosition: (node) => ({ lat: node.getData().lat, lng: node.getData().lng, }),
     });
 
     // Assign a basic style
@@ -58,7 +58,7 @@ <h1>Example 6 - Map</h1>
           colorHover: '#e7644e',
           colorSelected: '#e7644e',
           fontSize: 10,
-          label: node.data.label,
+          label: node.getData().label,
           size: 6,
         };
       },
@@ -71,7 +71,7 @@ <h1>Example 6 - Map</h1>
           width: 1,
           widthHover: 0.9,
           widthSelected: 0.9,
-          label: edge.data.label,
+          label: edge.getData().label,
         };
       },
     });

examples/playground.html

@@ -41,7 +41,7 @@
             colorHover: '#e7644e',
             colorSelected: '#e7644e',
             fontSize: 3,
-            label: node.data.labels[0],
+            label: node.getData().labels[0],
             size: 6,
           };
         },
@@ -54,15 +54,15 @@
             width: 0.3,
             widthHover: 0.9,
             widthSelected: 0.9,
-            label: edge.data.label,
+            label: edge.getData().label,
           };
         },
       };
     };
 
     const getOrbMapView = (container) => {
       const view = new Orb.OrbMapView(container, {
-        getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
+        getGeoPosition: (node) => ({ lat: node.getData().lat, lng: node.getData().lng, }),
       });
 
       // Assign a basic style

examples/simulator-scenarios.html

@@ -2417,7 +2417,7 @@ <h4 class="scenario-title">
       })),
       edges: [...Array(newNodeCount).keys()].map((key) => ({
         id: oldNodeCount + key,
-        start: key ? oldNodeCount + key : (sourceNode?.id || 0),
+        start: key ? oldNodeCount + key : (sourceNode?.getId() || 0),
         end: oldNodeCount + key + 1
       })),
     });
@@ -2455,8 +2455,8 @@ <h4 class="scenario-title">
 
     const graphStyle = {
       getNodeStyle(node) {
-        const isNewNode = node.id >= NODE_COUNT;
-        const isFixed = node.data.x !== undefined && node.data.y !== undefined;
+        const isNewNode = node.getId() >= NODE_COUNT;
+        const isFixed = node.getData().x !== undefined && node.getData().y !== undefined;
 
         // Old nodes
         let color = isFixed ? '#5B0078' : '#003A58';
@@ -2476,7 +2476,7 @@ <h4 class="scenario-title">
           colorSelected,
           fontSize: 4,
           fontColor: '#000000',
-          label: node.data.label,
+          label: node.getData().label,
           size: 6,
         };
       },
@@ -2490,7 +2490,7 @@ <h4 class="scenario-title">
           width: 1.2,
           widthHover: 1.3,
           widthSelected: 1.5,
-          label: edge.data.label,
+          label: edge.getData().label,
         };
       },
     };
@@ -2501,7 +2501,7 @@ <h4 class="scenario-title">
       const container = document.getElementById(graphContainerId);
 
       let orb = new Orb.OrbView(container, {
-        getPosition: (node) => ({ x: node.data.x, y: node.data.y })
+        getPosition: (node) => ({ x: node.getData().x, y: node.getData().y })
       });
 
       // Assign a basic style
@@ -2603,7 +2603,7 @@ <h4 class="scenario-title">
       const container = document.getElementById(graphContainerId);
 
       let orb = new Orb.OrbView(container, {
-        getPosition: (node) => ({ x: node.data.x, y: node.data.y }),
+        getPosition: (node) => ({ x: node.getData().x, y: node.getData().y }),
         simulation: {
           isPhysicsEnabled,
         }
@@ -2741,10 +2741,10 @@ <h4 class="scenario-title">
 
     // Delete all nodes
     const deleteAllNodes = (orb) => {
-      console.log('orb', orb.data.getNodes(), orb.data.getNodes().map((node) => node.id))
+      console.log('orb', orb.data.getNodes(), orb.data.getNodes().map((node) => node.getId()))
       orb.data.remove({
-        nodeIds: orb.data.getNodes().map((node) => node.id),
-        edgeIds: orb.data.getEdges().map((edge) => edge.id),
+        nodeIds: orb.data.getNodes().map((node) => node.getId()),
+        edgeIds: orb.data.getEdges().map((edge) => edge.getId()),
       });
       orb.render(() => {
         setTimeout(() => {