-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
400 additions
and
444 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
.dependency-cruiser.json | ||
{ | ||
"forbidden": [ | ||
{ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
|
||
<html> | ||
<head> | ||
<style> body { margin: 0; } </style> | ||
<script type="text/javascript" src="https://unpkg.com/three"></script> | ||
<script type="text/javascript" src="https://unpkg.com/three-spritetext"></script> | ||
<script type="text/javascript" src="https://unpkg.com/3d-force-graph"></script> | ||
</head> | ||
|
||
<body> | ||
<div id="3d-graph"></div> | ||
|
||
<script> | ||
const gData = { | ||
nodes: [{"id":"bin.js","displayname":"bin.js","dirname":".","label":"./<b>bin.js</b>","group":"unknown"},{"id":"fs/promises","displayname":"promises","dirname":"fs","label":"fs/<b>promises</b>","group":"unknown"},{"id":"path","displayname":"path","dirname":".","label":"./<b>path</b>","group":"unknown"},{"id":"process","displayname":"process","dirname":".","label":"./<b>process</b>","group":"unknown"},{"id":"lib/builder.js","displayname":"builder.js","dirname":"lib","label":"lib/<b>builder.js</b>","group":"unknown"},{"id":"lib/build-css/index.js","displayname":"index.js","dirname":"lib/build-css","label":"lib/build-css/<b>index.js</b>","group":"build-css"},{"id":"lib/build-js/index.js","displayname":"index.js","dirname":"lib/build-js","label":"lib/build-js/<b>index.js</b>","group":"build-js"},{"id":"lib/build-pages/index.js","displayname":"index.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/create-page-builder.js","displayname":"create-page-builder.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b>","group":"build-pages"},{"id":"lib/build-pages/resolve-vars.js","displayname":"resolve-vars.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>resolve-vars.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/fs-path-to-url.js","displayname":"fs-path-to-url.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>fs-path-to-url.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/html/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders/html","label":"lib/build-pages/page-builders/html/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/js/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders/js","label":"lib/build-pages/page-builders/js/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/md/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders/md","label":"lib/build-pages/page-builders/md/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/resolve-layout.js","displayname":"resolve-layout.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>resolve-layout.js</b>","group":"build-pages"},{"id":"lib/build-static/index.js","displayname":"index.js","dirname":"lib/build-static","label":"lib/build-static/<b>index.js</b>","group":"build-static"},{"id":"util","displayname":"util","dirname":".","label":"./<b>util</b>","group":"unknown"},{"id":"lib/identify-pages.js","displayname":"identify-pages.js","dirname":"lib","label":"lib/<b>identify-pages.js</b>","group":"unknown"},{"id":"lib/build-pages/page-builders/fs-path-to-url.test.js","displayname":"fs-path-to-url.test.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>fs-path-to-url.test.js</b>","group":"build-pages"},{"id":"lib/build-pages/resolve-vars.test.js","displayname":"resolve-vars.test.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>resolve-vars.test.js</b>","group":"build-pages"},{"id":"lib/identify-pages.test.js","displayname":"identify-pages.test.js","dirname":"lib","label":"lib/<b>identify-pages.test.js</b>","group":"unknown"},{"id":"test-project/public/a-page/client.js","displayname":"client.js","dirname":"test-project/public/a-page","label":"test-project/public/a-page/<b>client.js</b>","group":"public"},{"id":"test-project/public/chunk-OFR2H3GI.js","displayname":"chunk-OFR2H3GI.js","dirname":"test-project/public","label":"test-project/public/<b>chunk-OFR2H3GI.js</b>","group":"public"},{"id":"test-project/public/chunk-OWLKZ7N7.js","displayname":"chunk-OWLKZ7N7.js","dirname":"test-project/public","label":"test-project/public/<b>chunk-OWLKZ7N7.js</b>","group":"public"},{"id":"test-project/public/a-page/nested-page/client.js","displayname":"client.js","dirname":"test-project/public/a-page/nested-page","label":"test-project/public/a-page/nested-page/<b>client.js</b>","group":"public"},{"id":"test-project/public/client.js","displayname":"client.js","dirname":"test-project/public","label":"test-project/public/<b>client.js</b>","group":"public"},{"id":"test-project/public/html-page/client.js","displayname":"client.js","dirname":"test-project/public/html-page","label":"test-project/public/html-page/<b>client.js</b>","group":"public"},{"id":"test-project/public/md-page/client.js","displayname":"client.js","dirname":"test-project/public/md-page","label":"test-project/public/md-page/<b>client.js</b>","group":"public"},{"id":"test-project/src/a-page/client.js","displayname":"client.js","dirname":"test-project/src/a-page","label":"test-project/src/a-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/a-page/libs/a-lib.js","displayname":"a-lib.js","dirname":"test-project/src/a-page/libs","label":"test-project/src/a-page/libs/<b>a-lib.js</b>","group":"src"},{"id":"test-project/src/a-page/nested-page/client.js","displayname":"client.js","dirname":"test-project/src/a-page/nested-page","label":"test-project/src/a-page/nested-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/a-page/nested-page/page.js","displayname":"page.js","dirname":"test-project/src/a-page/nested-page","label":"test-project/src/a-page/nested-page/<b>page.js</b>","group":"src"},{"id":"test-project/src/nav.js","displayname":"nav.js","dirname":"test-project/src","label":"test-project/src/<b>nav.js</b>","group":"src"},{"id":"test-project/src/a-page/page.js","displayname":"page.js","dirname":"test-project/src/a-page","label":"test-project/src/a-page/<b>page.js</b>","group":"src"},{"id":"test-project/src/client.js","displayname":"client.js","dirname":"test-project/src","label":"test-project/src/<b>client.js</b>","group":"src"},{"id":"test-project/src/conflict-page/page.js","displayname":"page.js","dirname":"test-project/src/conflict-page","label":"test-project/src/conflict-page/<b>page.js</b>","group":"src"},{"id":"test-project/src/global.vars.js","displayname":"global.vars.js","dirname":"test-project/src","label":"test-project/src/<b>global.vars.js</b>","group":"src"},{"id":"test-project/src/html-page/client.js","displayname":"client.js","dirname":"test-project/src/html-page","label":"test-project/src/html-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/html-page/page.vars.js","displayname":"page.vars.js","dirname":"test-project/src/html-page","label":"test-project/src/html-page/<b>page.vars.js</b>","group":"src"},{"id":"test-project/src/md-page/client.js","displayname":"client.js","dirname":"test-project/src/md-page","label":"test-project/src/md-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/page.js","displayname":"page.js","dirname":"test-project/src","label":"test-project/src/<b>page.js</b>","group":"src"},{"id":"test-project/src/root.layout.js","displayname":"root.layout.js","dirname":"test-project/src","label":"test-project/src/<b>root.layout.js</b>","group":"src"}], | ||
links: [{"source":"bin.js","target":"lib/builder.js","label":"./<b>bin.js</b> β</br>lib/<b>builder.js</b>"},{"source":"bin.js","target":"fs/promises","label":"./<b>bin.js</b> β</br>fs/<b>promises</b>"},{"source":"bin.js","target":"path","label":"./<b>bin.js</b> β</br>./<b>path</b>"},{"source":"bin.js","target":"process","label":"./<b>bin.js</b> β</br>./<b>process</b>"},{"source":"lib/builder.js","target":"lib/build-css/index.js","label":"lib/<b>builder.js</b> β</br>lib/build-css/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/build-js/index.js","label":"lib/<b>builder.js</b> β</br>lib/build-js/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/build-pages/index.js","label":"lib/<b>builder.js</b> β</br>lib/build-pages/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/build-static/index.js","label":"lib/<b>builder.js</b> β</br>lib/build-static/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/identify-pages.js","label":"lib/<b>builder.js</b> β</br>lib/<b>identify-pages.js</b>"},{"source":"lib/builder.js","target":"fs/promises","label":"lib/<b>builder.js</b> β</br>fs/<b>promises</b>"},{"source":"lib/builder.js","target":"path","label":"lib/<b>builder.js</b> β</br>./<b>path</b>"},{"source":"lib/build-css/index.js","target":"fs/promises","label":"lib/build-css/<b>index.js</b> β</br>fs/<b>promises</b>"},{"source":"lib/build-css/index.js","target":"path","label":"lib/build-css/<b>index.js</b> β</br>./<b>path</b>"},{"source":"lib/build-js/index.js","target":"path","label":"lib/build-js/<b>index.js</b> β</br>./<b>path</b>"},{"source":"lib/build-pages/index.js","target":"lib/build-pages/page-builders/index.js","label":"lib/build-pages/<b>index.js</b> β</br>lib/build-pages/page-builders/<b>index.js</b>"},{"source":"lib/build-pages/index.js","target":"lib/build-pages/resolve-layout.js","label":"lib/build-pages/<b>index.js</b> β</br>lib/build-pages/<b>resolve-layout.js</b>"},{"source":"lib/build-pages/index.js","target":"lib/build-pages/resolve-vars.js","label":"lib/build-pages/<b>index.js</b> β</br>lib/build-pages/<b>resolve-vars.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/create-page-builder.js","label":"lib/build-pages/page-builders/<b>index.js</b> β</br>lib/build-pages/page-builders/<b>create-page-builder.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/html/index.js","label":"lib/build-pages/page-builders/<b>index.js</b> β</br>lib/build-pages/page-builders/html/<b>index.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/js/index.js","label":"lib/build-pages/page-builders/<b>index.js</b> β</br>lib/build-pages/page-builders/js/<b>index.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/md/index.js","label":"lib/build-pages/page-builders/<b>index.js</b> β</br>lib/build-pages/page-builders/md/<b>index.js</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"lib/build-pages/resolve-vars.js","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> β</br>lib/build-pages/<b>resolve-vars.js</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"lib/build-pages/page-builders/fs-path-to-url.js","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> β</br>lib/build-pages/page-builders/<b>fs-path-to-url.js</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"fs/promises","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> β</br>fs/<b>promises</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"path","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> β</br>./<b>path</b>"},{"source":"lib/build-pages/page-builders/fs-path-to-url.js","target":"path","label":"lib/build-pages/page-builders/<b>fs-path-to-url.js</b> β</br>./<b>path</b>"},{"source":"lib/build-pages/page-builders/html/index.js","target":"fs/promises","label":"lib/build-pages/page-builders/html/<b>index.js</b> β</br>fs/<b>promises</b>"},{"source":"lib/build-pages/page-builders/md/index.js","target":"fs/promises","label":"lib/build-pages/page-builders/md/<b>index.js</b> β</br>fs/<b>promises</b>"},{"source":"lib/build-static/index.js","target":"util","label":"lib/build-static/<b>index.js</b> β</br>./<b>util</b>"},{"source":"lib/build-pages/page-builders/fs-path-to-url.test.js","target":"lib/build-pages/page-builders/fs-path-to-url.js","label":"lib/build-pages/page-builders/<b>fs-path-to-url.test.js</b> β</br>lib/build-pages/page-builders/<b>fs-path-to-url.js</b>"},{"source":"lib/build-pages/page-builders/fs-path-to-url.test.js","target":"process","label":"lib/build-pages/page-builders/<b>fs-path-to-url.test.js</b> β</br>./<b>process</b>"},{"source":"lib/build-pages/resolve-vars.test.js","target":"lib/build-pages/resolve-vars.js","label":"lib/build-pages/<b>resolve-vars.test.js</b> β</br>lib/build-pages/<b>resolve-vars.js</b>"},{"source":"lib/build-pages/resolve-vars.test.js","target":"path","label":"lib/build-pages/<b>resolve-vars.test.js</b> β</br>./<b>path</b>"},{"source":"lib/identify-pages.test.js","target":"lib/build-pages/index.js","label":"lib/<b>identify-pages.test.js</b> β</br>lib/build-pages/<b>index.js</b>"},{"source":"lib/identify-pages.test.js","target":"lib/identify-pages.js","label":"lib/<b>identify-pages.test.js</b> β</br>lib/<b>identify-pages.js</b>"},{"source":"lib/identify-pages.test.js","target":"path","label":"lib/<b>identify-pages.test.js</b> β</br>./<b>path</b>"},{"source":"test-project/public/a-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/a-page/<b>client.js</b> β</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/a-page/client.js","target":"test-project/public/chunk-OWLKZ7N7.js","label":"test-project/public/a-page/<b>client.js</b> β</br>test-project/public/<b>chunk-OWLKZ7N7.js</b>"},{"source":"test-project/public/chunk-OWLKZ7N7.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/<b>chunk-OWLKZ7N7.js</b> β</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/a-page/nested-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/a-page/nested-page/<b>client.js</b> β</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/a-page/nested-page/client.js","target":"test-project/public/chunk-OWLKZ7N7.js","label":"test-project/public/a-page/nested-page/<b>client.js</b> β</br>test-project/public/<b>chunk-OWLKZ7N7.js</b>"},{"source":"test-project/public/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/<b>client.js</b> β</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/html-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/html-page/<b>client.js</b> β</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/md-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/md-page/<b>client.js</b> β</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/src/a-page/client.js","target":"test-project/src/a-page/libs/a-lib.js","label":"test-project/src/a-page/<b>client.js</b> β</br>test-project/src/a-page/libs/<b>a-lib.js</b>"},{"source":"test-project/src/a-page/nested-page/client.js","target":"test-project/src/a-page/libs/a-lib.js","label":"test-project/src/a-page/nested-page/<b>client.js</b> β</br>test-project/src/a-page/libs/<b>a-lib.js</b>"},{"source":"test-project/src/a-page/nested-page/page.js","target":"test-project/src/nav.js","label":"test-project/src/a-page/nested-page/<b>page.js</b> β</br>test-project/src/<b>nav.js</b>"},{"source":"test-project/src/a-page/page.js","target":"test-project/src/nav.js","label":"test-project/src/a-page/<b>page.js</b> β</br>test-project/src/<b>nav.js</b>"},{"source":"test-project/src/a-page/page.js","target":"test-project/src/a-page/libs/a-lib.js","label":"test-project/src/a-page/<b>page.js</b> β</br>test-project/src/a-page/libs/<b>a-lib.js</b>"},{"source":"test-project/src/page.js","target":"test-project/src/nav.js","label":"test-project/src/<b>page.js</b> β</br>test-project/src/<b>nav.js</b>"}] | ||
}; | ||
|
||
const elem = document.getElementById('3d-graph') | ||
const Graph = ForceGraph3D() | ||
(elem) | ||
.graphData(gData) | ||
.nodeAutoColorBy('group') | ||
.nodeLabel(node => node.label) | ||
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null) | ||
.onNodeClick(node => { | ||
// Aim at node from outside it | ||
const distance = 40; | ||
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z); | ||
|
||
Graph.cameraPosition( | ||
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position | ||
node, // lookAt ({ x, y, z }) | ||
3000 // ms transition duration | ||
) | ||
}) | ||
/* nice idea, but the 3D graph tends to look cluttered. Also GPU/ CPU | ||
intensive when run on a serious code base (e.g. react that has | ||
~4500 nodes and ~10000 links | ||
*/ | ||
.nodeThreeObject(node => { | ||
const sprite = new SpriteText(node.displayname); | ||
sprite.material.depthWrite = true; // make sprite background transparent | ||
sprite.color = node.color; | ||
sprite.textHeight = 6; | ||
return sprite; | ||
}) | ||
.linkOpacity(0.2) | ||
.linkWidth(2) | ||
.linkDirectionalArrowLength(4) | ||
.linkDirectionalParticles(7) // cool but a bit GPU intensive | ||
.linkLabel(link => link.label) | ||
.onLinkHover(link => elem.style.cursor = link ? 'pointer' : null) | ||
|
||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.