Skip to content

Commit b438094

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add shared set util
1 parent 954ed86 commit b438094

9 files changed

Lines changed: 236 additions & 220 deletions

File tree

‎src/public/dist/bundle.js‎

Lines changed: 194 additions & 179 deletions
Large diffs are not rendered by default.

‎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/tree-diagram/component/CodeCrumbsTree/CodeCrumbsTree.js‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { withSvgDraw } from '../SvgDraw';
2+
import { withSvgDraw } from '../utils/SvgDraw';
33
import {
44
drawCodeCrumbEdge,
55
drawPartEdge,
@@ -9,30 +9,14 @@ import { drawFileText, drawFileIcon } from '../SourceTree/drawHelpers';
99

1010
import { FILE_NODE_TYPE, DIR_NODE_TYPE } from '../../store/constants';
1111
import { getFilesList } from '../../../../utils/treeLayout';
12+
import { createSet } from '../utils/SvgSet';
1213

1314
class CodeCrumbsTree extends React.Component {
14-
constructor(props) {
15-
super(props);
16-
17-
this.drawSet = null;
18-
}
19-
2015
componentDidMount() {
21-
this.drawSet = this.props.primaryDraw.set();
16+
this.drawSet = createSet(this.props.primaryDraw);
2217
this.drawTree();
2318
}
2419

25-
addToSet(list) {
26-
this.drawSet.add.apply(this.drawSet, [].concat(list));
27-
}
28-
29-
clearDraw() {
30-
this.drawSet.each(function() {
31-
//TODO: remove event listener here
32-
this.remove();
33-
});
34-
}
35-
3620
componentDidUpdate() {
3721
this.clearDraw();
3822
this.drawTree();
@@ -43,8 +27,14 @@ class CodeCrumbsTree extends React.Component {
4327
}
4428

4529
shouldComponentUpdate(nextProps) {
46-
const oldProps = this.props;
47-
return oldProps.filesTreeLayoutNodes !== nextProps.filesTreeLayoutNodes;
30+
return true;
31+
//TODO: missing overlapping elements: text&icons
32+
/*const oldProps = this.props;
33+
return oldProps.filesTreeLayoutNodes !== nextProps.filesTreeLayoutNodes;*/
34+
}
35+
36+
clearDraw() {
37+
this.drawSet.clearAll();
4838
}
4939

5040
drawTree() {
@@ -57,7 +47,7 @@ class CodeCrumbsTree extends React.Component {
5747
onCodeCrumbMouseOver
5848
} = this.props;
5949

60-
const add = this.addToSet.bind(this);
50+
const { add } = this.drawSet;
6151

6252
const filesList = getFilesList(filesTreeLayoutNodes);
6353
filesList.forEach(node => {

‎src/public/js/components/tree-diagram/component/CodeCrumbsTree/drawHelpers.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,18 @@ export const drawCodeCrumbLoc = (
7070
.move(textPoint.x, textPoint.y - 6);
7171

7272
const locText = draw.text(loc);
73-
locText.font({ fill: '#595959', family: 'Menlo', size: '8px' });
74-
//TODO: refactor to use one way, plus or minus
75-
locText.move(textPoint.x + textPointShiftX, textPoint.y - textPointShiftY);
73+
locText
74+
.font({ fill: '#595959', family: 'Menlo', size: '8px' })
75+
.style({cursor: 'pointer'})
76+
.move(textPoint.x + textPointShiftX, textPoint.y - textPointShiftY);
7677

7778
if (onMouseOver) {
7879
locText.on('mouseover', () =>
7980
onMouseOver({ x: textPoint.x, y: textPoint.y - 15 })
8081
);
8182
}
8283
if (onClick) {
83-
locText.on('', onClick);
84+
locText.on('click', onClick);
8485
}
8586

8687
if (name) {

‎src/public/js/components/tree-diagram/component/DependenciesTree/DependenciesTree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { drawDependenciesEdge } from './drawHelpers';
33
import { drawFileText, drawFileIcon } from '../SourceTree/drawHelpers';
44
import { getFilesList } from '../../../../utils/treeLayout';
5-
import { withSvgDraw } from '../SvgDraw';
5+
import { withSvgDraw } from '../utils/SvgDraw';
66

77
class DependenciesTree extends React.Component {
88
componentDidMount() {

‎src/public/js/components/tree-diagram/component/SourceTree/SourceTree.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { withSvgDraw } from '../SvgDraw';
2+
import { withSvgDraw } from '../utils/SvgDraw';
33
import {
44
drawDot,
55
drawSourceEdge,
@@ -10,17 +10,14 @@ import {
1010
} from './drawHelpers';
1111

1212
import { FILE_NODE_TYPE, DIR_NODE_TYPE } from '../../store/constants';
13+
import { createSet } from '../utils/SvgSet';
1314

1415
class SourceTree extends React.Component {
1516
componentDidMount() {
16-
this.drawSet = this.props.primaryDraw.set();
17+
this.drawSet = createSet(this.props.primaryDraw);
1718
this.drawTree();
1819
}
1920

20-
addToSet(list) {
21-
this.drawSet.add.apply(this.drawSet, [].concat(list));
22-
}
23-
2421
componentDidUpdate() {
2522
this.clearPrimaryDraw();
2623
this.clearSecondaryDraw();
@@ -33,10 +30,7 @@ class SourceTree extends React.Component {
3330
}
3431

3532
clearPrimaryDraw() {
36-
this.drawSet.each(function() {
37-
//TODO: remove event listener here
38-
this.remove();
39-
});
33+
this.drawSet.clearAll();
4034
}
4135

4236
clearSecondaryDraw() {
@@ -52,7 +46,7 @@ class SourceTree extends React.Component {
5246
dependenciesDiagramOn
5347
} = this.props;
5448

55-
const add = this.addToSet.bind(this);
49+
const { add } = this.drawSet;
5650

5751
//note: instance from d3-flex tree, not Array
5852
layoutNodes.each(node => {

‎src/public/js/components/tree-diagram/component/SourceTree/drawHelpers.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const drawFileIcon = (draw, shiftToCenterPoint, { x, y, onClick }) => {
8989
.move(fileIconPoint.x, fileIconPoint.y);
9090

9191
if (onClick) {
92-
icon.style({ cursor: 'pointer' }).click(onClick);
92+
icon.style({ cursor: 'pointer' }).on('click', onClick);
9393
}
9494

9595
return icon;
@@ -138,7 +138,7 @@ export const drawFolderIcon = (
138138
.move(folderIconPoint.x, folderIconPoint.y);
139139

140140
if (onClick) {
141-
icon.style({ cursor: 'pointer' }).click(onClick);
141+
icon.style({ cursor: 'pointer' }).on('click', onClick);
142142
}
143143

144144
return icon;

src/public/js/components/tree-diagram/component/SvgDraw.js renamed to src/public/js/components/tree-diagram/component/utils/SvgDraw.js

File renamed without changes.

‎src/public/js/components/tree-diagram/component/utils/SvgSet.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const createSet = draw => {
2+
const drawSet = draw.set();
3+
4+
return {
5+
add(list) {
6+
drawSet.add.apply(drawSet, [].concat(list));
7+
},
8+
clearAll() {
9+
drawSet.each(function() {
10+
this.off();
11+
this.remove();
12+
});
13+
drawSet.clear();
14+
}
15+
};
16+
};

0 commit comments

Comments
 (0)