1.6.13

chore: import only getCrumbs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codecrumbs",
-  "version": "1.6.8",
+  "version": "1.6.13",
   "author": "Bohdan Liashenko",
   "license": "BSD-3-Clause",
   "repository": {
@@ -36,10 +36,10 @@
     "directory-tree": "^2.1.0",
     "file-saver": "^2.0.0",
     "http-server": "0.9.0",
-    "js2flowchart": "^1.1.7",
+    "js2flowchart": "1.3.2",
     "lodash": "^4.17.10",
     "lodash.debounce": "^4.0.8",
-    "madge": "^3.3.0",
+    "madge": "^3.4.4",
     "portscanner": "^2.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",

src/public/js/App.js

@@ -22,9 +22,7 @@ const ExplorerBar = React.lazy(() =>
   import(/* webpackChunkName: "explorer-bar" */ './components/explorerBar/ExplorerBarContainer')
 );
 
-const Footer = React.lazy(() =>
-  import(/* webpackChunkName: "footer" */ './components/footer')
-);
+const Footer = React.lazy(() => import(/* webpackChunkName: "footer" */ './components/footer'));
 
 import './App.less';
 
@@ -61,6 +59,9 @@ const App = (props = {}) => {
         <Suspense fallback={null}>
           <SideBar />
         </Suspense>
+        {props.extraLayout.appBodyBottom && (
+          <props.extraLayout.appBodyBottom.Component {...props} />
+        )}
       </div>
 
       <footer className="footer">

src/public/js/components/sideBar/component/Code/index.js

@@ -28,6 +28,7 @@ export default class extends React.Component {
       this.codeRef.scrollTo(0, (lines[0][0] - 1) * (lineHeight || LINE_HEIGHT) + PADDING_TOP - 2);
   }
   componentDidUpdate(prevProps) {
+    // TODO: don\t do it each time (check real changes)
     this.fixScroll();
   }
   componentDidMount() {

src/public/js/components/sideBar/component/CrumbsTab/index.js

@@ -34,7 +34,7 @@ const CrumbsTab = props => {
                 header={`[${typeof stepFile.step !== 'undefined' ? stepFile.step : '*'}] ${
                   stepFile.file.path
                 }`}
-                key={i}
+                key={stepFile.crumbNodeLines.join(',')}
               >
                 <Code
                   language={language}

src/public/js/components/treeDiagram/TreeDiagamsContainer.less

@@ -1,6 +1,7 @@
 .TreeDiagramsContainer {
   overflow: auto;
   width: 100%;
+  margin-top: 20px;
 }
 
 .MainLoader {
@@ -10,4 +11,4 @@
   padding: 250px;
   margin-top: 60px;
   width: 100%;
-}
+}

src/public/js/components/treeDiagram/TreeDiagramsContainer.js

@@ -24,6 +24,7 @@ const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => {
     );
   }
 
+  // TODO: use ref for TreeDiagram container (on mount set it to store)
   return (
     <div className={'TreeDiagramsContainer'}>
       {namespacesList.map(namespace => (

src/public/js/components/treeDiagram/component/Node/CodeCrumb.js

@@ -13,6 +13,7 @@ export const CodeCrumbName = props => {
     cover,
     flow,
     flowStep,
+    original,
     selected,
     onMouseOver,
     onClick
@@ -73,7 +74,7 @@ export const CodeCrumbName = props => {
             onClick={onClick}
             className={'CodeCrumbName-flow'}
           >
-            {flowStep}
+            {flowStep !== 0 ? flowStep : /#0/.test(original) ? 0 : '*'}
           </text>
         </React.Fragment>
       )) ||

src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js

@@ -27,7 +27,11 @@ export default props => {
           if (!i) return null;
 
           const fromItem = list[i - 1];
-          if (fromItem.namespace !== namespace && toItem.namespace !== namespace) {
+
+          if (
+            (fromItem.namespace !== namespace && toItem.namespace !== namespace) ||
+            fromItem.step === toItem.step
+          ) {
             return null;
           }
 
@@ -38,7 +42,7 @@ export default props => {
           });
 
           const edgeBaseProps = {
-            key: `cc-external-edge-${fromItem.name}-${toItem.name}`,
+            key: `cc-external-edge-${fromItem.name}-${toItem.name}-${edgePoints[0].y}`,
             sourcePosition: edgePoints[0],
             targetPosition: edgePoints[1],
             onClick: () => onFlowEdgeClick(fromItem, toItem, ccNamespacesKeys),

src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js

@@ -40,7 +40,7 @@ const Tree = props => {
           ).x;
 
         return (
-          <React.Fragment key={`code-crumb-${node.data.path}-${key}`}>
+          <React.Fragment key={`code-crumb-${key}-${nX}-${nY}`}>
             {!codeCrumbsMinimize &&
               node.children.map((crumb, i) => {
                 const [_, cY] = [crumb.y, crumb.x];
@@ -55,7 +55,9 @@ const Tree = props => {
                 const ccParams = crumbData.params;
 
                 return (
-                  <React.Fragment key={`code-crumb-edge-${file.path}-${crumbData.name}`}>
+                  <React.Fragment
+                    key={`code-crumb-edge-${crumbData.name}-${crumbPosition.x}-${crumbPosition.y}`}
+                  >
                     {!i && (
                       <PartEdge
                         sourcePosition={position}
@@ -84,6 +86,7 @@ const Tree = props => {
                         currentSelectedCrumbedFlowKey !== NO_TRAIL_FLOW
                       }
                       flowStep={ccParams.flowStep}
+                      original={ccParams.original}
                       onClick={e => onCodeCrumbSelect(e, { fileNode: file, codeCrumb: crumbData })}
                     />
                   </React.Fragment>

src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js

@@ -80,7 +80,7 @@ const DependenciesTree = props => {
 
                 const edge = (
                   <DependenciesEdge
-                    key={`dep-edge-${importedNodePath}`}
+                    key={`dep-edge-${importedNodePath}-${sourcePosition.x}-${targetPosition.x}`}
                     anyEdgeSelected={!!selectedDependencyEdgeNodes}
                     selected={selected}
                     groupName={groupName}
@@ -106,7 +106,7 @@ const DependenciesTree = props => {
 
                   const arrow = (
                     <DependenciesArrow
-                      key={`dep-arrow-${importedNodePath}`}
+                      key={`dep-arrow-${importedNodePath}-${groupName}`}
                       selected={arrowSelected}
                       groupName={groupName}
                       targetPosition={targetPosition}

src/public/js/components/treeDiagram/component/Tree/Source/Tree.js

@@ -60,7 +60,7 @@ const SourceTree = props => {
 
         const edge = (
           <SourceEdge
-            key={`source-edge-${path}`}
+            key={`source-edge-${path}-${sourcePosition.x}-${sourcePosition.y}`}
             targetPosition={position}
             sourcePosition={sourcePosition}
             disabled={sourceDimFolders}
@@ -77,7 +77,13 @@ const SourceTree = props => {
         (type === FILE_NODE_TYPE &&
           !(dependenciesDiagramOn && selectedNode.dependencies && selectedNode.dependencies[path]))
       ) {
-        sourceDotes.push(<Dot key={`dot-${path}`} position={position} selected={selected} />);
+        sourceDotes.push(
+          <Dot
+            key={`dot-${path}-${position.x}-${position.y}`}
+            position={position}
+            selected={selected}
+          />
+        );
       }
 
       let nodeBasedOnType = null;

src/public/js/components/treeDiagram/component/TreeDiagram.js

@@ -50,7 +50,7 @@ class TreeDiagram extends React.Component {
     });
 
     return (
-      <div className={'TreeDiagram'}>
+      <div className={classNames('TreeDiagram', { border: multiple })}>
         {multiple ? (
           <p
             className={classNames('namespaceTitle', {

src/public/js/components/treeDiagram/component/TreeDiagram.less

@@ -5,7 +5,10 @@
   margin: 0;
   padding: 0;
   overflow-y: hidden;
-  border-bottom: 1px solid #ebedf0;
+
+  &.border {
+    border-bottom: 1px solid #ebedf0;
+  }
 
   .namespaceTitle {
     position: absolute;

src/public/js/core/controlsBus/actions.js

@@ -24,3 +24,8 @@ export const setZoom = payload => ({
   type: ACTIONS.SET_ZOOM,
   payload
 });
+
+export const setFullState = payload => ({
+  type: ACTIONS.SET_FULL_STATE,
+  payload
+});

src/public/js/core/dataBus/actions.js

@@ -339,3 +339,13 @@ export const setPredefinedState = predefinedState => dispatch => {
     }, 100 * i);
   });
 };
+
+export const setFullState = payload => ({
+  type: ACTIONS.SET_FULL_STATE,
+  payload
+});
+
+export const setNamespaceState = payload => ({
+  type: ACTIONS.SET_NAMESPACE_STATE,
+  payload
+});

src/public/js/core/dataBus/constants.js

@@ -1,5 +1,7 @@
 export const ACTIONS = {
   SET_INITIAL_SOURCE_DATA: 'DATA_BUS.SET_INITIAL_SOURCE_DATA',
+  SET_FULL_STATE: 'DATA_BUS.SET_FULL_STATE',
+  SET_NAMESPACE_STATE: 'DATA_BUS.SET_NAMESPACE_STATE',
   RESET_ALL: 'DATA_BUS.RESET_ALL',
   SET_CHANGED_SOURCE_DATA: 'DATA_BUS.SET_CHANGED_SOURCE_DATA',
   UPDATE_FILES_TREE_LAYOUT_NODES: 'DATA_BUS.UPDATE_FILES_TREE_LAYOUT_NODES',

src/public/js/core/dataBus/reducer.js

@@ -195,6 +195,17 @@ export default (state = DefaultState, action) => {
         }
       });
 
+    case ACTIONS.SET_FULL_STATE:
+      return {
+        ...state,
+        ...action.payload
+      };
+
+    case ACTIONS.SET_NAMESPACE_STATE:
+      return mergeState({
+        ...action.payload
+      });
+
     case ACTIONS.RESET_ALL:
       return DefaultState;
 

src/public/js/core/dataBus/utils/geometry.js

@@ -1,6 +1,6 @@
 import { CC_NODE_TYPE } from '../../constants';
 
-export const calculateLayoutProps = (list, padding = 100) => {
+export const calculateLayoutProps = (list, padding = 120) => {
   if (!list) {
     return {
       width: 0,
@@ -35,24 +35,28 @@ export const calculateLayoutProps = (list, padding = 100) => {
       minX = x;
     }
 
-    if (y - ySize / 2 < minY) {
-      minY = y - ySize / 2;
+    if (y < minY) {
+      minY = y;
     }
 
     if (x + xSize > maxX) {
       maxX = x + xSize;
     }
 
-    if (y + ySize / 2 > maxY) {
-      maxY = y + ySize / 2;
+    if (y + ySize > maxY) {
+      maxY = y + ySize;
     }
   });
 
+  const yShift = Math.abs(Math.round(minY)) + 20;
+  const height = Math.round(Math.abs(maxY) + Math.abs(yShift)) + 5;
+  const width = Math.round(Math.abs(maxX + maxCcWidth) + Math.abs(minX) + 2 * padding);
+
   return {
-    width: Math.round(Math.abs(maxX + maxCcWidth) + Math.abs(minX) + 2 * padding),
-    height: Math.round(Math.abs(maxY) + Math.abs(minY) + 2 * padding),
     xShift: padding / 4,
-    yShift: Math.abs(Math.round(minY)) > 2 * padding ? Math.abs(Math.round(minY)) : 2 * padding,
+    width,
+    height,
+    yShift,
     ccAlightPoint
   };
 };

src/public/js/core/dataBus/utils/treeLayout.js

@@ -69,6 +69,8 @@ export const getTreeLayout = (
         }, 0);
       }
 
+      // TODO: calc properly, not 5000
+      // impossible to do in one loop
       const LARGE_WIDTH_CC = 5000;
       const widthSpace =
         node.data.type !== DIR_NODE_TYPE && node.data.type !== FILE_NODE_TYPE

src/public/js/core/namespaceIntegration/actions.js

@@ -4,3 +4,8 @@ export const setActiveNamespace = payload => ({
   type: ACTIONS.SET_ACTIVE_NAMESPACE,
   payload
 });
+
+export const setFullState = payload => ({
+  type: ACTIONS.SET_FULL_STATE,
+  payload
+});

src/public/js/core/namespaceIntegration/constants.js

@@ -1,4 +1,5 @@
 export const ACTIONS = {
   SET_ACTIVE_NAMESPACE: 'NAMESPACE_INTEGRATION.SET_ACTIVE_NAMESPACE',
+  SET_FULL_STATE: 'NAMESPACE_INTEGRATION.SET_FULL_STATE',
   RESET_ALL: 'NAMESPACE_INTEGRATION.RESET_ALL'
 };

src/public/js/core/namespaceIntegration/reducer.js

@@ -12,6 +12,12 @@ export default (state = DefaultState, action) => {
         activeNamespace: action.payload
       };
 
+    case ACTIONS.SET_FULL_STATE:
+      return {
+        ...state,
+        ...action.payload
+      };
+
     case ACTIONS.RESET_ALL:
       return DefaultState;
 

src/public/js/core/store/index.js

@@ -9,7 +9,7 @@ import dataBus from '../dataBus/reducer';
 import namespaceIntegration from '../namespaceIntegration/reducer';
 import rootSaga from './sagas';
 
-export default () => {
+export default ({ extraReducers } = {}) => {
   const sagaMiddleware = createSagaMiddleware();
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
@@ -24,7 +24,8 @@ export default () => {
     combineReducers({
       controlsBus,
       dataBus,
-      namespaceIntegration
+      namespaceIntegration,
+      ...extraReducers
     })
   );
 

src/public/js/index.js

@@ -6,13 +6,14 @@ import { PersistGate } from 'redux-persist/integration/react';
 import App from './App';
 import getStore from './core/store';
 
+const extraLayout = {};
 export default (options, mountNodeId) => {
   const { store, persistor } = getStore();
 
   ReactDOM.render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <App {...options} />
+        <App extraLayout={extraLayout} {...options} />
       </PersistGate>
     </Provider>,
     document.getElementById(mountNodeId)

src/server/code-parse/index.js

@@ -4,12 +4,21 @@ const { getLanguageParsers } = require('./language');
 const parseFile = (
   itemPath,
   projectDir,
-  { parseCodeCrumbs, parseImports, parseDependencies, attachCode, language, webpackConfigPath, tsConfigPath } = {}
+  {
+    parseCodeCrumbs,
+    parseImports,
+    parseDependencies,
+    attachCode,
+    language,
+    webpackConfigPath,
+    tsConfigPath
+  } = {}
 ) => {
   const { codecrumbsParser, dependenciesParser } = getLanguageParsers(language);
-  
+
   return Promise.all([
-    parseDependencies && dependenciesParser.getDependencies(itemPath, projectDir, {webpackConfigPath, tsConfigPath}),
+    parseDependencies &&
+      dependenciesParser.getDependencies(itemPath, projectDir, { webpackConfigPath, tsConfigPath }),
     file.read(itemPath, 'utf8')
   ]).then(([dependencies, code]) => {
     const item = {
@@ -37,7 +46,7 @@ const parseFile = (
         item.flows = undefined;
       }
     }
-    
+
     if (parseImports) {
       const importedDependencies = dependenciesParser.getImports(code, itemPath);
       if (importedDependencies.length) {

src/server/code-parse/language/cpp/codecrumbs.js

@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const CPP_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(CPP_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
 // replace with own implementation if needed
 module.exports = {

src/server/code-parse/language/csharp/codecrumbs.js

@@ -1,8 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const CSHARP_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(CSHARP_COMMENT_REGEX));
-
+const { getCrumbs } = require('../default/codecrumbs');
 // replace with own implementation if needed
 module.exports = {
   getCrumbs

src/server/code-parse/language/golang/codecrumbs.js

@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const GOLANG_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(GOLANG_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
 // replace with own implementation if needed
 module.exports = {

src/server/code-parse/language/java/codecrumbs.js

@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const JAVA_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(JAVA_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
 // replace with own implementation if needed
 module.exports = {

src/server/code-parse/language/javascript/codecrumbs.js

@@ -23,11 +23,9 @@ const getCrumbs = (fileCode, path) => {
   }
 };*/
 
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const JAVA_SCRIPT_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(JAVA_SCRIPT_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
+// replace with own implementation if needed
 module.exports = {
   getCrumbs
 };

src/server/code-parse/language/kotlin/codecrumbs.js

@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const KOTLIN_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(KOTLIN_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
 // replace with own implementation if needed
 module.exports = {

src/server/code-parse/language/php/codecrumbs.js

@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const PHP_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(PHP_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
 // replace with own implementation if needed
 module.exports = {

src/server/code-parse/language/typescript/codecrumbs.js

@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const TYPE_SCRIPT_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(TYPE_SCRIPT_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');
 
 // replace with own implementation if needed
 module.exports = {