Merge pull request #179 from Linkurious/develop

v5.1.13

Author: Ebernn

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 5.1.11
+current_version = 5.1.12
 commit = False
 tag = False
 serialize =

.gitignore

@@ -2,3 +2,9 @@ node_modules
 dist
 reports
 web/index-bundle.*
+
+# Playwright
+/test-results/
+playwright-report
+blob-report/
+playwright/.cache/

.nvmrc

@@ -1 +1 @@
-20.18.3
+22.17.1

.version

@@ -1 +1 @@
-5.1.11
+5.1.12

README.md

@@ -17,7 +17,6 @@ import {
   EdgeStyle,
   StyleClass,
   NodeGrouping,
-  Popup,
   Geo,
   NodeGroupingProps,
   useEvent,
@@ -45,10 +44,6 @@ export default function App() {
   const [graph, setGraph] = useState<RawGraph>();
   const [loading, setLoading] = useState(true);
 
-  // UI states
-  const [popupOpen, setPopupOpen] = useState(false);
-  const [clickedNode, setClickedNode] = useState<OgmaNode>();
-
   // ogma instance and grouping references
   const ogmaInstanceRef = createRef<OgmaLib>();
   const groupingRef = createRef<NodeGroupingTransformation<ND, ED>>();
@@ -75,12 +70,6 @@ export default function App() {
   // UI layers
   const [outlines, setOutlines] = useState(false);
 
-  const popupPosition = useCallback(
-    () => (clickedNode ? clickedNode.getPosition() : null),
-    [clickedNode]
-  );
-  const onPopupClose = useCallback(() => setPopupOpen(false), []);
-
   // load the graph
   useEffect(() => {
     setLoading(true);
@@ -92,20 +81,14 @@ export default function App() {
       });
   }, []);
 
-  const onClick = useEvent("click", ({ target }) => {
-    if (target && target.isNode) {
-      setClickedNode(target);
-      setPopupOpen(true);
-    }
-  });
-
   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;
+    window.ogma = instance;
   }, []);
 
   const addNode = useCallback(() => {
@@ -140,7 +123,6 @@ export default function App() {
       <Ogma
         ref={ogmaInstanceRef}
         graph={graph}
-        onClick={onClick}
         onAddNodes={onAddNodes}
         onReady={onReady}
         theme={morningBreeze as Theme<ND, ED>}
@@ -194,16 +176,6 @@ export default function App() {
           nodeGenerator={groupingOptions.nodeGenerator}
         />
 
-        {/* context-aware UI */}
-        <Popup
-          position={popupPosition}
-          onClose={onPopupClose}
-          isOpen={!!clickedNode && popupOpen}
-        >
-          {!!clickedNode && (
-            <div className="content">{`Node ${clickedNode.getId()}:`}</div>
-          )}
-        </Popup>
         <Tooltip
           eventName="nodeRightclick"
           placement="right"

demo/src/App.tsx

@@ -0,0 +1,31 @@
+.control-buttons > button {
+  position: absolute;
+  z-index: 1000;
+  top: 15px;
+  right: 15px;
+  padding: 3px 7px 0px 7px;
+}
+
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  height: calc(100% - 40px);
+  justify-content: space-between;
+}
+
+.link-button {
+  width: fit-content;
+  text-align: left;
+  color: #38f;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+h2 {
+  margin-bottom: 0;
+}
+
+h3 {
+  margin-top: 0;
+}

demo/src/components/Controls.css

@@ -3,6 +3,7 @@ import { Drawer } from "./Drawer";
 import { Toggle } from "./Toggle";
 import { Slider } from "./Slider";
 import { Menu as MenuIcon } from "react-feather";
+import "./Controls.css";
 
 interface ControlsProps {
   toggleNodeGrouping: (value: boolean) => void;

demo/src/components/Controls.tsx

@@ -14,10 +14,6 @@
   transform: translateX(0);
 }
 
-.drawer-content {
-  padding: 20px;
-}
-
 .close-button {
   position: absolute;
   top: 10px;

demo/src/components/Drawer.css

@@ -48,9 +48,16 @@ code {
   left: 15px;
   z-index: 401;
   display: flex;
+  gap: 5px;
+  align-items: center;
   backdrop-filter: blur(5px);
 }
 
+.gh-link > div {
+  display: flex;
+  align-items: center;
+}
+
 .ogma-tooltip {
   background-color: black;
   color: white;