livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-01 01:04:43 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve iframe repositioning when moving sections and cells (#1796)

Browse source
This commit is contained in:
Jonatan Kłosko 2023-03-16 12:17:50 +01:00 • committed by GitHub
parent b3ff6e8a70
commit a4bbe4ef5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/js/hooks/js_view.js
View file

@ -226,17 +226,18 @@ const JSView = {
resizeObserver.observe(notebookContentEl);
resizeObserver.observe(notebookEl);
// On lower level cell/section reordering is applied as element
// removal followed by insert, consequently the intersection
// between the placeholder and notebook content changes (becomes
// none for a brief moment)
const intersectionObserver = new IntersectionObserver(
(entries) => {
this.repositionIframe();
},
{ root: notebookContentEl }
// On certain events, like section/cell moved, a global event is
// dispatched to trigger reposition. This way we don't need to
// use deep MutationObserver, which would be expensive, especially
// with code editor
const unsubscribeFromJSViewsEvents = globalPubSub.subscribe(
"js_views",
(event) => {
if (event.type === "reposition") {
this.repositionIframe();
}
}
);
intersectionObserver.observe(this.iframePlaceholder);
// Emulate mouse enter and leave on the placeholder. Note that we
// intentionally use bubbling to notify all parents that may have
@ -277,7 +278,7 @@ const JSView = {
const remove = () => {
resizeObserver.disconnect();
intersectionObserver.disconnect();
unsubscribeFromJSViewsEvents();
viewportIntersectionObserver && viewportIntersectionObserver.disconnect();
this.iframe.remove();
this.iframePlaceholder.remove();

8
assets/js/hooks/session.js
View file

@ -1054,6 +1054,8 @@ const Session = {
},
handleCellMoved(cellId) {
this.repositionJSViews();
if (this.focusedId === cellId) {
globalPubSub.broadcast("cells", { type: "cell_moved", cellId });
}
@ -1076,6 +1078,8 @@ const Session = {
},
handleSectionMoved(sectionId) {
this.repositionJSViews();
const section = this.getSectionById(sectionId);
smoothlyScrollToElement(section);
},
@ -1154,6 +1158,10 @@ const Session = {
}
},
repositionJSViews() {
globalPubSub.broadcast("js_views", { type: "reposition" });
},
/**
* Broadcast new location report coming from the server to all the cells.
*/