@krainovsd/graph 0.8.4 → 0.10.0-rc1

package/lib/cjs/index.cjs

@@ -2,12 +2,203 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const d3Force = require('d3-force');
+const d3Zoom = require('d3-zoom');
 const jsHelpers = require('@krainovsd/js-helpers');
 const d3Array = require('d3-array');
-const d3Drag = require('d3-drag');
-const d3Force = require('d3-force');
 const d3Selection = require('d3-selection');
-const d3Zoom = require('d3-zoom');
+const d3Drag = require('d3-drag');
+const lodash = require('lodash');
+
+const FORCE_SETTINGS = {
+    forces: true,
+    centerForce: true,
+    chargeForce: true,
+    linkForce: true,
+    xForce: true,
+    yForce: true,
+    collideForce: true,
+    centerPosition: {},
+    centerStrength: 1,
+    collideStrength: 0.1,
+    collideAdditionalRadius: 4,
+    collideIterations: 2,
+    collideOffMax: { links: 0, nodes: 0 },
+    chargeStrength: -40,
+    chargeDistanceMax: Infinity,
+    chargeDistanceMin: 1,
+    xPosition: 0,
+    xStrength: 0.1,
+    yPosition: 0,
+    yStrength: 0.1,
+    linkDistance: 30,
+    linkIterations: 1,
+    linkStrength: 1,
+    collideRadius: null,
+};
+const GRAPH_SETTINGS = {
+    zoomExtent: [0.3, 10],
+    translateExtent: [[], []],
+    translateExtentEnable: true,
+    translateExtentCoefficient: [3, 3],
+    highlightUpFrames: 5,
+    highlightDownFrames: 5,
+    dragPlaceCoefficient: dragPlaceCoefficientGetter,
+    zoomInitial: null,
+    showDrawTime: true,
+    showDrawTimeEveryTick: false,
+};
+const NODE_SETTINGS = {
+    cache: true,
+    highlightByNodeOnlyRoot: true,
+    highlightByHoverNode: true,
+    nodeRadiusFlexible: true,
+    nodeSizeFlexible: true,
+    textNodeDebug: false,
+    highlightByNodeNodeFading: true,
+    highlightByNodeNodeColor: false,
+    highlightByNodeNodeSizing: true,
+    highlightByNodeTextFading: true,
+    highlightByNodeTextSizing: true,
+    highlightByLinkNodeFading: false,
+    highlightByLinkNodeColor: false,
+    highlightByLinkNodeSizing: true,
+    highlightByLinkTextFading: false,
+    highlightByLinkTextSizing: true,
+    nodeRadiusCoefficient: 5,
+    nodeRadiusFactor: 1,
+    nodeSizeCoefficient: 5,
+    nodeSizeFactor: 0.1,
+    highlightByNodeNodeSizingAdditional: 0.5,
+    highlightByLinkNodeSizingAdditionalCoefficient: 0.35,
+    highlightByNodeNodeColorFadingMin: 0.15,
+    highlightByNodeTextShiftXAdditional: 0,
+    highlightByNodeTextShiftYAdditional: 2,
+    highlightByNodeTextSizingAdditional: 1,
+    highlightByNodeTextWeightAdditional: 0,
+    highlightByNodeTextWidthAdditional: 10,
+    highlightByNodeNodeFadingMin: 0.21,
+    highlightByNodeTextFadingMin: 0.21,
+    highlightByLinkNodeSizingAdditional: 0.5,
+    highlightByNodeNodeSizingAdditionalCoefficient: 0.35,
+    highlightByLinkNodeColorFadingMin: 0.15,
+    highlightByLinkTextShiftXAdditional: 0,
+    highlightByLinkTextShiftYAdditional: 2,
+    highlightByLinkTextSizingAdditional: 1,
+    highlightByLinkTextWeightAdditional: 0,
+    highlightByLinkTextWidthAdditional: 10,
+    highlightByLinkNodeFadingMin: 0.21,
+    highlightByLinkTextFadingMin: 0.21,
+};
+const NODE_OPTIONS = {
+    shape: "text",
+    height: 10,
+    width: 15,
+    borderRadius: 0,
+    radius: 4,
+    alpha: 1,
+    textNodeXPadding: 5,
+    textNodeYPadding: 3,
+    borderWidth: 0.1,
+    borderColor: "#000000FF",
+    textAlpha: 1,
+    textWidth: 20,
+    textShiftX: 0,
+    textFont: "Arial",
+    textAlign: "center",
+    textColor: "#333",
+    textStyle: "normal",
+    textWeight: 500,
+    textGap: 0,
+};
+const LINK_SETTINGS = {
+    cache: true,
+    particles: true,
+    particleFlexSpeed: true,
+    pretty: true,
+    arrow: true,
+    highlightByHoverLink: true,
+    arrowByHighlight: true,
+    highlightByNodeLinkFading: true,
+    highlightByNodeArrowFading: true,
+    highlightByLinkLinkFading: false,
+    highlightByLinkArrowFading: false,
+    particleFlexSpeedCoefficient: 4,
+    hoverLinkThreshold: 2,
+    highlightByNodeLinkFadingMin: 0.21,
+    highlightByNodeArrowFadingMin: 0.21,
+    highlightByLinkArrowFadingMin: 0.21,
+    highlightByLinkLinkFadingMin: 0.21,
+};
+const LINK_OPTIONS = {
+    alpha: 1,
+    arrowAlpha: 1,
+    arrowSize: 2,
+    arrowBorderColor: "#000000FF",
+    arrowBorderWidth: 0.1,
+    particleAlpha: 1,
+    particleColor: "#000000FF",
+    particleBorderColor: "#000000FF",
+    particleBorderWidth: 0.1,
+    particleCount: 2,
+    particleRadius: 0.5,
+    particleSteps: 60,
+};
+const COMMON_SETTINGS = {
+    linkColorZoomFar: "#999",
+    linkColorZoomNear: "#000000FF",
+    linkWidthZoomFar: 1,
+    linkWidthZoomNear: 0.1,
+    linkWidthZoomBorder: 1,
+    linkColorZoomBorder: 1,
+    nodeTextScaleMin: 1.5,
+    nodeTextScaleMax: 20,
+    nodeTextSizeMin: 1.5,
+    nodeTextSizeMax: 3.5,
+    nodeTextShiftYMin: 2.5,
+    nodeTextShiftYMax: 4,
+    nodeTextChangeStepCount: 200,
+    nodeRadius: 5,
+    nodeSize: 5,
+};
+
+function forceSettingsGetter(settings, prevSettings) {
+    return {
+        ...(prevSettings ?? FORCE_SETTINGS),
+        ...settings,
+    };
+}
+
+function graphSettingsGetter(settings, prevSettings) {
+    return {
+        ...(prevSettings ?? GRAPH_SETTINGS),
+        ...settings,
+    };
+}
+
+function linkSettingsGetter(settings, prevSettings) {
+    return { ...(prevSettings ?? LINK_SETTINGS), ...settings };
+}
+function linkOptionsGetter(_, __, ___, state) {
+    return {
+        ...LINK_OPTIONS,
+        drawExtraLink: null,
+        drawLink: null,
+        color: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkColorZoomBorder
+            ? COMMON_SETTINGS.linkColorZoomNear
+            : COMMON_SETTINGS.linkColorZoomFar,
+        arrowColor: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkColorZoomBorder
+            ? COMMON_SETTINGS.linkColorZoomNear
+            : COMMON_SETTINGS.linkColorZoomFar,
+        width: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkWidthZoomBorder
+            ? COMMON_SETTINGS.linkWidthZoomNear
+            : COMMON_SETTINGS.linkWidthZoomFar,
+    };
+}
+
+function listenersGetter(settings) {
+    return settings ?? {};
+}
 
 function checkType(value, condition) {
     return condition;
@@ -87,123 +278,1087 @@ function rgbAnimationByProgress(start, end, progress) {
     };
 }
 
