Merge pull request #581 from revolist/event-description-update

docs: event description improved

src/components.d.ts

@@ -1079,14 +1079,14 @@ declare global {
         "setedit": BeforeEdit;
         "beforeapplyrange": FocusRenderEvent;
         "beforesetrange": any;
-        "beforeeditrender": FocusRenderEvent;
         "setrange": RangeArea & { type: MultiDimensionType };
+        "beforeeditrender": FocusRenderEvent;
         "selectall": any;
         "canceledit": any;
         "settemprange": Nullable<TempRange> | null;
         "beforesettemprange": { tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType;
         "applyfocus": FocusRenderEvent;
-        "focuscell": ApplyFocusEvent;
+        "focuscell": ApplyFocusEvent & FocusRenderEvent;
         "beforerangedataapply": FocusRenderEvent;
         "selectionchangeinit": ChangedRange;
         "beforerangecopyapply": ChangedRange;
@@ -1344,11 +1344,11 @@ declare namespace LocalJSX {
     order: Record<ColumnProp, 'asc' | 'desc' | undefined>;
   }>) => void;
         /**
-          * Triggered after data applied or range changed.
+          * After data applied or range changed.
          */
         "onAfteredit"?: (event: RevoGridCustomEvent<AfterEditEvent>) => void;
         /**
-          * Triggered after focus render finished. Can be used to access a focus element through `event.target`. This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
+          * After focus render finished. Can be used to access a focus element through `event.target`. This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
          */
         "onAfterfocus"?: (event: RevoGridCustomEvent<FocusAfterRenderEvent>) => void;
         /**
@@ -1382,11 +1382,11 @@ declare namespace LocalJSX {
     source: DataType[];
   }>) => void;
         /**
-          * This event is triggered before autofill is applied. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
+          * Before autofill is applied. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
          */
         "onBeforeautofill"?: (event: RevoGridCustomEvent<ChangedRange>) => void;
         /**
-          * This event is triggered before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
+          * Before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
          */
         "onBeforecellfocus"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void;
         /**
@@ -1398,7 +1398,7 @@ declare namespace LocalJSX {
          */
         "onBeforecolumnsset"?: (event: RevoGridCustomEvent<ColumnCollection>) => void;
         /**
-          * This event is triggered before the data is edited. To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`. To override the edit result with your own value, set the `e.val` property to your desired value.
+          * Before the data is edited. To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`. To override the edit result with your own value, set the `e.val` property to your desired value.
          */
         "onBeforeedit"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void;
         /**
@@ -1421,35 +1421,35 @@ declare namespace LocalJSX {
     itemsToFilter: Record<number, boolean>;
   }>) => void;
         /**
-          * This event is triggered before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
+          * Before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
          */
         "onBeforefocuslost"?: (event: RevoGridCustomEvent<FocusedData | null>) => void;
         /**
           * Emmited before the grid is rendered.
          */
         "onBeforegridrender"?: (event: RevoGridCustomEvent<any>) => void;
         /**
-          * Triggered before range applied. Use e.preventDefault() to prevent range.
+          * Before autofill is applied. Runs before beforeautofill event. Use e.preventDefault() to prevent range.
          */
         "onBeforerange"?: (event: RevoGridCustomEvent<ChangedRange>) => void;
         /**
-          * This event is triggered before applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
+          * Before applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
          */
         "onBeforerangeedit"?: (event: RevoGridCustomEvent<BeforeRangeSaveDataDetails>) => void;
         /**
           * Emitted before the row definition is applied. Useful for modifying or preventing the default row definition behavior.
          */
         "onBeforerowdefinition"?: (event: RevoGridCustomEvent<{ vals: any; oldVals: any }>) => void;
         /**
-          * Triggered by sorting.plugin.ts Before sorting event. Initial sorting triggered, if this event stops no other event called. Use e.preventDefault() to prevent sorting.
+          * By sorting.plugin.ts Before sorting event. Initial sorting triggered, if this event stops no other event called. Use e.preventDefault() to prevent sorting.
          */
         "onBeforesorting"?: (event: RevoGridCustomEvent<{
     column: ColumnRegular;
     order: 'desc' | 'asc';
     additive: boolean;
   }>) => void;
         /**
-          * Triggered by sorting.plugin.ts Before sorting apply. Use e.preventDefault() to prevent sorting data change.
+          * By sorting.plugin.ts Before sorting apply. Use e.preventDefault() to prevent sorting data change.
          */
         "onBeforesortingapply"?: (event: RevoGridCustomEvent<{
     column: ColumnRegular;
@@ -1495,7 +1495,7 @@ declare namespace LocalJSX {
          */
         "onRowheaderschanged"?: (event: RevoGridCustomEvent<any>) => void;
         /**
-          * This event is triggered before the order of `rgRow` is applied. To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
+          * Before the order of `rgRow` is applied. To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
          */
         "onRoworderchanged"?: (event: RevoGridCustomEvent<{ from: number; to: number }>) => void;
         /**
@@ -2053,7 +2053,7 @@ declare namespace LocalJSX {
          */
         "onBeforesettemprange"?: (event: RevogrOverlaySelectionCustomEvent<{ tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType>) => void;
         /**
-          * Used for editors support when editor close requested.
+          * Cancel edit. Used for editors support when editor close requested.
          */
         "onCanceledit"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
         /**
@@ -2071,25 +2071,25 @@ declare namespace LocalJSX {
         /**
           * Cell get focused. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
          */
-        "onFocuscell"?: (event: RevogrOverlaySelectionCustomEvent<ApplyFocusEvent>) => void;
+        "onFocuscell"?: (event: RevogrOverlaySelectionCustomEvent<ApplyFocusEvent & FocusRenderEvent>) => void;
         /**
           * Range data apply. Triggers datasource edit on the root level.
          */
         "onRangeeditapply"?: (event: RevogrOverlaySelectionCustomEvent<BeforeRangeSaveDataDetails>) => void;
         /**
-          * Select all.
+          * Select all cells from keyboard.
          */
         "onSelectall"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
         /**
-          * Selection range changed.
+          * Autofill data in range. First step in applyRangeWithData
          */
         "onSelectionchangeinit"?: (event: RevogrOverlaySelectionCustomEvent<ChangedRange>) => void;
         /**
           * Set edit cell.
          */
         "onSetedit"?: (event: RevogrOverlaySelectionCustomEvent<BeforeEdit>) => void;
         /**
-          * Set range.
+          * Set range. Third step in triggerRangeEvent.
          */
         "onSetrange"?: (event: RevogrOverlaySelectionCustomEvent<RangeArea & { type: MultiDimensionType }>) => void;
         /**

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

@@ -171,32 +171,36 @@ export class OverlaySelection {
   @Event({ eventName: 'setedit' }) setEdit: EventEmitter<BeforeEdit>;
 
   /**
-   * Before range applied. First step in triggerRangeEvent.
+   * Before range applied.
+   * First step in triggerRangeEvent.
    */
   @Event({ eventName: 'beforeapplyrange' })
   beforeApplyRange: EventEmitter<FocusRenderEvent>;
   /**
-   * Before range selection applied. Second step in triggerRangeEvent.
+   * Before range selection applied.
+   * Second step in triggerRangeEvent.
    */
   @Event({ eventName: 'beforesetrange' }) beforeSetRange: EventEmitter;
 
-  /**
-   * Before editor render.
-   */
-  @Event({ eventName: 'beforeeditrender' })
-  beforeEditRender: EventEmitter<FocusRenderEvent>;
-
   /**
    * Set range.
+   * Third step in triggerRangeEvent.
    */
   @Event({ eventName: 'setrange' }) setRange: EventEmitter<
     RangeArea & { type: MultiDimensionType }
   >;
 
-  /** Select all. */
+  /**
+   * Before editor render.
+   */
+  @Event({ eventName: 'beforeeditrender' })
+  beforeEditRender: EventEmitter<FocusRenderEvent>;
+
+
+  /** Select all cells from keyboard. */
   @Event({ eventName: 'selectall' }) selectAll: EventEmitter;
   /**
-   * Used for editors support when editor close requested.
+   * Cancel edit. Used for editors support when editor close requested.
    */
   @Event({ eventName: 'canceledit' }) cancelEdit: EventEmitter;
 
@@ -225,11 +229,11 @@ export class OverlaySelection {
    * Cell get focused.
    * To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
    */
-  @Event({ eventName: 'focuscell' }) focusCell: EventEmitter<ApplyFocusEvent>;
+  @Event({ eventName: 'focuscell' }) focusCell: EventEmitter<ApplyFocusEvent & FocusRenderEvent>;
   /** Range data apply. */
   @Event({ eventName: 'beforerangedataapply' })
   beforeRangeDataApply: EventEmitter<FocusRenderEvent>;
-  /** Selection range changed. */
+  /** Autofill data in range. First step in applyRangeWithData */
   @Event({ eventName: 'selectionchangeinit', cancelable: true })
   selectionChange: EventEmitter<ChangedRange>;
   /** Before range copy. */
@@ -622,6 +626,7 @@ export class OverlaySelection {
    * Executes the focus operation on the specified range of cells.
    */
   private doFocus(focus: Cell, end: Cell, changes?: Partial<Cell>) {
+    // 1. Trigger beforeFocus event
     const { defaultPrevented } = this.beforeFocusCell.emit(
       this.columnService.getSaveData(focus.y, focus.x),
     );
@@ -639,11 +644,15 @@ export class OverlaySelection {
       rowDimension: { ...this.dimensionRow.state },
       colDimension: { ...this.dimensionCol.state },
     };
+
+    // 2. Trigger apply focus event
     const applyEvent = this.applyFocus.emit(evData);
     if (applyEvent.defaultPrevented) {
       return false;
     }
     const { range } = applyEvent.detail;
+
+    // 3. Trigger focus event
     return !this.focusCell.emit({
       focus: {
         x: range.x,
@@ -659,6 +668,7 @@ export class OverlaySelection {
 
   private triggerRangeEvent(range: RangeArea) {
     const type = this.types.rowType;
+    // 1. Apply range
     const applyEvent = this.beforeApplyRange.emit({
       range: { ...range },
       ...this.types,
@@ -672,7 +682,12 @@ export class OverlaySelection {
       applyEvent.detail.range,
       this.dataStore,
     );
+    // 2. Before set range
     let e = this.beforeSetRange.emit(data);
+    if (e.defaultPrevented) {
+      return false;
+    }
+    // 3. Set range
     e = this.setRange.emit({ ...applyEvent.detail.range, type });
     if (e.defaultPrevented) {
       return false;

src/components/revoGrid/revo-grid.tsx

@@ -308,50 +308,50 @@ export class RevoGridComponent {
   @Event() contentsizechanged: EventEmitter<MultiDimensionType>;
 
   /**
-   * This event is triggered before the data is edited.
+   * Before the data is edited.
    * To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`.
    * To override the edit result with your own value, set the `e.val` property to your desired value.
    */
   @Event() beforeedit: EventEmitter<BeforeSaveDataDetails>;
 
   /**
-   * This event is triggered before applying range data, specifically when a range selection occurs.
+   * Before applying range data, specifically when a range selection occurs.
    * To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
    */
   @Event() beforerangeedit: EventEmitter<BeforeRangeSaveDataDetails>;
 
   /**
-   * Triggered after data applied or range changed.
+   * After data applied or range changed.
    */
   @Event() afteredit: EventEmitter<AfterEditEvent>;
 
   /**
-   * This event is triggered before autofill is applied.
+   * Before autofill is applied.
    * To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
    */
   @Event() beforeautofill: EventEmitter<ChangedRange>;
 
   /**
-   * Triggered before range applied.
+   * Before autofill is applied. Runs before beforeautofill event.
    * Use e.preventDefault() to prevent range.
    */
   @Event() beforerange: EventEmitter<ChangedRange>;
 
   /**
-   * Triggered after focus render finished.
+   * After focus render finished.
    * Can be used to access a focus element through `event.target`.
    * This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
    */
   @Event() afterfocus: EventEmitter<FocusAfterRenderEvent>;
 
   /**
-   * This event is triggered before the order of `rgRow` is applied.
+   * Before the order of `rgRow` is applied.
    * To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
    */
   @Event() roworderchanged: EventEmitter<{ from: number; to: number }>;
 
   /**
-   * Triggered by sorting.plugin.ts
+   * By sorting.plugin.ts
    * Before sorting apply.
    * Use e.preventDefault() to prevent sorting data change.
    */
@@ -362,7 +362,7 @@ export class RevoGridComponent {
   }>;
 
   /**
-   * Triggered by sorting.plugin.ts
+   * By sorting.plugin.ts
    * Before sorting event.
    * Initial sorting triggered, if this event stops no other event called.
    * Use e.preventDefault() to prevent sorting.
@@ -389,13 +389,13 @@ export class RevoGridComponent {
   @Event() headerclick: EventEmitter<ColumnRegular>;
 
   /**
-   * This event is triggered before the cell focus is changed.
+   * Before the cell focus is changed.
    * To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
    */
   @Event() beforecellfocus: EventEmitter<BeforeSaveDataDetails>;
 
   /**
-   * This event is triggered before the grid focus is lost.
+   * Before the grid focus is lost.
    * To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
    */
   @Event() beforefocuslost: EventEmitter<FocusedData | null>;

src/types/events.ts

@@ -77,8 +77,8 @@ export type RevogridEvents = 'contentsizechanged'|
   'setedit'|
   'beforeapplyrange'|
   'beforesetrange'|
-  'beforeeditrender'|
   'setrange'|
+  'beforeeditrender'|
   'selectall'|
   'canceledit'|
   'settemprange'|
@@ -181,8 +181,8 @@ export const REVOGRID_EVENTS = new Map<RevogridEvents, RevogridEvents>([
   ['setedit', 'setedit'],
   ['beforeapplyrange', 'beforeapplyrange'],
   ['beforesetrange', 'beforesetrange'],
-  ['beforeeditrender', 'beforeeditrender'],
   ['setrange', 'setrange'],
+  ['beforeeditrender', 'beforeeditrender'],
   ['selectall', 'selectall'],
   ['canceledit', 'canceledit'],
   ['settemprange', 'settemprange'],