\n \n \n this.zoom(1 / ZOOM_FACTOR)}\n >\n −\n \n \n \n
\n );\n }\n\n /** Return a copy of the SVG chart but without scaling and positioning. */\n private getStrippedSvg() {\n const svg = document.getElementById('chartSvg')!.cloneNode(true) as Element;\n\n svg.removeAttribute('transform');\n const parent = select('#svgContainer').node() as Element;\n const scale = zoomTransform(parent).k;\n svg.setAttribute(\n 'width',\n String(Number(svg.getAttribute('width')) / scale),\n );\n svg.setAttribute(\n 'height',\n String(Number(svg.getAttribute('height')) / scale),\n );\n svg.querySelector('#chart')!.removeAttribute('transform');\n\n return svg;\n }\n\n private getSvgContents() {\n return new XMLSerializer().serializeToString(this.getStrippedSvg());\n }\n\n private async getSvgContentsWithInlinedImages() {\n const svg = this.getStrippedSvg();\n await inlineImages(svg);\n return new XMLSerializer().serializeToString(svg);\n }\n\n /** Shows the print dialog to print the currently displayed chart. */\n print() {\n const printWindow = document.createElement('iframe');\n printWindow.style.position = 'absolute';\n printWindow.style.top = '-1000px';\n printWindow.style.left = '-1000px';\n printWindow.onload = () => {\n printWindow.contentDocument!.open();\n printWindow.contentDocument!.write(this.getSvgContents());\n printWindow.contentDocument!.close();\n // Doesn't work on Firefox without the setTimeout.\n setTimeout(() => {\n printWindow.contentWindow!.focus();\n printWindow.contentWindow!.print();\n printWindow.parentNode!.removeChild(printWindow);\n }, 500);\n };\n document.body.appendChild(printWindow);\n }\n\n async downloadSvg() {\n const contents = await this.getSvgContentsWithInlinedImages();\n const blob = new Blob([contents], {type: 'image/svg+xml'});\n saveAs(blob, 'topola.svg');\n }\n\n private async drawOnCanvas(): Promise\n {line} \n
\n
\n ))}\n \n );\n}\n\n/**\n * Returns the data for the given GEDCOM entry as an array of lines. Supports\n * continuations with CONT and CONC.\n */\nfunction getData(entry: GedcomEntry) {\n const result = [entry.data];\n entry.tree.forEach((subentry) => {\n if (subentry.tag === 'CONC' && subentry.data) {\n const last = result.length - 1;\n result[last] += subentry.data;\n } else if (subentry.tag === 'CONT' && subentry.data) {\n result.push(subentry.data);\n }\n });\n return result;\n}\n\nfunction eventDetails(entry: GedcomEntry, intl: InjectedIntl) {\n const lines = [];\n if (entry.data && entry.data.length > 1) {\n lines.push({entry.data});\n }\n const date = entry.tree.find((subentry) => subentry.tag === 'DATE');\n if (date && date.data) {\n lines.push(translateDate(date.data, intl));\n }\n const place = entry.tree.find((subentry) => subentry.tag === 'PLAC');\n if (place && place.data) {\n lines.push(...getData(place));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n \n
{translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction dataDetails(entry: GedcomEntry) {\n const lines = [];\n if (entry.data) {\n lines.push(...getData(entry));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n {translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction noteDetails(entry: GedcomEntry) {\n return joinLines(\n getData(entry).map((line, index) => {line}),\n );\n}\n\nfunction nameDetails(entry: GedcomEntry) {\n return (\n \n {entry.data\n .split('/')\n .filter((name) => !!name)\n .map((name, index) => (\n \n {name}\n
\n \n ))}\n
\n );\n}\n\nfunction getDetails(\n entries: GedcomEntry[],\n tags: string[],\n detailsFunction: (entry: GedcomEntry) => JSX.Element | null,\n): JSX.Element[] {\n return flatMap(tags, (tag) =>\n entries\n .filter((entry) => entry.tag === tag)\n .map((entry) => detailsFunction(entry)),\n )\n .filter((element) => element !== null)\n .map((element, index) => (\n \n
\n {element}\n
\n ));\n}\n\n/**\n * Returns true if there is displayable information in this entry.\n * Returns false if there is no data in this entry or this is only a reference\n * to another entry.\n */\nfunction hasData(entry: GedcomEntry) {\n return entry.tree.length > 0 || (entry.data && !entry.data.startsWith('@'));\n}\n\nfunction getOtherDetails(entries: GedcomEntry[]) {\n return entries\n .filter(\n (entry) =>\n !EXCLUDED_TAGS.includes(entry.tag) && !EVENT_TAGS.includes(entry.tag),\n )\n .filter(hasData)\n .map((entry) => dataDetails(entry))\n .filter((element) => element !== null)\n .map((element, index) => (\n \n {element}\n
\n ));\n}\n\n/**\n * If the entry is a reference to a top-level entry, the referenced entry is\n * returned. Otherwise, returns the given entry unmodified.\n */\nfunction dereference(entry: GedcomEntry, gedcom: GedcomData) {\n if (entry.data) {\n const dereferenced = gedcom.other[pointerToId(entry.data)];\n if (dereferenced) {\n return dereferenced;\n }\n }\n return entry;\n}\n\nexport class Details extends React.Component\n {getDetails(entries, ['NAME'], nameDetails)}\n {getDetails(entries, EVENT_TAGS, (entry) =>\n eventDetails(entry, this.context.intl as InjectedIntl),\n )}\n {getOtherDetails(entriesWithData)}\n {getDetails(entriesWithData, ['NOTE'], noteDetails)}\n
\n );\n }\n}\n","import {analyticsEvent} from '../util/analytics';\nimport {convertGedcom, getSoftware, TopolaData} from '../util/gedcom_util';\nimport {DataSource, DataSourceEnum, SourceSelection} from './data_source';\nimport {IndiInfo, JsonGedcomData} from 'topola';\nimport {TopolaError} from '../util/error';\n\n/**\n * Returns a valid IndiInfo object, either with the given indi and generation\n * or with an individual taken from the data and generation 0.\n */\nexport function getSelection(\n data: JsonGedcomData,\n selection?: IndiInfo,\n): IndiInfo {\n // If ID is not given or it doesn't exist in the data, use the first ID in\n // the data.\n const id =\n selection && data.indis.some((i) => i.id === selection.id)\n ? selection.id\n : data.indis[0].id;\n return {id, generation: selection?.generation || 0};\n}\n\nfunction prepareData(\n gedcom: string,\n cacheId: string,\n images?: Map\n
\n
\n
- \n
- \n
{' '}\n \n GENPOL\n \n )\n \n - \n
{' '}\n \n webtreeprint.com\n \n )\n \n - \n
{' '}\n \n Famous Family Trees\n \n )\n \n
\n \n
\n version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (\n
\n \n \n \n \n \n \n \n \n \n \n \n {contents} \n \n \n \n \n \n \n
\n );\n}\n","import * as React from 'react';\nimport {\n Menu,\n Dropdown,\n MenuItemProps,\n DropdownItemProps,\n} from 'semantic-ui-react';\n\nexport enum MenuType {\n Menu,\n Dropdown,\n}\n\ninterface Props {\n menuType?: MenuType;\n}\n\nexport class MenuItem extends React.Component<\n Props & MenuItemProps & DropdownItemProps\n> {\n render() {\n const newProps = {...this.props};\n // Remove menuType from props to avoid error message in the console.\n delete newProps.menuType;\n return (\n <>\n {this.props.menuType === MenuType.Menu ? (\n {props.message}
\n{props.message}
\n\n (this.chartRef = ref)}\n />\n {this.state.showSidePanel ? (\n \n \n ) : null}\n
\n );\n\n case AppState.ERROR:\n return \n Topola Genealogy Viewer does not support Internet Explorer. Please try a\n different (modern) browser.\n
,\n document.querySelector('#root'),\n );\n} else {\n ReactDOM.render(\n\n \n \n this.zoom(1 / ZOOM_FACTOR)}\n >\n −\n \n \n \n
\n );\n }\n\n /** Return a copy of the SVG chart but without scaling and positioning. */\n private getStrippedSvg() {\n const svg = document.getElementById('chartSvg')!.cloneNode(true) as Element;\n\n svg.removeAttribute('transform');\n const parent = select('#svgContainer').node() as Element;\n const scale = zoomTransform(parent).k;\n svg.setAttribute(\n 'width',\n String(Number(svg.getAttribute('width')) / scale),\n );\n svg.setAttribute(\n 'height',\n String(Number(svg.getAttribute('height')) / scale),\n );\n svg.querySelector('#chart')!.removeAttribute('transform');\n\n return svg;\n }\n\n private getSvgContents() {\n return new XMLSerializer().serializeToString(this.getStrippedSvg());\n }\n\n private async getSvgContentsWithInlinedImages() {\n const svg = this.getStrippedSvg();\n await inlineImages(svg);\n return new XMLSerializer().serializeToString(svg);\n }\n\n /** Shows the print dialog to print the currently displayed chart. */\n print() {\n const printWindow = document.createElement('iframe');\n printWindow.style.position = 'absolute';\n printWindow.style.top = '-1000px';\n printWindow.style.left = '-1000px';\n printWindow.onload = () => {\n printWindow.contentDocument!.open();\n printWindow.contentDocument!.write(this.getSvgContents());\n printWindow.contentDocument!.close();\n // Doesn't work on Firefox without the setTimeout.\n setTimeout(() => {\n printWindow.contentWindow!.focus();\n printWindow.contentWindow!.print();\n printWindow.parentNode!.removeChild(printWindow);\n }, 500);\n };\n document.body.appendChild(printWindow);\n }\n\n async downloadSvg() {\n const contents = await this.getSvgContentsWithInlinedImages();\n const blob = new Blob([contents], {type: 'image/svg+xml'});\n saveAs(blob, 'topola.svg');\n }\n\n private async drawOnCanvas(): Promise\n {line} \n
\n
\n ))}\n \n );\n}\n\n/**\n * Returns the data for the given GEDCOM entry as an array of lines. Supports\n * continuations with CONT and CONC.\n */\nfunction getData(entry: GedcomEntry) {\n const result = [entry.data];\n entry.tree.forEach((subentry) => {\n if (subentry.tag === 'CONC' && subentry.data) {\n const last = result.length - 1;\n result[last] += subentry.data;\n } else if (subentry.tag === 'CONT' && subentry.data) {\n result.push(subentry.data);\n }\n });\n return result;\n}\n\nfunction eventDetails(entry: GedcomEntry, intl: InjectedIntl) {\n const lines = [];\n if (entry.data && entry.data.length > 1) {\n lines.push({entry.data});\n }\n const date = entry.tree.find((subentry) => subentry.tag === 'DATE');\n if (date && date.data) {\n lines.push(translateDate(date.data, intl));\n }\n const place = entry.tree.find((subentry) => subentry.tag === 'PLAC');\n if (place && place.data) {\n lines.push(...getData(place));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n \n
{translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction dataDetails(entry: GedcomEntry) {\n const lines = [];\n if (entry.data) {\n lines.push(...getData(entry));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n {translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction noteDetails(entry: GedcomEntry) {\n return joinLines(\n getData(entry).map((line, index) => {line}),\n );\n}\n\nfunction nameDetails(entry: GedcomEntry) {\n return (\n \n {entry.data\n .split('/')\n .filter((name) => !!name)\n .map((name, index) => (\n \n {name}\n
\n \n ))}\n
\n );\n}\n\nfunction getDetails(\n entries: GedcomEntry[],\n tags: string[],\n detailsFunction: (entry: GedcomEntry) => JSX.Element | null,\n): JSX.Element[] {\n return flatMap(tags, (tag) =>\n entries\n .filter((entry) => entry.tag === tag)\n .map((entry) => detailsFunction(entry)),\n )\n .filter((element) => element !== null)\n .map((element, index) => (\n \n
\n {element}\n
\n ));\n}\n\n/**\n * Returns true if there is displayable information in this entry.\n * Returns false if there is no data in this entry or this is only a reference\n * to another entry.\n */\nfunction hasData(entry: GedcomEntry) {\n return entry.tree.length > 0 || (entry.data && !entry.data.startsWith('@'));\n}\n\nfunction getOtherDetails(entries: GedcomEntry[]) {\n return entries\n .filter(\n (entry) =>\n !EXCLUDED_TAGS.includes(entry.tag) && !EVENT_TAGS.includes(entry.tag),\n )\n .filter(hasData)\n .map((entry) => dataDetails(entry))\n .filter((element) => element !== null)\n .map((element, index) => (\n \n {element}\n
\n ));\n}\n\n/**\n * If the entry is a reference to a top-level entry, the referenced entry is\n * returned. Otherwise, returns the given entry unmodified.\n */\nfunction dereference(entry: GedcomEntry, gedcom: GedcomData) {\n if (entry.data) {\n const dereferenced = gedcom.other[pointerToId(entry.data)];\n if (dereferenced) {\n return dereferenced;\n }\n }\n return entry;\n}\n\nexport class Details extends React.Component\n {getDetails(entries, ['NAME'], nameDetails)}\n {getDetails(entries, EVENT_TAGS, (entry) =>\n eventDetails(entry, this.context.intl as InjectedIntl),\n )}\n {getOtherDetails(entriesWithData)}\n {getDetails(entriesWithData, ['NOTE'], noteDetails)}\n
\n );\n }\n}\n","import {analyticsEvent} from '../util/analytics';\nimport {convertGedcom, getSoftware, TopolaData} from '../util/gedcom_util';\nimport {DataSource, DataSourceEnum, SourceSelection} from './data_source';\nimport {IndiInfo, JsonGedcomData} from 'topola';\nimport {TopolaError} from '../util/error';\n\n/**\n * Returns a valid IndiInfo object, either with the given indi and generation\n * or with an individual taken from the data and generation 0.\n */\nexport function getSelection(\n data: JsonGedcomData,\n selection?: IndiInfo,\n): IndiInfo {\n // If ID is not given or it doesn't exist in the data, use the first ID in\n // the data.\n const id =\n selection && data.indis.some((i) => i.id === selection.id)\n ? selection.id\n : data.indis[0].id;\n return {id, generation: selection?.generation || 0};\n}\n\nfunction prepareData(\n gedcom: string,\n cacheId: string,\n images?: Map\n
\n
\n
- \n
- \n
{' '}\n \n GENPOL\n \n )\n \n - \n
{' '}\n \n webtreeprint.com\n \n )\n \n - \n
{' '}\n \n Famous Family Trees\n \n )\n \n
\n \n
\n version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (\n
\n \n \n \n \n \n \n \n \n \n \n \n {contents} \n \n \n \n \n \n \n
\n );\n}\n","import * as React from 'react';\nimport {\n Menu,\n Dropdown,\n MenuItemProps,\n DropdownItemProps,\n} from 'semantic-ui-react';\n\nexport enum MenuType {\n Menu,\n Dropdown,\n}\n\ninterface Props {\n menuType?: MenuType;\n}\n\nexport class MenuItem extends React.Component<\n Props & MenuItemProps & DropdownItemProps\n> {\n render() {\n const newProps = {...this.props};\n // Remove menuType from props to avoid error message in the console.\n delete newProps.menuType;\n return (\n <>\n {this.props.menuType === MenuType.Menu ? (\n {props.message}
\n{props.message}
\n\n (this.chartRef = ref)}\n />\n {this.state.showSidePanel ? (\n \n \n ) : null}\n
\n );\n\n case AppState.ERROR:\n return \n Topola Genealogy Viewer does not support Internet Explorer. Please try a\n different (modern) browser.\n
,\n document.querySelector('#root'),\n );\n} else {\n ReactDOM.render(\n