Skip to content

Commit 0d16bf5

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add all details check
1 parent 81c9787 commit 0d16bf5

12 files changed

Lines changed: 160 additions & 81 deletions

File tree

‎example-project/app.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import tabs from './views/tabs';
22

33
const App = {
4-
//cc:render call;check out tabs.js for more details
54
init() {
6-
tabs.render();
5+
tabs.render();//cc:render;CallLong line check out tabs.js for more details
76
}
87
};
98

‎example-project/views/tabs.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import HomePage from './home/home-page';
22
import ProductPage from './product/product-page';
33

4-
//codecrumb
4+
//codecrumb:tabsSwitch;details 1
55
const tabsSwitch = index => {
66
console.log(index);
77
};
88

99
export default {
10-
tabsSwitch,
10+
tabsSwitch,//codecrumb:setup call;details 2
1111
render: () => {
1212
return [HomePage, ProductPage];
1313
}

‎src/public/dist/bundle.js‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -67958,7 +67958,11 @@ var ViewsSwitchList = function ViewsSwitchList(_ref) {
6795867958
return toggleSwitch(item.key, e.target.checked);
6795967959
}
6796067960
},
67961-
item.name
67961+
_react2.default.createElement(
67962+
'span',
67963+
{ title: item.title || '' },
67964+
item.name
67965+
)
6796267966
)
6796367967
);
6796467968
})
@@ -68019,7 +68023,8 @@ var SWITCH_KEYS = exports.SWITCH_KEYS = {
6801968023
SOURCE: 'source',
6802068024
DEPENDENCIES: 'dependencies',
6802168025
CODE_CRUMBS: 'codeCrumbs',
68022-
CODE_CRUMBS_MINIMIZE: 'codeCrumbsMinimize'
68026+
CODE_CRUMBS_MINIMIZE: 'codeCrumbsMinimize',
68027+
CODE_CRUMBS_DETAILS: 'codeCrumbsDetails'
6802368028
};
6802468029

6802568030
/***/ }),
@@ -68051,9 +68056,17 @@ var DefaultState = {
6805168056
switches: [{ name: 'Source', key: _constants.SWITCH_KEYS.SOURCE, checkBoxes: [] }, { name: 'Dependencies', key: _constants.SWITCH_KEYS.DEPENDENCIES, checkBoxes: [] }, {
6805268057
name: 'CodeCrumbs',
6805368058
key: _constants.SWITCH_KEYS.CODE_CRUMBS,
68054-
checkBoxes: [{ name: 'minimize', key: _constants.SWITCH_KEYS.CODE_CRUMBS_MINIMIZE }]
68059+
checkBoxes: [{
68060+
name: 'M',
68061+
title: 'Minimize code crumbs',
68062+
key: _constants.SWITCH_KEYS.CODE_CRUMBS_MINIMIZE
68063+
}, {
68064+
name: 'D',
68065+
title: 'Show all Details',
68066+
key: _constants.SWITCH_KEYS.CODE_CRUMBS_DETAILS
68067+
}]
6805568068
}],
68056-
checkedState: (_checkedState = {}, _defineProperty(_checkedState, _constants.SWITCH_KEYS.SOURCE, true), _defineProperty(_checkedState, _constants.SWITCH_KEYS.DEPENDENCIES, false), _defineProperty(_checkedState, _constants.SWITCH_KEYS.CODE_CRUMBS, false), _defineProperty(_checkedState, _constants.SWITCH_KEYS.CODE_CRUMBS_MINIMIZE, false), _checkedState)
68069+
checkedState: (_checkedState = {}, _defineProperty(_checkedState, _constants.SWITCH_KEYS.SOURCE, true), _defineProperty(_checkedState, _constants.SWITCH_KEYS.DEPENDENCIES, false), _defineProperty(_checkedState, _constants.SWITCH_KEYS.CODE_CRUMBS, false), _defineProperty(_checkedState, _constants.SWITCH_KEYS.CODE_CRUMBS_MINIMIZE, false), _defineProperty(_checkedState, _constants.SWITCH_KEYS.CODE_CRUMBS_DETAILS, false), _checkedState)
6805768070
};
6805868071

