Transition from CodePen

graph.js

@@ -0,0 +1,292 @@
+"use strict";
+
+/**
+ * @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
+ */
+class graph {
+  // Оболочка (instanceof HTMLElement)
+  shell = document.getElementById("graph");
+
+  // Реестр узлов
+  nodes = new Set();
+
+  // Реестр соединений
+  connections = new Set();
+
+  // Класс узла
+  node = class node {
+    // Реестр входящих соединений
+    inputs = new Map();
+
+    // Реестр исходящих соединений
+    outputs = new Map();
+
+    // HTML-элемент
+    element;
+
+    // Параметры генерации
+    #diameter = 100;
+    #increase = 5;
+
+    constructor(data, graph) {
+      // Инициализация оболочки
+      const article = document.createElement("article");
+      article.id = graph.nodes.size;
+      article.classList.add("node", "unselectable");
+      article.style.top =
+        graph.shell.offsetHeight / 2 -
+        this.#diameter / 2 +
+        (0.5 - Math.random()) * 500 +
+        "px";
+      article.style.left =
+        graph.shell.offsetWidth / 2 -
+        this.#diameter / 2 +
+        (0.5 - Math.random()) * 500 +
+        "px";
+
+      if (typeof data.title === "string") {
+        // Найден заголовок узла
+
+        // Инициализация заголовка
+        const title = document.createElement("h4");
+        title.innerText = data.title;
+
+        // Запись в оболочку
+        article.appendChild(title);
+      }
+
+      // Запись в свойство
+      this.element = article;
+
+      // Запись в документ
+      graph.shell.appendChild(article);
+
+      // Инициализация
+      this.init();
+    }
+
+    init() {
+      // Инициализация размера
+      this.element.style.width = this.element.style.height =
+        this.#diameter + this.#increase * this.inputs.size + "px";
+    }
+  };
+
+  #move = true;
+  #camera = true;
+
+  constructor(shell, camera = true) {
+    // Запись оболочки
+    if (shell instanceof HTMLElement) this.shell = shell;
+
+    // Инициализация ссылки на обрабатываемый объект
+    const _this = this;
+
+    // Перемещение камеры
+    if (camera === true) {
+      this.shell.onmousedown = function (e) {
+        // Начало переноса
+
+        if (_this.#camera) {
+          // Разрешено двигать камеру (оболочку)
+
+          // Инициализация координат
+          const coords = _this.shell.getBoundingClientRect();
+          const x = e.pageX - coords.left + pageXOffset;
+          const y = e.pageY - coords.top + pageYOffset;
+
+          // Инициализация функции переноса
+          function move(e) {
+            // Запись нового отступа от верха
+            _this.shell.style.top = e.pageY - y + "px";
+
+            // Запись нового отступа от лева
+            _this.shell.style.left = e.pageX - x + "px";
+          }
+
+          // Перенос
+          document.onmousemove = move;
+        }
+
+        // Конец переноса
+        _this.shell.onmouseup = function () {
+          document.onmousemove = null;
+          _this.shell.onmouseup = null;
+        };
+      };
+
+      // Перещапись событий браузера (чтобы не дёргалось)
+      _this.shell.ondragstart = null;
+    }
+  }
+
+  write = function (data = {}) {
+    if (typeof data === "object") {
+      // Получен обязательный входной параметр в правильном типе
+
+      // Инициализация узла
+      const node = new this.node(data, this);
+
+      // Инициализация ссылки на обрабатываемый объект
+      const _this = this;
+
+      // Запрет движения камеры при наведении на узел (чтобы двигать узел)
+      node.element.onmouseover = function (e) {
+        _this.#camera = false;
+      };
+
+      // Снятие запрета движения камеры
+      node.element.onmouseout = function (e) {
+        _this.#camera = true;
+      };
+
+      if (this.#move) {
+        // Разрешено перемещать узлы
+
+        node.element.onmousedown = function (onmousedown) {
+          // Начало переноса
+
+          // Позиционирование над остальными узлами
+          node.element.style.zIndex = 550;
+
+          if (!_this.#camera) {
+            // Запрещено двигать камеру (оболочку)
+
+            // Инициализация координат
+            const n = node.element.getBoundingClientRect();
+            const s = _this.shell.getBoundingClientRect();
+
+            // Инициализация функции переноса
+            function move(onmousemove) {
+              // Запись нового отступа от верха
+              node.element.style.top =
+                onmousemove.pageY -
+                (onmousedown.pageY - n.top + s.top + pageYOffset) +
+                "px";
+
+              // Запись нового отступа от лева
+              node.element.style.left =
+                onmousemove.pageX -
+                (onmousedown.pageX - n.left + s.left + pageXOffset) +
+                "px";
+
+              for (const [connection, target] of node.outputs) {
+                // Перебор исходящих соединений
+
+                // Инициализация координат для линии
+                const x1 = parseInt(node.element.style.left);
+                const y1 = parseInt(node.element.style.top);
+
+                // Запись новой координаты по горизонтали
+                connection.children[0].setAttribute(
+                  "x1",
+                  (isNaN(x1) ? 0 : x1) + node.element.offsetWidth / 2
+                );
+
+                // Запись новой координаты по вертикали
+                connection.children[0].setAttribute(
+                  "y1",
+                  (isNaN(y1) ? 0 : y1) + node.element.offsetHeight / 2
+                );
+              }
+
+              for (const [connection, target] of node.inputs) {
+                // Перебор входящих соединений
+
+                // Инициализация координат для линии
+                const x2 = parseInt(node.element.style.left);
+                const y2 = parseInt(node.element.style.top);
+
+                // Запись новой координаты по горизонтали
+                connection.children[0].setAttribute(
+                  "x2",
+                  (isNaN(x2) ? 0 : x2) + node.element.offsetWidth / 2
+                );
+
+                // Запись новой координаты по вертикали
+                connection.children[0].setAttribute(
+                  "y2",
+                  (isNaN(y2) ? 0 : y2) + node.element.offsetHeight / 2
+                );
+              }
+            }
+
+            // Перенос
+            document.onmousemove = move;
+          }
+
+          // Конец переноса
+          node.element.onmouseup = function () {
+            // Очистка обработчиков событий
+            document.onmousemove = null;
+            node.element.onmouseup = null;
+
+            // Позиционирование вместе остальными узлами
+            node.element.style.zIndex = 500;
+          };
+        };
+
+        // Перещапись событий браузера (чтобы не дёргалось)
+        node.element.ondragstart = null;
+      }
+
+      // Запись в реестр
+      this.nodes.add(node);
+
+      return node;
+    }
+  };
+
+  connect = function (from, to) {
+    if (from instanceof this.node && to instanceof this.node) {
+      // Получены обязательные входные параметры в правильном типе
+
+      // Инициализация оболочки
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.id = this.connections.size;
+      svg.classList.add("connection");
+      svg.setAttribute("data-from", from.element.id);
+      svg.setAttribute("data-to", to.element.id);
+
+      // Инициализация координат для линии
+      let x1 = parseInt(from.element.style.left);
+      x1 = isNaN(x1) ? 0 : x1;
+      let y1 = parseInt(from.element.style.top);
+      y1 = isNaN(y1) ? 0 : y1;
+      let x2 = parseInt(to.element.style.left);
+      x2 = isNaN(x2) ? 0 : x2;
+      let y2 = parseInt(to.element.style.top);
+      y2 = isNaN(y2) ? 0 : y2;
+
+      // Инициализация оболочки
+      const line = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "line"
+      );
+      line.setAttribute("x1", x1 + from.element.offsetWidth / 2);
+      line.setAttribute("y1", y1 + from.element.offsetHeight / 2);
+      line.setAttribute("x2", x2 + to.element.offsetWidth / 2);
+      line.setAttribute("y2", y2 + to.element.offsetHeight / 2);
+      line.setAttribute("stroke", "grey");
+      line.setAttribute("stroke-width", "8px");
+
+      // Запись в оболочку
+      svg.append(line);
+
+      // Запись в документ
+      this.shell.appendChild(svg);
+
+      // Запись соединений в реестры узлов
+      from.outputs.set(svg, to);
+      to.inputs.set(svg, from);
+
+      // Запись в реестр ядра
+      this.connections.add([from, to]);
+
+      // Реинициализация узла-получателя
+      to.init();
+
+      return svg;
+    }
+  };
+}