Merge branch 'lineup-v4' into sgratzl/drag

lineupjs · Apr 16, 2020 · a471095 · a471095
2 parents f375324 + e11ed21
commit a471095
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 72 deletions.
diff --git a/cypress/integration/pr292_data_mapping.spec.ts b/cypress/integration/pr292_data_mapping.spec.ts
@@ -0,0 +1,34 @@
+import {withLineUp, waitReady, LineUpJSType, LineUp} from './utils/lineup';
+import {generateData} from './utils/data';
+import {openMoreDialog, closeDialog, resetDialog} from './utils/ui';
+
+describe('pr292_data_mapping', () => {
+  let lineup: LineUp;
+  let lineUpJS: LineUpJSType;
+  before(withLineUp((l, document) => {
+    lineUpJS = l;
+    const arr = generateData({
+      number: 1,
+      string: 0,
+      date: 0,
+      cat: 0
+    });
+
+    lineup = lineUpJS.asLineUp(document.body, arr);
+    waitReady(lineup);
+  }));
+
+  function openDataMappingDialog() {
+    // open more menu
+    return openMoreDialog('[data-type=number]', 'data-mapping');
+  }
+
+  it('reset domain value', () => {
+    openDataMappingDialog().within(() => {
+      cy.get('input[type=number]:first').invoke('val', '0.2');
+      resetDialog();
+      cy.get('input[type=number]:first').should('not.have.value', '0.2');
+    });
+    closeDialog('cancel');
+  });
+});
diff --git a/src/renderer/DateHistogramCellRenderer.ts b/src/renderer/DateHistogramCellRenderer.ts
@@ -164,7 +164,7 @@ function createFilterContext(col: IDateColumn, context: IRenderContext, domain:
         const dialogCtx = {
           attachment,
           manager: context.dialogManager,
-          level: 1,
+          level: context.dialogManager.maxLevel + 1,
           idPrefix: context.idPrefix
         };
         const dialog = new InputDateDialog(dialogCtx, (d) => resolve(d == null ? NaN : shiftFilterDateDay(d.getTime(), type)), {value: isNaN(value) ? null : new Date(value)});

diff --git a/src/renderer/HistogramCellRenderer.ts b/src/renderer/HistogramCellRenderer.ts
@@ -234,7 +234,7 @@ function createFilterContext(col: IMapAbleColumn, context: {idPrefix: string, di
         const dialogCtx = {
           attachment,
           manager: context.dialogManager,
-          level: 1,
+          level: context.dialogManager.maxLevel + 1,
           idPrefix: context.idPrefix
         };
         const dialog = new InputNumberDialog(dialogCtx, resolve, {

diff --git a/src/renderer/histogram.ts b/src/renderer/histogram.ts
@@ -106,8 +106,8 @@ export function filteredHistTemplate<T>(c: IFilterContext<T>, f: IFilterInfo<T>)
   return `
     <div class="${cssClass('histogram-min-hint')}" style="width: ${c.percent(f.filterMin)}%"></div>
     <div class="${cssClass('histogram-max-hint')}" style="width: ${100 - c.percent(f.filterMax)}%"></div>
-    <div class="${cssClass('histogram-min')}" data-value="${c.format(f.filterMin)}" style="left: ${c.percent(f.filterMin)}%" title="min filter, drag or shift click to change"></div>
-    <div class="${cssClass('histogram-max')}" data-value="${c.format(f.filterMax)}" style="right: ${100 - c.percent(f.filterMax)}%" title="max filter, drag or shift click to change"></div>
+    <div class="${cssClass('histogram-min')}" data-value="${c.format(f.filterMin)}" style="left: ${c.percent(f.filterMin)}%" title="min filter, drag or double click to change"></div>
+    <div class="${cssClass('histogram-max')}" data-value="${c.format(f.filterMax)}" style="right: ${100 - c.percent(f.filterMax)}%" title="max filter, drag or double click to change"></div>
     ${filterMissingNumberMarkup(f.filterMissing, 0)}
   `;
 }
@@ -126,10 +126,7 @@ export function initFilter<T>(node: HTMLElement, context: IFilterContext<T>) {
     context.setFilter(filterMissing.checked, minValue, maxValue);
   };
 
-  min.onclick = (evt) => {
-    if (!evt.shiftKey && !evt.ctrlKey) {
-      return;
-    }
+  const minImpl = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 
@@ -144,10 +141,15 @@ export function initFilter<T>(node: HTMLElement, context: IFilterContext<T>) {
     });
   };
 
-  max.onclick = (evt) => {
+  min.onclick = (evt) => {
     if (!evt.shiftKey && !evt.ctrlKey) {
       return;
     }
+    minImpl(evt);
+  };
+  min.ondblclick = minImpl;
+
+  const maxImpl = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 
@@ -162,6 +164,14 @@ export function initFilter<T>(node: HTMLElement, context: IFilterContext<T>) {
     });
   };
 
+  max.onclick = (evt) => {
+    if (!evt.shiftKey && !evt.ctrlKey) {
+      return;
+    }
+    maxImpl(evt);
+  };
+  max.ondblclick = maxImpl;
+
   filterMissing.onchange = () => setFilter();
 
   const options: Partial<IDragHandleOptions> = {

diff --git a/src/styles/_dialogs.scss b/src/styles/_dialogs.scss
@@ -102,6 +102,10 @@
     float: right;
     color: darken($lu_toolbar_color_base, 20%); // slightly darker primary action
   }
+
+  &[title=Remove] {
+    color: darken($lu_toolbar_color_base, 20%); // slightly darker primary action
+  }
 }
 
 .#{$lu_css_prefix}-dialog-sub-nested {

diff --git a/src/styles/_mappingeditor.scss b/src/styles/_mappingeditor.scss
@@ -19,7 +19,6 @@
 }
 
 div.#{$lu_css_prefix}-dialog-mapper-script {
