Refactor the RULE_CHANGE to TOGGLE_OVERVIEW event

Closes #365

Previously, the group height is set as hard-coded values and ignores the LineUp/Taggle default config values.

This refactoring uses the taggle options (LineUp default config + ARankingView custom options).

The event `LineUpPanelActions.EVENT_RULE_CHANGED` was removed and replaced with the `LineUpPanelActions.EVENT_TOGGLE_OVERVIEW` which simply returns a boolean. Afterwards the space-filling rule is only instanciated and used in ARankingView.

src/lineup/ARankingView.ts

@@ -1,4 +1,4 @@
-import {EngineRenderer, defaultOptions, updateLodRules, IRule, IGroupData, IGroupItem, isGroup, Column, IColumnDesc, LocalDataProvider, deriveColors, TaggleRenderer, ITaggleOptions, ILocalDataProviderOptions, IDataProviderOptions, IDataRow} from 'lineupjs';
+import {EngineRenderer, defaultOptions, updateLodRules, IRule, IGroupData, IGroupItem, isGroup, Column, IColumnDesc, LocalDataProvider, deriveColors, TaggleRenderer, ITaggleOptions, ILocalDataProviderOptions, IDataProviderOptions, IDataRow, spaceFillingRule} from 'lineupjs';
 import {AView} from '../views/AView';
 import {EViewMode, IViewContext, ISelection} from '../views';
 
@@ -15,7 +15,7 @@ import {debounce, mixin, resolveImmediately} from 'phovea_core/src';
 import LineUpColors from './internal/LineUpColors';
 import {IRow, IServerColumn, IServerColumnDesc} from '../rest';
 import {IContext, ISelectionAdapter, ISelectionColumn} from './selection';
-import LineUpPanelActions, {rule} from './internal/LineUpPanelActions';
+import LineUpPanelActions from './internal/LineUpPanelActions';
 import {addLazyColumn, ILazyLoadedColumn} from './internal/column';
 import {successfullySaved} from '../notifications';
 import {ISecureItem} from 'phovea_core/src/security';
@@ -278,10 +278,10 @@ export abstract class ARankingView extends AView {
     } else if (typeof this.options.itemRowHeight === 'function') {
       const f = this.options.itemRowHeight;
       taggleOptions.dynamicHeight = () => ({
-        defaultHeight: 18,
+        defaultHeight: taggleOptions.rowHeight,
         padding: () => 0,
         height: (item: IGroupItem | IGroupData) => {
-          return isGroup(item) ? 70 : f((<Partial<IDataRow & IGroupItem>>item).v, (<Partial<IDataRow & IGroupItem>>item).i);
+          return isGroup(item) ? taggleOptions.groupHeight : f((<Partial<IDataRow & IGroupItem>>item).v, (<Partial<IDataRow & IGroupItem>>item).i);
         }
       });
     }
@@ -315,13 +315,15 @@ export abstract class ARankingView extends AView {
       this.taggle.zoomIn();
     });
     if (this.options.enableOverviewMode) {
-      this.panel.on(LineUpPanelActions.EVENT_RULE_CHANGED, (_event: any, rule: IRule) => {
-        updateLodRules(this.taggle.style, rule != null, config);
-        (<TaggleRenderer>this.taggle).switchRule(rule);
+      const rule = spaceFillingRule(taggleOptions);
+
+      this.panel.on(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, (_event: any, isOverviewActive: boolean) => {
+        updateLodRules(this.taggle.style, isOverviewActive, taggleOptions);
+        (<TaggleRenderer>this.taggle).switchRule(isOverviewActive ? rule : null);
       });
+
       if (this.options.enableOverviewMode === 'active') {
-        updateLodRules(this.taggle.style, true, config);
-        (<TaggleRenderer>this.taggle).switchRule(rule);
+        this.panel.fire(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, true);
       }
     }
 

src/lineup/internal/LineUpPanelActions.ts

@@ -1,5 +1,5 @@
 
-import {SidePanel, spaceFillingRule, IGroupSearchItem, LocalDataProvider, createStackDesc, IColumnDesc, createScriptDesc, createSelectionDesc, createAggregateDesc, createGroupDesc, Ranking, createImpositionDesc, createNestedDesc, createReduceDesc, IEngineRankingContext, IRenderContext, IRankingHeaderContextContainer} from 'lineupjs';
+import {SidePanel, IGroupSearchItem, LocalDataProvider, createStackDesc, IColumnDesc, createScriptDesc, createSelectionDesc, createAggregateDesc, createGroupDesc, Ranking, createImpositionDesc, createNestedDesc, createReduceDesc, IEngineRankingContext, IRenderContext, IRankingHeaderContextContainer} from 'lineupjs';
 import {IDType, resolve} from 'phovea_core/src/idtype';
 import {IPlugin, IPluginDesc, list as listPlugins} from 'phovea_core/src/plugin';
 import {editDialog} from '../../storage';
@@ -27,13 +27,6 @@ export interface ISearchOption {
   action(): void;
 }
 
-export const rule = spaceFillingRule({
-  groupHeight: 70,
-  rowHeight: 18,
-  groupPadding: 5
-});
-
-
 /**
  * Wraps the score such that the plugin is loaded and the score modal opened, when the factory function is called
  * @param score
@@ -53,7 +46,7 @@ export function wrap(score: IPluginDesc): IScoreLoader {
 export default class LineUpPanelActions extends EventHandler {
   static readonly EVENT_ZOOM_OUT = 'zoomOut';
   static readonly EVENT_ZOOM_IN = 'zoomIn';
-  static readonly EVENT_RULE_CHANGED = 'ruleChanged';
+  static readonly EVENT_TOGGLE_OVERVIEW = 'toggleOverview';
   static readonly EVENT_SAVE_NAMED_SET = 'saveNamedSet';
   /**
    * @deprecated
@@ -80,6 +73,7 @@ export default class LineUpPanelActions extends EventHandler {
 
   constructor(protected readonly provider: LocalDataProvider, ctx: IRankingHeaderContextContainer & IRenderContext & IEngineRankingContext, private readonly options: Readonly<IARankingViewOptions>, doc = document) {
     super();
+
     this.node = doc.createElement('aside');
     this.node.classList.add('lu-side-panel-wrapper');
 
@@ -201,7 +195,7 @@ export default class LineUpPanelActions extends EventHandler {
       const listener = () => {
         const selected = this.overview.classList.toggle('fa-th-list');
         this.overview.classList.toggle('fa-list');
-        this.fire(LineUpPanelActions.EVENT_RULE_CHANGED, selected ? rule : null);
+        this.fire(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, selected);
       };
       const overviewButton = new PanelButton(buttons, i18n.t('tdp:core.lineup.LineupPanelActions.toggleOverview'), this.options.enableOverviewMode === 'active' ? 'fa fa-th-list' : 'fa fa-list', listener);
       this.overview = overviewButton.node; // TODO might be removed