forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-08-02 00:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated dependencies

Browse Source 
Replaced d3 dependency with smaller d3-* deps
This commit is contained in:
Przemek Wiech
2020-04-29 00:13:30 +02:00
parent cc8271d664
commit 5c002c5278
3 changed files with 7416 additions and 5496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12829
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@@ -3,10 +3,13 @@
"version": "1.0.0", "version": "1.0.0",
"main": "src/index.tsx", "main": "src/index.tsx",
"dependencies": { "dependencies": {
"@types/js-cookie": "^2.2.4",
"array.prototype.flatmap": "^1.2.1", "array.prototype.flatmap": "^1.2.1",
"canvas-toBlob": "^1.0.0", "canvas-toBlob": "^1.0.0",
"d3": "^5.7.0", "d3-array": "^2.4.0",
"d3-interpolate": "^1.4.0",
"d3-selection": "^1.4.1",
"d3-transition": "^1.3.2",
"d3-zoom": "^1.8.3",
"debounce": "^1.2.0", "debounce": "^1.2.0",
"detect-browser": "^4.1.0", "detect-browser": "^4.1.0",
"file-saver": "^2.0.1", "file-saver": "^2.0.1",
@@ -29,15 +32,18 @@
}, },
"devDependencies": { "devDependencies": {
"@types/array.prototype.flatmap": "^1.2.0", "@types/array.prototype.flatmap": "^1.2.0",
"@types/d3": "^5.5.0", "@types/d3-array": "^2.0.0",
"@types/d3-interpolate": "^1.3.1",
"@types/d3-selection": "^1.4.1",
"@types/d3-transition": "^1.1.6",
"@types/d3-zoom": "^1.7.4",
"@types/debounce": "^1.2.0", "@types/debounce": "^1.2.0",
"@types/file-saver": "^2.0.0", "@types/file-saver": "^2.0.0",
"@types/history": "^4.7.2", "@types/history": "^4.7.2",
"@types/jest": "*", "@types/js-cookie": "^2.2.4",
"@types/jspdf": "^1.2.2", "@types/jspdf": "^1.2.2",
"@types/lunr": "^2.3.2", "@types/lunr": "^2.3.2",
"@types/md5": "^2.1.33", "@types/md5": "^2.1.33",
"@types/node": "*",
"@types/query-string": "6.2.0", "@types/query-string": "6.2.0",
"@types/react": "*", "@types/react": "*",
"@types/react-dom": "*", "@types/react-dom": "*",

67
src/chart.tsx
View File

@@ -1,8 +1,12 @@
import * as d3 from 'd3';
import * as React from 'react'; import * as React from 'react';
import jsPDF from 'jspdf'; import jsPDF from 'jspdf';
import {event, select, Selection} from 'd3-selection';
import {interpolateNumber} from 'd3-interpolate';
import {intlShape} from 'react-intl'; import {intlShape} from 'react-intl';
import {max, min} from 'd3-array';
import {Responsive} from 'semantic-ui-react';
import {saveAs} from 'file-saver'; import {saveAs} from 'file-saver';
import {zoom, ZoomBehavior, zoomTransform} from 'd3-zoom';
import { import {
JsonGedcomData, JsonGedcomData,
ChartHandle, ChartHandle,
@@ -14,7 +18,6 @@ import {
FancyChart, FancyChart,
CircleRenderer, CircleRenderer,
} from 'topola'; } from 'topola';
import {Responsive} from 'semantic-ui-react';
/** How much to zoom when using the +/- buttons. */ /** How much to zoom when using the +/- buttons. */
const ZOOM_FACTOR = 1.3; const ZOOM_FACTOR = 1.3;
@@ -25,28 +28,28 @@ const ZOOM_FACTOR = 1.3;
* @param size the size of the chart * @param size the size of the chart
*/ */
function zoomed(size: [number, number]) { function zoomed(size: [number, number]) {
const parent = d3.select('#svgContainer').node() as Element; const parent = select('#svgContainer').node() as Element;
const scale = d3.event.transform.k; const scale = event.transform.k;
const offsetX = d3.max([0, (parent.clientWidth - size[0] * scale) / 2]); const offsetX = max([0, (parent.clientWidth - size[0] * scale) / 2]);
const offsetY = d3.max([0, (parent.clientHeight - size[1] * scale) / 2]); const offsetY = max([0, (parent.clientHeight - size[1] * scale) / 2]);
d3.select('#chartSvg') select('#chartSvg')
.attr('width', size[0] * scale) .attr('width', size[0] * scale)
.attr('height', size[1] * scale) .attr('height', size[1] * scale)
.attr('transform', `translate(${offsetX}, ${offsetY})`); .attr('transform', `translate(${offsetX}, ${offsetY})`);
d3.select('#chart').attr('transform', `scale(${scale})`); select('#chart').attr('transform', `scale(${scale})`);
parent.scrollLeft = -d3.event.transform.x; parent.scrollLeft = -event.transform.x;
parent.scrollTop = -d3.event.transform.y; parent.scrollTop = -event.transform.y;
} }
/** Called when the scrollbars are used. */ /** Called when the scrollbars are used. */
function scrolled() { function scrolled() {
const parent = d3.select('#svgContainer').node() as Element; const parent = select('#svgContainer').node() as Element;
const x = parent.scrollLeft + parent.clientWidth / 2; const x = parent.scrollLeft + parent.clientWidth / 2;
const y = parent.scrollTop + parent.clientHeight / 2; const y = parent.scrollTop + parent.clientHeight / 2;
const scale = d3.zoomTransform(parent).k; const scale = zoomTransform(parent).k;
d3.select(parent).call(d3.zoom().translateTo, x / scale, y / scale); select(parent).call(zoom().translateTo, x / scale, y / scale);
} }
/** Loads blob as data URL. */ /** Loads blob as data URL. */
@@ -144,7 +147,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
/** Rendering is required after the current animation finishes. */ /** Rendering is required after the current animation finishes. */
private rerenderRequired = false; private rerenderRequired = false;
/** The d3 zoom behavior object. */ /** The d3 zoom behavior object. */
private zoomBehavior?: d3.ZoomBehavior<Element, any>; private zoomBehavior?: ZoomBehavior<Element, any>;
private getChartType() { private getChartType() {
switch (this.props.chartType) { switch (this.props.chartType) {
@@ -171,12 +174,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
} }
private zoom(factor: number) { private zoom(factor: number) {
const parent = d3.select('#svgContainer') as d3.Selection< const parent = select('#svgContainer') as Selection<Element, any, any, any>;
Element,
any,
any,
any
>;
this.zoomBehavior!.scaleBy(parent, factor); this.zoomBehavior!.scaleBy(parent, factor);
} }
@@ -198,7 +196,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
} }
if (args.initialRender) { if (args.initialRender) {
(d3.select('#chart').node() as HTMLElement).innerHTML = ''; (select('#chart').node() as HTMLElement).innerHTML = '';
this.chart = createChart({ this.chart = createChart({
json: this.props.data, json: this.props.data,
chartType: this.getChartType(), chartType: this.getChartType(),
@@ -216,30 +214,29 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
startIndi: this.props.selection.id, startIndi: this.props.selection.id,
baseGeneration: this.props.selection.generation, baseGeneration: this.props.selection.generation,
}); });
const svg = d3.select('#chartSvg'); const svg = select('#chartSvg');
const parent = d3.select('#svgContainer').node() as Element; const parent = select('#svgContainer').node() as Element;
const scale = d3.zoomTransform(parent).k; const scale = zoomTransform(parent).k;
const zoomOutFactor = d3.min([ const zoomOutFactor = min([
1, 1,
scale, scale,
parent.clientWidth / chartInfo.size[0], parent.clientWidth / chartInfo.size[0],
parent.clientHeight / chartInfo.size[1], parent.clientHeight / chartInfo.size[1],
])!; ])!;
const extent: [number, number] = [d3.max([0.1, zoomOutFactor])!, 2]; const extent: [number, number] = [max([0.1, zoomOutFactor])!, 2];
this.zoomBehavior = d3 this.zoomBehavior = zoom()
.zoom()
.scaleExtent(extent) .scaleExtent(extent)
.translateExtent([[0, 0], chartInfo.size]) .translateExtent([[0, 0], chartInfo.size])
.on('zoom', () => zoomed(chartInfo.size)); .on('zoom', () => zoomed(chartInfo.size));
d3.select(parent) select(parent)
.on('scroll', scrolled) .on('scroll', scrolled)
.call(this.zoomBehavior); .call(this.zoomBehavior);
const scrollTopTween = (scrollTop: number) => { const scrollTopTween = (scrollTop: number) => {
return () => { return () => {
const i = d3.interpolateNumber(parent.scrollTop, scrollTop); const i = interpolateNumber(parent.scrollTop, scrollTop);
return (t: number) => { return (t: number) => {
parent.scrollTop = i(t); parent.scrollTop = i(t);
}; };
@@ -247,7 +244,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
}; };
const scrollLeftTween = (scrollLeft: number) => { const scrollLeftTween = (scrollLeft: number) => {
return () => { return () => {
const i = d3.interpolateNumber(parent.scrollLeft, scrollLeft); const i = interpolateNumber(parent.scrollLeft, scrollLeft);
return (t: number) => { return (t: number) => {
parent.scrollLeft = i(t); parent.scrollLeft = i(t);
}; };
@@ -256,11 +253,11 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
const dx = parent.clientWidth / 2 - chartInfo.origin[0] * scale; const dx = parent.clientWidth / 2 - chartInfo.origin[0] * scale;
const dy = parent.clientHeight / 2 - chartInfo.origin[1] * scale; const dy = parent.clientHeight / 2 - chartInfo.origin[1] * scale;
const offsetX = d3.max([ const offsetX = max([
0, 0,
(parent.clientWidth - chartInfo.size[0] * scale) / 2, (parent.clientWidth - chartInfo.size[0] * scale) / 2,
]); ]);
const offsetY = d3.max([ const offsetY = max([
0, 0,
(parent.clientHeight - chartInfo.size[1] * scale) / 2, (parent.clientHeight - chartInfo.size[1] * scale) / 2,
]); ]);
@@ -333,8 +330,8 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
const svg = document.getElementById('chartSvg')!.cloneNode(true) as Element; const svg = document.getElementById('chartSvg')!.cloneNode(true) as Element;
svg.removeAttribute('transform'); svg.removeAttribute('transform');
const parent = d3.select('#svgContainer').node() as Element; const parent = select('#svgContainer').node() as Element;
const scale = d3.zoomTransform(parent).k; const scale = zoomTransform(parent).k;
svg.setAttribute( svg.setAttribute(
'width', 'width',
String(Number(svg.getAttribute('width')) / scale), String(Number(svg.getAttribute('width')) / scale),