diff --git a/src/lineup/ARankingView.ts b/src/lineup/ARankingView.ts index c81b72a75..6152271de 100644 --- a/src/lineup/ARankingView.ts +++ b/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((>item).v, (>item).i); + return isGroup(item) ? taggleOptions.groupHeight : f((>item).v, (>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); - (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); + (this.taggle).switchRule(isOverviewActive ? rule : null); }); + if (this.options.enableOverviewMode === 'active') { - updateLodRules(this.taggle.style, true, config); - (this.taggle).switchRule(rule); + this.panel.fire(LineUpPanelActions.EVENT_TOGGLE_OVERVIEW, true); } } diff --git a/src/lineup/internal/LineUpPanelActions.ts b/src/lineup/internal/LineUpPanelActions.ts index fd9aa78a6..d9bf44e83 100644 --- a/src/lineup/internal/LineUpPanelActions.ts +++ b/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, 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