Guest User

Войны v2

a guest
Aug 1st, 2026
95
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 29.61 KB | History | 0 0
  1. <!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Матрица v12.1 Timeline Fixed</title><style>*{box-sizing:border-box;margin:0;padding:0;user-select:none}body,html{width:100%;height:100%;overflow:hidden;margin:0;padding:0;background-color:#050508;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#e0e0e3;position:fixed}#canvas-container{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;overflow:hidden}canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%}#control-panel{position:absolute;top:15px;right:15px;z-index:10;background:rgba(10,10,18,.85);border:1px solid rgba(0,255,255,.2);border-radius:8px;padding:15px;width:280px;backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.5)}h3{font-size:13px;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;color:#00ffff;border-bottom:1px solid rgba(0,255,255,.2);padding-bottom:5px}.layer-item{display:flex;align-items:center;margin-bottom:8px;font-size:11px;cursor:pointer}.layer-item input{margin-right:10px;cursor:pointer;accent-color:#00ffff}.layer-color{width:8px;height:8px;border-radius:50%;margin-right:8px;display:inline-block}#info-widget{position:absolute;bottom:15px;left:15px;right:15px;z-index:10;background:rgba(5,5,10,.9);border:1px solid rgba(255,0,0,.3);border-radius:6px;padding:15px;pointer-events:none;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(10px);max-width:500px}#info-widget.active{opacity:1;pointer-events:auto}.node-title{font-size:17px;font-weight:700;margin-bottom:5px}.node-meta{font-size:10px;color:#88889d;text-transform:uppercase;margin-bottom:7px}.node-desc{font-size:12px;line-height:1.4;color:#cdd}@media(min-width:600px){#info-widget{right:auto;width:430px}}</style></head><body><div id="canvas-container"><canvas id="matrixCanvas"></canvas></div><div id="control-panel"><h3>Слои Шифрования</h3><div id="layers-list"></div></div><div id="info-widget"><div class="node-title" id="w-title">Узел</div><div class="node-meta" id="w-meta">Параметры</div><div class="node-desc" id="w-desc">Описание закодированных связей.</div></div><script>
  2.  
  3. /**
  4.  * ИНТЕРАКТИВНАЯ МАТРИЦА ВОЕННЫХ ЦИКЛОВ РОССИИ (v12.1)
  5.  * МЕТОДОЛОГИЯ И МАТЕМАТИЧЕСКИЕ МЕТОДЫ РАСЧЁТА ФРАКТАЛЬНЫХ СВЯЗЕЙ
  6.  *
  7.  * Базовая концепция: Поиск волновых и фрактальных закономерностей в хронологии
  8.  * исторических конфликтов России. Временные параметры (длительность в днях,
  9.  * часы сражений, структуры дат) выступают константами сжатия и проекции времени.
  10.  *
  11.  * --- СЛУЖЕБНЫЙ РЕГЛАМЕНТ 7 СЛОЕВ ШИФРОВАНИЯ ---
  12.  *
  13.  * СЛОЙ 1. Базовый код затяжных войн (Метод двузначных блоков)
  14.  * Алгоритм: Четырехзначное количество дней (\u0394t) длительного конфликта разбивается
  15.  * на два двузначных числовых индекса [AB] и [CD], которые жестко кодируют годы
  16.  * начала или окончания симметричных/предыдущих войн в системе.
  17.  * Математическая матрица: ВОВ (1418 дней) -> блоки 14 и 18 -> ПМВ (1914-1918 гг.).
  18.  *
  19.  * СЛОЙ 2. Шкала масштаба дат для коротких битв (Метод точечной развертки)
  20.  * Алгоритм: При длительности генерального сражения в 1 день, система переключает
  21.  * масштаб с продолжительности на саму дату. Четырехзначный год [ABCD] делится на
  22.  * блоки [AB] и [CD], формируя хронологические стрелки к будущим конфликтам. Часы
  23.  * активного боя (\u03c4) выступают как дополнительный маркер-индекс года следующего цикла.
  24.  * Математическая матрица: Куликовская битва (1380 год) -> блоки 13 и 80 -> стрелки
  25.  * к Заграничным походам (1813 г.) и Афганской войне (1980 г.). Время боя \u03c4 = 4 часа
  26.  * кодирует начало Русско-японской войны (1904 г.).
  27.  *
  28.  * СЛОЙ 3. Расширенный закон призрачного нуля (Метод тотального схлопывания пустоты)
  29.  * Алгоритм: Любой нуль в хронологической константе (на конце или в середине числа)
  30.  * рассматривается как непроявленное время или квантовая пустота интерфейса. Хронологическая
  31.  * гравитация полностью «схлопывает» нули, сближая стоящие рядом цифры. Многозначные
  32.  * числа сжимаются до трехзначных ядер или четырехзначных базовых констант, обнажая
  33.  * скрытые сквозные каналы и связывая «тупиковые» даты.
  34.  * Математическая матрица:
  35.  * 1. Схлопывание на конце: Кавказская война (17930 дней) -> сжатие до 1739 г. -> блоки 17 и 39
  36.  *    (революция 1917 г. и начало Второй мировой 1939 г.).
  37.  * 2. Схлопывание в середине: Полтава (1709 год) -> схлопывание медианы -> ядро 179 (прямая связь
  38.  *    с константой Кавказского фрактала 17930 дней).
  39.  * 3. Русско-японская война (1904 год) -> схлопывание векового нуля -> ядро 194 -> блоки 19 и 94
  40.  *    (выход на Первую Чеченскую кампанию 1994 г.).
  41.  * 4. Двойное схлопывание: Рубеж Будущего (2030 год) -> схлопывание двух нулей -> корневой код 23
  42.  *    (через Зеркало 32 резонирует с шагом Смутного времени).
  43.  *
  44.  * СЛОЙ 4. Закон Хроно-Зеркала (Реверсивный резонанс инверсии сил)
  45.  * Алгоритм: Двузначные хронологические блоки года кризисного узла подвергаются зеркальному
  46.  * отражению [XY] <-> [YX]. Это указывает на симметричный исторический процесс, инверсию
  47.  * геополитических сил или повторение глобального сценария на новом витке спирали.
  48.  * Математическая матрица: Смутное время (разгар кризиса, 1612 г.) -> блок 12 <-> зеркало 21
  49.  * (мост к XXI веку); Перестройка (1985 г.) -> блок 85 <-> зеркало 58 (Хрущевский излом 1958 г.).
  50.  *
  51.  * СЛОЙ 5. Константа Эквивалента Крови (Пространственно-временной сдвиг)
  52.  * Алгоритм: Хронологический остаток дней (\u0394t_ост), не укладывающийся в базовые сетки сжатия,
  53.  * формирует вектор циклического сдвига. Этот сдвиг задает либо точное количество лет до начала
  54.  * следующей фазы скрытого противостояния, либо географические координаты прокси-столкновений.
  55.  * Математическая матрица: Полтава (Северная война, 7665 дней) -> базовый блок 76 через Зеркало
  56.  * дает 67 (Холодная война, 1967 г.), а остаток 65 проецирует Вьетнамский сдвиг (1965 г.).
  57.  *
  58.  * СЛОЙ 6. Сингулярность Золотого Корня (Вектор Экзистенциального Выбора)
  59.  * Алгоритм: Управляет исключительно корневой точкой основания системы — 862 годом. Действует
  60.  * через сумму цифр года (\u2211) для определения шага фрактальной сетки, а также через квантование
  61.  * пространства по коэффициенту Золотого Сечения (\u03a6 = 1.618 или циклическая константа 2.36).
  62.  * Математическая матрица: 862 г. -> \u2211(8+6+2)=16 -> маркер Смуты (1612 г.) и ПМВ (1916 г.).
  63.  * Шаг Золотого сечения: 862 * 2.3607 = 2035 год (завершающий стратегический рубеж Будущего).
  64.  *
  65.  * СЛОЙ 7. Интерференция Календарных Резонансов (Волновой канал совпадения дат)
  66.  * Алгоритм: Возникает при точном совпадении календарных координат (День + Месяц) или астрономических
  67.  * экстремумов (солнцестояния/равноденствия) между конфликтами, разделенными веками. Генерирует
  68.  * сквозной бирюзовый канал связи, удваивающий амплитуду исторического пульса в точках наложения.
  69.  * Математическая матрица: Алый узел текущего конфликта (2022 год) -> блок 22 -> вековой резонанс
  70.  * с образованием СССР (1922 г.). Начало ВОВ (22 июня) <-> Манифест о победе 1812 г. (декабрь, солнцестояния).
  71.  */
  72.  
  73.  
  74.  
  75.  
  76. // === ВСТАВЬТЕ JSON СЮДА ===
  77. let HISTORY_MATRIX_DATA =
  78. {
  79.   "nodes": [
  80.     { "id": "root_862", "label": "862", "name": "Золотой Корень Руси", "x": 60, "y": 250, "size": 11, "color": "#f39c12", "meta": "Слой 6 • Константа: 862 -> ∑16 -> x2.36", "desc": "Базовая сингулярность системы. Расчетные параметры:\n1. Сумма цифр: 8 + 6 + 2 = 16. Числовой маркер Смутного времени (1612) и ПМВ (1916).\n2. Шаг фрактала: 862 * 2 = 1724 (Финал Первой Империи).\n3. Золотое сечение цикла: 862 * 2.3607 = 2035 год (Финал контура Будущего)." },
  81.     { "id": "peipus_1242", "label": "1242", "name": "Ледовое побоище", "x": 160, "y": 130, "size": 7, "meta": "Слой 2 и 7: Резонанс Дат", "desc": "Короткая экзистенциальная битва. Календарный резонанс по дням месяца и тактическому сценарию с оборонительными операциями ВОВ." },
  82.     { "id": "kulikovo_1380", "label": "1380", "name": "Куликовская битва", "x": 240, "y": 210, "size": 8, "meta": "Слой 2 • Блоки: 13-80 + 4 часа", "desc": "Масштаб коротких битв. Расчетные параметры:\n1. Разбивка года: 13 и 80. Стрелки-индексы к Заграничным походам (1813 год) и Афганской войне (1980 год).\n2. Часы активного боя: 4 часа кодируют точку начала Русско-японской войны (1904 год)." },
  83.     { "id": "smuta_1612", "label": "1612", "name": "Смутное время", "x": 340, "y": 320, "size": 8, "meta": "Слой 4 • Зеркало: 12 <-> 21", "desc": "Хроно-Зеркало инверсии сил. Финал Смуты — 1612 год. Двузначный блок 12 зеркально отражается в число 21. Создает прямой реверсивный мост связи между кризисом XVII века и геополитическими событиями XXI века (узел 2022 года)." },
  84.     { "id": "poltava_1709", "label": "1709", "name": "Полтавская битва", "x": 420, "y": 90, "size": 8, "meta": "Слой 3 • Внутренний нуль: 17[0]9 -> 179", "desc": "Расширенный закон призрачного нуля. Схлопывание внутренней вековой пустоты в годе 1709 обнажает трехзначное ядро 179. Рождает сквозную константу и прямой силовой мост к началу Кавказского фрактала (длительность 17930 дней)." },
  85.     { "id": "turk_1739", "label": "1739", "name": "Русско-турецкая", "x": 460, "y": 280, "size": 7, "meta": "Слой 3 • Сжатие: 17930 дней -> 1739", "desc": "Закон призрачного нуля на базе Кавказской войны. Пятизначная длительность в 17930 дней схлопывает конечный нуль и сжимается до константы 1739. Результат:\n1. Точный выход на год финала Русско-турецкой войны (1739).\n2. Деление на блоки 17 и 39 проецирует революцию 1917 г. и начало Второй мировой в 1939 г." },
  86.     { "id": "seven_1756", "label": "1756", "name": "Семилетняя война", "x": 500, "y": 190, "size": 7, "meta": "Слой 1 • Блоки: 17-56 -> 1812", "desc": "Код коалиционных затяжных войн. Математический шаг длительности и параметров дат связывает этот узел с началом масштабного противостояния европейских коалиций против России в цикле Отечественной войны 1812 года." },
  87.     { "id": "napoleon_1812", "label": "1812", "name": "Отечественная 1812", "x": 560, "y": 140, "size": 8, "meta": "Слой 7 • Константа: 25.12 <-> 22.06", "desc": "Календарный резонанс экстремумов. Манифест о победе над Наполеоном подписан 25 декабря (зимнее солнцестояние). Создает зеркальный волновой канал с точкой начала ВОВ 22 июня (летнее солнцестояние)." },
  88.     { "id": "crimea_1853", "label": "1853", "name": "Крымская война", "x": 600, "y": 380, "size": 7, "meta": "Слой 1 • Блоки: 18-53 -> 111 лет", "desc": "Фрактал технологического сдерживания. Длительность обороны Севастополя (349 дней) и общая хронология кампании создают циклы повторения в фазах Холодной войны через 111-летние интервалы." },
  89.     { "id": "rusjp_1904", "label": "1904", "name": "Русско-японская", "x": 660, "y": 220, "size": 7, "meta": "Слой 3 • Внутренний нуль: 19[0]4 -> 194", "desc": "Расширенный закон призрачного нуля. Схлопывание вековой пустоты превращает 1904 год в код 194. Блоки 19 и 94 (зеркало 49) запускают прямой волновой канал к Первой Чеченской кампании (1994) и началу ВОВ (1941 через сдвиги)." },
  90.     { "id": "ww1_1914", "label": "1914", "name": "Первая мировая", "x": 710, "y": 110, "size": 8, "meta": "Слой 1 • Код ВОВ: 1418 -> 1914", "desc": "Входной блок глобального кризиса. Год начала (1914) закодирован первыми двумя цифрами константы затяжного фрактала Великой Отечественной войны (1418 дней)." },
  91.     { "id": "ussr_1922", "label": "1922", "name": "Образование СССР", "x": 740, "y": 300, "size": 7, "color": "#e74c3c", "meta": "Слой 7 • Вековой резонанс: 1922 <-> 2022", "desc": "Столетний хронологический узел. Активируется в системе как точная проекция блока 22, взятого из параметров текущего конфликта 2022 года." },
  92.     { "id": "ww2_1939", "label": "1939", "name": "Вторая мировая", "x": 780, "y": 170, "size": 7, "meta": "Слой 3 • Код Кавказа: 17930 -> 39", "desc": "Выходной блок глобального кризиса. Год начала (1939) закодирован финальным двузначным блоком, полученным после схлопывания призрачного нуля Кавказской войны (17930 -> 1739)." },
  93.     { "id": "vov_1941", "label": "1941", "name": "Великая Отечественная", "x": 810, "y": 250, "size": 9, "color": "#e74c3c", "meta": "Генератор матрицы: 1418 дней", "desc": "Главный затяжной резонатор Матрицы. Число дней конфликта (1418) разбивается на блоки 14 и 18, полностью кодируя и разворачивая связи к годам начала и окончания Первой мировой войны (1914–1918)." },
  94.     { "id": "afghan_1970", "label": "1980", "name": "Афганская война", "x": 860, "y": 130, "size": 7, "meta": "Вектор: Блок Куликова 1380", "desc": "Развертка фрактала коротких битв. Узел разворачивается на временной оси в точке 1980 года, на которую прямо указывал финальный блок года Куликовской битвы (1380)." },
  95.     { "id": "chechen_1994", "label": "1994", "name": "Чеченские кампании", "x": 890, "y": 340, "size": 7, "meta": "Слой 4 • Зеркальный баланс через 1904", "desc": "Внутренний деструктурирующий цикл. Математически жестко соединен с Русско-японской войной через схлопывание ее внутреннего нуля (19[0]4 -> 194 -> блоки 19 и 94)." },
  96.     { "id": "covid_2020", "label": "2020", "name": "Фазовый переход", "x": 920, "y": 210, "size": 6, "meta": "Слой 7 • Код конфликта: блок 20", "desc": "Начало глобальной трансформации. Связан с алым узлом 2022 года через первый двузначный блок (20)." },
  97.     { "id": "ukr_2022", "label": "2022", "name": "Текущий конфликт", "x": 940, "y": 290, "size": 9, "color": "#ff3333", "contour": "current", "meta": "Алый узел • Блоки: 20 и 22", "desc": "Генератор связей настоящего времени. Год разбивается на блоки 20 и 22, протягивая жесткие линии к точке фазового перехода (2020) и столетнему вековому резонансу образования СССР (1922)." },
  98.     { "id": "future_2030", "label": "2030", "name": "Рубеж 2030", "x": 965, "y": 160, "size": 8, "color": "#bc3ff6", "contour": "future", "meta": "Слой 3 • Двойной нуль: 2[0]3[0] -> 23", "desc": "Первая фаза стратегического цикла Будущего. Схлопывание обоих призрачных нулей (в середине и конце) обнажает корневой код 23, который через Зеркало (32) выводит на циклический шаг Смутного времени." },
  99.     { "id": "future_2035", "label": "2035", "name": "Цикл 2035", "x": 985, "y": 240, "size": 8, "color": "#bc3ff6", "contour": "future", "meta": "Слой 6 • Золотое сечение: 862 * 2.36", "desc": "Завершение единого стратегического контура Будущего. Точка вычисляется как фрактальное умножение Золотого Корня 862 года на константу золотого сечения исторических циклов." }
  100.   ],
  101.   "links": [
  102.     { "source": "vov_1941", "target": "ww1_1914", "layer": 1 },
  103.     { "source": "kulikovo_1380", "target": "napoleon_1812", "layer": 2 },
  104.     { "source": "kulikovo_1380", "target": "afghan_1970", "layer": 2 },
  105.     { "source": "kulikovo_1380", "target": "rusjp_1904", "layer": 2 },
  106.     { "source": "turk_1739", "target": "ww2_1939", "layer": 3 },
  107.     { "source": "smuta_1612", "target": "ukr_2022", "layer": 4 },
  108.     { "source": "poltava_1709", "target": "crimea_1853", "layer": 5 },
  109.     { "source": "poltava_1709", "target": "turk_1739", "layer": 3 },
  110.     { "source": "rusjp_1904", "target": "chechen_1994", "layer": 3 },
  111.     { "source": "root_862", "target": "smuta_1612", "layer": 6 },
  112.     { "source": "root_862", "target": "ww1_1914", "layer": 6 },
  113.     { "source": "root_862", "target": "future_2035", "layer": 6 },
  114.     { "source": "ukr_2022", "target": "ussr_1922", "layer": 7 },
  115.     { "source": "ukr_2022", "target": "covid_2020", "layer": 7 },
  116.     { "source": "future_2030", "target": "ww2_1939", "layer": 1 },
  117.     { "source": "future_2030", "target": "vov_1941", "layer": 7 },
  118.     { "source": "peipus_1242", "target": "vov_1941", "layer": 7 },
  119.     { "source": "seven_1756", "target": "napoleon_1812", "layer": 1 },
  120.     { "source": "chechen_1994", "target": "covid_2020", "layer": 4 }
  121.   ]
  122. };
  123.  
  124.  
  125. // === КОНЕЦ ВСТАВКИ ===
  126.  
  127. const LAYER_CONFIG={1:{name:"1. Базовый код войн",color:"#3498db"},2:{name:"2. Масштаб коротких дат",color:"#f1c40f"},3:{name:"3. Призрачный нуль",color:"#e67e22"},4:{name:"4. Хроно-Зеркало",color:"#9b59b6"},5:{name:"5. Эквивалент Крови",color:"#e74c3c"},6:{name:"6. Сингулярность Корня",color:"#2ecc71"},7:{name:"7. Календарный Резонанс",color:"#00ffff"}};const canvas=document.getElementById("matrixCanvas");const ctx=canvas.getContext("2d");const layersList=document.getElementById("layers-list");let width=canvas.width=window.innerWidth,height=canvas.height=window.innerHeight;let transform={x:0,y:0,scale:1},isDragging=false,startPan={x:0,y:0},initialPinchDist=null,initialScale=1,activeNode=null,enabledLayers={1:true,2:true,3:true,4:true,5:true,6:true,7:true};function initLayersUI(){layersList.innerHTML="";Object.keys(LAYER_CONFIG).forEach(e=>{const t=document.createElement("div");t.className="layer-item";t.innerHTML=`<input type="checkbox" id="layer-${e}" ${enabledLayers[e]?"checked":""}><span class="layer-color" style="background-color: ${LAYER_CONFIG[e].color}"></span><label for="layer-${e}">${LAYER_CONFIG[e].name}</label>`;layersList.appendChild(t);t.querySelector("input").addEventListener("change",t=>{enabledLayers[e]=t.target.checked})})}let nodes=[],links=[];function initGraph(){if(HISTORY_MATRIX_DATA){nodes=HISTORY_MATRIX_DATA.nodes;links=HISTORY_MATRIX_DATA.links;resetView()}}function resetView(){transform.scale=Math.min(width/1100,height/600);transform.x=(width-1000*transform.scale)/2;transform.y=(height-500*transform.scale)/2}let globalPulse=0;function drawGrid(){ctx.save();ctx.strokeStyle="rgba(255,255,255,0.012)";ctx.lineWidth=1;let e=50*transform.scale;let t=transform.x%e;let i=transform.y%e;for(let n=t;n<width;n+=e){ctx.beginPath();ctx.moveTo(n,0);ctx.lineTo(n,height);ctx.stroke()}for(let n=i;n<height;n+=e){ctx.beginPath();ctx.moveTo(0,n);ctx.lineTo(width,n);ctx.stroke()}ctx.restore()}function drawTimeline(){ctx.save();let startX=0,endX=1000,yPos=460;ctx.beginPath();ctx.moveTo(startX,yPos);ctx.lineTo(endX,yPos);ctx.strokeStyle="rgba(0,255,255,0.15)";ctx.lineWidth=1;ctx.stroke();let centuries=[{yr:900,txt:"IX в."},{yr:1100,txt:"XI в."},{yr:1300,txt:"XIII в."},{yr:1500,txt:"XV в."},{yr:1700,txt:"XVII в."},{yr:1900,txt:"XIX в."},{yr:2000,txt:"XX в."},{yr:2035,txt:"XXI в."}];centuries.forEach(c=>{let tX=60+(c.yr-862)*(925/(2035-862));ctx.beginPath();ctx.moveTo(tX,yPos-4);ctx.lineTo(tX,yPos+4);ctx.strokeStyle="rgba(0,255,255,0.3)";ctx.stroke();ctx.fillStyle="rgba(136,136,157,0.6)";ctx.font="9px sans-serif";ctx.textAlign="center";ctx.fillText(c.txt,tX,yPos+16)});ctx.restore()}function draw(){ctx.clearRect(0,0,width,height);globalPulse+=0.04;drawGrid();ctx.save();ctx.translate(transform.x,transform.y);ctx.scale(transform.scale,transform.scale);drawTimeline();links.forEach(e=>{if(!enabledLayers[e.layer])return;let t=nodes.find(t=>t.id===e.source),i=nodes.find(t=>t.id===e.target);if(!t||!i)return;let n=activeNode&&(activeNode.id===t.id||activeNode.id===i.id);ctx.beginPath();ctx.moveTo(t.x,t.y);let a=(t.x+i.x)/2,s=(t.y+i.y)/2-0.12*(i.x-t.x);ctx.quadraticCurveTo(a,s,i.x,i.y);ctx.strokeStyle=LAYER_CONFIG[e.layer].color;if(activeNode){ctx.lineWidth=n?2.5:0.3;ctx.shadowBlur=n?10:0;ctx.shadowColor=LAYER_CONFIG[e.layer].color;ctx.strokeStyle=n?LAYER_CONFIG[e.layer].color:"rgba(40,40,60,0.05)"}else{ctx.lineWidth=1.2}ctx.stroke()});ctx.shadowBlur=0;nodes.forEach(e=>{let t=24,i=e.color||"#34495e",n=activeNode&&activeNode.id===e.id;ctx.save();ctx.translate(e.x,e.y);if("future"===e.contour){i="#bc3ff6"}else if("current"===e.contour){i="#ff3333"}"root_862"===e.id&&(i="#f39c12");ctx.beginPath();ctx.arc(0,0,t,0,2*Math.PI);ctx.fillStyle="rgba(5,5,10,0.95)";ctx.fill();ctx.lineWidth=n?3:1.5;ctx.strokeStyle=n?"#00ffff":i;ctx.shadowBlur=n?12:4;ctx.shadowColor=n?"#00ffff":i;ctx.stroke();ctx.shadowBlur=0;ctx.textAlign="center";ctx.fillStyle=n?"#00ffff":"#e0e0e3";ctx.font=n?"bold 11px sans-serif":"10px sans-serif";ctx.fillText(e.label,0,-4);ctx.fillStyle=n?"#ffffff":"#88889d";ctx.font="7px sans-serif";let a=e.name;if(a.length>14){ctx.fillText(a.substring(0,12)+"..",0,6)}else{ctx.fillText(a,0,6)}if(n){ctx.fillStyle="#00ffff";ctx.font="9px monospace";ctx.fillText("["+e.meta+"]",0,-t-10)}ctx.restore()});ctx.restore()}function getCanvasMousePos(e){let t=e.touches&&e.touches.length?e.touches[0].clientX:e.clientX;let i=e.touches&&e.touches.length?e.touches[0].clientY:e.clientY;return{x:(t-transform.x)/transform.scale,y:(i-transform.y)/transform.scale}}function handleTap(e){let t=null;for(let i of nodes){let n=i.x-e.x,a=i.y-e.y;if(Math.sqrt(n*n+a*a)<28){t=i;break}}const i=document.getElementById("info-widget");if(t){activeNode=t;document.getElementById("w-title").innerText=t.name+" ("+t.label+")";document.getElementById("w-meta").innerText=t.meta||"Параметры не указаны";document.getElementById("w-desc").innerText=t.desc||"";i.classList.add("active")}else{activeNode=null;i.classList.remove("active")}}function initInteractions(){window.addEventListener("mousedown",e=>{if(e.target.closest("#control-panel")||e.target.closest("#info-widget"))return;isDragging=true;startPan={x:e.clientX-transform.x,y:e.clientY-transform.y}});window.addEventListener("mousemove",e=>{if(isDragging){transform.x=e.clientX-startPan.x;transform.y=e.clientY-startPan.y}});window.addEventListener("mouseup",e=>{if(!isDragging)return;isDragging=false;let t=getCanvasMousePos(e);if(Math.sqrt(Math.pow(e.clientX-(startPan.x+transform.x),2)+Math.pow(e.clientY-(startPan.y+transform.y),2))<5)handleTap(t)});window.addEventListener("wheel",e=>{let t=getCanvasMousePos(e),i=e.deltaY<0?1.1:0.9,n=transform.scale*i;if(n<0.15||n>5)return;transform.x=e.clientX-t.x*n;transform.y=e.clientY-t.y*n;transform.scale=n});canvas.addEventListener("touchstart",e=>{if(e.touches.length===1){isDragging=true;startPan={x:e.touches[0].clientX-transform.x,y:e.touches[0].clientY-transform.y}}else if(e.touches.length===2){isDragging=false;initialPinchDist=Math.hypot(e.touches[1].clientX-e.touches[0].clientX,e.touches[1].clientY-e.touches[0].clientY);initialScale=transform.scale}});canvas.addEventListener("touchmove",e=>{if(isDragging&&e.touches.length===1){transform.x=e.touches[0].clientX-startPan.x;transform.y=e.touches[0].clientY-startPan.y}else if(e.touches.length===2&&initialPinchDist){let t=Math.hypot(e.touches[1].clientX-e.touches[0].clientX,e.touches[1].clientY-e.touches[0].clientY),i=t/initialPinchDist,n=initialScale*i;if(n>0.1&&n<4){let a=(e.touches[0].clientX+e.touches[1].clientX)/2,s=(e.touches[0].clientY+e.touches[1].clientY)/2,r={x:(a-transform.x)/transform.scale,y:(s-transform.y)/transform.scale};transform.scale=n;transform.x=a-r.x*transform.scale;transform.y=s-r.y*transform.scale}}});canvas.addEventListener("touchend",e=>{if(isDragging){isDragging=false;if(e.changedTouches.length>0){let t=getCanvasMousePos(e.changedTouches[0]);handleTap(t)}}initialPinchDist=null})}function loop(){draw();requestAnimationFrame(loop)}window.addEventListener("resize",()=>{width=canvas.width=window.innerWidth;height=canvas.height=window.innerHeight;resetView();window.scrollTo(0,0)});window.loadMatrixData=function(e){HISTORY_MATRIX_DATA=e;initGraph()};initLayersUI();initInteractions();loop();if(HISTORY_MATRIX_DATA)window.loadMatrixData(HISTORY_MATRIX_DATA);</script></body></html>
  128.  
Advertisement
Add Comment
Please, Sign In to add comment