-function forceSettingsGetter(settings, prevSettings) {
-    return {
-        ...(prevSettings ?? FORCE_SETTINGS),
-        ...settings,
-    };
-}
-
-function graphSettingsGetter(settings, prevSettings) {
-    return {
-        ...(prevSettings ?? GRAPH_SETTINGS),
-        ...settings,
-    };
-}
-
-function linkSettingsGetter(settings, prevSettings) {
-    return { ...(prevSettings ?? LINK_SETTINGS), ...settings };
+function getForceControls(keys) {
+    const FORCE_CONTROLS = [
+        {
+            id: "forces",
+            initialValue: FORCE_SETTINGS.forces,
+            label: "Физика",
+            type: "checkbox",
+        },
+        {
+            id: "collideForce",
+            type: "checkbox",
+            label: "Сила отталкивания",
+            initialValue: FORCE_SETTINGS.collideForce,
+        },
+        {
+            id: "centerForce",
+            type: "checkbox",
+            label: "Сила центрирования",
+            initialValue: FORCE_SETTINGS.centerForce,
+        },
+        {
+            id: "chargeForce",
+            type: "checkbox",
+            label: "Сила дистанции",
+            initialValue: FORCE_SETTINGS.chargeForce,
+        },
+        {
+            id: "linkForce",
+            type: "checkbox",
+            label: "Сила связей",
+            initialValue: FORCE_SETTINGS.linkForce,
+        },
+        {
+            id: "xForce",
+            type: "checkbox",
+            label: "Сила X",
+            initialValue: FORCE_SETTINGS.xForce,
+        },
+        {
+            id: "yForce",
+            type: "checkbox",
+            label: "Сила Y",
+            initialValue: FORCE_SETTINGS.yForce,
+        },
+        {
+            id: "centerStrength",
+            initialValue: FORCE_SETTINGS.centerStrength,
+            label: "Граница центра",
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+        },
+        {
+            id: "collideStrength",
+            initialValue: FORCE_SETTINGS.collideStrength,
+            label: "Сила отталкивания",
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+        },
+        {
+            id: "collideAdditionalRadius",
+            initialValue: FORCE_SETTINGS.collideAdditionalRadius,
+            label: "Радиус отталкивания",
+            max: 300,
+            min: 0,
+            step: 0.1,
+            type: "range",
+        },
+        {
+            id: "collideIterations",
+            initialValue: FORCE_SETTINGS.collideIterations,
+            label: "Итерации отталкивания",
+            max: 10,
+            min: 0,
+            step: 1,
+            type: "range",
+        },
+        {
+            id: "chargeStrength",
+            initialValue: FORCE_SETTINGS.chargeStrength ,
+            label: "Дистанция",
+            max: 0,
+            min: -300,
+            step: 0.1,
+            type: "range",
+        },
+        {
+            type: "range",
+            id: "xPosition",
+            min: 0,
+            max: 2000,
+            step: 1,
+            label: "Координата притяжения X",
+            initialValue: FORCE_SETTINGS.xPosition ,
+        },
+        {
+            type: "range",
+            id: "yPosition",
+            min: 0,
+            max: 2000,
+            step: 1,
+            label: "Координата притяжения Y",
+            initialValue: FORCE_SETTINGS.yPosition ,
+        },
+        {
+            type: "range",
+            id: "xStrength",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Гравитация X",
+            initialValue: FORCE_SETTINGS.xStrength ,
+        },
+        {
+            type: "range",
+            id: "yStrength",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Гравитация Y",
+            initialValue: FORCE_SETTINGS.yStrength ,
+        },
+        {
+            type: "range",
+            id: "linkStrength",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Натяжение связей",
+            initialValue: FORCE_SETTINGS.linkStrength ,
+        },
+        {
+            type: "range",
+            id: "linkDistance",
+            min: 0,
+            max: 300,
+            step: 0.1,
+            label: "Расстояние связей",
+            initialValue: FORCE_SETTINGS.linkDistance ,
+        },
+    ];
+    return keys ? FORCE_CONTROLS.filter((control) => keys.includes(control.id)) : FORCE_CONTROLS;
 }
-function linkOptionsGetter(_, __, ___, state) {
-    return {
-        ...LINK_OPTIONS,
-        drawExtraLink: null,
-        drawLink: null,
-        color: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkColorZoomBorder
-            ? COMMON_SETTINGS.linkColorZoomNear
-            : COMMON_SETTINGS.linkColorZoomFar,
-        arrowColor: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkColorZoomBorder
-            ? COMMON_SETTINGS.linkColorZoomNear
-            : COMMON_SETTINGS.linkColorZoomFar,
-        width: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkWidthZoomBorder
-            ? COMMON_SETTINGS.linkWidthZoomNear
-            : COMMON_SETTINGS.linkWidthZoomFar,
-    };
-}
-
-function listenersGetter(settings) {
-    return settings ?? {};
-}
-
-function nodeSettingsGetter(settings, prevNodeSettings) {
-    return {
-        ...(prevNodeSettings ?? NODE_SETTINGS),
-        idGetter: nodeIdGetter,
-        ...settings,
-    };
+function getGraphControls(keys) {
+    const GRAPH_CONTROLS = [
+        {
+            id: "highlightDownFrames",
+            initialValue: GRAPH_SETTINGS.highlightDownFrames,
+            max: 60,
+            min: 1,
+            step: 1,
+            type: "range",
+            label: "Скорость отмены анимации в кадрах",
+        },
+        {
+            id: "highlightUpFrames",
+            initialValue: GRAPH_SETTINGS.highlightUpFrames,
+            max: 60,
+            min: 1,
+            step: 1,
+            type: "range",
+            label: "Скорость применения анимации в кадрах",
+        },
+    ];
+    return keys ? GRAPH_CONTROLS.filter((control) => keys.includes(control.id)) : GRAPH_CONTROLS;
 }
-const color = colorGetter();
-function nodeOptionsGetter(node, _, __, state) {
-    const { textShiftY, textSize } = nodeTextSizeGetter(state?.areaTransform);
-    return {
-        ...NODE_OPTIONS,
-        nodeDraw: null,
-        nodeExtraDraw: null,
-        textDraw: null,
-        textExtraDraw: null,
-        color: color(String(node.group ?? "_DEFAULT")),
-        textVisible: Boolean(state?.areaTransform && state.areaTransform.k > COMMON_SETTINGS.nodeTextScaleMin),
-        text: node.name ?? node.id.toString(),
-        textShiftY,
-        textSize,
-    };
+function getNodeSettingControls(keys) {
+    const NODE_SETTINGS_CONTROLS = [
+        {
+            id: "cache",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.cache,
+            label: "Кеширование вычисляемых настроек",
+        },
+        {
+            id: "highlightByNodeOnlyRoot",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByNodeOnlyRoot,
+            label: "Дополнительная анимация только главное цели при анимации ноды",
+        },
+        {
+            id: "highlightByHoverNode",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByHoverNode,
+            label: "Анимации при наведении на ноду",
+        },
+        {
+            id: "nodeRadiusFlexible",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.nodeRadiusFlexible,
+            label: "Гибкий радиус ноды",
+        },
+        {
+            id: "nodeSizeFlexible",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.nodeSizeFlexible,
+            label: "Гибкий размер ноды",
+        },
+        {
+            id: "textNodeDebug",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.textNodeDebug,
+            label: "Отладка текстовой ноды",
+        },
+        {
+            id: "highlightByNodeNodeFading",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeFading,
+            label: "Затухание при анимации ноды",
+        },
+        {
+            id: "highlightByNodeNodeColor",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeColor,
+            label: "Затухание цвета при анимации ноды",
+        },
+        {
+            id: "highlightByNodeNodeSizing",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeSizing,
+            label: "Изменение размера при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextFading",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByNodeTextFading,
+            label: "Затухание текста при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextSizing",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByNodeTextSizing,
+            label: "Изменение размера текста при анимации ноды",
+        },
+        {
+            id: "highlightByLinkNodeFading",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeFading,
+            label: "Затухание при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeColor",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeColor,
+            label: "Затухание цвета при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeSizing",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeSizing,
+            label: "Изменение размера при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextFading",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByLinkTextFading,
+            label: "Затухание текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextSizing",
+            type: "checkbox",
+            initialValue: NODE_SETTINGS.highlightByLinkTextSizing,
+            label: "Изменение размера текста при анимации связи",
+        },
+        {
+            id: "nodeRadiusCoefficient",
+            initialValue: NODE_SETTINGS.nodeRadiusCoefficient,
+            max: 100,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Количество связей для увеличения радиуса",
+        },
+        {
+            id: "nodeRadiusFactor",
+            initialValue: NODE_SETTINGS.nodeRadiusFactor,
+            max: 50,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Коэффициент увеличения радиуса",
+        },
+        {
+            id: "nodeSizeCoefficient",
+            initialValue: NODE_SETTINGS.nodeSizeCoefficient,
+            max: 50,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Количество связей для увеличения размера",
+        },
+        {
+            id: "nodeSizeFactor",
+            initialValue: NODE_SETTINGS.nodeSizeFactor,
+            max: 20,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Коэффициент увеличения размера",
+        },
+        {
+            id: "highlightByNodeNodeSizingAdditional",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.01,
+            type: "range",
+            label: "Дополнительный размер при анимации ноды",
+        },
+        {
+            id: "highlightByNodeNodeSizingAdditionalCoefficient",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeSizingAdditionalCoefficient,
+            max: 10,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Дополнительный размер квадрата при анимации ноды",
+        },
+        {
+            id: "highlightByNodeNodeColorFadingMin",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeColorFadingMin,
+            max: 1,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания цвета при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextShiftXAdditional",
+            initialValue: NODE_SETTINGS.highlightByNodeTextShiftXAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по X при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextShiftYAdditional",
+            initialValue: NODE_SETTINGS.highlightByNodeTextShiftYAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по Y при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextSizingAdditional",
+            initialValue: NODE_SETTINGS.highlightByNodeTextSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение текста при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextWeightAdditional",
+            initialValue: NODE_SETTINGS.highlightByNodeTextWeightAdditional,
+            max: 1000,
+            min: 0,
+            step: 100,
+            type: "range",
+            label: "Увеличение жирности текста при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextWidthAdditional",
+            initialValue: NODE_SETTINGS.highlightByNodeTextWidthAdditional,
+            max: 100,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение ширины текста при анимации ноды",
+        },
+        {
+            id: "highlightByNodeNodeFadingMin",
+            initialValue: NODE_SETTINGS.highlightByNodeNodeFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания ноды при анимации ноды",
+        },
+        {
+            id: "highlightByNodeTextFadingMin",
+            initialValue: NODE_SETTINGS.highlightByNodeTextFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания текста при анимации ноды",
+        },
+        {
+            id: "highlightByLinkNodeSizingAdditional",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.01,
+            type: "range",
+            label: "Дополнительный размер при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeSizingAdditionalCoefficient",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeSizingAdditionalCoefficient,
+            max: 10,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Дополнительный размер квадрата при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeColorFadingMin",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeColorFadingMin,
+            max: 1,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания цвета при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextShiftXAdditional",
+            initialValue: NODE_SETTINGS.highlightByLinkTextShiftXAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по X при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextShiftYAdditional",
+            initialValue: NODE_SETTINGS.highlightByLinkTextShiftYAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по Y при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextSizingAdditional",
+            initialValue: NODE_SETTINGS.highlightByLinkTextSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextWeightAdditional",
+            initialValue: NODE_SETTINGS.highlightByLinkTextWeightAdditional,
+            max: 1000,
+            min: 0,
+            step: 100,
+            type: "range",
+            label: "Увеличение жирности текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextWidthAdditional",
+            initialValue: NODE_SETTINGS.highlightByLinkTextWidthAdditional,
+            max: 100,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение ширины текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeFadingMin",
+            initialValue: NODE_SETTINGS.highlightByLinkNodeFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания ноды при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextFadingMin",
+            initialValue: NODE_SETTINGS.highlightByLinkTextFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания текста при анимации связи",
+        },
+    ];
+    return keys
+        ? NODE_SETTINGS_CONTROLS.filter((control) => keys.includes(control.id))
+        : NODE_SETTINGS_CONTROLS;
 }
-function nodeTextSizeGetter(transform) {
-    let textSize = COMMON_SETTINGS.nodeTextSizeMax;
-    let textShiftY = COMMON_SETTINGS.nodeTextShiftYMax;
-    if (transform) {
-        const scaleStepCoefficient = (COMMON_SETTINGS.nodeTextScaleMax - COMMON_SETTINGS.nodeTextScaleMin) /
-            COMMON_SETTINGS.nodeTextChangeStepCount;
-        const textStepCoefficient = (COMMON_SETTINGS.nodeTextSizeMax - COMMON_SETTINGS.nodeTextSizeMin) /
-            COMMON_SETTINGS.nodeTextChangeStepCount;
-        const shiftStepCoefficient = (COMMON_SETTINGS.nodeTextShiftYMax - COMMON_SETTINGS.nodeTextShiftYMin) /
-            COMMON_SETTINGS.nodeTextChangeStepCount;
-        if (transform.k >= COMMON_SETTINGS.nodeTextScaleMax) {
-            textSize = COMMON_SETTINGS.nodeTextSizeMin;
-            textShiftY = COMMON_SETTINGS.nodeTextShiftYMin;
-        }
-        else if (transform.k > COMMON_SETTINGS.nodeTextScaleMin) {
-            const transformSteps = (transform.k - COMMON_SETTINGS.nodeTextScaleMin) / scaleStepCoefficient;
-            textSize -= transformSteps * textStepCoefficient;
-            textShiftY -= transformSteps * shiftStepCoefficient;
-        }
-    }
-    return { textSize, textShiftY };
-}
-function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }) {
-    return ((radiusFlexible && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + radiusInitial);
-}
-function nodeIdGetter(node) {
-    return node.id;
-}
-
-function pointerGetter(mouseEvent, areaRect, areaTransform) {
-    const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
-    const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
-    return [px, py];
-}
-
-function isOverlapsNode(node, radius, pointerX, pointerY) {
-    if (node.x == undefined || node.y == undefined)
-        return false;
-    const isOverX = node.x - radius <= pointerX && pointerX <= node.x + radius;
-    const isOverY = node.y - radius <= pointerY && pointerY <= node.y + radius;
-    return isOverX && isOverY;
+function getNodeOptionsControls(keys) {
+    const NODE_CONTROLS = [
+        {
+            id: "shape",
+            type: "select",
+            initialValue: NODE_OPTIONS.shape,
+            label: "Форма",
+            options: [
+                { label: "Картинки", value: "icon" },
+                { label: "Круг", value: "circle" },
+                { label: "Прямоугольник", value: "square" },
+                { label: "Текст", value: "text" },
+            ],
+        },
+        {
+            id: "radius",
+            type: "range",
+            max: 50,
+            min: 1,
+            step: 1,
+            label: "Радиус",
+            initialValue: NODE_OPTIONS.radius,
+        },
+        {
+            id: "width",
+            type: "range",
+            max: 50,
+            min: 1,
+            step: 1,
+            label: "Ширина",
+            initialValue: NODE_OPTIONS.width,
+        },
+        {
+            id: "height",
+            type: "range",
+            max: 50,
+            min: 1,
+            step: 1,
+            label: "Высота",
+            initialValue: NODE_OPTIONS.height,
+        },
+        {
+            id: "borderRadius",
+            type: "range",
+            max: 50,
+            min: 0,
+            step: 1,
+            label: "Радиус границы",
+            initialValue: NODE_OPTIONS.borderRadius,
+        },
+        {
+            id: "alpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность",
+            initialValue: NODE_OPTIONS.alpha,
+        },
+        {
+            id: "borderWidth",
+            type: "range",
+            max: 5,
+            min: 0,
+            step: 0.1,
+            label: "Толщина границы",
+            initialValue: NODE_OPTIONS.borderWidth,
+        },
+        {
+            id: "borderColor",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет границы",
+        },
+        {
+            id: "color",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет",
+        },
+        {
+            id: "textNodeXPadding",
+            type: "range",
+            max: 30,
+            min: 0,
+            step: 0.1,
+            label: "Отступы по оси X у текстовой ноды внутри контейнера",
+            initialValue: NODE_OPTIONS.textNodeXPadding,
+        },
+        {
+            id: "textNodeYPadding",
+            type: "range",
+            max: 30,
+            min: 0,
+            step: 0.1,
+            label: "Отступы по оси Y у текстовой ноды внутри контейнера",
+            initialValue: NODE_OPTIONS.textNodeYPadding,
+        },
+        {
+            id: "textSize",
+            type: "range",
+            max: 30,
+            min: 0,
+            step: 0.1,
+            label: "Размер текста",
+            initialValue: 0,
+        },
+        {
+            id: "textAlpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность текста",
+            initialValue: NODE_OPTIONS.textAlpha,
+        },
+        {
+            id: "textWidth",
+            type: "range",
+            max: 200,
+            min: 5,
+            step: 1,
+            label: "Ширина текста",
+            initialValue: NODE_OPTIONS.textWidth,
+        },
+        {
+            id: "textShiftX",
+            type: "range",
+            max: 100,
+            min: 0,
+            step: 0.1,
+            label: "Смещение X текста",
+            initialValue: NODE_OPTIONS.textShiftX,
+        },
+        {
+            id: "textShiftY",
+            type: "range",
+            max: 100,
+            min: 0,
+            step: 0.1,
+            label: "Смещение Y текста",
+            initialValue: 4,
+        },
+        {
+            id: "textWeight",
+            type: "range",
+            max: 1000,
+            min: 100,
+            step: 100,
+            label: "Жирность текста",
+            initialValue: NODE_OPTIONS.textWeight,
+        },
+        {
+            id: "textGap",
+            type: "range",
+            max: 30,
+            min: 0,
+            step: 0.1,
+            label: "Расстояние между строками",
+            initialValue: NODE_OPTIONS.textGap,
+        },
+        {
+            id: "textColor",
+            type: "color",
+            initialValue: NODE_OPTIONS.textColor,
+            label: "Цвет текста",
+        },
+    ];
+    return keys ? NODE_CONTROLS.filter((control) => keys.includes(control.id)) : NODE_CONTROLS;
 }
-
-function dragPlaceCoefficientGetter(node, pointerX, pointerY, radius) {
-    if (!node.x || !node.y)
-        return undefined;
-    if (isOverlapsNode(node, radius, pointerX, pointerY))
-        return node.index;
+function getLinkSettingsControls(keys) {
+    const LINK_SETTINGS_CONTROLS = [
+        {
+            id: "cache",
+            type: "checkbox",
+            label: "Кеширование вычисляемых настроек",
+            initialValue: LINK_SETTINGS.cache,
+        },
+        {
+            id: "particles",
+            type: "checkbox",
+            label: "Частицы",
+            initialValue: LINK_SETTINGS.particles,
+        },
+        {
+            id: "particleFlexSpeed",
+            type: "checkbox",
+            label: "Гибкий расчет скорости частицы",
+            initialValue: LINK_SETTINGS.particleFlexSpeed,
+        },
+        {
+            id: "pretty",
+            type: "checkbox",
+            label: "Обсчет красивого соединения",
+            initialValue: LINK_SETTINGS.pretty,
+        },
+        {
+            id: "arrow",
+            type: "checkbox",
+            label: "Стрелка",
+            initialValue: LINK_SETTINGS.arrow,
+        },
+        {
+            id: "arrowByHighlight",
+            type: "checkbox",
+            label: "Появление стрелки при анимации",
+            initialValue: LINK_SETTINGS.arrowByHighlight,
+        },
+        {
+            id: "highlightByHoverLink",
+            type: "checkbox",
+            label: "Анимация при наведении на связь",
+            initialValue: LINK_SETTINGS.highlightByHoverLink,
+        },
+        {
+            id: "highlightByNodeLinkFading",
+            type: "checkbox",
+            label: "Затухание при анимации ноды",
+            initialValue: LINK_SETTINGS.highlightByNodeLinkFading,
+        },
+        {
+            id: "highlightByNodeArrowFading",
+            type: "checkbox",
+            label: "Затухание стрелки при анимации ноды",
+            initialValue: LINK_SETTINGS.highlightByNodeArrowFading,
+        },
+        {
+            id: "highlightByLinkLinkFading",
+            type: "checkbox",
+            label: "Затухание при анимации связи",
+            initialValue: LINK_SETTINGS.highlightByLinkLinkFading,
+        },
+        {
+            id: "highlightByLinkArrowFading",
+            type: "checkbox",
+            label: "Затухание стрелки при анимации связи",
+            initialValue: LINK_SETTINGS.highlightByLinkArrowFading,
+        },
+        {
+            id: "particleFlexSpeedCoefficient",
+            initialValue: LINK_SETTINGS.particleFlexSpeedCoefficient,
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Коэффициент скорости частицы относительно расстояния",
+        },
+        {
+            id: "hoverLinkThreshold",
+            initialValue: LINK_SETTINGS.hoverLinkThreshold,
+            max: 10,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Расширение границы связи для курсора",
+        },
+        {
+            id: "highlightByNodeLinkFadingMin",
+            initialValue: LINK_SETTINGS.highlightByNodeLinkFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания связи при анимации ноды",
+        },
+        {
+            id: "highlightByNodeArrowFadingMin",
+            initialValue: LINK_SETTINGS.highlightByNodeArrowFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания стрелки при анимации ноды",
+        },
+        {
+            id: "highlightByLinkLinkFadingMin",
+            initialValue: LINK_SETTINGS.highlightByLinkLinkFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания связи при анимации связи",
+        },
+        {
+            id: "highlightByLinkArrowFadingMin",
+            initialValue: LINK_SETTINGS.highlightByLinkArrowFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания стрелки при анимации связи",
+        },
+    ];
+    return keys
+        ? LINK_SETTINGS_CONTROLS.filter((control) => keys.includes(control.id))
+        : LINK_SETTINGS_CONTROLS;
 }
-
-function linkIterationExtractor(link, i, links, state, option, optionConstantGetter) {
-    let customOptions;
-    let constantOptions;
-    if (typeof option === "function")
-        customOptions = option(link, i, links, state);
-    else
+function getLinkOptionsControls(keys) {
+    const LINK_CONTROLS = [
+        {
+            id: "alpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность",
+            initialValue: LINK_OPTIONS.alpha,
+        },
+        {
+            id: "width",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Толщина",
+            initialValue: 0.1,
+        },
+        {
+            id: "arrowAlpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность стрелки",
+            initialValue: LINK_OPTIONS.arrowAlpha,
+        },
+        {
+            id: "arrowSize",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Размер стрелки",
+            initialValue: LINK_OPTIONS.arrowSize,
+        },
+        {
+            id: "arrowBorderWidth",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Размер границы стрелки",
+            initialValue: LINK_OPTIONS.arrowBorderWidth,
+        },
+        {
+            id: "particleBorderWidth",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Размер границы частиц",
+            initialValue: LINK_OPTIONS.particleBorderWidth,
+        },
+        {
+            id: "particleAlpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность частиц",
+            initialValue: LINK_OPTIONS.particleAlpha,
+        },
+        {
+            id: "particleRadius",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Радиус частиц",
+            initialValue: LINK_OPTIONS.particleRadius,
+        },
+        {
+            id: "particleCount",
+            type: "range",
+            max: 20,
+            min: 1,
+            step: 1,
+            label: "Количество частиц",
+            initialValue: LINK_OPTIONS.particleCount,
+        },
+        {
+            id: "particleSteps",
+            type: "range",
+            max: 200,
+            min: 1,
+            step: 1,
+            label: "Количество кадров у частиц",
+            initialValue: LINK_OPTIONS.particleSteps,
+        },
+        {
+            id: "color",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет",
+        },
+        {
+            id: "arrowColor",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет стрелки",
+        },
+        {
+            id: "arrowBorderColor",
+            type: "color",
+            initialValue: LINK_OPTIONS.arrowBorderColor,
+            label: "Цвет границы стрелки",
+        },
+        {
+            id: "particleColor",
+            type: "color",
+            initialValue: LINK_OPTIONS.particleColor,
+            label: "Цвет частиц",
+        },
+        {
+            id: "particleBorderColor",
+            type: "color",
+            initialValue: LINK_OPTIONS.particleBorderColor,
+            label: "Цвет границы частиц",
+        },
+    ];
+    return keys ? LINK_CONTROLS.filter((control) => keys.includes(control.id)) : LINK_CONTROLS;
+}
+
+let countTime = 0;
+let countOperation = 0;
+function setDrawTime(cb, showEveryTick) {
+    return () => {
+        const start = performance.now();
+        cb();
+        const end = performance.now();
+        const result = end - start;
+        countTime += result;
+        countOperation++;
+        if (showEveryTick) {
+            const average = countTime / countOperation;
+            // eslint-disable-next-line no-console
+            console.log("average draw: ", average, "current draw: ", result);
+        }
+    };
+}
+function getDrawTime() {
+    const average = countTime / countOperation;
+    // eslint-disable-next-line no-console
+    console.log("average draw: ", average);
+}
+function resetDrawTime() {
+    countTime = 0;
+    countOperation = 0;
+}
+
+function nodeSettingsGetter(settings, prevNodeSettings) {
+    return {
+        ...(prevNodeSettings ?? NODE_SETTINGS),
+        idGetter: nodeIdGetter,
+        ...settings,
+    };
+}
+const color = colorGetter();
+function nodeOptionsGetter(node, _, __, state) {
+    const { textShiftY, textSize } = nodeTextSizeGetter(state?.areaTransform);
+    return {
+        ...NODE_OPTIONS,
+        nodeDraw: null,
+        nodeExtraDraw: null,
+        textDraw: null,
+        textExtraDraw: null,
+        color: color(String(node.group ?? "_DEFAULT")),
+        textVisible: Boolean(state?.areaTransform && state.areaTransform.k > COMMON_SETTINGS.nodeTextScaleMin),
+        text: node.name ?? node.id.toString(),
+        textShiftY,
+        textSize,
+    };
+}
+function nodeTextSizeGetter(transform) {
+    let textSize = COMMON_SETTINGS.nodeTextSizeMax;
+    let textShiftY = COMMON_SETTINGS.nodeTextShiftYMax;
+    if (transform) {
+        const scaleStepCoefficient = (COMMON_SETTINGS.nodeTextScaleMax - COMMON_SETTINGS.nodeTextScaleMin) /
+            COMMON_SETTINGS.nodeTextChangeStepCount;
+        const textStepCoefficient = (COMMON_SETTINGS.nodeTextSizeMax - COMMON_SETTINGS.nodeTextSizeMin) /
+            COMMON_SETTINGS.nodeTextChangeStepCount;
+        const shiftStepCoefficient = (COMMON_SETTINGS.nodeTextShiftYMax - COMMON_SETTINGS.nodeTextShiftYMin) /
+            COMMON_SETTINGS.nodeTextChangeStepCount;
+        if (transform.k >= COMMON_SETTINGS.nodeTextScaleMax) {
+            textSize = COMMON_SETTINGS.nodeTextSizeMin;
+            textShiftY = COMMON_SETTINGS.nodeTextShiftYMin;
+        }
+        else if (transform.k > COMMON_SETTINGS.nodeTextScaleMin) {
+            const transformSteps = (transform.k - COMMON_SETTINGS.nodeTextScaleMin) / scaleStepCoefficient;
+            textSize -= transformSteps * textStepCoefficient;
+            textShiftY -= transformSteps * shiftStepCoefficient;
+        }
+    }
+    return { textSize, textShiftY };
+}
+function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }) {
+    return ((radiusFlexible && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + radiusInitial);
+}
+function nodeSizeGetter({ heightInitial, linkCount, sizeCoefficient, sizeFactor, sizeFlexible, widthInitial, }) {
+    let widthCoefficient = 1;
+    let heightCoefficient = 1;
+    if (sizeFlexible && linkCount != undefined) {
+        widthCoefficient += (linkCount / sizeCoefficient) * sizeFactor;
+        heightCoefficient += (linkCount / sizeCoefficient) * sizeFactor;
+    }
+    return { width: widthInitial * widthCoefficient, height: heightInitial * heightCoefficient };
+}
+function nodeIdGetter(node) {
+    return node.id;
+}
+
+function pointerGetter(mouseEvent, areaRect, areaTransform) {
+    const clientX = "clientX" in mouseEvent
+        ? mouseEvent.clientX
+        : (mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX);
+    const clientY = "clientX" in mouseEvent
+        ? mouseEvent.clientY
+        : (mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY);
+    const px = (clientX - areaRect.left - areaTransform.x) / areaTransform.k;
+    const py = (clientY - areaRect.top - areaTransform.y) / areaTransform.k;
+    return [px, py];
+}
+
+function isOverlapsNode(node, pointerX, pointerY, radius) {
+    if (node.x == undefined || node.y == undefined)
+        return false;
+    switch (node._shape) {
+        case "circle": {
+            const nodeRadius = node._radius ?? radius ?? 5;
+            const isOverX = node.x - nodeRadius <= pointerX && pointerX <= node.x + nodeRadius;
+            const isOverY = node.y - nodeRadius <= pointerY && pointerY <= node.y + nodeRadius;
+            return isOverX && isOverY;
+        }
+        case "square":
+        case "text": {
+            const width = node._width ?? 5;
+            const height = node._height ?? 5;
+            const borderRadius = node._borderRadius ?? 0;
+            const overlaps = Math.abs(pointerX - node.x) <= width / 2 && Math.abs(pointerY - node.y) <= height / 2;
+            if (node._shape !== "text" && borderRadius != undefined && borderRadius > 0 && overlaps) {
+                return isCursorOverRoundedRect(pointerX, pointerY, node.x, node.y, width / 2, height / 2, borderRadius);
+            }
+            return overlaps;
+        }
+        default: {
+            const nodeRadius = node._radius ?? radius ?? 5;
+            const isOverX = node.x - nodeRadius <= pointerX && pointerX <= node.x + nodeRadius;
+            const isOverY = node.y - nodeRadius <= pointerY && pointerY <= node.y + nodeRadius;
+            return isOverX && isOverY;
+        }
+    }
+}
+function isCursorOverRoundedRect(pointerX, pointerY, x, y, halfWidth, halfHeight, borderRadius) {
+    const left = x - halfWidth;
+    const right = x + halfWidth;
+    const top = y - halfHeight;
+    const bottom = y + halfHeight;
+    if (pointerX < left + borderRadius && pointerY < top + borderRadius) {
+        const dx = pointerX - (left + borderRadius);
+        const dy = pointerY - (top + borderRadius);
+        return dx * dx + dy * dy <= borderRadius * borderRadius;
+    }
+    else if (pointerX > right - borderRadius && pointerY < top + borderRadius) {
+        const dx = pointerX - (right - borderRadius);
+        const dy = pointerY - (top + borderRadius);
+        return dx * dx + dy * dy <= borderRadius * borderRadius;
+    }
+    else if (pointerX < left + borderRadius && pointerY > bottom - borderRadius) {
+        const dx = pointerX - (left + borderRadius);
+        const dy = pointerY - (bottom - borderRadius);
+        return dx * dx + dy * dy <= borderRadius * borderRadius;
+    }
+    else if (pointerX > right - borderRadius && pointerY > bottom - borderRadius) {
+        const dx = pointerX - (right - borderRadius);
+        const dy = pointerY - (bottom - borderRadius);
+        return dx * dx + dy * dy <= borderRadius * borderRadius;
+    }
+    return true;
+}
+
+function dragPlaceCoefficientGetter(node, pointerX, pointerY) {
+    if (!node.x || !node.y)
+        return undefined;
+    if (isOverlapsNode(node, pointerX, pointerY, undefined))
+        return node.index;
+}
+
+function linkIterationExtractor(link, i, links, state, option, optionConstantGetter) {
+    let customOptions;
+    let constantOptions;
+    if (typeof option === "function")
+        customOptions = option(link, i, links, state);
+    else
         customOptions = option;
     if (customOptions && typeof customOptions === "object" && !Array.isArray(customOptions)) {
         for (const key in customOptions) {
@@ -230,20 +1385,12 @@ function linkIterationExtractor(link, i, links, state, option, optionConstantGet
     return customOptions;
 }
 
-function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, graphSettings, }) {
+function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, }) {
     if (!areaRect)
         return undefined;
     const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
     return d3Array.greatest(nodes, (node) => {
-        const radius = node._radius ??
-            nodeRadiusGetter({
-                radiusFlexible: graphSettings.nodeRadiusFlexible,
-                radiusInitial: graphSettings.nodeRadiusInitial,
-                radiusCoefficient: graphSettings.nodeRadiusCoefficient,
-                radiusFactor: graphSettings.nodeRadiusFactor,
-                linkCount: node.linkCount,
-            });
-        if (isOverlapsNode(node, radius, pointerX, pointerY))
+        if (isOverlapsNode(node, pointerX, pointerY, undefined))
             return node.index;
     });
 }
@@ -280,68 +1427,271 @@ function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGet
     return customOptions;
 }
 
-const SPACE = " ";
-function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }) {
-    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
-    context.fillStyle = textColor;
-    context.textAlign = textAlign;
-    if (cachedNodeText[id] != undefined) {
-        cachedNodeText[id].forEach((line, index) => {
-            context.fillText(line, x, y + index * textSize + index * textGap);
-        });
-        return;
-    }
-    if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {
-        cachedNodeText[id] = [text];
-        context.fillText(text, x, y);
-        return;
+function calculateLinkPositionByNode(link, arrowSize = 0) {
+    const source = link.source;
+    const target = link.target;
+    if (typeof source != "object" || typeof target != "object")
+        return null;
+    const sourcePoint = getLinkPoint({
+        arrowSize: 0,
+        node: source,
+        oppositeNode: target,
+    });
+    const targetPoint = getLinkPoint({
+        arrowSize: arrowSize > 0 ? arrowSize * 0.85 : 0,
+        node: target,
+        oppositeNode: source,
+    });
+    if (!sourcePoint || !targetPoint)
+        return null;
+    const distance = targetPoint && sourcePoint
+        ? Math.sqrt((targetPoint.x - sourcePoint.x) ** 2 + (targetPoint.y - sourcePoint.y) ** 2)
+        : 0;
+    return {
+        x1: sourcePoint.x,
+        y1: sourcePoint.y,
+        x2: targetPoint.x,
+        y2: targetPoint.y,
+        distance,
+    };
+}
+function getLinkPoint(opts) {
+    if (opts.node.x == undefined ||
+        opts.node.y == undefined ||
+        opts.oppositeNode.x == undefined ||
+        opts.oppositeNode.y == undefined)
+        return null;
+    let nodePoint;
+    switch (opts.node._shape) {
+        case "circle": {
+            nodePoint = getCircleIntersection({
+                x: opts.node.x,
+                y: opts.node.y,
+                radius: opts.node._radius ?? COMMON_SETTINGS.nodeRadius,
+                oppositeX: opts.oppositeNode.x,
+                oppositeY: opts.oppositeNode.y,
+                arrowSize: opts.arrowSize,
+            });
+            break;
+        }
+        case "square":
+        case "text": {
+            nodePoint = getRectangleIntersection({
+                arrowSize: opts.arrowSize,
+                x: opts.node.x,
+                y: opts.node.y,
+                height: opts.node._height ?? COMMON_SETTINGS.nodeSize,
+                width: opts.node._width ?? COMMON_SETTINGS.nodeSize,
+                oppositeX: opts.oppositeNode.x,
+                oppositeY: opts.oppositeNode.y,
+                borderRadius: opts.node._shape === "text" ? 0 : (opts.node._borderRadius ?? 0),
+            });
+            break;
+        }
+        default: {
+            nodePoint = getCircleIntersection({
+                x: opts.node.x,
+                y: opts.node.y,
+                radius: opts.node._radius ?? COMMON_SETTINGS.nodeRadius,
+                oppositeX: opts.oppositeNode.x,
+                oppositeY: opts.oppositeNode.y,
+                arrowSize: opts.arrowSize,
+            });
+        }
     }
-    const spaceWidth = context.measureText(" ").width;
-    const lines = [];
-    let lineWidth = 0;
-    let line = "";
-    for (const word of text.split(" ")) {
-        const size = context.measureText(word).width;
-        lineWidth += size;
-        if (line === "") {
-            line = word;
-            continue;
-        }
-        if (lineWidth > maxWidth) {
-            lineWidth = 0;
-            lines.push(line);
-            line = word;
+    return nodePoint;
+}
+function getCircleIntersection(opts) {
+    const dx = opts.oppositeX - opts.x;
+    const dy = opts.oppositeY - opts.y;
+    const dr = Math.sqrt(dx * dx + dy * dy);
+    const radius = opts.radius + opts.arrowSize;
+    return {
+        x: opts.x + (dx * radius) / dr,
+        y: opts.y + (dy * radius) / dr,
+    };
+}
+function getRectangleIntersection(opts) {
+    const halfWidth = opts.width / 2;
+    const halfHeight = opts.height / 2;
+    const dx = opts.oppositeX - opts.x;
+    const dy = opts.oppositeY - opts.y;
+    let relX, relY;
+    if (Math.abs(dx) <= halfWidth && Math.abs(dy) <= halfHeight) {
+        const distToRight = halfWidth - dx;
+        const distToLeft = halfWidth + dx;
+        const distToTop = halfHeight - dy;
+        const distToBottom = halfHeight + dy;
+        const minDist = Math.min(distToRight, distToLeft, distToTop, distToBottom);
+        relX = minDist === distToRight ? halfWidth : minDist === distToLeft ? -halfWidth : dx;
+        relY = minDist === distToTop ? halfHeight : minDist === distToBottom ? -halfHeight : dy;
+    }
+    else {
+        const absDx = Math.abs(dx);
+        const absDy = Math.abs(dy);
+        if (halfWidth * absDy < halfHeight * absDx) {
+            relX = dx > 0 ? halfWidth : -halfWidth;
+            relY = (relX * dy) / dx;
+            if (Math.abs(relY) > halfHeight) {
+                relY = dy > 0 ? halfHeight : -halfHeight;
+                relX = (relY * dx) / dy;
+            }
         }
         else {
-            lineWidth += spaceWidth;
-            line += `${SPACE}${word}`;
+            relY = dy > 0 ? halfHeight : -halfHeight;
+            relX = (relY * dx) / dy;
+            if (Math.abs(relX) > halfWidth) {
+                relX = dx > 0 ? halfWidth : -halfWidth;
+                relY = (relX * dy) / dx;
+            }
         }
     }
-    if (line !== "")
-        lines.push(line);
-    cachedNodeText[id] = lines;
-    lines.forEach((line, index) => {
-        context.fillText(line, x, y + index * textSize + index * textGap);
-    });
-}
-
-function calculateLinkPositionByRadius(link, arrowSize = 0) {
-    const source = link.source;
-    const target = link.target;
-    if (typeof source != "object" || typeof target != "object")
-        return null;
-    const dx = (target.x ?? 0) - (source.x ?? 0);
-    const dy = (target.y ?? 0) - (source.y ?? 0);
-    const dr = Math.sqrt(dx * dx + dy * dy);
-    const sourceRadius = source._radius ?? 0;
-    const targetRadius = (target._radius ?? 0) + (arrowSize > 0 ? arrowSize * 0.85 : 0);
+    if (opts.borderRadius != undefined) {
+        const { x, y } = squareRadiusFix(relX, relY, halfWidth, halfHeight, opts.borderRadius);
+        if (x != undefined)
+            relX = x;
+        if (y != undefined)
+            relY = y;
+    }
+    if (opts.arrowSize > 0) {
+        const edgeDist = Math.sqrt(relX * relX + relY * relY);
+        const scale = (edgeDist + opts.arrowSize) / edgeDist;
+        relX *= scale;
+        relY *= scale;
+    }
     return {
-        x1: (source.x ?? 0) + (dx * sourceRadius) / dr,
-        y1: (source.y ?? 0) + (dy * sourceRadius) / dr,
-        x2: (target.x ?? 0) - (dx * targetRadius) / dr,
-        y2: (target.y ?? 0) - (dy * targetRadius) / dr,
+        x: opts.x + relX,
+        y: opts.y + relY,
     };
 }
+// eslint-disable-next-line no-warning-comments
+// TODO: Need upgrade
+function squareRadiusFix(relX, relY, halfWidth, halfHeight, borderRadius) {
+    const epsilon = 1e-6;
+    const absX = Math.abs(relX);
+    const absY = Math.abs(relY);
+    let side = null;
+    if (absX >= halfWidth - epsilon) {
+        side = relX > 0 ? "right" : "left";
+    }
+    else if (absY >= halfHeight - epsilon) {
+        side = relY > 0 ? "top" : "bottom";
+    }
+    if (side) {
+        const topBound = halfHeight - borderRadius;
+        const bottomBound = -topBound;
+        const rightBound = halfWidth - borderRadius;
+        const leftBound = -rightBound;
+        switch (side) {
+            case "right":
+                if (relY > topBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "right-top");
+                }
+                else if (relY < bottomBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "right-bottom");
+                }
+                break;
+            case "left":
+                if (relY > topBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "left-top");
+                }
+                else if (relY < bottomBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "left-bottom");
+                }
+                break;
+            case "top":
+                if (relX > rightBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "top-right");
+                }
+                else if (relX < leftBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "top-left");
+                }
+                break;
+            case "bottom":
+                if (relX > rightBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "bottom-right");
+                }
+                else if (relX < leftBound) {
+                    return checkIntersection(relX, relY, halfWidth, halfHeight, borderRadius, "bottom-left");
+                }
+                break;
+        }
+    }
+    return { x: undefined, y: undefined };
+}
+function checkIntersection(relX, relY, halfWidth, halfHeight, r, corner) {
+    const intersect = intersectWithCircle(relX, relY, halfWidth, halfHeight, r, corner);
+    return intersect ?? { x: undefined, y: undefined };
+}
+function intersectWithCircle(relX, relY, halfWidth, halfHeight, r, corner) {
+    switch (corner) {
+        case "top-right":
+            corner = "right-top";
+            break;
+        case "bottom-right":
+            corner = "right-bottom";
+            break;
+        case "top-left":
+            corner = "left-top";
+            break;
+        case "bottom-left":
+            corner = "left-bottom";
+            break;
+    }
+    let cx, cy;
+    switch (corner) {
+        case "right-top":
+            cx = halfWidth - r;
+            cy = halfHeight - r;
+            break;
+        case "right-bottom":
+            cx = halfWidth - r;
+            cy = -halfHeight + r;
+            break;
+        case "left-top":
+            cx = -halfWidth + r;
+            cy = halfHeight - r;
+            break;
+        case "left-bottom":
+            cx = -halfWidth + r;
+            cy = -halfHeight + r;
+            break;
+        default:
+            return null;
+    }
+    const a = relX ** 2 + relY ** 2;
+    if (a === 0)
+        return null;
+    const b = -2 * (relX * cx + relY * cy);
+    const c = cx ** 2 + cy ** 2 - r ** 2;
+    const discriminant = b ** 2 - 4 * a * c;
+    if (discriminant < 0)
+        return null;
+    const sqrtD = Math.sqrt(discriminant);
+    const t2 = (-b - sqrtD) / (2 * a);
+    const t1 = (-b + sqrtD) / (2 * a);
+    const t = t2 > 0 ? t2 : t1 > 0 ? t1 : null;
+    if (t === null || t >= 1)
+        return null;
+    const x = t * relX;
+    const y = t * relY;
+    let valid = false;
+    switch (corner) {
+        case "right-top":
+            valid = x >= cx && y >= cy;
+            break;
+        case "right-bottom":
+            valid = x >= cx && y <= cy;
+            break;
+        case "left-top":
+            valid = x <= cx && y >= cy;
+            break;
+        case "left-bottom":
+            valid = x <= cx && y <= cy;
+            break;
+    }
+    return valid ? { x, y } : null;
+}
 
 function animationByProgress(initial, additional, progress) {
     const max = initial + additional;
@@ -359,20 +1709,53 @@ function isNodeVisible(opts) {
     const right = (opts.width - opts.transform.x) / opts.transform.k;
     const top = -opts.transform.y / opts.transform.k;
     const bottom = (opts.height - opts.transform.y) / opts.transform.k;
-    return (left < opts.x + opts.radius + ADDITIONAL_VIEWPORT &&
-        opts.x - opts.radius - ADDITIONAL_VIEWPORT < right &&
-        top < opts.y + opts.radius + ADDITIONAL_VIEWPORT &&
-        opts.y - opts.radius - ADDITIONAL_VIEWPORT < bottom);
+    if (opts.node.x == undefined || opts.node.y == undefined)
+        return false;
+    switch (opts.node._shape) {
+        case "circle": {
+            const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;
+            return (left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&
+                opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&
+                top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&
+                opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom);
+        }
+        case "square":
+        case "text": {
+            const width = opts.node._width ?? COMMON_SETTINGS.nodeSize;
+            const height = opts.node._height ?? COMMON_SETTINGS.nodeSize;
+            return (left < opts.node.x + width + ADDITIONAL_VIEWPORT &&
+                opts.node.x - width - ADDITIONAL_VIEWPORT < right &&
+                top < opts.node.y + height + ADDITIONAL_VIEWPORT &&
+                opts.node.y - height - ADDITIONAL_VIEWPORT < bottom);
+        }
+        default: {
+            const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;
+            return (left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&
+                opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&
+                top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&
+                opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom);
+        }
+    }
 }
 
 function getParticlePosition(opts) {
-    if (opts.particle.wait > 0) {
-        opts.particle.wait--;
+    const prevStepDifference = opts.particle.step - (opts.particle.prev?.step ?? 0);
+    const nextStepDifference = (opts.particle.next?.step ?? 0) - opts.particle.step;
+    const needWait = opts.particle.next &&
+        opts.particle.next.step > opts.particle.step &&
+        nextStepDifference <= opts.distance;
+    const needSpeed = opts.particle.prev &&
+        opts.particle.prev.step !== 0 &&
+        opts.particle.prev.step < opts.particle.step &&
+        prevStepDifference < opts.distance;
+    if (opts.particle.step === 0 && needWait) {
+        opts.particle.x = undefined;
+        opts.particle.y = undefined;
         return;
     }
     const remainingSteps = opts.totalSteps - opts.particle.step;
     const progress = opts.particle.step / opts.totalSteps;
-    if (remainingSteps === 0) {
+    if (remainingSteps <= 0) {
         opts.particle.x = opts.xEnd;
         opts.particle.y = opts.yEnd;
         opts.particle.step = 0;
@@ -384,675 +1767,1226 @@ function getParticlePosition(opts) {
     const newY = opts.yStart + dy * progress;
     opts.particle.x = newX;
     opts.particle.y = newY;
-    opts.particle.step++;
+    if (needSpeed) {
+        opts.particle.step += prevStepDifference <= 3 ? prevStepDifference : 3;
+    }
+    else {
+        opts.particle.step++;
+    }
 }
 
-const FORCE_SETTINGS = {
-    centerPosition: {},
-    centerStrength: 1,
-    collideStrength: 0.1,
-    collideAdditionalRadius: 4,
-    collideIterations: 2,
-    collideOffMax: { links: 0, nodes: 0 },
-    collideOn: true,
-    chargeStrength: -40,
-    chargeDistanceMax: Infinity,
-    chargeDistanceMin: 1,
-    xForce: 0,
-    xStrength: 0.1,
-    yForce: 0,
-    yStrength: 0.1,
-    linkDistance: 30,
-    linkIterations: 1,
-    linkStrength: 1,
-    collideRadius: null,
-};
-const GRAPH_SETTINGS = {
-    zoomExtent: [0.3, 10],
-    translateExtent: [[], []],
-    translateExtentEnable: true,
-    translateExtentCoefficient: [3, 3],
-    highlightSizingAdditional: 0.5,
-    highlightColorFadingMin: 0.15,
-    highlightTextShiftXAdditional: 0,
-    highlightTextShiftYAdditional: 2,
-    highlightTextSizingAdditional: 1,
-    highlightTextWeightAdditional: 0,
-    highlightTextWidthAdditional: 10,
-    highlightOnlyRoot: true,
-    stickAfterDrag: false,
-    highlightByHover: true,
-    highlightLinkFadingMin: 0.21,
-    highlightFadingMin: 0.21,
-    highlightTextFadingMin: 0.21,
-    highlightArrowFadingMin: 0.21,
-    highlightDownStep: 0.2,
-    highlightUpStep: 0.2,
-    dragPlaceCoefficient: dragPlaceCoefficientGetter,
-    nodeRadiusInitial: 4,
-    nodeRadiusCoefficient: 5,
-    nodeRadiusFactor: 1,
-    nodeRadiusFlexible: true,
-    zoomInitial: null,
-    showDrawTime: true,
-    showDrawTimeEveryTick: false,
-};
-const NODE_SETTINGS = {
-    cache: false,
-};
-const NODE_OPTIONS = {
-    alpha: 1,
-    textAlpha: 1,
-    borderColor: "#000000FF",
-    borderWidth: 0.1,
-    textWidth: 20,
-    textShiftX: 0,
-    textFont: "Arial",
-    textAlign: "center",
-    textColor: "#333",
-    radius: 4,
-    textStyle: "normal",
-    textWeight: 500,
-    textGap: 1,
-    highlightFading: true,
-    highlightColor: false,
-    highlightSizing: true,
-    highlightTextFading: true,
-    highlightTextSizing: true,
-};
-const LINK_SETTINGS = {
-    cache: false,
-    particles: true,
-};
-const LINK_OPTIONS = {
-    alpha: 1,
-    highlightFading: true,
-    pretty: true,
-    arrow: true,
-    arrowAlpha: 1,
-    arrowSize: 2,
-    arrowHighlightFading: true,
-    arrowReverseAppear: true,
-    particleAlpha: 1,
-    particleColor: "#000000FF",
-    particleCount: 2,
-    particleRadius: 0.5,
-    particleSteps: 60,
-};
-const COMMON_SETTINGS = {
-    linkColorZoomFar: "#999",
-    linkColorZoomNear: "#000000FF",
-    linkWidthZoomFar: 1,
-    linkWidthZoomNear: 0.1,
-    linkWidthZoomBorder: 1,
-    linkColorZoomBorder: 1,
-    nodeTextScaleMin: 1.5,
-    nodeTextScaleMax: 20,
-    nodeTextSizeMin: 1.5,
-    nodeTextSizeMax: 3.5,
-    nodeTextShiftYMin: 2.5,
-    nodeTextShiftYMax: 4,
-    nodeTextChangeStepCount: 200,
-};
-
-function getForceControls(keys) {
-    const FORCE_CONTROLS = [
-        {
-            id: "centerStrength",
-            initialValue: FORCE_SETTINGS.centerStrength,
-            label: "Граница центра",
-            max: 1,
-            min: 0,
-            step: 0.01,
-            type: "range",
-        },
-        {
-            id: "collideStrength",
-            initialValue: FORCE_SETTINGS.collideStrength,
-            label: "Сила отталкивания",
-            max: 1,
-            min: 0,
-            step: 0.01,
-            type: "range",
-        },
-        {
-            id: "collideAdditionalRadius",
-            initialValue: FORCE_SETTINGS.collideAdditionalRadius,
-            label: "Радиус отталкивания",
-            max: 300,
-            min: 0,
-            step: 0.1,
-            type: "range",
-        },
-        {
-            id: "collideIterations",
-            initialValue: FORCE_SETTINGS.collideIterations,
-            label: "Итерации отталкивания",
-            max: 10,
-            min: 0,
-            step: 1,
-            type: "range",
-        },
-        {
-            id: "chargeStrength",
-            initialValue: FORCE_SETTINGS.chargeStrength ,
-            label: "Гравитация",
-            max: 0,
-            min: -300,
-            step: 0.1,
-            type: "range",
-        },
-        {
-            type: "range",
-            id: "xForce",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            label: "Граница X",
-            initialValue: FORCE_SETTINGS.xForce ,
-        },
-        {
-            type: "range",
-            id: "yForce",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            label: "Граница Y",
-            initialValue: FORCE_SETTINGS.yForce ,
-        },
-        {
-            type: "range",
-            id: "xStrength",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            label: "Гравитация X",
-            initialValue: FORCE_SETTINGS.xStrength ,
-        },
-        {
-            type: "range",
-            id: "yStrength",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            label: "Гравитация Y",
-            initialValue: FORCE_SETTINGS.yStrength ,
-        },
-        {
-            type: "range",
-            id: "linkStrength",
-            min: 0,
-            max: 1,
-            step: 0.01,
-            label: "Натяжение связей",
-            initialValue: FORCE_SETTINGS.linkStrength ,
-        },
-        {
-            type: "range",
-            id: "linkDistance",
-            min: 0,
-            max: 300,
-            step: 0.1,
-            label: "Расстояние связей",
-            initialValue: FORCE_SETTINGS.linkDistance ,
-        },
-        {
-            id: "collideOn",
-            type: "checkbox",
-            initialValue: FORCE_SETTINGS.collideOn,
-            label: "Отталкивание",
-        },
-    ];
-    return keys ? FORCE_CONTROLS.filter((control) => keys.includes(control.id)) : FORCE_CONTROLS;
+/* eslint-disable id-length */
+function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkSettings, }) {
+    if (!areaRect)
+        return undefined;
+    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+    return d3Array.greatest(links, (link) => {
+        if (isNearLink(pointerX, pointerY, link, linkSettings.hoverLinkThreshold))
+            return link.index;
+    });
 }
-function getGraphControls(keys) {
-    const GRAPH_CONTROLS = [
-        {
-            id: "highlightSizingAdditional",
-            initialValue: GRAPH_SETTINGS.highlightSizingAdditional,
-            max: 10,
-            min: 0.1,
-            step: 0.01,
-            type: "range",
-            label: "Дополнительный размер при анимации",
-        },
-        {
-            id: "highlightColorFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightColorFadingMin,
-            max: 1,
-            min: 0.01,
-            step: 0.01,
-            type: "range",
-            label: "Граница затухания цвета",
-        },
-        {
-            id: "highlightTextShiftXAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextShiftXAdditional,
-            max: 50,
-            min: 0,
-            step: 0.1,
-            type: "range",
-            label: "Смещение текста по X при анимации",
-        },
-        {
-            id: "highlightTextShiftYAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextShiftYAdditional,
-            max: 50,
-            min: 0,
-            step: 0.1,
-            type: "range",
-            label: "Смещение текста по Y при анимации",
-        },
-        {
-            id: "highlightTextSizingAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextSizingAdditional,
-            max: 10,
-            min: 0.1,
-            step: 0.1,
-            type: "range",
-            label: "Увеличение текста при анимации",
-        },
-        {
-            id: "highlightTextWeightAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextWeightAdditional,
-            max: 1000,
-            min: 0,
-            step: 100,
-            type: "range",
-            label: "Увеличение жирности текста при анимации",
-        },
-        {
-            id: "highlightTextWidthAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextWidthAdditional,
-            max: 100,
-            min: 0,
-            step: 0.1,
-            type: "range",
-            label: "Увеличение ширины текста при анимации",
-        },
-        {
-            id: "highlightTextFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightTextFadingMin,
-            max: 1,
-            min: 0,
-            step: 0.01,
-            type: "range",
-            label: "Граница затухания текста при анимации",
-        },
-        {
-            id: "highlightLinkFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightLinkFadingMin,
-            max: 1,
-            min: 0,
-            step: 0.01,
-            type: "range",
-            label: "Граница затухания связи при анимации",
-        },
-        {
-            id: "highlightFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightFadingMin,
-            max: 1,
-            min: 0,
-            step: 0.01,
-            type: "range",
-            label: "Граница затухания ноды при анимации",
-        },
-        {
-            id: "highlightArrowFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightArrowFadingMin,
-            max: 1,
-            min: 0,
-            step: 0.01,
-            type: "range",
-            label: "Граница затухания стрелки при анимации",
-        },
-        {
-            id: "highlightDownStep",
-            initialValue: GRAPH_SETTINGS.highlightDownStep,
-            max: 1,
-            min: 0.01,
-            step: 0.01,
-            type: "range",
-            label: "Скорость отмены анимации",
-        },
-        {
-            id: "highlightUpStep",
-            initialValue: GRAPH_SETTINGS.highlightUpStep,
-            max: 1,
-            min: 0.01,
-            step: 0.01,
-            type: "range",
-            label: "Скорость применения анимации",
-        },
-        {
-            id: "nodeRadiusInitial",
-            initialValue: GRAPH_SETTINGS.nodeRadiusInitial,
-            max: 50,
-            min: 0.1,
-            step: 0.1,
-            type: "range",
-            label: "Изначальный радиус ноды",
-        },
-        {
-            id: "nodeRadiusCoefficient",
-            initialValue: GRAPH_SETTINGS.nodeRadiusCoefficient,
-            max: 100,
-            min: 0.1,
-            step: 0.1,
-            type: "range",
-            label: "Количество связей для увеличения радиуса",
-        },
-        {
-            id: "nodeRadiusFactor",
-            initialValue: GRAPH_SETTINGS.nodeRadiusFactor,
-            max: 50,
-            min: 0.1,
-            step: 0.1,
-            type: "range",
-            label: "Коэффициент увеличения радиуса",
-        },
-        {
-            id: "highlightOnlyRoot",
-            type: "checkbox",
-            initialValue: GRAPH_SETTINGS.highlightOnlyRoot,
-            label: "Дополнительная анимация только главное цели",
-        },
-        {
-            id: "stickAfterDrag",
-            type: "checkbox",
-            initialValue: GRAPH_SETTINGS.stickAfterDrag,
-            label: "Фиксировании ноды после перетаскивания",
-        },
-        {
-            id: "highlightByHover",
-            type: "checkbox",
-            initialValue: GRAPH_SETTINGS.highlightByHover,
-            label: "Анимации при наведении",
-        },
-        {
-            id: "nodeRadiusFlexible",
-            type: "checkbox",
-            initialValue: GRAPH_SETTINGS.nodeRadiusFlexible,
-            label: "Гибкий радиус ноды",
-        },
-    ];
-    return keys ? GRAPH_CONTROLS.filter((control) => keys.includes(control.id)) : GRAPH_CONTROLS;
+function isNearLink(mouseX, mouseY, link, threshold = 2) {
+    if (!jsHelpers.isObject(link.source) || !jsHelpers.isObject(link.target))
+        return false;
+    const x1 = link.source.x;
+    const y1 = link.source.y;
+    const x2 = link.target.x;
+    const y2 = link.target.y;
+    const distance = distanceToLine(mouseX, mouseY, x1, y1, x2, y2);
+    return distance <= threshold;
+}
+function distanceToLine(x, y, x1, y1, x2, y2) {
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSq = C * C + D * D;
+    let param = -1;
+    if (lenSq !== 0) {
+        param = dot / lenSq;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
+    }
+    else {
+        xx = x1 + param * C;
+        yy = y1 + param * D;
+    }
+    const dx = x - xx;
+    const dy = y - yy;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+function initArea() {
+    if (!this.area || !this.context || !this.container) {
+        this.container = d3Selection.create("div")
+            .attr("style", "padding: 0 !important; width: 100%; height: 100%;")
+            .node();
+        if (!this.container)
+            throw new Error("couldn't create container");
+        this.root.appendChild(this.container);
+        const { width, height } = this.root.getBoundingClientRect();
+        this.width = width;
+        this.height = height;
+        this.area = d3Selection.create("canvas")
+            .attr("width", this.dpi * this.width)
+            .attr("height", this.dpi * this.height)
+            .attr("style", `width: 100%; height: 100%; border: none !important;`)
+            .node();
+        if (!this.area)
+            throw new Error("couldn't create canvas");
+        this.container.appendChild(this.area);
+        this.areaRect = this.area.getBoundingClientRect();
+        this.context = this.area.getContext("2d");
+        if (!this.context)
+            throw new Error("couldn't create canvas context");
+        this.context.scale(this.dpi, this.dpi);
+    }
+}
+
+function initDnd() {
+    if (!this.area || !this.nodes)
+        throw new Error("bad init data");
+    const dragHandler = d3Drag.drag()
+        .subject((event) => {
+        if (this.listeners.onDragSubject) {
+            return this.listeners.onDragSubject(event, this.state);
+        }
+        if (!this.areaRect)
+            return;
+        const mouseEvent = event.sourceEvent;
+        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        return d3Array.greatest(this.nodes, (node) => {
+            if (!node.x || !node.y || (jsHelpers.isBoolean(node.drag) && !node.drag))
+                return undefined;
+            return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY);
+        });
+    })
+        .on("start", (event) => {
+        this.listeners.onStartDragFinished?.(event, this.state);
+    })
+        .on("drag", (event) => {
+        if (!this.isDragging) {
+            this.isDragging = true;
+            if (this.simulation)
+                this.simulation.alphaTarget(0.3).restart();
+        }
+        if (!this.areaRect)
+            return;
+        const mouseEvent = event.sourceEvent;
+        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        event.subject.fx = pointerX;
+        event.subject.fy = pointerY;
+        this.listeners.onMoveDragFinished?.(event, this.state);
+    })
+        .on("end", (event) => {
+        this.isDragging = false;
+        if (!event.active && this.simulation)
+            this.simulation.alphaTarget(0);
+        const sourceEvent = event.sourceEvent;
+        if (sourceEvent.altKey && this.areaRect) {
+            const [pointerX, pointerY] = pointerGetter(sourceEvent, this.areaRect, this.areaTransform);
+            event.subject.fx = pointerX;
+            event.subject.fy = pointerY;
+        }
+        else {
+            event.subject.fx = null;
+            event.subject.fy = null;
+        }
+        this.listeners.onEndDragFinished?.(event, this.state);
+    });
+    d3Selection.select(this.area).call(dragHandler);
+}
+
+function getDrawLink(state) {
+    return function drawLink(link, index) {
+        if (!this.context ||
+            typeof link.source !== "object" ||
+            typeof link.target !== "object" ||
+            !link.source.x ||
+            !link.source.y ||
+            !link.target.x ||
+            !link.target.y)
+            return;
+        if (!link.source._visible && !link.target._visible)
+            return;
+        const id = `${link.target.id}${link.source.id}`;
+        let linkOptions;
+        if (this.linkSettings.cache && this.linkOptionsCache[id]) {
+            linkOptions = this.linkOptionsCache[id];
+        }
+        else {
+            linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
+            if (this.linkSettings.cache) {
+                this.linkOptionsCache[id] = linkOptions;
+            }
+        }
+        if (linkOptions.drawLink) {
+            linkOptions.drawLink(link, linkOptions, state);
+            return;
+        }
+        let alpha = linkOptions.alpha;
+        let arrowAlpha = this.linkSettings.arrowByHighlight ? 0 : linkOptions.arrowAlpha;
+        /** NODE HIGHLIGHT */
+        if (this.highlightedNeighbors && this.highlightedNode) {
+            /** Not highlighted */
+            if (this.highlightedNode.id != link.source.id && this.highlightedNode.id != link.target.id) {
+                if (this.linkSettings.highlightByNodeLinkFading) {
+                    const min = this.linkSettings.highlightByNodeLinkFadingMin < alpha
+                        ? this.linkSettings.highlightByNodeLinkFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.linkSettings.arrow &&
+                    this.linkSettings.highlightByNodeArrowFading &&
+                    !this.linkSettings.arrowByHighlight) {
+                    const min = this.linkSettings.highlightByNodeArrowFadingMin < arrowAlpha
+                        ? this.linkSettings.highlightByNodeArrowFadingMin
+                        : arrowAlpha;
+                    arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                }
+            }
+            else {
+                // eslint-disable-next-line no-lonely-if
+                if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {
+                    /** Highlighted */
+                    arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                }
+            }
+        }
+        /** LINK HIGHLIGHT */
+        if (this.highlightedNeighbors && this.highlightedLink) {
+            /** Not highlighted */
+            if (this.highlightedLink !== link) {
+                if (this.linkSettings.highlightByLinkLinkFading) {
+                    const min = this.linkSettings.highlightByLinkLinkFadingMin < alpha
+                        ? this.linkSettings.highlightByLinkLinkFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.linkSettings.arrow &&
+                    this.linkSettings.highlightByLinkArrowFading &&
+                    !this.linkSettings.arrowByHighlight) {
+                    const min = this.linkSettings.highlightByLinkArrowFadingMin < arrowAlpha
+                        ? this.linkSettings.highlightByLinkArrowFadingMin
+                        : arrowAlpha;
+                    arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                }
+            }
+            else {
+                // eslint-disable-next-line no-lonely-if
+                if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {
+                    /** Highlighted */
+                    arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                }
+            }
+        }
+        /** Link */
+        this.context.beginPath();
+        this.context.globalAlpha = alpha;
+        this.context.strokeStyle = linkOptions.color;
+        this.context.lineWidth = linkOptions.width;
+        let xStart = link.source.x;
+        let yStart = link.source.y;
+        let xEnd = link.target.x;
+        let yEnd = link.target.y;
+        let linkDistance = 0;
+        if (this.linkSettings.pretty || this.linkSettings.particleFlexSpeed) {
+            const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
+            const position = calculateLinkPositionByNode(link, isHasArrow ? linkOptions.arrowSize : 0);
+            if (position) {
+                xStart = position.x1;
+                xEnd = position.x2;
+                yStart = position.y1;
+                yEnd = position.y2;
+                linkDistance = position.distance;
+            }
+        }
+        this.context.moveTo(xStart, yStart);
+        this.context.lineTo(xEnd, yEnd);
+        this.context.stroke();
+        /** Particle */
+        if (this.linkSettings.particles &&
+            ((this.highlightedNode &&
+                (this.highlightedNode.id === link.source.id ||
+                    this.highlightedNode.id === link.target.id)) ||
+                (this.highlightedLink && this.highlightedLink === link))) {
+            const particleSteps = this.linkSettings.particleFlexSpeed
+                ? linkDistance <= 0
+                    ? 0
+                    : linkDistance * this.linkSettings.particleFlexSpeedCoefficient
+                : linkOptions.particleSteps;
+            const particleCount = linkOptions.particleCount;
+            if (!this.particles[id]) {
+                const sourceId = link.source.id;
+                const targetId = link.target.id;
+                const particles = [];
+                let prevParticle;
+                for (let i = 0; i < particleCount; i++) {
+                    const particle = {
+                        step: 0,
+                        sourceId,
+                        targetId,
+                        prev: prevParticle,
+                        next: undefined,
+                        index: i,
+                    };
+                    if (prevParticle)
+                        prevParticle.next = particle;
+                    particles.push(particle);
+                    prevParticle = particle;
+                }
+                if (particles.length >= 2) {
+                    particles[0].prev = particles[particles.length - 1];
+                    particles[particles.length - 1].next = particles[0];
+                }
+                this.particles[id] = particles;
+            }
+            if (particleSteps !== 0) {
+                this.particles[id].forEach((particle) => {
+                    if (!this.context)
+                        return;
+                    const distance = particleSteps / particleCount;
+                    getParticlePosition({
+                        distance,
+                        particle,
+                        totalSteps: particleSteps,
+                        xEnd,
+                        xStart,
+                        yEnd,
+                        yStart,
+                    });
+                    if (particle.x != undefined && particle.y != undefined) {
+                        this.context.beginPath();
+                        this.context.strokeStyle = linkOptions.particleBorderColor;
+                        this.context.lineWidth = linkOptions.particleBorderWidth;
+                        this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
+                        this.context.fillStyle = linkOptions.particleColor;
+                        this.context.fill();
+                        this.context.stroke();
+                    }
+                });
+            }
+        }
+        /** Arrow */
+        if (this.linkSettings.arrow && arrowAlpha > 0) {
+            const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByNode(link) ?? {
+                x1: 0,
+                x2: 0,
+                y1: 0,
+                y2: 0,
+            };
+            this.context.beginPath();
+            this.context.globalAlpha = arrowAlpha;
+            this.context.strokeStyle = linkOptions.arrowBorderColor;
+            this.context.lineWidth = linkOptions.arrowBorderWidth;
+            this.context.fillStyle = linkOptions.arrowColor;
+            const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
+            this.context.moveTo(xEnd, yEnd);
+            this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6));
+            this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6));
+            this.context.closePath();
+            this.context.fill();
+            this.context.stroke();
+        }
+        if (linkOptions.drawExtraLink) {
+            linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
+        }
+    };
+}
+
+const SPACE = " ";
+function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }) {
+    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
+    context.fillStyle = textColor;
+    context.textAlign = textAlign;
+    if (cachedNodeText[id] != undefined) {
+        cachedNodeText[id].forEach((line, index) => {
+            context.fillText(line, x, y + index * textSize + index * textGap);
+        });
+        return;
+    }
+    if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {
+        cachedNodeText[id] = [text];
+        context.fillText(text, x, y);
+        return;
+    }
+    const lines = getTextLines({
+        context,
+        maxWidth,
+        text,
+        textAlign,
+        textColor,
+        textFont,
+        textSize,
+        textStyle,
+        textWeight,
+    });
+    cachedNodeText[id] = lines;
+    lines.forEach((line, index) => {
+        context.fillText(line, x, y + index * textSize + index * textGap);
+    });
+}
+function getTextLines({ context, textAlign, textColor, textFont, textStyle, textWeight, textSize, text, maxWidth, }) {
+    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
+    context.fillStyle = textColor;
+    context.textAlign = textAlign;
+    const spaceWidth = context.measureText(" ").width;
+    const lines = [];
+    let lineWidth = 0;
+    let line = "";
+    for (const word of text.split(" ")) {
+        const size = context.measureText(word).width;
+        lineWidth += size + spaceWidth;
+        if (line === "") {
+            line = word;
+            continue;
+        }
+        if (lineWidth > maxWidth) {
+            lineWidth = 0;
+            lines.push(line);
+            line = word;
+        }
+        else {
+            lineWidth += spaceWidth;
+            line += `${SPACE}${word}`;
+        }
+    }
+    if (line !== "")
+        lines.push(line);
+    return lines;
+}
+
+function getDrawNode(nodeRenders, textRenders, state) {
+    return function drawNode(node, index) {
+        if (!this.context || !node.x || !node.y)
+            return;
+        let nodeOptions;
+        if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
+            nodeOptions = this.nodeOptionsCache[node.id];
+        }
+        else {
+            nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+            if (this.nodeSettings.cache) {
+                this.nodeOptionsCache[node.id] = nodeOptions;
+            }
+        }
+        if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
+            nodeRenders.push(() => {
+                nodeOptions?.nodeDraw?.(node, nodeOptions, state);
+            });
+            textRenders.push(() => {
+                nodeOptions?.textDraw?.(node, nodeOptions, state);
+            });
+            return;
+        }
+        let alpha = nodeOptions.alpha;
+        let color = nodeOptions.color;
+        let radiusInitial = nodeOptions.radius;
+        let widthInitial = nodeOptions.width;
+        let heightInitial = nodeOptions.height;
+        let textAlpha = nodeOptions.textAlpha;
+        let textSize = nodeOptions.textSize;
+        let textShiftX = nodeOptions.textShiftX;
+        let textShiftY = nodeOptions.textShiftY;
+        let textWeight = nodeOptions.textWeight;
+        let textWidth = nodeOptions.textWidth;
+        /** Node Highlight */
+        if (this.highlightedNeighbors && this.highlightedNode) {
+            /** Not highlighted */
+            if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
+                if (this.nodeSettings.highlightByNodeNodeFading) {
+                    const min = this.nodeSettings.highlightByNodeNodeFadingMin < alpha
+                        ? this.nodeSettings.highlightByNodeNodeFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByNodeTextFading) {
+                    const min = this.nodeSettings.highlightByNodeTextFadingMin < textAlpha
+                        ? this.nodeSettings.highlightByNodeTextFadingMin
+                        : textAlpha;
+                    textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByNodeNodeColor) {
+                    const colorRgb = extractRgb(colorToRgb(color));
+                    if (colorRgb) {
+                        const colorRgbFade = fadeRgb(colorRgb, this.nodeSettings.highlightByNodeNodeColorFadingMin);
+                        const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                        color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                    }
+                }
+            }
+            else if (!this.nodeSettings.highlightByNodeOnlyRoot ||
+                (this.nodeSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)) {
+                /** Highlighted */
+                if (this.nodeSettings.highlightByNodeNodeSizing && nodeOptions.shape === "circle") {
+                    radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByNodeNodeSizingAdditional, this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkNodeSizing &&
+                    (nodeOptions.shape === "square" || nodeOptions.shape === "text")) {
+                    const widthCoefficient = animationByProgress(1, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    const heightCoefficient = animationByProgress(1, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    widthInitial *= widthCoefficient;
+                    heightInitial *= heightCoefficient;
+                }
+                if (this.nodeSettings.highlightByNodeTextSizing) {
+                    textSize = animationByProgress(textSize, this.nodeSettings.highlightByNodeTextSizingAdditional, this.highlightProgress);
+                    textShiftX = animationByProgress(textShiftX, this.nodeSettings.highlightByNodeTextShiftXAdditional, this.highlightProgress);
+                    textShiftY = animationByProgress(textShiftY, this.nodeSettings.highlightByNodeTextShiftYAdditional, this.highlightProgress);
+                    textWeight = animationByProgress(textWeight, this.nodeSettings.highlightByNodeTextWeightAdditional, this.highlightProgress);
+                    textWidth = animationByProgress(textWidth, this.nodeSettings.highlightByNodeTextWidthAdditional, this.highlightProgress);
+                }
+            }
+        }
+        /** LinkHighlight */
+        if (this.highlightedNeighbors && this.highlightedLink) {
+            /** Not highlighted */
+            if (!this.highlightedNeighbors.has(node.id) &&
+                this.highlightedLink.source !== node &&
+                this.highlightedLink.target !== node) {
+                if (this.nodeSettings.highlightByLinkNodeFading) {
+                    const min = this.nodeSettings.highlightByLinkNodeFadingMin < alpha
+                        ? this.nodeSettings.highlightByLinkNodeFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkTextFading) {
+                    const min = this.nodeSettings.highlightByLinkTextFadingMin < textAlpha
+                        ? this.nodeSettings.highlightByLinkTextFadingMin
+                        : textAlpha;
+                    textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkNodeColor) {
+                    const colorRgb = extractRgb(colorToRgb(color));
+                    if (colorRgb) {
+                        const colorRgbFade = fadeRgb(colorRgb, this.nodeSettings.highlightByLinkNodeColorFadingMin);
+                        const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                        color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                    }
+                }
+            }
+            else {
+                /** Highlighted */
+                if (this.nodeSettings.highlightByLinkNodeSizing && nodeOptions.shape === "circle") {
+                    radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByLinkNodeSizingAdditional, this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkNodeSizing &&
+                    (nodeOptions.shape === "square" ||
+                        nodeOptions.shape === "text" ||
+                        nodeOptions.shape === "icon")) {
+                    const widthCoefficient = animationByProgress(1, this.nodeSettings.highlightByLinkNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    const heightCoefficient = animationByProgress(1, this.nodeSettings.highlightByLinkNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    widthInitial *= widthCoefficient;
+                    heightInitial *= heightCoefficient;
+                }
+                if (this.nodeSettings.highlightByLinkTextSizing) {
+                    textSize = animationByProgress(textSize, this.nodeSettings.highlightByLinkTextSizingAdditional, this.highlightProgress);
+                    textShiftX = animationByProgress(textShiftX, this.nodeSettings.highlightByLinkTextShiftXAdditional, this.highlightProgress);
+                    textShiftY = animationByProgress(textShiftY, this.nodeSettings.highlightByLinkTextShiftYAdditional, this.highlightProgress);
+                    textWeight = animationByProgress(textWeight, this.nodeSettings.highlightByLinkTextWeightAdditional, this.highlightProgress);
+                    textWidth = animationByProgress(textWidth, this.nodeSettings.highlightByLinkTextWidthAdditional, this.highlightProgress);
+                }
+            }
+        }
+        /** Flex radius */
+        const radius = nodeOptions.shape === "circle"
+            ? nodeRadiusGetter({
+                radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                radiusInitial,
+                radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
+                radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                linkCount: node.linkCount,
+            })
+            : radiusInitial;
+        /** Flex size */
+        let height = heightInitial;
+        let width = widthInitial;
+        if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
+            const size = nodeSizeGetter({
+                heightInitial,
+                widthInitial,
+                linkCount: node.linkCount,
+                sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
+                sizeFactor: this.nodeSettings.nodeSizeFactor,
+                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+            });
+            width = size.width;
+            height = size.height;
+        }
+        if (nodeOptions.shape === "text" && nodeOptions.text) {
+            const lines = this.cachedNodeText[node.id] ??
+                getTextLines({
+                    context: this.context,
+                    text: nodeOptions.text,
+                    textAlign: nodeOptions.textAlign,
+                    textColor: nodeOptions.textColor,
+                    textFont: nodeOptions.textFont,
+                    textSize,
+                    maxWidth: width,
+                    textStyle: nodeOptions.textStyle,
+                    textWeight,
+                });
+            if (!this.cachedNodeText[node.id]) {
+                this.cachedNodeText[node.id] = lines;
+            }
+            height =
+                lines.length * textSize +
+                    (lines.length - 1) * nodeOptions.textGap +
+                    nodeOptions.textNodeYPadding;
+            width += nodeOptions.textNodeXPadding;
+        }
+        /** Node parameters */
+        node._radius = radius;
+        node._width = width;
+        node._height = height;
+        node._borderRadius =
+            jsHelpers.isNumber(nodeOptions.borderRadius) && nodeOptions.borderRadius > 0
+                ? Math.min(nodeOptions.borderRadius, nodeOptions.width / 2, nodeOptions.height / 2)
+                : 0;
+        node._shape = nodeOptions.shape ?? "circle";
+        /** Node Visibility */
+        if (!isNodeVisible({
+            height: this.height,
+            width: this.width,
+            transform: this.areaTransform,
+            node,
+        })) {
+            node._visible = false;
+            return;
+        }
+        node._visible = true;
+        /** Node draw */
+        nodeRenders.push(() => {
+            if (!this.context || !node.x || !node.y)
+                return;
+            this.context.beginPath();
+            this.context.globalAlpha = alpha;
+            this.context.lineWidth = nodeOptions.borderWidth;
+            this.context.strokeStyle = nodeOptions.borderColor;
+            this.context.fillStyle = color;
+            switch (nodeOptions.shape) {
+                case "circle": {
+                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    break;
+                }
+                case "square": {
+                    this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                    break;
+                }
+                case "text": {
+                    if (this.nodeSettings.textNodeDebug) {
+                        this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);
+                    }
+                    const lines = this.cachedNodeText[node.id];
+                    if (nodeOptions.text && lines)
+                        drawText({
+                            id: node.id,
+                            cachedNodeText: this.cachedNodeText,
+                            context: this.context,
+                            text: nodeOptions.text,
+                            textAlign: nodeOptions.textAlign,
+                            textColor: nodeOptions.textColor,
+                            textFont: nodeOptions.textFont,
+                            textSize,
+                            x: node.x,
+                            y: node.y + textSize / 4 - (lines.length - 1) * (textSize / 2),
+                            maxWidth: widthInitial,
+                            textStyle: nodeOptions.textStyle,
+                            textWeight,
+                            textGap: nodeOptions.textGap,
+                        });
+                    break;
+                }
+                default: {
+                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    break;
+                }
+            }
+            this.context.fill();
+            this.context.stroke();
+        });
+        if (nodeOptions.nodeExtraDraw) {
+            nodeRenders.push(() => {
+                nodeOptions?.nodeExtraDraw?.(node, {
+                    ...nodeOptions,
+                    radius,
+                    alpha,
+                    color,
+                    textAlpha,
+                    textSize,
+                    textShiftX,
+                    textShiftY,
+                    textWeight,
+                    textWidth,
+                }, state);
+            });
+        }
+        /** Text draw */
+        if (nodeOptions.textVisible && nodeOptions.text && nodeOptions.shape !== "text") {
+            textRenders.push(() => {
+                if (nodeOptions.textDraw) {
+                    nodeOptions.textDraw(node, {
+                        ...nodeOptions,
+                        radius,
+                        alpha,
+                        color,
+                        textAlpha,
+                        textSize,
+                        textShiftX,
+                        textShiftY,
+                        textWeight,
+                        textWidth,
+                    }, state);
+                    return;
+                }
+                if (!this.context || !node.x || !node.y || !nodeOptions.text)
+                    return;
+                this.context.beginPath();
+                this.context.globalAlpha = textAlpha;
+                let y = node.y + textShiftY;
+                if (nodeOptions.shape === "circle") {
+                    y += radius;
+                }
+                if (nodeOptions.shape === "square") {
+                    y += height / 2;
+                }
+                drawText({
+                    id: node.id,
+                    cachedNodeText: this.cachedNodeText,
+                    context: this.context,
+                    text: nodeOptions.text,
+                    textAlign: nodeOptions.textAlign,
+                    textColor: nodeOptions.textColor,
+                    textFont: nodeOptions.textFont,
+                    textSize,
+                    x: node.x + textShiftX,
+                    y,
+                    maxWidth: textWidth,
+                    textStyle: nodeOptions.textStyle,
+                    textWeight,
+                    textGap: nodeOptions.textGap,
+                });
+                if (nodeOptions.textExtraDraw) {
+                    nodeOptions.textExtraDraw(node, {
+                        ...nodeOptions,
+                        radius,
+                        alpha,
+                        color,
+                        textAlpha,
+                        textSize,
+                        textShiftX,
+                        textShiftY,
+                        textWeight,
+                        textWidth,
+                    }, state);
+                }
+            });
+        }
+    };
+}
+
+function initDraw() {
+    function calculateHighlight() {
+        this.highlightDrawing = true;
+        if (!this.highlightWorking && this.highlightProgress > 0) {
+            const highlightDownStep = 1 / this.graphSettings.highlightDownFrames;
+            this.highlightProgress -= highlightDownStep;
+            if (!this.simulationWorking) {
+                return void requestAnimationFrame(() => this.draw());
+            }
+            if (!this.linkSettings.particles)
+                return;
+        }
+        if (this.highlightWorking && this.highlightProgress < 1) {
+            const highlightUpStep = 1 / this.graphSettings.highlightUpFrames;
+            this.highlightProgress += highlightUpStep;
+            if (!this.simulationWorking) {
+                return void requestAnimationFrame(() => this.draw());
+            }
+            if (!this.linkSettings.particles)
+                return;
+        }
+        if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
+            return void requestAnimationFrame(() => this.draw());
+        }
+        if (!this.highlightWorking && this.highlightProgress <= 0) {
+            if (this.highlightedNeighbors || this.highlightedNode || this.highlightedLink) {
+                this.highlightedNeighbors = null;
+                this.highlightedNode = null;
+                this.highlightedLink = null;
+                this.particles = {};
+                if (!this.simulationWorking) {
+                    return void requestAnimationFrame(() => this.draw());
+                }
+            }
+        }
+        this.highlightDrawing = false;
+    }
+    function draw() {
+        if (!this.context)
+            return;
+        const state = this.state;
+        if (this.listeners.onDraw) {
+            this.listeners.onDraw(state, (status) => {
+                this.highlightDrawing = status;
+            }, () => {
+                if (this.highlightedNeighbors)
+                    this.highlightedNeighbors = null;
+                if (this.highlightedNode)
+                    this.highlightedNode = null;
+                if (this.highlightedLink)
+                    this.highlightedLink = null;
+            });
+            return;
+        }
+        this.context.save();
+        this.context.clearRect(0, 0, this.width, this.height);
+        this.context.translate(this.areaTransform.x, this.areaTransform.y);
+        this.context.scale(this.areaTransform.k, this.areaTransform.k);
+        const textRenders = [];
+        const nodeRenders = [];
+        this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
+        /** links */
+        this.links.forEach(getDrawLink(state).bind(this));
+        /** nodes */
+        nodeRenders.forEach((render) => render());
+        textRenders.forEach((render) => render());
+        this.context.restore();
+        this.listeners.onDrawFinished?.(state);
+        calculateHighlight.bind(this)();
+    }
+    if (this.graphSettings.showDrawTime) {
+        return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
+    }
+    return draw.bind(this);
+}
+
+function initPointer() {
+    if (!this.area || !this.nodes)
+        throw new Error("bad init data");
+    function onHover(event) {
+        if (!this.area)
+            return;
+        let currentNode;
+        let currentLink;
+        const checkHighlightNode = this.nodeSettings.highlightByHoverNode && !this.isDragging;
+        const checkHighlightLink = this.linkSettings.highlightByHoverLink && !this.isDragging;
+        if (checkHighlightNode) {
+            currentNode = nodeByPointerGetter({
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                nodes: this.nodes,
+            });
+        }
+        if (currentNode) {
+            this.area.style.cursor = "pointer";
+        }
+        else if (checkHighlightLink) {
+            currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            if (currentLink) {
+                this.area.style.cursor = "pointer";
+            }
+            else {
+                this.area.style.cursor = "default";
+            }
+        }
+        else {
+            this.area.style.cursor = "default";
+        }
+        if (currentNode && this.highlightedNode !== currentNode) {
+            this.highlightedNode = currentNode;
+            this.highlightedLink = null;
+            this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
+            this.highlightWorking = true;
+            if (!this.simulationWorking && !this.highlightDrawing)
+                requestAnimationFrame(() => {
+                    this.draw();
+                });
+        }
+        else if (currentLink &&
+            checkType(currentLink.source, lodash.isObject(currentLink.source)) &&
+            checkType(currentLink.target, lodash.isObject(currentLink.target)) &&
+            this.highlightedLink !== currentLink) {
+            this.highlightProgress = 0;
+            this.highlightedLink = currentLink;
+            this.highlightedNode = null;
+            this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);
+            this.highlightWorking = true;
+            if (!this.simulationWorking && !this.highlightDrawing)
+                requestAnimationFrame(() => {
+                    this.draw();
+                });
+        }
+        else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
+            this.highlightWorking = false;
+            if (!this.simulationWorking && !this.highlightDrawing)
+                requestAnimationFrame(() => {
+                    this.draw();
+                });
+        }
+        if (!this.listeners.onMove)
+            return;
+        if (!currentNode && !checkHighlightNode)
+            currentNode = nodeByPointerGetter({
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                nodes: this.nodes,
+            });
+        if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
+            currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+        }
+        if (!currentNode)
+            return void this.listeners.onMove(event, currentNode, currentLink);
+    }
+    function onWheelClick(event) {
+        if (this.isDragging ||
+            !this.listeners.onWheelClick ||
+            !("button" in event) ||
+            event.button !== 1)
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onWheelClick(event, undefined, currentLink);
+        }
+        return void this.listeners.onWheelClick(event, currentNode, undefined);
+    }
+    function onRightClick(event) {
+        if (!this.listeners.onContextMenu)
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onContextMenu(event, undefined, currentLink);
+        }
+        return void this.listeners.onContextMenu(event, currentNode, undefined);
+    }
+    function onDoubleClick(event) {
+        if (!this.listeners.onDoubleClick)
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onDoubleClick(event, undefined, currentLink);
+        }
+        return void this.listeners.onDoubleClick(event, currentNode, undefined);
+    }
+    function onClick(event) {
+        if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onClick(event, undefined, currentLink);
+        }
+        return void this.listeners.onClick(event, currentNode, undefined);
+    }
+    /** hover */
+    this.area.addEventListener("mousemove", onHover.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    this.area.addEventListener("touchmove", onHover.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** dblclick */
+    this.area.addEventListener("dblclick", onDoubleClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** wheel click */
+    this.area.addEventListener("mousedown", onWheelClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** click */
+    this.area.addEventListener("click", onClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** right click */
+    this.area.addEventListener("contextmenu", onRightClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
 }
-function getNodeControls(keys) {
-    const NODE_CONTROLS = [
-        {
-            id: "alpha",
-            type: "range",
-            max: 1,
-            min: 0,
-            step: 0.1,
-            label: "Прозрачность",
-            initialValue: NODE_OPTIONS.alpha,
-        },
-        {
-            id: "radius",
-            type: "range",
-            max: 50,
-            min: 1,
-            step: 1,
-            label: "Радиус",
-            initialValue: NODE_OPTIONS.radius,
-        },
-        {
-            id: "borderWidth",
-            type: "range",
-            max: 5,
-            min: 0,
-            step: 0.1,
-            label: "Толщина границы",
-            initialValue: NODE_OPTIONS.borderWidth,
-        },
-        {
-            id: "borderColor",
-            type: "color",
-            initialValue: "#000000FF",
-            label: "Цвет границы",
-        },
-        {
-            id: "color",
-            type: "color",
-            initialValue: "#000000FF",
-            label: "Цвет",
-        },
-        {
-            id: "textAlpha",
-            type: "range",
-            max: 1,
-            min: 0,
-            step: 0.1,
-            label: "Прозрачность текста",
-            initialValue: NODE_OPTIONS.textAlpha,
-        },
-        {
-            id: "textWidth",
-            type: "range",
-            max: 200,
-            min: 5,
-            step: 1,
-            label: "Ширина текста",
-            initialValue: NODE_OPTIONS.textWidth,
-        },
-        {
-            id: "textShiftX",
-            type: "range",
-            max: 100,
-            min: 0,
-            step: 0.1,
-            label: "Смещение X текста",
-            initialValue: NODE_OPTIONS.textShiftX,
-        },
-        {
-            id: "textShiftY",
-            type: "range",
-            max: 100,
-            min: 0,
-            step: 0.1,
-            label: "Смещение Y текста",
-            initialValue: 4,
-        },
-        {
-            id: "textWeight",
-            type: "range",
-            max: 1000,
-            min: 100,
-            step: 100,
-            label: "Жирность текста",
-            initialValue: NODE_OPTIONS.textWeight,
-        },
-        {
-            id: "textGap",
-            type: "range",
-            max: 30,
-            min: 0,
-            step: 0.1,
-            label: "Расстояние между строками",
-            initialValue: NODE_OPTIONS.textGap,
-        },
-        {
-            id: "highlightFading",
-            type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightFading,
-            label: "Анимация затухания",
-        },
-        {
-            id: "highlightColor",
-            type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightColor,
-            label: "Анимация затухания цвета",
-        },
-        {
-            id: "highlightSizing",
-            type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightSizing,
-            label: "Анимация размера",
-        },
-        {
-            id: "highlightTextFading",
-            type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightTextFading,
-            label: "Анимация затухания текста",
-        },
-        {
-            id: "highlightTextSizing",
-            type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightTextSizing,
-            label: "Анимация размера текста",
-        },
-    ];
-    return keys ? NODE_CONTROLS.filter((control) => keys.includes(control.id)) : NODE_CONTROLS;
+
+function initResize() {
+    if (!this.area)
+        throw new Error("bad init data");
+    let initialResizeCall = true;
+    const abortController = this.eventAbortController;
+    const observer = new ResizeObserver(() => {
+        if (initialResizeCall) {
+            initialResizeCall = false;
+            return;
+        }
+        if (abortController.signal.aborted) {
+            observer.disconnect();
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.updateSize();
+        });
+    });
+    document.addEventListener("scroll", this.updateRect.bind(this), {
+        capture: true,
+        passive: true,
+        signal: abortController.signal,
+    });
+    observer.observe(this.area);
 }
-function getLinkControls(keys) {
-    const LINK_CONTROLS = [
-        {
-            id: "alpha",
-            type: "range",
-            max: 1,
-            min: 0,
-            step: 0.1,
-            label: "Прозрачность",
-            initialValue: LINK_OPTIONS.alpha,
-        },
-        {
-            id: "width",
-            type: "range",
-            max: 10,
-            min: 0.1,
-            step: 0.1,
-            label: "Толщина",
-            initialValue: 0.1,
-        },
-        {
-            id: "arrowAlpha",
-            type: "range",
-            max: 1,
-            min: 0,
-            step: 0.1,
-            label: "Прозрачность стрелки",
-            initialValue: LINK_OPTIONS.arrowAlpha,
-        },
-        {
-            id: "arrowSize",
-            type: "range",
-            max: 10,
-            min: 0.1,
-            step: 0.1,
-            label: "Размер стрелки",
-            initialValue: LINK_OPTIONS.arrowSize,
-        },
-        {
-            id: "particleAlpha",
-            type: "range",
-            max: 1,
-            min: 0,
-            step: 0.1,
-            label: "Прозрачность частиц",
-            initialValue: LINK_OPTIONS.particleAlpha,
-        },
-        {
-            id: "particleRadius",
-            type: "range",
-            max: 10,
-            min: 0.1,
-            step: 0.1,
-            label: "Радиус частиц",
-            initialValue: LINK_OPTIONS.particleRadius,
-        },
-        {
-            id: "particleCount",
-            type: "range",
-            max: 20,
-            min: 1,
-            step: 1,
-            label: "Количество частиц",
-            initialValue: LINK_OPTIONS.particleCount,
-        },
-        {
-            id: "particleSteps",
-            type: "range",
-            max: 200,
-            min: 1,
-            step: 1,
-            label: "Количество кадров у частиц",
-            initialValue: LINK_OPTIONS.particleSteps,
-        },
-        {
-            id: "color",
-            type: "color",
-            initialValue: "#000000FF",
-            label: "Цвет",
-        },
-        {
-            id: "arrowColor",
-            type: "color",
-            initialValue: "#000000FF",
-            label: "Цвет стрелки",
-        },
-        {
-            id: "particleColor",
-            type: "color",
-            initialValue: "#000000FF",
-            label: "Цвет частиц",
-        },
-        {
-            id: "highlightFading",
-            type: "checkbox",
-            label: "Анимация Затухания",
-            initialValue: LINK_OPTIONS.highlightFading,
-        },
-        {
-            id: "pretty",
-            type: "checkbox",
-            label: "Обсчет соединения",
-            initialValue: LINK_OPTIONS.pretty,
-        },
-        {
-            id: "arrow",
-            type: "checkbox",
-            label: "Стрелка",
-            initialValue: LINK_OPTIONS.arrow,
-        },
-        {
-            id: "arrowHighlightFading",
-            type: "checkbox",
-            label: "Анимация затухания стрелки",
-            initialValue: LINK_OPTIONS.arrowHighlightFading,
-        },
-        {
-            id: "arrowReverseAppear",
-            type: "checkbox",
-            label: "Появление стрелки при анимации",
-            initialValue: LINK_OPTIONS.arrowReverseAppear,
-        },
-    ];
-    return keys ? LINK_CONTROLS.filter((control) => keys.includes(control.id)) : LINK_CONTROLS;
+
+function initSimulation() {
+    if (!this.simulation) {
+        this.simulation = d3Force.forceSimulation()
+            .nodes(this.nodes)
+            .force("link", d3Force.forceLink(this.links).id(this.nodeSettings.idGetter))
+            .on("tick", () => {
+            this.draw();
+        })
+            .on("end", () => {
+            this.listeners.onSimulationEnd?.(this.state);
+            if (this.graphSettings.showDrawTime) {
+                getDrawTime();
+                // eslint-disable-next-line no-console
+                console.log(`nodes: ${this.nodes.length} | links: ${this.links.length}`);
+                resetDrawTime();
+            }
+        });
+        initSimulationForces.call(this);
+    }
+}
+function initSimulationForces() {
+    if (!this.simulation)
+        return;
+    const linkForce = this.simulation.force("link");
+    if (!linkForce)
+        return;
+    if ((!this.forceSettings.forces || !this.forceSettings.xForce) && this.simulation.force("x")) {
+        this.simulation.force("x", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.yForce) && this.simulation.force("y")) {
+        this.simulation.force("y", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.chargeForce) &&
+        this.simulation.force("charge")) {
+        this.simulation.force("charge", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.centerForce) &&
+        this.simulation.force("center")) {
+        this.simulation.force("center", null);
+    }
+    if (!this.forceSettings.forces || !this.forceSettings.linkForce) {
+        linkForce.distance(0).strength(0).iterations(0);
+    }
+    if (this.forceSettings.forces && this.forceSettings.linkForce) {
+        linkForce
+            .distance(this.forceSettings.linkDistance)
+            .strength(this.forceSettings.linkStrength)
+            .iterations(this.forceSettings.linkIterations);
+    }
+    if (this.forceSettings.forces && this.forceSettings.xForce) {
+        this.simulation.force("x", d3Force.forceX(this.forceSettings.xPosition).strength(this.forceSettings.xStrength));
+    }
+    if (this.forceSettings.forces && this.forceSettings.yForce) {
+        this.simulation.force("y", d3Force.forceY(this.forceSettings.yPosition).strength(this.forceSettings.yStrength));
+    }
+    if (this.forceSettings.forces && this.forceSettings.chargeForce) {
+        this.simulation.force("charge", d3Force.forceManyBody()
+            .strength(this.forceSettings.chargeStrength)
+            .distanceMax(this.forceSettings.chargeDistanceMax)
+            .distanceMin(this.forceSettings.chargeDistanceMin));
+    }
+    if (this.forceSettings.forces && this.forceSettings.centerForce) {
+        this.simulation.force("center", d3Force.forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
+    }
+    initCollideForce.call(this, true);
 }
-
-let countTime = 0;
-let countOperation = 0;
-function setDrawTime(cb, showEveryTick) {
-    return () => {
-        const start = performance.now();
-        cb();
-        const end = performance.now();
-        const result = end - start;
-        countTime += result;
-        countOperation++;
-        if (showEveryTick) {
-            const average = countTime / countOperation;
-            // eslint-disable-next-line no-console
-            console.log("average draw: ", average, "current draw: ", result);
+function initCollideForce(forceUpdate) {
+    if (!this.simulation)
+        return;
+    if ((!this.forceSettings.collideForce || !this.forceSettings.forces) &&
+        this.simulation.force("collide")) {
+        this.simulation.force("collide", null);
+    }
+    if (this.forceSettings.forces && this.forceSettings.collideForce) {
+        const isHasMax = this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;
+        const isMaxCollideNodes = isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;
+        const isMaxCollideLinks = isHasMax && this.forceSettings.collideOffMax.links < this.links.length;
+        if (isMaxCollideNodes && isMaxCollideLinks) {
+            this.simulation.force("collide", null);
         }
-    };
+        else if (!this.simulation.force("collide") || forceUpdate) {
+            this.simulation.force("collide", d3Force.forceCollide()
+                .radius((node, index) => {
+                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                switch (nodeOptions.shape) {
+                    case "circle": {
+                        if (this.forceSettings.collideRadius) {
+                            return nodeIterationExtractor(node, index, this.nodes, this.state, this.forceSettings.collideRadius, undefined);
+                        }
+                        const radius = nodeRadiusGetter({
+                            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                            radiusInitial: nodeOptions.radius,
+                            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
+                            radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                            linkCount: node.linkCount,
+                        });
+                        return radius + this.forceSettings.collideAdditionalRadius;
+                    }
+                    case "square": {
+                        const { height, width } = nodeSizeGetter({
+                            heightInitial: nodeOptions.width,
+                            widthInitial: nodeOptions.height,
+                            linkCount: node.linkCount,
+                            sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
+                            sizeFactor: this.nodeSettings.nodeSizeFactor,
+                            sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                        });
+                        return (Math.sqrt(width ** 2 + height ** 2) / 2 +
+                            this.forceSettings.collideAdditionalRadius);
+                    }
+                    case "text": {
+                        let { height, width } = nodeSizeGetter({
+                            heightInitial: nodeOptions.width,
+                            widthInitial: nodeOptions.height,
+                            linkCount: node.linkCount,
+                            sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
+                            sizeFactor: this.nodeSettings.nodeSizeFactor,
+                            sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                        });
+                        if (this.context && nodeOptions.text) {
+                            const lines = this.cachedNodeText[node.id] ??
+                                getTextLines({
+                                    context: this.context,
+                                    text: nodeOptions.text,
+                                    textAlign: nodeOptions.textAlign,
+                                    textColor: nodeOptions.textColor,
+                                    textFont: nodeOptions.textFont,
+                                    textSize: nodeOptions.textSize,
+                                    maxWidth: width,
+                                    textStyle: nodeOptions.textStyle,
+                                    textWeight: nodeOptions.textWeight,
+                                });
+                            height =
+                                lines.length * nodeOptions.textSize +
+                                    (lines.length - 1) * nodeOptions.textGap +
+                                    nodeOptions.textNodeYPadding;
+                            width += nodeOptions.textNodeXPadding;
+                        }
+                        return (Math.sqrt(width ** 2 + height ** 2) / 2 +
+                            this.forceSettings.collideAdditionalRadius);
+                    }
+                    default: {
+                        if (this.forceSettings.collideRadius) {
+                            return nodeIterationExtractor(node, index, this.nodes, this.state, this.forceSettings.collideRadius, undefined);
+                        }
+                        const radius = nodeRadiusGetter({
+                            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                            radiusInitial: nodeOptions.radius,
+                            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
+                            radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                            linkCount: node.linkCount,
+                        });
+                        return radius + this.forceSettings.collideAdditionalRadius;
+                    }
+                }
+            })
+                .strength(this.forceSettings.collideStrength)
+                .iterations(this.forceSettings.collideIterations));
+        }
+    }
 }
-function getDrawTime() {
-    const average = countTime / countOperation;
-    // eslint-disable-next-line no-console
-    console.log("average draw: ", average);
+
+function initZoom(currentZoom) {
+    if (!this.area)
+        throw new Error("bad init data");
+    const zoomInstance = d3Zoom.zoom()
+        .scaleExtent(this.graphSettings.zoomExtent)
+        .on("zoom", (event) => {
+        this.listeners.onZoom?.(event);
+        this.areaTransform = event.transform;
+        this.linkOptionsCache = {};
+        this.nodeOptionsCache = {};
+        if (!this.simulationWorking && !this.highlightWorking)
+            requestAnimationFrame(() => this.draw());
+    });
+    if (this.graphSettings.translateExtentEnable) {
+        const coefficient = this.graphSettings.translateExtentCoefficient;
+        const [coefficientX, coefficientY] = jsHelpers.isArray(coefficient)
+            ? coefficient
+            : [coefficient, coefficient];
+        const [[minX = -this.width * coefficientX, minY = -this.height * coefficientY], [maxX = this.width * coefficientX, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
+        zoomInstance.translateExtent([
+            [minX, minY],
+            [maxX, maxY],
+        ]);
+    }
+    d3Selection.select(this.area).call(zoomInstance).on("dblclick.zoom", null);
+    const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
+    this.areaTransform = new d3Zoom.ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
+    d3Zoom.zoom().transform(d3Selection.select(this.area), this.areaTransform);
 }
 
 class GraphCanvas {
@@ -1083,6 +3017,7 @@ class GraphCanvas {
     nodeOptionsCache = {};
     isDragging = false;
     highlightedNode = null;
+    highlightedLink = null;
     highlightedNeighbors = null;
     highlightProgress = 1;
     highlightWorking = false;
@@ -1104,6 +3039,7 @@ class GraphCanvas {
             highlightDrawing: this.highlightDrawing,
             highlightedNeighbors: this.highlightedNeighbors,
             highlightedNode: this.highlightedNode,
+            highlightedLink: this.highlightedLink,
             highlightWorking: this.highlightWorking,
             isDragging: this.isDragging,
             simulation: this.simulation,
@@ -1132,7 +3068,7 @@ class GraphCanvas {
         this.links = links;
         this.height = 0;
         this.width = 0;
-        this.draw = this.initDraw();
+        this.draw = initDraw.call(this);
         this.init();
     }
     get dpi() {
@@ -1155,8 +3091,8 @@ class GraphCanvas {
     changeSettings(options) {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
-            this.draw = this.initDraw();
-            this.initZoom(this.areaTransform);
+            this.draw = initDraw.call(this);
+            initZoom.call(this, this.areaTransform);
         }
         if (options.forceSettings) {
             this.forceSettings = forceSettingsGetter(options.forceSettings, this.forceSettings);
@@ -1169,6 +3105,7 @@ class GraphCanvas {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
             this.cachedNodeText = {};
             this.nodeOptionsCache = {};
+            initCollideForce.call(this, true);
         }
         if (options.forceSettings) {
             return void this.updateSimulation();
@@ -1226,7 +3163,7 @@ class GraphCanvas {
     }
     updateSimulation() {
         if (this.simulation) {
-            this.initSimulationForces();
+            initSimulationForces.call(this);
             this.simulation.alpha(1);
             this.simulation.restart();
         }
@@ -1234,6 +3171,7 @@ class GraphCanvas {
     clearState() {
         this.isDragging = false;
         this.highlightedNode = null;
+        this.highlightedLink = null;
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
         this.highlightWorking = false;
@@ -1247,757 +3185,64 @@ class GraphCanvas {
     updateData(alpha) {
         this.clearDataDependencies();
         if (this.simulation) {
-            this.initCollideForce();
+            initCollideForce.call(this, false);
             this.simulation
                 .nodes(this.nodes)
                 .force("link", d3Force.forceLink(this.links)
                 .id(this.nodeSettings.idGetter)
-                .distance(this.forceSettings.linkDistance)
-                .strength(this.forceSettings.linkStrength)
-                .iterations(this.forceSettings.linkIterations))
+                .distance(this.forceSettings.forces && this.forceSettings.linkForce
+                ? this.forceSettings.linkDistance
+                : 0)
+                .strength(this.forceSettings.forces && this.forceSettings.linkForce
+                ? this.forceSettings.linkStrength
+                : 0)
+                .iterations(this.forceSettings.forces && this.forceSettings.linkForce
+                ? this.forceSettings.linkIterations
+                : 0))
                 .alpha(alpha ?? 0.5)
                 .restart();
         }
     }
     updateSize() {
         this.clearHTMLElements();
-        this.initArea();
-        this.initDnd();
-        this.initZoom();
-        this.initResize();
-        this.initPointer();
+        initArea.call(this);
+        initDnd.call(this);
+        initZoom.call(this);
+        initResize.call(this);
+        initPointer.call(this);
         if (!this.simulationWorking && !this.highlightWorking)
             this.draw();
     }
     init() {
-        this.initArea();
-        this.initSimulation();
-        this.initDnd();
-        this.initZoom();
-        this.initResize();
-        this.initPointer();
-    }
-    initSimulation() {
-        if (!this.simulation) {
-            this.simulation = d3Force.forceSimulation()
-                .nodes(this.nodes)
-                .force("link", d3Force.forceLink(this.links).id(this.nodeSettings.idGetter))
-                .on("tick", () => {
-                this.draw();
-            })
-                .on("end", () => {
-                this.listeners.onSimulationEnd?.(this.state);
-                if (this.graphSettings.showDrawTime)
-                    getDrawTime();
-            });
-            this.initSimulationForces();
-        }
-    }
-    initSimulationForces() {
-        if (!this.simulation)
-            return;
-        const linkForce = this.simulation.force("link");
-        if (!linkForce)
-            return;
-        linkForce
-            .distance(this.forceSettings.linkDistance)
-            .strength(this.forceSettings.linkStrength)
-            .iterations(this.forceSettings.linkIterations);
-        this.simulation
-            .force("x", d3Force.forceX(this.forceSettings.xForce).strength(this.forceSettings.xStrength))
-            .force("y", d3Force.forceY(this.forceSettings.yForce).strength(this.forceSettings.yStrength))
-            .force("charge", d3Force.forceManyBody()
-            .strength(this.forceSettings.chargeStrength)
-            .distanceMax(this.forceSettings.chargeDistanceMax)
-            .distanceMin(this.forceSettings.chargeDistanceMin))
-            .force("center", d3Force.forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
-        this.initCollideForce(true);
-    }
-    initCollideForce(forceUpdate) {
-        if (!this.simulation)
-            return;
-        if (!this.forceSettings.collideOn) {
-            if (this.simulation.force("collide"))
-                this.simulation.force("collide", null);
-            return;
-        }
-        const isHasMax = this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;
-        const isMaxCollideNodes = isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;
-        const isMaxCollideLinks = isHasMax && this.forceSettings.collideOffMax.links < this.links.length;
-        if (isMaxCollideNodes && isMaxCollideLinks) {
-            this.simulation.force("collide", null);
-        }
-        else if (!this.simulation.force("collide") || forceUpdate) {
-            this.simulation.force("collide", d3Force.forceCollide()
-                .radius((node, index) => {
-                if (this.forceSettings.collideRadius) {
-                    return nodeIterationExtractor(node, index, this.nodes, this.state, this.forceSettings.collideRadius, undefined);
-                }
-                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-                const radius = nodeRadiusGetter({
-                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                    radiusInitial: nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial,
-                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                    radiusFactor: this.graphSettings.nodeRadiusFactor,
-                    linkCount: node.linkCount,
-                });
-                return radius + this.forceSettings.collideAdditionalRadius;
-            })
-                .strength(this.forceSettings.collideStrength)
-                .iterations(this.forceSettings.collideIterations));
-        }
-    }
-    initArea() {
-        if (!this.area || !this.context || !this.container) {
-            this.container = d3Selection.create("div")
-                .attr("style", "padding: 0 !important; width: 100%; height: 100%;")
-                .node();
-            if (!this.container)
-                throw new Error("couldn't create container");
-            this.root.appendChild(this.container);
-            const { width, height } = this.root.getBoundingClientRect();
-            this.width = width;
-            this.height = height;
-            this.area = d3Selection.create("canvas")
-                .attr("width", this.dpi * this.width)
-                .attr("height", this.dpi * this.height)
-                .attr("style", `width: 100%; height: 100%; border: none !important;`)
-                .node();
-            if (!this.area)
-                throw new Error("couldn't create canvas");
-            this.container.appendChild(this.area);
-            this.areaRect = this.area.getBoundingClientRect();
-            this.context = this.area.getContext("2d");
-            if (!this.context)
-                throw new Error("couldn't create canvas context");
-            this.context.scale(this.dpi, this.dpi);
-        }
-    }
-    initDraw() {
-        function calculateHighlightFading() {
-            this.highlightDrawing = true;
-            if (!this.highlightWorking && this.highlightProgress > 0) {
-                this.highlightProgress -= this.graphSettings.highlightDownStep;
-                if (!this.simulationWorking)
-                    return void requestAnimationFrame(() => this.draw());
-                if (!this.linkSettings.particles)
-                    return;
-            }
-            if (this.highlightWorking && this.highlightProgress < 1) {
-                this.highlightProgress += this.graphSettings.highlightUpStep;
-                if (!this.simulationWorking)
-                    return void requestAnimationFrame(() => this.draw());
-                if (!this.linkSettings.particles)
-                    return;
-            }
-            if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
-                return void requestAnimationFrame(() => this.draw());
-            }
-            if (!this.highlightWorking && this.highlightProgress <= 0) {
-                if (this.highlightedNeighbors || this.highlightedNode) {
-                    this.highlightedNeighbors = null;
-                    this.highlightedNode = null;
-                    this.particles = {};
-                    if (!this.simulationWorking)
-                        return void requestAnimationFrame(() => this.draw());
-                }
-            }
-            this.highlightDrawing = false;
-        }
-        function draw() {
-            if (!this.context)
-                return;
-            const state = this.state;
-            if (this.listeners.onDraw) {
-                this.listeners.onDraw(state, (status) => {
-                    this.highlightDrawing = status;
-                }, () => {
-                    if (this.highlightedNeighbors)
-                        this.highlightedNeighbors = null;
-                    if (this.highlightedNode)
-                        this.highlightedNode = null;
-                });
-                return;
-            }
-            this.context.save();
-            this.context.clearRect(0, 0, this.width, this.height);
-            this.context.translate(this.areaTransform.x, this.areaTransform.y);
-            this.context.scale(this.areaTransform.k, this.areaTransform.k);
-            const textRenders = [];
-            const nodeRenders = [];
-            this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
-            /** links */
-            this.links.forEach(getDrawLink(state).bind(this));
-            /** nodes */
-            nodeRenders.forEach((render) => render());
-            textRenders.forEach((render) => render());
-            this.context.restore();
-            this.listeners.onDrawFinished?.(state);
-            calculateHighlightFading.bind(this)();
-        }
-        function getDrawLink(state) {
-            return function drawLink(link, index) {
-                if (!this.context ||
-                    typeof link.source !== "object" ||
-                    typeof link.target !== "object" ||
-                    !link.source.x ||
-                    !link.source.y ||
-                    !link.target.x ||
-                    !link.target.y)
-                    return;
-                if (!link.source._visible && !link.target._visible)
-                    return;
-                const id = `${link.target.id}${link.source.id}`;
-                let linkOptions;
-                if (this.linkSettings.cache && this.linkOptionsCache[id]) {
-                    linkOptions = this.linkOptionsCache[id];
-                }
-                else {
-                    linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
-                    if (this.linkSettings.cache) {
-                        this.linkOptionsCache[id] = linkOptions;
-                    }
-                }
-                if (linkOptions.drawLink) {
-                    linkOptions.drawLink(link, linkOptions, state);
-                    return;
-                }
-                let alpha = linkOptions.alpha;
-                let arrowAlpha = linkOptions.arrowReverseAppear ? 0 : linkOptions.arrowAlpha;
-                if (this.highlightedNeighbors && this.highlightedNode) {
-                    /** Not highlighted */
-                    if (this.highlightedNode.id != link.source.id &&
-                        this.highlightedNode.id != link.target.id) {
-                        if (linkOptions.highlightFading) {
-                            const min = this.graphSettings.highlightLinkFadingMin < alpha
-                                ? this.graphSettings.highlightLinkFadingMin
-                                : alpha;
-                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
-                        }
-                        if (linkOptions.arrow &&
-                            linkOptions.arrowHighlightFading &&
-                            !linkOptions.arrowReverseAppear) {
-                            const min = this.graphSettings.highlightArrowFadingMin < arrowAlpha
-                                ? this.graphSettings.highlightArrowFadingMin
-                                : arrowAlpha;
-                            arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
-                        }
-                    }
-                    else {
-                        // eslint-disable-next-line no-lonely-if
-                        if (linkOptions.arrow && linkOptions.arrowReverseAppear) {
-                            /** Highlighted */
-                            arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
-                        }
-                    }
-                }
-                /** Link */
-                this.context.beginPath();
-                this.context.globalAlpha = alpha;
-                this.context.strokeStyle = linkOptions.color;
-                this.context.lineWidth = linkOptions.width;
-                let xStart = link.source.x;
-                let yStart = link.source.y;
-                let xEnd = link.target.x;
-                let yEnd = link.target.y;
-                if (linkOptions.pretty) {
-                    const isHasArrow = linkOptions.arrow && arrowAlpha > 0;
-                    const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link, isHasArrow ? linkOptions.arrowSize : 0) ?? {
-                        x1: 0,
-                        x2: 0,
-                        y1: 0,
-                        y2: 0,
-                    };
-                    xStart = x1;
-                    xEnd = x2;
-                    yStart = y1;
-                    yEnd = y2;
-                }
-                this.context.moveTo(xStart, yStart);
-                this.context.lineTo(xEnd, yEnd);
-                this.context.stroke();
-                /** Particle */
-                if (this.linkSettings.particles &&
-                    this.highlightedNode &&
-                    (this.highlightedNode.id === link.source.id || this.highlightedNode.id === link.target.id)) {
-                    if (!this.particles[id]) {
-                        const sourceId = link.source.id;
-                        const targetId = link.target.id;
-                        this.particles[id] = Array.from({ length: linkOptions.particleCount }, (_, index) => {
-                            return {
-                                step: 0,
-                                wait: index * (linkOptions.particleSteps / linkOptions.particleCount),
-                                sourceId,
-                                targetId,
-                            };
-                        });
-                    }
-                    this.particles[id].forEach((particle) => {
-                        if (!this.context)
-                            return;
-                        getParticlePosition({
-                            particle,
-                            totalSteps: linkOptions.particleSteps,
-                            xEnd,
-                            xStart,
-                            yEnd,
-                            yStart,
-                        });
-                        if (particle.x != undefined && particle.y != undefined) {
-                            this.context.beginPath();
-                            this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
-                            this.context.fillStyle = linkOptions.particleColor;
-                            this.context.fill();
-                            this.context.stroke();
-                        }
-                    });
-                }
-                /** Arrow */
-                if (linkOptions.arrow && arrowAlpha > 0) {
-                    const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByRadius(link) ?? {
-                        x1: 0,
-                        x2: 0,
-                        y1: 0,
-                        y2: 0,
-                    };
-                    const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
-                    this.context.beginPath();
-                    this.context.globalAlpha = arrowAlpha;
-                    this.context.moveTo(xEnd, yEnd);
-                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6));
-                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6));
-                    this.context.closePath();
-                    this.context.fillStyle = linkOptions.arrowColor;
-                    this.context.fill();
-                    this.context.stroke();
-                }
-                if (linkOptions.drawExtraLink) {
-                    linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
-                }
-            };
-        }
-        function getDrawNode(nodeRenders, textRenders, state) {
-            return function drawNode(node, index) {
-                if (!this.context || !node.x || !node.y)
-                    return;
-                let nodeOptions;
-                if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
-                    nodeOptions = this.nodeOptionsCache[node.id];
-                }
-                else {
-                    nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-                    if (this.nodeSettings.cache) {
-                        this.nodeOptionsCache[node.id] = nodeOptions;
-                    }
-                }
-                if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
-                    nodeRenders.push(() => {
-                        nodeOptions?.nodeDraw?.(node, nodeOptions, state);
-                    });
-                    textRenders.push(() => {
-                        nodeOptions?.textDraw?.(node, nodeOptions, state);
-                    });
-                    return;
-                }
-                let alpha = nodeOptions.alpha;
-                let color = nodeOptions.color;
-                let radiusInitial = nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial;
-                let textAlpha = nodeOptions.textAlpha;
-                let textSize = nodeOptions.textSize;
-                let textShiftX = nodeOptions.textShiftX;
-                let textShiftY = nodeOptions.textShiftY;
-                let textWeight = nodeOptions.textWeight;
-                let textWidth = nodeOptions.textWidth;
-                if (this.highlightedNeighbors && this.highlightedNode) {
-                    /** Not highlighted */
-                    if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                        if (nodeOptions.highlightFading) {
-                            const min = this.graphSettings.highlightFadingMin < alpha
-                                ? this.graphSettings.highlightFadingMin
-                                : alpha;
-                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
-                        }
-                        if (nodeOptions.highlightTextFading) {
-                            const min = this.graphSettings.highlightTextFadingMin < textAlpha
-                                ? this.graphSettings.highlightTextFadingMin
-                                : textAlpha;
-                            textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
-                        }
-                        if (nodeOptions.highlightColor) {
-                            const colorRgb = extractRgb(colorToRgb(color));
-                            if (colorRgb) {
-                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
-                                const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
-                                color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
-                            }
-                        }
-                    }
-                    else if (!this.graphSettings.highlightOnlyRoot ||
-                        (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
-                        /** Highlighted */
-                        if (nodeOptions.highlightSizing) {
-                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightSizingAdditional, this.highlightProgress);
-                        }
-                        if (nodeOptions.highlightTextSizing) {
-                            textSize = animationByProgress(textSize, this.graphSettings.highlightTextSizingAdditional, this.highlightProgress);
-                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightTextShiftXAdditional, this.highlightProgress);
-                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightTextShiftYAdditional, this.highlightProgress);
-                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightTextWeightAdditional, this.highlightProgress);
-                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightTextWidthAdditional, this.highlightProgress);
-                        }
-                    }
-                }
-                const radius = nodeRadiusGetter({
-                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                    radiusInitial,
-                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                    radiusFactor: this.graphSettings.nodeRadiusFactor,
-                    linkCount: node.linkCount,
-                });
-                node._radius = radius;
-                if (!isNodeVisible({
-                    height: this.height,
-                    width: this.width,
-                    x: node.x,
-                    y: node.y,
-                    radius,
-                    transform: this.areaTransform,
-                })) {
-                    node._visible = false;
-                    return;
-                }
-                node._visible = true;
-                nodeRenders.push(() => {
-                    if (!this.context || !node.x || !node.y)
-                        return;
-                    this.context.beginPath();
-                    this.context.globalAlpha = alpha;
-                    /** circle */
-                    this.context.lineWidth = nodeOptions.borderWidth;
-                    this.context.strokeStyle = nodeOptions.borderColor;
-                    this.context.fillStyle = color;
-                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-                    this.context.fill();
-                    this.context.stroke();
-                });
-                if (nodeOptions.nodeExtraDraw) {
-                    nodeRenders.push(() => {
-                        nodeOptions?.nodeExtraDraw?.(node, {
-                            ...nodeOptions,
-                            radius,
-                            alpha,
-                            color,
-                            textAlpha,
-                            textSize,
-                            textShiftX,
-                            textShiftY,
-                            textWeight,
-                            textWidth,
-                        }, state);
-                    });
-                }
-                /** text */
-                if (nodeOptions.textVisible && nodeOptions.text) {
-                    textRenders.push(() => {
-                        if (nodeOptions.textDraw) {
-                            nodeOptions.textDraw(node, {
-                                ...nodeOptions,
-                                radius,
-                                alpha,
-                                color,
-                                textAlpha,
-                                textSize,
-                                textShiftX,
-                                textShiftY,
-                                textWeight,
-                                textWidth,
-                            }, state);
-                            return;
-                        }
-                        if (!this.context || !node.x || !node.y || !nodeOptions.text)
-                            return;
-                        this.context.beginPath();
-                        this.context.globalAlpha = textAlpha;
-                        drawText({
-                            id: node.id,
-                            cachedNodeText: this.cachedNodeText,
-                            context: this.context,
-                            text: nodeOptions.text,
-                            textAlign: nodeOptions.textAlign,
-                            textColor: nodeOptions.textColor,
-                            textFont: nodeOptions.textFont,
-                            textSize,
-                            x: node.x + textShiftX,
-                            y: node.y + radius + textShiftY,
-                            maxWidth: textWidth,
-                            textStyle: nodeOptions.textStyle,
-                            textWeight,
-                            textGap: nodeOptions.textGap,
-                        });
-                        if (nodeOptions.textExtraDraw) {
-                            nodeOptions.textExtraDraw(node, {
-                                ...nodeOptions,
-                                radius,
-                                alpha,
-                                color,
-                                textAlpha,
-                                textSize,
-                                textShiftX,
-                                textShiftY,
-                                textWeight,
-                                textWidth,
-                            }, state);
-                        }
-                    });
-                }
-            };
-        }
-        if (this.graphSettings.showDrawTime) {
-            return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
-        }
-        return draw;
-    }
-    initResize() {
-        if (!this.area)
-            throw new Error("bad init data");
-        let initialResizeCall = true;
-        const abortController = this.eventAbortController;
-        const observer = new ResizeObserver(() => {
-            if (initialResizeCall) {
-                initialResizeCall = false;
-                return;
-            }
-            if (abortController.signal.aborted) {
-                observer.disconnect();
-                return;
-            }
-            requestAnimationFrame(() => {
-                this.updateSize();
-            });
-        });
-        document.addEventListener("scroll", this.updateRect.bind(this), {
-            capture: true,
-            passive: true,
-            signal: abortController.signal,
-        });
-        observer.observe(this.area);
-    }
-    initPointer() {
-        if (!this.area || !this.nodes || !this.simulation)
-            throw new Error("bad init data");
-        /** hover */
-        this.area.addEventListener("pointermove", (event) => {
-            let currentNode;
-            if (this.graphSettings.highlightByHover && !this.isDragging) {
-                currentNode = nodeByPointerGetter({
-                    graphSettings: this.graphSettings,
-                    areaRect: this.areaRect,
-                    areaTransform: this.areaTransform,
-                    mouseEvent: event,
-                    nodes: this.nodes,
-                });
-                if (currentNode && this.highlightedNode !== currentNode) {
-                    this.highlightedNode = currentNode;
-                    this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
-                    this.highlightWorking = true;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
-                }
-                else if (!currentNode && this.highlightedNode) {
-                    this.highlightWorking = false;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
-                }
-            }
-            if (!this.listeners.onMove)
-                return;
-            if (!currentNode)
-                currentNode = nodeByPointerGetter({
-                    graphSettings: this.graphSettings,
-                    areaRect: this.areaRect,
-                    areaTransform: this.areaTransform,
-                    mouseEvent: event,
-                    nodes: this.nodes,
-                });
-            return void this.listeners.onMove(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** dblclick */
-        this.area.addEventListener("dblclick", (event) => {
-            if (!this.listeners.onDoubleClick)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onDoubleClick(event, currentNode);
-        });
-        /** wheel click */
-        this.area.addEventListener("mousedown", (event) => {
-            if (this.isDragging || !this.listeners.onWheelClick || event.button !== 1)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onWheelClick(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** click */
-        this.area.addEventListener("click", (event) => {
-            if (this.isDragging || !this.listeners.onClick || event.button !== 0)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onClick(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** right click */
-        this.area.addEventListener("contextmenu", (event) => {
-            if (!this.listeners.onContextMenu)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onContextMenu(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-    }
-    initDnd() {
-        if (!this.area || !this.nodes || !this.simulation)
-            throw new Error("bad init data");
-        d3Selection.select(this.area).call(d3Drag.drag()
-            .subject((event) => {
-            if (this.listeners.onDragSubject) {
-                return this.listeners.onDragSubject(event, this.state);
-            }
-            if (!this.areaRect)
-                return;
-            const mouseEvent = event.sourceEvent;
-            const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-            let index = 0;
-            return d3Array.greatest(this.nodes, (node) => {
-                if (!node.x || !node.y || (jsHelpers.isBoolean(node.drag) && !node.drag))
-                    return undefined;
-                let radius = node._radius;
-                if (!radius) {
-                    const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-                    radius = nodeRadiusGetter({
-                        radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                        radiusInitial: nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial,
-                        radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                        radiusFactor: this.graphSettings.nodeRadiusFactor,
-                        linkCount: node.linkCount,
-                    });
-                }
-                index++;
-                return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY, radius);
-            });
-        })
-            .on("start", (event) => {
-            this.listeners.onStartDragFinished?.(event, this.state);
-        })
-            .on("drag", (event) => {
-            if (!this.isDragging) {
-                this.isDragging = true;
-                if (this.simulation)
-                    this.simulation.alphaTarget(0.3).restart();
-            }
-            if (!this.areaRect)
-                return;
-            const mouseEvent = event.sourceEvent;
-            const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-            event.subject.fx = pointerX;
-            event.subject.fy = pointerY;
-            this.listeners.onMoveDragFinished?.(event, this.state);
-        })
-            .on("end", (event) => {
-            this.isDragging = false;
-            if (!event.active && this.simulation)
-                this.simulation.alphaTarget(0);
-            if (this.graphSettings.stickAfterDrag && this.areaRect) {
-                if (!this.areaRect)
-                    return;
-                const mouseEvent = event.sourceEvent;
-                const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-                event.subject.fx = pointerX;
-                event.subject.fy = pointerY;
-            }
-            else {
-                event.subject.fx = null;
-                event.subject.fy = null;
-            }
-            this.listeners.onEndDragFinished?.(event, this.state);
-        }));
-    }
-    initZoom(currentZoom) {
-        if (!this.area)
-            throw new Error("bad init data");
-        const zoomInstance = d3Zoom.zoom()
-            .scaleExtent(this.graphSettings.zoomExtent)
-            .on("zoom", (event) => {
-            this.listeners.onZoom?.(event);
-            this.areaTransform = event.transform;
-            this.linkOptionsCache = {};
-            this.nodeOptionsCache = {};
-            if (!this.simulationWorking && !this.highlightWorking)
-                requestAnimationFrame(() => this.draw());
-        });
-        if (this.graphSettings.translateExtentEnable) {
-            const coefficient = this.graphSettings.translateExtentCoefficient;
-            const [coefficientX, coefficientY] = jsHelpers.isArray(coefficient)
-                ? coefficient
-                : [coefficient, coefficient];
-            const [[minX = -this.width * coefficientX, minY = -this.height * coefficientY], [maxX = this.width * coefficientX, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
-            zoomInstance.translateExtent([
-                [minX, minY],
-                [maxX, maxY],
-            ]);
-        }
-        d3Selection.select(this.area).call(zoomInstance).on("dblclick.zoom", null);
-        const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
-        this.areaTransform = new d3Zoom.ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
-        d3Zoom.zoom().transform(d3Selection.select(this.area), this.areaTransform);
+        initArea.call(this);
+        initSimulation.call(this);
+        initDnd.call(this);
+        initZoom.call(this);
+        initResize.call(this);
+        initPointer.call(this);
     }
 }
 
 exports.GraphCanvas = GraphCanvas;
 exports.animationByProgress = animationByProgress;
-exports.calculateLinkPositionByRadius = calculateLinkPositionByRadius;
+exports.calculateLinkPositionByNode = calculateLinkPositionByNode;
 exports.colorToRgb = colorToRgb;
 exports.drawText = drawText;
 exports.extractRgb = extractRgb;
 exports.fadeRgb = fadeRgb;
+exports.getDrawLink = getDrawLink;
+exports.getDrawNode = getDrawNode;
 exports.getForceControls = getForceControls;
 exports.getGraphControls = getGraphControls;
-exports.getLinkControls = getLinkControls;
-exports.getNodeControls = getNodeControls;
+exports.getLinkOptionsControls = getLinkOptionsControls;
+exports.getLinkSettingsControls = getLinkSettingsControls;
+exports.getNodeOptionsControls = getNodeOptionsControls;
+exports.getNodeSettingControls = getNodeSettingControls;
 exports.getParticlePosition = getParticlePosition;
+exports.linkByPointerGetter = linkByPointerGetter;
 exports.linkIterationExtractor = linkIterationExtractor;
 exports.linkOptionsGetter = linkOptionsGetter;
+exports.nodeByPointerGetter = nodeByPointerGetter;
 exports.nodeIterationExtractor = nodeIterationExtractor;
 exports.nodeOptionsGetter = nodeOptionsGetter;
 exports.nodeRadiusGetter = nodeRadiusGetter;