flow like the river

2025-11-07 00:06:12 +01:00 · 2025-11-07 00:06:12 +01:00 · 013fe673f3
commit 013fe673f3
42435 changed files with 5764238 additions and 0 deletions
--- a/BACK_BACK/node_modules/force-graph/example/dag-yarn/index.html
+++ b/BACK_BACK/node_modules/force-graph/example/dag-yarn/index.html
@ -0,0 +1,96 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
+  <script src="//unpkg.com/dat.gui"></script>
+  <script src="//unpkg.com/d3-quadtree"></script>
+  <script src="//unpkg.com/d3-force"></script>
+
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="graph"></div>
+
+  <script>
+    // controls
+    const controls = { 'DAG Orientation': 'lr'};
+    const gui = new dat.GUI();
+    gui.add(controls, 'DAG Orientation', ['lr', 'td', 'radialout', null])
+      .onChange(orientation => graph && graph.dagMode(orientation));
+
+    // graph config
+    const graph = ForceGraph()
+      .backgroundColor('#101020')
+      .linkColor(() => 'rgba(255,255,255,0.2)')
+      .dagMode('lr')
+      .dagLevelDistance(300)
+      .nodeId('package')
+      .linkCurvature(d =>
+        0.07 * // max curvature
+        // curve outwards from source, using gradual straightening within a margin of a few px
+        (['td', 'bu'].includes(graph.dagMode())
+          ? Math.max(-1, Math.min(1, (d.source.x - d.target.x) / 25)) :
+          ['lr', 'rl'].includes(graph.dagMode())
+            ? Math.max(-1, Math.min(1, (d.target.y - d.source.y) / 25))
+            : ['radialout', 'radialin'].includes(graph.dagMode()) ? 0 : 1
+        )
+      )
+      .linkDirectionalParticles(2)
+      .linkDirectionalParticleWidth(3)
+      .nodeCanvasObject((node, ctx) => {
+        const label = node.package;
+        const fontSize = 15;
+        ctx.font = `${fontSize}px Sans-Serif`;
+        const textWidth = ctx.measureText(label).width;
+        const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+        ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = 'lightsteelblue';
+        ctx.fillText(label, node.x, node.y);
+
+        node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
+      })
+      .nodePointerAreaPaint((node, color, ctx) => {
+        ctx.fillStyle = color;
+        const bckgDimensions = node.__bckgDimensions;
+        bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+      })
+      .d3Force('collide', d3.forceCollide(13))
+      .d3AlphaDecay(0.02)
+      .d3VelocityDecay(0.3);
+
+    fetch('//unpkg.com/d3@5.9.7/yarn.lock')
+      .then(r => r.text())
+      .then(text => {
+        const yarnlock = _yarnpkg_lockfile.parse(text);
+        if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
+        return yarnlock.object;
+      })
+      .then(yarnlock => {
+        const nodes = [];
+        const links = [];
+
+        Object.entries(yarnlock).forEach(([package, details]) => {
+          nodes.push({
+            package,
+            version: details.version
+          });
+
+          if (details.dependencies) {
+            Object.entries(details.dependencies).forEach(([dep, version]) => {
+              links.push({source: package, target: `${dep}@${version}`});
+            });
+          }
+        });
+
+        graph(document.getElementById('graph'))
+          .graphData({ nodes, links });
+      });
+  </script>
+</body>