Merge pull request #152 from Linkurious/develop

v5.1.4

Author: w8r

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 5.1.3
+current_version = 5.1.4
 commit = False
 tag = False
 serialize =

.version

@@ -1 +1 @@
-5.1.3
+5.1.4

README.md

@@ -230,7 +230,9 @@ Main visualisation component. You can use `onReady` or `ref` prop to get a refer
 | `graph?`   | `Ogma.RawGraph`        | `null`  | The graph to render                                                                                                                                                     |
 | `onReady?` | `(ogma: Ogma) => void` | `null`  | Callback when the Ogma instance is ready                                                                                                                                |
 | `ref?`     | `React.Ref<Ogma>`      | `null`  | Reference to the Ogma instance                                                                                                                                          |
-| `children` | `React.ReactNode`      | `null`  | The children of the component, such as `<Popup>` or `<Tooltip>` or your custom component. Ogma instance is avalable to the children components through `useOgma()` hook |
+| `children?` | `React.ReactNode`      | `null`  | The children of the component, such as `<Popup>` or `<Tooltip>` or your custom component. Ogma instance is avalable to the children components through `useOgma()` hook |
+| `theme?` | `Ogma.Themes`      | `null`  | The theme of the graph. Keep in mind that adding `<NodeStyle>` and `<EdgeStyle>` components will overwrite the theme's styles |
+| `onEventName` | `(event: EventTypes<ND, ED>[K]) => void`      | `null`  | The handler for an [event](https://doc.linkurious.com/ogma/latest/api/events.html). The passed in function should always be the result of the `useEvent` hook to have a stable function identity and avoid reassigning the same handler at every render. |
 
 ### `<NodeStyle />`
 

demo/src/App.tsx

@@ -5,6 +5,7 @@ import OgmaLib, {
   RawGraph,
   NodeGrouping as NodeGroupingTransformation
 } from "@linkurious/ogma";
+import { morningBreeze } from "@linkurious/ogma-styles";
 import { useEffect, useState, createRef, useCallback } from "react";
 import { LoadingOverlay } from "./components/LoadingOverlay";
 // for geo mode
@@ -18,10 +19,13 @@ import {
   NodeGrouping,
   Popup,
   Geo,
-  NodeGroupingProps
+  NodeGroupingProps,
+  useEvent
 } from "../../src";
 
-// cusotm components:
+import { Theme } from "../../src/types";
+
+// custom components:
 // layout component, to be applied on certain events
 import { LayoutService } from "./components/Layout";
 // outlines canvas layer with halos
@@ -47,7 +51,7 @@ export default function App() {
   const [clickedNode, setClickedNode] = useState<Node>();
 
   // ogma instance and grouping references
-  const ref = createRef<OgmaLib>();
+  const ogmaInstanceRef = createRef<OgmaLib>();
   const groupingRef = createRef<NodeGroupingTransformation<ND, ED>>();
 
   // grouping and geo states
@@ -97,40 +101,59 @@ export default function App() {
       });
   }, []);
 
+  const onClick = useEvent("click", ({ target }) => {
+    if (target && target.isNode) {
+      setClickedNode(target);
+      setPopupOpen(true);
+    }
+  });
+
+  const onMousemove = useEvent("mousemove", () => {
+    if (!ogmaInstanceRef.current) return;
+    const ptr = ogmaInstanceRef.current.getPointerInformation();
+    requestSetTooltipPosition(
+      ogmaInstanceRef.current.view.screenToGraphCoordinates({
+        x: ptr.x,
+        y: ptr.y
+      })
+    );
+    setTarget(ptr.target);
+  });
+
+  const onAddNodes = useEvent("addNodes", () => {
+    if (!ogmaInstanceRef.current) return;
+    ogmaInstanceRef.current.view.locateGraph({ duration: 250, padding: 50 });
+  });
+
+  const onReady = useCallback((instance: OgmaLib<ND, ED>) => {
+    ogmaInstanceRef.current = instance;
+  }, []);
+
+  const addNode = useCallback(() => {
+    if (!ogmaInstanceRef.current) return;
+    ogmaInstanceRef.current.addNode({
+      id: ogmaInstanceRef.current.getNodes().size
+    });
+  }, []);
+
   // nothing to render yet
   if (loading) return <LoadingOverlay />;
 
   return (
     <div className="App">
       <Logo />
       <Ogma
-        ref={ref}
+        ref={ogmaInstanceRef}
         graph={graph}
-        onReady={(ogma) => {
-          ogma.events
-            .on("click", ({ target }) => {
-              if (target && target.isNode) {
-                setClickedNode(target);
-                setPopupOpen(true);
-              }
-            })
-            .on("mousemove", () => {
-              const ptr = ogma.getPointerInformation();
-              requestSetTooltipPosition(
-                ogma.view.screenToGraphCoordinates({ x: ptr.x, y: ptr.y })
-              );
-              setTarget(ptr.target);
-            })
-            // locate graph when the nodes are added
-            .on("addNodes", () =>
-              ogma.view.locateGraph({ duration: 250, padding: 50 })
-            );
-        }}
+        onClick={onClick}
+        onMousemove={onMousemove}
+        onAddNodes={onAddNodes}
+        onReady={onReady}
+        theme={morningBreeze as Theme<ND, ED>}
       >
         {/* Styling */}
         <NodeStyleRule
           attributes={{
-            color: "#247BA0",
             radius: (n) => (n?.getData("multiplier") || 1) * nodeSize, // the label is the value os the property name.
             text: {
               content: (node) => node?.getData("properties.name"),
@@ -150,7 +173,6 @@ export default function App() {
           disabled={!nodeGrouping && !geoEnabled}
           groupIdFunction={groupingOptions.groupIdFunction}
           nodeGenerator={groupingOptions.nodeGenerator}
-          duration={500}
         />
 
         {/* context-aware UI */}
@@ -193,6 +215,7 @@ export default function App() {
         setOutlines={setOutlines}
         geoEnabled={geoEnabled}
         setGeoEnabled={setGeoEnabled}
+        addNode={addNode}
       />
     </div>
   );

demo/src/components/Controls.tsx

@@ -13,6 +13,7 @@ interface ControlsProps {
   setOutlines: (value: boolean) => void;
   geoEnabled: boolean;
   setGeoEnabled: (value: boolean) => void;
+  addNode: () => void;
 }
 
 export function Controls({
@@ -24,6 +25,7 @@ export function Controls({
   setGeoEnabled,
   outlines,
   setOutlines,
+  addNode
 }: ControlsProps) {
   //const ogma = useOgma();
   const [drawerShown, setDrawerShown] = useState(false);
@@ -94,6 +96,11 @@ export function Controls({
             label="Geo mode"
           />
         </div>
+        <div className="controls-section">
+          <div className="link-button" onClick={() => addNode()}>
+            Add node
+          </div>
+        </div>
       </Drawer>
     </>
   );

demo/src/index.css

@@ -8,6 +8,7 @@ body {
   --overlay-background-color: #282c34;
   --text-color: #222222;
   --brand-color: #0094ff;
+  --brand-color-darker: #0074cc;
   --overlay-text-color: var(--brand-color);
   --fontFamily: "IBM Plex Sans", sans-serif;
   --border-radius: 5px;
@@ -189,3 +190,16 @@ code {
 .gh-link {
   margin-left: 1em;
 }
+
+.link-button {
+  cursor: pointer;
+  color: var(--brand-color);
+  text-decoration: underline;
+  text-align: left;
+}
+
+.link-button:hover,
+.link-button:focus,
+.link-button:active {
+  color: var(--brand-color-darker);
+}