react-phylogeny-tree-gl/lib/components/treeWithMenu.js

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

import React from 'react';
import { usePhylogenyTreeWithMenu } from '../hooks/useTreeWithMenu';
import { ContextMenu } from './contextMenu';
import { RedoUndo } from './redoUndo';
import { ZoomButtons } from './zoom_buttons';
const handleContextMenu = (event) => {
    event.preventDefault();
};
const wrapperStyle = { width: '100%', height: '100%', position: 'absolute' };
function TreeWithMenu({ initProps, controlledProps, plugins, hooks, zoomButtons = true, zoomButtonsStyle, }, ref) {
    const { phyloDiv, handleZoomIn, handleZoomOut, menuState, getTree, onClose } = usePhylogenyTreeWithMenu(initProps, controlledProps, plugins, hooks);
    React.useImperativeHandle(ref, () => ({
        getTree,
    }));
    return (React.createElement("div", { style: wrapperStyle, onContextMenu: handleContextMenu },
        React.createElement("div", { ref: phyloDiv }),
        zoomButtons ? (React.createElement(ZoomButtons, { onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, style: zoomButtonsStyle })) : null,
        React.createElement(RedoUndo, { getTree: getTree }),
        (initProps === null || initProps === void 0 ? void 0 : initProps.interactive) && menuState.visible && getTree !== null ? (React.createElement(ContextMenu, { possition: menuState.possition, node: menuState.node, getTree: getTree, onCloseRequest: onClose })) : null));
}
export const PhylogenyTree = React.forwardRef(TreeWithMenu);
//# sourceMappingURL=treeWithMenu.js.map