Skip to content

Commit

Permalink
Improve topology readability (#78)
Browse files Browse the repository at this point in the history 
* refactor: improve readability topology

* feat: add grab cursor

* refactor: rebase
  • Loading branch information
@bartoval
bartoval authored Feb 12, 2023
1 parent 8cfa2a5 commit f841652
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 27 deletions.
1 change: 1 addition & 0 deletions src/core/components/Graph/Graph.enum.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ export enum GraphEvents {
IsDraggingNodeEnd = 'node:drag-end',
IsDraggingNodesEnd = 'nodes:drag-end',
NodeClick = 'node:click',
NodeGroupClick = 'node-group:click',
EdgeClick = 'edge:click',
}
59 changes: 32 additions & 27 deletions src/core/components/Graph/Graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ const GROUP_NODE_PATHS_CLASS_NAME = 'group-node-paths';
const EDGE_CLASS_NAME = 'edge';

const ZOOM_TEXT = 1.5;
const DEFAULT_COLOR = 'var(--pf-global--palette--black-300)';
const SELECTED_EDGE_COLOR = 'var(--pf-global--palette--blue-300)';
const SELECTED_TEXT_COLOR = 'var(--pf-global--palette--black-800)';

export default class Graph {
$root: HTMLElement;
Expand Down Expand Up @@ -377,7 +380,7 @@ export default class Graph {
.attr('stroke-opacity', 0)
.attr('id', ({ source, target }) => `edge-path${source.id}-${target.id}`)
.style('pointer-events', 'visibleStroke')
.attr('stroke', 'black')
.attr('stroke', DEFAULT_COLOR)
.attr('stroke-width', '30px')
.style('cursor', 'pointer')
.on('mouseover', (_, { source, target }) => {
Expand Down Expand Up @@ -410,7 +413,7 @@ export default class Graph {
text.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element.
.attr('xlink:href', ({ source, target }) => `#edge-path${source.id}-${target.id}`)
.style('text-anchor', 'middle')
.style('fill', 'var(--pf-global--palette--black-500)')
.style('fill', DEFAULT_COLOR)
.attr('startOffset', '50%')
.text(() => '');

Expand All @@ -422,17 +425,14 @@ export default class Graph {

this.getAllEdges()
.each((svgLink) => {
stopAnimateEdges(svgLink);
if (!isEdgeBetweenNodes(svgLink, nodeId)) {
stopAnimateEdges(svgLink);
}

if (!this.selectedNode && isEdgeBetweenNodes(svgLink, nodeId)) {
animateEdges(svgLink);
}
})
.style('opacity', ({ source, target }) =>
!nodeId || isEdgeBetweenNodes({ source, target }, nodeId)
? '1'
: OPACITY_NO_SELECTED_ITEM,
)
.style('stroke-dasharray', ({ type, source, target }) =>
type === 'dashed' || isEdgeBetweenNodes({ source, target }, nodeId) ? '8,8' : '0,0',
);
Expand All @@ -459,13 +459,22 @@ export default class Graph {
.attr('class', GROUP_NODE_PATHS_CLASS_NAME)
.attr('fill', (groupId) => colors[Number(groupId)])
.attr('opacity', OPACITY_NO_SELECTED_ITEM)
.style('cursor', 'pointer')
.style('cursor', 'grab')
.call(
drag<SVGPathElement, string>()
.on('start', this.groupDragStarted)
.on('drag', this.groupDragged)
.on('end', this.groupDragEnded),
);
)
.on('click', (_, nodeSelected) => {
this.EventEmitter.emit(GraphEvents.EdgeClick, [
{
type: 'click',
name: GraphEvents.NodeGroupClick,
data: nodeSelected,
},
]);
});
}
};

Expand Down Expand Up @@ -503,7 +512,7 @@ export default class Graph {
: FONT_SIZE_DEFAULT,
)
.attr('y', NODE_SIZE / 2 + FONT_SIZE_DEFAULT)
.style('fill', 'var(--pf-global--palette--black-500)')
.style('fill', DEFAULT_COLOR)
.text(({ name }) => name)
.attr('id', ({ id }) => `node-label-${id}`);

Expand All @@ -515,6 +524,10 @@ export default class Graph {
.style('cursor', 'pointer')
.attr('id', ({ id }) => `node-cover-${id}`);

svgNode.on('mousedown', (_, { id }) => {
select(`#node-cover-${id}`).style('cursor', 'grab');
});

svgNode.on('mouseover', (_, { id }) => {
this.nodeInitialized = id;
selectElementStyle(id);
Expand Down Expand Up @@ -561,7 +574,10 @@ export default class Graph {
drag<SVGGElement, GraphNode>()
.on('start', this.dragStarted)
.on('drag', this.dragged)
.on('end', this.dragEnded),
.on('end', (event, node) => {
this.dragEnded(event, node);
select(`#node-cover-${node.id}`).style('cursor', 'pointer');
}),
);
};

Expand Down Expand Up @@ -624,7 +640,7 @@ export default class Graph {

function animateEdges({ source, target }: { source: { id: string }; target: { id: string } }) {
select<SVGSVGElement, GraphEdgeModifiedByForce>(`#edge${source.id}-${target.id}`)
.style('stroke', 'var(--pf-global--palette--blue-400)')
.style('stroke', SELECTED_EDGE_COLOR)
.style('stroke-dasharray', '8, 8')
.transition()
.duration(750)
Expand All @@ -635,36 +651,25 @@ function animateEdges({ source, target }: { source: { id: string }; target: { id

function stopAnimateEdges({ source, target }: GraphEdgeModifiedByForce) {
select(`#edge${source.id}-${target.id}`)
.style('stroke', 'var(--pf-global--palette--black-500)')
.style('stroke', DEFAULT_COLOR)
.style('stroke-dasharray', '0, 0')
.style('opacity', '1')
.transition()
.on('end', null);
}

function selectElementStyle(id: string) {
select(`#node-cover-${id}`)
.transition()
.duration(500)
.style('fill', 'white')
.attr('opacity', 0.7);

select(`#node-label-${id}`)
.transition()
.duration(300)
.style('fill', SELECTED_TEXT_COLOR)
.attr('font-size', DEFAULT_TABLE_PAGE_SIZE * ZOOM_TEXT);
}

function deselectElementStyle(id: string) {
select(`#node-cover-${id}`)
.transition()
.duration(500)
.style('fill', 'transparent')
.attr('opacity', 1);

select(`#node-label-${id}`)
.transition()
.duration(300)
.style('fill', DEFAULT_COLOR)
.attr('font-size', DEFAULT_TABLE_PAGE_SIZE);
}

Expand Down

0 comments on commit f841652

Please sign in to comment.