Hello

This is my first Docusaurus document!

Минимальный пример

import { Diagram, Node } from "diagram";

// инициализация
const diagram = new Diagram(el, options);

// содание блоков
const nodeA = new Node();
const nodeB = new Node();

// добавление блоков в диаграмму
diagram.addNode(nodeA);
diagram.addNode(nodeB);

// создание связи между портами блоков
const link = new Link(nodeA, nodeA.outPorts[0], nodeB, nodeB.inPorts[0]);
diagram.addLink(link);

Палитры и Диаграммы

Инициализация

import { Graph, Node } from "diagram";

options = {
  readOnly: false,
  showOverview: true,
  // Добавить визуальную опцию, как и уровень зума. ???
  backgroundColor: "#ffffff", // фон диаграмы
  overviewBackgroundColor: "#ffffff", // фон overview
};

// инициализация
const diagram = new Diagram(el, options);

Опции

Month	Savings
January	$250
February	$80
March	$420

Методы

// создать PortType
diagram.addPortType({})

// добавить ноды в палитру
diagram.addPaletteNode({})


diagram.addNode()
cont node = diagram.getNodeByID('123')

События

diagram.on('ready', () => ...) // Событие окончания загрузки схемы


diagram.on('node-move', (node) => ...) // Событие перемещения блока
diagram.on('node-added', (node) => ...) // Событие добавления блока
diagram.on('node-deleted', (node) => ...) // Событие удаления блока
diagram.on('node-selected', (node) => ...) // Событие выделения блока
diagram.on('node-hover', (node) => ...) // Событие наведения на блок

diagram.on('port-selected', (node) => ...) // Событие выделения порта
diagram.on('port-hover', (node) => ...) // Событие наведения на порт

diagram.on('link-added', (link) => ...) // Событие добавления связи
diagram.on('link-deleted', (link) => ...) // Событие удаления связи
diagram.on('link-selected', (link) => ...) // Событие выделения блока
diagram.on('link-hover', (link) => ...) // Событие наведения на блок

--------PORT------------
port = node.getPortByID()
port.setType()

port.link(otherPort)
port.unlink(otherPort)

---

diagram.save()
diagram.load()

class Node {
  /** имя блока */
  name: string;
  /**  уникальный идентификатор */
  id: string;
  /** описание блока, показывает в тултипе */
  description: string;
  /** группа - показывается в палитре */
  groupName: string;
  /** доступные входящие порты у блока (видны на диаграмме, в палитре порты скрыты) */
  inPorts: Port[];
  /** доступные исходящие порты у блока (видны на диаграмме, в палитре порты скрыты) */
  outPorts: Port[];
}

class Port {
  /** имя порта */
  name: string;
  /** описание порта - показывает в тултипе на диаграмме */
  description: string;
  /** уникальный идентификатор в рамках элемента (то есть это НЕ гуид) */
  id: string;
  /** тип порта, нужно для визуальной окраски порта */
  type: PortType;
  /** макс кол-во доступных соединений (только если порт входящий) */
  maxLinks: number;
}
class PortType {
  /** имя типа */
  name: string;
  /** цвет типа (им окрашивается сам порт, в случае смены у порта типа. Нужно чтобы визуально сразу видеть какой тип у порта) */
  color: string;
}
// блок, который добавлен на диаграмму
class DiagramNode extends Node {
  /** координаты */
  x: number;
  /** координаты */
  y: number;
  /** текущий цвет фона */
  color: string;
  /** текущий цвет бордера */
  border: string;
  /** текстовое сообщение, показываемое под блоков. Это не подсказка всплывающая, а дополнительное сообщение, например, сигнализирующее что блок настроен неверно */
  message: string;
}
// линия связи между блоками
class Link {
  /** исходящий блок DiagramNode */
  outNode: DiagramNode;
  /** исходящий порт */
  outPort: DiagramNode;
  /** входящий блок DiagramNode */
  inNode: Port;
  /** входящий порт */
  inPort: Port;
}