Skip to content

Commit f4b9441

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add loc displaying in codecrumbs
1 parent 12e1c56 commit f4b9441

9 files changed

Lines changed: 73 additions & 45 deletions

File tree

‎example-project/app.js‎

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

33
const App = {
4-
//codecrumb
4+
//cc:label=render call
55
init() {
6-
tabs.render();//cc:label=render call
6+
tabs.render();
77
}
88
};
99

‎src/public/dist/bundle.js‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -66932,9 +66932,11 @@ var CodeCrumbsTree = function (_React$Component) {
6693266932
parentName: node.data.name
6693366933
});
6693466934

66935-
(0, _drawHelpers.drawCodeCrumbText)(primaryDraw, shiftToCenterPoint, {
66935+
var loc = crumb.data.crumbedLineNode.loc.start;
66936+
(0, _drawHelpers.drawCodeCrumbLoc)(primaryDraw, shiftToCenterPoint, {
6693666937
x: cX,
6693766938
y: cY,
66939+
loc: '(' + loc.line + ',' + loc.column + ')',
6693866940
name: crumb.data.name
6693966941
});
6694066942
});
@@ -66976,7 +66978,7 @@ exports.default = CodeCrumbsTree;
6697666978
Object.defineProperty(exports, "__esModule", {
6697766979
value: true
6697866980
});
66979-
exports.drawCodeCrumbText = exports.drawPartEdge = exports.drawCodeCrumbEdge = undefined;
66981+
exports.drawCodeCrumbLoc = exports.drawPartEdge = exports.drawCodeCrumbEdge = undefined;
6698066982

6698166983
var _constants = __webpack_require__(/*! ../constants */ "./js/components/tree-diagram/constants.js");
6698266984

@@ -67007,10 +67009,10 @@ var drawPartEdge = exports.drawPartEdge = function drawPartEdge(draw, shiftToCen
6700767009
parentName = _ref2.parentName;
6700867010

6700967011
var nameWidth = _constants.SYMBOL_WIDTH * parentName.length;
67010-
var padding = 18;
67012+
var padding = 17;
6701167013

6701267014
var P1 = shiftToCenterPoint(source.x + nameWidth + padding, source.y);
67013-
var P2 = { x: P1.x + padding + 4, y: P1.y };
67015+
var P2 = { x: P1.x + padding + 6, y: P1.y };
6701467016

6701567017
var polyline = draw.polyline([[P1.x, P1.y], [P2.x, P2.y]]);
6701667018

@@ -67021,22 +67023,31 @@ var drawPartEdge = exports.drawPartEdge = function drawPartEdge(draw, shiftToCen
6702167023
draw.line(P1.x, P1.y - 2, P1.x, P1.y + 2).stroke({ color: _constants.PURPLE_COLOR });
6702267024
};
6702367025

67024-
var drawCodeCrumbText = exports.drawCodeCrumbText = function drawCodeCrumbText(draw, shiftToCenterPoint, _ref3) {
67026+
var drawCodeCrumbLoc = exports.drawCodeCrumbLoc = function drawCodeCrumbLoc(draw, shiftToCenterPoint, _ref3) {
6702567027
var x = _ref3.x,
6702667028
y = _ref3.y,
6702767029
_ref3$name = _ref3.name,
67028-
name = _ref3$name === undefined ? '' : _ref3$name;
67029-
67030-
var text = draw.text(name);
67031-
text.font({ fill: '#595959', family: 'Menlo' });
67030+
name = _ref3$name === undefined ? '' : _ref3$name,
67031+
loc = _ref3.loc;
6703267032

6703367033
var textPointShiftX = 3;
67034-
var textPointShiftY = 8;
67034+
var textPointShiftY = 5;
6703567035
var textPoint = shiftToCenterPoint(x, y);
6703667036

67037-
text.move(textPoint.x + textPointShiftX, textPoint.y - textPointShiftY);
67037+
var locWidth = loc.length * 6;
67038+
draw.rect(locWidth, 12).fill('#fff').stroke(_constants.PURPLE_COLOR).move(textPoint.x, textPoint.y - 6);
6703867039

67039-
draw.circle(4).fill(_constants.PURPLE_COLOR).move(textPoint.x - 2, textPoint.y - 2);
67040+
var locText = draw.text(loc);
67041+
locText.font({ fill: '#595959', family: 'Menlo', size: '8px' });
67042+
//TODO: refactor to use one way, plus or minus
67043+
locText.move(textPoint.x + textPointShiftX, textPoint.y - textPointShiftY);
67044+
67045+
if (name) {
67046+
var nameText = draw.text(':' + name);
67047+
nameText.font({ fill: '#595959', family: 'Menlo', size: '12px' });
67048+
//TODO: refactor to use one way, plus or minus
67049+
nameText.move(textPoint.x + textPointShiftX + locWidth - 1, textPoint.y - textPointShiftY - 2);
67050+
}
6704067051
};
6704167052

6704267053
/***/ }),
@@ -67215,10 +67226,10 @@ var drawDependenciesEdge = exports.drawDependenciesEdge = function drawDependenc
6721567226
target = _ref.target,
6721667227
prevSource = _ref.prevSource;
6721767228

