Skip to content

Commit 578e33e

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
CC tree
1 parent 95e0cf5 commit 578e33e

5 files changed

Lines changed: 108 additions & 26 deletions

File tree

‎src/public/dist/bundle.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15174,7 +15174,7 @@ exports = module.exports = __webpack_require__(/*! ../../../../../../../../node_
1517415174

1517515175

1517615176
// module
15177-
exports.push([module.i, ".EdgeMouseHandler {\n cursor: pointer;\n fill: none;\n stroke-width: 8px;\n stroke: rgba(0,0,0,0);\n}\n\n.SourceEdge {\n fill: none;\n stroke: #BFBFBF;\n}\n\n.SourceEdge-disabled {\n stroke: #ccc;\n}\n\n.DependenciesEdge {\n fill: none;\n stroke: #1890ff;\n}\n\n.DependenciesEdge-end-dot {\n fill: #1890ff;\n}", ""]);
15177+
exports.push([module.i, ".EdgeMouseHandler {\n cursor: pointer;\n fill: none;\n stroke-width: 8px;\n stroke: rgba(0,0,0,0);\n}\n\n.SourceEdge {\n fill: none;\n stroke: #BFBFBF;\n}\n\n.SourceEdge-disabled {\n stroke: #ccc;\n}\n\n.DependenciesEdge {\n fill: none;\n stroke: #1890ff;\n}\n\n.DependenciesEdge-end-dot {\n fill: #1890ff;\n}\n\n.CodeCrumbEdge {\n fill: none;\n stroke: #ff18a6;\n}", ""]);
1517815178

1517915179
// exports
1518015180

@@ -81077,6 +81077,8 @@ var _NodeText = __webpack_require__(/*! ../utils/NodeText */ "./js/components/tr
8107781077

8107881078
var _NodeIcon = __webpack_require__(/*! ../utils/NodeIcon */ "./js/components/tree-diagram/component/utils/NodeIcon/index.js");
8107981079

81080+
var _CodeCrumbEdge = __webpack_require__(/*! ../utils/Edge/CodeCrumbEdge */ "./js/components/tree-diagram/component/utils/Edge/CodeCrumbEdge.js");
81081+
8108081082
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
8108181083

8108281084
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -81254,7 +81256,8 @@ var CodeCrumbsTree = function (_React$Component) {
8125481256
_react2.default.Fragment,
8125581257
null,
8125681258
_react2.default.createElement(_NodeText.FileName, { position: position, name: node.data.name }),
81257-
_react2.default.createElement(_NodeIcon.FileIcon, { position: position, purple: codeCrumbsMinimize })
81259+
_react2.default.createElement(_NodeIcon.FileIcon, { position: position, purple: codeCrumbsMinimize }),
81260+
!codeCrumbsMinimize && _react2.default.createElement(_CodeCrumbEdge.PartEdge, { sourcePostion: position, parentName: node.data.name }) || null
8125881261
) : null
8125981262
);
8126081263
})
@@ -82027,6 +82030,54 @@ var Dot = exports.Dot = function Dot(props) {
8202782030

8202882031
/***/ }),
8202982032

