demo 3 fixes

Author: cameron-toy

src/commands.ts

@@ -16,4 +16,5 @@ export namespace CommandIDs {
   export const startFullscreen = 'dashboard:start-fullscreen';
   export const createNew = 'dashboard:create-new';
   export const enableGrid = 'dashboard:enable-grid';
+  export const setGridSize = 'dashboard:set-grid-size';
 }

src/custom_layout.ts

@@ -235,9 +235,16 @@ export class DashboardLayout extends Layout {
     widget: DashboardWidget,
     pos: Widgetstore.WidgetPosition
   ): boolean {
-    this.startBatch();
+    const wasInBatch = this.inBatch;
+    if (!wasInBatch) {
+      this.startBatch();
+    }
+
     const success = this._updateWidget(widget, pos);
-    this.endBatch();
+
+    if (!wasInBatch) {
+      this.endBatch();
+    }
     return success;
   }
 
@@ -287,10 +294,10 @@ export class DashboardLayout extends Layout {
 
     // Snap to grid if in grid mode.
     if (this._mode === 'grid') {
-      left = mround(left, this._gridWidth);
-      top = mround(top, this._gridHeight);
-      width = Math.max(mround(width, this._gridWidth), this._gridWidth);
-      height = Math.max(mround(height, this._gridHeight), this._gridHeight);
+      left = mround(left, this._gridSize);
+      top = mround(top, this._gridSize);
+      width = Math.max(mround(width, this._gridSize), this._gridSize);
+      height = Math.max(mround(height, this._gridSize), this._gridSize);
       // Change width/height now to force grid changes if they're small.
       item.update(0, 0, 0, 0);
     }
@@ -531,7 +538,7 @@ export class DashboardLayout extends Layout {
     each(overlaps, (overlap) => void this._handleOverlap(pos, overlap));
   }
 
-  fixOverlaps(widget: DashboardWidget) {
+  fixOverlaps(widget: DashboardWidget): void {
     const overlaps = filter(
       this._widgetsInSelection(widget.pos),
       (overlap) => overlap.widget !== widget
@@ -678,16 +685,60 @@ export class DashboardLayout extends Layout {
     let { left, top, width, height } = pos;
 
     if (this.mode === 'grid') {
-      width = Math.max(mround(width, this._gridWidth), this._gridWidth);
-      height = Math.max(mround(height, this._gridHeight), this._gridWidth);
-      left = mround(left, this._gridWidth);
-      top = mround(top, this._gridHeight);
+      width = Math.max(mround(width, this._gridSize), this._gridSize);
+      height = Math.max(mround(height, this._gridSize), this._gridSize);
+      left = mround(left, this._gridSize);
+      top = mround(top, this._gridSize);
     }
 
     context.strokeRect(left, top, width, height);
     context.fillRect(left, top, width, height);
   }
 
+  set gridSize(s: number) {
+    this._gridSize = s;
+    const backgroundPosition = `0 0, 0 ${s}px, ${s}px -${s}px, -${s}px 0px`;
+
+    this.canvas.style.backgroundPosition = backgroundPosition;
+    this.canvas.style.backgroundSize = `${2 * s}px ${2 * s}px`;
+    this.parent.update();
+
+    this.startBatch();
+    each(this, (_widget) => {
+      const widget = _widget as DashboardWidget;
+      this.updateWidget(widget, widget.pos);
+    });
+    this.endBatch();
+  }
+
+  get gridSize(): number {
+    return this._gridSize;
+  }
+
+  trimCanvas(): void {
+    const model = (this.parent as Dashboard).model;
+    let maxWidth = 0;
+    let maxHeight = 0;
+
+    each(this, (_widget) => {
+      const widget = _widget as DashboardWidget;
+      const { left, top, width, height } = widget.pos;
+      if (left + width > maxWidth) {
+        maxWidth = left + width;
+      }
+      if (top + height > maxHeight) {
+        maxHeight = top + height;
+      }
+    });
+
+    if (maxWidth) {
+      model.width = maxWidth;
+    }
+    if (maxHeight) {
+      model.height = maxHeight;
+    }
+  }
+
   // Map from widget ids to LayoutItems
   private _items: Map<string, LayoutItem>;
   // Datastore widgets are rendered from / saved to.
@@ -705,8 +756,7 @@ export class DashboardLayout extends Layout {
   // Parent dashboard.
   private _dashboard: Dashboard;
 
-  private _gridWidth = 100;
-  private _gridHeight = 100;
+  private _gridSize = 50;
 
   // Changed signal
   private _changed = new Signal<this, IDashboardChange[]>(this);

src/dashboard.ts

@@ -89,6 +89,7 @@ export class Dashboard extends Widget {
     this.node.addEventListener('lm-dragover', this, true);
     this.node.addEventListener('lm-drop', this, true);
     this.node.addEventListener('lm-dragend', this, true);
+    this.node.addEventListener('scroll', this);
   }
 
   /**
@@ -100,6 +101,7 @@ export class Dashboard extends Widget {
     this.node.removeEventListener('lm-dragleave', this, true);
     this.node.removeEventListener('lm-dragover', this, true);
     this.node.removeEventListener('lm-drop', this, true);
+    this.node.removeEventListener('scroll', this);
   }
 
   /**
@@ -204,6 +206,9 @@ export class Dashboard extends Widget {
 
   handleEvent(event: Event): void {
     switch (event.type) {
+      case 'scroll':
+        this._evtScroll(event);
+        break;
       case 'lm-dragenter':
         this._evtDragEnter(event as IDragEvent);
         break;
@@ -219,6 +224,29 @@ export class Dashboard extends Widget {
     }
   }
 
+  private _evtScroll(_event: Event): void {
+    const model = this.model;
+
+    console.log('scrollMode', model.scrollMode);
+    if (model.scrollMode !== 'infinite') {
+      return;
+    }
+
+    const elem = this.node;
+    const rightEdge = elem.offsetWidth + elem.scrollLeft;
+    const bottomEdge = elem.offsetHeight + elem.scrollTop;
+
+    if (rightEdge >= model.width && rightEdge > this._oldRightEdge) {
+      model.width += 200;
+    }
+    if (bottomEdge >= model.height && bottomEdge > this._oldBottomEdge) {
+      model.height += 200;
+    }
+
+    this._oldBottomEdge = bottomEdge;
+    this._oldRightEdge = rightEdge;
+  }
+
   /**
    * Add a widget to the layout.
    *
@@ -320,6 +348,8 @@ export class Dashboard extends Widget {
 
   private _model: IDashboardModel;
   private _context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
+  private _oldRightEdge = 0;
+  private _oldBottomEdge = 0;
 }
 
 /**
@@ -328,9 +358,11 @@ export class Dashboard extends Widget {
 export namespace Dashboard {
   export type Mode = 'edit' | 'present' | 'grid';
 
-  export const DEFAULT_WIDTH = 1270;
+  export type ScrollMode = 'infinite' | 'constrained';
+
+  export const DEFAULT_WIDTH = 1920;
 
-  export const DEFAULT_HEIGHT = 720;
+  export const DEFAULT_HEIGHT = 1080;
 
   export interface IOptions extends Widget.IOptions {
     /**

src/index.ts

@@ -5,7 +5,12 @@ import {
 
 import { INotebookTracker } from '@jupyterlab/notebook';
 
-import { WidgetTracker, showDialog, Dialog } from '@jupyterlab/apputils';
+import {
+  WidgetTracker,
+  showDialog,
+  Dialog,
+  InputDialog,
+} from '@jupyterlab/apputils';
 
 import { CodeCell } from '@jupyterlab/cells';
 
@@ -48,6 +53,8 @@ import { CommandIDs } from './commands';
 
 import { ReadonlyJSONObject } from '@lumino/coreutils';
 
+import { DashboardLayout } from './custom_layout';
+
 const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
   id: 'jupyterlab-interactive-dashboard-editor',
   autoStart: true,
@@ -113,19 +120,17 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
 
     app.docRegistry.addModelFactory(modelFactory);
     app.docRegistry.addWidgetFactory(widgetFactory);
-    widgetFactory.widgetCreated.connect((sender, widget) => {
+    widgetFactory.widgetCreated.connect((_sender, widget) => {
       void dashboardTracker.add(widget.content);
 
       widget.title.icon = dashboardFiletype.icon;
       widget.title.iconClass = dashboardFiletype.iconClass || '';
       widget.title.iconLabel = dashboardFiletype.iconLabel || '';
 
       const model = widget.content.model;
-      model.loaded.connect(() => {
-        if (!model.width && !model.height) {
-          app.commands.execute(CommandIDs.setDimensions);
-        }
-      });
+      model.scrollMode = 'infinite';
+      model.width = Dashboard.DEFAULT_WIDTH;
+      model.height = Dashboard.DEFAULT_HEIGHT;
     });
 
     // Add commands to context menus.
@@ -257,6 +262,9 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
       {
         command: CommandIDs.setDimensions,
       },
+      {
+        command: CommandIDs.setGridSize,
+      },
     ]);
 
     mainMenu.fileMenu.newMenu.addGroup([
@@ -445,6 +453,20 @@ function addCommands(
     isEnabled: hasDashboard,
   });
 
+  commands.addCommand(CommandIDs.setGridSize, {
+    label: 'Set Grid Dimensions',
+    execute: async (args) => {
+      const newSize = await InputDialog.getNumber({
+        title: 'Enter Grid Size',
+      });
+      if (newSize.value) {
+        const layout = dashboardTracker.currentWidget.layout as DashboardLayout;
+        layout.gridSize = newSize.value;
+      }
+    },
+    isEnabled: hasDashboard,
+  });
+
   commands.addCommand(CommandIDs.copy, {
     label: (args) => (inToolbar(args) ? '' : 'Copy'),
     icon: copyIcon,

src/model.ts

@@ -62,6 +62,8 @@ export interface IDashboardModel extends DocumentRegistry.IModel {
   width: number;
 
   height: number;
+
+  scrollMode: Dashboard.ScrollMode;
 }
 
 export class DashboardModel extends DocumentModel implements IDashboardModel {
@@ -253,6 +255,13 @@ export class DashboardModel extends DocumentModel implements IDashboardModel {
     return this._loaded;
   }
 
+  get scrollMode(): Dashboard.ScrollMode {
+    return this._scrollMode;
+  }
+  set scrollMode(newValue: Dashboard.ScrollMode) {
+    this._scrollMode = newValue;
+  }
+
   /**
    * The widget store for the dashboard.
    */
@@ -273,6 +282,7 @@ export class DashboardModel extends DocumentModel implements IDashboardModel {
   private _path: string;
   private _mode: Dashboard.Mode = 'edit';
   private _docManager: IDocumentManager;
+  private _scrollMode: Dashboard.ScrollMode = 'constrained';
 }
 
 /**

src/widget.ts

@@ -42,8 +42,6 @@ const EDITABLE_WIDGET_CLASS = 'pr-EditableWidget';
 
 const IN_DRAG_CLASS = 'pr-InDrag';
 
-const WIDGET_OVERLAY_CLASS = 'pr-WidgetOverlay';
-
 /**
  * Widget to wrap delete/move/etc functionality of widgets in a dashboard (future).
  */
@@ -118,7 +116,7 @@ export class DashboardWidget extends Widget {
             this.fitContent();
           }
           // Make widget visible again.
-          this.node.style.opacity = '1.0';
+          this.node.style.opacity = null;
           // Emit the ready signal.
           this._ready.emit(undefined);
         };
@@ -134,9 +132,6 @@ export class DashboardWidget extends Widget {
 
     this.addClass(DASHBOARD_WIDGET_CLASS);
     this.addClass(EDITABLE_WIDGET_CLASS);
-    this._overlay = document.createElement('div');
-    this._overlay.classList.add(WIDGET_OVERLAY_CLASS);
-    this.node.appendChild(this._overlay);
   }
 
   /**
@@ -359,8 +354,8 @@ export class DashboardWidget extends Widget {
       width: 0,
       height: 0,
     };
-    const overlaps = this.overlaps(pos);
-    return overlaps.type !== 'none';
+    const overlap = this.overlaps(pos);
+    return overlap.type !== 'none';
   }
 
   overlaps(_pos: Widgetstore.WidgetPosition): DashboardWidget.Overlap {
@@ -421,7 +416,7 @@ export class DashboardWidget extends Widget {
       if (this.isDisposed) {
         return;
       }
-      this.node.style.opacity = '1.0';
+      this.node.style.opacity = null;
       this.node.style.pointerEvents = 'auto';
       this.removeClass(IN_DRAG_CLASS);
       this._drag = null;
@@ -433,7 +428,7 @@ export class DashboardWidget extends Widget {
     event.stopPropagation();
     event.preventDefault();
 
-    this.node.style.opacity = '1.0';
+    this.node.style.opacity = null;
 
     if (this._mouseMode === 'resize' && this.parent !== undefined) {
       const pos = this.pos;
@@ -547,10 +542,8 @@ export class DashboardWidget extends Widget {
     this._mode = newMode;
     if (newMode === 'present') {
       this.removeClass(EDITABLE_WIDGET_CLASS);
-      this._overlay.classList.remove(WIDGET_OVERLAY_CLASS);
     } else {
       this.addClass(EDITABLE_WIDGET_CLASS);
-      this._overlay.classList.add(WIDGET_OVERLAY_CLASS);
     }
     if (newMode === 'grid') {
       if (this.parent) {
@@ -594,7 +587,6 @@ export class DashboardWidget extends Widget {
     widgetY: number;
   } | null = null;
   private _locked = false;
-  private _overlay: HTMLElement;
   private _content: Widget;
 }