use a css animation helper for resize animation

lineupjs · Mar 31, 2020 · df09426 · df09426
1 parent d74607b
commit df09426
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -45,6 +45,7 @@ $lu_hist_color: #c1c1c1;
 
 $lu_engine_grip_gap: 5px !default;
 $lu_engine_row_outline_width: 2px !default;
+$lu_engine_resize_space: 50px !default;
 
 $lu_missing_dash_height: 3px !default;
 $lu_missing_dash_width: 10px !default;

diff --git a/src/styles/engine/_index.scss b/src/styles/engine/_index.scss
@@ -12,10 +12,18 @@
   box-sizing: border-box;
 }
 
-.le-footer {
-
+.#{$engine_css_prefix}-footer {
   // extra space to the right using a width for easier last column resizing
-  width: 50px;
+  width: $lu_engine_resize_space;
+}
+
+.#{$lu_css_prefix}-resize-helper {
+  display: none;
+  transition: transform 1s linear !important;
+}
+
+.#{$lu_css_prefix}-resize-helper.#{$lu_css_prefix}-resizing {
+  display: unset;
 }
 
 @import './header';

diff --git a/src/ui/EngineRenderer.ts b/src/ui/EngineRenderer.ts
@@ -6,7 +6,7 @@ import {DataProvider} from '../provider';
 import {isSummaryGroup, groupEndLevel} from '../provider/internal';
 import {IImposer, IRenderContext} from '../renderer';
 import {chooseGroupRenderer, chooseRenderer, chooseSummaryRenderer, getPossibleRenderer} from '../renderer/renderers';
-import {cssClass} from '../styles';
+import {cssClass, engineCssClass} from '../styles';
 import DialogManager from './dialogs/DialogManager';
 import domElementCache from './domElementCache';
 import EngineRanking, {IEngineRankingContext} from './EngineRanking';
@@ -122,6 +122,11 @@ export default class EngineRenderer extends AEventDispatcher {
 
     this.table = new MultiTableRowRenderer(this.node, this.idPrefix);
 
+    {
+      const footer = this.table.node.querySelector(`.${engineCssClass('body')} .${engineCssClass('footer')}`);
+      footer!.insertAdjacentHTML('afterend', `<div class="${engineCssClass('footer')} ${cssClass('resize-helper')}">&nbsp;</div>`);
+    }
+
     //apply rules
     {
 

diff --git a/src/ui/header.ts b/src/ui/header.ts
@@ -2,7 +2,7 @@ import {MIN_LABEL_WIDTH} from '../constants';
 import {equalArrays, dragAble, dropAble, hasDnDType, IDropResult} from '../internal';
 import {categoryOf, getSortType} from '../model';
 import {createNestedDesc, createReduceDesc, createStackDesc, IColumnDesc, isArrayColumn, isBoxPlotColumn, isCategoricalColumn, isMapColumn, isNumberColumn, isNumbersColumn, Column, ImpositionCompositeColumn, ImpositionCompositesColumn, createImpositionDesc, createImpositionsDesc, ImpositionBoxPlotColumn, createImpositionBoxPlotDesc, CompositeColumn, IMultiLevelColumn, isMultiLevelColumn} from '../model';
-import {aria, cssClass} from '../styles';
+import {aria, cssClass, engineCssClass} from '../styles';
 import MoreColumnOptionsDialog from './dialogs/MoreColumnOptionsDialog';
 import {IRankingHeaderContext, IToolbarAction, IOnClickHandler} from './interfaces';
 import {getToolbar} from './toolbar';
@@ -276,22 +276,28 @@ function toggleToolbarIcons(node: HTMLElement, col: Column, defaultVisibleClient
  */
 export function dragWidth(col: Column, node: HTMLElement) {
   let ueberElement: HTMLElement;
+  let sizeHelper: HTMLElement;
+  let currentFooterTransformation = '';
   const handle = <HTMLElement>node.getElementsByClassName(cssClass('handle'))[0];
 
 
   let start = 0;
+  let originalWidth = 0;
   const mouseMove = (evt: MouseEvent) => {
     evt.stopPropagation();
     evt.preventDefault();
     const end = evt.clientX;
     const delta = end - start;
-    const width = Math.max(0, col.getWidth() + delta);
 
     if (Math.abs(start - end) < 2) {
       //ignore
       return;
     }
     start = end;
+    const width = Math.max(0, col.getWidth() + delta);
+
+    sizeHelper.style.transform = `${currentFooterTransformation} translate(${width - originalWidth}px,0)`;
+
     node.style.width = `${width}px`;
     col.setWidth(width);
     toggleToolbarIcons(node, col);
@@ -308,6 +314,9 @@ export function dragWidth(col: Column, node: HTMLElement) {
     ueberElement.removeEventListener('mouseleave', mouseUp);
     ueberElement.classList.remove(cssClass('resizing'));
     node.style.width = null;
+    setTimeout(() => {
+      sizeHelper.classList.remove(cssClass('resizing'));
+    }, 1200); // after animation ended
 
     if (Math.abs(start - end) < 2) {
       //ignore
@@ -323,12 +332,18 @@ export function dragWidth(col: Column, node: HTMLElement) {
     evt.preventDefault();
     node.classList.add(cssClass('change-width'));
 
+    originalWidth = col.getWidth();
     start = evt.clientX;
     ueberElement = <HTMLElement>node.closest('body') || <HTMLElement>node.closest(`.${cssClass()}`)!; // take the whole body or root lineup
     ueberElement.addEventListener('mousemove', mouseMove);
     ueberElement.addEventListener('mouseup', mouseUp);
     ueberElement.addEventListener('mouseleave', mouseUp);
     ueberElement.classList.add(cssClass('resizing'));
+
+    sizeHelper = <HTMLElement>node.closest(`.${engineCssClass()}`)!.querySelector<HTMLElement>(`.${cssClass('resize-helper')}`);
+    currentFooterTransformation = (<HTMLElement>sizeHelper.previousElementSibling!).style.transform!;
+    sizeHelper.style.transform = currentFooterTransformation;
+    sizeHelper.classList.add(cssClass('resizing'));
   };
   handle.onclick = (evt) => {
     // avoid resorting