javascript-physics v1.0.0

javascript-graph

Работа с графами

Установка

$ npm install javascript-graph

Настройка браузера

Надо настроить в вашем сервере резолв с /javascript-graph в node_modules/javascript-graph. Аналогично с пакетом javascript-algebra.

  <script type="importmap">
  {
    "imports": {
      "javascript-std-lib": "/javascript-std-lib/index.js",
      "javascript-std-lib/": "/javascript-std-lib/library/",

      "javascript-algebra": "/javascript-algebra/index.js",
      "javascript-algebra/": "/javascript-algebra/library/",

      "javascript-graph": "/javascript-graph/index.js",
      "javascript-graph/": "/javascript-graph/library/"
    }
  }
  </script>

Использование

Создание графа

import Graph from 'javascript-graph/Graph.js';

const graph = new Graph();

// Вершины const node1 = graph.newNode({label: '1'}); const node2 = graph.newNode({label: '2'});

// Рёбра graph.newEdge(node1, node2);

// Добавление "набора" graph.addNodes('mark', 'higgs', 'other', 'etc'); graph.addEdges( 'mark', 'higgs', 'mark', 'etc', 'mark', 'other' );

// Добавление из объекта const graphOBJ = { nodes: "mark2", "higgs2", "other2", "etc2", edges: [ "mark", "higgs2", "mark2", "etc", "mark2", "other2", "etc2", "0" ] }; graph.loadOBJ(graphOBJ); ...

> Вывод в консоли
```javascript
graph.toString()

Рисование графа

import ForceDirected from 'javascript-graph/layout/ForceDirected.js';
import Renderer      from 'javascript-graph/Renderer.js';

const layout = new ForceDirected(graph, 400.0, 200.0, 0.1, 0.1); const renderer = new Renderer(layout, function clear() {/ сброс предыдущего кадра /}, function drawEdge(edge, p1, p2) {/ рисование ребра /}, function drawNode(node, p) {/ рисование вершины /} );

renderer.start();

<details>
  <summary>Пример создания Renderer для canvas</summary>

    const canvas  = document.querySelector('canvas');
    cosnt context = canvas.getContext('2d');

    const renderer = new Renderer(layout,
      function clear() {
        context.clearRect(0, 0, width, height);
      },

      function drawEdge(edge, p1, p2) {
        context.save();
        context.translate(center.x, center.y);

        context.strokeStyle = 'rgba(0, 0, 0, 0.15)';
        context.lineWidth = 3.0;

        context.beginPath();
        context.moveTo(p1.x * 50, p1.y * 40);
        context.lineTo(p2.x * 50, p2.y * 40);
        context.stroke();

        context.restore();
      },

      function drawNode(node, p) {
        context.save();
        context.translate(center.x, center.y);

        context.font = "18px serif";

        const width = ctx.measureText(node.data.label).width;
        const x = p.x * 50;
        const y = p.y * 40;
        context.clearRect(x - width / 2.0 - 2, y - 10, width + 4, 20);
        context.fillStyle = '#000000';
        context.fillText(node.data.label, x - width / 2.0, y + 5);

        context.restore();
      }
    );
</details>

### Дополнительно
Если вы используете vscode, можно настроить резолв для корректной работы самого редактора с помощью файла `jsconfig.json`
```json
{
  "compilerOptions": {
    "baseUrl": "../node_modules/",
    "paths": {
      "javascript-graph/*": ["./javascript-graph/library/*"]
    }
  }
}