-  margin-top: 1em;
   display: none;
 
   textarea {
@@ -30,37 +29,53 @@ div.#{$lu_css_prefix}-dialog-mapper-script {
   }
 }
 
+.#{$lu_css_prefix}-dialog-mapper-domain,
+.#{$lu_css_prefix}-dialog-mapper-range {
+  transform: translate(0, 24px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 14px;
+  border-bottom: 3px solid $lu_mapping_box;
+  padding: 0.4em 2px 20px;
+  text-align: center;
+}
+
+.#{$lu_css_prefix}-dialog-mapper-range {
+  padding: 20px 2px 0.4em;
+  transform: translate(0, -24px);
+  border-bottom: none;
+  border-top: 3px solid $lu_mapping_box;
+  justify-content: space-around;
+}
+
 svg.#{$lu_css_prefix}-dialog-mapper-details {
   shape-rendering: geometricprecision;
+  z-index: 1;
   height: 25em * 6 / 10;
+  background: transparent;
 
   rect {
     fill: transparent;
     stroke: none;
   }
 
   line {
-    stroke: $lu_mapping_bg;
-    stroke-width: 1;
+    stroke: $lu_mapping_handle;
+    stroke-width: 0.8;
     stroke-linejoin: round;
     stroke-linecap: round;
 
-    &:not([x1]) {
-
-      // the horizontal lines
-      stroke-width: 1.5;
-    }
-
     &[data-v] {
       stroke-opacity: 0.5;
       stroke-width: 0.5;
-      stroke: $lu_toolbar_color_base2;
+      stroke: $lu_mapping_line;
       pointer-events: none;
     }
   }
 
   circle {
-    fill: $lu_mapping_circle;
+    fill: $lu_mapping_handle;
   }
 }
 
@@ -74,9 +89,11 @@ g.#{$lu_css_prefix}-dialog-mapper-mapping {
 
   &.#{$lu_css_prefix}-frozen circle:first-of-type {
     cursor: not-allowed;
-    fill: $lu_mapping_circle !important;
+    fill: $lu_mapping_handle !important;
+    transform: scale(0.4);
   }
 
