Editor-ui,When the MainHeader is hidden (display: none), the click position on the canvas will be shifted upward by the height of the MainHeader. How to solve this?

Describe the problem/error/question

When i set the MainHeader hidden (display: none), the click position on the canvas will be shifted upward by the height of the MainHeader. How to solve this?

I clicked and dragged at the red arrow, and the red box shifted upward by about 65px (the height of the MainHeader).
But, on the execution page, when the mainHeader is hidden, there is no mouse click shift.
how can i solve this

What is the error message (if any)?

no

Information on your n8n setup

  • **n8n version: 1.14.2
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • **Running n8n via (Docker, npm, n8n cloud, desktop app): npm
  • **Operating system: macos

Hi @chris-deng,

That is a good question I have not tried to remove the main header before but I am curious as to why you are removing it :slight_smile:

I took a quick look and it looks like we set a const in /packages/editor-ui/src/utils/nodeViewUtils.ts for HEADER_HEIGHT which is used in the same file in getMidCanvasPosition so I suspect this is what you will need to change.

Let me know how you get on.

Thanks for your reply.

why you are removing it

I want to integrate n8n with a system I locally built, and I intend to remove the left navigation bar. However, I have encountered the following issue:

After removing the left navigation bar, the mouse click will be offset to the left. If I remove the header, the mouse click will be offset upwards.

I searched and found that the getMidCanvasPosition method is mainly used to calculate the position of the notes, and does not seem to be used to calculate the position of mouse clicks.

Also, when removing the left navigation and header on the execution log page, there was no occurrence of mouse click offset.

execution log page url: http://127.0.0.1:8080/workflow/7mgRLp3rqE6XqHtB/executions/5

Hey @chris-deng,

That is interesting, It was the first thing I found and I didn’t try to build it with that change. I can check with our front end team to see if they know where the change needs to be made or if you are already in touch with the sales team about an embed license for your requirements that is another route you could take.

:handshake:
The flow editor page and execution page have the same DOM structure but behave differently, indicating that I need to further study n8n.

As I am currently experimenting with integrating n8n with a personal project for learning purposes, I did not apply for an embed license.

Hey @chris-deng,

That makes sense, it is always worth having a chat if you think you are going to use it for something as you can get an idea of pricing and the support options but for science it can be tricky.

I will let you know when I hear back on the question.

Hey @chris-deng,

So I have had a chat and it looks like what you are after can be found here: https://github.com/n8n-io/n8n/blob/921d213ae5507869bd2627acfa7e8de53bd28b10/packages/editor-ui/src/stores/ui.store.ts#L413

Let me know how you get on :slight_smile:

1 Like

@Jon Thanks for your reply.

This information helped me solve my problem, thank you very much.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.