major changes on scroll and mobile support for some events

Author: m2a2x

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  singleQuote: true,
+};

.prettierrc.json

@@ -4,7 +4,6 @@
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
   "quoteProps": "consistent",
-  "printWidth": 180,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.4.0-next.12",
+  "version": "4.4.0-next.20",
   "description": "Virtual reactive data grid component - RevoGrid.",
   "license": "MIT",
   "directories": {
@@ -90,7 +90,7 @@
     "bootstrap": "^5.2.3"
   },
   "dependencies": {
-    "@stencil/core": "^3.2.2",
+    "@stencil/core": "^3.3.0",
     "lodash": "^4.17.21"
   }
 }

src/components.d.ts

@@ -397,6 +397,10 @@ export namespace Components {
           * Custom editors register
          */
         "editors": Edition.Editors;
+        /**
+          * Is mobile view mode
+         */
+        "isMobileDevice": boolean;
         /**
           * Last cell position
          */
@@ -464,7 +468,7 @@ export namespace Components {
           * update on delta in case we don't know existing position or external change
           * @param e
          */
-        "changeScroll": (e: RevoGrid.ViewPortScrollEvent) => Promise<RevoGrid.ViewPortScrollEvent>;
+        "changeScroll": (e: RevoGrid.ViewPortScrollEvent, silent?: boolean) => Promise<RevoGrid.ViewPortScrollEvent>;
         /**
           * Height of inner content
          */
@@ -1162,6 +1166,10 @@ declare namespace LocalJSX {
           * Custom editors register
          */
         "editors"?: Edition.Editors;
+        /**
+          * Is mobile view mode
+         */
+        "isMobileDevice"?: boolean;
         /**
           * Last cell position
          */
@@ -1287,7 +1295,14 @@ declare namespace LocalJSX {
         "contentWidth"?: number;
         "onResizeViewport"?: (event: RevogrViewportScrollCustomEvent<RevoGrid.ViewPortResizeEvent>) => void;
         "onScrollViewport"?: (event: RevogrViewportScrollCustomEvent<RevoGrid.ViewPortScrollEvent>) => void;
-        "onScrollchange"?: (event: RevogrViewportScrollCustomEvent<{ type: RevoGrid.DimensionType; hasScroll: boolean }>) => void;
+        "onScrollchange"?: (event: RevogrViewportScrollCustomEvent<{
+    type: RevoGrid.DimensionType;
+    hasScroll: boolean;
+  }>) => void;
+        /**
+          * Silently scroll to coordinate Made to align negative coordinates for mobile devices
+         */
+        "onSilentScroll"?: (event: RevogrViewportScrollCustomEvent<RevoGrid.ViewPortScrollEvent>) => void;
     }
     interface IntrinsicElements {
         "revo-grid": RevoGrid;

src/components/overlay/autofill.service.tsx

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import { DebouncedFunc } from 'lodash';
 
 import { h } from '@stencil/core';
-import { CELL_HANDLER_CLASS } from '../../utils/consts';
+import { CELL_HANDLER_CLASS, MOBILE_CLASS } from '../../utils/consts';
 import { Observable, Selection, RevoGrid, Edition } from '../../interfaces';
 import { EventData, getCell, getCurrentCell, isAfterLast } from './selection.utils';
 import { getRange } from '../../store/selection/selection.helpers';
@@ -69,16 +69,29 @@ export class AutoFillService {
     }
     return (
       <div
-        class={CELL_HANDLER_CLASS}
-        style={{ left: `${handlerStyle.right}px`, top: `${handlerStyle.bottom}px` }}
-        onMouseDown={(e: MouseEvent) => {
-          this.selectionStart(e.target as HTMLElement, this.sv.getData(), AutoFillType.autoFill);
-          e.preventDefault();
+        class={{
+          [CELL_HANDLER_CLASS]: true,
+          [MOBILE_CLASS]: true,
         }}
+        style={{ left: `${handlerStyle.right}px`, top: `${handlerStyle.bottom}px` }}
+        onMouseDown={(e: MouseEvent) => this.autoFillHandler(e)}
+        onTouchStart={(e: TouchEvent) => this.autoFillHandler(e)}
       />
     );
   }
 
+  private autoFillHandler(e: MouseEvent | TouchEvent, type = AutoFillType.autoFill) {
+    let target: Element | null = null;
+    if (e.target instanceof Element) {
+      target = e.target;
+    }
+    if (!target) {
+      return;
+    }
+    this.selectionStart(target, this.sv.getData(), type);
+    e.preventDefault();
+  }
+
   get isAutoFill() {
     return !!this.autoFillType;
   }
@@ -113,7 +126,13 @@ export class AutoFillService {
     if (!this.autoFillInitial) {
       return;
     }
-    const current = getCurrentCell({ x: getFromEvent(event, 'clientX'), y: getFromEvent(event, 'clientY') }, data);
+    const x = getFromEvent(event, 'clientX', MOBILE_CLASS);
+    const y = getFromEvent(event, 'clientY', MOBILE_CLASS);
+    // skip touch
+    if (x === null || y === null) {
+      return;
+    }
+    const current = getCurrentCell({ x, y }, data);
 
     // first time or direction equal to start(same as first time)
     if (!this.autoFillLast) {
@@ -146,7 +165,7 @@ export class AutoFillService {
    * Can be triggered from MouseDown selection on element
    * Or can be triggered on corner square drag
    */
-  selectionStart(target: HTMLElement, data: EventData, type = AutoFillType.selection) {
+  selectionStart(target: Element, data: EventData, type = AutoFillType.selection) {
     /** Get cell by autofill element */
     const { top, left } = target.getBoundingClientRect();
     this.autoFillInitial = this.getFocus();

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

@@ -4,15 +4,15 @@ import { AllDimensionType, ApplyFocusEvent, FocusRenderEvent, Edition, Observabl
 import ColumnService from '../data/columnService';
 import SelectionStoreService from '../../store/selection/selection.store.service';
 import { codesLetter } from '../../utils/keyCodes';
-import { SELECTION_BORDER_CLASS } from '../../utils/consts';
+import { MOBILE_CLASS, SELECTION_BORDER_CLASS } from '../../utils/consts';
 import { DataSourceState } from '../../store/dataSource/data.store';
 import { isRangeSingleCell } from '../../store/selection/selection.helpers';
 import { getCurrentCell, getElStyle } from './selection.utils';
 import { isEditInput } from './editors/edit.utils';
 import { KeyboardService } from './keyboard.service';
 import { AutoFillService } from './autofill.service';
 import { ClipboardService } from './clipboard.service';
-import { getFromEvent } from '../../utils/events';
+import { getFromEvent, verifyTouchTarget } from '../../utils/events';
 
 @Component({
   tag: 'revogr-overlay-selection',
@@ -80,11 +80,20 @@ export class OverlaySelection {
    * Custom editors register
    */
   @Prop() editors: Edition.Editors;
-  /** If true applys changes when cell closes if not Escape */
+  /**
+   * If true applys changes when cell closes if not Escape
+   */
   @Prop() applyChangesOnClose: boolean = false;
-  /** Additional data to pass to renderer */
+  /**
+   * Additional data to pass to renderer
+   */
   @Prop() additionalData: any;
 
+  /**
+   * Is mobile view mode
+   */
+  @Prop() isMobileDevice: boolean;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -299,7 +308,11 @@ export class OverlaySelection {
 
   private renderRange(range: Selection.RangeArea) {
     const style = getElStyle(range, this.dimensionRow.state, this.dimensionCol.state);
-    return [<div class={SELECTION_BORDER_CLASS} style={style} />];
+    return [
+      <div class={SELECTION_BORDER_CLASS} style={style}>
+        {this.isMobileDevice && <div class="range-handlers"><span class={MOBILE_CLASS}></span><span class={MOBILE_CLASS}></span></div>}
+      </div>
+    ];
   }
 
   private renderEditCell() {
@@ -389,6 +402,7 @@ export class OverlaySelection {
     }
     return (
       <Host
+        class={{ mobile: this.isMobileDevice }}
         // run edit on dblclick
         onDblClick={(e: MouseEvent) => {
           // if dblclick prevented outside edit will not start
@@ -397,7 +411,7 @@ export class OverlaySelection {
           }
         }}
         onMouseDown={(e: MouseEvent) => this.onElementMouseDown(e)}
-        onTouchStart={(e: TouchEvent) => this.onElementMouseDown(e)}>
+        onTouchStart={(e: TouchEvent) => this.onElementMouseDown(e, true)}>
         {els}
         <slot name="data" />
       </Host>
@@ -454,7 +468,7 @@ export class OverlaySelection {
     return !e.defaultPrevented;
   }
 
-  protected onElementMouseDown(e: MouseEvent | TouchEvent) {
+  protected onElementMouseDown(e: MouseEvent | TouchEvent, touch = false) {
     // Ignore focus if clicked input
     if (isEditInput(e.target as HTMLElement | undefined)) {
       return;
@@ -463,14 +477,24 @@ export class OverlaySelection {
     if (e.defaultPrevented) {
       return;
     }
+    const x = getFromEvent(e, 'clientX');
+    const y = getFromEvent(e, 'clientY');
+    // skip touch
+    if (x === null || y === null) {
+      return;
+    }
     // Regular cell click
-    const focusCell = getCurrentCell({ x: getFromEvent(e, 'clientX'), y: getFromEvent(e, 'clientY') }, data);
+    const focusCell = getCurrentCell({ x, y }, data);
     this.selectionStoreService.focus(focusCell, this.range && e.shiftKey);
 
     // Initiate autofill selection
     if (this.range) {
       this.autoFillService.selectionStart(e.target as HTMLElement, data);
-      e.preventDefault();
+      if (!touch) {
+        e.preventDefault();
+      } else if (verifyTouchTarget((e as TouchEvent).touches[0], MOBILE_CLASS)) {
+        e.preventDefault();
+      }
     }
   }
 

src/components/overlay/revogr-overlay-style.scss

@@ -1,29 +1,92 @@
-revogr-overlay-selection {
-  display: block;
-  position: relative;
-  width: 100%;
-
+@mixin autofill-handle($handler-size: 14px, $icon-size: 10px) {
   .autofill-handle {
-    $handler-size: 10px;
     position: absolute;
     width: $handler-size;
     height: $handler-size;
-    background: $selection-border;
     margin-left: -$handler-size + 1;
     margin-top: -$handler-size + 1;
-    border: 1px solid white;
-    box-sizing: border-box;
     z-index: 10;
     cursor: crosshair;
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: $icon-size;
+      height: $icon-size;
+      background: $selection-border;
+      border: 1px solid white;
+      box-sizing: border-box;
+    }
+  }
+}
+
+revogr-overlay-selection {
+  display: block;
+  position: relative;
+  width: 100%;
+
+
+  @include autofill-handle;
+
+  &.mobile {
+    @include autofill-handle(30px, 12px);
   }
 
   .selection-border-range {
     position: absolute;
     pointer-events: none;
     z-index: 9;
-  }
 
-  .selection-border-range {
+    .range-handlers {
+      height: 100%;
+      background-color: transparent;
+      width: calc(50% + (50% / 2));
+      max-width: 50px;
+      min-width: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      position: absolute;
+
+      $btn-size: 20px;
+      $handler-w: 15px;
+      $handler-h: 5px;
+      
+      > span {
+        pointer-events: auto;
+        height: $btn-size;
+        width: $btn-size;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+
+
+        &:before, &:after {
+          position: absolute;
+          border-radius: 5px;
+          width: $handler-w;
+          height: $handler-h;
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: rgba(black, 20%);
+        }
+        &:first-child {
+          top: -($handler-h + 2px);
+          &:before{
+            content: '';
+            top: 0;
+          }
+        }
+        &:last-child {
+          bottom: -($handler-h + 2px);
+          &:after{
+            content: '';
+            bottom: 0;
+          }
+        }
+      }
+    }
     @include selection();
   }