Автор Анируд Сингх
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/.