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.

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

Fix graph only centering when nodes out of view #208

Merged
merged 6 commits into from
Mar 22, 2024
Merged

Conversation

ghsteff
Copy link
Contributor

@ghsteff ghsteff commented Mar 19, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The graph will only center if a node is out of view, even when trying to center manually from a control button

What is the new behavior?

The graph centers when triggering manually with controls

Does this PR introduce a breaking change?

[x] Yes
[ ] No

Other information

BEFORE

Screen.Recording.2024-03-19.at.12.05.28.PM.mov

AFTER

Screen.Recording.2024-03-19.at.12.04.49.PM.mov

@ghsteff
Copy link
Contributor Author

ghsteff commented Mar 19, 2024

ideally I would have made a change here like

if (nodes?.some(node => !isNodeInView(camera, node.position)) {
	ref.current?.centerGraph([data.id, ...adjacents]);
}

but you can’t use the useThree hook in here to get the camera object because it's outside of the canvas component, so went with this centerIfNodesNotInView flag argument passed to centerGraph instead

@ghsteff ghsteff requested a review from amcdnl March 19, 2024 19:08
@@ -233,7 +233,7 @@ export interface GraphSceneRef {
/**
* Center the graph on a node or list of nodes.
*/
centerGraph: (ids?: string[]) => void;
centerGraph: (ids?: string[], centerIfNodesNotInView?: boolean) => void;
Copy link
Member

Choose a reason for hiding this comment

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

We need ot add some docs to this new arg.

src/GraphCanvas.tsx Outdated Show resolved Hide resolved
Copy link

netlify bot commented Mar 21, 2024

Deploy Preview for reagraph ready!

Name Link
🔨 Latest commit 4be6423
🔍 Latest deploy log https://app.netlify.com/sites/reagraph/deploys/65fd53fcfad69600083dd817
😎 Deploy Preview https://deploy-preview-208--reagraph.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@@ -120,7 +121,14 @@ export const GraphCanvas: FC<GraphCanvasProps & { ref?: Ref<GraphCanvasRef> }> =
const canvasRef = useRef<HTMLCanvasElement | null>(null);

useImperativeHandle(ref, () => ({
centerGraph: (n?: string[]) => rendererRef.current?.centerGraph(n),
centerGraph: ({
Copy link
Member

@amcdnl amcdnl Mar 22, 2024

Choose a reason for hiding this comment

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

I probably would have made nodes the first arg and then all the others a options arg. This makes it a non-breaking change.

@amcdnl amcdnl merged commit a9ff847 into master Mar 22, 2024
4 of 5 checks passed
@amcdnl amcdnl deleted the fix/center-controls branch March 22, 2024 09:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants