mirror of
https://github.com/PeWu/topola-viewer.git
synced 2026-04-22 22:46:16 +00:00
Added fancy tree as an experimental feature
This commit is contained in:
94
package-lock.json
generated
94
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
14
src/app.tsx
14
src/app.tsx
@@ -40,11 +40,7 @@ interface ErrorPopupProps {
|
||||
function ErrorPopup(props: ErrorPopupProps) {
|
||||
return (
|
||||
<Portal open={props.open} onClose={props.onDismiss}>
|
||||
<Message
|
||||
negative
|
||||
className="errorPopup"
|
||||
onDismiss={props.onDismiss}
|
||||
>
|
||||
<Message negative className="errorPopup" onDismiss={props.onDismiss}>
|
||||
<Message.Header>
|
||||
<FormattedMessage id="error.error" defaultMessage={'Error'} />
|
||||
</Message.Header>
|
||||
@@ -230,9 +226,13 @@ export class App extends React.Component<RouteComponentProps, {}> {
|
||||
const handleCors = getParam('handleCors') !== 'false'; // True by default.
|
||||
const standalone = getParam('standalone') !== 'false'; // True by default.
|
||||
const view = getParam('view');
|
||||
|
||||
const chartTypes = new Map<string | undefined, ChartType>([
|
||||
['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 =
|
||||
|
||||
@@ -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<ChartProps, {}> {
|
||||
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<ChartProps, {}> {
|
||||
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,
|
||||
|
||||
@@ -326,6 +326,13 @@ export class TopBar extends React.Component<
|
||||
defaultMessage="All relatives"
|
||||
/>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item onClick={() => this.changeView('fancy')}>
|
||||
<Icon name="users" />
|
||||
<FormattedMessage
|
||||
id="menu.fancy"
|
||||
defaultMessage="Fancy tree (experimental)"
|
||||
/>
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user