67218-
var padding = 20;
67219-
var halfPadding = padding / 2;
67229+
var padding = 30;
67230+
var halfPadding = padding / 2 - 5;
6722067231

67221-
var sourcePt = shiftToCenterPoint(target.y > source.y ? source.x + 10 : source.x + 8, target.y > source.y ? source.y + 11 : source.y - 8);
67232+
var sourcePt = shiftToCenterPoint(target.y > source.y ? source.x + 10 : source.x + 8, target.y > source.y ? source.y + 7 : source.y - 12);
6722267233
drawSourceDotLine(draw, sourcePt);
6722367234

6722467235
if (!prevSource) {
@@ -67555,7 +67566,7 @@ var drawFileIcon = exports.drawFileIcon = function drawFileIcon(draw, shiftToCen
6755567566
var fileIconPath = ICONS_DIR + 'js-file.svg';
6755667567
var fileIconSize = 15;
6755767568
var fileIconPointShiftX = 2;
67558-
var fileIconPointShiftY = 6;
67569+
var fileIconPointShiftY = 10;
6755967570
var fileIconPoint = shiftToCenterPoint(x + fileIconPointShiftX, y - fileIconPointShiftY);
6756067571

6756167572
draw.image(fileIconPath, fileIconSize, fileIconSize).move(fileIconPoint.x, fileIconPoint.y);
@@ -67569,7 +67580,7 @@ var drawFolderText = exports.drawFolderText = function drawFolderText(draw, shif
6756967580
disabled = _ref5.disabled;
6757067581

6757167582
var folderTextPointShiftX = 20;
67572-
var folderTextPointShiftY = 17;
67583+
var folderTextPointShiftY = 16;
6757367584

6757467585
var folderTextPoint = shiftToCenterPoint(x + folderTextPointShiftX, y - folderTextPointShiftY);
6757567586

@@ -67806,7 +67817,7 @@ exports.default = TreeDiagram;
6780667817
Object.defineProperty(exports, "__esModule", {
6780767818
value: true
6780867819
});
67809-
var PURPLE_COLOR = exports.PURPLE_COLOR = '#f06';
67820+
var PURPLE_COLOR = exports.PURPLE_COLOR = '#ff18a6';
6781067821
var BLUE_COLOR = exports.BLUE_COLOR = '#1890ff';
6781167822

6781267823
var FILE_NODE_TYPE = exports.FILE_NODE_TYPE = 'file';

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import {
44
drawCodeCrumbEdge,
55
drawPartEdge,
6-
drawCodeCrumbText
6+
drawCodeCrumbLoc
77
} from './drawHelpers';
88

99
import { FILE_NODE_TYPE, DIR_NODE_TYPE } from '../constants';
@@ -59,9 +59,11 @@ class CodeCrumbsTree extends React.Component {
5959
parentName: node.data.name
6060
});
6161

62-
drawCodeCrumbText(primaryDraw, shiftToCenterPoint, {
62+
const loc = crumb.data.crumbedLineNode.loc.start;
63+
drawCodeCrumbLoc(primaryDraw, shiftToCenterPoint, {
6364
x: cX,
6465
y: cY,
66+
loc: `(${loc.line},${loc.column})`,
6567
name: crumb.data.name
6668
});
6769
});

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

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ export const drawPartEdge = (
3333
{ source, parentName }
3434
) => {
3535
const nameWidth = SYMBOL_WIDTH * parentName.length;
36-
const padding = 18;
36+
const padding = 17;
3737

3838
const P1 = shiftToCenterPoint(source.x + nameWidth + padding, source.y);
39-
const P2 = { x: P1.x + padding + 4, y: P1.y };
39+
const P2 = { x: P1.x + padding + 6, y: P1.y };
4040

4141
const polyline = draw.polyline([[P1.x, P1.y], [P2.x, P2.y]]);
4242

@@ -47,22 +47,34 @@ export const drawPartEdge = (
4747
draw.line(P1.x, P1.y - 2, P1.x, P1.y + 2).stroke({ color: PURPLE_COLOR });
4848
};
4949

50-
export const drawCodeCrumbText = (
50+
export const drawCodeCrumbLoc = (
5151
draw,
5252
shiftToCenterPoint,
53-
{ x, y, name = '' }
53+
{ x, y, name = '', loc }
5454
) => {
55-
const text = draw.text(name);
56-
text.font({ fill: '#595959', family: 'Menlo' });
57-
5855
const textPointShiftX = 3;
59-
const textPointShiftY = 8;
56+
const textPointShiftY = 5;
6057
const textPoint = shiftToCenterPoint(x, y);
6158

62-
text.move(textPoint.x + textPointShiftX, textPoint.y - textPointShiftY);
63-
59+
const locWidth = loc.length * 6;
6460
draw
65-
.circle(4)
66-
.fill(PURPLE_COLOR)
67-
.move(textPoint.x - 2, textPoint.y - 2);
61+
.rect(locWidth, 12)
62+
.fill('#fff')
63+
.stroke(PURPLE_COLOR)
64+
.move(textPoint.x, textPoint.y - 6);
65+
66+
const locText = draw.text(loc);
67+
locText.font({ fill: '#595959', family: 'Menlo', size: '8px' });
68+
//TODO: refactor to use one way, plus or minus
69+
locText.move(textPoint.x + textPointShiftX, textPoint.y - textPointShiftY);
70+
71+
if (name) {
72+
const nameText = draw.text(':' + name);
73+
nameText.font({ fill: '#595959', family: 'Menlo', size: '12px' });
74+
//TODO: refactor to use one way, plus or minus
75+
nameText.move(
76+
textPoint.x + textPointShiftX + locWidth - 1,
77+
textPoint.y - textPointShiftY - 2
78+
);
79+
}
6880
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export const drawDependenciesEdge = (
99
shiftToCenterPoint,
1010
{ source, target, prevSource }
1111
) => {
12-
const padding = 20;
13-
const halfPadding = padding / 2;
12+
const padding = 30;
13+
const halfPadding = padding / 2 - 5;
1414

1515
const sourcePt = shiftToCenterPoint(
1616
target.y > source.y ? source.x + 10 : source.x + 8,
17-
target.y > source.y ? source.y + 11 : source.y - 8
17+
target.y > source.y ? source.y + 7 : source.y - 12
1818
);
1919
drawSourceDotLine(draw, sourcePt);
2020

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const drawFileIcon = (draw, shiftToCenterPoint, { x, y }) => {
7171
const fileIconPath = ICONS_DIR + 'js-file.svg';
7272
const fileIconSize = 15;
7373
const fileIconPointShiftX = 2;
74-
const fileIconPointShiftY = 6;
74+
const fileIconPointShiftY = 10;
7575
const fileIconPoint = shiftToCenterPoint(
7676
x + fileIconPointShiftX,
7777
y - fileIconPointShiftY
@@ -88,7 +88,7 @@ export const drawFolderText = (
8888
{ x, y, name = '', disabled }
8989
) => {
9090
const folderTextPointShiftX = 20;
91-
const folderTextPointShiftY = 17;
91+
const folderTextPointShiftY = 16;
9292

9393
const folderTextPoint = shiftToCenterPoint(
9494
x + folderTextPointShiftX,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const PURPLE_COLOR = '#f06';
1+
export const PURPLE_COLOR = '#ff18a6';
22
export const BLUE_COLOR = '#1890ff';
33

44
export const FILE_NODE_TYPE = 'file';

‎src/server/codecrumbs/codecrumbs.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ const CRUMB = 'codecrumb',
66

77
const parseCodecrumbComment = (node = {}) => {
88
const comment = node.value || '';
9-
return { original: comment };
9+
const afterAlias = comment.split(':')[1];
10+
return { original: comment, name: afterAlias };
1011
};
1112

1213
const isCodecrumb = (node = {}) => {
@@ -34,11 +35,13 @@ const getCrumbs = fileCode => {
3435

3536
[leadingComment, trailingComment].forEach(comment => {
3637
if (comment && isCodecrumb(comment)) {
38+
const crumbOptions = parseCodecrumbComment(comment);
39+
3740
crumbsList.push({
38-
name: 'codecrumb',
41+
name: crumbOptions.name || '', //TODO: check, can be bug with layout calc
3942
crumbedLineNode: node,
4043
crumbNode: comment,
41-
crumbOptions: parseCodecrumbComment(comment)
44+
crumbOptions
4245
});
4346
}
4447
});

0 commit comments

Comments
 (0)