I am developing an Electron app. I have Browserwindows on the desktop, but I want to have the same behavior as other windows on the desktop in terms of avoiding overlapping by dockable windows and resizing each other side-by-side when we change the width of a window by mouse the width of the next window is change consequently. I mean snapping windows on the desktop. Like this image .
But my problem is that the windows made by the electron is not followed this behavior when I set the frame attribute to false and it lets other windows overlap it and the electron windows are not considered in side-by-side windows resizing and...
current electron windows is on right side
In Linux by adding style="-webkit-app-region: drag" to the body it works as I want and it considers snapping for electron window. but in windows OS snapping is not working.
How can I consider the same behavior as frameless windows in LIUX for frameless electron windows on the WINDOWS OS in terms of snapping?
I don't believe Electron can control the position (x, y, width, height) of other (non-Electron) windows. To do so would require a lower-level language.
On Windows, you can right-click and drag a window title bar to the left or right edge of the screen and it will expand the width of that window to 50% (and height to 100%). Following this, you may choose another open window to fill the remaining width. On Windows there is no native ability to adjust the split of both windows on the same screen at the same time, though it can be temperamental at times.
On MacOS, you can right-click and hold the maximise button. A pop-up menu will appear prompting you to maximise or tile your window to the left or right edge of the screen. Following this, you may choose another open window to fill the remaining width. On MacOS there is native ability to adjust the split of both windows on the same screen at the same time.
On Linux (Ubuntu at least), you can right-click and drag a window title bar to the left or right edge of the screen and it will expand the width of that window to 50% (and height to 100%). To fill the remaining screen width with another window, you will need to do the same by dragging the title bar of a second window to the other side of the screen. Once the screen is filled with both windows then there is native ability to adjust the split of both windows on the same screen at the same time.
If you wish to "dock" multiple windows "created by your Electron app" then you would need to store the position (x, y, width, height) of each window and monitor for any changes in those values. If there is a change, then update the position of the other 'docked' window(s) accordingly. Some coding will be required but it could be implemented without too much issue.
Now in your instance (https://i.stack.imgur.com/aZy3e.png), I noticed that you do not have a title bar for your Electron app. This will make it difficult for any OS to manage this feature natively.
Perhaps an alternative solution would be to slide your Electron app out of view when not in use and slide it back in when the cursor hits the edge of the screen. User satisfaction would be degraded though if they were not accurate with their cursor when trying to use the scroll bar and your app kept on sliding in and out over the scroll bar.
