From c988f4180e45471777d517ec35ce9315cda7411e Mon Sep 17 00:00:00 2001 From: Przemek Wiech Date: Mon, 18 Nov 2019 22:28:06 +0100 Subject: [PATCH] Added fancy tree as an experimental feature --- package-lock.json | 94 ++++++++++++---------------------------- package.json | 2 +- src/app.tsx | 14 +++--- src/chart.tsx | 17 +++++++- src/top_bar.tsx | 7 +++ src/translations/pl.json | 1 + 6 files changed, 60 insertions(+), 75 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4073159..eddbdb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3622,8 +3622,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3644,14 +3643,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3666,20 +3663,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3796,8 +3790,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3809,7 +3802,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3824,7 +3816,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3832,14 +3823,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3858,7 +3847,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3939,8 +3927,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3952,7 +3939,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4038,8 +4024,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -4075,7 +4060,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4095,7 +4079,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4139,14 +4122,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -7238,9 +7219,9 @@ "dev": true }, "handlebars": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.1.tgz", - "integrity": "sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==", + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz", + "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==", "dev": true, "requires": { "neo-async": "^2.6.0", @@ -8501,8 +8482,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8523,14 +8503,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8545,20 +8523,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8675,8 +8650,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8688,7 +8662,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8703,7 +8676,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8711,14 +8683,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8737,7 +8707,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8818,8 +8787,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8831,7 +8799,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8917,8 +8884,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -8954,7 +8920,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8974,7 +8939,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9018,14 +8982,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } } @@ -14596,9 +14558,9 @@ "dev": true }, "topola": { - "version": "2.3.9", - "resolved": "https://registry.npmjs.org/topola/-/topola-2.3.9.tgz", - "integrity": "sha512-nrVs6QsyBJPpEoAwZkL2anV1G5CnFh5cxIE4uTJrXCL3curvST5OJxKDjA2RDkImzVMPrvRRZ9lDmXCQsp0QBg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/topola/-/topola-2.4.0.tgz", + "integrity": "sha512-ncLg4eDFeF1UNXEcpJvrm8iMnNCtTVsDg8hWHJr83UMSfiV8EwcvklyhoKjB1uRsp/E+eSKOMJb44Acgn5BM1w==", "requires": { "array-flat-polyfill": "^1.0.1", "d3": "^5.4.0", diff --git a/package.json b/package.json index 98182b5..1bb2cce 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "react-router-dom": "^4.3.1", "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^0.84.0", - "topola": "^2.3.9" + "topola": "^2.4.0" }, "devDependencies": { "@types/array.prototype.flatmap": "^1.2.0", diff --git a/src/app.tsx b/src/app.tsx index f39e80a..58b65ee 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -40,11 +40,7 @@ interface ErrorPopupProps { function ErrorPopup(props: ErrorPopupProps) { return ( - + @@ -230,9 +226,13 @@ export class App extends React.Component { const handleCors = getParam('handleCors') !== 'false'; // True by default. const standalone = getParam('standalone') !== 'false'; // True by default. const view = getParam('view'); + + const chartTypes = new Map([ + ['relatives', ChartType.Relatives], + ['fancy', ChartType.Fancy], + ]); // Hourglass is the default view. - const chartType = - view === 'relatives' ? ChartType.Relatives : ChartType.Hourglass; + const chartType = chartTypes.get(view) || ChartType.Hourglass; const gedcom = this.props.location.state && this.props.location.state.data; const images = diff --git a/src/chart.tsx b/src/chart.tsx index 9a45ee8..ae8f667 100644 --- a/src/chart.tsx +++ b/src/chart.tsx @@ -11,6 +11,8 @@ import { DetailedRenderer, HourglassChart, RelativesChart, + FancyChart, + CircleRenderer, } from 'topola'; /** Called when the view is dragged with the mouse. */ @@ -106,6 +108,7 @@ function canvasToBlob(canvas: HTMLCanvasElement, type: string) { export enum ChartType { Hourglass, Relatives, + Fancy, } export interface ChartProps { @@ -125,12 +128,24 @@ export class Chart extends React.PureComponent { return HourglassChart; case ChartType.Relatives: return RelativesChart; + case ChartType.Fancy: + return FancyChart; default: // Fall back to hourglass chart. return HourglassChart; } } + private getRendererType() { + switch (this.props.chartType) { + case ChartType.Fancy: + return CircleRenderer; + default: + // Use DetailedRenderer by default. + return DetailedRenderer; + } + } + /** * Renders the chart or performs a transition animation to a new state. * If indiInfo is not given, it means that it is the initial render and no @@ -142,7 +157,7 @@ export class Chart extends React.PureComponent { this.chart = createChart({ json: this.props.data, chartType: this.getChartType(), - renderer: DetailedRenderer, + renderer: this.getRendererType(), svgSelector: '#chart', indiCallback: (info) => this.props.onSelection(info), animate: true, diff --git a/src/top_bar.tsx b/src/top_bar.tsx index fa11c7f..d93ed6e 100644 --- a/src/top_bar.tsx +++ b/src/top_bar.tsx @@ -326,6 +326,13 @@ export class TopBar extends React.Component< defaultMessage="All relatives" /> + this.changeView('fancy')}> + + + diff --git a/src/translations/pl.json b/src/translations/pl.json index ca5985d..a907f04 100644 --- a/src/translations/pl.json +++ b/src/translations/pl.json @@ -9,6 +9,7 @@ "menu.view": "Widok", "menu.hourglass": "Wykres klepsydrowy", "menu.relatives": "Wszyscy krewni", + "menu.fancy": "Ozdobne drzewo (eksperymentalne)", "menu.github": "Źródła na GitHub", "menu.powered_by": "Topola Genealogy", "menu.search.placeholder": "Szukaj osoby",