mirror
/
codecrumbs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update formatting

This commit is contained in:
Bogdan Lyashenko 2018-08-06 20:54:28 +02:00
parent 86b3cec1e7
commit 15a86e4830
37 changed files with 2947 additions and 3117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"printWidth": 100,
"parser": "babylon",
"singleQuote": true,
"tabWidth": 2
}

4
package.json
View File

@ -9,7 +9,8 @@
"start:client": "cd src/public && webpack --progress --colors --watch --env dev",
"start:server": "nodemon ./src/server/index.js",
"start:server-debug": "nodemon --inspect ./src/server/index.js",
"start:demo": "node ./src/server/index.js"
"start:demo": "node ./src/server/index.js",
"pretty": "prettier --write \"./src/public/js/**/*.js\""
},
"dependencies": {
"antd": "^3.5.0",
@ -44,6 +45,7 @@
"devDependencies": {
"babel-preset-stage-2": "^6.24.1",
"nodemon": "^1.17.3",
"prettier": "^1.14.0",
"webpack-cli": "^2.1.2"
},
"nodemonConfig": {

20
src/public/dist/bundle.js vendored
View File

@ -85485,8 +85485,7 @@ var App = function App() {
_react2.default.createElement(
'footer',
{ className: 'App-footer' },
'Bohdan Liashenko',
' ',
'Bohdan Liashenko ',
_react2.default.createElement(
'a',
{ href: 'https://github.com/Bogdan-Lyashenko/codecrumbs' },
@ -85650,10 +85649,7 @@ var ViewsSwitchList = function (_React$Component) {
controls.map(function (item, i) {
return _react2.default.createElement(
'div',
{
key: item.key,
className: 'ViewSwitchList-small-item'
},
{ key: item.key, className: 'ViewSwitchList-small-item' },
item.type === _constants.VIEW_TYPES.BUTTON ? _react2.default.createElement(
_button2.default,
{
@ -86285,11 +86281,7 @@ var SideBarContainer = function SideBarContainer(_ref) {
if (!selectedFile) return null;
//TODO: add animation slide
return _react2.default.createElement(_SideBar2.default, {
file: selectedFile,
codeCrumb: selectedCodeCrumb,
onClose: onClose
});
return _react2.default.createElement(_SideBar2.default, { file: selectedFile, codeCrumb: selectedCodeCrumb, onClose: onClose });
};
var mapStateToProps = function mapStateToProps(state) {
@ -86461,10 +86453,7 @@ exports.default = function (_ref) {
_react2.default.createElement(
TabPane,
{ tab: 'Code', key: '1' },
_react2.default.createElement(_Code2.default, {
code: file.fileCode,
crumbedLines: crumbedLines
})
_react2.default.createElement(_Code2.default, { code: file.fileCode, crumbedLines: crumbedLines })
),
_react2.default.createElement(
TabPane,
@ -87226,7 +87215,6 @@ var SourceTree = function (_React$Component) {
value: function componentDidUpdate() {
this.clearPrimaryDraw();
this.clearSecondaryDraw();
this.drawTree();
}
}, {

2
src/public/dist/bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
src/public/js/App.js
View File

@ -21,10 +21,7 @@ const App = () => {
</div>
<footer className="App-footer">
Bohdan Liashenko{' '}
<a href="https://github.com/Bogdan-Lyashenko/codecrumbs">
Project Github
</a>
Bohdan Liashenko <a href="https://github.com/Bogdan-Lyashenko/codecrumbs">Project Github</a>
</footer>
</div>
);

5
src/public/js/components/controls/ViewSwitches/ViewSwitchesContainer.js
View File

@ -14,4 +14,7 @@ const mapDispatchToProps = {
fireButtonAction
};
export default connect(mapStateToProps, mapDispatchToProps)(ViewSwitchList);
export default connect(
mapStateToProps,
mapDispatchToProps
)(ViewSwitchList);

20
src/public/js/components/controls/ViewSwitches/component/ViewsSwitchList.js
View File

@ -5,21 +5,13 @@ import { VIEW_TYPES } from '../store/constants';
class ViewsSwitchList extends React.Component {
renderChildren(controls) {
const {
toggleSwitch,
checkedState,
disabledState,
fireButtonAction
} = this.props;
const { toggleSwitch, checkedState, disabledState, fireButtonAction } = this.props;
return (
<div className="ViewSwitchList-small-group">
{controls.map((item, i) => {
return (
<div
key={item.key}
className="ViewSwitchList-small-item"
>
<div key={item.key} className="ViewSwitchList-small-item">
{item.type === VIEW_TYPES.BUTTON ? (
<Button
title={item.title}
@ -32,9 +24,7 @@ class ViewsSwitchList extends React.Component {
) : (
<Checkbox
checked={checkedState[item.key]}
onChange={e =>
toggleSwitch(item.key, e.target.checked)
}
onChange={e => toggleSwitch(item.key, e.target.checked)}
>
<span title={item.title}>{item.name}</span>
</Checkbox>
@ -59,9 +49,7 @@ class ViewsSwitchList extends React.Component {
<Switch
size="small"
checked={checkedState[item.key]}
onChange={checked =>
toggleSwitch(item.key, checked)
}
onChange={checked => toggleSwitch(item.key, checked)}
/>
</div>

15
src/public/js/components/data-bus/DataBusContainer.js
View File

@ -3,10 +3,7 @@ import { connect } from 'react-redux';
import { createConnection } from '../../utils/connection';
import { SOCKET_EVENT_TYPE } from '../../../../shared/constants';
import {
setInitialSourceData,
calcFilesTreeLayoutNodes
} from './store/actions';
import { setInitialSourceData, calcFilesTreeLayoutNodes } from './store/actions';
class DataBusContainer extends React.Component {
componentDidMount() {
@ -17,10 +14,7 @@ class DataBusContainer extends React.Component {
switch (type) {
case SOCKET_EVENT_TYPE.SYNC_SOURCE_FILES:
const { filesTree, filesList, dependenciesList } = data.body;
const {
setInitialSourceData,
calcFilesTreeLayoutNodes
} = this.props;
const { setInitialSourceData, calcFilesTreeLayoutNodes } = this.props;
setInitialSourceData({
filesTree,
@ -46,4 +40,7 @@ const mapDispatchToProps = {
calcFilesTreeLayoutNodes
};
export default connect(null, mapDispatchToProps)(DataBusContainer);
export default connect(
null,
mapDispatchToProps
)(DataBusContainer);

2
src/public/js/components/data-bus/store/actions.js
View File

@ -45,7 +45,7 @@ export const selectCodeCrumb = (fileNode, codeCrumb) => ({
payload: { fileNode, codeCrumb }
});
export const setDependenciesEntryPoint = (fileNode) => ({
export const setDependenciesEntryPoint = fileNode => ({
type: ACTIONS.SET_DEPENDENCIES_ENTRY_POINT,
payload: fileNode
});

12
src/public/js/components/data-bus/store/reducer.js
View File

@ -21,11 +21,7 @@ export default (state = DefaultState, action) => {
dependenciesRootEntryPoint: action.payload.dependenciesList[0],
isCurrentDependenciesEntryPointRoot: true,
firstLevelFolders: safeGet(
action.payload,
'filesTree.children',
[]
)
firstLevelFolders: safeGet(action.payload, 'filesTree.children', [])
.filter(item => item.type === DIR_NODE_TYPE)
.reduce((res, item) => {
res[item.path] = item;
@ -82,14 +78,12 @@ export default (state = DefaultState, action) => {
case ACTIONS.SET_DEPENDENCIES_ENTRY_POINT:
const entry = action.payload;
const rootEntryPointModuleName =
state.dependenciesRootEntryPoint.moduleName;
const rootEntryPointModuleName = state.dependenciesRootEntryPoint.moduleName;
return {
...state,
dependenciesEntryPoint: entry,
isCurrentDependenciesEntryPointRoot:
entry && entry.path === rootEntryPointModuleName
isCurrentDependenciesEntryPointRoot: entry && entry.path === rootEntryPointModuleName
};
default:

13
src/public/js/components/side-bar/SideBarContainer.js
View File

@ -7,13 +7,7 @@ const SideBarContainer = ({ selectedFile, selectedCodeCrumb, onClose }) => {
if (!selectedFile) return null;
//TODO: add animation slide
return (
<SideBar
file={selectedFile}
codeCrumb={selectedCodeCrumb}
onClose={onClose}
/>
);
return <SideBar file={selectedFile} codeCrumb={selectedCodeCrumb} onClose={onClose} />;
};
const mapStateToProps = state => {
@ -29,4 +23,7 @@ const mapDispatchToProps = dispatch => ({
onClose: () => dispatch(selectFile(null))
});
export default connect(mapStateToProps, mapDispatchToProps)(SideBarContainer);
export default connect(
mapStateToProps,
mapDispatchToProps
)(SideBarContainer);

9
src/public/js/components/side-bar/component/SideBar.js
View File

@ -6,9 +6,7 @@ import Code from './Code/Code';
//TODO: Add slide from right animation
export default ({ file, codeCrumb, onClose }) => {
const crumbedLines = !codeCrumb
? []
: codeCrumb.crumbedLineNode.loc.start.line;
const crumbedLines = !codeCrumb ? [] : codeCrumb.crumbedLineNode.loc.start.line;
return (
<div className="SideBar-container">
@ -23,10 +21,7 @@ export default ({ file, codeCrumb, onClose }) => {
{file.fileCode && (
<Tabs defaultActiveKey="1" onChange={() => {}}>
<TabPane tab="Code" key="1">
<Code
code={file.fileCode}
crumbedLines={crumbedLines}
/>
<Code code={file.fileCode} crumbedLines={crumbedLines} />
</TabPane>
<TabPane tab="FlowChart" key="2">
Content of Tab Pane 2

5
src/public/js/components/tree-diagram/TreeDiagramContainer.js
View File

@ -37,4 +37,7 @@ const mapDispatchToProps = {
onFolderClick: toggleFolder
};
export default connect(mapStateToProps, mapDispatchToProps)(TreeDiagram);
export default connect(
mapStateToProps,
mapDispatchToProps
)(TreeDiagram);

29
src/public/js/components/tree-diagram/component/CodeCrumbsTree/CodeCrumbsTree.js
View File

@ -1,11 +1,6 @@
import React from 'react';
import { withSvgDraw } from '../utils/SvgDraw';
import {
drawCodeCrumbEdge,
drawPartEdge,
drawCodeCrumbLoc,
drawPopOver
} from './drawHelpers';
import { drawCodeCrumbEdge, drawPartEdge, drawCodeCrumbLoc, drawPopOver } from './drawHelpers';
import { drawFileText, drawFileIcon } from '../SourceTree/drawHelpers';
import { getFilesList } from '../../../../utils/treeLayout';
@ -92,10 +87,7 @@ class CodeCrumbsTree extends React.Component {
!singleCrumb &&
add(
drawCodeCrumbEdge(
primaryDraw,
shiftToCenterPoint,
{
drawCodeCrumbEdge(primaryDraw, shiftToCenterPoint, {
source: {
x: nX,
y: nY
@ -105,8 +97,7 @@ class CodeCrumbsTree extends React.Component {
y: cY
},
parentName: node.data.name
}
)
})
);
//TODO: refactor mess
@ -119,22 +110,14 @@ class CodeCrumbsTree extends React.Component {
name: crumb.data.name,
singleCrumb,
onMouseOver() {
if (
!crumb.data.params.details ||
codeCrumbsDetails
)
return null;
if (!crumb.data.params.details || codeCrumbsDetails) return null;
return drawPopOver(
primaryDraw,
shiftToCenterPoint,
{
return drawPopOver(primaryDraw, shiftToCenterPoint, {
x: cX,
y: cY,
name: crumb.data.params.details,
singleCrumb
}
);
});
},
onClick() {
onCodeCrumbSelect(node.data, crumb.data);

36
src/public/js/components/tree-diagram/component/CodeCrumbsTree/drawHelpers.js
View File

@ -1,10 +1,6 @@
import { PURPLE_COLOR, BLUE_COLOR, SYMBOL_WIDTH } from '../../store/constants';
export const drawCodeCrumbEdge = (
draw,
shiftToCenterPoint,
{ target, source, parentName }
) => {
export const drawCodeCrumbEdge = (draw, shiftToCenterPoint, { target, source, parentName }) => {
const nameWidth = SYMBOL_WIDTH * parentName.length;
const padding = 40;
const edgeTurnDistance = 20;
@ -15,12 +11,7 @@ export const drawCodeCrumbEdge = (
const P3 = shiftToCenterPoint(target.x - edgeTurnDistance, target.y);
const P4 = shiftToCenterPoint(target.x, target.y);
const polyline = draw.polyline([
[P1.x, P1.y],
[P2.x, P2.y],
[P3.x, P3.y],
[P4.x, P4.y]
]);
const polyline = draw.polyline([[P1.x, P1.y], [P2.x, P2.y], [P3.x, P3.y], [P4.x, P4.y]]);
polyline.fill('none').stroke({
color: PURPLE_COLOR
@ -29,11 +20,7 @@ export const drawCodeCrumbEdge = (
return polyline;
};
export const drawPartEdge = (
draw,
shiftToCenterPoint,
{ source, parentName }
) => {
export const drawPartEdge = (draw, shiftToCenterPoint, { source, parentName }) => {
const nameWidth = SYMBOL_WIDTH * parentName.length;
const padding = 17;
@ -46,9 +33,7 @@ export const drawPartEdge = (
color: PURPLE_COLOR
});
const smallLine = draw
.line(P1.x, P1.y - 2, P1.x, P1.y + 2)
.stroke({ color: PURPLE_COLOR });
const smallLine = draw.line(P1.x, P1.y - 2, P1.x, P1.y + 2).stroke({ color: PURPLE_COLOR });
return [polyline, smallLine];
};
@ -93,10 +78,7 @@ export const drawCodeCrumbLoc = (
const nameText = draw.text(':' + name);
nameText.font({ fill: '#595959', family: 'Menlo', size: '12px' });
//TODO: refactor to use one way, plus or minus
nameText.move(
textPoint.x + textPointShiftX + locWidth - 1,
textPoint.y - textPointShiftY - 2
);
nameText.move(textPoint.x + textPointShiftX + locWidth - 1, textPoint.y - textPointShiftY - 2);
return [locRec, locText, nameText];
}
@ -104,11 +86,7 @@ export const drawCodeCrumbLoc = (
return [locRec, locText];
};
export const drawPopOver = (
draw,
shiftToCenterPoint,
{ x, y, name = '', singleCrumb }
) => {
export const drawPopOver = (draw, shiftToCenterPoint, { x, y, name = '', singleCrumb }) => {
const tPt = shiftToCenterPoint(x - 15 + (singleCrumb ? 0 : 20), y - 24);
const nameWidth = name.length * 6;
const nameHeight = 8;
@ -129,7 +107,7 @@ export const drawPopOver = (
const text = draw.text(name);
text.font({ fill: '#595959', family: 'Menlo', size: '10px' });
text.move(tPt.x+2, tPt.y - 1);
text.move(tPt.x + 2, tPt.y - 1);
return [text, polyline];
};

37
src/public/js/components/tree-diagram/component/DependenciesTree/DependenciesTree.js
View File

@ -21,20 +21,14 @@ class DependenciesTree extends React.Component {
};
getFilteredDependenciesList() {
const {
dependenciesList,
dependenciesEntryPoint,
dependenciesShowOneModule
} = this.props;
const { dependenciesList, dependenciesEntryPoint, dependenciesShowOneModule } = this.props;
const entryPoint = dependenciesEntryPoint || {
path: dependenciesList[0].moduleName
};
if (dependenciesShowOneModule) {
return [
dependenciesList.find(d => d.moduleName === entryPoint.path)
];
return [dependenciesList.find(d => d.moduleName === entryPoint.path)];
}
return this.collectDependencies(entryPoint.path, dependenciesList);
@ -46,9 +40,7 @@ class DependenciesTree extends React.Component {
while (queue.length) {
let moduleName = queue.shift(),
entryModule = dependenciesList.find(
d => d.moduleName === moduleName
);
entryModule = dependenciesList.find(d => d.moduleName === moduleName);
store.push(entryModule);
@ -62,22 +54,13 @@ class DependenciesTree extends React.Component {
}
drawTree() {
const {
primaryDraw,
filesTreeLayoutNodes,
shiftToCenterPoint,
sourceDiagramOn
} = this.props;
const { primaryDraw, filesTreeLayoutNodes, shiftToCenterPoint, sourceDiagramOn } = this.props;
const moduleFilesList = getFilesList(filesTreeLayoutNodes);
const filteredDependenciesList = this.getFilteredDependenciesList();
filteredDependenciesList.forEach(
({ moduleName, importedModuleNames }) => {
const moduleNode = this.findNodeByPathName(
moduleFilesList,
moduleName
);
filteredDependenciesList.forEach(({ moduleName, importedModuleNames }) => {
const moduleNode = this.findNodeByPathName(moduleFilesList, moduleName);
if (!moduleNode) return;
@ -96,10 +79,7 @@ class DependenciesTree extends React.Component {
}
importedModuleNames.reduce((prevSource, name) => {
const importedNode = this.findNodeByPathName(
moduleFilesList,
name
);
const importedNode = this.findNodeByPathName(moduleFilesList, name);
if (!importedNode) return;
@ -117,8 +97,7 @@ class DependenciesTree extends React.Component {
return source;
}, null);
}
);
});
}
render() {

34
src/public/js/components/tree-diagram/component/DependenciesTree/drawHelpers.js
View File

@ -4,11 +4,7 @@ import { BLUE_COLOR, PURPLE_COLOR } from '../../store/constants';
const COLOR = BLUE_COLOR;
export const drawDependenciesEdge = (
draw,
shiftToCenterPoint,
{ source, target, prevSource }
) => {
export const drawDependenciesEdge = (draw, shiftToCenterPoint, { source, target, prevSource }) => {
const padding = 30;
const halfPadding = padding / 2 - 5;
@ -21,8 +17,8 @@ export const drawDependenciesEdge = (
if (!prevSource) {
const targetPt = shiftToCenterPoint(target.x, target.y);
const P1 = { x: sourcePt.x, y: targetPt.y + padding - 6};
const P2 = { x: targetPt.x - halfPadding, y: targetPt.y + padding -6 };
const P1 = { x: sourcePt.x, y: targetPt.y + padding - 6 };
const P2 = { x: targetPt.x - halfPadding, y: targetPt.y + padding - 6 };
const P3 = { x: targetPt.x - halfPadding, y: targetPt.y };
drawConnectionLine(draw, [
@ -35,22 +31,19 @@ export const drawDependenciesEdge = (
drawArrow(draw, shiftToCenterPoint, target.x, target.y + 6);
} else {
if (prevSource.x < sourcePt.x) { //TODO: handle other cases
if (prevSource.x < sourcePt.x) {
//TODO: handle other cases
const prevSourcePt = shiftToCenterPoint(prevSource.x, prevSource.y);
const P1 = { x: sourcePt.x, y: sourcePt.y + halfPadding -3};
const P1 = { x: sourcePt.x, y: sourcePt.y + halfPadding - 3 };
const P2 = {
x: prevSourcePt.x + halfPadding,
y: sourcePt.y + halfPadding-3
y: sourcePt.y + halfPadding - 3
};
drawConnectionLine(draw, [
[sourcePt.x, sourcePt.y],
[P1.x, P1.y],
[P2.x, P2.y]
]);
drawConnectionLine(draw, [[sourcePt.x, sourcePt.y], [P1.x, P1.y], [P2.x, P2.y]]);
drawDot(draw, P2)
drawDot(draw, P2);
}
}
};
@ -82,17 +75,12 @@ const drawArrow = (draw, shiftToCenterPoint, nX, nY) => {
const fileIconSize = 7;
const fileIconPointShiftX = -4;
const fileIconPointShiftY = 9.5;
const fileIconPoint = shiftToCenterPoint(
nX + fileIconPointShiftX,
nY - fileIconPointShiftY
);
const fileIconPoint = shiftToCenterPoint(nX + fileIconPointShiftX, nY - fileIconPointShiftY);
draw
.rect(5, 6)
.fill('#fff')
.move(fileIconPoint.x + 2, fileIconPoint.y);
draw
.image(fileIconPath, fileIconSize, fileIconSize)
.move(fileIconPoint.x, fileIconPoint.y);
draw.image(fileIconPath, fileIconSize, fileIconSize).move(fileIconPoint.x, fileIconPoint.y);
};

6
src/public/js/components/tree-diagram/component/SourceTree/SourceTree.js
View File

@ -9,10 +9,7 @@ import {
drawFolderIcon
} from './drawHelpers';
import {
FILE_NODE_TYPE,
DIR_NODE_TYPE
} from '../../../../../../shared/constants';
import { FILE_NODE_TYPE, DIR_NODE_TYPE } from '../../../../../../shared/constants';
import { createSet } from '../utils/SvgSet';
class SourceTree extends React.Component {
@ -24,7 +21,6 @@ class SourceTree extends React.Component {
componentDidUpdate() {
this.clearPrimaryDraw();
this.clearSecondaryDraw();
this.drawTree();
}

60
src/public/js/components/tree-diagram/component/SourceTree/drawHelpers.js
View File

@ -5,11 +5,7 @@ import { BLUE_COLOR, PURPLE_COLOR, SYMBOL_WIDTH } from '../../store/constants';
//create object instead
const ICONS_DIR = 'resources/';
export const drawDot = (
draw,
shiftToCenterPoint,
{ x, y, disabled, highlighted }
) => {
export const drawDot = (draw, shiftToCenterPoint, { x, y, disabled, highlighted }) => {
const radius = 5;
const halfRadius = radius / 2;
const circlePoint = shiftToCenterPoint(x - halfRadius, y - halfRadius);
@ -42,12 +38,7 @@ export const drawSourceEdge = (
const points = singleChild
? [[START_PT.x, START_PT.y], [END_PT.x, END_PT.y]]
: [
[START_PT.x, START_PT.y],
[P2.x, P2.y],
[P3.x, P3.y],
[END_PT.x, END_PT.y]
];
: [[START_PT.x, START_PT.y], [P2.x, P2.y], [P3.x, P3.y], [END_PT.x, END_PT.y]];
const polyline = draw.polyline(points);
@ -59,20 +50,13 @@ export const drawSourceEdge = (
return polyline;
};
export const drawFileText = (
draw,
shiftToCenterPoint,
{ x, y, purple, name = '', onClick }
) => {
export const drawFileText = (draw, shiftToCenterPoint, { x, y, purple, name = '', onClick }) => {
const text = draw.text(name);
text.font({ fill: purple ? PURPLE_COLOR : '#595959', family: 'Menlo' });
const fileTextPointShiftX = 16;
const fileTextPointShiftY = 8;
const fileTextPoint = shiftToCenterPoint(
x + fileTextPointShiftX,
y - fileTextPointShiftY
);
const fileTextPoint = shiftToCenterPoint(x + fileTextPointShiftX, y - fileTextPointShiftY);
text.move(fileTextPoint.x, fileTextPoint.y);
if (onClick) {
@ -82,20 +66,12 @@ export const drawFileText = (
return text;
};
export const drawFileIcon = (
draw,
shiftToCenterPoint,
{ x, y, purple, onClick }
) => {
const fileIconPath =
ICONS_DIR + (purple ? 'js-file-purple.svg' : 'js-file.svg');
export const drawFileIcon = (draw, shiftToCenterPoint, { x, y, purple, onClick }) => {
const fileIconPath = ICONS_DIR + (purple ? 'js-file-purple.svg' : 'js-file.svg');
const fileIconSize = 15;
const fileIconPointShiftX = 2;
const fileIconPointShiftY = 10;
const fileIconPoint = shiftToCenterPoint(
x + fileIconPointShiftX,
y - fileIconPointShiftY
);
const fileIconPoint = shiftToCenterPoint(x + fileIconPointShiftX, y - fileIconPointShiftY);
const icon = draw
.image(fileIconPath, fileIconSize, fileIconSize)
@ -108,18 +84,11 @@ export const drawFileIcon = (
return icon;
};
export const drawFolderText = (
draw,
shiftToCenterPoint,
{ x, y, name = '', disabled }
) => {
export const drawFolderText = (draw, shiftToCenterPoint, { x, y, name = '', disabled }) => {
const folderTextPointShiftX = 20;
const folderTextPointShiftY = 16;
const folderTextPoint = shiftToCenterPoint(
x + folderTextPointShiftX,
y - folderTextPointShiftY
);
const folderTextPoint = shiftToCenterPoint(x + folderTextPointShiftX, y - folderTextPointShiftY);
const fill = !disabled ? '#595959' : '#A9A8A8';
const text = draw.text(name);
@ -130,11 +99,7 @@ export const drawFolderText = (
return text;
};
export const drawFolderIcon = (
draw,
shiftToCenterPoint,
{ x, y, disabled, closed, onClick }
) => {
export const drawFolderIcon = (draw, shiftToCenterPoint, { x, y, disabled, closed, onClick }) => {
const folderIconPath = `${ICONS_DIR}${closed ? 'closed-' : ''}folder${
disabled ? '-disabled' : ''
}.svg`;
@ -142,10 +107,7 @@ export const drawFolderIcon = (
const folderIconSize = closed ? 14 : 15;
const folderIconPointShiftX = closed ? 3 : 3;
const folderIconPointShiftY = closed ? 16 : 17;
const folderIconPoint = shiftToCenterPoint(
x + folderIconPointShiftX,
y - folderIconPointShiftY
);
const folderIconPoint = shiftToCenterPoint(x + folderIconPointShiftX, y - folderIconPointShiftY);
let polyline = null;
if (closed) {

5
src/public/js/components/tree-diagram/component/utils/SvgDraw.js
View File

@ -5,7 +5,7 @@ import { buildShiftToPoint } from '../../../../utils/geometry';
const IconsAndTextLayer = 'iconsAndTextLayer';
const cachedSvgDraws = {};
const BOX_SIZE = {W: 1000, H: 800};
const BOX_SIZE = { W: 1000, H: 800 };
const DOT = {
x: 50,
y: 500
@ -63,8 +63,7 @@ export const withSvgDraw = Component =>
primaryLayer.removeChild(this.state.primaryDraw.node);
}
secondaryLayer &&
secondaryLayer.removeChild(this.state.secondaryDraw.node);
secondaryLayer && secondaryLayer.removeChild(this.state.secondaryDraw.node);
}
render() {

26
src/public/js/store/sagas.js
View File

@ -26,9 +26,7 @@ function* reactOnSwitchToggle(action) {
if (switchKey === CONTROLS_KEYS.DEPENDENCIES_SHOW_ONE_MODULE) {
const isDisabled = yield isDependenciesShowAllDisabled();
yield put(
setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_SHOW_ALL, isDisabled)
);
yield put(setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_SHOW_ALL, isDisabled));
}
}
@ -74,10 +72,7 @@ function* reactOnToggledFolder(action) {
put(
setDisabledControl(
CONTROLS_KEYS.SOURCE_COLLAPSE_TO_MIN,
every(
Object.keys(firstLevelFolders),
item => closedFolders[item]
)
every(Object.keys(firstLevelFolders), item => closedFolders[item])
)
)
]);
@ -87,21 +82,15 @@ function* reactOnToggledFolder(action) {
function* reactDependenciesEntryPointChange(action) {
if (!action.payload) {
return yield put(
setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_SHOW_ALL, true)
);
return yield put(setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_SHOW_ALL, true));
}
const isDisabled = yield isDependenciesShowAllDisabled();
yield put(
setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_SHOW_ALL, isDisabled)
);
yield put(setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_SHOW_ALL, isDisabled));
}
function* isDependenciesShowAllDisabled() {
const isRoot = yield select(
state => state.dataBus.isCurrentDependenciesEntryPointRoot
);
const isRoot = yield select(state => state.dataBus.isCurrentDependenciesEntryPointRoot);
const dependenciesShowOneModule = yield select(
state => state.viewSwitches.checkedState.dependenciesShowOneModule
@ -115,9 +104,6 @@ export default function* rootSaga() {
takeEvery(SWITCHES_ACTIONS.TOGGLE_SWITCH, reactOnSwitchToggle),
takeEvery(SWITCHES_ACTIONS.FIRE_BUTTON_ACTION, reactOnButtonAction),
takeEvery(DATA_BUS_ACTIONS.TOGGLE_FOLDER, reactOnToggledFolder),
takeEvery(
DATA_BUS_ACTIONS.SET_DEPENDENCIES_ENTRY_POINT,
reactDependenciesEntryPointChange
)
takeEvery(DATA_BUS_ACTIONS.SET_DEPENDENCIES_ENTRY_POINT, reactDependenciesEntryPointChange)
]);
}

7
src/public/js/utils/dev-test.js
View File

@ -3,7 +3,6 @@ import babelTraverse from 'babel-traverse';
import * as d3flextree from 'd3-flextree';
import SVG from 'svg.js';
const astTest = () => {
const ast = babylon.parse(`
//codecrumb
@ -14,7 +13,7 @@ const astTest = () => {
babelTraverse(ast, {
enter(path) {
if (path.node && path.node.leadingComments || path.node.trailingComments) {
if ((path.node && path.node.leadingComments) || path.node.trailingComments) {
//debugger
console.log(path.node.leadingComments, path.node.trailingComments);
}
@ -45,9 +44,7 @@ const d3test = treeData => {
if (node.parent) {
let p = node.parent;
draw
.line(p.x + 200, p.y + 200, node.x + 200, node.y + 200)
.stroke({ width: 1 });
draw.line(p.x + 200, p.y + 200, node.x + 200, node.y + 200).stroke({ width: 1 });
}
});
};

1
src/public/js/utils/geometry.js
View File

@ -2,4 +2,3 @@ export const buildShiftToPoint = shift => (x, y) => ({
x: shift.x + x,
y: shift.y + y
});

1
src/public/js/utils/svgPrimitives.js
View File

@ -1,4 +1,3 @@
export const getCurvedPath = (points, theme) => {
const pointStr = points
.map((point, i) => {

10
src/public/js/utils/treeLayout.js
View File

@ -21,10 +21,7 @@ export const getTreeLayout = (
if (node.parent && node.data.type === DIR_NODE_TYPE) {
const children = node.parent.children;
nameLength = children.reduce((max, item) => {
if (
item.data.type === DIR_NODE_TYPE &&
item.data.name.length > max
) {
if (item.data.type === DIR_NODE_TYPE && item.data.name.length > max) {
return item.data.name.length;
}
@ -32,10 +29,7 @@ export const getTreeLayout = (
}, 0);
}
return [
config.nodeSizeX,
nameLength * config.symbolWidth + config.nodeSizeY
];
return [config.nodeSizeX, nameLength * config.symbolWidth + config.nodeSizeY];
},
spacing: (nodeA, nodeB) => config.spacing
});