Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(update): cherry pick missing v5 updates onto main #262

Merged
merged 3 commits into from
Dec 4, 2024
Merged

feat(update): cherry pick missing v5 updates onto main #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9bb663f
fix(context menu): Fix for context menu use when zoomed out (#249)
jeff-phillips-18 Nov 11, 2024
159a0c1
feat(graph): Add selection based zoom (#248)
jeff-phillips-18 Nov 13, 2024
92c5b23
feat(context menu): add prop to hide the context menu kebab (#250)
jenny-s51 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/demo-app-ts/src/demos/pipelinesDemo/DemoTaskNode.tsx
View file
Open in desktop
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
View file
Open in desktop
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
43 changes: 43 additions & 0 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.css
View file
Open in desktop
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;
}
50 changes: 50 additions & 0 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/AreaDragHint.tsx
View file
Open in desktop
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
View file
Open in desktop
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
11 changes: 11 additions & 0 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
View file
Open in desktop
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
34 changes: 33 additions & 1 deletion packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx
View file
Open in desktop
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
7 changes: 5 additions & 2 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/demo-app-ts/src/demos/topologyPackageDemo/generator.ts
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/module/src/behavior/index.ts
View file
Open in desktop
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
Loading