1178 lines
42 KiB
JavaScript
1178 lines
42 KiB
JavaScript
import Victor from "https://cdn.skypack.dev/victor@1.1.0";
|
||
|
||
'use strict';
|
||
|
||
/**
|
||
* @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
|
||
*/
|
||
class graph {
|
||
// Оболочка (instanceof HTMLElement)
|
||
#shell = document.getElementById("graph");
|
||
get shell() {
|
||
return this.#shell;
|
||
}
|
||
|
||
// Реестр узлов
|
||
#nodes = new Set();
|
||
get nodes() {
|
||
return this.#nodes;
|
||
}
|
||
|
||
// Реестр соединений
|
||
#connections = new Set();
|
||
get connections() {
|
||
return this.#connections;
|
||
}
|
||
|
||
// Класс узла
|
||
#node = class node {
|
||
// Реестр входящих соединений
|
||
#inputs = new Set();
|
||
get inputs() {
|
||
return this.#inputs;
|
||
}
|
||
|
||
// Реестр исходящих соединений
|
||
#outputs = new Set();
|
||
get outputs() {
|
||
return this.#outputs;
|
||
}
|
||
|
||
// Оператор
|
||
#operator;
|
||
get operator() {
|
||
return this.#operator;
|
||
}
|
||
|
||
// HTML-элемент
|
||
#element;
|
||
get element() {
|
||
return this.#element;
|
||
}
|
||
|
||
// Наблюдатель
|
||
#observer = null;
|
||
get observer() {
|
||
return this.#observer;
|
||
}
|
||
|
||
// Реестр запрещённых к изменению параметров
|
||
#block = new Set(["events"]);
|
||
get block() {
|
||
return this.#block;
|
||
}
|
||
|
||
// Диаметр узла
|
||
#diameter = 100;
|
||
get diameter() {
|
||
return this.#diameter;
|
||
}
|
||
|
||
// Степень увеличения диаметра
|
||
#increase = 0;
|
||
get increase() {
|
||
return this.#increase;
|
||
}
|
||
|
||
// Величина степени увеличения диаметра
|
||
#addition = 12;
|
||
get addition() {
|
||
return this.#addition;
|
||
}
|
||
|
||
// Счётчик итераций
|
||
iteration = 0;
|
||
|
||
// Ограничение максимального количества итераций за вызов
|
||
limit = 3000;
|
||
|
||
// Обработка событий
|
||
actions = {
|
||
collision: true,
|
||
pushing: true,
|
||
pulling: true
|
||
};
|
||
|
||
constructor(operator, data) {
|
||
// Инициализация HTML-элемента узла
|
||
const article = document.createElement("article");
|
||
article.id = operator.nodes.size;
|
||
article.classList.add(data.color ?? 'white', "node", "unselectable");
|
||
if (typeof data.href === "string") {
|
||
article.href = data.href;
|
||
}
|
||
|
||
// Инициализация заголовка
|
||
const title = document.createElement("h4");
|
||
title.classList.add('title');
|
||
title.innerText = data.title ?? '';
|
||
|
||
// Запись в оболочку
|
||
article.appendChild(title);
|
||
|
||
// Инициализация описания
|
||
const description = document.createElement("div");
|
||
description.classList.add('description');
|
||
if (typeof data.popup === 'string') description.title = data.popup;
|
||
|
||
// Запись блокировки открытия описания в случае, если был перемещён узел
|
||
title.onmousedown = (onmousedown) => {
|
||
// Запись открытия описания
|
||
title.onclick = (onclick) => { show() }
|
||
|
||
title.onmousemove = (onmousemove) => {
|
||
// Курсор сдвинут более чем на 15 пикселей?
|
||
if (Math.abs(onmousedown.pageX - onmousemove.pageX) > 15 || Math.abs(onmousedown.pageY - onmousemove.pageY) > 15) {
|
||
// Запись иконки курсора
|
||
title.style.cursor = 'grabbing';
|
||
|
||
// Запись события для возврата иконки курсора
|
||
title.onmouseup = fn => {
|
||
// Удаление событий
|
||
title.onmouseup = title.onmousemove = null;
|
||
|
||
// Удаление иконки курсора
|
||
title.style.cursor = null;
|
||
}
|
||
|
||
title.onclick = (onclick) => { return false }
|
||
} else title.onclick = (onclick) => { show() }
|
||
}
|
||
};
|
||
|
||
|
||
// Запись в оболочку
|
||
article.appendChild(description);
|
||
|
||
// Инициализация левой фигуры для обёртки текста
|
||
const left = document.createElement("span");
|
||
left.classList.add('left', 'wrapper');
|
||
|
||
// Запись в описание
|
||
description.appendChild(left);
|
||
|
||
// Инициализация правой фигуры для обёртки текста
|
||
const right = document.createElement("span");
|
||
right.classList.add('right', 'wrapper');
|
||
|
||
// Запись в описание
|
||
description.appendChild(right);
|
||
|
||
// Инициализация ссылки на источник
|
||
const a = document.createElement("a");
|
||
if (typeof data.link === 'object' && typeof data.link.name === 'string') a.innerText = data.link.name;
|
||
if (typeof data.link === 'object' && typeof data.link.href === 'string') a.href = data.link.href;
|
||
if (typeof data.link === 'object' && typeof data.link.class === 'object') a.classList.add(...data.link.class);
|
||
if (typeof data.link === 'object' && typeof data.link.title === 'string') a.title = data.link.title;
|
||
|
||
// Блокировка событий браузера (чтобы не мешать переноса узла)
|
||
a.ondragstart = a.onselectstart = fn => { return false };
|
||
|
||
// Запись блокировки перехода по ссылке в случае, если был перемещён узел
|
||
a.onmousedown = (onmousedown) => {
|
||
a.onmousemove = (onmousemove) => {
|
||
// Курсор сдвинут более чем на 15 пикселей?
|
||
if (Math.abs(onmousedown.pageX - onmousemove.pageX) > 15 || Math.abs(onmousedown.pageY - onmousemove.pageY) > 15) {
|
||
// Запись иконки курсора
|
||
a.style.cursor = 'grabbing';
|
||
|
||
// Запись события для возврата иконки курсора
|
||
a.onmouseup = fn => {
|
||
// Удаление событий
|
||
a.onmouseup = a.onmousemove = null;
|
||
|
||
// Удаление иконки курсора
|
||
a.style.cursor = null;
|
||
}
|
||
|
||
a.onclick = (onclick) => { return false }
|
||
} else a.onclick = (onclick) => { return true }
|
||
}
|
||
};
|
||
|
||
|
||
// Запись в описание
|
||
description.appendChild(a);
|
||
|
||
// Запись текста в описание
|
||
const text = document.createElement("p");
|
||
if (typeof data.description === 'string') text.innerText = data.description;
|
||
|
||
// Запись в оболочку
|
||
description.appendChild(text);
|
||
|
||
if (
|
||
typeof data.cover === "string"
|
||
) {
|
||
// Получено изображение-обложка
|
||
|
||
// Инициализация изображения-обложки
|
||
const cover = document.createElement("img");
|
||
if (typeof cover.src === 'string') cover.src = data.cover;
|
||
if (typeof cover.alt === 'string') cover.alt = data.title;
|
||
cover.classList.add('cover', 'unselectable');
|
||
|
||
// Запись в описание
|
||
description.appendChild(cover);
|
||
}
|
||
|
||
if (
|
||
typeof data.append === "HTMLCollection" ||
|
||
typeof data.append === "HTMLElement"
|
||
) {
|
||
// Получены другие HTML-элементы
|
||
|
||
// Запись в оболочку
|
||
article.appendChild(data.append);
|
||
}
|
||
|
||
// Инициализация кнопки закрытия
|
||
const close = document.createElement('i');
|
||
close.classList.add('icon', 'close');
|
||
close.style.display = 'none';
|
||
close.title = 'Закрыть';
|
||
|
||
// Инициализация события закрытия окна описания
|
||
close.onclick = fn => { hide() };
|
||
|
||
// Запись в оболочку
|
||
article.appendChild(close);
|
||
|
||
// Запись в документ
|
||
operator.shell.appendChild(article);
|
||
|
||
// Запись диаметра описания в зависимости от размера заголовка (чтобы вмещался)
|
||
description.style.width = description.style.height = (a.offsetWidth === 0 ? 50 : a.offsetWidth) * 3 + 'px';
|
||
|
||
// Запись отступа заголовка (чтобы был по центру описания)
|
||
a.style.left = description.offsetWidth / 2 - a.offsetWidth / 2 + 'px';
|
||
|
||
// Сокрытие описания (выполняется после расчёта размера потому, что иначе размер будет недоступен)
|
||
description.style.display = "none";
|
||
|
||
/**
|
||
* Показать описание
|
||
*/
|
||
function show() {
|
||
// Отображение описания и кнопки закрытия описания
|
||
description.style.display = close.style.display = null;
|
||
|
||
// Сдвиг кнопки закрытия описания
|
||
close.style.top = close.style.right = -(((description.offsetWidth - article.offsetWidth) / 4) + description.offsetWidth / 8) + 'px';
|
||
|
||
// Размер кнопки закрытия описания
|
||
close.style.scale = 1.3;
|
||
|
||
// Прозрачность кнопки закрытия описания (плавное появление)
|
||
close.style.opacity = 1;
|
||
|
||
// Расположение выше остальных узлов
|
||
article.style.zIndex = close.style.zIndex = 1000;
|
||
}
|
||
|
||
/**
|
||
* Скрыть описание
|
||
*/
|
||
function hide() {
|
||
// Скрытие описания и кнопки закрытия описания
|
||
description.style.display = close.style.display = 'none';
|
||
|
||
// Удаление всех изменённых аттрибутов
|
||
close.style.top = close.style.right = article.style.zIndex = close.style.zIndex = close.style.scale = close.style.opacity = null;
|
||
}
|
||
|
||
// Запись в свойство
|
||
this.#element = article;
|
||
|
||
// Запись в свойство
|
||
this.#operator = operator;
|
||
|
||
// Инициализация
|
||
this.init();
|
||
|
||
// Перемещение
|
||
this.move(
|
||
operator.shell.offsetWidth / 2 -
|
||
this.#diameter / 2 +
|
||
(0.5 - Math.random()) * 500,
|
||
operator.shell.offsetHeight / 2 -
|
||
this.#diameter / 2 +
|
||
(0.5 - Math.random()) * 500,
|
||
true,
|
||
true,
|
||
true
|
||
);
|
||
}
|
||
|
||
init(increase = 0) {
|
||
// Запись в свойство
|
||
this.#increase = increase;
|
||
|
||
// Инициализация диаметра
|
||
if (this.#increase !== 0)
|
||
this.#diameter += this.#addition ** this.#increase;
|
||
|
||
// Инициализация размера HTML-элемента
|
||
this.element.style.width = this.element.style.height =
|
||
this.#diameter + "px";
|
||
|
||
// Инициализация описания
|
||
const description = this.element.getElementsByClassName('description')[0];
|
||
|
||
// Запись отступа описания (чтобы был по центру узла)
|
||
description.style.display = null;
|
||
description.style.marginLeft = description.style.marginTop = (this.element.offsetWidth - description.offsetWidth) / 2 + 'px';
|
||
description.style.display = 'none';
|
||
|
||
// Инициализация ссылки на ядро
|
||
const _this = this;
|
||
|
||
// Инициализация наблюдателя
|
||
this.#observer = new MutationObserver(function (mutations) {
|
||
for (const mutation of mutations) {
|
||
if (mutation.type === "attributes") {
|
||
// Перехвачено изменение аттрибута
|
||
|
||
// Запись параметра в инстанцию бегущей строки
|
||
_this.configure(mutation.attributeName);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Активация наблюдения
|
||
this.observer.observe(this.element, {
|
||
attributes: true,
|
||
attributeOldValue: true
|
||
});
|
||
}
|
||
|
||
move(x, y, collision = false, pushing = false, pulling = false) {
|
||
// Запись отступов
|
||
this.element.style.left = x + "px";
|
||
this.element.style.top = y + "px";
|
||
|
||
// Запись аттрибутов с координатами
|
||
this.element.setAttribute("data-graph-x", x);
|
||
this.element.setAttribute("data-graph-y", y);
|
||
|
||
// Инициализация реестров узлов
|
||
if (collision === true) collision = new Set();
|
||
if (pushing === true) pushing = new Set();
|
||
if (pulling === true) pulling = new Set();
|
||
|
||
// Обработка столкновений
|
||
if (collision && !collision.has(this))
|
||
this.collision(this.operator.nodes, collision);
|
||
|
||
// Инициализация буфера реестра узлов
|
||
const registry = new Set(this.operator.nodes);
|
||
|
||
if (pushing && !pushing.has(this)) {
|
||
// Активно отталкивание
|
||
|
||
// Инициализация счётчика циклов
|
||
let iterations = 50;
|
||
|
||
for (const connection of this.inputs) {
|
||
// Перебор входящих соединений
|
||
|
||
// Ограничение выполнения
|
||
if (--iterations <= 0) break;
|
||
|
||
// Защита от повторной обработки
|
||
if (pushing.has(connection.from)) continue;
|
||
|
||
// Удаление из буфера реестра узлов
|
||
registry.delete(connection.from);
|
||
|
||
// Обработка отталкивания
|
||
this.pushing(new Set([connection.from]), pushing);
|
||
}
|
||
|
||
// Реинициализация счётчика циклов
|
||
iterations = 50;
|
||
|
||
for (const connection of this.outputs) {
|
||
// Перебор исходящих соединений
|
||
|
||
// Ограничение выполнения
|
||
if (--iterations <= 0) break;
|
||
|
||
// Защита от повторной обработки
|
||
if (pushing.has(connection.to)) continue;
|
||
|
||
// Удаление из буфера реестра узлов
|
||
registry.delete(connection.to);
|
||
|
||
// Обработка отталкивания
|
||
this.pushing(new Set([connection.to]), pushing);
|
||
}
|
||
}
|
||
|
||
if (pulling && !pulling.has(this)) {
|
||
// Активно притягивание
|
||
|
||
// Инициализация счётчика циклов
|
||
let iterations = 50;
|
||
|
||
for (const connection of this.inputs) {
|
||
// Перебор входящих соединений
|
||
|
||
// Ограничение выполнения
|
||
if (--iterations <= 0) break;
|
||
|
||
// Защита от повторной обработки
|
||
if (pulling.has(connection.from)) continue;
|
||
|
||
// Удаление из буфера реестра узлов
|
||
registry.delete(connection.from);
|
||
|
||
// Обработка притягивания
|
||
this.pulling(new Set([connection.from]), pulling);
|
||
}
|
||
|
||
// Реинициализация счётчика циклов
|
||
iterations = 50;
|
||
|
||
for (const connection of this.outputs) {
|
||
// Перебор входящих соединений
|
||
|
||
// Ограничение выполнения
|
||
if (--iterations <= 0) break;
|
||
|
||
// Защита от повторной обработки
|
||
if (pulling.has(connection.to)) continue;
|
||
|
||
// Удаление из буфера реестра узлов
|
||
registry.delete(connection.to);
|
||
|
||
// Обработка притягивания
|
||
this.pulling(new Set([connection.to]), pulling);
|
||
}
|
||
}
|
||
|
||
// Обработка отталкивания остальных узлов
|
||
if (pushing) this.pushing(registry, pushing);
|
||
|
||
// Синхронизация местоположения исходящих соединений
|
||
for (const connection of this.outputs) connection.sync(this);
|
||
|
||
// Синхронизация местоположения входящих соединений
|
||
for (const connection of this.inputs) connection.sync(this);
|
||
}
|
||
|
||
collision(nodes, involved) {
|
||
// Инициализация буфера реестра узлов
|
||
const registry = new Set(nodes);
|
||
|
||
// Удаление текущего узла из буфера
|
||
registry.delete(this);
|
||
|
||
// Обработка столкновения с узлами
|
||
for (const node of registry) {
|
||
// Перебор узлов в реестре
|
||
|
||
// Защита от повторной обработки узла
|
||
if (involved.has(node)) continue;
|
||
|
||
// Инициализация вектора между узлами
|
||
let between;
|
||
|
||
// Инициализация ускорения
|
||
let increase = 0;
|
||
|
||
// Инициализация максимального количества итераций
|
||
let iterations = 30;
|
||
|
||
do {
|
||
// Произошла коллизия (границы кругов перекрылись)
|
||
|
||
if (++this.iteration >= this.limit) {
|
||
// Превышено ограничение по числу итераций
|
||
|
||
// Сброс счётчика итераций
|
||
this.iteration = 0;
|
||
|
||
// Конец выполнения
|
||
break;
|
||
}
|
||
|
||
if (++node.iteration >= node.limit) {
|
||
// Превышено ограничение по числу итераций
|
||
|
||
// Сброс счётчика итераций
|
||
node.iteration = 0;
|
||
|
||
// Конец выполнения
|
||
break;
|
||
}
|
||
|
||
// Инициализация универсального буфера
|
||
let buffer;
|
||
|
||
// Инициализация координат целевого узла
|
||
let x1 =
|
||
(isNaN((buffer = parseInt(node.element.style.left))) ? 0 : buffer) +
|
||
node.element.offsetWidth / 2;
|
||
let y1 =
|
||
(isNaN((buffer = parseInt(node.element.style.top))) ? 0 : buffer) +
|
||
node.element.offsetHeight / 2;
|
||
|
||
// Инициализация координат обрабатываемого узла
|
||
let x2 =
|
||
(isNaN((buffer = parseInt(this.element.style.left))) ? 0 : buffer) +
|
||
this.element.offsetWidth / 2;
|
||
let y2 =
|
||
(isNaN((buffer = parseInt(this.element.style.top))) ? 0 : buffer) +
|
||
this.element.offsetHeight / 2;
|
||
|
||
// Реинициализация вектора между узлами
|
||
between = new Victor(x1 - x2, y1 - y2);
|
||
|
||
// Узлы преодолели расстояние столкновения?
|
||
if (
|
||
!node.actions.collision ||
|
||
between.length() > node.diameter / 2 + this.diameter / 2 ||
|
||
--iterations <= 0
|
||
)
|
||
break;
|
||
|
||
// Инициализация координат вектора (узла с которым произошло столкновение)
|
||
let vector = new Victor(x1, y1)
|
||
.add(new Victor(between.x, between.y).norm().unfloat())
|
||
.subtract(
|
||
new Victor(
|
||
node.element.offsetWidth / 2,
|
||
node.element.offsetHeight / 2
|
||
)
|
||
);
|
||
|
||
if (node.actions.collision) {
|
||
// Активно столкновение узлов
|
||
|
||
// Запрещение столкновения, притягивания и отталкивания целевого узла и обрабатываемого узла (другими узлами)
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = this.actions.collision = this.actions.pushing = this.actions.pulling = false;
|
||
|
||
// Запись узлов в реестр задействованных узлов
|
||
involved.add(this);
|
||
|
||
// Перемещение узла
|
||
node.move(vector.x, vector.y, involved, involved, involved);
|
||
|
||
// Разрешение столкновения, притягивания и отталкивания целевого узла и обрабатываемого узла (другими узлами)
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = this.actions.collision = this.actions.pushing = this.actions.pulling = true;
|
||
}
|
||
|
||
// Проверка на столкновение узлов
|
||
} while (
|
||
node.actions.collision &&
|
||
between.length() <= node.diameter / 2 + this.diameter / 2
|
||
);
|
||
}
|
||
}
|
||
|
||
pushing(nodes, involved, add) {
|
||
if (++this.iteration >= this.limit) {
|
||
// Превышено ограничение по числу итераций
|
||
|
||
// Сброс счётчика итераций
|
||
this.iteration = 0;
|
||
|
||
// Отмена выполнения
|
||
return;
|
||
}
|
||
|
||
// Инициализация буфера реестра узлов
|
||
const registry = new Set(nodes);
|
||
|
||
// Удаление текущего узла из буфера
|
||
registry.delete(this);
|
||
|
||
// Инициализация ссылки на ядро
|
||
const _this = this;
|
||
|
||
// Увеличение дистанции для проверки
|
||
const distance = 100;
|
||
|
||
// Обработка отталкивания узлов
|
||
for (const node of registry) {
|
||
// Перебор узлов в буфере реестра
|
||
|
||
// Защита от повторной обработки узла
|
||
if (involved.has(node)) continue;
|
||
|
||
// Инициализация вектора между узлами
|
||
let between;
|
||
|
||
// Инициализация максимального количества итераций
|
||
let iterations = 30;
|
||
|
||
function move() {
|
||
if (++node.iteration >= node.limit) {
|
||
// Превышено ограничение по числу итераций
|
||
|
||
// Сброс счётчика итераций
|
||
node.iteration = 0;
|
||
|
||
// Отмена выполнения
|
||
return;
|
||
}
|
||
|
||
// Инициализация универсального буфера
|
||
let buffer;
|
||
|
||
// Инициализация координат целевого узла
|
||
let x1 =
|
||
(isNaN((buffer = parseInt(node.element.style.left))) ? 0 : buffer) +
|
||
node.element.offsetWidth / 2;
|
||
let y1 =
|
||
(isNaN((buffer = parseInt(node.element.style.top))) ? 0 : buffer) +
|
||
node.element.offsetHeight / 2;
|
||
|
||
// Инициализация координат обрабатываемого узла
|
||
let x2 =
|
||
(isNaN((buffer = parseInt(_this.element.style.left)))
|
||
? 0
|
||
: buffer) +
|
||
_this.element.offsetWidth / 2;
|
||
let y2 =
|
||
(isNaN((buffer = parseInt(_this.element.style.top))) ? 0 : buffer) +
|
||
_this.element.offsetHeight / 2;
|
||
|
||
// Реинициализация вектора между узлами
|
||
between = new Victor(x1 - x2, y1 - y2);
|
||
|
||
// Инициализация увеличения
|
||
let increase =
|
||
(node.diameter + _this.diameter) /
|
||
2 ** (_this.increase + node.increase);
|
||
|
||
// Узлы преодолели расстояние отталкивания?
|
||
if (
|
||
!node.actions.pushing ||
|
||
between.length() >
|
||
(node.diameter + _this.diameter) / 2 +
|
||
distance +
|
||
increase +
|
||
(typeof add === "number" ? add : 0) ||
|
||
--iterations <= 0
|
||
)
|
||
return;
|
||
|
||
// Инициализация координат вектора (узла с которым произошло столкновение)
|
||
let vector = new Victor(x1, y1)
|
||
.add(new Victor(between.x, between.y).norm().unfloat())
|
||
.subtract(
|
||
new Victor(
|
||
node.element.offsetWidth / 2,
|
||
node.element.offsetHeight / 2
|
||
)
|
||
);
|
||
|
||
if (node.actions.pushing) {
|
||
// Активно притягивание узла
|
||
|
||
// Запрещение столкновения, притягивания и отталкивания целевого узла и обрабатываемого узла (другими узлами)
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = _this.actions.collision = _this.actions.pushing = _this.actions.pulling = false;
|
||
|
||
// Запись узлов в реестр задействованных узлов
|
||
involved.add(_this);
|
||
|
||
// Перемещение узла
|
||
node.move(vector.x, vector.y, involved, involved, involved);
|
||
|
||
// Разрешение столкновения, притягивания и отталкивания целевого узла и обрабатываемого узла (другими узлами)
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = _this.actions.collision = _this.actions.pushing = _this.actions.pulling = true;
|
||
}
|
||
|
||
// Проверка расстояния
|
||
if (
|
||
node.actions.pushing &&
|
||
between.length() <=
|
||
(node.diameter + _this.diameter) / 2 +
|
||
distance +
|
||
increase +
|
||
(typeof add === "number" ? add : 0)
|
||
)
|
||
setTimeout(move, between.length() / 100);
|
||
}
|
||
|
||
// Повторная обработка (вход в рекурсию)
|
||
if (node.actions.pushing) move();
|
||
}
|
||
}
|
||
|
||
pulling(nodes, involved, add) {
|
||
// Инициализация буфера реестра узлов
|
||
const registry = new Set(nodes);
|
||
|
||
// Удаление текущего узла из буфера
|
||
registry.delete(this);
|
||
|
||
// Инициализация ссылки на ядро
|
||
const _this = this;
|
||
|
||
// Увеличение дистанции для проверки
|
||
const distance = 150;
|
||
|
||
// Обработка притягивания узлов
|
||
for (const node of registry) {
|
||
// Перебор узлов в буфере реестра
|
||
|
||
// Защита от повторной обработки узла
|
||
if (involved.has(node)) continue;
|
||
|
||
// Инициализация вектора между узлами
|
||
let between;
|
||
|
||
// Инициализация максимального количества итераций
|
||
let iterations = 30;
|
||
|
||
function move() {
|
||
if (++_this.iteration >= _this.limit) {
|
||
// Превышено ограничение по числу итераций
|
||
|
||
// Сброс счётчика итераций
|
||
_this.iteration = 0;
|
||
|
||
// Конец выполнения
|
||
return;
|
||
}
|
||
|
||
if (++node.iteration >= node.limit) {
|
||
// Превышено ограничение по числу итераций
|
||
|
||
// Сброс счётчика итераций
|
||
node.iteration = 0;
|
||
|
||
// Конец выполнения
|
||
return;
|
||
}
|
||
|
||
// Инициализация универсального буфера
|
||
let buffer;
|
||
|
||
// Инициализация координат целевого узла
|
||
let x1 =
|
||
(isNaN((buffer = parseInt(node.element.style.left))) ? 0 : buffer) +
|
||
node.element.offsetWidth / 2;
|
||
let y1 =
|
||
(isNaN((buffer = parseInt(node.element.style.top))) ? 0 : buffer) +
|
||
node.element.offsetHeight / 2;
|
||
|
||
// Инициализация координат обрабатываемого узла
|
||
let x2 =
|
||
(isNaN((buffer = parseInt(_this.element.style.left)))
|
||
? 0
|
||
: buffer) +
|
||
_this.element.offsetWidth / 2;
|
||
let y2 =
|
||
(isNaN((buffer = parseInt(_this.element.style.top))) ? 0 : buffer) +
|
||
_this.element.offsetHeight / 2;
|
||
|
||
// Реинициализация вектора между узлами
|
||
between = new Victor(x1 - x2, y1 - y2);
|
||
|
||
// Инициализация увеличения
|
||
let increase =
|
||
(node.diameter + _this.diameter) /
|
||
2 ** (_this.increase + node.increase);
|
||
|
||
// Узлы преодолели расстояние притягивания?
|
||
if (
|
||
!node.actions.pulling ||
|
||
between.length() <=
|
||
(node.diameter + _this.diameter) / 2 +
|
||
distance +
|
||
increase +
|
||
(typeof add === "number" ? add : 0) ||
|
||
--iterations <= 0
|
||
)
|
||
return;
|
||
|
||
// Инициализация координат вектора (узла с которым произошло столкновение)
|
||
let vector = new Victor(x1, y1)
|
||
.add(new Victor(between.x, between.y).norm().invert().unfloat())
|
||
.subtract(
|
||
new Victor(
|
||
node.element.offsetWidth / 2,
|
||
node.element.offsetHeight / 2
|
||
)
|
||
);
|
||
|
||
if (node.actions.pulling) {
|
||
// Активно притягивание узлов
|
||
|
||
// Запрещение столкновения, притягивания и отталкивания целевого узла и обрабатываемого узла (другими узлами)
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = _this.actions.collision = _this.actions.pushing = _this.actions.pulling = false;
|
||
|
||
// Запись узлов в реестр задействованных узлов
|
||
involved.add(_this);
|
||
|
||
// Перемещение узла
|
||
node.move(vector.x, vector.y, involved, involved, involved);
|
||
|
||
// Разрешение столкновения, притягивания и отталкивания целевого узла и обрабатываемого узла (другими узлами)
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = _this.actions.collision = _this.actions.pushing = _this.actions.pulling = true;
|
||
}
|
||
|
||
if (
|
||
node.actions.pulling &&
|
||
between.length() >
|
||
(node.diameter + _this.diameter) / 2 +
|
||
distance +
|
||
increase +
|
||
(typeof add === "number" ? add : 0)
|
||
)
|
||
return setTimeout(
|
||
move,
|
||
between.length() / 10 - between.length() / 10
|
||
);
|
||
}
|
||
|
||
// Повторная обработка (вход в рекурсию)
|
||
if (node.actions.pulling) move();
|
||
}
|
||
}
|
||
|
||
configure(attribute) {
|
||
// Инициализация названия параметра
|
||
const parameter = (/^data-graph-(\w+)$/.exec(attribute) ?? [, null])[1];
|
||
|
||
if (typeof parameter === "string") {
|
||
// Параметр найден
|
||
|
||
// Проверка на разрешение изменения
|
||
if (this.#block.has(parameter)) return;
|
||
|
||
// Инициализация значения параметра
|
||
const value = this.element.getAttribute(attribute);
|
||
|
||
if (typeof value !== undefined || typeof value !== null) {
|
||
// Найдено значение
|
||
|
||
// Запрошено изменение координаты: x
|
||
if (parameter === "x") this.element.style.left = value + "px";
|
||
|
||
// Запрошено изменение координаты: y
|
||
if (parameter === "y") this.element.style.top = value + "px";
|
||
|
||
// Инициализация буфера для временных данных
|
||
let buffer;
|
||
|
||
// Запись параметра
|
||
this[parameter] = isNaN((buffer = parseFloat(value)))
|
||
? value === "true"
|
||
? true
|
||
: value === "false"
|
||
? false
|
||
: value
|
||
: buffer;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// Класс узла
|
||
get node() {
|
||
return this.#node;
|
||
}
|
||
|
||
// Класс соединения
|
||
#connection = class connection {
|
||
// HTML-элемент
|
||
#element;
|
||
|
||
// HTML-элемент
|
||
get element() {
|
||
return this.#element;
|
||
}
|
||
|
||
// Инстанция node от которой начинается соединение
|
||
#from;
|
||
|
||
// Инстанция node от которой начинается соединение
|
||
get from() {
|
||
return this.#from;
|
||
}
|
||
|
||
// Инстанция node на которой заканчивается соединение
|
||
#to;
|
||
|
||
// Инстанция node на которой заканчивается соединение
|
||
get to() {
|
||
return this.#to;
|
||
}
|
||
|
||
// Оператор
|
||
#operator;
|
||
|
||
// Оператор
|
||
get operator() {
|
||
return this.#operator;
|
||
}
|
||
|
||
constructor(operator, from, to) {
|
||
// Запись свойства
|
||
this.#operator = operator;
|
||
|
||
// Запись свойства
|
||
this.#from = from;
|
||
|
||
// Запись свойства
|
||
this.#to = to;
|
||
|
||
// Инициализация оболочки
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.id = operator.connections.size;
|
||
svg.classList.add("connection");
|
||
svg.setAttribute("data-from", from.element.id);
|
||
svg.setAttribute("data-to", to.element.id);
|
||
|
||
// Инициализация универсального буфера
|
||
let buffer;
|
||
|
||
// Инициализация оболочки
|
||
const line = document.createElementNS(
|
||
"http://www.w3.org/2000/svg",
|
||
"line"
|
||
);
|
||
line.setAttribute(
|
||
"x1",
|
||
(isNaN((buffer = parseInt(from.element.style.left))) ? 0 : buffer) +
|
||
from.element.offsetWidth / 2
|
||
);
|
||
line.setAttribute(
|
||
"y1",
|
||
(isNaN((buffer = parseInt(from.element.style.top))) ? 0 : buffer) +
|
||
from.element.offsetHeight / 2
|
||
);
|
||
line.setAttribute(
|
||
"x2",
|
||
(isNaN((buffer = parseInt(to.element.style.left))) ? 0 : buffer) +
|
||
to.element.offsetWidth / 2
|
||
);
|
||
line.setAttribute(
|
||
"y2",
|
||
(isNaN((buffer = parseInt(to.element.style.top))) ? 0 : buffer) +
|
||
to.element.offsetHeight / 2
|
||
);
|
||
line.setAttribute("stroke", "grey");
|
||
line.setAttribute("stroke-width", "8px");
|
||
|
||
// Запись свойства
|
||
this.#element = svg;
|
||
|
||
// Запись в оболочку
|
||
svg.append(line);
|
||
|
||
// Запись в документ
|
||
operator.shell.appendChild(svg);
|
||
}
|
||
|
||
/**
|
||
* Синхронизировать местоположение со связанным узлом
|
||
*
|
||
* @param {node} node Инстанция узла (связанного с соединением)
|
||
*/
|
||
sync(node) {
|
||
// Инициализация названий аттрибутов
|
||
let x = "x",
|
||
y = "y";
|
||
|
||
if (node === this.from) {
|
||
// Исходящее соединение
|
||
|
||
// Запись названий аттрибутов
|
||
x += 1;
|
||
y += 1;
|
||
} else if (node === this.to) {
|
||
// Входящее соединение
|
||
|
||
// Запись названий аттрибутов
|
||
x += 2;
|
||
y += 2;
|
||
} else return;
|
||
|
||
// Инициализация универсального буфера
|
||
let buffer;
|
||
|
||
// Запись отступа (координаты по горизонтали)
|
||
this.element.children[0].setAttribute(
|
||
x,
|
||
(isNaN((buffer = parseInt(node.element.style.left))) ? 0 : buffer) +
|
||
node.element.offsetWidth / 2
|
||
);
|
||
|
||
// Запись отступа (координаты по вертикали)
|
||
this.element.children[0].setAttribute(
|
||
y,
|
||
(isNaN((buffer = parseInt(node.element.style.top))) ? 0 : buffer) +
|
||
node.element.offsetHeight / 2
|
||
);
|
||
}
|
||
};
|
||
|
||
// Класс соединения
|
||
get connection() {
|
||
return this.#connection;
|
||
}
|
||
|
||
#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(onmousemove) {
|
||
// Запись нового отступа от лева
|
||
_this.shell.style.left = onmousemove.pageX - x + "px";
|
||
|
||
// Запись нового отступа от верха
|
||
_this.shell.style.top = onmousemove.pageY - y + "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(this, data);
|
||
|
||
// Инициализация ссылки на обрабатываемый объект
|
||
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 = 5000;
|
||
|
||
if (!_this.#camera) {
|
||
// Запрещено двигать камеру (оболочку)
|
||
|
||
// Инициализация координат
|
||
const n = node.element.getBoundingClientRect();
|
||
const s = _this.shell.getBoundingClientRect();
|
||
|
||
// Инициализация функции переноса узла
|
||
function move(onmousemove) {
|
||
// Запись обработки столкновений и отталкивания
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = false;
|
||
|
||
// Перемещение
|
||
node.move(
|
||
onmousemove.pageX -
|
||
(onmousedown.pageX - n.left + s.left + pageXOffset),
|
||
onmousemove.pageY -
|
||
(onmousedown.pageY - n.top + s.top + pageYOffset),
|
||
true,
|
||
true,
|
||
true
|
||
);
|
||
}
|
||
|
||
// Запись слушателя события: "перенос узла"
|
||
document.onmousemove = move;
|
||
}
|
||
|
||
// Конец переноса
|
||
node.element.onmouseup = function () {
|
||
// Очистка обработчиков событий
|
||
document.onmousemove = null;
|
||
node.element.onmouseup = null;
|
||
|
||
// Запись обработки столкновений и отталкивания
|
||
node.actions.collision = node.actions.pushing = node.actions.pulling = true;
|
||
|
||
// Позиционирование вместе остальными узлами
|
||
node.element.style.zIndex = null;
|
||
};
|
||
};
|
||
|
||
// Перещапись событий браузера (чтобы не дёргалось)
|
||
node.element.ondragstart = null;
|
||
}
|
||
|
||
// Запись в реестр
|
||
this.nodes.add(node);
|
||
|
||
return node;
|
||
}
|
||
};
|
||
|
||
connect = function (from, to) {
|
||
if (from instanceof this.node && to instanceof this.node) {
|
||
// Получены обязательные входные параметры в правильном типе
|
||
|
||
// Инициализация соединения
|
||
const connection = new this.connection(this, from, to);
|
||
|
||
// Запись соединений в реестры узлов
|
||
from.outputs.add(connection);
|
||
to.inputs.add(connection);
|
||
|
||
// Запись в реестр ядра
|
||
this.connections.add(connection);
|
||
|
||
// Реинициализация узла-получателя
|
||
to.init(1);
|
||
|
||
return connection;
|
||
}
|
||
};
|
||
}
|
||
|
||
document.dispatchEvent(
|
||
new CustomEvent("graph.loaded", {
|
||
detail: { graph }
|
||
})
|
||
);
|