Merge pull request #61 from cameron-toy/overlap_fixes

overlap handling fixes

Author: cameron-toy

src/custom_layout.ts

@@ -203,17 +203,20 @@ export class DashboardLayout extends Layout {
         widget.mode = 'present';
       }
       this.attachWidget(widget);
-      this._moveWidget(widget, _pos);
-      this._outputTracker.add(widget);
+      // if (widget.mode !== 'grid') {
+      //   this._moveWidget(widget, _pos, false);
+      //   this._outputTracker.add(widget);
+      // }
 
       const { id, notebookId, cellId } = widget;
 
       const ignore = !this._signalChanges;
 
       widget.ready.connect(() => {
-        if (widget.mode === 'grid') {
-          this._moveWidget(widget, widget.pos);
-        }
+        this._moveWidget(widget, widget.pos, false);
+        this.fixOverlaps(widget);
+        this._outputTracker.add(widget);
+
         const change: IDashboardChange = {
           type: 'add',
           pos: widget.pos,
@@ -240,9 +243,10 @@ export class DashboardLayout extends Layout {
 
   private _updateWidget(
     widget: DashboardWidget,
-    pos: Widgetstore.WidgetPosition
+    pos: Widgetstore.WidgetPosition,
+    fixOverlaps = true
   ): boolean {
-    const success = this._moveWidget(widget, pos);
+    const success = this._moveWidget(widget, pos, fixOverlaps);
     if (success) {
       const change: IDashboardChange = {
         type: 'move',
@@ -256,7 +260,8 @@ export class DashboardLayout extends Layout {
 
   private _moveWidget(
     widget: DashboardWidget,
-    pos: Widgetstore.WidgetPosition
+    pos: Widgetstore.WidgetPosition,
+    fixOverlaps = true
   ): boolean {
     // Get the item from the map.
     const item = this._items.get(widget.id);
@@ -290,25 +295,13 @@ export class DashboardLayout extends Layout {
       item.update(0, 0, 0, 0);
     }
 
-    // const oldWidgets = this._widgetsInSelection({ left, top, width, height });
-
-    // console.log(
-    //   'old widgets',
-    //   toArray(filter(oldWidgets, (w) => w.widget.id !== widget.id))
-    // );
-
-    const newPos: Widgetstore.WidgetPosition = { left, top, width, height };
+    this.clearCanvas();
 
     item.update(left, top, width, height);
 
-    const overlaps = filter(
-      this._widgetsInSelection(newPos),
-      (overlap) => overlap.widget !== widget
-    );
-
-    widget.locked = true;
-    this.handleOverlaps(overlaps, newPos);
-    widget.locked = false;
+    if (fixOverlaps) {
+      this.fixOverlaps(widget);
+    }
 
     return true;
   }
@@ -354,6 +347,8 @@ export class DashboardLayout extends Layout {
       this.detachWidget(-1, widget);
     }
 
+    this.clearCanvas();
+
     // Dispose the layout item.
     item.dispose();
 
@@ -515,6 +510,16 @@ export class DashboardLayout extends Layout {
       newPos.top = 0;
       this._expandCanvas(type, adjust);
     }
+    const heightDiff = newPos.top + newPos.height - this.height;
+    if (heightDiff > 0) {
+      adjust = heightDiff;
+      this._expandCanvas(type, adjust);
+    }
+    const widthDiff = newPos.left + newPos.width - this.width;
+    if (widthDiff > 0) {
+      adjust = widthDiff;
+      this._expandCanvas(type, adjust);
+    }
 
     this._moveWidget(widget, newPos);
   }
@@ -526,6 +531,17 @@ export class DashboardLayout extends Layout {
     each(overlaps, (overlap) => void this._handleOverlap(pos, overlap));
   }
 
+  fixOverlaps(widget: DashboardWidget) {
+    const overlaps = filter(
+      this._widgetsInSelection(widget.pos),
+      (overlap) => overlap.widget !== widget
+    );
+
+    widget.locked = true;
+    this.handleOverlaps(overlaps, widget.pos);
+    widget.locked = false;
+  }
+
   private _expandCanvas(
     direction: DashboardWidget.Direction,
     amount: number

src/widgetstore.ts

@@ -76,11 +76,6 @@ export class Widgetstore extends Litestore {
   private _handleChanges(changes: IDashboardChange[]): void {
     this.startBatch();
 
-    console.log(
-      'changes to apply',
-      changes.filter((change) => !change.ignore)
-    );
-
     for (const change of changes) {
       const { widgetId, pos, ignore } = change;
 
@@ -253,7 +248,6 @@ export class Widgetstore extends Litestore {
     if (this._inBatch) {
       return;
     }
-    console.log('starting batch in widgetstore');
     this._inBatch = true;
     this.beginTransaction();
   }
@@ -265,7 +259,6 @@ export class Widgetstore extends Litestore {
     if (!this._inBatch) {
       return;
     }
-    console.log('ending batch in widgetstore');
     this._inBatch = false;
     this.endTransaction();
   }

style/index.css

@@ -5,7 +5,7 @@
 .pr-DashboardWidget {
     border-width: 2px;
     border-radius: 3px;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
 }
@@ -46,9 +46,7 @@
 }
 
 .pr-DashboardWidgetChild {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex;
     object-fit: scale-down;
 }
 
@@ -58,8 +56,6 @@
 
 .pr-Canvas {
     pointer-events: none;
-    padding-bottom: 80px;
-    padding-right: 80px;
 }
 
 .pr-Canvas.pr-FreeLayout {