Библиотека GoJS: создание интерактивных диаграмм

Как использовать GoJS внутри React-приложения?

Для интеграции с React требуется обёртка, которая управляет жизненным циклом Diagram. Один из подходов - создать компонент, который инициализирует диаграмму в useEffect и уничтожает её при размонтировании.

import React, { useEffect, useRef } from 'react';
import go from 'gojs';

const GoDiagram = () => {
  const divRef = useRef(null);

  useEffect(() => {
    const $ = go.GraphObject.make;
    const diagram = $(go.Diagram, divRef.current);

    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { fill: "white" }),
        $(go.TextBlock, { margin: 10 },
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel(
      [{ key: "A" }, { key: "B" }],
      [{ from: "A", to: "B" }]
    );

    return () => diagram.div = null;
  }, []);

  return <div ref={divRef} style={{ width: '100%', height: '500px' }} />;
};

export default GoDiagram;

Chart js script (библиотека chart.js)

Компонент использует ref вместо ID, что удобно для повторного использования. Очистка при размонтировании предотвращает утечки памяти.

Как изменить внешний вид узлов с использованием пользовательских SVG-шаблонов?

GoJS позволяет задавать сложные фигуры и встраивать интерактивные элементы. Например, создадим узел с иконкой и текстом, используя панели.

diagram.nodeTemplate =
  $(go.Node, "Horizontal",
    $(go.Picture, { source: "https://example.com/icon.png", width: 30, height: 30 }),
    $(go.TextBlock, { margin: 5, font: "14px sans-serif" },
      new go.Binding("text", "name"))
  );

Для более сложных форм (например, «шестиугольник») можно использовать Geometry:

$(go.Shape,
  { geometryString: "M0,0 L40,0 L50,30 L40,60 L0,60 L-10,30 Z", fill: "lightgreen" })

Такие шаблоны позволяют строить диаграммы, не ограниченные стандартными фигурами.

Как реализовать автоматическую раскладку (layout) дерева?

Для иерархических графов используйте TreeLayout. Достаточно заменить свойство layout диаграммы.

diagram.layout = $(go.TreeLayout, { angle: 90, layerSpacing: 40, nodeSpacing: 20 });
// ... далее модель должна содержать данные с указанием parent

Пример модели для дерева:

diagram.model = new go.TreeModel([
  { key: "Корень" },
  { key: "Дочерний1", parent: "Корень" },
  { key: "Дочерний2", parent: "Корень" }
]);

Диаграмма автоматически расположится сверху вниз. В GoJS доступны также ForceDirectedLayout, CircularLayout и LayeredDigraphLayout.

Как добавить поддержку перетаскивания (drag & drop) узлов?

По умолчанию узлы в GoJS можно перетаскивать, если не отключено свойство movable. Для добавления возможности перетаскивания из внешнего источника (например, панели инструментов) требуется обработчик события.

// Разрешить перетаскивание из HTML-элемента
diagram.div.addEventListener('dragover', e => {
  e.preventDefault();
});
diagram.div.addEventListener('drop', e => {
  const data = e.dataTransfer.getData('text');
  const point = diagram.lastInput.documentPoint;
  diagram.model.addNodeData({ key: data });
  // новое положение узла
  const node = diagram.findNodeForKey(data);
  if (node) node.location = point;
});

Также можно настроить MouseDrop событие самого Diagram.