react-phylogeny-tree-gl/lib/hooks/useTreeWithMenu.js

React integration of phylocanvas.gl. Component and hook for phylogenetic tree visualistion.

import React from 'react';
import { usePhylogenyTree } from '../hooks/usePhylogenyTree';
import { createContextMenuPlugin } from '../plugins/contextMenu/createContextMenuPlugin';
const initialState = {
    possition: undefined,
    visible: false,
    node: undefined,
};
export function usePhylogenyTreeWithMenu(initProps, controlledProps, plugins, hooks) {
    const [menuState, dispatch] = React.useReducer(reducer, initialState);
    const phyloDiv = React.useRef(null);
    const pluginsWithMenu = React.useMemo(() => {
        if (plugins && (initProps === null || initProps === void 0 ? void 0 : initProps.interactive)) {
            return [
                ...plugins,
                createContextMenuPlugin((updater) => {
                    dispatch({ updater });
                }),
            ];
        }
        return plugins !== null && plugins !== void 0 ? plugins : [];
    }, [plugins, initProps === null || initProps === void 0 ? void 0 : initProps.interactive]);
    const { handleZoomIn, handleZoomOut, getTree } = usePhylogenyTree(phyloDiv, initProps, controlledProps, pluginsWithMenu, hooks);
    const closeMenu = React.useCallback(() => {
        dispatch({ updater: initialState });
    }, [dispatch]);
    return {
        phyloDiv,
        handleZoomIn,
        handleZoomOut,
        getTree,
        menuState,
        onClose: closeMenu,
    };
}
function reducer(state, action) {
    return Object.assign(Object.assign({}, state), action.updater);
}
//# sourceMappingURL=useTreeWithMenu.js.map