Is there an event for a view resizing?


#1

I have a bunch of line divs in a view div (like an editor). I only put enough lines in to fill the div otherwise scrolling gets too slow. I have a problem that resizing the view div leaves empty areas that need to be “repainted” (line divs added). I can’t figure out a way to know when a resize happens. Is there some event I can use?

P.S. I vaguely remember somebody telling where to find a list of events. Does such a thing exist?


#2

I found this in a post …

It is probably outdated but better than nothing.


#3

I made a list at How To Speed Up Your Packages

There’s always $(window).resize(). The resize event does not bubble down to individual elements though I think.


#4

@mark_hahn, have you found a solution to get resize events? I’m currently facing the same issue for the minimap package. $(window).resize() is sent when the whole editor window is resized but it is not when a pane is created or the find/replace box is displayed.


#5

This is a tough topic as there’s no easy way to achieve that, you can somehow workaround that as explained in that SO topic:


#6

There is no “good” solution. The only two I’ve been able to find are ugly but many times you just have to go ugly.

  1. Check size periodically with setInterval. This is very simple and when used sparingly can work fine. Atom is constantly fighting for speed so special care is needed.

100 ms is usually a UI delay that the user can live with. If checking a div’s size takes under a a ms then a 1% hit might be ok.

If a size measurement occurs at the wrong time it can cause an immediate slow DOM layout in order to find the size. This is often a subtle problem and one reason React was invented. This can sometimes be fixed by very careful control of when you check versus what the rest of your code is doing.

  1. The other solution is to create artificial circumstances that create an event. The one I know of is to put an invisible larger div inside the one you are measuring and set up the outer so it looks like a scroll happens when the outer one changes sizes. Then an onScroll event will happen. If you look at these solutions on the web you will see long pieces of delicate code.

It is ironic that IE had resize events for all elements until they removed them in IE11.

My app only cares about the outer window expanding so I might be able to come up with a version of the #2 trick that is simpler.

At this moment I’m just going to put a note in the readme that says “I’m sorry but if you resize the editor a blank space will be visible until you scroll”. It actually doesn’t affect the functionality at all.


Minimap - Testers needed
#7

Thanks for the thorough answer @mark_hahn. I’ll try to implement a solution with the onScroll event.


#8

Let us see what you come up with. I’ll try also.


#9

I was thinking. How could this be so hard? Surely this comes up somewhat often.

Oh well. I haven’t tried anything yet. I’ll do some more googling.


#10

Is this still the case? e.g. no way to tell if an element has resized?


#11

I thought I’d let everyone know, I tried https://www.npmjs.com/package/element-resize-detector and it worked reliably.


#12

I would like to update my answer, I’m not using https://github.com/que-etc/resize-observer-polyfill which works even better.