Skip to content

Commit b129dc5

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Refactor trees
1 parent 58b81e6 commit b129dc5

10 files changed

Lines changed: 640 additions & 648 deletions

File tree

‎src/public/dist/bundle.js‎

Lines changed: 270 additions & 281 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/dist/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
import { CodeCrumbedFlowEdge } from 'components/treeDiagram/component/Edge/CodeCrumbEdge';
3+
4+
const FlowEdge = props => {
5+
const {
6+
shiftToCenterPoint,
7+
fileNodesMap,
8+
selectedCrumbedFlowKey,
9+
codeCrumbedFlowsMap,
10+
codeCrumbsMinimize
11+
} = props;
12+
13+
const currentFlow = codeCrumbedFlowsMap[selectedCrumbedFlowKey] || {};
14+
15+
// TODO: this can be done on flowSelect
16+
let sortedFlowSteps = [];
17+
Object.keys(currentFlow).forEach(filePath => {
18+
const steps = ((fileNodesMap[filePath] && fileNodesMap[filePath].children) || [])
19+
.filter(({ data }) => data.params.flow === selectedCrumbedFlowKey)
20+
.map(({ data, x, y }) => ({
21+
name: data.name,
22+
filePath,
23+
step: data.params.flowStep,
24+
flow: selectedCrumbedFlowKey,
25+
x,
26+
y
27+
}));
28+
29+
sortedFlowSteps = sortedFlowSteps.concat(steps);
30+
});
31+
32+
sortedFlowSteps.sort((a, b) => a.step - b.step);
33+
34+
return (
35+
<React.Fragment>
36+
{!codeCrumbsMinimize &&
37+
sortedFlowSteps.map((toItem, i, list) => {
38+
if (!i) return null;
39+
40+
const fromItem = list[i - 1];
41+
const fromFile = fileNodesMap[fromItem.filePath];
42+
const toFile = fileNodesMap[toItem.filePath];
43+
44+
const edgePoints = [fromItem, toItem].map(crumb => {
45+
const [cX, cY] = [crumb.y, crumb.x];
46+
return shiftToCenterPoint(cX, cY);
47+
});
48+
49+
return (
50+
<CodeCrumbedFlowEdge
51+
key={`cc-flow-edge-${fromItem.name}-${toItem.name}`}
52+
singleCrumbSource={fromFile.children.length === 1}
53+
singleCrumbTarget={toFile.children.length === 1}
54+
sourcePosition={edgePoints[0]}
55+
targetPosition={edgePoints[1]}
56+
sourceName={fromItem.name}
57+
targetName={toItem.name}
58+
/>
59+
);
60+
})}
61+
</React.Fragment>
62+
);
63+
};
64+
65+
export default FlowEdge;

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
3+
import { CodeCrumbName } from 'components/treeDiagram/component/Node/CodeCrumb';
4+
import { FileName } from 'components/treeDiagram/component/Node/File';
5+
import { PartEdge, CodeCrumbEdge } from 'components/treeDiagram/component/Edge/CodeCrumbEdge';
6+
7+
const Tree = props => {
8+
const {
9+
shiftToCenterPoint,
10+
fileNodesMap,
11+
filesMap,
12+
selectedCrumbedFlowKey,
13+
sourceDiagramOn,
14+
dependenciesDiagramOn,
15+
codeCrumbsMinimize,
16+
codeCrumbsLineNumbers,
17+
onCodeCrumbSelect
18+
} = props;
19+
20+
return (
21+
<React.Fragment>
22+
{Object.keys(fileNodesMap).map(key => {
23+
const node = fileNodesMap[key];
24+
25+
const [nX, nY] = [node.y, node.x];
26+
const position = shiftToCenterPoint(nX, nY);
27+
28+
if (!node.children) {
29+
return null;
30+
}
31+
32+
const file = filesMap[node.data.path];
33+
return (
34+
<React.Fragment key={`code-crumb-${file.name}`}>
35+
{!sourceDiagramOn && !dependenciesDiagramOn ? (
36+
<FileName position={position} name={file.name} purple={codeCrumbsMinimize} />
37+
) : null}
38+
{(!codeCrumbsMinimize && (
39+
<PartEdge sourcePosition={position} parentName={file.name} />
40+
)) ||
41+
null}
42+
43+
{!codeCrumbsMinimize &&
44+
node.children.map((crumb, i, list) => {
45+
const [cX, cY] = [crumb.y, crumb.x];
46+
const crumbPosition = shiftToCenterPoint(cX, cY);
47+
const singleCrumb = list.length === 1;
48+
const crumbData = crumb.data;
49+
const ccParams = crumbData.params;
50+
51+
return (
52+
<React.Fragment key={`code-crumb-edge-${file.path}-${crumbData.name}`}>
53+
{(!singleCrumb && (
54+
<CodeCrumbEdge
55+
sourcePosition={position}
56+
targetPosition={crumbPosition}
57+
parentName={file.name}
58+
/>
59+
)) ||
60+
null}
61+
<CodeCrumbName
62+
position={crumbPosition}
63+
loc={codeCrumbsLineNumbers ? crumbData.displayLoc : ''}
64+
name={crumbData.name}
65+
singleCrumb={singleCrumb}
66+
cover={true}
67+
flow={ccParams.flow && ccParams.flow === selectedCrumbedFlowKey}
68+
flowStep={ccParams.flowStep}
69+
onClick={() => onCodeCrumbSelect(file, crumbData)}
70+
/>
71+
</React.Fragment>
72+
);
73+
})}
74+
</React.Fragment>
75+
);
76+
})}
77+
</React.Fragment>
78+
);
79+
};
80+
81+
export default Tree;

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
4+
import { selectCodeCrumb } from 'components/dataBus/store/actions';
5+
import FlowEdge from './FlowEdge';
6+
import Tree from './Tree';
7+
8+
const mapStateToProps = state => {
9+
const { checkedState } = state.viewSwitches;
10+
const { fileNodesMap, filesMap, selectedCrumbedFlowKey, codeCrumbedFlowsMap } = state.dataBus;
11+
12+
return {
13+
fileNodesMap,
14+
filesMap,
15+
selectedCrumbedFlowKey,
16+
codeCrumbedFlowsMap,
17+
sourceDiagramOn: checkedState.source,
18+
dependenciesDiagramOn: checkedState.dependencies,
19+
codeCrumbsDiagramOn: checkedState.codeCrumbs,
20+
codeCrumbsMinimize: checkedState.codeCrumbsMinimize,
21+
codeCrumbsLineNumbers: checkedState.codeCrumbsLineNumbers
22+
};
23+
};
24+
25+
const mapDispatchToProps = {
26+
onCodeCrumbSelect: selectCodeCrumb
27+
};
28+
29+
export const CodeCrumbedFlowEdges = connect(mapStateToProps)(FlowEdge);
30+
31+
export default connect(
32+
mapStateToProps,
33+
mapDispatchToProps
34+
)(Tree);

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbsTree.js‎

Lines changed: 0 additions & 174 deletions
This file was deleted.

0 commit comments

Comments
 (0)