6805968072
exports.default = function () {
@@ -68611,6 +68624,7 @@ var mapStateToProps = function mapStateToProps(state) {
6861168624
dependenciesDiagramOn: checkedState.dependencies,
6861268625
codeCrumbsDiagramOn: checkedState.codeCrumbs,
6861368626
codeCrumbsMinimize: checkedState.codeCrumbsMinimize,
68627+
codeCrumbsDetails: checkedState.codeCrumbsDetails,
6861468628
filesTreeLayoutNodes: filesTreeLayoutNodes,
6861568629
dependenciesList: dependenciesList
6861668630
};
@@ -68714,6 +68728,7 @@ var CodeCrumbsTree = function (_React$Component) {
6871468728
sourceDiagramOn = _props.sourceDiagramOn,
6871568729
dependenciesDiagramOn = _props.dependenciesDiagramOn,
6871668730
codeCrumbsMinimize = _props.codeCrumbsMinimize,
68731+
codeCrumbsDetails = _props.codeCrumbsDetails,
6871768732
onCodeCrumbSelect = _props.onCodeCrumbSelect;
6871868733
var add = this.drawSet.add;
6871968734

@@ -68767,6 +68782,7 @@ var CodeCrumbsTree = function (_React$Component) {
6876768782
parentName: node.data.name
6876868783
}));
6876968784

68785+
//TODO: refactor mess
6877068786
var loc = crumb.data.crumbedLineNode.loc.start;
6877168787
add((0, _drawHelpers.drawCodeCrumbLoc)(primaryDraw, shiftToCenterPoint, {
6877268788
x: cX,
@@ -68775,18 +68791,28 @@ var CodeCrumbsTree = function (_React$Component) {
6877568791
name: crumb.data.name,
6877668792
singleCrumb: singleCrumb,
6877768793
onMouseOver: function onMouseOver() {
68778-
if (!crumb.data.params.details) return null;
68794+
if (!crumb.data.params.details || codeCrumbsDetails) return null;
6877968795

6878068796
return (0, _drawHelpers.drawPopOver)(primaryDraw, shiftToCenterPoint, {
6878168797
x: cX,
6878268798
y: cY,
68783-
name: crumb.data.params.details
68799+
name: crumb.data.params.details,
68800+
singleCrumb: singleCrumb
6878468801
});
6878568802
},
6878668803
onClick: function onClick() {
6878768804
onCodeCrumbSelect(node.data, crumb.data);
6878868805
}
6878968806
}));
68807+
68808+
if (codeCrumbsDetails && crumb.data.params.details) {
68809+
add((0, _drawHelpers.drawPopOver)(primaryDraw, shiftToCenterPoint, {
68810+
x: cX,
68811+
y: cY,
68812+
name: crumb.data.params.details,
68813+
singleCrumb: singleCrumb
68814+
}));
68815+
}
6879068816
});
6879168817
}
6879268818
});
@@ -68917,12 +68943,13 @@ var drawPopOver = exports.drawPopOver = function drawPopOver(draw, shiftToCenter
6891768943
var x = _ref4.x,
6891868944
y = _ref4.y,
6891968945
_ref4$name = _ref4.name,
68920-
name = _ref4$name === undefined ? '' : _ref4$name;
68946+
name = _ref4$name === undefined ? '' : _ref4$name,
68947+
singleCrumb = _ref4.singleCrumb;
6892168948

68922-
var tPt = shiftToCenterPoint(x - 12, y - 30);
68923-
var nameWidth = name.length * 7;
68924-
var nameHeight = 10;
68925-
var padding = 8;
68949+
var tPt = shiftToCenterPoint(x - 15 + (singleCrumb ? 0 : 20), y - 24);
68950+
var nameWidth = name.length * 6;
68951+
var nameHeight = 8;
68952+
var padding = 5;
6892668953

6892768954
var polyline = draw.polyline([[tPt.x - padding, tPt.y + nameHeight + padding + 3], [tPt.x - padding, tPt.y - padding], [tPt.x + nameWidth + 2 * padding, tPt.y - padding], [tPt.x + nameWidth + 2 * padding, tPt.y + nameHeight + padding], [tPt.x - padding + 3, tPt.y + nameHeight + padding], [tPt.x - padding, tPt.y + nameHeight + padding + 3]]);
6892868955

@@ -68931,8 +68958,8 @@ var drawPopOver = exports.drawPopOver = function drawPopOver(draw, shiftToCenter
6893168958
});
6893268959

