Merge pull request #291 from jupytercalpoly/dev

0.7.4

Author: loganamcnichols

PROGRESS.md

@@ -18,9 +18,11 @@ An account of tasks and features that are completed or planned
 - [x] CSV launcher
 - [x] Multi row/column insert/remove
 - [x] Ghost row/column
-- [ ] Data type detection
+- [x] Data type detection (format data mode)
 ---
 **Potential Future Features**
+- [ ] Fill handle
+- [ ] Freeze rows/columns
 - [ ] Moving cells
 - [ ] Multi row/column move
 - [ ] Filter
@@ -30,6 +32,16 @@ An account of tasks and features that are completed or planned
 
 ## Current Progress
 
+### 08/24/20 - 08/28/20
+#### [Final Presentation](https://docs.google.com/presentation/d/12M3riXxlj1GouMA5mIt6B1QbdA7MSt_KNf8h545I2oI/edit?usp=sharing)
+- Bug fixes and cleanup - Kalen/Logan
+- Project Documentation - Ryan
+
+### 08/17/20 - 08/21/20
+- Format data mode - Kalen
+- Data type icons - Logan
+- README updates - Ryan
+
 ### 08/10/20 - 08/14/20
 - CSV launcher - Kalen
 - Unsaved changes dialog - Kalen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-tabular-data-editor",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "EXPERIMENTAL: JupyterLab Tabular Data Editor for CSV files",
   "keywords": [
     "jupyter",

src/drag.ts

@@ -80,21 +80,25 @@ export class BoundedDrag extends Drag {
       return;
     }
     if (this._boundingRegion || this._initializing) {
-      let sudoClientX = clientX - this._mouseOffsetX;
-      let sudoClientY = clientY - this._mouseOffsetY;
-      [sudoClientX, sudoClientY] = this.bound(sudoClientX, sudoClientY);
+      const { left, top } = this.bound(clientX, clientY);
       const style = this.dragImage.style;
-      style.top = `${sudoClientY}px`;
-      style.left = `${sudoClientX}px`;
+      style.top = `${left}px`;
+      style.left = `${top}px`;
       this._initializing = false;
     }
   }
 
