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

Jump to bottom

expose "onMoveNode" method (optional), added "canDragNode" method (optional), center svg icons in control buttons #280

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

expose "onMoveNode" method (optional), added "canDragNode" method (optional), center svg icons in control buttons #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9264809
center svg icon in re-center control button
man-person Oct 11, 2020
c5b15e4
expose "onMoveNode" method (optional),
man-person Oct 22, 2020
f5313c9
update typings for changes
man-person Oct 25, 2020
7447fdd
Merge branch 'master' into master
man-person Nov 12, 2020
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: 2 additions & 0 deletions src/components/graph-view-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export type IGraphViewProps = {
hoveredNode: INode | null,
swapEdge: IEdge
) => boolean,
canDragNode?: (nodeId: string) => boolean,
Copy link
Contributor

@ajbogh ajbogh Nov 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to canMoveNode or canUpdateNode?

onBackgroundClick?: (x: number, y: number, event: any) => void,
onCopySelected?: () => void,
onCreateEdge?: (sourceNode: INode, targetNode: INode) => void,
Expand All @@ -77,6 +78,7 @@ export type IGraphViewProps = {
onSwapEdge?: (sourceNode: INode, targetNode: INode, edge: IEdge) => void,
onUndo?: () => void,
onUpdateNode?: (node: INode) => void,
Copy link
Contributor

@ajbogh ajbogh Nov 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onUpdateNode should already tell you that the node moved. It passes the new X,Y coordinates within the INode type. Is it possible to call onUpdateNode instead of creating a new onMoveNode method?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the problem with this is that onUpdateNode is only called when the move is finished, not while the move is in progress. That is also why one can not just return false from onUpdateNode and thereby prevent movement.

onMoveNode?: (node: INode) => void,
onArrowClicked?: (selectedEdge: IEdge) => void,
renderBackground?: (gridSize?: number) => any,
renderDefs?: () => any,
Expand Down
12 changes: 8 additions & 4 deletions src/components/graph-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
canSwapEdge: () => true,
canDeleteEdge: () => true,
canDeleteNode: () => true,
canDragNode: () => true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to canMoveNode

edgeArrowSize: 8,
gridSpacing: 36,
layoutEngineType: 'None',
Expand Down Expand Up @@ -788,8 +789,7 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
}

handleNodeMove = (position: IPoint, nodeId: string, shiftKey: boolean) => {
const { canCreateEdge, readOnly } = this.props;
const { draggingEdge } = this.state;
const { canCreateEdge, readOnly, onMoveNode, canDragNode } = this.props;
const nodeMapNode: INodeMapNode | null = this.getNodeById(nodeId);

if (!nodeMapNode) {
Expand All @@ -798,11 +798,15 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {

const node = nodeMapNode.node;

if (readOnly) {
if (readOnly || !canDragNode(nodeId)) {
return;
}

if (!shiftKey && !draggingEdge) {
if (onMoveNode) {
onMoveNode(node);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This if statement needs to move within the if statement on line 809.


if (!shiftKey && !this.state.draggingEdge) {
// node moved
node.x = position.x;
node.y = position.y;
Expand Down
4 changes: 4 additions & 0 deletions src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,10 @@ $background-color: #f9f9f9;
border-radius: 2px;
cursor: pointer;
margin: 0;

> svg {
vertical-align: sub;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please rebase on master. This may be fixed.

}
}

Expand Down
6 changes: 4 additions & 2 deletions typings/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,8 @@ declare module 'react-digraph' {
sourceNode: INode,
hoveredNode: INode | null,
swapEdge: IEdge
) => boolean,
) => boolean;
canDragNode?: (nodeId: string) => boolean;
onBackgroundClick?: (x: number, y: number, event: any) => void,
onCopySelected?: () => void;
onCreateEdge?: (sourceNode: INode, targetNode: INode) => void;
Expand All @@ -139,10 +140,11 @@ declare module 'react-digraph' {
onPasteSelected?: (
selectedNode: INode,
xyCoords?: { x: number, y: number }
) => void,
) => void;
onSelectEdge?: (selectedEdge: IEdge) => void;
onSelectNode?: (node: INode | null, event: any) => void;
onSwapEdge?: (sourceNode: INode, targetNode: INode, edge: IEdge) => void;
onMoveNode?: (node: INode) => void;
onUndo?: () => void;
onUpdateNode?: (node: INode) => void;
renderBackground?: (gridSize?: number) => any;
Expand Down