v4.6.0 (#78)

* Update dependency node to v18.17.1 (#56) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency tslib to v2.6.1 (#57) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @testing-library/jest-dom to v5.17.0 (#54) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @next/bundle-analyzer to v13 (#58) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @types/node to v18.17.4 (#55) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Alexander Milevski <[email protected]> * Update dependency prettier to v3 (#59) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Alexander Milevski <[email protected]> * Update dependency prettier to v3.0.3 (#63) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency tslib to v2.6.2 (#64) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update react monorepo (#65) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @next/bundle-analyzer to v13.5.6 (#66) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @testing-library/user-event to v14.5.1 (#67) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency node to v18.18.2 (#68) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @types/node to v18.18.9 (#61) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency gh-pages to v6 (#70) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency leaflet to v1.9.4 (#62) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency dts-bundle-generator to v8.1.2 (#73) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @next/bundle-analyzer to v14 (#74) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @testing-library/react to v14.1.0 (#72) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @types/lodash.throttle to v4.1.9 (#71) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Dependencies update, exposed new APIs (#77) * New build system, updating ogma and react * Exposed two more layer APIs, fixed the tests, moved to vite for the build * Removed typehead, fixed types * Scripts and version * gh-pages directory update * web -> demo * Trying to fix the coverage reports * Fixed the react 18 mode * Fixed the typings * added docs for new Layer and Overlay --------- Co-authored-by: Alexander Milevski <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Linkurious · Dec 4, 2023 · b2b8f76 · b2b8f76
1 parent 0dc16ae
commit b2b8f76
Show file tree

Hide file tree

Showing 55 changed files with 5,183 additions and 1,865 deletions.
diff --git a/.bumpversion.cfg b/.bumpversion.cfg
@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 4.3.3
+current_version = 4.6.0
 commit = False
 tag = False
 serialize =

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.16.1
+18.18.2
diff --git a/.version b/.version
@@ -1 +1 @@
-4.3.3
+4.6.0
diff --git a/README.md b/README.md
@@ -202,6 +202,8 @@ export default function App () {
   - [`<Popup />`](#popup-)
   - [`<Tooltip />`](#tooltip-)
   - [`<CanvasLayer />`](#canvaslayer-)
+  - [`<Layer />`](#layer-)
+  - [`<Overlay />`](#overlay-)
 - Transformations:
   - [`<NodeGrouping />`](#nodegrouping-)
   - [`<EdgeGrouping />`](#edgegrouping-)
@@ -359,6 +361,49 @@ Custom canvas layer.
 </Ogma>
 ```
 
+### `<Layer />`
+
+Generic DOM layer.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `children`         | `React.ReactNode`  | `null`| The children of the layer |
+#### Example
+
+```tsx
+<Ogma>
+  <Layer>
+    <span>Layer content here!</span>
+  </Layer>
+</Ogma>
+```
+
+### `<Overlay />`
+
+Generic Overlay layer.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `children`         | `React.ReactNode`  | `null`| The children of the layer |
+| `className`         | `string`  | `null`| Classname for the Overlay |
+| `scaled`         | `boolean`  | `true`| Wether the Overlay is scaled on zoom or not |
+| `position`  | `Point \| (ogma: Ogma) => Point` |  | Position of the Overlay             |
+| `size?`     | `{ width: number  \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | Size of the Overlay |
+
+#### Example
+
+```tsx
+<Ogma>
+  <Overlay position={{x: 0, y: 0}} >
+    <span>Layer content here!</span>
+  </Overlay>
+</Ogma>
+```
+
 ## Transformations
 
 All transformations have callback props, making it easy to react to events related to transformations.

diff --git a/web/.gitignore → demo/.gitignore b/web/.gitignore → demo/.gitignore
diff --git a/web/data.json → demo/data.json b/web/data.json → demo/data.json
diff --git a/web/index.html → demo/index.html b/web/index.html → demo/index.html
@@ -1,14 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <meta charset="utf-8" />
-  <title>React Ogma; component</title>
-  <link href="index-bundle.css" rel="stylesheet" />
+  <title>React Ogma component</title>
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"
   />
 </head>
 <body>
   <div id="root"></div>
-  <script src="index-bundle.js" type="module"></script>
+  <script src="index.tsx" type="module"></script>
 </body>
diff --git a/web/index.tsx → demo/index.tsx b/web/index.tsx → demo/index.tsx
@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./src/index.css";
 import App from "./src/App";
 import { GeistProvider, CssBaseline } from "@geist-ui/core";
 
-ReactDOM.render(
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+
+root.render(
   <React.StrictMode>
     <GeistProvider>
       <CssBaseline />
       <App />
     </GeistProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
diff --git a/web/logo.svg → demo/logo.svg b/web/logo.svg → demo/logo.svg
diff --git a/web/src/App.tsx → demo/src/App.tsx b/web/src/App.tsx → demo/src/App.tsx
@@ -3,9 +3,9 @@ import OgmaLib, {
   Node,
   Point,
   RawGraph,
-  Transformation,
+  NodeGrouping as NodeGroupingTransformation,
 } from "@linkurious/ogma";
-import { useEffect, useState, createRef } from "react";
+import { useEffect, useState, createRef, useCallback } from "react";
 // loading indicator
 import { Loading } from "@geist-ui/core";
 // for geo mode
@@ -19,7 +19,7 @@ import {
   NodeGrouping,
   Popup,
   Geo,
-  NodeGroupingProps
+  NodeGroupingProps,
 } from "../../src";
 
 // cusotm components:
@@ -29,11 +29,16 @@ import { LayoutService } from "./components/Layout";
 import { GraphOutlines } from "./components/GraphOutlines";
 // control panel
 import { Controls } from "./components/Controls";
+import { MousePosition } from "./components/MousePosition";
 import { Logo } from "./components/Logo";
+import { UpdateGroupingButton } from "./components/UpdateGroupingButton";
 
 // to enable geo mode integration
 OgmaLib.libraries["leaflet"] = L;
 
+type ND = unknown;
+type ED = unknown;
+
 export default function App() {
   // graph state
   const [graph, setGraph] = useState<RawGraph>();
@@ -45,33 +50,40 @@ export default function App() {
 
   // ogma instance and grouping references
   const ref = createRef<OgmaLib>();
-  const groupingRef = createRef<Transformation>();
+  const groupingRef = createRef<NodeGroupingTransformation<ND, ED>>();
 
   // grouping and geo states
   const [nodeGrouping, setNodeGrouping] = useState(true);
   const [geoEnabled, setGeoEnabled] = useState(false);
   // styling states
   const [nodeSize, setNodeSize] = useState(5);
   const [edgeWidth, setEdgeWidth] = useState(0.25);
-  const [groupingOptions, setGroupingOptions] = useState<NodeGroupingProps<any, any>>({
+  const [groupingOptions, setGroupingOptions] = useState<
+    NodeGroupingProps<any, any>
+  >({
     groupIdFunction: (node) => {
       const categories = node.getData("categories");
+      if (!categories) return undefined;
       return categories[0] === "INVESTOR" ? "INVESTOR" : undefined;
     },
     nodeGenerator: (nodes) => {
       return { data: { multiplier: nodes.size } };
-    }
+    },
+    disabled: true,
   });
 
-
   // UI layers
   const [outlines, setOutlines] = useState(false);
   const [tooltipPositon, setTooltipPosition] = useState<Point>({
-    x: -1e5,
-    y: -1e5,
+    x: 0,
+    y: 0,
   });
   const [target, setTarget] = useState<Node | Edge | null>();
 
+  const requestSetTooltipPosition = useCallback((pos: Point) => {
+    requestAnimationFrame(() => setTooltipPosition(pos));
+  }, []);
+
   // load the graph
   useEffect(() => {
     setLoading(true);
@@ -83,16 +95,6 @@ export default function App() {
       });
   }, []);
 
-  function updateGrouping() {
-    setGroupingOptions({
-      ...groupingOptions,
-      groupIdFunction: (node) => {
-        const categories = node.getData("categories");
-        return categories[0] === "INVESTOR" ? "INVESTOR" : "OTHER";
-      }
-    })
-  }
-
   // nothing to render yet
   if (loading) return <Loading />;
 
@@ -112,14 +114,14 @@ export default function App() {
             })
             .on("mousemove", () => {
               const ptr = ogma.getPointerInformation();
-              setTooltipPosition(
-                ogma.view.screenToGraphCoordinates({ x: ptr.x, y: ptr.y })
+              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 })
+              ogma.view.locateGraph({ duration: 250, padding: 50 }),
             );
         }}
       >
@@ -136,6 +138,15 @@ export default function App() {
         {/* Layout */}
         <LayoutService />
 
+        {/* Grouping */}
+        <NodeGrouping
+          ref={groupingRef}
+          disabled={!nodeGrouping && !geoEnabled}
+          groupIdFunction={groupingOptions.groupIdFunction}
+          nodeGenerator={groupingOptions.nodeGenerator}
+          duration={500}
+        />
+
         {/* context-aware UI */}
         <Popup
           position={() => (clickedNode ? clickedNode.getPosition() : null)}
@@ -155,20 +166,17 @@ export default function App() {
         </Tooltip>
         <GraphOutlines visible={outlines} />
 
-        {/* Grouping */}
-        <NodeGrouping
-          ref={groupingRef}
-          disabled={!nodeGrouping && !geoEnabled}
-          groupIdFunction={groupingOptions.groupIdFunction}
-          nodeGenerator={groupingOptions.nodeGenerator}
-          duration={500}
-        />
         {/* Geo mode */}
         <Geo
           enabled={geoEnabled}
           longitudePath="properties.longitude"
           latitudePath="properties.latitude"
         />
+        <MousePosition />
+        <UpdateGroupingButton
+          options={groupingOptions}
+          update={(options) => setGroupingOptions(options)}
+        />
       </Ogma>
       <Controls
         toggleNodeGrouping={(value) => setNodeGrouping(value)}
@@ -180,8 +188,6 @@ export default function App() {
         geoEnabled={geoEnabled}
         setGeoEnabled={setGeoEnabled}
       />
-      <button id="button" onClick={updateGrouping}>update grouping</button>
-
     </div>
   );
 }
diff --git a/web/src/components/Controls.tsx → demo/src/components/Controls.tsx b/web/src/components/Controls.tsx → demo/src/components/Controls.tsx
diff --git a/web/src/components/GraphOutlines.tsx → demo/src/components/GraphOutlines.tsx b/web/src/components/GraphOutlines.tsx → demo/src/components/GraphOutlines.tsx
@@ -13,20 +13,21 @@ export function GraphOutlines({ visible = true }: GraphOutlinesProps) {
   const render = useCallback((ctx: CanvasRenderingContext2D) => {
     ctx.fillStyle = "rgba(157, 197, 187, 0.25)";
     ctx.beginPath();
-    ogma.getNodes().forEach((node) => {
-      const { x, y } = node.getPosition();
-      const radius = node.getAttribute("radius");
-      ctx.moveTo(x, y);
-      ctx.arc(x, y, (radius as number) * 6, 0, 2 * Math.PI);
-    });
+    ogma
+      .getNodes()
+      .getAttributes(["x", "y", "radius"])
+      .forEach(({ x, y, radius }) => {
+        ctx.moveTo(x, y);
+        ctx.arc(x, y, (radius as number) * 6, 0, 2 * Math.PI);
+      });
     ctx.fill();
   }, []);
 
   useEffect(() => {
     const refresh = () => {
       layerRef.current?.refresh();
     };
-    ogma.events.on("nodesDragProgress", refresh);
+    ogma.events.on(["nodesDragProgress", "idle"], refresh);
     return () => {
       ogma.events.off(refresh);
     };

diff --git a/web/src/components/Layout.tsx → demo/src/components/Layout.tsx b/web/src/components/Layout.tsx → demo/src/components/Layout.tsx
@@ -1,13 +1,16 @@
 import { NodeList } from "@linkurious/ogma";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useOgma } from "../../../src";
 
 // custom layout service based on the event of the nodes being added
 export function LayoutService() {
   const ogma = useOgma();
-  const onNodesAdded = (_evt: { nodes: NodeList }) => {
-    ogma.layouts.force({ locate: true });
-  };
+  const onNodesAdded = useCallback(
+    (_evt: { nodes: NodeList }) => {
+      ogma.events.once("idle", () => ogma.layouts.force({ locate: true }));
+    },
+    [ogma]
+  );
 
   useEffect(() => {
     // register listener

diff --git a/web/src/components/Logo.tsx → demo/src/components/Logo.tsx b/web/src/components/Logo.tsx → demo/src/components/Logo.tsx
diff --git a/demo/src/components/MousePosition.css b/demo/src/components/MousePosition.css
@@ -0,0 +1,8 @@
+.position-control__container {
+  position: absolute;
+  top: 15px;
+  left: 20em;
+  color: #888;
+  padding: 0.5em;
+  font-size: x-small;
+}
diff --git a/demo/src/components/MousePosition.tsx b/demo/src/components/MousePosition.tsx
@@ -0,0 +1,36 @@
+import { Point, Layer as OgmaLayer } from "@linkurious/ogma";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useOgma, Layer } from "../../../src";
+import "./MousePosition.css";
+
+export const MousePosition = () => {
+  const ogma = useOgma();
+  const [position, setPosition] = useState<Point>({ x: 0, y: 0 });
+  const layerRef = useRef<OgmaLayer>(null);
+
+  const requestSetPosition = useCallback(
+    (pos: Point) => {
+      requestAnimationFrame(() => setPosition(pos));
+    },
+    [setPosition]
+  );
+
+  useEffect(() => {
+    const listener = () => {
+      const { x, y } = ogma.getPointerInformation();
+      requestSetPosition({ x, y });
+    };
+    ogma.events.on("mousemove", listener);
+    return () => {
+      ogma.events.off(listener);
+    };
+  }, [ogma]);
+
+  return (
+    <Layer className="position-control" ref={layerRef}>
+      <div className="position-control__container">
+        {position.x},&nbsp;{position.y}
+      </div>
+    </Layer>
+  );
+};
diff --git a/web/src/components/ReactIcon.tsx → demo/src/components/ReactIcon.tsx b/web/src/components/ReactIcon.tsx → demo/src/components/ReactIcon.tsx