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

Centering with custom layout doesn't work as intended #483

Open
PyHahiro opened this issue Jan 3, 2023 · 0 comments
Open

Centering with custom layout doesn't work as intended #483

PyHahiro opened this issue Jan 3, 2023 · 0 comments
Labels

Comments

@PyHahiro
Copy link

PyHahiro commented Jan 3, 2023

Describe the bug
Hi, the bug is the following, when I use the programmaticaly implemented Center$ subject in order to center, it doesn't center the intended way

To Reproduce
I Implemented a customDagreNodesOnly custom Layout template available in the repo and, using custom nodes size, I implemented a function to open/close nodes.
When the function is called, I want to center my graph around the selected node, until I added this portion of code before updating my edge

// INSIDE customDagreNodesOnly.ts 

const rootNode = graph.nodes.find(n => n.id === "0");
if (!rootNode) {
  return;
}

const canvasWidth = document.getElementById('graph').offsetWidth;
const canvasHeight = document.getElementById('graph').offsetHeight

const offsetX = canvasWidth / 2 - ((rootNode.position.x + rootNode.dimension.width) / 2);
const offsetY = canvasHeight / 2 - ((rootNode.position.y + rootNode.dimension.height) / 2);


for (const node of graph.nodes) {
  node.position.x += offsetX;
  node.position.y += offsetY;

I believe this is working because every nodes has the same position and only transition so changing the position is the issue, but using translate also doesn't work
the Center$ subject worked as intended, but now it does not anymore, and I believe this has to do with how is the calculation made after these changes

What I have tried

const rootNode = graph.nodes.find(n => n.id === "0");
if (!rootNode) {
  return;
}

const canvasWidth = document.getElementById('graph').offsetWidth;
const canvasHeight = document.getElementById('graph').offsetHeight

let [_, transformX, transformY] = rootNode.transform?.match(/translate\(([0-9]+),\s*([0-9]+)\)/) ?? ["",0,0]

const offsetX = canvasWidth / 2 - ((rootNode.position.x + rootNode.dimension.width + +transformX) / 2);
const offsetY = canvasHeight / 2 - ((rootNode.position.y + rootNode.dimension.height + +transformY) / 2);

for (const node of graph.nodes) {
  node.transform = `translate(${offsetX},${offsetY})`;
    }

moving +transformX/+transformY around my calcul hasn't changed anything

Expected behavior
I want to my center function to center the whole graph while keeping the intended code above that works

Screenshots
graph not being centered, offset is wrong, but deploying/hidding then centering on clicked node is working
image

ngx-graph version
"^7.2.0"

@PyHahiro PyHahiro added the bug label Jan 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant