default tile layout; scroll mode toggle; trim dashboard

Author: cameron-toy

src/commands.ts

@@ -21,4 +21,7 @@ export namespace CommandIDs {
   export const setTileSize = 'dashboard:set-tile-size';
   export const saveToMetadata = 'dashboard:save-to-metadata';
   export const openFromMetadata = 'dashboard:open-from-metadata';
+  export const toggleWidgetMode = 'dashboard:toggle-widget-mode';
+  export const toggleInfiniteScroll = 'dashboard:toggle-infinite-scroll';
+  export const trimDashboard = 'dashboard:trim-dashboard';
 }

src/dashboard.tsx

@@ -146,7 +146,7 @@ export class Dashboard extends Widget {
     event.dropAction = 'copy';
     const source = event.source as DashboardWidget;
     const pos = source?.pos;
-    if (pos) {
+    if (pos && source.mode === 'grid-edit') {
       pos.left = event.offsetX + this.node.scrollLeft;
       pos.top = event.offsetY + this.node.scrollTop;
       (this.layout as DashboardLayout).drawDropZone(pos, '#2b98f0');
@@ -243,7 +243,7 @@ export class Dashboard extends Widget {
 
   private _evtScroll(_event: Event): void {
     const model = this.model;
-
+    
     if (model.scrollMode !== 'infinite') {
       return;
     }
@@ -421,7 +421,7 @@ export class Dashboard extends Widget {
  * Namespace for DashboardArea options.
  */
 export namespace Dashboard {
-  export type Mode = 'edit' | 'present' | 'grid';
+  export type Mode = 'free-edit' | 'present' | 'grid-edit';
 
   export type ScrollMode = 'infinite' | 'constrained';
 
@@ -589,9 +589,9 @@ export namespace DashboardDocument {
           value={value}
           aria-label={'Mode'}
         >
-          <option value="present">Present</option>
-          <option value="edit">Free Layout</option>
-          <option value="grid">Tile Layout</option>
+          <option value='present'>Present</option>
+          {/* <option value="free-edit">Free Layout</option> */}
+          <option value='grid-edit'>Edit</option>
         </HTMLSelect>
       );
     }

src/index.ts

@@ -178,6 +178,18 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
       rank: 6,
     });
 
+    app.contextMenu.addItem({
+      command: CommandIDs.toggleInfiniteScroll,
+      selector: '.pr-JupyterDashboard',
+      rank: 7,
+    });
+
+    app.contextMenu.addItem({
+      command: CommandIDs.trimDashboard,
+      selector: '.pr-JupyterDashboard',
+      rank: 8,
+    });
+
     app.contextMenu.addItem({
       command: CommandIDs.deleteOutput,
       selector: '.pr-EditableWidget',
@@ -191,11 +203,17 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
     });
 
     app.contextMenu.addItem({
-      type: 'separator',
+      command: CommandIDs.toggleWidgetMode,
       selector: '.pr-EditableWidget',
       rank: 2,
     });
 
+    app.contextMenu.addItem({
+      type: 'separator',
+      selector: '.pr-EditableWidget',
+      rank: 3,
+    });
+
     app.contextMenu.addItem({
       command: CommandIDs.openFromMetadata,
       selector: '.jp-Notebook',
@@ -372,6 +390,7 @@ function addCommands(
         widget.fitContent();
       }
     },
+    isVisible: (args) => outputTracker.currentWidget.mode === 'free-edit',
     isToggled: (args) => outputTracker.currentWidget.fitToContent,
   });
 
@@ -398,7 +417,7 @@ function addCommands(
     execute: (args) => {
       const dashboard = dashboardTracker.currentWidget;
       if (dashboard.model.mode === 'present') {
-        dashboard.model.mode = 'edit';
+        dashboard.model.mode = 'free-edit';
       } else {
         dashboard.model.mode = 'present';
       }
@@ -585,7 +604,6 @@ function addCommands(
             cellId: metadata.id,
             pos: metadata.pos
           };
-          console.log('widget added', widgetInfo);
           widgetstore.addWidget(widgetInfo);
         }
       }
@@ -616,7 +634,44 @@ function addCommands(
       }
       return false;
     }
-  })
+  });
+
+  commands.addCommand(CommandIDs.toggleWidgetMode, {
+    label: 'Snap to Grid',
+    isToggled: (args) => {
+      const widget = outputTracker.currentWidget;
+      return widget.mode === 'grid-edit';
+    },
+    execute: (args) => {
+      const widget = outputTracker.currentWidget;
+      if (widget.mode === 'grid-edit') {
+        widget.mode = 'free-edit';
+      } else if (widget.mode === 'free-edit') {
+        widget.mode = 'grid-edit';
+      }
+    }
+  });
+
+  commands.addCommand(CommandIDs.toggleInfiniteScroll, {
+    label: 'Infinite Scroll',
+    isToggled: (args) => dashboardTracker.currentWidget?.model.scrollMode === 'infinite',
+    execute: (args) => {
+      const dashboard = dashboardTracker.currentWidget;
+      if (dashboard.model.scrollMode === 'infinite') {
+        dashboard.model.scrollMode = 'constrained';
+      } else {
+        dashboard.model.scrollMode = 'infinite';
+      }
+    }
+  });
+
+  commands.addCommand(CommandIDs.trimDashboard, {
+    label: 'Trim Dashboard',
+    execute: (args) => {
+      const dashboard = dashboardTracker.currentWidget;
+      (dashboard.layout as DashboardLayout).trimDashboard();
+    }
+  });
 }
 
 /**

src/layout.ts

@@ -56,9 +56,9 @@ export class DashboardLayout extends Layout {
 
     this._canvas = DashboardLayout.makeCanvas(this._width, this._height);
 
-    if (mode === 'edit') {
+    if (mode === 'free-edit') {
       this._canvas.classList.add(FREE_LAYOUT_CLASS);
-    } else if (mode === 'grid') {
+    } else if (mode === 'grid-edit') {
       this._canvas.classList.add(TILED_LAYOUT_CLASS);
     }
 
@@ -122,6 +122,9 @@ export class DashboardLayout extends Layout {
   onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
     this._dashboard = this.parent as Dashboard;
+    if (this.mode === 'grid-edit') {
+      this.setTileSize(this.tileSize);
+    }
   }
 
   /**
@@ -364,7 +367,7 @@ export class DashboardLayout extends Layout {
     top = Math.max(top, 0);
 
     // Snap to grid if in grid mode.
-    if (this._mode === 'grid') {
+    if (widget.mode === 'grid-edit') {
       left = Private.mround(left, this._tileSize);
       top = Private.mround(top, this._tileSize);
       width = Math.max(Private.mround(width, this._tileSize), this._tileSize);
@@ -747,13 +750,13 @@ export class DashboardLayout extends Layout {
         this._canvas.classList.remove(FREE_LAYOUT_CLASS);
         this._canvas.classList.remove(TILED_LAYOUT_CLASS);
         break;
-      case 'edit':
+      case 'free-edit':
         this.canvas.style.backgroundPosition = null;
         this.canvas.style.backgroundSize = null;
         this._canvas.classList.remove(TILED_LAYOUT_CLASS);
         this._canvas.classList.add(FREE_LAYOUT_CLASS);
         break;
-      case 'grid':
+      case 'grid-edit':
         this.setTileSize(this._tileSize);
         this._canvas.classList.remove(FREE_LAYOUT_CLASS);
         this.canvas.classList.add(TILED_LAYOUT_CLASS);
@@ -848,7 +851,7 @@ export class DashboardLayout extends Layout {
 
     let { left, top, width, height } = pos;
 
-    if (this.mode === 'grid') {
+    if (this.mode === 'grid-edit') {
       width = Math.max(Private.mround(width, this._tileSize), this._tileSize);
       height = Math.max(Private.mround(height, this._tileSize), this._tileSize);
       left = Private.mround(left, this._tileSize);
@@ -892,7 +895,7 @@ export class DashboardLayout extends Layout {
    * contain all the widgets ("trims" excess dashboard to the right and
    * bottom of the content).
    */
-  trimCanvas(): void {
+  trimDashboard(): void {
     const model = (this.parent as Dashboard).model;
     let maxWidth = 0;
     let maxHeight = 0;
@@ -1007,7 +1010,7 @@ export namespace DashboardLayout {
   /**
    * The default size of a single tile in tiled layout.
    */
-  export const DEFAULT_TILE_SIZE = 50;
+  export const DEFAULT_TILE_SIZE = 32;
 }
 
 /**

src/model.ts

@@ -366,7 +366,7 @@ export class DashboardModel extends DocumentModel implements IDashboardModel {
 
   private _metadata: IObservableJSON = new ObservableJSON();
   private _loaded = new Signal<this, void>(this);
-  private _mode: Dashboard.Mode = 'edit';
+  private _mode: Dashboard.Mode = 'grid-edit';
   private _scrollMode: Dashboard.ScrollMode = 'constrained';
   private _path: string;
   private _restore: boolean = false;

src/widget.ts

@@ -363,10 +363,10 @@ export class DashboardWidget extends Widget {
     this.node.style.width = `${width}px`;
     this.node.style.height = `${height}px`;
 
-    if (this.mode === 'grid') {
+    if (this.mode === 'grid-edit') {
       (this.parent.layout as DashboardLayout).drawDropZone(this.pos, '#2b98f0');
     }
-    if (this.mode !== 'grid' && this._fitToContent && !event.altKey) {
+    if (this.mode === 'free-edit' && this._fitToContent && !event.altKey) {
       this.fitContent();
     }
   }
@@ -594,7 +594,7 @@ export class DashboardWidget extends Widget {
     } else {
       this.addClass(EDITABLE_WIDGET_CLASS);
     }
-    if (newMode === 'grid') {
+    if (newMode === 'grid-edit') {
       if (this.parent) {
         (this.parent as Dashboard).updateWidget(this, this.pos);
       }
@@ -635,9 +635,9 @@ export class DashboardWidget extends Widget {
   private _cell: CodeCell | MarkdownCell | null = null;
   private _cellId: string;
   private _ready = new Signal<this, void>(this);
-  private _fitToContent = true;
+  private _fitToContent = false;
   private _mouseMode: DashboardWidget.MouseMode = 'none';
-  private _mode: Dashboard.Mode = 'edit';
+  private _mode: Dashboard.Mode = 'grid-edit';
   private _drag: Drag | null = null;
   private _clickData: {
     pressX: number;

style/index.css

@@ -84,8 +84,8 @@
 
 .pr-Canvas.pr-TiledLayout {
     background-image: linear-gradient(45deg, rgba(160,160,160,.15) 25%, transparent 25%), linear-gradient(-45deg, rgba(160,160,160,.15) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(160,160,160,.15) 75%), linear-gradient(-45deg, transparent 75%, rgba(160,160,160,.15) 70%);
-    background-size: 100px 100px;
-    background-position: 0 0, 0 50px, 50px -50px, -50px 0px;
+    background-size: 64px 64px;
+    background-position: 0 0, 0 32px, 32px -32px, -32px 0px;
 }
 
 .pr-OnboardingGif {
@@ -113,7 +113,6 @@ select.pr-ToolbarSelector.jp-mod-styled {
     display: block;
     box-shadow: none;
     border: none;
-    /* top: 5px !important; */
   }
 
 .pr-ToolbarSelector.jp-mod-styled select {
@@ -127,5 +126,6 @@ select.pr-ToolbarSelector.jp-mod-styled {
   }
 
   .pr-DragImage {
-    box-shadow: var(--jp-elevation-z2);
+    box-shadow: var(--jp-elevation-z1);
+    border: var(--jp-border-width) solid var(--jp-brand-color1);
   }