Bound container window position (#9)

Signed-off-by: Jay Wang <[email protected]>

Author: xiaohk

src/stickyland.ts

@@ -8,13 +8,21 @@ import { MyIcons } from './icons';
 
 const MIN_WIDTH = 235;
 const MIN_HEIGHT = 240;
+const WINDOW_GAP = 29;
+
+type ContainerPos = {
+  width: number;
+  height: number;
+  y: number;
+};
 
 export class StickyLand {
   node: HTMLElement;
   header: HTMLElement;
   stickyTab: StickyTab;
   stickyContent: StickyContent | null = null;
   floatingWindows: FloatingWindow[] = [];
+  containerSize: ContainerPos;
 
   constructor(panel: NotebookPanel) {
     this.node = document.createElement('div');
@@ -30,6 +38,23 @@ export class StickyLand {
     this.header.classList.add('sticky-header');
     this.node.appendChild(this.header);
 
+    // Bound the window position inside its parent when dragging the header
+    if (this.node.parentElement) {
+      const containerBBox = this.node.parentElement.getBoundingClientRect();
+      this.containerSize = {
+        width: containerBBox.width,
+        height: containerBBox.height,
+        y: containerBBox.y
+      };
+    } else {
+      console.warn('Could not find stickyland container parent.');
+      this.containerSize = {
+        width: 2000,
+        height: 1500,
+        y: 0
+      };
+    }
+
     this.initHeader();
 
     // Add the tab element
@@ -166,10 +191,14 @@ export class StickyLand {
       e.preventDefault();
       e.stopPropagation();
       const mouseEvent = e as MouseEvent;
-
       const newTop = mouseEvent.pageY + yOffset;
 
-      this.node.style.top = `${newTop}px`;
+      const nodeBBox = this.node.getBoundingClientRect();
+      const maxNewY = this.containerSize.height - nodeBBox.height;
+      let newY = Math.max(WINDOW_GAP, newTop);
+      newY = Math.min(maxNewY, newY);
+
+      this.node.style.top = `${newY}px`;
     };
 
     const mouseUpHandler = () => {

style/base.css

@@ -1,19 +1,18 @@
-
 .sticky-button.jp-Button.minimal .jp-Icon {
   color: var(--jp-inverse-layout-color3);
 }
 
 .sticky-container {
   position: absolute;
-  z-index: 5;
+  z-index: 7;
   right: 0px;
   opacity: 0.97;
 
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
 
   box-shadow: -1px 1px 3px hsla(0, 0%, 0%, 0.15),
-  -1px 1px 20px hsla(0, 0%, 0%, 0.1);
+    -1px 1px 20px hsla(0, 0%, 0%, 0.1);
   width: 300px;
   height: 300px;
 
@@ -48,7 +47,7 @@
   padding: 0px 5px;
   text-align: center;
   white-space: nowrap;
-  border-radius: .375em;
+  border-radius: 0.375em;
   box-shadow: none;
 
   display: inline-flex;
@@ -87,7 +86,7 @@
   text-align: left;
   min-width: 40px;
 
-  border-top: 2px solid #1976D2;
+  border-top: 2px solid #1976d2;
   border-radius: 0;
 
   position: relative;
@@ -111,7 +110,7 @@
   min-height: 20px;
 }
 
-.sticky-tab button.add-tab svg{
+.sticky-tab button.add-tab svg {
   fill: var(--jp-inverse-layout-color3);
   color: var(--jp-inverse-layout-color3);
   display: block;
@@ -299,4 +298,4 @@
 
 .no-display {
   display: none;
-}
+}