SHA256
520 lines
19 KiB
JavaScript
520 lines
19 KiB
JavaScript
import { renderHeader } from '../components/header.js';
|
|
import { authService, state } from '../state.js';
|
|
import { makeProfileRoute } from '../services/shine-routes.js';
|
|
import { makeProfileLinksRoute } from '../services/shine-routes.js';
|
|
import { createForceGraph } from './network/force-graph.js';
|
|
import { engineModelFromGraphModel } from './network/adapter.js';
|
|
import { openNodeMenu } from './network/node-menu.js';
|
|
import { userDisplayName } from '../services/user-display.js';
|
|
|
|
export const pageMeta = { id: 'network-view', title: 'Связи' };
|
|
|
|
const GENDER_MALE = 'male';
|
|
const GENDER_FEMALE = 'female';
|
|
const GENDER_UNKNOWN = 'unknown';
|
|
|
|
function normalizeLogin(value) {
|
|
return String(value || '').trim();
|
|
}
|
|
|
|
function createDebounced(fn, delayMs = 2000) {
|
|
let timer = 0;
|
|
return (...args) => {
|
|
if (timer) window.clearTimeout(timer);
|
|
timer = window.setTimeout(() => fn(...args), delayMs);
|
|
};
|
|
}
|
|
|
|
function createHeaderSearchIcon() {
|
|
const ns = 'http://www.w3.org/2000/svg';
|
|
const svg = document.createElementNS(ns, 'svg');
|
|
svg.setAttribute('viewBox', '0 0 24 24');
|
|
svg.setAttribute('aria-hidden', 'true');
|
|
svg.setAttribute('class', 'header-icon-svg header-icon-svg--search');
|
|
|
|
const circle = document.createElementNS(ns, 'circle');
|
|
circle.setAttribute('cx', '11');
|
|
circle.setAttribute('cy', '11');
|
|
circle.setAttribute('r', '6.5');
|
|
circle.setAttribute('fill', 'none');
|
|
circle.setAttribute('stroke', 'currentColor');
|
|
circle.setAttribute('stroke-width', '2');
|
|
|
|
const handle = document.createElementNS(ns, 'path');
|
|
handle.setAttribute('d', 'M16 16l4.5 4.5');
|
|
handle.setAttribute('fill', 'none');
|
|
handle.setAttribute('stroke', 'currentColor');
|
|
handle.setAttribute('stroke-width', '2');
|
|
handle.setAttribute('stroke-linecap', 'round');
|
|
|
|
svg.append(circle, handle);
|
|
return svg;
|
|
}
|
|
|
|
function normKey(value) {
|
|
return normalizeLogin(value).toLowerCase();
|
|
}
|
|
|
|
function uniqueLogins(list) {
|
|
const out = [];
|
|
const seen = new Set();
|
|
(Array.isArray(list) ? list : []).forEach((item) => {
|
|
const login = normalizeLogin(item);
|
|
if (!login) return;
|
|
const key = normKey(login);
|
|
if (seen.has(key)) return;
|
|
seen.add(key);
|
|
out.push(login);
|
|
});
|
|
return out;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
return String(text || '')
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''');
|
|
}
|
|
|
|
function normalizeGender(value) {
|
|
const clean = String(value || '').trim().toLowerCase();
|
|
if (clean === GENDER_MALE) return GENDER_MALE;
|
|
if (clean === GENDER_FEMALE) return GENDER_FEMALE;
|
|
return GENDER_UNKNOWN;
|
|
}
|
|
|
|
function toSet(list) {
|
|
return new Set(uniqueLogins(list).map((value) => normKey(value)));
|
|
}
|
|
|
|
function hasLogin(setObj, login) {
|
|
return setObj.has(normKey(login));
|
|
}
|
|
|
|
function getMarkByLogin(allUsers) {
|
|
const map = new Map();
|
|
(Array.isArray(allUsers) ? allUsers : []).forEach((row) => {
|
|
const login = normalizeLogin(row?.login);
|
|
if (!login) return;
|
|
map.set(normKey(login), {
|
|
login,
|
|
firstName: String(row?.firstName || '').trim(),
|
|
lastName: String(row?.lastName || '').trim(),
|
|
displayName: userDisplayName({ login, firstName: row?.firstName, lastName: row?.lastName }),
|
|
relationType: String(row?.relationType || '').trim().toLowerCase(),
|
|
primaryConfirmed: Boolean(row?.primaryConfirmed),
|
|
shineConfirmed: Boolean(row?.shineConfirmed),
|
|
official: Boolean(row?.official),
|
|
shine: Boolean(row?.shine),
|
|
officialLabel: String(row?.officialLabel || (row?.official ? 'официальный' : 'неофициальный')),
|
|
shineLabel: String(row?.shineLabel || (row?.shine ? 'сияющий' : 'несияющий')),
|
|
avatar: normalizeAvatar(row),
|
|
});
|
|
});
|
|
return map;
|
|
}
|
|
|
|
function normalizeAvatar(row) {
|
|
const txFromAvatar = String(row?.avatar?.ar || '').trim();
|
|
if (txFromAvatar) return { ar: txFromAvatar };
|
|
const txFallback = String(row?.avatarTxId || '').trim();
|
|
if (txFallback) return { ar: txFallback };
|
|
return null;
|
|
}
|
|
|
|
function applyRelativeGender(map, rows) {
|
|
(Array.isArray(rows) ? rows : []).forEach((row) => {
|
|
const login = normalizeLogin(row?.login);
|
|
if (!login) return;
|
|
const key = normKey(login);
|
|
const gender = normalizeGender(row?.gender);
|
|
const prev = map.get(key) || GENDER_UNKNOWN;
|
|
if (prev === GENDER_UNKNOWN || gender !== GENDER_UNKNOWN) map.set(key, gender);
|
|
});
|
|
}
|
|
|
|
function getRelativeGenderMap(graph) {
|
|
const map = new Map();
|
|
// Родственные связи пока скрыты из UI, хотя сервер продолжает хранить их коды.
|
|
void graph;
|
|
return map;
|
|
}
|
|
|
|
function buildGraphModel(graph, centerLogin) {
|
|
const login = normalizeLogin(graph?.login || centerLogin || state.session.login);
|
|
const outFriends = toSet(graph?.outFriends);
|
|
const inFriends = toSet(graph?.inFriends);
|
|
const outCloseFriends = toSet(graph?.outCloseFriends);
|
|
const inCloseFriends = toSet(graph?.inCloseFriends);
|
|
const outParents = toSet(graph?.outParents);
|
|
const inParents = toSet(graph?.inParents);
|
|
const outChildren = toSet(graph?.outChildren);
|
|
const inChildren = toSet(graph?.inChildren);
|
|
const outSiblings = toSet(graph?.outSiblings);
|
|
const inSiblings = toSet(graph?.inSiblings);
|
|
const outSpouses = toSet(graph?.outSpouses);
|
|
const inSpouses = toSet(graph?.inSpouses);
|
|
// контакты/подписки/знакомые — для слоя «Все контакты» (Фаза 3)
|
|
const outContacts = toSet(graph?.outContacts);
|
|
const inContacts = toSet(graph?.inContacts);
|
|
const outFollows = toSet(graph?.outFollows);
|
|
const inFollows = toSet(graph?.inFollows);
|
|
const outOfficial = toSet(graph?.outOfficialAccounts);
|
|
const inOfficial = toSet(graph?.inOfficialAccounts);
|
|
|
|
const relativesGender = getRelativeGenderMap(graph);
|
|
const allMarks = getMarkByLogin(graph?.allUsers);
|
|
|
|
const allLogins = uniqueLogins([
|
|
...(graph?.outFriends || []),
|
|
...(graph?.inFriends || []),
|
|
...(graph?.outCloseFriends || []),
|
|
...(graph?.inCloseFriends || []),
|
|
...(graph?.outContacts || []),
|
|
...(graph?.inContacts || []),
|
|
...(graph?.outFollows || []),
|
|
...(graph?.inFollows || []),
|
|
...(graph?.outOfficialAccounts || []),
|
|
...(graph?.inOfficialAccounts || []),
|
|
]).filter((entry) => normKey(entry) !== normKey(login));
|
|
|
|
const relations = allLogins.map((targetLogin) => {
|
|
const friendOut = hasLogin(outFriends, targetLogin);
|
|
const friendIn = hasLogin(inFriends, targetLogin);
|
|
const closeFriendOut = hasLogin(outCloseFriends, targetLogin);
|
|
const closeFriendIn = hasLogin(inCloseFriends, targetLogin);
|
|
const contactOut = hasLogin(outContacts, targetLogin) || hasLogin(outFollows, targetLogin) || hasLogin(outOfficial, targetLogin);
|
|
const contactIn = hasLogin(inContacts, targetLogin) || hasLogin(inFollows, targetLogin) || hasLogin(inOfficial, targetLogin);
|
|
|
|
let role = 'contact';
|
|
if (closeFriendOut || closeFriendIn || friendOut || friendIn) role = 'friend';
|
|
|
|
let forward = role === 'friend' ? (closeFriendOut || friendOut) : contactOut;
|
|
let backward = role === 'friend' ? (closeFriendIn || friendIn) : contactIn;
|
|
|
|
return {
|
|
login: targetLogin,
|
|
key: normKey(targetLogin),
|
|
role,
|
|
isRelative: false,
|
|
gender: normalizeGender(relativesGender.get(normKey(targetLogin))),
|
|
forward: Boolean(forward),
|
|
backward: Boolean(backward),
|
|
mark: allMarks.get(normKey(targetLogin)) || null,
|
|
};
|
|
});
|
|
|
|
return {
|
|
centerLogin: login,
|
|
centerMark: allMarks.get(normKey(login)) || null,
|
|
relations,
|
|
};
|
|
}
|
|
|
|
let persistedCenterLogin = '';
|
|
let persistedCenterHistory = [];
|
|
|
|
export function render({ navigate, route, chrome } = {}) {
|
|
const keepHistory = String(route?.params?.mode || '').trim().toLowerCase() === 'keep-history';
|
|
const routeLogin = normalizeLogin(route?.params?.login || '');
|
|
if (!keepHistory) {
|
|
persistedCenterLogin = '';
|
|
persistedCenterHistory = [];
|
|
}
|
|
|
|
const screen = document.createElement('section');
|
|
screen.className = 'network-screen';
|
|
const appScreenEl = document.getElementById('app-screen');
|
|
appScreenEl?.classList.add('network-scroll-lock');
|
|
|
|
const stage = document.createElement('div');
|
|
stage.className = 'network-stage';
|
|
|
|
const board = document.createElement('div');
|
|
board.className = 'network-board network-board--full fg-stage';
|
|
|
|
let centerLogin = normalizeLogin(persistedCenterLogin || state.session.login || '');
|
|
let centerHistory = Array.isArray(persistedCenterHistory) ? [...persistedCenterHistory] : [];
|
|
let engine = null;
|
|
let loadSeq = 0;
|
|
|
|
// Фильтры слоёв (Фаза 3). Фокус всегда виден; предикат применяется к периферийным узлам.
|
|
const FILTERS = {
|
|
all: { label: 'Все', pred: () => true },
|
|
friends: { label: 'Друзья', pred: (n) => n.relationType === 'friend' || n.relationType === 'close_friend' },
|
|
shining: { label: 'Сияющие', pred: (n) => Boolean(n.shining) },
|
|
};
|
|
const FILTER_ORDER = ['all', 'friends', 'shining'];
|
|
let activeFilter = 'all';
|
|
const filterChips = {};
|
|
|
|
function applyFilter(key) {
|
|
if (!FILTERS[key]) return;
|
|
activeFilter = key;
|
|
FILTER_ORDER.forEach((k) => {
|
|
const el = filterChips[k];
|
|
if (el) el.classList.toggle('is-active', k === activeFilter);
|
|
});
|
|
if (engine) engine.setFilter(FILTERS[key].pred);
|
|
}
|
|
|
|
function profileInfoRoute(login) {
|
|
const cleanLogin = normalizeLogin(login);
|
|
if (!cleanLogin) return '';
|
|
if (normKey(cleanLogin) === normKey(state.session.login)) return 'profile-view';
|
|
return makeProfileRoute(cleanLogin);
|
|
}
|
|
|
|
function persistHistory() {
|
|
persistedCenterLogin = centerLogin;
|
|
persistedCenterHistory = [...centerHistory];
|
|
}
|
|
|
|
function syncLinksUrl(login, { push = false } = {}) {
|
|
const clean = normalizeLogin(login);
|
|
if (!clean) return;
|
|
const nextPath = `/${makeProfileLinksRoute(clean)}`;
|
|
if (window.location.pathname === nextPath) return;
|
|
if (push) window.history.pushState({}, '', nextPath);
|
|
else window.history.replaceState({}, '', nextPath);
|
|
}
|
|
|
|
|
|
|
|
function openSearchModal() {
|
|
const root = document.getElementById('modal-root');
|
|
if (!(root instanceof HTMLElement)) return;
|
|
root.innerHTML = `
|
|
<div class="modal" id="network-search-modal">
|
|
<div class="modal-card stack">
|
|
<button class="icon-btn" type="button" id="network-search-close" style="justify-self:end;">✕</button>
|
|
<h3 class="modal-title">Найти человека</h3>
|
|
<div class="row" style="gap:8px;">
|
|
<input class="input" id="network-search-input" type="text" maxlength="30" placeholder="Введите логин" />
|
|
<button class="primary-btn" type="button" id="network-search-run">Искать</button>
|
|
</div>
|
|
<div class="meta-muted" id="network-search-meta">Введите логин. Поиск начнётся автоматически через 2 секунды.</div>
|
|
<div class="stack" id="network-search-results"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const modal = root.querySelector('#network-search-modal');
|
|
const closeBtn = root.querySelector('#network-search-close');
|
|
const inputEl = root.querySelector('#network-search-input');
|
|
const runBtn = root.querySelector('#network-search-run');
|
|
const metaEl = root.querySelector('#network-search-meta');
|
|
const resultsEl = root.querySelector('#network-search-results');
|
|
if (!(modal instanceof HTMLElement) || !(inputEl instanceof HTMLInputElement) || !(resultsEl instanceof HTMLElement)) {
|
|
root.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
let selectedLogin = '';
|
|
let searchSeq = 0;
|
|
|
|
const close = () => {
|
|
root.innerHTML = '';
|
|
};
|
|
|
|
const applySelection = (login) => {
|
|
selectedLogin = normalizeLogin(login);
|
|
const rows = resultsEl.querySelectorAll('[data-candidate]');
|
|
rows.forEach((row) => {
|
|
if (!(row instanceof HTMLElement)) return;
|
|
row.classList.toggle('is-selected', String(row.dataset.candidate || '') === selectedLogin);
|
|
});
|
|
};
|
|
|
|
const renderCandidates = (logins) => {
|
|
const items = (Array.isArray(logins) ? logins : [])
|
|
.map((item) => normalizeLogin(item))
|
|
.filter(Boolean)
|
|
.slice(0, 5);
|
|
if (!items.length) {
|
|
resultsEl.innerHTML = '<div class="meta-muted">Кандидаты не найдены.</div>';
|
|
applySelection('');
|
|
return;
|
|
}
|
|
resultsEl.innerHTML = items.map((login) => (
|
|
`<button type="button" class="ghost-btn network-search-candidate" data-candidate="${escapeHtml(login)}">${escapeHtml(login)}</button>`
|
|
)).join('');
|
|
applySelection('');
|
|
};
|
|
|
|
const runSearch = async () => {
|
|
const query = normalizeLogin(inputEl.value);
|
|
if (!query) {
|
|
metaEl.textContent = 'Введите логин.';
|
|
renderCandidates([]);
|
|
return;
|
|
}
|
|
const reqId = ++searchSeq;
|
|
metaEl.textContent = `Поиск по «${query}»...`;
|
|
if (runBtn instanceof HTMLButtonElement) runBtn.disabled = true;
|
|
try {
|
|
const found = await authService.searchUsers(query);
|
|
if (reqId !== searchSeq) return;
|
|
renderCandidates(found);
|
|
const foundCount = Math.min(5, Array.isArray(found) ? found.length : 0);
|
|
metaEl.textContent = foundCount > 0
|
|
? `Найдено кандидатов: ${foundCount}. Выберите одного.`
|
|
: 'Кандидаты не найдены.';
|
|
} catch (error) {
|
|
if (reqId !== searchSeq) return;
|
|
renderCandidates([]);
|
|
metaEl.textContent = `Ошибка поиска: ${error?.message || 'unknown'}`;
|
|
} finally {
|
|
if (runBtn instanceof HTMLButtonElement) runBtn.disabled = false;
|
|
}
|
|
};
|
|
|
|
modal.addEventListener('click', (event) => {
|
|
if (event.target === modal) close();
|
|
});
|
|
closeBtn?.addEventListener('click', close);
|
|
runBtn?.addEventListener('click', () => { void runSearch(); });
|
|
const debouncedSearch = createDebounced(() => { void runSearch(); }, 2000);
|
|
inputEl.addEventListener('input', debouncedSearch);
|
|
inputEl.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
void runSearch();
|
|
}
|
|
});
|
|
resultsEl.addEventListener('click', (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLElement)) return;
|
|
const button = target.closest('[data-candidate]');
|
|
if (!(button instanceof HTMLElement)) return;
|
|
const nextLogin = String(button.dataset.candidate || '');
|
|
applySelection(nextLogin);
|
|
if (!nextLogin) return;
|
|
close();
|
|
void load(nextLogin, { pushHistory: true });
|
|
});
|
|
|
|
window.setTimeout(() => inputEl.focus(), 0);
|
|
}
|
|
|
|
function ensureEngine(model) {
|
|
if (engine) {
|
|
engine.setModel(model);
|
|
return;
|
|
}
|
|
engine = createForceGraph({
|
|
stage: board,
|
|
model,
|
|
// тап по периферийному узлу — только центрируем и загружаем его граф; нижней карточки больше нет
|
|
onNodeTap: (node) => { void load(node.login, { pushHistory: true }); },
|
|
// тап по центру — полноценный профиль
|
|
onCenterTap: (node) => {
|
|
const routeTo = profileInfoRoute(node.login);
|
|
if (routeTo) navigate(routeTo);
|
|
},
|
|
// долгое нажатие — контекстное меню (вне масштабируемого холста)
|
|
onNodeLongPress: (node, point) => {
|
|
const login = normalizeLogin(node.login);
|
|
openNodeMenu({
|
|
login,
|
|
displayName: String(node.name || '').trim(),
|
|
relationType: node.relationType,
|
|
point,
|
|
actions: [
|
|
{ label: 'Профиль', onClick: () => { const r = profileInfoRoute(login); if (r) navigate(r); } },
|
|
{ label: 'Написать', onClick: () => navigate(`chat/${encodeURIComponent(login)}`) },
|
|
],
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
async function load(nextCenterLogin = '', { pushHistory = false } = {}) {
|
|
const requestId = ++loadSeq;
|
|
const prevCenter = centerLogin;
|
|
const targetCenter = normalizeLogin(nextCenterLogin || prevCenter || state.session.login);
|
|
|
|
try {
|
|
const graph = await authService.getUserConnectionsGraph(targetCenter);
|
|
if (requestId !== loadSeq) return;
|
|
centerLogin = targetCenter;
|
|
if (pushHistory && prevCenter && normKey(prevCenter) !== normKey(targetCenter)) {
|
|
centerHistory.push(prevCenter);
|
|
}
|
|
syncLinksUrl(targetCenter, { push: pushHistory });
|
|
|
|
const graphModel = buildGraphModel(graph, targetCenter);
|
|
const engineModel = engineModelFromGraphModel(graphModel);
|
|
ensureEngine(engineModel);
|
|
// сохраняем выбранный фильтр при перестроении графа (центрирование/переход)
|
|
if (engine && activeFilter !== 'all') engine.setFilter(FILTERS[activeFilter].pred);
|
|
|
|
persistHistory();
|
|
} catch (error) {
|
|
if (requestId !== loadSeq) return;
|
|
window.alert(`Ошибка загрузки связей: ${error?.message || 'unknown'}`);
|
|
}
|
|
}
|
|
|
|
const header = renderHeader({
|
|
title: 'Связи',
|
|
rightActions: [
|
|
{
|
|
iconNode: createHeaderSearchIcon(),
|
|
title: 'Найти пользователя',
|
|
ariaLabel: 'Найти пользователя',
|
|
className: 'chat-header-icon-btn',
|
|
onClick: openSearchModal,
|
|
},
|
|
],
|
|
});
|
|
|
|
// Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
|
|
screen.cleanup = () => {
|
|
if (engine) engine.destroy();
|
|
engine = null;
|
|
appScreenEl?.classList.remove('network-scroll-lock');
|
|
};
|
|
|
|
if (routeLogin) {
|
|
centerLogin = routeLogin;
|
|
centerHistory = [];
|
|
persistHistory();
|
|
void load(centerLogin, { pushHistory: false });
|
|
} else if (keepHistory && centerLogin) {
|
|
void load(centerLogin, { pushHistory: false });
|
|
} else {
|
|
centerLogin = normalizeLogin(state.session.login || '');
|
|
centerHistory = [];
|
|
persistHistory();
|
|
if (centerLogin) {
|
|
void load(centerLogin, { pushHistory: false });
|
|
} else {
|
|
window.setTimeout(() => openSearchModal(), 0);
|
|
}
|
|
}
|
|
|
|
// Панель фильтров слоёв (оверлей под шапкой)
|
|
const filterBar = document.createElement('div');
|
|
filterBar.className = 'fg-filter-bar app-top-tabs';
|
|
// Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
|
|
// а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
|
|
filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
|
|
FILTER_ORDER.forEach((key) => {
|
|
const chip = document.createElement('button');
|
|
chip.type = 'button';
|
|
chip.className = `fg-filter-chip${key === activeFilter ? ' is-active' : ''}`;
|
|
chip.textContent = FILTERS[key].label;
|
|
chip.addEventListener('click', () => applyFilter(key));
|
|
filterChips[key] = chip;
|
|
filterBar.append(chip);
|
|
});
|
|
|
|
chrome?.setTopbar(header);
|
|
stage.append(board, filterBar);
|
|
screen.append(stage);
|
|
return screen;
|
|
}
|