diff --git a/.bumpversion.cfg b/.bumpversion.cfg index c96a527..9fa1332 100644 --- a/.bumpversion.cfg +++ b/.bumpversion.cfg @@ -1,5 +1,5 @@ [bumpversion] -current_version = 4.6.0 +current_version = 4.6.1 commit = False tag = False serialize = diff --git a/.version b/.version index 28446a5..8ac28bf 100644 --- a/.version +++ b/.version @@ -1 +1 @@ -4.6.0 \ No newline at end of file +4.6.1 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/package-lock.json b/package-lock.json index daa703d..be8645d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@linkurious/ogma-react", - "version": "4.6.0", + "version": "4.6.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@linkurious/ogma-react", - "version": "4.6.0", + "version": "4.6.1", "license": "Apache-2.0", "dependencies": { "lodash.throttle": "^4.1.1" @@ -35,18 +35,14 @@ "leaflet": "^1.8.0", "prettier": "^3.0.0", "tslib": "^2.5.0", - "typescript": "^4.8.4", + "typescript": "^5.3.2", "vite": "latest", "vitest": "latest" }, - "engines": { - "node": ">=16.0.0" - }, "peerDependencies": { "@linkurious/ogma": "^4.5.1", "react": "^18.0.8", - "react-dom": "^18.0.8", - "typescript": "^4.8.4" + "react-dom": "^18.0.8" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -8479,9 +8475,9 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://nexus3.linkurious.net/repository/npm/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.3.2", + "resolved": "https://nexus3.linkurious.net/repository/npm/typescript/-/typescript-5.3.2.tgz", + "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", "dev": true, "license": "Apache-2.0", "bin": { @@ -8489,7 +8485,7 @@ "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/ufo": { @@ -14837,9 +14833,9 @@ } }, "typescript": { - "version": "4.9.5", - "resolved": "https://nexus3.linkurious.net/repository/npm/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.3.2", + "resolved": "https://nexus3.linkurious.net/repository/npm/typescript/-/typescript-5.3.2.tgz", + "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", "dev": true }, "ufo": { @@ -15274,4 +15270,4 @@ "dev": true } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index b59d1be..a45f749 100644 --- a/package.json +++ b/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" }, diff --git a/src/overlay/canvas.tsx b/src/overlay/canvas.tsx index c40f0d4..6b90aad 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; } 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] =