@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
127 lines • 10.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { IconButton, Menu, Tooltip, Typography, } from '@neo4j-ndl/react';
import { ArrowDownTrayIconOutline, BoxSelectIcon, FitToScreenIcon, LassoIcon, MagnifyingGlassMinusIconOutline, MagnifyingGlassPlusIconOutline, SelectIcon, SidebarLineRightIcon, } from '@neo4j-ndl/react/icons';
import { default as cx } from 'classnames';
import { useCallback, useEffect, useRef, useState, } from 'react';
import { useGraphVisualizationContext, } from './graph-visualization-context';
export const GroupButton = (props) => {
const { isActive, ariaLabel, isDisabled, tipContent, onClick, onMouseDown, tooltipPlacement, className, style, htmlAttributes, children, } = props;
return (_jsxs(Tooltip, { type: "simple", placement: tooltipPlacement, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx(IconButton, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tipContent, size: "small", className: className, style: style, isClean: true, isGrouped: true, isActive: isActive, isDisabled: isDisabled, onClick: onClick, htmlAttributes: Object.assign({ onMouseDown }, htmlAttributes), children: children }) }), _jsx(Tooltip.Content, { children: tipContent })] }));
};
const targetIsTextInput = (target) => {
if (!(target instanceof HTMLElement)) {
return false;
}
return (target.isContentEditable || ['INPUT', 'TEXTAREA'].includes(target.tagName));
};
const isEditingText = (e) => {
return targetIsTextInput(e.target);
};
const GESTURE_KEYS = {
box: 'B',
lasso: 'L',
single: 'S',
};
const useRegisterKeyboardGestureSwitcher = (gesture) => {
const { setGesture } = useGraphVisualizationContext();
const handleKeyDown = useCallback((evt) => {
if (!isEditingText(evt) && setGesture !== undefined) {
const upperKey = evt.key.toUpperCase();
if (upperKey === GESTURE_KEYS[gesture]) {
setGesture(gesture);
}
}
}, [gesture, setGesture]);
useEffect(() => {
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [handleKeyDown]);
};
const NON_BREAKING_SPACE = '\u00A0';
export const SingleSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { gesture, setGesture, interactionMode } = useGraphVisualizationContext();
useRegisterKeyboardGestureSwitcher('single');
return (_jsx(GroupButton, { isActive: gesture === 'single', isDisabled: interactionMode !== 'select', ariaLabel: "Individual Select Button", tipContent: `Individual Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.single}`, onClick: () => {
setGesture === null || setGesture === void 0 ? void 0 : setGesture('single');
}, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'right', htmlAttributes: Object.assign({ 'data-testid': 'gesture-individual-select' }, htmlAttributes), className: className, style: style, children: _jsx(SelectIcon, { "aria-label": "Individual Select" }) }));
};
export const BoxSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { gesture, setGesture, interactionMode } = useGraphVisualizationContext();
useRegisterKeyboardGestureSwitcher('box');
return (_jsx(GroupButton, { isDisabled: interactionMode !== 'select' || setGesture === undefined, isActive: gesture === 'box', ariaLabel: "Box Select Button", tipContent: `Box Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.box}`, onClick: () => {
setGesture === null || setGesture === void 0 ? void 0 : setGesture('box');
}, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'right', htmlAttributes: Object.assign({ 'data-testid': 'gesture-box-select' }, htmlAttributes), className: className, style: style, children: _jsx(BoxSelectIcon, { "aria-label": "Box select" }) }));
};
export const LassoSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { gesture, setGesture, interactionMode } = useGraphVisualizationContext();
useRegisterKeyboardGestureSwitcher('lasso');
return (_jsx(GroupButton, { isDisabled: interactionMode !== 'select' || setGesture === undefined, isActive: gesture === 'lasso', ariaLabel: "Lasso Select Button", tipContent: `Lasso Select ${NON_BREAKING_SPACE} ${GESTURE_KEYS.lasso}`, onClick: () => {
setGesture === null || setGesture === void 0 ? void 0 : setGesture('lasso');
}, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'right', htmlAttributes: Object.assign({ 'data-testid': 'gesture-lasso-select' }, htmlAttributes), className: className, style: style, children: _jsx(LassoIcon, { "aria-label": "Lasso select" }) }));
};
export const ZoomInButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = useGraphVisualizationContext();
const handleZoomIn = useCallback(() => {
var _a, _b;
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getScale()) * 1.3);
}, [nvlInstance]);
return (_jsx(GroupButton, { onClick: handleZoomIn, tipContent: "Zoom in", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: _jsx(MagnifyingGlassPlusIconOutline, {}) }));
};
export const ZoomOutButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = useGraphVisualizationContext();
const handleZoomOut = useCallback(() => {
var _a, _b;
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.setZoom(((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getScale()) * 0.7);
}, [nvlInstance]);
return (_jsx(GroupButton, { onClick: handleZoomOut, tipContent: "Zoom out", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: _jsx(MagnifyingGlassMinusIconOutline, {}) }));
};
export const ZoomToFitButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = useGraphVisualizationContext();
const handleZoomToFit = useCallback(() => {
var _a, _b;
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.fit((_b = nvlInstance.current) === null || _b === void 0 ? void 0 : _b.getNodes().map((node) => node.id));
}, [nvlInstance]);
return (_jsx(GroupButton, { onClick: handleZoomToFit, tipContent: "Zoom to fit", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: _jsx(FitToScreenIcon, {}) }));
};
export const ToggleSidePanelButton = ({ className, htmlAttributes, style, tooltipPlacement, }) => {
const { sidepanel } = useGraphVisualizationContext();
if (!sidepanel) {
throw new Error('Using the ToggleSidePanelButton requires having a sidepanel');
}
const { isSidePanelOpen, setIsSidePanelOpen } = sidepanel;
return (_jsxs(Tooltip, { placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', type: "simple", children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx(IconButton, { size: "small", onClick: () => setIsSidePanelOpen === null || setIsSidePanelOpen === void 0 ? void 0 : setIsSidePanelOpen(!isSidePanelOpen), isFloating: true, ariaLabel: "Toggle node properties panel", className: cx('ndl-graph-visualization-toggle-sidepanel', className), style: style, htmlAttributes: Object.assign({ 'aria-pressed': isSidePanelOpen }, htmlAttributes), children: _jsx(SidebarLineRightIcon, { className: "ndl-graph-visualization-toggle-icon" }) }) }), _jsx(Tooltip.Content, { children: _jsx(Typography, { variant: "body-small", children: isSidePanelOpen ? 'Close panel' : 'Open panel' }) })] }));
};
export const DownloadButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = useGraphVisualizationContext();
const [isDownloadMenuOpen, setOpen] = useState(false);
const closeFileMenu = () => setOpen(false);
const downloadButtonRef = useRef(null);
return (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { type: "simple", placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx(IconButton, { ref: downloadButtonRef, size: "small", isFloating: true, onClick: () => setOpen((o) => !o), ariaLabel: "Download", className: className, style: style, htmlAttributes: htmlAttributes, children: _jsx(ArrowDownTrayIconOutline, {}) }) }), _jsx(Tooltip.Content, { children: _jsx(Typography, { variant: "body-small", children: " Download " }) })] }), _jsx(Menu, { isOpen: isDownloadMenuOpen, onClose: closeFileMenu, anchorRef: downloadButtonRef, children: _jsx(Menu.Items, { children: _jsx(Menu.Item, { title: "Download as PNG", onClick: () => {
var _a;
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.saveToFile({});
closeFileMenu();
} }) }) })] }));
};
//# sourceMappingURL=graph-visualization-buttons.js.map