From d1125ac4bc3145b4d082b413e3ff19995e4c3eb4 Mon Sep 17 00:00:00 2001 From: w8r Date: Mon, 4 Dec 2023 15:23:35 +0100 Subject: [PATCH] More docs, fixed the readme --- README.md | 6 +++--- src/overlay/canvas.tsx | 9 +++++++-- src/overlay/layer.tsx | 4 +++- src/overlay/overlay.tsx | 8 ++++++-- src/overlay/popup.tsx | 20 ++++++++++++++++---- src/overlay/tooltip.tsx | 11 +++++++++-- src/transformations/edgeFilter.tsx | 2 +- 7 files changed, 45 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index d727d7e..2b70500 100755 --- a/README.md +++ b/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. ### `` -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. ### `` -Generic Overlay layer. +Generic Overlay layer, see [`ogma.layers.addOverlay`](https://doc.linkurious.com/ogma/latest/api.html#Ogma-layers-addOverlay). #### Props diff --git a/src/overlay/canvas.tsx b/src/overlay/canvas.tsx index c40f0d4..48f3150 100644 --- a/src/overlay/canvas.tsx +++ b/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; } @@ -24,7 +29,7 @@ const CanvasLayerComponent = ( index, visible, }: CanvasLayerProps, - ref?: Ref, + ref?: Ref ) => { const ogma = useOgma(); const [layer, setLayer] = useState(null); @@ -35,7 +40,7 @@ const CanvasLayerComponent = ( const newLayer = ogma.layers.addCanvasLayer( render, { isStatic, noClear }, - index, + index ); setLayer(newLayer); diff --git a/src/overlay/layer.tsx b/src/overlay/layer.tsx index 411fe7e..b22ff85 100644 --- a/src/overlay/layer.tsx +++ b/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); - }, + } ); diff --git a/src/overlay/overlay.tsx b/src/overlay/overlay.tsx index adc8d55..c3be4c6 100644 --- a/src/overlay/overlay.tsx +++ b/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, + ref?: Ref ) => { const ogma = useOgma(); const [layer, setLayer] = useState(null); @@ -73,5 +77,5 @@ export const Overlay = forwardRef( if (!layer) return null; return createPortal(children, layer.element); - }, + } ); diff --git a/src/overlay/popup.tsx b/src/overlay/popup.tsx index bc6f955..b956d84 100644 --- a/src/overlay/popup.tsx +++ b/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, + ref?: Ref ) => { const ogma = useOgma(); const [layer, setLayer] = useState(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}`)! ); }; diff --git a/src/overlay/tooltip.tsx b/src/overlay/tooltip.tsx index 4241705..05bbb3d 100755 --- a/src/overlay/tooltip.tsx +++ b/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, + ref?: Ref ) => { const ogma = useOgma(); const [layer, setLayer] = useState(); @@ -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); } diff --git a/src/transformations/edgeFilter.tsx b/src/transformations/edgeFilter.tsx index 8bda936..1e0bf78 100644 --- a/src/transformations/edgeFilter.tsx +++ b/src/transformations/edgeFilter.tsx @@ -19,7 +19,7 @@ export interface EdgeFilterProps function EdgeFilterComponent( props: EdgeFilterProps, - ref?: Ref>, + ref?: Ref> ) { const ogma = useOgma(); const [transformation, setTransformation] =