-  bound(x: number, y: number): Array<number> {
+  bound(clientX: number, clientY: number): { left: number; top: number } {
+    // Adjust the position of there are mouse offsets.
+    let left = clientX - this._mouseOffsetX;
+    let top = clientY - this._mouseOffsetY;
+
+    // Return early if we do not have a bounding region.
     if (!this._boundingRegion) {
-      return [x, y];
+      return { left, top };
     }
-    // unpack the bounding region
+
+    // Unpack the bounding region.
     const {
       topBound,
       bottomBound,
@@ -109,10 +113,10 @@ export class BoundedDrag extends Drag {
     const width = parseFloat(style.width);
     const height = parseFloat(style.height);
 
-    // Bound
-    x = Math.max(leftBound, Math.min(x, rightBound - width));
-    y = Math.max(topBound, Math.min(y, bottomBound - height));
-    return [x, y];
+    // Bound.
+    left = Math.max(leftBound, Math.min(left, rightBound - width));
+    top = Math.max(topBound, Math.min(top, bottomBound - height));
+    return { left, top };
   }
 
   manualPositionUpdate(xLocation?: number, yLocation?: number): void {

src/grid.ts

@@ -1,6 +1,6 @@
-import { DataGrid } from 'tde-datagrid';
+import { DataGrid, SelectionModel } from 'tde-datagrid';
 import { LabIcon, addIcon } from '@jupyterlab/ui-components';
-import { EditorModel } from './newmodel';
+import { EditorModel } from './model';
 
 export class PaintedGrid extends DataGrid {
   constructor(options: PaintedGrid.IOptions) {
@@ -45,6 +45,30 @@ export class PaintedGrid extends DataGrid {
     return this.defaultSizes.columnWidth;
   }
 
+  /**
+   * Selects cells using the selection model
+   * @param row The row being selected
+   * @param column The column being selected
+   */
+  selectCells(selection: SelectionModel.Selection): void {
+    // Bail if no selection
+    if (!selection) {
+      return;
+    }
+
+    const { r1, r2, c1, c2 } = selection;
+    const select: SelectionModel.SelectArgs = {
+      r1,
+      r2,
+      c1,
+      c2,
+      cursorRow: r1,
+      cursorColumn: c1,
+      clear: 'all'
+    };
+    this.selectionModel.select(select);
+  }
+
   /**
    * @override paints on the ghost row and column as well after painting the other regions.
    * Paint the grid content for the given dirty rect.
@@ -86,13 +110,17 @@ export class PaintedGrid extends DataGrid {
     // Draw the icons.
     const model = this.dataModel as EditorModel;
     if (model && model.isDataFormatted) {
-      this._drawIcons(rx, ry, rw, rh);
+      this._paintDatatypeIcons(rx, ry, rw, rh);
       this.drawCornerHeaderRegion(0, 0, this.headerWidth, this.headerHeight);
     }
   }
 
   /**
    * Draw the ghost row.
+   * @param rx
+   * @param ry
+   * @param rw
+   * @param rh
    */
   private _drawGhostRow(rx: number, ry: number, rw: number, rh: number): void {
     // Get the visible content dimensions.
@@ -136,6 +164,10 @@ export class PaintedGrid extends DataGrid {
 
   /**
    * Draw the ghost column.
+   * @param rx
+   * @param ry
+   * @param rw
+   * @param rh
    */
   private _drawGhostColumn(
     rx: number,
@@ -182,6 +214,13 @@ export class PaintedGrid extends DataGrid {
     this.canvasGC.fillRect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
   }
 
+  /**
+   * Draw the ghost row header
+   * @param rx
+   * @param ry
+   * @param rw
+   * @param rh
+   */
   private _drawGhostRowHeader(
     rx: number,
     ry: number,
@@ -226,9 +265,16 @@ export class PaintedGrid extends DataGrid {
     this.canvasGC.fillStyle = this._extraStyle.ghostRowColor;
     this.canvasGC.fillRect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
 
-    this._drawGhostRowIcon();
+    this._paintGhostRowIcon();
   }
 
+  /**
+   * Draw the ghost column header
+   * @param rx
+   * @param ry
+   * @param rw
+   * @param rh
+   */
   private _drawGhostColumnHeader(
     rx: number,
     ry: number,
@@ -272,10 +318,13 @@ export class PaintedGrid extends DataGrid {
     // Fill the region with the specified color.
     this.canvasGC.fillStyle = this._extraStyle.ghostColumnColor;
     this.canvasGC.fillRect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
-    this._drawColumnIcon();
+    this._paintGhostColumnIcon();
   }
 
-  private _drawGhostRowIcon(): void {
+  /**
+   * Paints the ghost row icon
+   */
+  private _paintGhostRowIcon(): void {
     // Get the dimensions for the cell.
     const cellH = this.defaultSizes.rowHeight;
 
@@ -286,41 +335,20 @@ export class PaintedGrid extends DataGrid {
     if (!iconArgs) {
       return;
     }
-    // Get the current transform state.
-    const transform = this.canvasGC.getTransform();
 
     // Unpack the icon arguments.
     const { icon, color, size, top, left } = iconArgs;
 
-    // Parse the icon path from the icon string.
-    const { defaultSize, path } = Private.parseSVG(icon.svgstr);
-
-    // Create a path 2d object from the path string.
-    const canvasPath = new Path2D(path);
-
-    // Solve for the scaling factor using the provided width or the default.
-    const scale = size / defaultSize;
-
-    // Orient the canvas to the desired origin for the icon.
-    this.canvasGC.translate(
-      left,
-      this.headerHeight + this.bodyHeight - cellH + top - this.scrollY
-    );
+    // Calculate the y position for the icon
+    const y = this.headerHeight + this.bodyHeight - cellH + top - this.scrollY;
 
-    // Scale the canvas.
-    this.canvasGC.scale(scale, scale);
-
-    // Set the canvas fill style.
-    this.canvasGC.fillStyle = color;
-
-    // Draw the icon.
-    this.canvasGC.fill(canvasPath, 'nonzero');
-
-    // Reset the canvas to it's default position.
-    this.canvasGC.setTransform(transform);
+    this._drawIcon(left, y, size, color, icon.svgstr);
   }
 
-  private _drawColumnIcon(): void {
+  /**
+   * Paints the ghost column icon
+   */
+  private _paintGhostColumnIcon(): void {
     // Get the dimensions for the cell.
     const cellW = this.defaultSizes.columnWidth;
 
@@ -332,38 +360,13 @@ export class PaintedGrid extends DataGrid {
       return;
     }
 
-    // Get the current transform state.
-    const transform = this.canvasGC.getTransform();
-
     // Unpack the icon arguments.
     const { icon, color, size, left, top } = iconArgs;
 
-    // Parse the icon path from the icon string.
-    const { defaultSize, path } = Private.parseSVG(icon.svgstr);
+    // Calculate x position for the icon
+    const x = this.headerWidth + this.bodyWidth - cellW + left - this.scrollX;
 
-    // Create a path 2d object from the path string.
-    const canvasPath = new Path2D(path);
-
-    // Solve for the scaling factor using the provided width or the default.
-    const scale = size / defaultSize;
-
-    // Orient to the desired origin for the icon.
-    this.canvasGC.translate(
-      this.headerWidth + this.bodyWidth - cellW + left - this.scrollX,
-      top
-    );
-
-    // Scale the canvas.
-    this.canvasGC.scale(scale, scale);
-
-    // Set the canvas fill style.
-    this.canvasGC.fillStyle = color;
-
-    // Draw the icon.
-    this.canvasGC.fill(canvasPath, 'nonzero');
-
-    // Reset the transform to the initial state
-    this.canvasGC.setTransform(transform);
+    this._drawIcon(x, top, size, color, icon.svgstr);
   }
 
   private _drawOverCorner(
@@ -412,7 +415,19 @@ export class PaintedGrid extends DataGrid {
     this.canvasGC.fillRect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
   }
 
-  private _drawIcons(rx: number, ry: number, rw: number, rh: number): void {
+  /**
+   * Paints the datatype icons (string, number, boolean, date)
+   * @param rx
+   * @param ry
+   * @param rw
+   * @param rh
+   */
+  private _paintDatatypeIcons(
+    rx: number,
+    ry: number,
+    rw: number,
+    rh: number
+  ): void {
     // Get the visible content dimensions.
     const contentW = this.bodyWidth - this.scrollX;
     const contentH = this.headerHeight;
@@ -548,36 +563,54 @@ export class PaintedGrid extends DataGrid {
       // Unpack the icon arguments.
       const { icon, color, size, left, top } = iconArgs;
 
-      // Parse the icon path from the icon string.
-      const { defaultSize, path } = Private.parseSVG(icon.svgstr);
+      this._drawIcon(x + left, y + top, size, color, icon.svgstr);
+
+      // Increment the running X coordinate.
+      x += columnSize;
+    }
+  }
 
-      // Create a path 2d object from the path string.
-      const canvasPath = new Path2D(path);
+  /**
+   * Utilizes the canvas GC to draw the icon in the correct position with the correct styles
+   * @param x The horizontal position of the icon
+   * @param y The vertical position of the icon
+   * @param size The original size of the icon
+   * @param color The fill color for the icon
+   * @param svgstr A string containing the raw contents of the svg file
+   */
+  private _drawIcon(
+    x: number,
+    y: number,
+    size: number,
+    color: string,
+    svgstr: string
+  ): void {
+    // Parse the icon path from the icon string.
+    const { defaultSize, path } = Private.parseSVG(svgstr);
 
-      // Get the default position of the canvas drawer.
-      const transform = this.canvasGC.getTransform();
+    // Solve for the scaling factor using the provided width or the default.
+    const scale = size / defaultSize;
 
-      // Orient to the desired origin for the icon.
-      this.canvasGC.translate(x + left, y + top);
+    // Create a path 2d object from the path string.
+    const canvasPath = new Path2D(path);
 
-      // Solve for the scaling factor using the provided width or the default.
-      const scale = size / defaultSize;
+    // Get the current transform state.
+    const transform = this.canvasGC.getTransform();
 
-      // Scale the canvas.
-      this.canvasGC.scale(scale, scale);
+    // Orient to the desired origin for the icon.
+    this.canvasGC.translate(x, y);
 
-      // Set the canvas fill style.
-      this.canvasGC.fillStyle = color;
+    // Scale the canvas.
+    this.canvasGC.scale(scale, scale);
 
-      // Draw the icon.
-      this.canvasGC.fill(canvasPath, 'nonzero');
+    // Set the canvas fill style.
+    this.canvasGC.fillStyle = color;
 
-      // Reset the transform to the initial state
-      this.canvasGC.setTransform(transform);
+    // Draw the icon.
+    this.canvasGC.fill(canvasPath, 'nonzero');
 
-      // Increment the running X coordinate.
-      x += columnSize;
-    }
+    // Reset the transform to the initial state
+    this.canvasGC.setTransform(transform);
   }
 
   private _extraStyle: PaintedGrid.ExtraStyle;