fix: fix loop by using the forcelayour
Signed-off-by: Vincenzo Palazzo <vincenzopalazzodev@gmail.com>
This commit is contained in:
parent
6464a95367
commit
92912a74a5
GPG Key ID:
8B6DC2B870B80D5F
|
|
@ -31,8 +31,8 @@
|
|||
"dependencies": {
|
||||
"dracula-ui": "^1.0.6",
|
||||
"ngraph.forcelayout": "^3.3.1",
|
||||
"ngraph.generators": "^20.1.0",
|
||||
"ngraph.graph": "^20.0.1",
|
||||
"ngraph.pixel": "^2.4.1",
|
||||
"ngraph.pixi": "^0.0.5"
|
||||
"ngraph.pixel": "^2.4.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
133
pnpm-lock.yaml
133
pnpm-lock.yaml
|
|
@ -7,15 +7,15 @@ dependencies:
|
|||
ngraph.forcelayout:
|
||||
specifier: ^3.3.1
|
||||
version: 3.3.1
|
||||
ngraph.generators:
|
||||
specifier: ^20.1.0
|
||||
version: 20.1.0
|
||||
ngraph.graph:
|
||||
specifier: ^20.0.1
|
||||
version: 20.0.1
|
||||
ngraph.pixel:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1
|
||||
ngraph.pixi:
|
||||
specifier: ^0.0.5
|
||||
version: 0.0.5
|
||||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto':
|
||||
|
|
@ -626,10 +626,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/bit-twiddle@1.0.2:
|
||||
resolution: {integrity: sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==}
|
||||
dev: false
|
||||
|
||||
/brace-expansion@1.1.11:
|
||||
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
|
||||
dependencies:
|
||||
|
|
@ -772,10 +768,6 @@ packages:
|
|||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/earcut@2.2.4:
|
||||
resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
|
||||
dev: false
|
||||
|
||||
/element-class@0.2.2:
|
||||
resolution: {integrity: sha512-e4tkRAFtQkGiZB8fzxAFdjEbx5zajMb1GpiRwKs3lhOLxQcvdOIG7XlERT1sTX3/ulIUGZrgL02YZ0cRNC5OLQ==}
|
||||
dev: false
|
||||
|
|
@ -966,10 +958,6 @@ packages:
|
|||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/eventemitter3@2.0.3:
|
||||
resolution: {integrity: sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==}
|
||||
dev: false
|
||||
|
||||
/fast-deep-equal@3.1.3:
|
||||
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
|
||||
dev: true
|
||||
|
|
@ -1180,10 +1168,6 @@ packages:
|
|||
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
|
||||
dev: true
|
||||
|
||||
/ismobilejs@0.5.2:
|
||||
resolution: {integrity: sha512-ta9UdV60xVZk/ZafFtSFslQaE76SvNkcs1r73d2PVR21zVzx9xuYv9tNe4MxA1NN7WoeCc2RjGot3Bz1eHDx3Q==}
|
||||
dev: false
|
||||
|
||||
/js-sdsl@4.4.0:
|
||||
resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==}
|
||||
dev: true
|
||||
|
|
@ -1300,10 +1284,6 @@ packages:
|
|||
engines: {node: '>=4'}
|
||||
dev: true
|
||||
|
||||
/mini-signals@1.2.0:
|
||||
resolution: {integrity: sha512-alffqMkGCjjTSwvYMVLx+7QeJ6sTuxbXqBkP21my4iWU5+QpTQAJt3h7htA1OKm9F3BpMM0vnu72QIoiJakrLA==}
|
||||
dev: false
|
||||
|
||||
/minimatch@3.1.2:
|
||||
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
|
||||
dependencies:
|
||||
|
|
@ -1314,6 +1294,12 @@ packages:
|
|||
resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
|
||||
dev: true
|
||||
|
||||
/miserables@2.0.0:
|
||||
resolution: {integrity: sha512-J+4obMHbesciklE0SoVy4EJFsgeBW2RsRzrhBWGFhpBDcxCSJ3igSzDVz8SUaPx5PQaduImkt5UWus2Yx0a5/A==}
|
||||
dependencies:
|
||||
ngraph.graph: 19.1.0
|
||||
dev: false
|
||||
|
||||
/mkdirp@0.5.6:
|
||||
resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
|
||||
hasBin: true
|
||||
|
|
@ -1379,13 +1365,6 @@ packages:
|
|||
ngraph.physics.simulator: 0.0.12
|
||||
dev: false
|
||||
|
||||
/ngraph.forcelayout@0.1.2:
|
||||
resolution: {integrity: sha512-N6W/KPtxnpprpm1tg0V2ubahD9Q0nJvlAKh6QkUuZvOBK6OsLAlfhUwn+3iDt3ZhgCuhyebRWZYt80Yrlqkzjw==}
|
||||
dependencies:
|
||||
ngraph.events: 0.0.3
|
||||
ngraph.physics.simulator: 0.1.1
|
||||
dev: false
|
||||
|
||||
/ngraph.forcelayout@3.3.1:
|
||||
resolution: {integrity: sha512-MKBuEh1wujyQHFTW57y5vd/uuEOK0XfXYxm3lC7kktjJLRdt/KEKEknyOlc6tjXflqBKEuYBBcu7Ax5VY+S6aw==}
|
||||
dependencies:
|
||||
|
|
@ -1394,6 +1373,20 @@ packages:
|
|||
ngraph.random: 1.1.0
|
||||
dev: false
|
||||
|
||||
/ngraph.generators@20.1.0:
|
||||
resolution: {integrity: sha512-z/+R7HkNTFVgf5+o6KANgoKyr4FI9uiY+vSLYIzcLaTpz1scsCQuVbp+WsTf1MnJfeizlRjREhbgD4oeBZPqNA==}
|
||||
dependencies:
|
||||
miserables: 2.0.0
|
||||
ngraph.graph: 20.0.1
|
||||
ngraph.random: 1.1.0
|
||||
dev: false
|
||||
|
||||
/ngraph.graph@19.1.0:
|
||||
resolution: {integrity: sha512-9cws84qfPkrYa7BaBtT+KgZfLXrd6pNL9Gl5Do+MBO/0Hm6rOM7qK78MZaO1uEoIK6p2pgUs6lu29zn/6tP59w==}
|
||||
dependencies:
|
||||
ngraph.events: 1.2.2
|
||||
dev: false
|
||||
|
||||
/ngraph.graph@20.0.1:
|
||||
resolution: {integrity: sha512-VFsQ+EMkT+7lcJO1QP8Ik3w64WbHJl27Q53EO9hiFU9CRyxJ8HfcXtfWz/U8okuoYKDctbciL6pX3vG5dt1rYA==}
|
||||
dependencies:
|
||||
|
|
@ -1412,16 +1405,6 @@ packages:
|
|||
resolution: {integrity: sha512-7jPm14fYcuJ9kytOVNOKxFy6r/Uu9Dnj++uT3iR9XkBcsBahn2xcYJkV6vF1bIb1fQ5XrDCRjRIOcMwEum6jwQ==}
|
||||
dev: false
|
||||
|
||||
/ngraph.physics.simulator@0.0.11:
|
||||
resolution: {integrity: sha512-h+WjVDAdqiQ05Y159Zer8hznhN8zs9sJiMXlME8cGsFsSG63VAdbuNvpxNpcwa38Kw2CsLzNqt04AEisc722hQ==}
|
||||
dependencies:
|
||||
ngraph.expose: 0.0.0
|
||||
ngraph.merge: 0.0.1
|
||||
ngraph.physics.primitives: 0.0.7
|
||||
ngraph.quadtreebh: 0.0.3
|
||||
ngraph.random: 0.0.1
|
||||
dev: false
|
||||
|
||||
/ngraph.physics.simulator@0.0.12:
|
||||
resolution: {integrity: sha512-c5THBS9fbzfUsFP39lKrWAt4UdNUqdKtahRE+SmB1uuv2B9aglyd0yAOtNTumrzGIG7vNy8isAw0Qd4Qztg7BQ==}
|
||||
dependencies:
|
||||
|
|
@ -1433,17 +1416,6 @@ packages:
|
|||
ngraph.random: 0.0.1
|
||||
dev: false
|
||||
|
||||
/ngraph.physics.simulator@0.1.1:
|
||||
resolution: {integrity: sha512-2UQE4ZK9MUvwiwrfSY8yQwpwtR44Fx6mbiNerKk/4Hrbu7I9b1EB0yFnUlYTTIj8IMpwOoXeSVR6c4VrBAUkfQ==}
|
||||
dependencies:
|
||||
ngraph.events: 0.0.3
|
||||
ngraph.expose: 0.0.0
|
||||
ngraph.merge: 0.0.1
|
||||
ngraph.physics.primitives: 0.0.7
|
||||
ngraph.quadtreebh: 0.0.4
|
||||
ngraph.random: 0.0.1
|
||||
dev: false
|
||||
|
||||
/ngraph.pixel@2.4.1:
|
||||
resolution: {integrity: sha512-H4hqyEVMhGZ6hGL30pXKZ+RpZw8NQaLa4hGGj3UutokUp3yfvTLrToOq+/W09jK/Sn6DzimYPuLAn+OuIfx4Zw==}
|
||||
dependencies:
|
||||
|
|
@ -1451,19 +1423,10 @@ packages:
|
|||
insert-css: 0.2.0
|
||||
ngraph.events: 0.0.3
|
||||
pixel.layout: 0.1.2
|
||||
three: 0.73.2
|
||||
three: 0.73.0
|
||||
three.fly: 0.1.6
|
||||
dev: false
|
||||
|
||||
/ngraph.pixi@0.0.5:
|
||||
resolution: {integrity: sha512-vNTHLYSkzWeO6K3Y0td0jZ317PRKuJnSvNp+e/VpLYsNEJv9Q5f16W+LwkwmbMzMWJ5sWPx01foxpgojJ9gGZA==}
|
||||
dependencies:
|
||||
ngraph.forcelayout: 0.1.2
|
||||
ngraph.merge: 0.0.1
|
||||
ngraph.physics.simulator: 0.0.11
|
||||
pixi.js: 4.8.9
|
||||
dev: false
|
||||
|
||||
/ngraph.quadtreebh3d@0.0.3:
|
||||
resolution: {integrity: sha512-DIRiviYWity+/yiZpRRs95V7gShtXnxDifQbdLffAi4PdNWnprFarcXuk+q/YbTakH4cWcOXZo7mQyUTO9odZg==}
|
||||
dependencies:
|
||||
|
|
@ -1476,12 +1439,6 @@ packages:
|
|||
ngraph.random: 0.0.1
|
||||
dev: false
|
||||
|
||||
/ngraph.quadtreebh@0.0.4:
|
||||
resolution: {integrity: sha512-xTIkWGXt5Ajnoq9VOr0xDOI9ZL+q4sPhD0Z7vxvn4MCa+l0wf43rg0C7qv0t+RIOgbQBAp0xDpn568hpXAckJA==}
|
||||
dependencies:
|
||||
ngraph.random: 0.0.1
|
||||
dev: false
|
||||
|
||||
/ngraph.random@0.0.1:
|
||||
resolution: {integrity: sha512-QPKU7ChXF/VrvMQxVo9aWcvXCXp98VfL4nKUteTW/olDqeUqQ61t7m+jvFb8Dj7kKvlKlnsbDA1aWLJGmm17XA==}
|
||||
dev: false
|
||||
|
|
@ -1495,11 +1452,6 @@ packages:
|
|||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/object-assign@4.1.1:
|
||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/once@1.4.0:
|
||||
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
|
||||
dependencies:
|
||||
|
|
@ -1539,11 +1491,6 @@ packages:
|
|||
callsites: 3.1.0
|
||||
dev: true
|
||||
|
||||
/parse-uri@1.0.7:
|
||||
resolution: {integrity: sha512-eWuZCMKNlVkXrEoANdXxbmqhu2SQO9jUMCSpdbJDObin0JxISn6e400EWsSRbr/czdKvWKkhZnMKEGUwf/Plmg==}
|
||||
engines: {node: '>= 0.10'}
|
||||
dev: false
|
||||
|
||||
/path-exists@4.0.0:
|
||||
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -1580,23 +1527,6 @@ packages:
|
|||
ngraph.forcelayout3d: 0.0.15
|
||||
dev: false
|
||||
|
||||
/pixi-gl-core@1.1.4:
|
||||
resolution: {integrity: sha512-dGLwg7664yASpT1insVUexNTMVEtvPZh/eDoXu8QUBoq2CY1Fc8axNwR+qbS1aJ8vj6y/TfWiOEaOSyNH41txw==}
|
||||
dev: false
|
||||
|
||||
/pixi.js@4.8.9:
|
||||
resolution: {integrity: sha512-YcepG5/bXLAVTSTXaMIU9NeSzwyPq/oMu2oQi6L6iE5giwng02ixVCKgc6/eMv3zl2Ho+teSOLC8R5Wp3jBvLA==}
|
||||
dependencies:
|
||||
bit-twiddle: 1.0.2
|
||||
earcut: 2.2.4
|
||||
eventemitter3: 2.0.3
|
||||
ismobilejs: 0.5.2
|
||||
object-assign: 4.1.1
|
||||
pixi-gl-core: 1.1.4
|
||||
remove-array-items: 1.1.1
|
||||
resource-loader: 2.2.4
|
||||
dev: false
|
||||
|
||||
/postcss-load-config@3.1.4(postcss@8.4.23):
|
||||
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
|
||||
engines: {node: '>= 10'}
|
||||
|
|
@ -1676,22 +1606,11 @@ packages:
|
|||
picomatch: 2.3.1
|
||||
dev: true
|
||||
|
||||
/remove-array-items@1.1.1:
|
||||
resolution: {integrity: sha512-MXW/jtHyl5F1PZI7NbpS8SOtympdLuF20aoWJT5lELR1p/HJDd5nqW8Eu9uLh/hCRY3FgvrIT5AwDCgBODklcA==}
|
||||
dev: false
|
||||
|
||||
/resolve-from@4.0.0:
|
||||
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
|
||||
engines: {node: '>=4'}
|
||||
dev: true
|
||||
|
||||
/resource-loader@2.2.4:
|
||||
resolution: {integrity: sha512-MrY0bEJN26us3h4bzJUSP0n4tFEb79lCpYBavtLjSezWCcXZMgxhSgvC9LxueuqpcxG+qPjhwFu5SQAcUNacdA==}
|
||||
dependencies:
|
||||
mini-signals: 1.2.0
|
||||
parse-uri: 1.0.7
|
||||
dev: false
|
||||
|
||||
/reusify@1.0.4:
|
||||
resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
|
||||
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
|
||||
|
|
@ -1939,8 +1858,8 @@ packages:
|
|||
ngraph.events: 0.0.3
|
||||
dev: false
|
||||
|
||||
/three@0.73.2:
|
||||
resolution: {integrity: sha512-TC2H54TAnLwLwuMz5mUNN60BuK5MvLI1OgF2X1PdxnVehgZ7p9sNbaHpJEj3hi2T8WadlIUE8d/96oe3XlpPAw==}
|
||||
/three@0.73.0:
|
||||
resolution: {integrity: sha512-D3P2p6rvUx5A61++zho1jqs8gPbx81UHGRMSjF8QPabFCHMHAaUWxK7k3xxdNMDtE1wqnlZMqwD1Kv1kOy+TyQ==}
|
||||
dev: false
|
||||
|
||||
/tiny-glob@0.2.9:
|
||||
|
|
|
|||
|
|
@ -1,22 +1,47 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
||||
import renderGraph from "ngraph.pixel";
|
||||
|
||||
import createLayout from "ngraph.forcelayout";
|
||||
import graphGenerators from "ngraph.generators";
|
||||
|
||||
export let graph;
|
||||
|
||||
function createNodeUI(node) {
|
||||
return {
|
||||
color: 0x1DE9B6,
|
||||
size: 10
|
||||
};
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
function createLinkUI(link) {
|
||||
return {
|
||||
fromColor: 0xBDBDBD,
|
||||
toColor: 0xBDBDBD
|
||||
};
|
||||
}
|
||||
|
||||
function getGraphFromQueryString(query) {
|
||||
var createGraph = graphGenerators[query.graph] || graphGenerators.grid;
|
||||
return createGraph(getNumber(query.n), getNumber(query.m), getNumber(query.k));
|
||||
}
|
||||
|
||||
function getNumber(string, defaultValue) {
|
||||
var number = parseFloat(string);
|
||||
return (typeof number === 'number') && !isNaN(number) ? number : (defaultValue || 10);
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
let div = document.getElementById("container-ngraph")
|
||||
let render = renderGraph(graph, {
|
||||
container: div,
|
||||
clearAlpha: 0.0,
|
||||
is3D: true,
|
||||
createLayout: createLayout,
|
||||
node: createNodeUI,
|
||||
link: createLinkUI,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
console.log(`${graph}`);
|
||||
</script>
|
||||
|
||||
<div id="container-ngraph"></div>
|
||||
|
|
@ -24,13 +49,16 @@
|
|||
<style>
|
||||
|
||||
#container-ngraph{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 80vh;
|
||||
width: 90vw;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -4,19 +4,14 @@
|
|||
import NGraph from "../components/NGraph.svelte";
|
||||
|
||||
|
||||
|
||||
export function buildGraph() {
|
||||
let graph = createGraph();
|
||||
graph.addLink(1, 2);
|
||||
|
||||
graph.addLink(4, 5);
|
||||
graph.addLink(1, 5);
|
||||
return graph;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="app">
|
||||
<NGraph graph={buildGraph()} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<NGraph graph={buildGraph()} />
|
||||
Loading…
Reference in New Issue