dblclick to restore size of images #1970
Conversation
| img.load(function () { | ||
| $(this).resizable({'aspectRatio': true, 'autoHide': true}) | ||
| }); | ||
| setTimeout(function () { |
There was a problem hiding this comment.
Did you add setTimeout() because the parent div's width/height weren't available? Won't this cause flashing of the UI when the png is resized after 250ms?
I had the same problem, and chose to grab the width of the input field (which is known at the point this code is running).
https://github.com/mcelrath/ipython/blob/51514ef9c8dd7f8aeea35cb7da744ca16957e4e1/IPython/frontend/html/notebook/static/js/outputarea.js#L271
Because resize png/jpeg/svg will duplicate this code 3 times, we should think about unifying them.
There was a problem hiding this comment.
No, this will cause no flashing, because the image still draws immediately. The only delayed effect is making the image resizable, which has no visible effect until hover.
It makes no sense to use the shape of the container for raster images, which must start with no zoom. It is imperative that these images start without any sizing CSS on them.
There was a problem hiding this comment.
True: that's something different for svg: it requires sizing. So maybe we should not attempt to merge these.
|
I have tested this and it seems to work well. I like this UI for restoring the original size an the code looks good. I am wondering if there is any times where the 250ms delay wouldn't be enough. I thought a large notebook with many images might cause a problem, but I tried it and it worked fine. We could tune this later if we run into problems though. |
|
I can chain timeouts, so it will check if the height/width is zero, and schedule another timeout if so. |
|
That is probably safest if it isn't too difficult. |
|
on a chained callback, and consolidated duplicate png/jpg implementations into private method. |
|
I haven't managed to trigger a case where a second timeout is triggered, even with 1ms timeout, so this may be superfluous, but it should be safer nonetheless. |
|
This looks merge ready, no? |
|
Yes, I think so. |
dblclick to restore resized images
dblclick to restore resized images
alternative to #1887
adds double-click to resize, and removes the use of
load(), which is unreliable and can produce zero-sized elements, in favor of a quarter second timeout.