forked from patternfly/react-topology
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'patternfly:main' into main
- Loading branch information
Showing
24 changed files
with
1,112 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
import { | ||
createTopologyControlButtons, | ||
defaultControlButtonsOptions, | ||
TopologyControlBar, | ||
useVisualizationController, | ||
action, | ||
} from '@patternfly/react-topology'; | ||
|
||
const DemoControlBar: React.FC = () => { | ||
const controller = useVisualizationController(); | ||
|
||
return ( | ||
<TopologyControlBar | ||
controlButtons={createTopologyControlButtons({ | ||
...defaultControlButtonsOptions, | ||
zoomInCallback: action(() => { | ||
controller.getGraph().scaleBy(4 / 3); | ||
}), | ||
zoomOutCallback: action(() => { | ||
controller.getGraph().scaleBy(0.75); | ||
}), | ||
fitToScreenCallback: action(() => { | ||
controller.getGraph().fit(80); | ||
}), | ||
resetViewCallback: action(() => { | ||
controller.getGraph().reset(); | ||
controller.getGraph().layout(); | ||
}), | ||
legend: false | ||
})} | ||
/> | ||
); | ||
}; | ||
|
||
export default DemoControlBar; |
40 changes: 40 additions & 0 deletions
40
packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import * as React from 'react'; | ||
import { observer } from 'mobx-react'; | ||
import { | ||
AnchorEnd, | ||
DagreLayoutOptions, | ||
DefaultGroup, | ||
GraphElement, | ||
isNode, | ||
LabelPosition, | ||
Node, | ||
TOP_TO_BOTTOM, | ||
useAnchor, | ||
} from '@patternfly/react-topology'; | ||
import TaskGroupSourceAnchor from './TaskGroupSourceAnchor'; | ||
import TaskGroupTargetAnchor from './TaskGroupTargetAnchor'; | ||
|
||
interface DemoTaskNodeProps { | ||
element: GraphElement; | ||
} | ||
|
||
const DemoTaskGroup: React.FunctionComponent<DemoTaskNodeProps> = ({ element, ...rest }) => { | ||
const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM; | ||
|
||
useAnchor( | ||
React.useCallback((node: Node) =>new TaskGroupSourceAnchor(node, verticalLayout), [verticalLayout]), | ||
AnchorEnd.source | ||
); | ||
useAnchor( | ||
React.useCallback((node: Node) => new TaskGroupTargetAnchor(node, verticalLayout),[verticalLayout]), | ||
AnchorEnd.target | ||
); | ||
if (!isNode(element)) { | ||
return null; | ||
} | ||
return ( | ||
<DefaultGroup hulledOutline={false} labelPosition={verticalLayout ? LabelPosition.top : LabelPosition.bottom} element={element as Node} {...rest} /> | ||
); | ||
}; | ||
|
||
export default observer(DemoTaskGroup); |
40 changes: 40 additions & 0 deletions
40
packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import * as React from 'react'; | ||
import { observer } from 'mobx-react'; | ||
import { | ||
DEFAULT_LAYER, | ||
GraphElement, | ||
Layer, | ||
ScaleDetailsLevel, | ||
TaskNode, | ||
TOP_LAYER, | ||
useHover, | ||
WithContextMenuProps, | ||
WithSelectionProps | ||
} from '@patternfly/react-topology'; | ||
|
||
type DemoTaskNodeProps = { | ||
element: GraphElement; | ||
} & WithContextMenuProps & WithSelectionProps; | ||
|
||
const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({ element, ...rest }) => { | ||
const data = element.getData(); | ||
const [hover, hoverRef] = useHover(); | ||
const detailsLevel = element.getGraph().getDetailsLevel(); | ||
|
||
return ( | ||
<Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}> | ||
<g ref={hoverRef}> | ||
<TaskNode | ||
element={element} | ||
scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high} | ||
showStatusState | ||
status={data.status} | ||
hideDetailsAtMedium | ||
{...rest} | ||
/> | ||
</g> | ||
</Layer> | ||
); | ||
}; | ||
|
||
export default observer(DemoTaskNode); |
36 changes: 36 additions & 0 deletions
36
packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
import { Radio, Text, ToolbarItem } from '@patternfly/react-core'; | ||
import { observer } from '@patternfly/react-topology'; | ||
import { PipelineGroupsDemoContext } from './PipelineGroupsDemoContext'; | ||
|
||
const OptionsBar: React.FC = observer(() => { | ||
const pipelineOptions = React.useContext(PipelineGroupsDemoContext); | ||
|
||
return ( | ||
<> | ||
<ToolbarItem> | ||
<Text className="pf-u-mr-sm">Layout:</Text> | ||
</ToolbarItem> | ||
<ToolbarItem> | ||
<Radio | ||
id="horizontal-layout-radio" | ||
name="horizontalLayout" | ||
isChecked={!pipelineOptions.verticalLayout} | ||
onChange={() => pipelineOptions.setVerticalLayout(false)} | ||
label="Horizontal" | ||
/> | ||
</ToolbarItem> | ||
<ToolbarItem> | ||
<Radio | ||
id="vertical-layout-radio" | ||
name="verticalLayout" | ||
isChecked={pipelineOptions.verticalLayout} | ||
onChange={() => pipelineOptions.setVerticalLayout(true)} | ||
label="Vertical" | ||
/> | ||
</ToolbarItem> | ||
</> | ||
); | ||
}); | ||
|
||
export default OptionsBar; |
87 changes: 87 additions & 0 deletions
87
packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import React from 'react'; | ||
import { | ||
Graph, | ||
Layout, | ||
PipelineDagreGroupsLayout, | ||
Visualization, | ||
VisualizationProvider, | ||
useEventListener, | ||
SelectionEventListener, | ||
SELECTION_EVENT, | ||
TopologyView, | ||
VisualizationSurface, | ||
getEdgesFromNodes, | ||
DEFAULT_SPACER_NODE_TYPE, | ||
observer, | ||
NODE_SEPARATION_HORIZONTAL, | ||
NODE_SEPARATION_VERTICAL, | ||
LEFT_TO_RIGHT, | ||
TOP_TO_BOTTOM, | ||
PipelineNodeModel, | ||
useVisualizationController, | ||
} from '@patternfly/react-topology'; | ||
import pipelineGroupsComponentFactory from './pipelineGroupsComponentFactory'; | ||
import { createDemoPipelineGroupsNodes } from './createDemoPipelineGroupsNodes'; | ||
import { PipelineGroupsDemoContext, PipelineGroupsDemoModel } from './PipelineGroupsDemoContext'; | ||
import OptionsBar from './OptionsBar'; | ||
import DemoControlBar from '../DemoControlBar'; | ||
|
||
const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observer(({ nodes }) => { | ||
const controller = useVisualizationController(); | ||
const options = React.useContext(PipelineGroupsDemoContext); | ||
const [selectedIds, setSelectedIds] = React.useState<string[]>(); | ||
|
||
useEventListener<SelectionEventListener>(SELECTION_EVENT, ids => { | ||
setSelectedIds(ids); | ||
}); | ||
|
||
React.useEffect(() => { | ||
const edges = getEdgesFromNodes(nodes, DEFAULT_SPACER_NODE_TYPE, 'edge', 'edge'); | ||
controller.fromModel( | ||
{ | ||
graph: { | ||
id: 'g1', | ||
type: 'graph', | ||
x: 25, | ||
y: 25, | ||
layout: options.verticalLayout ? TOP_TO_BOTTOM : LEFT_TO_RIGHT | ||
}, | ||
nodes, | ||
edges, | ||
}, | ||
false | ||
); | ||
}, [controller, nodes, options.verticalLayout]); | ||
|
||
return ( | ||
<TopologyView contextToolbar={<OptionsBar />} controlBar={<DemoControlBar />}> | ||
<VisualizationSurface state={{ selectedIds }} /> | ||
</TopologyView> | ||
); | ||
}); | ||
|
||
TopologyPipelineGroups.displayName = 'TopologyPipelineLayout'; | ||
|
||
export const PipelineGroupsDemo = observer(() => { | ||
const controller = new Visualization(); | ||
controller.registerComponentFactory(pipelineGroupsComponentFactory); | ||
controller.registerLayoutFactory( | ||
(type: string, graph: Graph): Layout | undefined => | ||
new PipelineDagreGroupsLayout(graph, { | ||
nodesep: NODE_SEPARATION_HORIZONTAL, | ||
ranksep: NODE_SEPARATION_VERTICAL + 40, | ||
rankdir: type, | ||
ignoreGroups: true, | ||
}) | ||
); | ||
const nodes = createDemoPipelineGroupsNodes(); | ||
return ( | ||
<div className="pf-ri__topology-demo"> | ||
<VisualizationProvider controller={controller}> | ||
<PipelineGroupsDemoContext.Provider value={new PipelineGroupsDemoModel()}> | ||
<TopologyPipelineGroups nodes={nodes} /> | ||
</PipelineGroupsDemoContext.Provider> | ||
</VisualizationProvider> | ||
</div> | ||
); | ||
}); |
25 changes: 25 additions & 0 deletions
25
packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import * as React from 'react'; | ||
import { makeObservable, observable, action } from 'mobx'; | ||
|
||
export class PipelineGroupsDemoModel { | ||
protected verticalLayoutP: boolean = false; | ||
|
||
constructor() { | ||
makeObservable< | ||
PipelineGroupsDemoModel, | ||
| 'verticalLayoutP' | ||
>(this, { | ||
verticalLayoutP: observable, | ||
setVerticalLayout: action, | ||
}); | ||
} | ||
|
||
public get verticalLayout(): boolean { | ||
return this.verticalLayoutP; | ||
} | ||
public setVerticalLayout = (show: boolean): void => { | ||
this.verticalLayoutP = show; | ||
} | ||
} | ||
|
||
export const PipelineGroupsDemoContext = React.createContext<PipelineGroupsDemoModel>(new PipelineGroupsDemoModel()); |
22 changes: 22 additions & 0 deletions
22
packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupSourceAnchor.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { AbstractAnchor, Point, Node } from '@patternfly/react-topology'; | ||
|
||
export default class TaskGroupSourceAnchor<E extends Node = Node> extends AbstractAnchor { | ||
private vertical = false; | ||
|
||
constructor(owner: E, vertical: boolean = true) { | ||
super(owner); | ||
this.vertical = vertical; | ||
} | ||
|
||
getLocation(): Point { | ||
return this.getReferencePoint(); | ||
} | ||
|
||
getReferencePoint(): Point { | ||
const bounds = this.owner.getBounds(); | ||
if (this.vertical) { | ||
return new Point(bounds.x + bounds.width / 2, bounds.bottom()); | ||
} | ||
return new Point(bounds.right(), bounds.y + bounds.height / 2); | ||
} | ||
} |
Oops, something went wrong.