82033+
/***/ "./js/components/tree-diagram/component/utils/Edge/CodeCrumbEdge.js":
82034+
/*!**************************************************************************!*\
82035+
!*** ./js/components/tree-diagram/component/utils/Edge/CodeCrumbEdge.js ***!
82036+
\**************************************************************************/
82037+
/*! no static exports found */
82038+
/***/ (function(module, exports, __webpack_require__) {
82039+
82040+
"use strict";
82041+
82042+
82043+
Object.defineProperty(exports, "__esModule", {
82044+
value: true
82045+
});
82046+
exports.PartEdge = undefined;
82047+
82048+
var _react = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
82049+
82050+
var _react2 = _interopRequireDefault(_react);
82051+
82052+
__webpack_require__(/*! ./index.css */ "./js/components/tree-diagram/component/utils/Edge/index.css");
82053+
82054+
var _constants = __webpack_require__(/*! ../../../store/constants */ "./js/components/tree-diagram/store/constants.js");
82055+
82056+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
82057+
82058+
var PartEdge = exports.PartEdge = function PartEdge(props) {
82059+
var sourcePoistion = props.sourcePOistion,
82060+
parentName = props.parentName;
82061+
82062+
82063+
var nameWidth = _constants.SYMBOL_WIDTH * parentName.length;
82064+
var padding = 17;
82065+
82066+
var P1 = { x: sourcePoistion.x + nameWidth + padding, y: sourcePoistion.y };
82067+
var P2 = { x: P1.x + padding + 6, y: P1.y };
82068+
82069+
var polylinePoints = [[P1.x, P1.y], [P2.x, P2.y]];
82070+
82071+
return _react2.default.createElement(
82072+
_react2.default.Fragment,
82073+
null,
82074+
_react2.default.createElement('polyline', { points: polylinePoints.join(', '), className: 'CodeCrumbEdge' }),
82075+
_react2.default.createElement('line', { x1: P1.x, y1: P1.y - 2, x2: P1.x, y2: P1.y + 2, className: 'CodeCrumbEdge' })
82076+
);
82077+
};
82078+
82079+
/***/ }),
82080+
8203082081
/***/ "./js/components/tree-diagram/component/utils/Edge/DepenenciesEdge.js":
8203182082
/*!****************************************************************************!*\
8203282083
!*** ./js/components/tree-diagram/component/utils/Edge/DepenenciesEdge.js ***!

‎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: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { drawFileText, drawFileIcon } from '../SourceTree/drawHelpers';
55
import { getFilesList } from '../../../../utils/treeLayout';
66
import { FileName } from '../utils/NodeText';
77
import { FileIcon } from '../utils/NodeIcon';
8+
import { PartEdge } from '../utils/Edge/CodeCrumbEdge';
89

910
class CodeCrumbsTree extends React.Component {
1011
componentDidMount() {
11-
// this.drawSet = createSet(this.props.primaryDraw);
12-
// this.drawTree();
12+
// this.drawSet = createSet(this.props.primaryDraw);
13+
// this.drawTree();
1314
}
1415

1516
componentDidUpdate() {
@@ -148,27 +149,29 @@ class CodeCrumbsTree extends React.Component {
148149
const filesList = getFilesList(filesTreeLayoutNodes);
149150
return (
150151
<React.Fragment>
151-
{
152-
filesList.map(node => {
153-
const [nX, nY] = [node.y, node.x];
154-
const position = shiftToCenterPoint(nX, nY);
155-
156-
if (!node.children) {
157-
return null;
158-
}
159-
160-
return (
161-
<React.Fragment key={`code-crumb-${node.data.name}`}>
162-
{(!sourceDiagramOn && !dependenciesDiagramOn) ? (
163-
<React.Fragment>
164-
<FileName position={position} name={node.data.name} />
165-
<FileIcon position={position} purple={codeCrumbsMinimize} />
166-
</React.Fragment>
167-
) : null}
168-
</React.Fragment>
169-
);
170-
})
171-
}
152+
{filesList.map(node => {
153+
const [nX, nY] = [node.y, node.x];
154+
const position = shiftToCenterPoint(nX, nY);
155+
156+
if (!node.children) {
157+
return null;
158+
}
159+
160+
return (
161+
<React.Fragment key={`code-crumb-${node.data.name}`}>
162+
{!sourceDiagramOn && !dependenciesDiagramOn ? (
163+
<React.Fragment>
164+
<FileName position={position} name={node.data.name} />
165+
<FileIcon position={position} purple={codeCrumbsMinimize} />
166+
{(!codeCrumbsMinimize && (
167+
<PartEdge sourcePostion={position} parentName={node.data.name} />
168+
)) ||
169+
null}
170+
</React.Fragment>
171+
) : null}
172+
</React.Fragment>
173+
);
174+
})}
172175
</React.Fragment>
173176
);
174177
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import './index.css';
3+
4+
import { PURPLE_COLOR, SYMBOL_WIDTH } from '../../../store/constants';
5+
6+
export const PartEdge = props => {
7+
const { sourcePOistion: sourcePoistion, parentName } = props;
8+
9+
const nameWidth = SYMBOL_WIDTH * parentName.length;
10+
const padding = 17;
11+
12+
const P1 = { x: sourcePoistion.x + nameWidth + padding, y: sourcePoistion.y };
13+
const P2 = { x: P1.x + padding + 6, y: P1.y };
14+
15+
const polylinePoints = [[P1.x, P1.y], [P2.x, P2.y]];
16+
17+
return (
18+
<React.Fragment>
19+
<polyline points={polylinePoints.join(', ')} className={'CodeCrumbEdge'} />
20+
<line x1={P1.x} y1={P1.y - 2} x2={P1.x} y2={P1.y + 2} className={'CodeCrumbEdge'} />
21+
</React.Fragment>
22+
);
23+
};

‎src/public/js/components/tree-diagram/component/utils/Edge/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,9 @@
2121

2222
.DependenciesEdge-end-dot {
2323
fill: #1890ff;
24+
}
25+
26+
.CodeCrumbEdge {
27+
fill: none;
28+
stroke: #ff18a6;
2429
}

0 commit comments

Comments
 (0)