Автор Анируд Сингх

MX-graph - это библиотека диаграмм на основе java-скрипта, которую можно использовать для отображения интерактивных графиков или диаграмм с настраиваемой функциональностью. Преимущество использования MX-графа заключается в том, что это векторный граф, поэтому он изначально работает в любом браузере. Популярные веб-сайты, основанные на графах, такие как draw.io, используют на своих сайтах библиотеку MX-graph.

Angular - это популярный фреймворк для работы с веб-приложениями, и в нем легко реализовать MX-граф для быстрого старта вашего проекта.

После долгой работы над MX-графиком я пришел к выводу, что о нем не так много информации, а другие связанные документы не на должном уровне. Я даже видел ошибки в документации.

Итак, здесь я пишу этот блог, чтобы предоставить некоторые подробности о том, как интегрировать граф MX с Angular 8.

Это сообщение в блоге представляет собой краткое обсуждение важных функций MX-графа и того, как без особого труда использовать их с Angular 8.

Интеграция MX-Graph в Angular

Прежде всего, нам нужно установить MX-graph. Что ж, для него уже есть пакет NPM, нам просто нужно установить его с помощью этой команды -

npm install mxgraph — save

После успешной установки пакета импортируйте библиотеку в angular.json:

"build": {
          "options": {
            ...
            "assets": [
              { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },
              { "glob": "favicon.ico", "input": "/src", "output": "/" },
              { "glob": "**/*", "input": "./node_modules/mxgraph/javascript/src", "output": "/assets/mxgraph" }
            ],
            ...
            "scripts": [
              "src/assets/js/mxgraph.conf.js",
              "node_modules/mxgraph/javascript/mxClient.js"
            ]
          }         
        }

Здесь мы меняем активы и массив скриптов, в скрипты мы добавили два файла java-скриптов, mxgraph.conf.js, который содержит некоторую конфигурацию MX-графа, и mxClient.js, который представляет собой библиотеку MX-графа.

Но MX-граф не имеет реализации машинописного текста, вам нужно создать его классы или, что еще лучше, вы можете скопировать файлы и поместить в новый каталог mxtypes -

Особенности MX-Graph

MX-graph предоставляет множество встроенных функций. Поскольку я не могу перечислить их все в этом блоге, я попытался включить некоторые из очень важных функций, которые могут потребоваться для создания вашего приложения.

В этом блоге я расскажу, как создать холст, на котором вы можете добавлять или удалять вершины, которые можно перемещать и изменять размер на этом холсте. Я также обсуждал, как создавать ребра, или просто вы можете сказать стрелки, чтобы показать связь между двумя узлами.

Создание нового графика-

После реализации мы можем легко создать новый граф в компоненте, как показано в примере:

export class AppComponent implements AfterViewInit {
@ViewChild('graphContainer') graphContainer: ElementRef;
ngAfterViewInit() {
    const newGraph = new mxGraph(this.graphContainer.nativeElement);
try {
      const parent = newGraph.getDefaultParent();
      newGraph.getModel().beginUpdate();
const vertex1 = newGraph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = newGraph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);
newGraph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      newGraph.getModel().endUpdate();
      new mxHierarchicalLayout(newGraph).execute(newGraph.getDefaultParent());
    }
  }
}

Теперь у вас есть интегрированный MX-граф, а также создан компонент графа, но как добиться нужной вам пунктуальности графа?

В следующих разделах этой статьи вы увидите некоторые полезные функции MX-графика для создания пользовательских функций на графике:

Вставить новую вершину-

const vertex= newGraph.insertVertex(newGraph, vertex-ID, content, x-coordinates, y-coordinates, width, height,style);

Здесь newGraph - это имя графа (что бы вы ему ни дали!). Если для вершины задан некоторый идентификатор, вы можете передать его здесь, иначе он может быть нулевым. В третьем параметре мы можем передать строку, которая должна отображаться внутри вершины.

Следующие два параметра - это координаты x и y графика, на котором вы хотите разместить вершину, а последние два - это ширина и высота вершины. Также есть необязательный параметр стиля, в котором вы можете передать стиль вершины. Подробнее об этом позже в статье.

Нахождение всех вершин в графике-

const cells = this.mxGraph.getChildVertices(this.newGraph );

Это поможет вам найти все вершины с данными, которые в настоящее время присутствуют на вашем графике. Создайте ребро между двумя вершинами:

this.mxGraph.insertEdge(Graph-Name, edge-ID,content,source,target,style)

Если вы не хотите передавать идентификатор, вы можете передать null, все будет работать нормально. Источник - это идентификатор вершины, с которой будет начинаться ребро, а цель - это место, где ваше ребро будет заканчиваться.

