Merge pull request #47 from mikproto/master

range selection update

src/components/overlay/cellSelectionService.ts

@@ -60,35 +60,36 @@ export default class CellSelectionService {
 
   /** Autofill logic: on mouse move apply based on previous direction (if present) */
   doMouseMove({x, y}: MouseEvent, data: EventData): void {
-    if (this.autoFillInitial) {
-      let current = this.getCurrentCell({x, y}, data);
-      let direction: Partial<Cell>|null;
-      if (this.autoFillLast) {
-        direction = this.getCoordinate(this.autoFillStart, this.autoFillLast);
-      }
+    if (!this.autoFillInitial) {
+      return;
+    }
+    let current = this.getCurrentCell({x, y}, data);
+    let direction: Partial<Cell>|null;
+    if (this.autoFillLast) {
+      direction = this.getCoordinate(this.autoFillStart, this.autoFillLast);
+    }
 
-      // first time or direction equal to start(same as first time)
-      if (!this.autoFillLast || !direction) {
-        direction = this.getLargestDirection(this.autoFillStart, current);
+    // first time or direction equal to start(same as first time)
+    if (!this.autoFillLast || !direction) {
+      direction = this.getLargestDirection(this.autoFillStart, current);
 
-        if (!this.autoFillLast) {
-          this.autoFillLast = this.autoFillStart;
-        }
+      if (!this.autoFillLast) {
+        this.autoFillLast = this.autoFillStart;
       }
+    }
 
-      // nothing changed
-      if (!direction) {
-        return;
-      }
-      each(direction, (v: number, k: keyof Cell) => {
-        if (v) {
-          current = { ...this.autoFillLast, [k]: current[k] };
-        }
-      });
-
-      this.autoFillLast = current;
-      this.config.tempRange(this.autoFillInitial, this.autoFillLast);
+    // nothing changed
+    if (!direction) {
+      return;
     }
+    each(direction, (v: number, k: keyof Cell) => {
+      if (v) {
+        current = { ...this.autoFillLast, [k]: current[k] };
+      }
+    });
+
+    this.autoFillLast = current;
+    this.config.tempRange(this.autoFillInitial, this.autoFillLast);
   }
 
   getLargestDirection(initial: Cell, last: Cell): Partial<Cell>|null {

src/components/overlay/revogr-overlay-selection.tsx

@@ -221,8 +221,12 @@ export class OverlaySelection {
       },
       tempRange: (start, end) => this.selectionStoreService.setTempRange(start, end),
       autoFill: (isAutofill) => {
-        const focus = this.selectionStore.get('focus');
-        if (!focus) {
+        let focus = this.selectionStore.get('focus');
+        const range = this.selectionStore.get('range');
+        if (range) {
+          focus = {x: range.x, y: range.y};
+        }
+        if (!focus && !range) {
           return null;
         }
         this.autoFill = isAutofill;

src/components/revo-grid/revo-grid.default.scss

@@ -1,8 +1,10 @@
 @import './revo-grid.common.scss';
 
 $header-size: 30px;
-$header-shadow: 0 1px 10px rgba(black, .2);
+$header-bg: #f8f9fa;
+$header-border-color: #c0c0c0;
 $default-rows-size: 30px;
+$cell-border-color: #e2e3e3;
 
 revo-grid[theme="default"] {
 	revogr-viewport {
@@ -12,27 +14,24 @@ revo-grid[theme="default"] {
 
 	revogr-header {
 		text-align: center;
-		box-shadow: $header-shadow;
 		line-height: $header-size;
+		background-color: $header-bg;
 
 		.group-row {
 			box-shadow: none;
-
-			.data-header-cell {
-				color: #9493a2;
-			}
+		}
+		.header-row, .group-row {
+			text-transform: uppercase;
+			font-size: 12px;
+			color: #61656a;
 		}
 		.header-row {
 			height: $header-size;
-
-			&:not(.group) {
-				font-weight: 600;
-			}
 		}
 
 		.data-header-cell {
-			$shadow-left: -1px 0 0 0 $cell-border-color;
-			$shadow-right: -1px 0 0 0 $cell-border-color inset;
+			$shadow-left: -1px 0 0 0 $header-border-color;
+			$shadow-right: -1px 0 0 0 $header-border-color inset;
 			$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
 			$shadow-top: 0 -1px 0 0 $header-border-color;
 			box-shadow: $shadow-left, $shadow-right, $shadow-top, $shadow-bottom;
@@ -41,23 +40,28 @@ revo-grid[theme="default"] {
 
 	revogr-viewport-scroll {
 		&.colPinStart {
-			box-shadow: -4px 0 0 rgba(black, .05) inset;
+			revogr-data .row .data-cell:last-child {
+				$cell-shadow-cell: 0 -1px 0 0 $cell-border-color inset, -1px 0 0 0 $header-border-color inset;
+				box-shadow: $cell-shadow-cell;
+			}
+			.footer-wrapper revogr-data .row:first-child .data-cell {
+				$cell-shadow-cell: 0 1px 0 0 $header-border-color inset, -1px 0 0 0 $header-border-color inset;
+				box-shadow: $cell-shadow-cell;
+			}
 		}
 
 		&.colPinEnd {
-			box-shadow: 4px 0 0 rgba(black, .05) inset;
+			&, revogr-header {
+				box-shadow: 1px 0 0 $header-border-color inset;
+			}
 		}
 	}
 
-	.header-wrapper revogr-data {
-		box-shadow: 0 4px 4px rgba(black, .05);
+	.footer-wrapper revogr-data .row:first-child .data-cell {
+		$cell-shadow-cell: 0 1px 0 0 $header-border-color inset, -1px 0 0 0 $cell-border-color inset;
+		box-shadow: $cell-shadow-cell;
 	}
 
-	.footer-wrapper revogr-data {
-		box-shadow: 0 -4px 4px rgba(black, .05);
-	}
-
-
 	revogr-data {
 		$cell-shadow-cell: 0 -1px 0 0 $cell-border-color inset, -1px 0 0 0 $cell-border-color inset;
 		text-align: center;

src/components/revo-grid/revo-grid.tsx

@@ -80,7 +80,7 @@ export class RevoGridComponent {
 
 
   /** Theme name */
-  @Prop({ reflect: true }) theme: ThemeSpace.Theme = 'default';
+  @Prop({ reflect: true, mutable: true }) theme: ThemeSpace.Theme = 'default';
 
 
   /** 

src/global/global.ts

@@ -1,5 +1,5 @@
 import { setMode } from '@stencil/core';
-import { allowedThemes, DEFAULT_THEME } from '../themeManager/themeService';
+import ThemeService from '../themeManager/themeService';
 
 
 setMode(elm => {
@@ -8,9 +8,9 @@ setMode(elm => {
         theme = theme.trim();
     }
 
-    const isAllowed = allowedThemes.indexOf(theme) > -1;
-    if (!isAllowed) {
-        elm.setAttribute('theme', DEFAULT_THEME);
+    const parsedTheme = ThemeService.getTheme(theme);
+    if (parsedTheme !== theme) {
+        elm.setAttribute('theme', parsedTheme);
     }
-    return  isAllowed ? theme : DEFAULT_THEME;
+    return parsedTheme;
 });

src/index.html

@@ -53,7 +53,7 @@
 <body>
     <div class="tile large">
       <div>
-        <revo-grid theme="material"></revo-grid>
+        <revo-grid theme="material2"></revo-grid>
       </div>
     </div>
 

src/services/dimension.provider.ts

@@ -62,7 +62,6 @@ export default class DimensionProvider {
                 break;
         }
         for (let s of stores) {
-            this.viewports.stores[s].clear();
             this.stores[s].setStore(data);
         }
 

src/themeManager/themeService.ts

@@ -27,17 +27,25 @@ export default class ThemeService {
     }
 
     register(theme: ThemeSpace.Theme) {
-        switch(theme) {
-            case 'default':
-                this.currentTheme = new ThemeDefault();
-                break;
+        const parsedTheme = ThemeService.getTheme(theme);
+        switch(parsedTheme) {
             case 'material':
                 this.currentTheme = new ThemeMaterial();
                 break;
             case 'compact':
                 this.currentTheme = new ThemeCompact();
                 break;
+            default:
+                this.currentTheme = new ThemeDefault();
+                break;
         }
 
     }
+
+    static getTheme(theme: string): ThemeSpace.Theme {
+        if (allowedThemes.indexOf(theme) > -1) {
+            return theme as ThemeSpace.Theme;
+        }
+        return DEFAULT_THEME;
+    }
 }

src/utilsExternal/generate-data.js

@@ -56,8 +56,8 @@ export function generateFakeDataObject(rowsNumber, colsNumber) {
     }]); */
     return {
         rows: result,
-        pinnedTopRows,
-        pinnedBottomRows,
+        // pinnedTopRows,
+        // pinnedBottomRows,
         headers
     };
 }