Skip to content

Commit

Permalink
Merge branch 'patternfly:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
wise-king-sullyman authored Dec 4, 2024
2 parents caf2804 + ccaeee0 commit c6fd12a
Show file tree
Hide file tree
Showing 25 changed files with 528 additions and 98 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
};

return (
<Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>
<Layer id={detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen) ? TOP_LAYER : DEFAULT_LAYER}>
<g ref={hoverRef}>
<TaskNode
element={element}
Expand Down
14 changes: 8 additions & 6 deletions packages/demo-app-ts/src/demos/stylesDemo/StyleNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
const data = element.getData();
const detailsLevel = element.getGraph().getDetailsLevel();
const [hover, hoverRef] = useHover();
const focused = hover || contextMenuOpen;

const passedData = React.useMemo(() => {
const newData = { ...data };
Expand All @@ -154,18 +155,19 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({

const LabelIcon = passedData.labelIcon;
return (
<Layer id={hover ? TOP_LAYER : DEFAULT_LAYER}>
<Layer id={focused ? TOP_LAYER : DEFAULT_LAYER}>
<g ref={hoverRef}>
<DefaultNode
element={element}
scaleLabel={detailsLevel !== ScaleDetailsLevel.low}
scaleNode={hover && detailsLevel === ScaleDetailsLevel.low}
scaleNode={focused && detailsLevel === ScaleDetailsLevel.low}
raiseLabelOnHover={false}
{...rest}
{...passedData}
dragging={dragging}
regrouping={regrouping}
showLabel={hover || (detailsLevel !== ScaleDetailsLevel.low && showLabel)}
showStatusBackground={!hover && detailsLevel === ScaleDetailsLevel.low}
showLabel={focused || (detailsLevel !== ScaleDetailsLevel.low && showLabel)}
showStatusBackground={!focused && detailsLevel === ScaleDetailsLevel.low}
showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && passedData.showStatusDecorator}
statusDecoratorTooltip={nodeElement.getNodeStatus()}
onContextMenu={data.showContextMenu ? onContextMenu : undefined}
Expand All @@ -174,11 +176,11 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
onHideCreateConnector={onHideCreateConnector}
labelIcon={LabelIcon && <LabelIcon noVerticalAlign />}
attachments={
(hover || detailsLevel === ScaleDetailsLevel.high) &&
(focused || detailsLevel === ScaleDetailsLevel.high) &&
renderDecorators(nodeElement, passedData, rest.getShapeDecoratorCenter)
}
>
{(hover || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(passedData, nodeElement)}
{(focused || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(passedData, nodeElement)}
</DefaultNode>
</g>
</Layer>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.area-drag-hint__hint-container {
justify-content: center;
display: flex;
pointer-events: none;
position: absolute;
top: var(--pf-t--global--spacer--sm);
left: 0;
right: 0;
z-index: 99;
}
.area-drag-hint__hint-background {
background-color: var(--pf-t--global--background--color--primary--default);
border: 1px solid var(--pf-t--global--border--color--nonstatus--gray--default);
border-radius: 8px;
padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
pointer-events: none;
}

.area-drag-hint {
align-items: center;
display: flex;
}
.area-drag-hint__icon {
color: var(--pf-t--global--icon--color--status--info--default);
}
.area-drag-hint__text {
margin-left: var(--pf-t--global--spacer--sm);
}
.area-drag-hint-shortcut__cell {
padding-left: var(--pf-t--global--spacer--sm);
}

.area-drag-hint-shortcut__command:not(:last-child):after {
content: ' + ';
}

.area-drag-hint-shortcut__kbd {
border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--nonstatus--gray--default);
border-radius: 3px;
color: var(--pf-t--global--text--color--subtle);
font-size: var(--pf-t--global--font--size--sm);
padding: 1px 3px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import * as React from 'react';
import { InfoCircleIcon, MouseIcon } from '@patternfly/react-icons';

import './AreaDragHint.css';

const AreaDragHint: React.FC = () => {
return (
<div className="area-drag-hint__hint-container">
<div className="area-drag-hint__hint-background">
<div className="area-drag-hint">
<InfoCircleIcon className="area-drag-hint__icon" />
<span className="area-drag-hint__text">
<table>
<tbody>
<tr>
<td className="area-drag-hint-shortcut__cell">
<span className="area-drag-hint-shortcut__command">
<kbd className="area-drag-hint-shortcut__kbd">Shift</kbd>
</span>
<span className="area-drag-hint-shortcut__command">
<kbd className="area-drag-hint-shortcut__kbd">
<MouseIcon /> Drag
</kbd>
</span>
</td>
<td className="area-drag-hint-shortcut__cell">Select nodes in area</td>
</tr>
<tr>
<td className="area-drag-hint-shortcut__cell">
<span className="area-drag-hint-shortcut__command">
<kbd className="area-drag-hint-shortcut__kbd">Ctrl</kbd>
</span>
<span className="area-drag-hint-shortcut__command">
<kbd className="area-drag-hint-shortcut__kbd">
<MouseIcon /> Drag
</kbd>
</span>
</td>
<td className="area-drag-hint-shortcut__cell">Zoom to selected area</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
</div>
);
};

export default AreaDragHint;
18 changes: 11 additions & 7 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,13 @@ const getShapeComponent = (shape: NodeShape): React.FunctionComponent<ShapeProps
};

const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
({ element, onContextMenu, dragging, onShowCreateConnector, onHideCreateConnector, ...rest }) => {
({ element, onContextMenu, dragging, contextMenuOpen, onShowCreateConnector, onHideCreateConnector, ...rest }) => {
const options = React.useContext(DemoContext).nodeOptions;
const nodeElement = element as Node;
const data = element.getData() as GeneratedNodeData;
const detailsLevel = element.getGraph().getDetailsLevel();
const [hover, hoverRef] = useHover();
const focused = hover || contextMenuOpen;

React.useEffect(() => {
if (detailsLevel === ScaleDetailsLevel.low) {
Expand All @@ -164,19 +165,22 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
const LabelIcon = data.index % 2 === 1 ? (SignOutAltIcon as any) : undefined;

return (
<Layer id={hover ? TOP_LAYER : DEFAULT_LAYER}>
<Layer id={focused ? TOP_LAYER : DEFAULT_LAYER}>
<g ref={hoverRef}>
<DefaultNode
element={element}
scaleLabel={detailsLevel !== ScaleDetailsLevel.low}
scaleNode={hover && detailsLevel === ScaleDetailsLevel.low}
scaleNode={focused && detailsLevel === ScaleDetailsLevel.low}
contextMenuOpen={contextMenuOpen}
{...rest}
dragging={dragging}
showLabel={hover || (detailsLevel !== ScaleDetailsLevel.low && options.labels)}
showStatusBackground={!hover && detailsLevel === ScaleDetailsLevel.low}
showLabel={focused || (detailsLevel !== ScaleDetailsLevel.low && options.labels)}
raiseLabelOnHover={false}
showStatusBackground={!focused && detailsLevel === ScaleDetailsLevel.low}
showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && options.showStatus}
statusDecoratorTooltip={nodeElement.getNodeStatus()}
onContextMenu={options.contextMenus ? onContextMenu : undefined}
hideContextMenuKebab={options.hideKebabMenu}
onShowCreateConnector={detailsLevel !== ScaleDetailsLevel.low ? onShowCreateConnector : undefined}
onHideCreateConnector={onHideCreateConnector}
labelIcon={options.icons && LabelIcon && <LabelIcon noVerticalAlign />}
Expand All @@ -186,12 +190,12 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
getCustomShape={options.showShapes ? () => getShapeComponent(data.shape) : undefined}
badge={options.badges ? data.objectType : undefined}
attachments={
(hover || detailsLevel === ScaleDetailsLevel.high) &&
(focused || detailsLevel === ScaleDetailsLevel.high) &&
options.showDecorators &&
renderDecorators(options, nodeElement, rest.getShapeDecoratorCenter)
}
>
{(hover || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(data, nodeElement)}
{(focused || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(data, nodeElement)}
</DefaultNode>
</g>
</Layer>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,17 @@ const OptionsContextBar: React.FC = observer(() => {
>
Context Menus
</SelectOption>
<SelectOption
hasCheckbox
value="Hide context kebab menu"
isSelected={options.nodeOptions.hideKebabMenu}
isDisabled={!options.nodeOptions.contextMenus}
onClick={() =>
options.setNodeOptions({ ...options.nodeOptions, hideKebabMenu: !options.nodeOptions.hideKebabMenu })
}
>
Hide kebab for context menu
</SelectOption>
<SelectOption
hasCheckbox
value="Rectangle Groups"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ import {
Visualization,
VisualizationProvider,
VisualizationSurface,
observer
observer,
GraphAreaSelectedEventListener,
GRAPH_AREA_SELECTED_EVENT,
GraphAreaDraggingEvent,
GRAPH_AREA_DRAGGING_EVENT
} from '@patternfly/react-topology';
import defaultLayoutFactory from '../../layouts/defaultLayoutFactory';
import defaultComponentFactory from '../../components/defaultComponentFactory';
Expand All @@ -23,6 +27,7 @@ import { DemoContext } from './DemoContext';
import demoComponentFactory from './demoComponentFactory';
import { graphPositionChangeListener, layoutEndListener } from './listeners';
import DemoControlBar from '../DemoControlBar';
import AreaDragHint from './AreaDragHint';

interface TopologyViewComponentProps {
useSidebar: boolean;
Expand All @@ -32,6 +37,7 @@ interface TopologyViewComponentProps {
const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = observer(
({ useSidebar, sideBarResizable = false }) => {
const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
const [showAreaDragHint, setShowAreaDragHint] = React.useState<boolean>(false);
const controller = useVisualizationController();
const options = React.useContext(DemoContext);

Expand Down Expand Up @@ -59,6 +65,31 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
setSelectedIds(ids);
});

useEventListener<GraphAreaSelectedEventListener>(
GRAPH_AREA_SELECTED_EVENT,
({ graph, modifier, startPoint, endPoint }) => {
if (modifier === 'ctrlKey') {
graph.zoomToSelection(startPoint, endPoint);
return;
}
if (modifier === 'shiftKey') {
const selections = graph.nodesInSelection(startPoint, endPoint);
setSelectedIds(
selections.reduce((acc, node) => {
if (!node.isGroup()) {
acc.push(node.getId());
}
return acc;
}, [])
);
}
}
);

useEventListener<GraphAreaDraggingEvent>(GRAPH_AREA_DRAGGING_EVENT, ({ isDragging }) => {
setShowAreaDragHint(isDragging);
});

React.useEffect(() => {
let resizeTimeout: NodeJS.Timeout;

Expand Down Expand Up @@ -111,6 +142,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
sideBarOpen={useSidebar && !!selectedIds?.length}
sideBarResizable={sideBarResizable}
>
{showAreaDragHint ? <AreaDragHint /> : null}
<VisualizationSurface state={{ selectedIds }} />
</TopologyView>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import {
ModelKind,
DragObjectWithType,
Node,
withPanZoom,
GraphComponent,
withPanZoom,
withAreaSelection,
withCreateConnector,
Graph,
isNode,
Expand Down Expand Up @@ -60,7 +61,9 @@ const demoComponentFactory: ComponentFactory = (
type: string
): React.ComponentType<{ element: GraphElement }> | undefined => {
if (kind === ModelKind.graph) {
return withDndDrop(graphDropTargetSpec([NODE_DRAG_TYPE]))(withPanZoom()(GraphComponent));
return withDndDrop(graphDropTargetSpec([NODE_DRAG_TYPE]))(
withPanZoom()(withAreaSelection(['ctrlKey', 'shiftKey'])(GraphComponent))
);
}
switch (type) {
case 'node':
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export interface GeneratorNodeOptions {
badges?: boolean;
icons?: boolean;
contextMenus?: boolean;
hideKebabMenu?: boolean;
hulledOutline?: boolean;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/module/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@patternfly/react-topology",
"version": "6.0.0-prerelease.0",
"version": "6.1.0-prerelease.2",
"description": "Provide patternfly components, styles, and utilities for displaying a topology view",
"main": "dist/js/index.js",
"module": "dist/esm/index.js",
Expand Down Expand Up @@ -73,4 +73,4 @@
"react-monaco-editor": "^0.51.0",
"monaco-editor": "^0.34.1"
}
}
}
1 change: 0 additions & 1 deletion packages/module/release.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ module.exports = {
branches: [
'do-not-delete',
{ name: 'main', channel: 'prerelease', prerelease: 'prerelease' },
{ name: 'v5', channel: 'prerelease-v5', range: '5.x' }
],
analyzeCommits: {
preset: 'angular'
Expand Down
1 change: 1 addition & 0 deletions packages/module/src/behavior/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from './useDndDrop';
export * from './useDndManager';
export * from './useDragNode';
export * from './usePanZoom';
export * from './useAreaSelection';
export * from './useReconnect';
export * from './useSelection';
export * from './usePolygonAnchor';
Expand Down
Loading

0 comments on commit c6fd12a

Please sign in to comment.