+  &.#{$lu_css_prefix}-mapping-line-selected,
   &:hover {
     circle {
       fill: $lu_mapping_hover;
@@ -86,6 +103,29 @@ g.#{$lu_css_prefix}-dialog-mapper-mapping {
       stroke: $lu_mapping_hover;
     }
   }
+
+  &.#{$lu_css_prefix}-frozen > .#{$lu_css_prefix}-dialog-mapper-mapping-domain {
+    display: none;
+  }
+}
+
+.#{$lu_css_prefix}-dialog-mapper-mapping-domain {
+  pointer-events: none;
+  font-size: 4px;
+}
+
+.#{$lu_css_prefix}-dialog-mapper-mapping-range {
+  pointer-events: none;
+  font-size: 4px;
+  dominant-baseline: hanging;
+}
+
+.#{$lu_css_prefix}-dialog-mapper-mapping-right {
+  text-anchor: end;
+}
+
+.#{$lu_css_prefix}-dialog-mapper-mapping-middle {
+  text-anchor: middle;
 }
 
 .#{$lu_css_prefix}-dialog-mapper[data-scale=script] div.#{$lu_css_prefix}-dialog-mapper-script {

diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -54,9 +54,10 @@ $lu_missing_dash_color: #c1c1c1 !default;
 
 $lu_axis_color: #c1c1c1 !default;
 
-$lu_mapping_circle: $lu_toolbar_color_base2;
-$lu_mapping_hover: $lu_selected_color;
-$lu_mapping_bg: $lu_toolbar_color_hover;
+$lu_mapping_box: $lu_toolbar_color_base !default;
+$lu_mapping_line: $lu_hover_color !default;
+$lu_mapping_handle: $lu_toolbar_color_hover !default;
+$lu_mapping_hover: $lu_selected_color !default;
 
 $lu_side_panel_bg_color: #f0f0f0 !default;
 $lu_side_panel_toolbar_bg: #6d6c6c !default;

diff --git a/src/styles/engine/_index.scss b/src/styles/engine/_index.scss
@@ -13,6 +13,7 @@
 }
 
 .#{$engine_css_prefix}-footer {
+
   // extra space to the right using a width for easier last column resizing
   width: $lu_engine_resize_space;
 }

diff --git a/src/ui/dialogs/ADialog.ts b/src/ui/dialogs/ADialog.ts
@@ -14,6 +14,7 @@ export interface IDialogOptions {
   eventsEnabled?: boolean;
   modifiers?: Popper.Modifiers;
   toggleDialog: boolean;
+  cancelSubDialogs?: boolean;
 }
 
 export interface IDialogContext {
@@ -40,6 +41,7 @@ abstract class ADialog {
     popup: false,
     placement: 'bottom-start',
     toggleDialog: true,
+    cancelSubDialogs: false,
     modifiers: {
     }
   };
@@ -160,6 +162,12 @@ abstract class ADialog {
       };
     }
 
+    if (this.options.cancelSubDialogs) {
+      this.node.addEventListener('click', () => {
+        this.dialog.manager.removeAboveLevel(this.dialog.level + 1);
+      });
+    }
+
     this.dialog.manager.push(this);
   }
 

diff --git a/src/ui/dialogs/DateFilterDialog.ts b/src/ui/dialogs/DateFilterDialog.ts
@@ -12,7 +12,8 @@ export default class DateFilterDialog extends ADialog {
 
   constructor(private readonly column: DateColumn, dialog: IDialogContext) {
     super(dialog, {
-      livePreview: 'filter'
+      livePreview: 'filter',
+      cancelSubDialogs: true,
     });
     this.before = this.column.getFilter() || noDateFilter();
   }

diff --git a/src/ui/dialogs/DialogManager.ts b/src/ui/dialogs/DialogManager.ts
@@ -61,6 +61,10 @@ export default class DialogManager extends AEventDispatcher {
     return super.on(type, listener);
   }
 
+  get maxLevel() {
+    return this.openDialogs.reduce((acc, a) => Math.max(acc, a.level), 0);
+  }
+
 
   setHighlight(mask: { left: number, top: number, width: number, height: number }) {
     const area = <HTMLElement>this.node.firstElementChild;