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

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

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