Merge pull request #27 from memgraph/release/0.1.2

Release 0.1.2
memgraph · Oct 11, 2022 · a80f5cc · a80f5cc
2 parents 26f404f + 048a0a2
commit a80f5cc
Show file tree

Hide file tree

Showing 18 changed files with 473 additions and 239 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## 0.1.2
+
+### Fix
+
+* Fix physics behavior (#26)
+
+### Chore
+
+ * Set dimensions on parent element when undefined (#24)
+ * Preserve graph container children (#24)
+ * Apply Emitter in simulator and fix cleanup when terminated (#25)
+ * Refactor naming in simulator (#25)
+
 ## 0.1.1
 
 ### Fix
@@ -10,7 +23,8 @@
 
 * Fix image loading on node style properties (#14)
 
-### Chore 
+### Chore
 
 * Add pre commit hook (#11)
 * Fix docs and general orb API issues (#13)
+
diff --git a/docs/view-default.md b/docs/view-default.md
@@ -12,7 +12,7 @@ other type of `IOrbView`. This will be necessary if you want to assign fixed nod
 coordinates, which you can read about further below.
 
 ```typescript
-import { DefaultView } from '@memgraph/orb';
+import { DefaultView } from "@memgraph/orb";
 
 const orb = new Orb<MyNode, MyEdge>(container);
 
@@ -25,7 +25,7 @@ you can see the list of all settings' parameters:
 ```typescript
 interface IDefaultViewSettings {
   // For custom node positions
-  getPosition(node: INode): { x: number; y: number; } | undefined;
+  getPosition(node: INode): { x: number; y: number } | undefined;
   // For node positioning simulation (d3-force parameters)
   simulation: {
     isPhysicsEnabled: false;
@@ -80,10 +80,11 @@ interface IDefaultViewSettings {
     contextAlphaOnEventIsEnabled: boolean;
   };
   // Other default view parameters
-  zoomFitTransitionMs: 200;
-  isOutOfBoundsDragEnabled: false;
-  areCoordinatesRounded: true;
-  isSimulationAnimated: true;
+  zoomFitTransitionMs: number;
+  isOutOfBoundsDragEnabled: boolean;
+  areCoordinatesRounded: boolean;
+  isSimulationAnimated: boolean;
+  areCollapsedContainerDimensionsAllowed: boolean;
 }
 ```
 
@@ -145,10 +146,11 @@ const defaultSettings = {
   isOutOfBoundsDragEnabled: false,
   areCoordinatesRounded: true,
   isSimulationAnimated: true,
+  areCollapsedContainerDimensionsAllowed: false;
 }
 ```
 
-You can read more about each property down below and on [Styles guide](./styles.md). 
+You can read more about each property down below and on [Styles guide](./styles.md).
 
 ### Property `getPosition`
 
@@ -204,7 +206,7 @@ that allows Orb to position the nodes.
 ![](./assets/view-default-fixed.png)
 
 ```typescript
-import { DefaultView } from '@memgraph/orb';
+import { DefaultView } from "@memgraph/orb";
 const container = document.getElementById("graph");
 
 const nodes: MyNode[] = [
@@ -244,7 +246,7 @@ The function has a node input (`INode`) which represents the Orb node data struc
 access your original properties through `.data` property. There you can find all properties of
 your nodes that you assigned in the `orb.data.setup()` function.
 
-Here you can use your original properties to indicate which ones represent your node coordinates 
+Here you can use your original properties to indicate which ones represent your node coordinates
 (`node.data.posX`, `node.data.posY`). All you have to do is return a `IPosition` that requires
 2 basic properties: `x` and `y` (`{ x: node.data.posX, y: node.data.posY }`).
 
@@ -269,34 +271,46 @@ Use this property to adjust the transition time when recentering the graph. Defa
 
 Disabled by default (`false`).
 
+### Property `areCoordinatesRounded`
+
+Rounds node coordinates to integer values. Slightly improves performance. Enabled by default (`true`).
+
 ### Property `isSimulationAnimated`
 
 Shows the process of simulation where the nodes are moved by the physics engine until they
 converge to a stable position. If disabled, the graph will suddenly appear in its final position.
 Enabled by default (`true`).
 
-### Property `areCoordinatesRounded`
+### Property `areCollapsedContainerDimensionsAllowed`
 
-Rounds node coordinates to integer values. Slightly improves performance. Enabled by default (`true`).
+Enables setting the dimensions of the Orb container element to zero.
+If the container element of Orb has collapsed dimensions (`width: 0;` or `height: 0;`),
+Orb will expand the container by setting the values to `100%`.
+If that doesn't work (the parent of the container also has collapsed dimensions),
+Orb will set an arbitrary fixed dimension to the container.
+Disabled by default (`false`).
 
 ## Settings
 
 The above settings of the `DefaultView` can be defined on view initialization, but also anytime
 after the initialization with a view function `setSettings`:
 
 ```typescript
-import { DefaultView } from '@memgraph/orb';
+import { DefaultView } from "@memgraph/orb";
 
 const orb = new Orb<MyNode, MyEdge>(container);
 
-orb.setView((context) => new DefaultView(context, {
-  getPosition: (node) => ({ x: node.data.posY, y: node.data.posX }),
-  zoomFitTransformMs: 1000,
-  render: {
-    shadowIsEnabled: false,
-    shadowOnEventIsEnabled: false,
-  },
-}));
+orb.setView(
+  (context) =>
+    new DefaultView(context, {
+      getPosition: (node) => ({ x: node.data.posY, y: node.data.posX }),
+      zoomFitTransformMs: 1000,
+      render: {
+        shadowIsEnabled: false,
+        shadowOnEventIsEnabled: false,
+      },
+    })
+);
 ```
 
 ```typescript

diff --git a/docs/view-map.md b/docs/view-map.md
@@ -1,45 +1,50 @@
-Orb views: Map view
-===
+# Orb views: Map view
 
 By default, Orb offers a `MapView` which is a graph view with a map as a background. Map rendering is
 done with a library [leaflet](https://leafletjs.com/). To render maps, make sure to add the
 following CSS to your project:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+/>
 ```
 
 Here is a simple example of `MapView` usage:
 
 ![](./assets/view-map-example.png)
 
 ```typescript
-import { MapView } from '@memgraph/orb'; 
-const container = document.getElementById('<your-div-id>');
+import { MapView } from "@memgraph/orb";
+const container = document.getElementById("<your-div-id>");
 
 const nodes: MyNode[] = [
-  { id: 'miami', label: 'Miami', lat: 25.789106, lng: -80.226529 },
-  { id: 'sanjuan', label: 'San Juan', lat: 18.4663188, lng: -66.1057427 },
-  { id: 'hamilton', label: 'Hamilton', lat: 32.294887, lng: -64.781380 },
+  { id: "miami", label: "Miami", lat: 25.789106, lng: -80.226529 },
+  { id: "sanjuan", label: "San Juan", lat: 18.4663188, lng: -66.1057427 },
+  { id: "hamilton", label: "Hamilton", lat: 32.294887, lng: -64.78138 },
 ];
 const edges: MyEdge[] = [
-  { id: 0, start: 'miami', end: 'sanjuan' },
-  { id: 1, start: 'sanjuan', end: 'hamilton' },
-  { id: 2, start: 'hamilton', end: 'miami' },
-]
+  { id: 0, start: "miami", end: "sanjuan" },
+  { id: 1, start: "sanjuan", end: "hamilton" },
+  { id: 2, start: "hamilton", end: "miami" },
+];
 
 const orb = new Orb<MyNode, MyEdge>(container);
-orb.setView((context) => new MapView(context, {
-  getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
-}));
+orb.setView(
+  (context) =>
+    new MapView(context, {
+      getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng }),
+    })
+);
 
 // Assign a default style
 orb.data.setDefaultStyle({
   getNodeStyle(node) {
     return {
-      borderColor: '#FFFFFF',
+      borderColor: "#FFFFFF",
       borderWidth: 1,
-      color: '#DD2222',
+      color: "#DD2222",
       fontSize: 10,
       label: node.data.label,
       size: 10,
@@ -48,7 +53,7 @@ orb.data.setDefaultStyle({
   getEdgeStyle() {
     return {
       arrowSize: 0,
-      color: '#DD2222',
+      color: "#DD2222",
       width: 3,
     };
   },
@@ -70,42 +75,51 @@ to get `latitude` and `longitude` for each node. Here is the example of settings
 initialized on the new `MapView`:
 
 ```typescript
-import * as L from 'leaflet';
-import { MapView } from '@memgraph/orb';
+import * as L from "leaflet";
+import { MapView } from "@memgraph/orb";
 
 const mapAttribution =
   '<a href="https://leafletjs.com/" target="_blank" >Leaflet</a> | ' +
   'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors';
 
-orb.setView((context) => new MapView(context, {
-  getGeoPosition: (node) => ({ lat: node.data.latitude, lng: node.data.longitude, }),
-  map: {
-    zoomLevel: 5,
-    tile: {
-      instance: new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
-      attribution: mapAttribution,
-    },
-    render: {
-      labelsIsEnabled: true,
-      labelsOnEventIsEnabled: true,
-      shadowIsEnabled: true,
-      shadowOnEventIsEnabled: true,
-      contextAlphaOnEvent: 0.3,
-      contextAlphaOnEventIsEnabled: true,  
-    },
-  },
-}));
+orb.setView(
+  (context) =>
+    new MapView(context, {
+      getGeoPosition: (node) => ({
+        lat: node.data.latitude,
+        lng: node.data.longitude,
+      }),
+      map: {
+        zoomLevel: 5,
+        tile: {
+          instance: new L.TileLayer(
+            "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          ),
+          attribution: mapAttribution,
+        },
+        render: {
+          labelsIsEnabled: true,
+          labelsOnEventIsEnabled: true,
+          shadowIsEnabled: true,
+          shadowOnEventIsEnabled: true,
+          contextAlphaOnEvent: 0.3,
+          contextAlphaOnEventIsEnabled: true,
+        },
+      },
+      areCollapsedContainerDimensionsAllowed: false;
+    })
+);
 ```
 
 You can set settings on view initialization or afterward with `orb.view.setSettings`. Below
 you can see the list of all settings' parameters:
 
 ```typescript
-import * as L from 'leaflet';
+import * as L from "leaflet";
 
 interface IMapViewSettings {
   // For map node positions
-  getGeoPosition(node: INode): { lat: number; lng: number; } | undefined;
+  getGeoPosition(node: INode): { lat: number; lng: number } | undefined;
   // For canvas rendering and events
   render: {
     minZoom: number;
@@ -123,6 +137,7 @@ interface IMapViewSettings {
     zoomLevel: number;
     tile: L.TileLayer;
   };
+  areCollapsedContainerDimensionsAllowed: boolean;
 }
 ```
 
@@ -143,9 +158,9 @@ const defaultSettings = {
   },
   map: {
     zoomLevel: 2, // Default map zoom level
-    tile: new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') // OpenStreetMaps
-  }
-}
+    tile: new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"), // OpenStreetMaps
+  },
+};
 ```
 
 You can read more about each property down below and on [Styles guide](./styles.md).
@@ -160,15 +175,24 @@ as an input, and it needs to return the object `{ lat: number; lng: number; }` o
 
 Optional property `map` has two properties that you can set which are:
 
-* `zoomLevel` - initial map zoom level. The zoom level is forwarded to `leaflet`.
-* `tile` - map tile layout where you need to provide an instance (`leaflet.TileLayer`) and attribution.
+- `zoomLevel` - initial map zoom level. The zoom level is forwarded to `leaflet`.
+- `tile` - map tile layout where you need to provide an instance (`leaflet.TileLayer`) and attribution.
   The default tile is the OpenStreetMaps.
 
 ### Property `render`
 
 Optional property `render` has several rendering options that you can tweak. Read more about them
 on [Styling guide](./styles.md).
 
+### Property `areCollapsedContainerDimensionsAllowed`
+
+Enables setting the dimensions of the Orb container element to zero.
+If the container element of Orb has collapsed dimensions (`width: 0;` or `height: 0;`),
+Orb will expand the container by setting the values to `100%`.
+If that doesn't work (the parent of the container also has collapsed dimensions),
+Orb will set an arbitrary fixed dimension to the container.
+Disabled by default (`false`).
+
 ## Settings
 
 The above settings of `MapView` can be defined on view initialization, but also anytime after the
@@ -180,7 +204,7 @@ const settings = orb.view.getSettings();
 
 // Change the way how geo coordinates are defined on nodes
 orb.view.setSettings({
-  getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
+  getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng }),
 });
 
 // Change the zoom level and disable shadows
@@ -212,7 +236,7 @@ If you need a reference to the internal map reference from `leaflet` library, ju
 following example:
 
 ```typescript
-import { MapView } from '@memgraph/orb';
+import { MapView } from "@memgraph/orb";
 
 // It will only work on MapView
 const leaflet = (orb.view as MapView).leaflet;