Позиционирование вершин в sigma.js графе.

[Surf]

Господа, добрый день.

Ситуация следующая, есть граф смежности сетевых устройств (маршрутизаторов), который рисуется с помощью: sigma.js
Информация о вершинах получаю из базы данных, после PHP скриптом отправляется в браузер в виде json.

Каждая вершина имеет вид:
{id: host, label: host, x: Math.random(), y: Math.random(), size: 1, color: '#3399FF'}

Где id и label - хостнейм конкретного маршрутизатора.


Не понимание ситуации, у меня возникло, касательно позиции вершин:
В моем случае, позиции x и y вычисляются с помощью функции Math.random(),
что помогает как то раскидать вершины по экрану. В произвольном порядке.

Моя цель, сохранить позицию вершины после перетаскивания ее левой клавишей мыши.
В идеале отправить эту информацию в БД.

Прежде всего, у меня возникла тотальное непонимание, как это реализовать.

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

Если есть идеи в какую сторону гуглить/читать, касательно реализации данного функционала - буду благодарен.

[Rise]

Surf, это для приватного использования? Есть же штуки типа Packet Tracer...

[Surf]

Rise, использовать буду я и пара моих коллег - так же сетевых инженеров. Хочу автоматизировать некоторые рабочие процессы и освободить немного времени.

На пример в visio рисовать и поддерживать актуальную топологию в 400-500 узлов довольно проблематично и затратно по времени, а скриптом по ssh собрать необходимую инфо о igp топологии, загрузить в БД, после нарисовать в браузере - гораздо проще и правильней. По крайней мере мне так кажется.

Тем более есть шанс прокачать новый скилл. В данном случае столкнулся с удивительным миром фронтенда и JS в частности

Packet Tracer, GNS, UNL - это эмуляторы, к сожалению не подходят под мои задачи.

Кстати, в том же PT это реализовано, перетащил узел, сохранил топологию - профит.
Потом загрузил ее, все узлы остались на сохраненных местах.

[Rise]

Surf, качните исходники там есть пример с перетаскиванием drag-nodes.html, в этом примере внизу есть событие dragend, в этом событие есть его объект event, этот объект и содержит актуальные данные по узлу event.data.node когда его перетащили...

[Surf]

Rise, спасибо! То, что нужно.

Осталось понять, как можно вернуть свойства узла, которое содержит координаты по оси x/y - event.data.node.rendered1:x / event.data.node.rendered1:y

Для примера, alert(event.data.node.size) - вернет 1.

А вот в случае с
alert(event.data.node.rendered1) - undefined
alert(event.data.node.rendered1:x) - пишет ошибку в лог: (index):396 Uncaught SyntaxError: missing ) after argument list...

[Surf]

Господа, увы, но проблема пока актуальна.

Как получить значение свойств узла event.data.node: color, id, label - понятно.
На пример:

alert(event.data.node.id)

Но как получить значение свойств(?) осей, которые содержат координаты:
renderer1:x: 440.000...
renderer1:y: 145.000..

- остается загадкой.

alert(event.data.node.renderer1) - возвращает undefined

alert(event.data.node.rendered1:x) - пишет ошибку в лог

Скрин проблемы прикладываю.
Буду благодарен за ЛикБез, пока я в тупике.

[Rise]

Surf, есть два способа обращения к свойству объекта:

- через точку (имя свойства состоит из букв, цифр, символов $ и _ и первый символ не является цифрой - имена переменных)
- через квадратные скобки (имя свойства любая строка или переменная).

Свойства доступные и через точку и через скобки (color, id, label, size, x, y) например:

// идентичны
event.data.node.color
event['data'].node.color
event.data['node'].color
event.data.node['color']
event['data']['node']['color']

Свойства доступные только через скобки, потому что не удовлетворяют условию через точку - содержат в имени символ ":" (read_cam0:size, read_cam0:x, read_cam0:y, renderer1:size, renderer1:x, renderer1:y) например:

// имя свойства любая строка
// идентичны
event['data'].node['renderer1:x']
event.data['node']['renderer1:x']
event.data.node['renderer1:x']
event['data']['node']['renderer1:x']

// имя свойства переменная
var data = 'data';
var node = 'node';
var renderer = 'renderer1:x';
// идентичны
event[data].node[renderer]
event.data[node][renderer]
event.data.node[renderer]
event[data][node][renderer]

[Surf]

Rise, спасибо! Емко и по делу.

Попутно я научился ajax`ом отправлять данные (те самые х и у) на сервер. И теперь у меня легкая эйфория на фоне нескольких дней безумия в js