v4.6.1 (#81)

v4.6.1

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 4.6.0
+current_version = 4.6.1
 commit = False
 tag = False
 serialize =

.version

@@ -1 +1 @@
-4.6.0
+4.6.1

README.md

@@ -1,6 +1,6 @@
 # `@linkurious/ogma-react`
 
-![logo](/web/logo.svg)
+![logo](/demo/logo.svg)
 
 Wrapper library for [`@linkurious/ogma`](https://ogma.linkurio.us) to use with [React](https://reactjs.org).
 
@@ -363,7 +363,7 @@ Custom canvas layer.
 
 ### `<Layer />`
 
-Generic DOM layer.
+Generic DOM layer, see [`ogma.layers.addLayer`](https://doc.linkurious.com/ogma/latest/api.html#Ogma-layers-addLayer).
 
 #### Props
 
@@ -382,7 +382,7 @@ Generic DOM layer.
 
 ### `<Overlay />`
 
-Generic Overlay layer.
+Generic Overlay layer, see [`ogma.layers.addOverlay`](https://doc.linkurious.com/ogma/latest/api.html#Ogma-layers-addOverlay).
 
 #### Props
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-react",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "A light adaptation of Ogma for React application",
   "keywords": [
     "ogma",
@@ -17,7 +17,8 @@
   "exports": {
     "import": "./dist/ogma-react.mjs",
     "require": "./dist/ogma-react.js",
-    "default": "./dist/ogma-react.mjs"
+    "default": "./dist/ogma-react.mjs",
+    "types": "./dist/index.d.ts"
   },
   "files": [
     "dist/*.d.ts",
@@ -48,8 +49,7 @@
   "peerDependencies": {
     "@linkurious/ogma": "^4.5.1",
     "react": "^18.0.8",
-    "react-dom": "^18.0.8",
-    "typescript": "^4.8.4"
+    "react-dom": "^18.0.8"
   },
   "devDependencies": {
     "@geist-ui/core": "^2.3.8",
@@ -75,7 +75,7 @@
     "leaflet": "^1.8.0",
     "prettier": "^3.0.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.3.2",
     "vite": "latest",
     "vitest": "latest"
   },

src/overlay/canvas.tsx

@@ -9,10 +9,15 @@ import { CanvasLayer as OgmaCanvasLayer } from "@linkurious/ogma";
 import { useOgma } from "../context";
 
 interface CanvasLayerProps {
+  /** Rendering function */
   render: (ctx: CanvasRenderingContext2D) => void;
+  /** Whether or not the layer should be moved with the graph */
   isStatic?: boolean;
+  /** Avoid redraw */
   noClear?: boolean;
+  /** Layer index */
   index?: number;
+  /** Layer visibility */
   visible?: boolean;
 }
 

src/overlay/layer.tsx

@@ -12,7 +12,9 @@ import { useOgma } from "../context";
 
 export interface LayerProps {
   children?: ReactNode;
+  /** Overlay container className */
   className?: string;
+  /** Layer index */
   index?: number;
 }
 
@@ -45,5 +47,5 @@ export const Layer = forwardRef(
     if (!layer) return null;
 
     return createPortal(children, layer.element);
-  },
+  }
 );

src/overlay/overlay.tsx

@@ -17,10 +17,14 @@ import { getPosition } from "./utils";
 import { createPortal } from "react-dom";
 
 interface PopupProps {
+  /** Overlay position */
   position: Point | ((ogma: OgmaLib) => Point | null);
+  /** Overlay size */
   size?: Size;
   children?: ReactNode;
+  /** Overlay container className */
   className?: string;
+  /** Whether the overlay should be scaled with the graph */
   scaled?: boolean;
 }
 
@@ -30,7 +34,7 @@ const offScreenPos: Point = { x: -9999, y: -9999 };
 export const Overlay = forwardRef(
   (
     { position, children, className = "", size, scaled }: PopupProps,
-    ref?: Ref<OverlayLayer>,
+    ref?: Ref<OverlayLayer>
   ) => {
     const ogma = useOgma();
     const [layer, setLayer] = useState<OverlayLayer | null>(null);
@@ -73,5 +77,5 @@ export const Overlay = forwardRef(
     if (!layer) return null;
 
     return createPortal(children, layer.element);
-  },
+  }
 );

src/overlay/popup.tsx

@@ -25,18 +25,30 @@ import { Placement } from "./types";
 import { createPortal } from "react-dom";
 
 interface PopupProps {
+  /** Overlay content */
   content?: string | ReactElement;
+  /** Overlay position */
   position: Point | ((ogma: OgmaLib) => Point | null);
+  /** Overlay size */
   size?: Size;
+  /** Open state, whether or not the overlay should be shown  */
   isOpen?: boolean;
+
+  /** Close button */
   closeButton?: ReactNode | null;
+  /** Close callback */
   onClose?: () => void;
+  /** Overlay placement relative to the position */
   placement?: Placement;
+  /** Close on Escape key */
   closeOnEsc?: boolean;
-
+  /** Overlay container className */
   popupClass?: string;
+  /** Overlay content className */
   contentClass?: string;
+  /** Overlay body className */
   popupBodyClass?: string;
+  /** Close button className */
   closeButtonClass?: string;
 
   children?: ReactNode;
@@ -66,7 +78,7 @@ const PopupComponent = (
     size,
     closeOnEsc = true,
   }: PopupProps,
-  ref?: Ref<OverlayLayer>,
+  ref?: Ref<OverlayLayer>
 ) => {
   const ogma = useOgma();
   const [layer, setLayer] = useState<OverlayLayer | null>(null);
@@ -92,7 +104,7 @@ const PopupComponent = (
 
     const onClick = (evt: MouseEvent) => {
       const closeButton = popupLayer.element.querySelector(
-        `.${closeButtonClass}`,
+        `.${closeButtonClass}`
       ) as Element;
       if (evt.target && closeButton.contains(evt.target as Node)) {
         evt.stopPropagation();
@@ -141,7 +153,7 @@ const PopupComponent = (
 
   return createPortal(
     children,
-    layer!.element.querySelector(`.${popupBodyClass}`)!,
+    layer!.element.querySelector(`.${popupBodyClass}`)!
   );
 };
 

src/overlay/tooltip.tsx

@@ -24,12 +24,19 @@ import {
 type PositionGetter = (ogma: OgmaLib) => Point | null;
 
 interface TooltipProps {
+  /** Tooltip id */
   id?: string;
+  /** Tooltip position */
   position: Point | PositionGetter;
+  /** Tooltip content */
   content?: Content;
+  /** Tooltip size */
   size?: Size;
+  /** Tooltip visibility */
   visible?: boolean;
+  /** Tooltip placement relative to the position */
   placement?: Placement;
+  /** Tooltip container className */
   tooltipClass?: string;
 
   children?: ReactNode;
@@ -45,7 +52,7 @@ const TooltipComponent = (
     content,
     visible = true,
   }: TooltipProps,
-  ref?: Ref<OverlayLayer>,
+  ref?: Ref<OverlayLayer>
 ) => {
   const ogma = useOgma();
   const [layer, setLayer] = useState<OverlayLayer>();
@@ -97,7 +104,7 @@ const TooltipComponent = (
       if (layer && coords && dimensions) {
         layer.element.className = getContainerClass(
           tooltipClass,
-          getAdjustedPlacement(coords, placement, dimensions, ogma),
+          getAdjustedPlacement(coords, placement, dimensions, ogma)
         );
         layer.setPosition(coords); // throttledSetPosition(coords);
       }

src/transformations/edgeFilter.tsx

@@ -19,7 +19,7 @@ export interface EdgeFilterProps<ED, ND>
 
 function EdgeFilterComponent<ND = any, ED = any>(
   props: EdgeFilterProps<ED, ND>,
-  ref?: Ref<EdgeFilterTransformation<ED, ND>>,
+  ref?: Ref<EdgeFilterTransformation<ED, ND>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =