play with animation

lineupjs · Apr 6, 2020 · 7183324 · 7183324
1 parent 6f68bf0
commit 7183324
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -46,6 +46,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_engine_resize_animation_duration: 1000ms !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
@@ -19,7 +19,10 @@
 
 .#{$lu_css_prefix}-resize-helper {
   display: none;
-  transition: transform 1s linear !important;
+}
+
+.#{$lu_css_prefix}-resize-helper.#{$lu_css_prefix}-resize-animated {
+  transition: transform $lu_engine_resize_animation_duration linear !important;
 }
 
 .#{$lu_css_prefix}-resize-helper.#{$lu_css_prefix}-resizing {

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -68,6 +68,11 @@ export const CSS_PREFIX = getStyle('lu_css_prefix', 'lu');
 /** @internal */
 export const ENGINE_CSS_PREFIX = 'le';
 
+/** @internal */
+export const RESIZE_SPACE = parseInt(getStyle('lu_engine_resize_space', '50px'), 10);
+/** @internal */
+export const RESIZE_ANIMATION_DURATION = parseInt(getStyle('lu_engine_resize_animation_duration', '1000ms'), 10);
+
 /** @internal */
 export function cssClass(suffix?: string) {
   return suffix? `${CSS_PREFIX}-${suffix}` : CSS_PREFIX;

diff --git a/src/ui/EngineRenderer.ts b/src/ui/EngineRenderer.ts
@@ -124,8 +124,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>`);
+      // helper object for better resizing experience
+      const footer = this.table.node.querySelector(`.${engineCssClass('body')} .${engineCssClass('footer')}`)!;
+      const copy = <HTMLElement>footer.cloneNode(true);
+      copy.classList.add(cssClass('resize-helper'));
+      footer!.insertAdjacentElement('afterend', copy);
     }
 
     //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, engineCssClass} from '../styles';
+import {aria, cssClass, engineCssClass, RESIZE_ANIMATION_DURATION, RESIZE_SPACE} from '../styles';
 import MoreColumnOptionsDialog from './dialogs/MoreColumnOptionsDialog';
 import {IRankingHeaderContext, IToolbarAction, IOnClickHandler} from './interfaces';
 import {getToolbar} from './toolbar';
@@ -308,7 +308,9 @@ export function dragWidth(col: Column, node: HTMLElement) {
     start = end;
     const width = Math.max(0, col.getWidth() + delta);
 
-    sizeHelper.style.transform = `${currentFooterTransformation} translate(${width - originalWidth}px,0)`;
+    sizeHelper.classList.toggle(cssClass('resize-animated'), width < originalWidth);
+    // no idea why shifted by the size compared to the other footer element
+    sizeHelper.style.transform = `${currentFooterTransformation} translate(${width - originalWidth - RESIZE_SPACE}px, 0px)`;
 
     node.style.width = `${width}px`;
     col.setWidth(width);
@@ -327,8 +329,8 @@ export function dragWidth(col: Column, node: HTMLElement) {
     ueberElement.classList.remove(cssClass('resizing'));
     node.style.width = null;
     setTimeout(() => {
-      sizeHelper.classList.remove(cssClass('resizing'));
-    }, 1200); // after animation ended
+      sizeHelper.classList.remove(cssClass('resizing'), cssClass('resize-animated'));
+    }, RESIZE_ANIMATION_DURATION * 1.2); // after animation ended
 
     if (Math.abs(start - end) < 2) {
       //ignore
@@ -354,7 +356,7 @@ export function dragWidth(col: Column, node: HTMLElement) {
 
     sizeHelper = <HTMLElement>node.closest(`.${engineCssClass()}`)!.querySelector<HTMLElement>(`.${cssClass('resize-helper')}`);
     currentFooterTransformation = (<HTMLElement>sizeHelper.previousElementSibling!).style.transform!;
-    sizeHelper.style.transform = currentFooterTransformation;
+    sizeHelper.style.transform = `${currentFooterTransformation} translate(${-RESIZE_SPACE}px, 0px)`;
     sizeHelper.classList.add(cssClass('resizing'));
   };
   handle.onclick = (evt) => {