Последний параметр style - это опция, используемая только в том случае, если вы хотите добавить стиль к краю в качестве последнего параметра в кавычках.

Ссылка, если мне нужен край без стрелки, в конце я могу добавить ‘endArrow = none;’ в качестве четвертого параметра.

Чтобы проверить, есть ли у вершины ребро -

const edgeData = this.mxGraph.getEdgeBetween(source, target, true);

Если между источником и целью есть граница, тогда все его свойства со значением будут включены в edgeData, иначе оно будет null.

Удалить вершину-

this.mxGraph.removeCells([vertex ID], true);

В removeCells третий параметр - удалить все ребра вершин в вашем графе. Кроме того, если вы не хотите удалять ребра вершин, вы можете сделать это false.

Функциональность прослушивателя событий

Добавление функции прослушивания событий в ваш график - одна из сложных задач, MX-graph предоставляет множество прослушивателей событий, таких как щелчок, двойной щелчок, наведение, касание и многие другие, которые вы можете проверить в их официальных документах. Некоторые из важных были упомянуты ниже:

Для одиночного щелчка:

this.mxGraph.addListener(mxEvent.CLICK, (sender, evt) => {})

Чтобы определить, была ли нажата вершина или граф, вы также можете использовать свойство MX-event, чтобы получить идентификатор вершины.

this.mxGraph.addListener(mxEvent.CLICK, (sender, evt) => {
const vertexID = evt.getProperty(‘cell’);
if(vertexID ) {
console.log(`Vertex with id{$vertexID } was pressed`)
} else {
console.log(`Graph was clicked.`)
}
}

Для двойного щелчка:

Это в основном похоже на событие одиночного щелчка, только с небольшим изменением.

this.mxGraph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {})

Стилизация вершины

Вы можете использовать mxStylesheet для стилизации вершины, но это занимает довольно много времени, поскольку мы не знаем все его свойства. Мы должны сначала найти необходимое свойство, а затем реализовать его, что замедляет этот подход.

Для быстрой реализации необходимого стиля я нашел лучший способ -

Как я уже упоминал ранее, draw.io также использует MX-graph. Перейдите на сайт, создайте необходимую форму и цвет, а затем нажмите Изменить стиль, как показано на изображении ниже. -

В поле редактирования стиля вы можете увидеть некоторые свойства стиля вершины, вы можете скопировать их и использовать напрямую при создании новой вершины, например:

Вставка сложных фигур в график-

Одна из основных проблем, с которыми я столкнулся, - это вставить в график произвольную форму. Единственное эффективное решение, которое я узнал, - это создать SVG этой формы и добавить эту форму к вашему стилю.

shape=image;image=Image-URL

Перенос текста вершины-

Вы можете сделать перенос текста из параметра стиля, и можете найти все свойства в draw.io. Но это неэффективно, особенно для сложных форм. Чтобы решить эту проблему, я создал пользовательскую функцию с помощью предварительно созданных свойств MX-графика.

wraptext(){
  this.mxGraph.getLabel = function(cell)
  {
    const label = (this.labelsVisible) ? this.convertValueToString(cell) : '';
    const geometry = this.model.getGeometry(cell);
if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null ||
        (geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) &&
      geometry.width >= 2)
    {
      const style = this.getCellStyle(cell);
      const fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
      const max = geometry.width / (fontSize * 0.625);
if (max < label.length)
      {
        return label.substring(0, max*2) + '...';
      }
    }
return label;
  };
}

По сути, в этой функции вычисляется ширина каждой вершины на графике. Затем вычисляется максимальный объем текста, который можно ввести, исходя из размера шрифта вершины.

Если текст, присутствующий в вершине, превышает максимальную занятость двух строк, тогда весь остальной текст не будет отображаться на графике, а в конце помещается «…», чтобы указать, что текста больше.

Заключение:

Теперь, когда у нас есть базовые знания по интеграции графов, возможности MX-Graph безграничны. Его можно использовать в качестве основы для любого графического приложения, которое только можно вообразить.

Многие популярные сайты, такие как draw.io, используют MX-график в своей основе. Он бесплатный, в отличие от других библиотек, и прост в использовании. Эта библиотека графов может использоваться не только для проектов Angular, но и для других технологий.

Для лучшего понимания этой версии не помешает лучше разобраться в Angular 8 и его возможностях.

Если вам понравился блог, похлопайте по нему (столько, сколько сочтете достойным).

Спасибо за прочтение!!

Первоначально опубликовано на https://www.habilelabs.io/.