diff --git a/src/app.tsx b/src/app.tsx index 3dae197..312127c 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -188,6 +188,7 @@ interface Arguments { chartType: ChartType; gedcom?: string; images?: Map; + freezeAnimation?: boolean; } /** @@ -228,6 +229,7 @@ function getArguments(location: H.Location): Arguments { standalone: getParam('standalone') !== 'false', // True by default. source, authcode: getParam('?authcode'), + freezeAnimation: getParam('freeze') === 'true', // False by default // Hourglass is the default view. chartType: chartTypes.get(view) || ChartType.Hourglass, @@ -273,6 +275,8 @@ interface State { /** Source of the data. */ source?: DataSourceEnum; loadingMore?: boolean; + /** Freeze animations after initial chart render. */ + freezeAnimation?: boolean; } export class App extends React.Component { @@ -415,6 +419,7 @@ export class App extends React.Component { standalone: args.standalone, chartType: args.chartType, source: args.source, + freezeAnimation: args.freezeAnimation, }), ); } catch (error) { @@ -550,6 +555,7 @@ export class App extends React.Component { selection={this.state.selection} chartType={this.state.chartType} onSelection={this.onSelection} + freezeAnimation={this.state.freezeAnimation} ref={(ref) => (this.chartRef = ref)} /> {this.state.showSidePanel ? ( diff --git a/src/chart.tsx b/src/chart.tsx index ac13ff5..350dad9 100644 --- a/src/chart.tsx +++ b/src/chart.tsx @@ -133,6 +133,7 @@ export interface ChartProps { selection: IndiInfo; chartType: ChartType; onSelection: (indiInfo: IndiInfo) => void; + freezeAnimation?: boolean; } /** Component showing the genealogy chart and handling transition animations. */ @@ -191,6 +192,11 @@ export class Chart extends React.PureComponent { return; } + // Freeze changing selection after initial rendering. + if (!args.initialRender && this.props.freezeAnimation) { + return; + } + if (args.initialRender) { (d3.select('#chart').node() as HTMLElement).innerHTML = ''; this.chart = createChart({