Как в rete.js сделать связи вертикальными?

Question

[podolskijspace]

Rete.js помогает работать с графами, но они везде горизонтально-ориентированные, а надо, чтобы стали вертикально-ориентированными. Работаю в реакте, спасибо!

Comments

[podolskijspace]

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

[Lapita12]

podolskijspace,
Да, в Rete.js есть возможность масштабирования графа, но по умолчанию эта функция не включена. Чтобы включить масштабирование, нужно добавить соответствующие настройки при создании экземпляра редактора.

const editor = new Rete.NodeEditor('demo@0.1.0', container, {
  // Включаем масштабирование
  minimap: {
    enabled: true
  },
  // Другие настройки...
});

После этого в правом нижнем углу редактора появится мини-карта, которая позволяет масштабировать граф.
Чтобы вернуться к графу, можно использовать комбинацию клавиш `Ctrl + 0` (на Windows и Linux) или `Cmd + 0` (на Mac). Эта комбинация клавиш возвращает масштаб графа к исходному значению.

Answer 1

[Lapita12]

Для того, чтобы сделать связи вертикальными в Rete.js, можно использовать CSS-стили. В частности, можно задать свойство flex-direction для контейнера, который содержит элементы графа.
Например, если у вас есть контейнер с классом rete-container, то можно вот так

css.rete-container {
  display: flex;
  flex-direction: column;
}

Это задаст вертикальную ориентацию для элементов графа.
Также, если вы хотите изменить ориентацию связей между элементами, можно использовать свойство `curve` при создании связи. Например, чтобы связи были вертикальными, можно задать curve: 'vertical':

editor.on('connectioncreated', ({ connection }) => {
  connection.setCurve('vertical');
});