@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
142 lines • 12.3 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DownloadButton = exports.ToggleSidePanelButton = exports.ZoomToFitButton = exports.ZoomOutButton = exports.ZoomInButton = exports.LassoSelectButton = exports.BoxSelectButton = exports.SingleSelectButton = exports.GroupButton = void 0;
const jsx_runtime_1 = require("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/>.
*/
const react_1 = require("@neo4j-ndl/react");
const icons_1 = require("@neo4j-ndl/react/icons");
const classnames_1 = __importDefault(require("classnames"));
const react_2 = require("react");
const graph_visualization_context_1 = require("./graph-visualization-context");
const GroupButton = (props) => {
const { isActive, ariaLabel, isDisabled, tipContent, onClick, onMouseDown, tooltipPlacement, className, style, htmlAttributes, children, } = props;
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", placement: tooltipPlacement, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.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 }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: tipContent })] }));
};
exports.GroupButton = GroupButton;
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 } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
const handleKeyDown = (0, react_2.useCallback)((evt) => {
if (!isEditingText(evt) && setGesture !== undefined) {
const upperKey = evt.key.toUpperCase();
if (upperKey === GESTURE_KEYS[gesture]) {
setGesture(gesture);
}
}
}, [gesture, setGesture]);
(0, react_2.useEffect)(() => {
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [handleKeyDown]);
};
const NON_BREAKING_SPACE = '\u00A0';
const SingleSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { gesture, setGesture, interactionMode } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
useRegisterKeyboardGestureSwitcher('single');
return ((0, jsx_runtime_1.jsx)(exports.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: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, { "aria-label": "Individual Select" }) }));
};
exports.SingleSelectButton = SingleSelectButton;
const BoxSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { gesture, setGesture, interactionMode } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
useRegisterKeyboardGestureSwitcher('box');
return ((0, jsx_runtime_1.jsx)(exports.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: (0, jsx_runtime_1.jsx)(icons_1.BoxSelectIcon, { "aria-label": "Box select" }) }));
};
exports.BoxSelectButton = BoxSelectButton;
const LassoSelectButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { gesture, setGesture, interactionMode } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
useRegisterKeyboardGestureSwitcher('lasso');
return ((0, jsx_runtime_1.jsx)(exports.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: (0, jsx_runtime_1.jsx)(icons_1.LassoIcon, { "aria-label": "Lasso select" }) }));
};
exports.LassoSelectButton = LassoSelectButton;
const ZoomInButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
const handleZoomIn = (0, react_2.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 ((0, jsx_runtime_1.jsx)(exports.GroupButton, { onClick: handleZoomIn, tipContent: "Zoom in", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassPlusIconOutline, {}) }));
};
exports.ZoomInButton = ZoomInButton;
const ZoomOutButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
const handleZoomOut = (0, react_2.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 ((0, jsx_runtime_1.jsx)(exports.GroupButton, { onClick: handleZoomOut, tipContent: "Zoom out", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassMinusIconOutline, {}) }));
};
exports.ZoomOutButton = ZoomOutButton;
const ZoomToFitButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
const handleZoomToFit = (0, react_2.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 ((0, jsx_runtime_1.jsx)(exports.GroupButton, { onClick: handleZoomToFit, tipContent: "Zoom to fit", className: className, style: style, htmlAttributes: htmlAttributes, tooltipPlacement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'left', children: (0, jsx_runtime_1.jsx)(icons_1.FitToScreenIcon, {}) }));
};
exports.ZoomToFitButton = ZoomToFitButton;
const ToggleSidePanelButton = ({ className, htmlAttributes, style, tooltipPlacement, }) => {
const { sidepanel } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
if (!sidepanel) {
throw new Error('Using the ToggleSidePanelButton requires having a sidepanel');
}
const { isSidePanelOpen, setIsSidePanelOpen } = sidepanel;
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', type: "simple", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { size: "small", onClick: () => setIsSidePanelOpen === null || setIsSidePanelOpen === void 0 ? void 0 : setIsSidePanelOpen(!isSidePanelOpen), isFloating: true, ariaLabel: "Toggle node properties panel", className: (0, classnames_1.default)('ndl-graph-visualization-toggle-sidepanel', className), style: style, htmlAttributes: Object.assign({ 'aria-pressed': isSidePanelOpen }, htmlAttributes), children: (0, jsx_runtime_1.jsx)(icons_1.SidebarLineRightIcon, { className: "ndl-graph-visualization-toggle-icon" }) }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: isSidePanelOpen ? 'Close panel' : 'Open panel' }) })] }));
};
exports.ToggleSidePanelButton = ToggleSidePanelButton;
const DownloadButton = ({ className, style, htmlAttributes, tooltipPlacement, }) => {
const { nvlInstance } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
const [isDownloadMenuOpen, setOpen] = (0, react_2.useState)(false);
const closeFileMenu = () => setOpen(false);
const downloadButtonRef = (0, react_2.useRef)(null);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'bottom', children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: downloadButtonRef, size: "small", isFloating: true, onClick: () => setOpen((o) => !o), ariaLabel: "Download", className: className, style: style, htmlAttributes: htmlAttributes, children: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownTrayIconOutline, {}) }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: " Download " }) })] }), (0, jsx_runtime_1.jsx)(react_1.Menu, { isOpen: isDownloadMenuOpen, onClose: closeFileMenu, anchorRef: downloadButtonRef, children: (0, jsx_runtime_1.jsx)(react_1.Menu.Items, { children: (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Download as PNG", onClick: () => {
var _a;
(_a = nvlInstance.current) === null || _a === void 0 ? void 0 : _a.saveToFile({});
closeFileMenu();
} }) }) })] }));
};
exports.DownloadButton = DownloadButton;
//# sourceMappingURL=graph-visualization-buttons.js.map