6893368960
var text = draw.text(name);
68934-
text.font({ fill: '#595959', family: 'Menlo', size: '12px' });
68935-
text.move(tPt.x, tPt.y);
68961+
text.font({ fill: '#595959', family: 'Menlo', size: '10px' });
68962+
text.move(tPt.x + 2, tPt.y - 1);
6893668963

6893768964
return [text, polyline];
6893868965
};
@@ -69649,6 +69676,7 @@ var TreeDiagram = function (_React$Component) {
6964969676
dependenciesDiagramOn = _props.dependenciesDiagramOn,
6965069677
codeCrumbsDiagramOn = _props.codeCrumbsDiagramOn,
6965169678
codeCrumbsMinimize = _props.codeCrumbsMinimize,
69679+
codeCrumbsDetails = _props.codeCrumbsDetails,
6965269680
onFileSelect = _props.onFileSelect,
6965369681
onCodeCrumbSelect = _props.onCodeCrumbSelect;
6965469682

@@ -69657,7 +69685,8 @@ var TreeDiagram = function (_React$Component) {
6965769685
sourceDiagramOn: sourceDiagramOn,
6965869686
dependenciesDiagramOn: dependenciesDiagramOn,
6965969687
codeCrumbsDiagramOn: codeCrumbsDiagramOn,
69660-
codeCrumbsMinimize: codeCrumbsMinimize
69688+
codeCrumbsMinimize: codeCrumbsMinimize,
69689+
codeCrumbsDetails: codeCrumbsDetails
6966169690
};
6966269691

6966369692
return _react2.default.createElement(

‎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/controls/ViewSwitches/component/ViewsSwitchList.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ const ViewsSwitchList = ({
3939
)
4040
}
4141
>
42-
{item.name}
42+
<span title={item.title || ''}>
43+
{item.name}
44+
</span>
4345
</Checkbox>
4446
</div>
4547
))}

‎src/public/js/components/controls/ViewSwitches/store/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export const SWITCH_KEYS = {
77
DEPENDENCIES: 'dependencies',
88
CODE_CRUMBS: 'codeCrumbs',
99
CODE_CRUMBS_MINIMIZE: 'codeCrumbsMinimize',
10+
CODE_CRUMBS_DETAILS: 'codeCrumbsDetails',
1011
};

‎src/public/js/components/controls/ViewSwitches/store/reducer.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,25 @@ const DefaultState = {
99
name: 'CodeCrumbs',
1010
key: SWITCH_KEYS.CODE_CRUMBS,
1111
checkBoxes: [
12-
{ name: 'minimize', key: SWITCH_KEYS.CODE_CRUMBS_MINIMIZE }
12+
{
13+
name: 'M',
14+
title: 'Minimize code crumbs',
15+
key: SWITCH_KEYS.CODE_CRUMBS_MINIMIZE
16+
},
17+
{
18+
name: 'D',
19+
title: 'Show all Details',
20+
key: SWITCH_KEYS.CODE_CRUMBS_DETAILS
21+
}
1322
]
1423
}
1524
],
1625
checkedState: {
1726
[SWITCH_KEYS.SOURCE]: true,
1827
[SWITCH_KEYS.DEPENDENCIES]: false,
1928
[SWITCH_KEYS.CODE_CRUMBS]: false,
20-
[SWITCH_KEYS.CODE_CRUMBS_MINIMIZE]: false
29+
[SWITCH_KEYS.CODE_CRUMBS_MINIMIZE]: false,
30+
[SWITCH_KEYS.CODE_CRUMBS_DETAILS]: false
2131
}
2232
};
2333

‎src/public/js/components/tree-diagram/TreeDiagramContainer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const mapStateToProps = state => {
1111
dependenciesDiagramOn: checkedState.dependencies,
1212
codeCrumbsDiagramOn: checkedState.codeCrumbs,
1313
codeCrumbsMinimize: checkedState.codeCrumbsMinimize,
14+
codeCrumbsDetails: checkedState.codeCrumbsDetails,
1415
filesTreeLayoutNodes,
1516
dependenciesList
1617
};

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

Lines changed: 73 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ class CodeCrumbsTree extends React.Component {
4646
sourceDiagramOn,
4747
dependenciesDiagramOn,
4848
codeCrumbsMinimize,
49+
codeCrumbsDetails,
4950
onCodeCrumbSelect
5051
} = this.props;
5152

@@ -74,62 +75,85 @@ class CodeCrumbsTree extends React.Component {
7475
);
7576
}
7677

77-
!codeCrumbsMinimize && add(
78-
drawPartEdge(primaryDraw, shiftToCenterPoint, {
79-
source: {
80-
x: nX,
81-
y: nY
82-
},
83-
parentName: node.data.name
84-
})
85-
);
78+
!codeCrumbsMinimize &&
79+
add(
80+
drawPartEdge(primaryDraw, shiftToCenterPoint, {
81+
source: {
82+
x: nX,
83+
y: nY
84+
},
85+
parentName: node.data.name
86+
})
87+
);
8688

87-
!codeCrumbsMinimize && node.children.forEach((crumb, i, list) => {
88-
const [cX, cY] = [crumb.y, crumb.x];
89-
const singleCrumb = list.length === 1;
89+
!codeCrumbsMinimize &&
90+
node.children.forEach((crumb, i, list) => {
91+
const [cX, cY] = [crumb.y, crumb.x];
92+
const singleCrumb = list.length === 1;
9093

91-
!singleCrumb &&
94+
!singleCrumb &&
95+
add(
96+
drawCodeCrumbEdge(
97+
primaryDraw,
98+
shiftToCenterPoint,
99+
{
100+
source: {
101+
x: nX,
102+
y: nY
103+
},
104+
target: {
105+
x: cX,
106+
y: cY
107+
},
108+
parentName: node.data.name
109+
}
110+
)
111+
);
112+
113+
//TODO: refactor mess
114+
const loc = crumb.data.crumbedLineNode.loc.start;
92115
add(
93-
drawCodeCrumbEdge(primaryDraw, shiftToCenterPoint, {
94-
source: {
95-
x: nX,
96-
y: nY
116+
drawCodeCrumbLoc(primaryDraw, shiftToCenterPoint, {
117+
x: cX,
118+
y: cY,
119+
loc: `(${loc.line},${loc.column})`,
120+
name: crumb.data.name,
121+
singleCrumb,
122+
onMouseOver() {
123+
if (
124+
!crumb.data.params.details ||
125+
codeCrumbsDetails
126+
)
127+
return null;
128+
129+
return drawPopOver(
130+
primaryDraw,
131+
shiftToCenterPoint,
132+
{
133+
x: cX,
134+
y: cY,
135+
name: crumb.data.params.details,
136+
singleCrumb
137+
}
138+
);
97139
},
98-
target: {
99-
x: cX,
100-
y: cY
101-
},
102-
parentName: node.data.name
140+
onClick() {
141+
onCodeCrumbSelect(node.data, crumb.data);
142+
}
103143
})
104144
);
105145

106-
const loc = crumb.data.crumbedLineNode.loc.start;
107-
add(
108-
drawCodeCrumbLoc(primaryDraw, shiftToCenterPoint, {
109-
x: cX,
110-
y: cY,
111-
loc: `(${loc.line},${loc.column})`,
112-
name: crumb.data.name,
113-
singleCrumb,
114-
onMouseOver() {
115-
if (!crumb.data.params.details) return null;
116-
117-
return drawPopOver(
118-
primaryDraw,
119-
shiftToCenterPoint,
120-
{
121-
x: cX,
122-
y: cY,
123-
name: crumb.data.params.details
124-
}
125-
);
126-
},
127-
onClick() {
128-
onCodeCrumbSelect(node.data, crumb.data);
129-
}
130-
})
131-
);
132-
});
146+
if (codeCrumbsDetails && crumb.data.params.details) {
147+
add(
148+
drawPopOver(primaryDraw, shiftToCenterPoint, {
149+
x: cX,
150+
y: cY,
151+
name: crumb.data.params.details,
152+
singleCrumb
153+
})
154+
);
155+
}
156+
});
133157
}
134158
});
135159
}

0 commit comments

Comments
 (0)