@krainovsd/graph 0.10.0-rc5 → 0.10.0-rc7

package/lib/cjs/index.cjs

@@ -10,6 +10,11 @@ const d3Selection = require('d3-selection');
 const d3Drag = require('d3-drag');
 const lodash = require('lodash');
 
+const COMMON_SETTINGS = {
+    nodeRadius: 5,
+    nodeSize: 5,
+};
+
 const FORCE_SETTINGS = {
     forces: true,
     centerForce: true,
@@ -25,7 +30,6 @@ const FORCE_SETTINGS = {
     collideIterations: 2,
     collideOffMax: { links: 0, nodes: 0 },
     chargeStrength: -40,
-    chargeDistanceMax: Infinity,
     chargeDistanceMin: 1,
     xPosition: 0,
     xStrength: 0.1,
@@ -36,6 +40,7 @@ const FORCE_SETTINGS = {
     linkStrength: 1,
     collideRadius: null,
 };
+
 const GRAPH_SETTINGS = {
     zoomExtent: [0.3, 10],
     translateExtent: [[], []],
@@ -48,57 +53,121 @@ const GRAPH_SETTINGS = {
     showDrawTime: true,
     showDrawTimeEveryTick: false,
 };
-const NODE_SETTINGS = {
-    cache: true,
-    highlightByNodeOnlyRoot: true,
+
+const HIGHLIGHT_SETTINGS = {
     highlightByHoverNode: true,
+    highlightByHoverLink: true,
+    linkHoverExtraZone: 2,
+    /** Node */
+    highlightByNodeOnlyRoot: true,
+    highlightByNodeForNodeColorFading: false,
+    highlightByNodeForNodeColor: null,
+    highlightByNodeForNodeSizingAdditional: 0.5,
+    highlightByNodeForNodeSizingAdditionalCoefficient: 0.35,
+    highlightByNodeForNodeColorFadingMin: 0.15,
+    highlightByNodeForNodeFadingMin: 0.21,
+    highlightByNodeForNodeBorderColor: null,
+    highlightByNodeForNodeBorderSizingAdditional: 0,
+    highlightByLinkForNodeColorFading: false,
+    highlightByLinkForNodeColor: null,
+    highlightByLinkForNodeSizingAdditional: 0.5,
+    highlightByLinkForNodeSizingAdditionalCoefficient: 0.35,
+    highlightByLinkForNodeColorFadingMin: 0.15,
+    highlightByLinkForNodeFadingMin: 0.21,
+    highlightByLinkForNodeBorderColor: null,
+    highlightByLinkForNodeBorderSizingAdditional: 0,
+    /** Text */
+    highlightByNodeForTextShiftXAdditional: 0,
+    highlightByNodeForTextShiftYAdditional: 2,
+    highlightByNodeForTextSizingAdditional: 1,
+    highlightByNodeForTextWeightAdditional: 0,
+    highlightByNodeForTextFadingMin: 0.21,
+    highlightByLinkForTextShiftXAdditional: 0,
+    highlightByLinkForTextShiftYAdditional: 2,
+    highlightByLinkForTextSizingAdditional: 1,
+    highlightByLinkForTextWeightAdditional: 0,
+    highlightByLinkForTextFadingMin: 0.21,
+    /** Label */
+    highlightByNodeForLabelFadingMin: 0.21,
+    highlightByNodeForLabelSizingAdditional: 1,
+    highlightByNodeForLabelWeightAdditional: 0,
+    highlightByLinkForLabelFadingMin: 0.21,
+    highlightByLinkForLabelSizingAdditional: 1,
+    highlightByLinkForLabelWeightAdditional: 0,
+    /** Link */
+    highlightByNodeForLinkFadingMin: 0.21,
+    highlightByNodeForLinkSizeAdditional: 0,
+    highlightByNodeForLinkColor: null,
+    highlightByLinkForLinkFadingMin: 0.21,
+    highlightByLinkForLinkSizeAdditional: 0,
+    highlightByLinkForLinkColor: null,
+    /** Arrow */
+    highlightByNodeForArrowFadingMin: 0.21,
+    highlightByNodeForArrowSizeAdditional: 0,
+    highlightByNodeForArrowColor: null,
+    highlightByNodeForArrowBorderColor: null,
+    highlightByNodeForArrowBorderSizingAdditional: 0,
+    highlightByLinkForArrowFadingMin: 0.21,
+    highlightByLinkForArrowSizeAdditional: 0,
+    highlightByLinkForArrowColor: null,
+    highlightByLinkForArrowBorderColor: null,
+    highlightByLinkForArrowBorderSizingAdditional: 0,
+};
+
+const LINK_SETTINGS = {
+    cacheOptions: true,
+    prettyDraw: true,
+    linkScaleSwitch: 1,
+    linkColorAfterScaleSwitch: "#000000FF",
+    linkColorBeforeScaleSwitch: "#999",
+    linkWidthAfterScaleSwitch: 0.1,
+    linkWidthBeforeScaleSwitch: 1,
+    arrow: true,
+    arrowByHighlight: true,
+    particles: true,
+    particleFlexSpeed: true,
+    particleFlexSpeedCoefficient: 4,
+};
+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 NODE_SETTINGS = {
+    cacheOptions: true,
     nodeRadiusFlexible: true,
-    nodeSizeFlexible: true,
-    textNodeDebug: true,
-    highlightByNodeNodeFading: true,
-    highlightByNodeNodeColor: false,
-    highlightByNodeNodeSizing: true,
-    highlightByNodeTextFading: true,
-    highlightByNodeTextSizing: true,
-    highlightByLinkNodeFading: false,
-    highlightByLinkNodeColor: false,
-    highlightByLinkNodeSizing: true,
-    highlightByLinkTextFading: false,
-    highlightByLinkTextSizing: true,
     nodeRadiusCoefficient: 5,
     nodeRadiusFactor: 1,
+    nodeSizeFlexible: true,
     nodeSizeCoefficient: 5,
     nodeSizeFactor: 0.1,
-    highlightByNodeNodeSizingAdditional: 0.5,
-    highlightByNodeNodeSizingAdditionalCoefficient: 0.35,
-    highlightByNodeNodeColorFadingMin: 0.15,
-    highlightByNodeTextShiftXAdditional: 0,
-    highlightByNodeTextShiftYAdditional: 2,
-    highlightByNodeTextSizingAdditional: 1,
-    highlightByNodeTextWeightAdditional: 0,
-    highlightByNodeTextWidthAdditional: 10,
-    highlightByNodeNodeFadingMin: 0.21,
-    highlightByNodeTextFadingMin: 0.21,
-    highlightByLinkNodeSizingAdditional: 0.5,
-    highlightByLinkNodeSizingAdditionalCoefficient: 0.35,
-    highlightByLinkNodeColorFadingMin: 0.15,
-    highlightByLinkTextShiftXAdditional: 0,
-    highlightByLinkTextShiftYAdditional: 2,
-    highlightByLinkTextSizingAdditional: 1,
-    highlightByLinkTextWeightAdditional: 0,
-    highlightByLinkTextWidthAdditional: 10,
-    highlightByLinkNodeFadingMin: 0.21,
-    highlightByLinkTextFadingMin: 0.21,
+    textScaleMin: 1.5,
+    textScaleMax: 18,
+    textSizeMin: 3.5,
+    textSizeMax: 1.5,
+    textShiftYMin: 4,
+    textShiftYMax: 2.5,
+    textNodeDebug: false,
 };
 const NODE_OPTIONS = {
-    shape: "text",
+    shape: "circle",
     height: 10,
     width: 15,
     borderRadius: 0,
     radius: 4,
     alpha: 1,
-    textNodeXPadding: 1,
-    textNodeYPadding: 1,
+    labelXPadding: 1,
+    labelYPadding: 1,
     borderWidth: 0.1,
     borderColor: "#000000FF",
     textAlpha: 1,
@@ -110,56 +179,16 @@ const NODE_OPTIONS = {
     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,
+    label: null,
+    labelAlpha: 1,
+    labelAlign: "center",
+    labelColor: "#333",
+    labelFont: "Arial",
+    labelGap: 0,
+    labelSize: 3.5,
+    labelStyle: "normal",
+    labelWeight: 500,
+    labelWidth: 20,
 };
 
 function forceSettingsGetter(settings, prevSettings) {
@@ -179,20 +208,20 @@ function graphSettingsGetter(settings, prevSettings) {
 function linkSettingsGetter(settings, prevSettings) {
     return { ...(prevSettings ?? LINK_SETTINGS), ...settings };
 }
-function linkOptionsGetter(_, __, ___, state) {
+function linkOptionsGetter() {
     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,
+        color: this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch
+            ? this.linkSettings.linkColorAfterScaleSwitch
+            : this.linkSettings.linkColorBeforeScaleSwitch,
+        arrowColor: this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch
+            ? this.linkSettings.linkColorAfterScaleSwitch
+            : this.linkSettings.linkColorBeforeScaleSwitch,
+        width: this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch
+            ? this.linkSettings.linkWidthAfterScaleSwitch
+            : this.linkSettings.linkWidthBeforeScaleSwitch,
     };
 }
 
@@ -278,917 +307,6 @@ function rgbAnimationByProgress(start, end, progress) {
     };
 }
 
-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 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;
-}
-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 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 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 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) {
@@ -1224,8 +342,8 @@ function nodeSettingsGetter(settings, prevNodeSettings) {
     };
 }
 const color = colorGetter();
-function nodeOptionsGetter(node, _, __, state) {
-    const { textShiftY, textSize } = nodeTextSizeGetter(state?.areaTransform);
+function nodeOptionsGetter(node) {
+    const { textShiftY, textSize } = nodeTextSizeGetter(this.areaTransform, this.nodeSettings);
     return {
         ...NODE_OPTIONS,
         nodeDraw: null,
@@ -1233,30 +351,31 @@ function nodeOptionsGetter(node, _, __, state) {
         textDraw: null,
         textExtraDraw: null,
         color: color(String(node.group ?? "_DEFAULT")),
-        textVisible: Boolean(state?.areaTransform && state.areaTransform.k > COMMON_SETTINGS.nodeTextScaleMin),
+        textVisible: Boolean(this.areaTransform.k > this.nodeSettings.textScaleMin),
         text: node.name ?? node.id.toString(),
         textShiftY,
         textSize,
     };
 }
-function nodeTextSizeGetter(transform) {
-    let textSize = COMMON_SETTINGS.nodeTextSizeMax;
-    let textShiftY = COMMON_SETTINGS.nodeTextShiftYMax;
+function nodeTextSizeGetter(transform, nodeSettings) {
+    let textSize = nodeSettings.textSizeMin;
+    let textShiftY = nodeSettings.textShiftYMin;
     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;
+        if (transform.k >= nodeSettings.textScaleMax) {
+            textSize = nodeSettings.textSizeMax;
+            textShiftY = nodeSettings.textShiftYMax;
+        }
+        else if (transform.k > nodeSettings.textScaleMin) {
+            textSize =
+                nodeSettings.textSizeMin +
+                    ((transform.k - nodeSettings.textScaleMin) *
+                        (nodeSettings.textSizeMax - nodeSettings.textSizeMin)) /
+                        (nodeSettings.textScaleMax - nodeSettings.textScaleMin);
+            textShiftY =
+                nodeSettings.textShiftYMin +
+                    ((transform.k - nodeSettings.textScaleMin) *
+                        (nodeSettings.textShiftYMax - nodeSettings.textShiftYMin)) /
+                        (nodeSettings.textScaleMax - nodeSettings.textScaleMin);
         }
     }
     return { textSize, textShiftY };
@@ -1279,6 +398,13 @@ function nodeIdGetter(node) {
     return node.id;
 }
 
+function highlightSettingsGetter(settings, prevSettings) {
+    return {
+        ...(prevSettings ?? HIGHLIGHT_SETTINGS),
+        ...settings,
+    };
+}
+
 function pointerGetter(mouseEvent, areaRect, areaTransform) {
     const clientX = "clientX" in mouseEvent
         ? mouseEvent.clientX
@@ -1359,7 +485,7 @@ function linkIterationExtractor(link, i, links, state, option, optionConstantGet
     let customOptions;
     let constantOptions;
     if (typeof option === "function")
-        customOptions = option(link, i, links, state);
+        customOptions = option.call(state, link, i, links);
     else
         customOptions = option;
     if (customOptions && typeof customOptions === "object" && !Array.isArray(customOptions)) {
@@ -1370,7 +496,7 @@ function linkIterationExtractor(link, i, links, state, option, optionConstantGet
     }
     if (optionConstantGetter) {
         if (typeof optionConstantGetter === "function")
-            constantOptions = optionConstantGetter(link, i, links, state);
+            constantOptions = optionConstantGetter.call(state, link, i, links);
         else
             constantOptions = optionConstantGetter;
         if (constantOptions &&
@@ -1401,7 +527,7 @@ function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGet
     let customOptions;
     let constantOptions;
     if (typeof option === "function")
-        customOptions = option(node, i, nodes, state);
+        customOptions = option.call(state, node, i, nodes);
     else
         customOptions = option;
     if (customOptions && typeof customOptions === "object" && !Array.isArray(customOptions)) {
@@ -1412,7 +538,7 @@ function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGet
     }
     if (optionConstantGetter) {
         if (typeof optionConstantGetter === "function")
-            constantOptions = optionConstantGetter(node, i, nodes, state);
+            constantOptions = optionConstantGetter.call(state, node, i, nodes);
         else
             constantOptions = optionConstantGetter;
         if (constantOptions &&
@@ -1429,6 +555,7 @@ function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGet
     return customOptions;
 }
 
+/* eslint-disable id-length */
 function calculateLinkPositionByNode(link, arrowSize = 0) {
     const source = link.source;
     const target = link.target;
@@ -1469,7 +596,8 @@ function getLinkPoint(opts) {
             nodePoint = getCircleIntersection({
                 x: opts.node.x,
                 y: opts.node.y,
-                radius: opts.node._radius ?? COMMON_SETTINGS.nodeRadius,
+                radius: (opts.node._radius ?? COMMON_SETTINGS.nodeRadius) +
+                    (opts.node._borderWidth ? opts.node._borderWidth / 2 : 0),
                 oppositeX: opts.oppositeNode.x,
                 oppositeY: opts.oppositeNode.y,
                 arrowSize: opts.arrowSize,
@@ -1482,8 +610,8 @@ function getLinkPoint(opts) {
                 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,
+                height: (opts.node._height ?? COMMON_SETTINGS.nodeSize) + (opts.node._borderWidth ?? 0),
+                width: (opts.node._width ?? COMMON_SETTINGS.nodeSize) + (opts.node._borderWidth ?? 0),
                 oppositeX: opts.oppositeNode.x,
                 oppositeY: opts.oppositeNode.y,
                 borderRadius: opts.node._shape === "text" ? 0 : (opts.node._borderRadius ?? 0),
@@ -1778,12 +906,12 @@ function getParticlePosition(opts) {
 }
 
 /* eslint-disable id-length */
-function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkSettings, }) {
+function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, }) {
     if (!areaRect)
         return undefined;
     const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
     return d3Array.greatest(links, (link) => {
-        if (isNearLink(pointerX, pointerY, link, linkSettings.hoverLinkThreshold))
+        if (isNearLink(pointerX, pointerY, link, linkHoverExtraZone))
             return link.index;
     });
 }
@@ -1826,6 +954,172 @@ function distanceToLine(x, y, x1, y1, x2, y2) {
     return Math.sqrt(dx * dx + dy * dy);
 }
 
+function nodeHighlight(opts) {
+    let color = opts.nodeOptions.color;
+    let borderColor = opts.nodeOptions.borderColor;
+    let borderWidth = opts.nodeOptions.borderWidth;
+    let radiusInitial = opts.nodeOptions.radius;
+    let widthInitial = opts.nodeOptions.width;
+    let heightInitial = opts.nodeOptions.height;
+    let textSize = opts.nodeOptions.textSize;
+    let textShiftX = opts.nodeOptions.textShiftX;
+    let textShiftY = opts.nodeOptions.textShiftY;
+    let textWeight = opts.nodeOptions.textWeight;
+    let labelSize = opts.nodeOptions.labelSize;
+    let labelWeight = opts.nodeOptions.labelWeight;
+    let sizeCoefficient = 1;
+    if (opts.highlightForNodeColor) {
+        /** Color */
+        const colorRgb = extractRgb(colorToRgb(color));
+        const colorRgbHighlight = extractRgb(colorToRgb(opts.highlightForNodeColor));
+        if (colorRgb && colorRgbHighlight) {
+            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbHighlight, opts.highlightProgress);
+            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+        }
+    }
+    if (opts.nodeOptions.shape === "circle") {
+        /** Radius */
+        radiusInitial = animationByProgress(radiusInitial, opts.highlightForNodeSizingAdditional, opts.highlightProgress);
+    }
+    if (opts.nodeOptions.shape === "square" || opts.nodeOptions.shape === "text") {
+        /** Size */
+        sizeCoefficient = animationByProgress(sizeCoefficient, opts.highlightForNodeSizingAdditionalCoefficient, opts.highlightProgress);
+        widthInitial *= sizeCoefficient;
+        heightInitial *= sizeCoefficient;
+    }
+    if (opts.highlightForNodeBorderColor) {
+        /** Border Color */
+        const colorRgb = extractRgb(colorToRgb(borderColor));
+        const colorRgbHighlight = extractRgb(colorToRgb(opts.highlightForNodeBorderColor));
+        if (colorRgb && colorRgbHighlight) {
+            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbHighlight, opts.highlightProgress);
+            borderColor = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+        }
+    }
+    /** Border Width */
+    borderWidth = animationByProgress(borderWidth, opts.highlightForNodeBorderSizingAdditional, opts.highlightProgress);
+    /** Text Size */
+    textSize = animationByProgress(textSize, opts.highlightForTextSizingAdditional, opts.highlightProgress);
+    /** Text Shift X */
+    textShiftX = animationByProgress(textShiftX, opts.highlightForTextShiftXAdditional, opts.highlightProgress);
+    /** Text Shift Y */
+    textShiftY = animationByProgress(textShiftY, opts.highlightForTextShiftYAdditional, opts.highlightProgress);
+    /** Text Weight */
+    textWeight = animationByProgress(textWeight, opts.highlightForTextWeightAdditional, opts.highlightProgress);
+    if (opts.nodeOptions.label) {
+        /** Label Size */
+        labelSize = animationByProgress(labelSize, opts.highlightForLabelSizingAdditional, opts.highlightProgress);
+        /** Label Weight */
+        labelWeight = animationByProgress(labelWeight, opts.highlightForLabelWeightAdditional, opts.highlightProgress);
+    }
+    return {
+        color,
+        borderColor,
+        borderWidth,
+        radiusInitial,
+        widthInitial,
+        heightInitial,
+        textSize,
+        textShiftX,
+        textShiftY,
+        textWeight,
+        labelSize,
+        labelWeight,
+        sizeCoefficient,
+    };
+}
+function nodeFade(opts) {
+    let alpha = opts.nodeOptions.alpha;
+    let color = opts.nodeOptions.color;
+    let textAlpha = opts.nodeOptions.textAlpha;
+    let labelAlpha = opts.nodeOptions.labelAlpha;
+    /** Alpha */
+    const alphaMin = opts.highlightForNodeFadingMin < alpha ? opts.highlightForNodeFadingMin : alpha;
+    alpha = animationByProgress(alphaMin, alpha - alphaMin, 1 - opts.highlightProgress);
+    /** Text Alpha */
+    const textAlphaMin = opts.highlightForTextFadingMin < textAlpha ? opts.highlightForTextFadingMin : textAlpha;
+    textAlpha = animationByProgress(textAlphaMin, textAlpha - textAlphaMin, 1 - opts.highlightProgress);
+    if (opts.nodeOptions.label) {
+        /** Label Alpha */
+        const labelAlphaMin = opts.highlightForLabelFadingMin < labelAlpha ? opts.highlightForLabelFadingMin : labelAlpha;
+        labelAlpha = animationByProgress(labelAlphaMin, labelAlpha - labelAlphaMin, 1 - opts.highlightProgress);
+    }
+    if (opts.highlightForNodeColorFading) {
+        /** Color Fading */
+        const colorRgb = extractRgb(colorToRgb(color));
+        if (colorRgb) {
+            const colorRgbFade = fadeRgb(colorRgb, opts.highlightForNodeColorFadingMin);
+            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, opts.highlightProgress);
+            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+        }
+    }
+    return {
+        alpha,
+        color,
+        textAlpha,
+        labelAlpha,
+    };
+}
+
+function linkHighlight(opts) {
+    const arrowVisible = opts.arrow && !opts.arrowByHighlight;
+    let arrowAlpha = opts.arrowByHighlight ? 0 : opts.linkOptions.arrowAlpha;
+    let color = opts.linkOptions.color;
+    let width = opts.linkOptions.width;
+    let arrowColor = opts.linkOptions.arrowColor;
+    let arrowSize = opts.linkOptions.arrowSize;
+    let arrowBorderWidth = opts.linkOptions.arrowBorderWidth;
+    let arrowBorderColor = opts.linkOptions.arrowBorderColor;
+    if (opts.arrow && opts.arrowByHighlight) {
+        /** Highlighted */
+        arrowAlpha = animationByProgress(0, opts.linkOptions.arrowAlpha, opts.highlightProgress);
+    }
+    if (opts.highlightForLinkColor) {
+        /** Color */
+        const colorRgb = extractRgb(colorToRgb(color));
+        const colorRgbHighlight = extractRgb(colorToRgb(opts.highlightForLinkColor));
+        if (colorRgb && colorRgbHighlight) {
+            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbHighlight, opts.highlightProgress);
+            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+        }
+    }
+    if (opts.highlightForArrowColor && arrowVisible) {
+        /** Arrow Color */
+        const colorRgb = extractRgb(colorToRgb(arrowColor));
+        const colorRgbHighlight = extractRgb(colorToRgb(opts.highlightForArrowColor));
+        if (colorRgb && colorRgbHighlight) {
+            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbHighlight, opts.highlightProgress);
+            arrowColor = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+        }
+    }
+    if (opts.highlightForArrowBorderColor && arrowVisible) {
+        /** Arrow Border Color */
+        const colorRgb = extractRgb(colorToRgb(arrowBorderColor));
+        const colorRgbHighlight = extractRgb(colorToRgb(opts.highlightForArrowBorderColor));
+        if (colorRgb && colorRgbHighlight) {
+            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbHighlight, opts.highlightProgress);
+            arrowBorderColor = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+        }
+    }
+    width = animationByProgress(width, opts.highlightForLinkSizeAdditional, opts.highlightProgress);
+    if (arrowVisible) {
+        arrowSize = animationByProgress(arrowSize, opts.highlightForArrowSizeAdditional, opts.highlightProgress);
+        arrowBorderWidth = animationByProgress(arrowBorderWidth, opts.highlightForArrowBorderSizingAdditional, opts.highlightProgress);
+    }
+    return { arrowAlpha, color, width, arrowColor, arrowSize, arrowBorderWidth, arrowBorderColor };
+}
+function linkFade(opts) {
+    let alpha = opts.linkOptions.alpha;
+    let arrowAlpha = opts.arrowByHighlight ? 0 : opts.linkOptions.arrowAlpha;
+    const alphaMin = opts.highlightForLinkFadingMin < alpha ? opts.highlightForLinkFadingMin : alpha;
+    alpha = animationByProgress(alphaMin, alpha - alphaMin, 1 - opts.highlightProgress);
+    if (opts.arrow && !opts.arrowByHighlight) {
+        const arrowAlphaMin = opts.highlightForArrowFadingMin < arrowAlpha ? opts.highlightForArrowFadingMin : arrowAlpha;
+        arrowAlpha = animationByProgress(arrowAlphaMin, arrowAlpha - arrowAlphaMin, 1 - opts.highlightProgress);
+    }
+    return { alpha, arrowAlpha };
+}
+
 function initArea() {
     if (!this.area || !this.context || !this.container) {
         this.container = d3Selection.create("div")
@@ -1859,7 +1153,7 @@ function initDnd() {
     const dragHandler = d3Drag.drag()
         .subject((event) => {
         if (this.listeners.onDragSubject) {
-            return this.listeners.onDragSubject(event, this.state);
+            return this.listeners.onDragSubject.call(this, event);
         }
         if (!this.areaRect)
             return;
@@ -1872,7 +1166,7 @@ function initDnd() {
         });
     })
         .on("start", (event) => {
-        this.listeners.onStartDragFinished?.(event, this.state);
+        this.listeners.onStartDragFinished?.call?.(this, event);
     })
         .on("drag", (event) => {
         if (!this.isDragging) {
@@ -1886,7 +1180,7 @@ function initDnd() {
         const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
         event.subject.fx = pointerX;
         event.subject.fy = pointerY;
-        this.listeners.onMoveDragFinished?.(event, this.state);
+        this.listeners.onMoveDragFinished?.call?.(this, event);
     })
         .on("end", (event) => {
         this.isDragging = false;
@@ -1902,12 +1196,12 @@ function initDnd() {
             event.subject.fx = null;
             event.subject.fy = null;
         }
-        this.listeners.onEndDragFinished?.(event, this.state);
+        this.listeners.onEndDragFinished?.call?.(this, event);
     });
     d3Selection.select(this.area).call(dragHandler);
 }
 
-function getDrawLink(state) {
+function getDrawLink() {
     return function drawLink(link, index) {
         if (!this.context ||
             typeof link.source !== "object" ||
@@ -1921,88 +1215,114 @@ function getDrawLink(state) {
             return;
         const id = `${link.target.id}${link.source.id}`;
         let linkOptions;
-        if (this.linkSettings.cache && this.linkOptionsCache[id]) {
+        if (this.linkSettings.cacheOptions && this.linkOptionsCache[id]) {
             linkOptions = this.linkOptionsCache[id];
         }
         else {
-            linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
-            if (this.linkSettings.cache) {
+            linkOptions = linkIterationExtractor(link, index, this.links, this, this.linkSettings.options ?? {}, linkOptionsGetter);
+            if (this.linkSettings.cacheOptions) {
                 this.linkOptionsCache[id] = linkOptions;
             }
         }
         if (linkOptions.drawLink) {
-            linkOptions.drawLink(link, linkOptions, state);
+            linkOptions.drawLink.call(this, link, linkOptions);
             return;
         }
         let alpha = linkOptions.alpha;
+        let color = linkOptions.color;
+        let width = linkOptions.width;
         let arrowAlpha = this.linkSettings.arrowByHighlight ? 0 : linkOptions.arrowAlpha;
-        /** NODE HIGHLIGHT */
+        let arrowColor = linkOptions.arrowColor;
+        let arrowSize = linkOptions.arrowSize;
+        let arrowBorderWidth = linkOptions.arrowBorderWidth;
+        let arrowBorderColor = linkOptions.arrowBorderColor;
+        /** Highlight */
         if (this.highlightedNeighbors && this.highlightedNode) {
-            /** Not highlighted */
+            /** By Node Not Highlight */
             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);
-                }
+                const fadeOptions = linkFade({
+                    arrow: this.linkSettings.arrow,
+                    arrowByHighlight: this.linkSettings.arrowByHighlight,
+                    linkOptions,
+                    highlightProgress: this.highlightProgress,
+                    highlightForArrowFadingMin: this.highlightSettings.highlightByNodeForArrowFadingMin,
+                    highlightForLinkFadingMin: this.highlightSettings.highlightByNodeForLinkFadingMin,
+                });
+                alpha = fadeOptions.alpha;
+                arrowAlpha = fadeOptions.arrowAlpha;
             }
             else {
-                // eslint-disable-next-line no-lonely-if
-                if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {
-                    /** Highlighted */
-                    arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
-                }
+                const highlightOptions = linkHighlight({
+                    arrow: this.linkSettings.arrow,
+                    arrowByHighlight: this.linkSettings.arrowByHighlight,
+                    linkOptions,
+                    highlightProgress: this.highlightProgress,
+                    highlightForArrowBorderColor: this.highlightSettings.highlightByNodeForArrowBorderColor,
+                    highlightForArrowBorderSizingAdditional: this.highlightSettings.highlightByNodeForArrowBorderSizingAdditional,
+                    highlightForArrowColor: this.highlightSettings.highlightByNodeForArrowColor,
+                    highlightForArrowSizeAdditional: this.highlightSettings.highlightByNodeForArrowSizeAdditional,
+                    highlightForLinkColor: this.highlightSettings.highlightByNodeForLinkColor,
+                    highlightForLinkSizeAdditional: this.highlightSettings.highlightByNodeForLinkSizeAdditional,
+                });
+                arrowAlpha = highlightOptions.arrowAlpha;
+                color = highlightOptions.color;
+                width = highlightOptions.width;
+                arrowColor = highlightOptions.arrowColor;
+                arrowSize = highlightOptions.arrowSize;
+                arrowBorderWidth = highlightOptions.arrowBorderWidth;
+                arrowBorderColor = highlightOptions.arrowBorderColor;
             }
         }
-        /** LINK HIGHLIGHT */
         if (this.highlightedNeighbors && this.highlightedLink) {
-            /** Not highlighted */
+            /** By Link Not Highlight */
             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);
-                }
+                const fadeOptions = linkFade({
+                    arrow: this.linkSettings.arrow,
+                    arrowByHighlight: this.linkSettings.arrowByHighlight,
+                    linkOptions,
+                    highlightProgress: this.highlightProgress,
+                    highlightForArrowFadingMin: this.highlightSettings.highlightByLinkForArrowFadingMin,
+                    highlightForLinkFadingMin: this.highlightSettings.highlightByLinkForLinkFadingMin,
+                });
+                alpha = fadeOptions.alpha;
+                arrowAlpha = fadeOptions.arrowAlpha;
             }
             else {
-                // eslint-disable-next-line no-lonely-if
-                if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {
-                    /** Highlighted */
-                    arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
-                }
+                /** By Link Highlight */
+                const highlightOptions = linkHighlight({
+                    arrow: this.linkSettings.arrow,
+                    arrowByHighlight: this.linkSettings.arrowByHighlight,
+                    linkOptions,
+                    highlightProgress: this.highlightProgress,
+                    highlightForArrowBorderColor: this.highlightSettings.highlightByLinkForArrowBorderColor,
+                    highlightForArrowBorderSizingAdditional: this.highlightSettings.highlightByLinkForArrowBorderSizingAdditional,
+                    highlightForArrowColor: this.highlightSettings.highlightByLinkForArrowColor,
+                    highlightForArrowSizeAdditional: this.highlightSettings.highlightByLinkForArrowSizeAdditional,
+                    highlightForLinkColor: this.highlightSettings.highlightByLinkForLinkColor,
+                    highlightForLinkSizeAdditional: this.highlightSettings.highlightByLinkForLinkSizeAdditional,
+                });
+                arrowAlpha = highlightOptions.arrowAlpha;
+                color = highlightOptions.color;
+                width = highlightOptions.width;
+                arrowColor = highlightOptions.arrowColor;
+                arrowSize = highlightOptions.arrowSize;
+                arrowBorderWidth = highlightOptions.arrowBorderWidth;
+                arrowBorderColor = highlightOptions.arrowBorderColor;
             }
         }
         /** Link */
         this.context.beginPath();
         this.context.globalAlpha = alpha;
-        this.context.strokeStyle = linkOptions.color;
-        this.context.lineWidth = linkOptions.width;
+        this.context.strokeStyle = color;
+        this.context.lineWidth = 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) {
+        if (this.linkSettings.prettyDraw || this.linkSettings.particleFlexSpeed) {
             const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
-            const position = calculateLinkPositionByNode(link, isHasArrow ? linkOptions.arrowSize : 0);
+            const position = calculateLinkPositionByNode(link, isHasArrow ? arrowSize : 0);
             if (position) {
                 xStart = position.x1;
                 xEnd = position.x2;
@@ -2072,7 +1392,9 @@ function getDrawLink(state) {
                         this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
                         this.context.fillStyle = linkOptions.particleColor;
                         this.context.fill();
-                        this.context.stroke();
+                        if (linkOptions.particleBorderWidth > 0) {
+                            this.context.stroke();
+                        }
                     }
                 });
             }
@@ -2087,19 +1409,21 @@ function getDrawLink(state) {
             };
             this.context.beginPath();
             this.context.globalAlpha = arrowAlpha;
-            this.context.strokeStyle = linkOptions.arrowBorderColor;
-            this.context.lineWidth = linkOptions.arrowBorderWidth;
-            this.context.fillStyle = linkOptions.arrowColor;
+            this.context.strokeStyle = arrowBorderColor;
+            this.context.lineWidth = arrowBorderWidth;
+            this.context.fillStyle = 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.lineTo(xEnd - arrowSize * Math.cos(angle - Math.PI / 6), yEnd - arrowSize * Math.sin(angle - Math.PI / 6));
+            this.context.lineTo(xEnd - arrowSize * Math.cos(angle + Math.PI / 6), yEnd - arrowSize * Math.sin(angle + Math.PI / 6));
             this.context.closePath();
             this.context.fill();
-            this.context.stroke();
+            if (arrowBorderWidth > 0) {
+                this.context.stroke();
+            }
         }
         if (linkOptions.drawExtraLink) {
-            linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
+            linkOptions.drawExtraLink.call(this, link, { ...linkOptions, alpha });
         }
     };
 }
@@ -2172,17 +1496,17 @@ function getTextLines({ context, textAlign, textColor, textFont, textStyle, text
     return { lines, currentMaxSize };
 }
 
-function getDrawNode(nodeRenders, textRenders, state) {
+function getDrawNode(nodeRenders, textRenders) {
     return function drawNode(node, index) {
         if (!this.context || !node.x || !node.y)
             return;
         let nodeOptions;
-        if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
+        if (this.nodeSettings.cacheOptions && 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) {
+            nodeOptions = nodeIterationExtractor(node, index, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+            if (this.nodeSettings.cacheOptions) {
                 this.nodeOptionsCache[node.id] = nodeOptions;
             }
         }
@@ -2201,6 +1525,8 @@ function getDrawNode(nodeRenders, textRenders, state) {
         }
         let alpha = nodeOptions.alpha;
         let color = nodeOptions.color;
+        let borderColor = nodeOptions.borderColor;
+        let borderWidth = nodeOptions.borderWidth;
         let radiusInitial = nodeOptions.radius;
         let widthInitial = nodeOptions.width;
         let heightInitial = nodeOptions.height;
@@ -2209,101 +1535,107 @@ function getDrawNode(nodeRenders, textRenders, state) {
         let textShiftX = nodeOptions.textShiftX;
         let textShiftY = nodeOptions.textShiftY;
         let textWeight = nodeOptions.textWeight;
-        let textWidth = nodeOptions.textWidth;
-        let sizeCoefficient = 1;
-        /** Node Highlight */
+        let labelSize = nodeOptions.labelSize;
+        let labelWeight = nodeOptions.labelWeight;
+        let labelAlpha = nodeOptions.labelAlpha;
+        /** Highlight */
         if (this.highlightedNeighbors && this.highlightedNode) {
-            /** Not highlighted */
+            /** By Node Not Highlight */
             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})`;
-                    }
-                }
+                const fadingOptions = nodeFade({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelFadingMin: this.highlightSettings.highlightByNodeForLabelFadingMin,
+                    highlightForNodeColorFading: this.highlightSettings.highlightByNodeForNodeColorFading,
+                    highlightForNodeColorFadingMin: this.highlightSettings.highlightByNodeForNodeColorFadingMin,
+                    highlightForNodeFadingMin: this.highlightSettings.highlightByNodeForNodeFadingMin,
+                    highlightForTextFadingMin: this.highlightSettings.highlightByNodeForTextFadingMin,
+                });
+                alpha = fadingOptions.alpha;
+                color = fadingOptions.color;
+                textAlpha = fadingOptions.textAlpha;
+                labelAlpha = fadingOptions.labelAlpha;
             }
-            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.highlightByNodeNodeSizing &&
-                    (nodeOptions.shape === "square" || nodeOptions.shape === "text")) {
-                    sizeCoefficient = animationByProgress(sizeCoefficient, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    widthInitial *= sizeCoefficient;
-                    heightInitial *= sizeCoefficient;
-                }
-                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);
-                }
+            else if (!this.highlightSettings.highlightByNodeOnlyRoot ||
+                (this.highlightSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)) {
+                /** By Node Highlight */
+                const highlightOptions = nodeHighlight({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelSizingAdditional: this.highlightSettings.highlightByNodeForLabelSizingAdditional,
+                    highlightForLabelWeightAdditional: this.highlightSettings.highlightByNodeForLabelWeightAdditional,
+                    highlightForNodeBorderColor: this.highlightSettings.highlightByNodeForNodeBorderColor,
+                    highlightForNodeBorderSizingAdditional: this.highlightSettings.highlightByNodeForNodeBorderSizingAdditional,
+                    highlightForNodeColor: this.highlightSettings.highlightByNodeForNodeColor,
+                    highlightForNodeSizingAdditional: this.highlightSettings.highlightByNodeForNodeSizingAdditional,
+                    highlightForNodeSizingAdditionalCoefficient: this.highlightSettings.highlightByNodeForNodeSizingAdditionalCoefficient,
+                    highlightForTextShiftXAdditional: this.highlightSettings.highlightByNodeForTextShiftXAdditional,
+                    highlightForTextShiftYAdditional: this.highlightSettings.highlightByNodeForTextShiftYAdditional,
+                    highlightForTextSizingAdditional: this.highlightSettings.highlightByNodeForTextSizingAdditional,
+                    highlightForTextWeightAdditional: this.highlightSettings.highlightByNodeForTextWeightAdditional,
+                });
+                color = highlightOptions.color;
+                borderColor = highlightOptions.borderColor;
+                borderWidth = highlightOptions.borderWidth;
+                radiusInitial = highlightOptions.radiusInitial;
+                widthInitial = highlightOptions.widthInitial;
+                heightInitial = highlightOptions.heightInitial;
+                textSize = highlightOptions.textSize;
+                textShiftX = highlightOptions.textShiftX;
+                textShiftY = highlightOptions.textShiftY;
+                textWeight = highlightOptions.textWeight;
+                labelSize = highlightOptions.labelSize;
+                labelWeight = highlightOptions.labelWeight;
             }
         }
-        /** LinkHighlight */
         if (this.highlightedNeighbors && this.highlightedLink) {
-            /** Not highlighted */
+            /** By Link Not Highlight */
             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})`;
-                    }
-                }
+                const fadingOptions = nodeFade({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelFadingMin: this.highlightSettings.highlightByLinkForLabelFadingMin,
+                    highlightForNodeColorFading: this.highlightSettings.highlightByLinkForNodeColorFading,
+                    highlightForNodeColorFadingMin: this.highlightSettings.highlightByLinkForNodeColorFadingMin,
+                    highlightForNodeFadingMin: this.highlightSettings.highlightByLinkForNodeFadingMin,
+                    highlightForTextFadingMin: this.highlightSettings.highlightByLinkForTextFadingMin,
+                });
+                alpha = fadingOptions.alpha;
+                color = fadingOptions.color;
+                textAlpha = fadingOptions.textAlpha;
+                labelAlpha = fadingOptions.labelAlpha;
             }
             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")) {
-                    sizeCoefficient = animationByProgress(sizeCoefficient, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    widthInitial *= sizeCoefficient;
-                    heightInitial *= sizeCoefficient;
-                }
-                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);
-                }
+                /** By Link Highlight */
+                const highlightOptions = nodeHighlight({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelSizingAdditional: this.highlightSettings.highlightByLinkForLabelSizingAdditional,
+                    highlightForLabelWeightAdditional: this.highlightSettings.highlightByLinkForLabelWeightAdditional,
+                    highlightForNodeBorderColor: this.highlightSettings.highlightByLinkForNodeBorderColor,
+                    highlightForNodeBorderSizingAdditional: this.highlightSettings.highlightByLinkForNodeBorderSizingAdditional,
+                    highlightForNodeColor: this.highlightSettings.highlightByLinkForNodeColor,
+                    highlightForNodeSizingAdditional: this.highlightSettings.highlightByLinkForNodeSizingAdditional,
+                    highlightForNodeSizingAdditionalCoefficient: this.highlightSettings.highlightByLinkForNodeSizingAdditionalCoefficient,
+                    highlightForTextShiftXAdditional: this.highlightSettings.highlightByLinkForTextShiftXAdditional,
+                    highlightForTextShiftYAdditional: this.highlightSettings.highlightByLinkForTextShiftYAdditional,
+                    highlightForTextSizingAdditional: this.highlightSettings.highlightByLinkForTextSizingAdditional,
+                    highlightForTextWeightAdditional: this.highlightSettings.highlightByLinkForTextWeightAdditional,
+                });
+                color = highlightOptions.color;
+                borderColor = highlightOptions.borderColor;
+                borderWidth = highlightOptions.borderWidth;
+                radiusInitial = highlightOptions.radiusInitial;
+                widthInitial = highlightOptions.widthInitial;
+                heightInitial = highlightOptions.heightInitial;
+                textSize = highlightOptions.textSize;
+                textShiftX = highlightOptions.textShiftX;
+                textShiftY = highlightOptions.textShiftY;
+                textWeight = highlightOptions.textWeight;
+                labelSize = highlightOptions.labelSize;
+                labelWeight = highlightOptions.labelWeight;
             }
         }
         /** Flex radius */
@@ -2341,14 +1673,13 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 sizeFactor: this.nodeSettings.nodeSizeFactor,
                 sizeFlexible: this.nodeSettings.nodeSizeFlexible,
             });
-            textSize *= size.additionalSizeCoefficient;
+            labelSize *= size.additionalSizeCoefficient;
         }
         /** Size by text in textNode */
-        if (nodeOptions.shape === "text" && nodeOptions.text) {
-            textWidth = width;
+        if (nodeOptions.shape === "text" && nodeOptions.label) {
             let lines;
             let textNodeParameters;
-            const cachedLines = this.cachedNodeText[node.id];
+            const cachedLines = this.cachedNodeLabel[node.id];
             const cachedTextNodeParameters = this.cachedTextNodeParameters[node.id];
             if (cachedLines != undefined && cachedTextNodeParameters != undefined) {
                 lines = cachedLines;
@@ -2357,30 +1688,31 @@ function getDrawNode(nodeRenders, textRenders, state) {
             else {
                 const textInfo = getTextLines({
                     context: this.context,
-                    text: nodeOptions.text,
-                    textAlign: nodeOptions.textAlign,
-                    textColor: nodeOptions.textColor,
-                    textFont: nodeOptions.textFont,
-                    textSize,
-                    maxWidth: textWidth,
-                    textStyle: nodeOptions.textStyle,
+                    text: nodeOptions.label,
+                    textAlign: nodeOptions.labelAlign,
+                    textColor: nodeOptions.labelColor,
+                    textFont: nodeOptions.labelFont,
+                    textSize: labelSize,
+                    maxWidth: nodeOptions.labelWidth,
+                    textStyle: nodeOptions.labelStyle,
                     textWeight,
                 });
-                textNodeParameters = [textInfo.currentMaxSize, textSize];
+                textNodeParameters = [textInfo.currentMaxSize, labelSize];
                 lines = textInfo.lines;
-                this.cachedNodeText[node.id] = lines;
+                this.cachedNodeLabel[node.id] = lines;
                 this.cachedTextNodeParameters[node.id] = textNodeParameters;
             }
-            const textSizeCoefficient = textSize / textNodeParameters[1];
+            const textSizeCoefficient = labelSize / textNodeParameters[1];
             const maxSize = textNodeParameters[0] * textSizeCoefficient;
             height =
-                lines.length * textSize +
-                    (lines.length - 1) * nodeOptions.textGap +
-                    nodeOptions.textNodeYPadding;
-            width = maxSize + nodeOptions.textNodeXPadding;
+                lines.length * labelSize +
+                    (lines.length - 1) * nodeOptions.labelGap +
+                    nodeOptions.labelYPadding;
+            width = maxSize + nodeOptions.labelXPadding;
         }
         /** Node parameters */
         node._radius = radius;
+        node._borderWidth = borderWidth;
         node._width = width;
         node._height = height;
         node._borderRadius =
@@ -2405,49 +1737,127 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 return;
             this.context.beginPath();
             this.context.globalAlpha = alpha;
-            this.context.lineWidth = nodeOptions.borderWidth;
-            this.context.strokeStyle = nodeOptions.borderColor;
+            this.context.lineWidth = borderWidth;
+            this.context.strokeStyle = borderColor;
             this.context.fillStyle = color;
             switch (nodeOptions.shape) {
                 case "circle": {
-                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    if (!node.image) {
+                        this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                        this.context.fill();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    else {
+                        this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                        this.context.closePath();
+                        this.context.save();
+                        this.context.clip();
+                        this.context.drawImage(node.image, node.x - radius, node.y - radius, radius * 2, radius * 2);
+                        this.context.restore();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    if (node.label) {
+                        this.context.globalAlpha = labelAlpha;
+                        drawText({
+                            context: this.context,
+                            cachedNodeText: this.cachedNodeLabel,
+                            id: node.id,
+                            text: node.label,
+                            textAlign: nodeOptions.labelAlign,
+                            textColor: nodeOptions.labelColor,
+                            textFont: nodeOptions.labelFont,
+                            textGap: nodeOptions.labelGap,
+                            textSize: labelSize,
+                            textStyle: nodeOptions.labelStyle,
+                            textWeight: labelWeight,
+                            maxWidth: nodeOptions.labelWidth,
+                            x: node.x,
+                            y: node.y + labelSize / 3,
+                        });
+                    }
                     break;
                 }
                 case "square": {
-                    this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                    if (!node.image) {
+                        this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                        this.context.fill();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    else {
+                        this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                        this.context.closePath();
+                        this.context.save();
+                        this.context.clip();
+                        this.context.drawImage(node.image, node.x - width / 2, node.y - height / 2, width, height);
+                        this.context.restore();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    if (node.label) {
+                        this.context.globalAlpha = labelAlpha;
+                        drawText({
+                            context: this.context,
+                            cachedNodeText: this.cachedNodeLabel,
+                            id: node.id,
+                            text: node.label,
+                            textAlign: nodeOptions.labelAlign,
+                            textColor: nodeOptions.labelColor,
+                            textFont: nodeOptions.labelFont,
+                            textGap: nodeOptions.labelGap,
+                            textSize: labelSize,
+                            textStyle: nodeOptions.labelStyle,
+                            textWeight: labelWeight,
+                            maxWidth: nodeOptions.labelWidth,
+                            x: node.x,
+                            y: node.y + labelSize / 3,
+                        });
+                    }
                     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)
+                    const lines = this.cachedNodeLabel[node.id];
+                    if (nodeOptions.label && lines)
                         drawText({
                             id: node.id,
-                            cachedNodeText: this.cachedNodeText,
+                            cachedNodeText: this.cachedNodeLabel,
                             context: this.context,
-                            text: nodeOptions.text,
-                            textAlign: nodeOptions.textAlign,
-                            textColor: nodeOptions.textColor,
-                            textFont: nodeOptions.textFont,
-                            textSize,
+                            text: nodeOptions.label,
+                            textAlign: nodeOptions.labelAlign,
+                            textColor: nodeOptions.labelColor,
+                            textFont: nodeOptions.labelFont,
+                            textSize: labelSize,
                             x: node.x,
                             y: node.y + textSize / 4 - (lines.length - 1) * (textSize / 2),
-                            maxWidth: textWidth,
-                            textStyle: nodeOptions.textStyle,
+                            maxWidth: nodeOptions.labelWidth,
+                            textStyle: nodeOptions.labelStyle,
                             textWeight,
-                            textGap: nodeOptions.textGap,
+                            textGap: nodeOptions.labelGap,
                         });
+                    this.context.fill();
+                    if (borderWidth > 0) {
+                        this.context.stroke();
+                    }
                     break;
                 }
                 default: {
                     this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    this.context.fill();
+                    if (borderWidth > 0) {
+                        this.context.stroke();
+                    }
                     break;
                 }
             }
-            this.context.fill();
-            this.context.stroke();
         });
         if (nodeOptions.nodeExtraDraw) {
             nodeRenders.push(() => {
@@ -2461,12 +1871,11 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     textShiftX,
                     textShiftY,
                     textWeight,
-                    textWidth,
                 });
             });
         }
         /** Text draw */
-        if (nodeOptions.textVisible && nodeOptions.text && nodeOptions.shape !== "text") {
+        if (nodeOptions.textVisible && nodeOptions.text) {
             textRenders.push(() => {
                 if (nodeOptions.textDraw) {
                     nodeOptions.textDraw.bind(this)(node, {
@@ -2479,7 +1888,6 @@ function getDrawNode(nodeRenders, textRenders, state) {
                         textShiftX,
                         textShiftY,
                         textWeight,
-                        textWidth,
                     });
                     return;
                 }
@@ -2491,7 +1899,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 if (nodeOptions.shape === "circle") {
                     y += radius;
                 }
-                if (nodeOptions.shape === "square") {
+                if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
                     y += height / 2;
                 }
                 drawText({
@@ -2505,7 +1913,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     textSize,
                     x: node.x + textShiftX,
                     y,
-                    maxWidth: textWidth,
+                    maxWidth: nodeOptions.textWidth,
                     textStyle: nodeOptions.textStyle,
                     textWeight,
                     textGap: nodeOptions.textGap,
@@ -2521,7 +1929,6 @@ function getDrawNode(nodeRenders, textRenders, state) {
                         textShiftX,
                         textShiftY,
                         textWeight,
-                        textWidth,
                     });
                 }
             });
@@ -2569,18 +1976,8 @@ function initDraw() {
     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;
-            });
+            this.listeners.onDraw.call(this);
             return;
         }
         this.context.save();
@@ -2589,14 +1986,14 @@ function initDraw() {
         this.context.scale(this.areaTransform.k, this.areaTransform.k);
         const textRenders = [];
         const nodeRenders = [];
-        this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
+        this.nodes.forEach(getDrawNode(nodeRenders, textRenders).bind(this));
         /** links */
-        this.links.forEach(getDrawLink(state).bind(this));
+        this.links.forEach(getDrawLink().bind(this));
         /** nodes */
         nodeRenders.forEach((render) => render());
         textRenders.forEach((render) => render());
         this.context.restore();
-        this.listeners.onDrawFinished?.(state);
+        this.listeners.onDrawFinished?.call?.(this);
         calculateHighlight.bind(this)();
     }
     if (this.graphSettings.showDrawTime) {
@@ -2613,8 +2010,8 @@ function initPointer() {
             return;
         let currentNode;
         let currentLink;
-        const checkHighlightNode = this.nodeSettings.highlightByHoverNode && !this.isDragging;
-        const checkHighlightLink = this.linkSettings.highlightByHoverLink && !this.isDragging;
+        const checkHighlightNode = this.highlightSettings.highlightByHoverNode && !this.isDragging;
+        const checkHighlightLink = this.highlightSettings.highlightByHoverLink && !this.isDragging;
         let highlightNode = true;
         let highlightLink = true;
         if (checkHighlightNode) {
@@ -2632,7 +2029,7 @@ function initPointer() {
         }
         else if (checkHighlightLink) {
             currentLink = linkByPointerGetter({
-                linkSettings: this.linkSettings,
+                linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
@@ -2693,7 +2090,7 @@ function initPointer() {
             });
         if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
             currentLink = linkByPointerGetter({
-                linkSettings: this.linkSettings,
+                linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
@@ -2701,7 +2098,7 @@ function initPointer() {
             });
         }
         if (!currentNode)
-            return void this.listeners.onMove(event, currentNode, currentLink);
+            return void this.listeners.onMove.call(this, event, currentNode, currentLink);
     }
     function onWheelClick(event) {
         if (this.isDragging ||
@@ -2717,15 +2114,15 @@ function initPointer() {
         });
         if (!currentNode) {
             const currentLink = linkByPointerGetter({
-                linkSettings: this.linkSettings,
+                linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
             });
-            return void this.listeners.onWheelClick(event, undefined, currentLink);
+            return void this.listeners.onWheelClick.call(this, event, undefined, currentLink);
         }
-        return void this.listeners.onWheelClick(event, currentNode, undefined);
+        return void this.listeners.onWheelClick.call(this, event, currentNode, undefined);
     }
     function onRightClick(event) {
         if (!this.listeners.onContextMenu)
@@ -2738,15 +2135,15 @@ function initPointer() {
         });
         if (!currentNode) {
             const currentLink = linkByPointerGetter({
-                linkSettings: this.linkSettings,
+                linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
             });
-            return void this.listeners.onContextMenu(event, undefined, currentLink);
+            return void this.listeners.onContextMenu.call(this, event, undefined, currentLink);
         }
-        return void this.listeners.onContextMenu(event, currentNode, undefined);
+        return void this.listeners.onContextMenu.call(this, event, currentNode, undefined);
     }
     function onDoubleClick(event) {
         if (!this.listeners.onDoubleClick)
@@ -2759,15 +2156,15 @@ function initPointer() {
         });
         if (!currentNode) {
             const currentLink = linkByPointerGetter({
-                linkSettings: this.linkSettings,
+                linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
             });
-            return void this.listeners.onDoubleClick(event, undefined, currentLink);
+            return void this.listeners.onDoubleClick.call(this, event, undefined, currentLink);
         }
-        return void this.listeners.onDoubleClick(event, currentNode, undefined);
+        return void this.listeners.onDoubleClick.call(this, event, currentNode, undefined);
     }
     function onClick(event) {
         if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
@@ -2780,15 +2177,15 @@ function initPointer() {
         });
         if (!currentNode) {
             const currentLink = linkByPointerGetter({
-                linkSettings: this.linkSettings,
+                linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
             });
-            return void this.listeners.onClick(event, undefined, currentLink);
+            return void this.listeners.onClick.call(this, event, undefined, currentLink);
         }
-        return void this.listeners.onClick(event, currentNode, undefined);
+        return void this.listeners.onClick.call(this, event, currentNode, undefined);
     }
     /** hover */
     this.area.addEventListener("mousemove", onHover.bind(this), {
@@ -2845,12 +2242,12 @@ function initSimulation() {
     if (!this.simulation) {
         this.simulation = d3Force.forceSimulation()
             .nodes(this.nodes)
-            .force("link", d3Force.forceLink(this.links).id(this.nodeSettings.idGetter))
+            .force("link", d3Force.forceLink(this.links).id(this.nodeSettings.idGetter.bind(this)))
             .on("tick", () => {
             this.draw();
         })
             .on("end", () => {
-            this.listeners.onSimulationEnd?.(this.state);
+            this.listeners.onSimulationEnd?.call?.(this);
             if (this.graphSettings.showDrawTime) {
                 getDrawTime();
                 // eslint-disable-next-line no-console
@@ -2899,7 +2296,7 @@ function initSimulationForces() {
     if (this.forceSettings.forces && this.forceSettings.chargeForce) {
         this.simulation.force("charge", d3Force.forceManyBody()
             .strength(this.forceSettings.chargeStrength)
-            .distanceMax(this.forceSettings.chargeDistanceMax)
+            .distanceMax(Infinity)
             .distanceMin(this.forceSettings.chargeDistanceMin));
     }
     if (this.forceSettings.forces && this.forceSettings.centerForce) {
@@ -2924,11 +2321,11 @@ function initCollideForce(forceUpdate) {
         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);
+                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this, 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);
+                            return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
                         }
                         const radius = nodeRadiusGetter({
                             radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
@@ -2961,30 +2358,29 @@ function initCollideForce(forceUpdate) {
                             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,
-                                }).lines;
+                            const textInfo = 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;
+                                textInfo.lines.length * nodeOptions.textSize +
+                                    (textInfo.lines.length - 1) * nodeOptions.textGap +
+                                    nodeOptions.labelYPadding;
+                            width = textInfo.currentMaxSize + nodeOptions.labelXPadding;
                         }
                         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);
+                            return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
                         }
                         const radius = nodeRadiusGetter({
                             radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
@@ -3009,7 +2405,7 @@ function initZoom(currentZoom) {
     const zoomInstance = d3Zoom.zoom()
         .scaleExtent(this.graphSettings.zoomExtent)
         .on("zoom", (event) => {
-        this.listeners.onZoom?.(event);
+        this.listeners.onZoom?.call?.(this, event);
         this.areaTransform = event.transform;
         this.linkOptionsCache = {};
         this.nodeOptionsCache = {};
@@ -3046,6 +2442,7 @@ class GraphCanvas {
     /** settings */
     graphSettings;
     forceSettings;
+    highlightSettings;
     nodeSettings;
     linkSettings;
     listeners;
@@ -3057,6 +2454,7 @@ class GraphCanvas {
     draw;
     eventAbortController;
     cachedNodeText = {};
+    cachedNodeLabel = {};
     cachedTextNodeParameters = {};
     linkOptionsCache = {};
     nodeOptionsCache = {};
@@ -3074,32 +2472,7 @@ class GraphCanvas {
         const force = (simulationAlpha - simulationAlphaMin) / simulationAlphaDecay;
         return force > 0;
     }
-    get state() {
-        return {
-            areaTransform: this.areaTransform,
-            cachedNodeText: this.cachedNodeText,
-            context: this.context,
-            eventAbortController: this.eventAbortController,
-            highlightProgress: this.highlightProgress,
-            highlightDrawing: this.highlightDrawing,
-            highlightedNeighbors: this.highlightedNeighbors,
-            highlightedNode: this.highlightedNode,
-            highlightedLink: this.highlightedLink,
-            highlightWorking: this.highlightWorking,
-            isDragging: this.isDragging,
-            simulation: this.simulation,
-            simulationWorking: this.simulationWorking,
-            height: this.height,
-            links: this.links,
-            nodes: this.nodes,
-            width: this.width,
-            forceSettings: this.forceSettings,
-            graphSettings: this.graphSettings,
-            linkSettings: this.linkSettings,
-            nodeSettings: this.nodeSettings,
-        };
-    }
-    constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, }) {
+    constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, highlightSettings, }) {
         // root.style.position = "relative";
         root.style.overflow = "hidden";
         this.root = root;
@@ -3108,6 +2481,7 @@ class GraphCanvas {
         this.nodeSettings = nodeSettingsGetter(nodeSettings);
         this.listeners = listenersGetter(listeners);
         this.graphSettings = graphSettingsGetter(graphSettings);
+        this.highlightSettings = highlightSettingsGetter(highlightSettings);
         this.eventAbortController = new AbortController();
         this.nodes = nodes;
         this.links = links;
@@ -3142,6 +2516,14 @@ class GraphCanvas {
         if (options.forceSettings) {
             this.forceSettings = forceSettingsGetter(options.forceSettings, this.forceSettings);
         }
+        if (options.highlightSettings) {
+            this.highlightSettings = highlightSettingsGetter(options.highlightSettings, this.highlightSettings);
+            this.linkOptionsCache = {};
+            this.cachedNodeText = {};
+            this.cachedNodeLabel = {};
+            this.cachedTextNodeParameters = {};
+            this.nodeOptionsCache = {};
+        }
         if (options.linkSettings) {
             this.linkSettings = linkSettingsGetter(options.linkSettings, this.linkSettings);
             this.linkOptionsCache = {};
@@ -3149,6 +2531,7 @@ class GraphCanvas {
         if (options.nodeSettings) {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
             this.cachedNodeText = {};
+            this.cachedNodeLabel = {};
             this.cachedTextNodeParameters = {};
             this.nodeOptionsCache = {};
             initCollideForce.call(this, true);
@@ -3167,6 +2550,7 @@ class GraphCanvas {
             this.nodeOptionsCache = {};
             this.linkOptionsCache = {};
             this.cachedNodeText = {};
+            this.cachedNodeLabel = {};
             this.cachedTextNodeParameters = {};
         }
         else {
@@ -3239,7 +2623,7 @@ class GraphCanvas {
             this.simulation
                 .nodes(this.nodes)
                 .force("link", d3Force.forceLink(this.links)
-                .id(this.nodeSettings.idGetter)
+                .id(this.nodeSettings.idGetter.bind(this))
                 .distance(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkDistance
                 : 0)
@@ -3273,28 +2657,1223 @@ class GraphCanvas {
     }
 }
 
+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: "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: typeof FORCE_SETTINGS.chargeStrength === "number" ? FORCE_SETTINGS.chargeStrength : 0,
+        label: "Дистанция",
+        max: 0,
+        min: -300,
+        step: 0.1,
+        type: "range",
+    },
+    {
+        type: "range",
+        id: "xPosition",
+        min: 0,
+        max: 2000,
+        step: 1,
+        label: "Координата притяжения по оси X",
+        initialValue: typeof FORCE_SETTINGS.xPosition === "number" ? FORCE_SETTINGS.xPosition : 0,
+    },
+    {
+        type: "range",
+        id: "yPosition",
+        min: 0,
+        max: 2000,
+        step: 1,
+        label: "Координата притяжения по оси Y",
+        initialValue: typeof FORCE_SETTINGS.yPosition === "number" ? FORCE_SETTINGS.yPosition : 0,
+    },
+    {
+        type: "range",
+        id: "xStrength",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Сила притяжения по оси X",
+        initialValue: typeof FORCE_SETTINGS.xStrength === "number" ? FORCE_SETTINGS.xStrength : 0,
+    },
+    {
+        type: "range",
+        id: "yStrength",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Сила притяжения по оси Y",
+        initialValue: typeof FORCE_SETTINGS.yStrength === "number" ? FORCE_SETTINGS.yStrength : 0,
+    },
+    {
+        type: "range",
+        id: "linkStrength",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Сила связей",
+        initialValue: typeof FORCE_SETTINGS.linkStrength === "number" ? FORCE_SETTINGS.linkStrength : 0,
+    },
+    {
+        type: "range",
+        id: "linkDistance",
+        min: 0,
+        max: 300,
+        step: 0.1,
+        label: "Расстояние связей",
+        initialValue: typeof FORCE_SETTINGS.linkDistance === "number" ? FORCE_SETTINGS.linkDistance : 30,
+    },
+];
+
+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: "Скорость применения анимации в кадрах",
+    },
+];
+
+const HIGHLIGHT_COMMON_CONTROLS = [
+    {
+        id: "highlightByHoverNode",
+        type: "checkbox",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByHoverNode,
+        label: "Анимация при наведении на вершину",
+    },
+    {
+        id: "highlightByHoverLink",
+        type: "checkbox",
+        label: "Анимация при наведении на связь",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByHoverLink,
+    },
+    {
+        id: "linkHoverExtraZone",
+        initialValue: HIGHLIGHT_SETTINGS.linkHoverExtraZone,
+        max: 10,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Расширение границы связи для курсора",
+    },
+];
+const HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS = [
+    {
+        id: "highlightByNodeOnlyRoot",
+        type: "checkbox",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeOnlyRoot,
+        label: "Основная анимация только на инициаторе",
+    },
+    {
+        id: "highlightByNodeForNodeColorFading",
+        type: "checkbox",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeColorFading,
+        label: "Прозрачность без альфа канала",
+    },
+    {
+        id: "highlightByNodeForNodeColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeColor ?? "#000000",
+        label: "Цвет",
+    },
+    {
+        id: "highlightByNodeForNodeFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByNodeForNodeColorFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeColorFadingMin,
+        max: 1,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности без альфа канала",
+    },
+    {
+        id: "highlightByNodeForNodeSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeSizingAdditional,
+        max: 10,
+        min: -10,
+        step: 0.01,
+        type: "range",
+        label: "Изменение радиуса (только для круга)",
+    },
+    {
+        id: "highlightByNodeForNodeSizingAdditionalCoefficient",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeSizingAdditionalCoefficient,
+        max: 10,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Коэффициент изменения размера (только не для круга)",
+    },
+    {
+        id: "highlightByNodeForNodeBorderColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeBorderColor ?? "#000000",
+        label: "Цвет границы",
+    },
+    {
+        id: "highlightByNodeForNodeBorderSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeBorderSizingAdditional,
+        max: 10,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Изменение размера границы",
+    },
+];
+const HIGHLIGHT_BY_NODE_FOR_TEXT_CONTROLS = [
+    {
+        id: "highlightByNodeForTextFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForTextFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByNodeForTextSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForTextSizingAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+    {
+        id: "highlightByNodeForTextWeightAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForTextWeightAdditional,
+        max: 1000,
+        min: -1e3,
+        step: 100,
+        type: "range",
+        label: "Изменение жирности",
+    },
+    {
+        id: "highlightByNodeForTextShiftXAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForTextShiftXAdditional,
+        max: 50,
+        min: -50,
+        step: 0.1,
+        type: "range",
+        label: "Смещение по оси X",
+    },
+    {
+        id: "highlightByNodeForTextShiftYAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForTextShiftYAdditional,
+        max: 50,
+        min: -50,
+        step: 0.1,
+        type: "range",
+        label: "Смещение по оси Y",
+    },
+];
+const HIGHLIGHT_BY_NODE_FOR_LABEL_CONTROLS = [
+    {
+        id: "highlightByNodeForLabelFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForLabelFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByNodeForLabelSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForLabelSizingAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+    {
+        id: "highlightByNodeForLabelWeightAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForLabelWeightAdditional,
+        max: 1000,
+        min: -1e3,
+        step: 100,
+        type: "range",
+        label: "Изменение жирности",
+    },
+];
+const HIGHLIGHT_BY_NODE_FOR_LINK_CONTROLS = [
+    {
+        id: "highlightByNodeForLinkColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForLinkColor ?? "#000000",
+        label: "Цвет",
+    },
+    {
+        id: "highlightByNodeForLinkFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForLinkFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByNodeForLinkSizeAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForLinkSizeAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+];
+const HIGHLIGHT_BY_NODE_FOR_ARROW_CONTROLS = [
+    {
+        id: "highlightByNodeForArrowColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForArrowColor ?? "#000000",
+        label: "Цвет",
+    },
+    {
+        id: "highlightByNodeForArrowFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForArrowFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByNodeForArrowSizeAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForArrowSizeAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+    {
+        id: "highlightByNodeForArrowBorderColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForArrowBorderColor ?? "#000000",
+        label: "Цвет границы",
+    },
+    {
+        id: "highlightByNodeForArrowBorderSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForArrowBorderSizingAdditional,
+        max: 10,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Изменение размера границы",
+    },
+];
+const HIGHLIGHT_BY_LINK_FOR_NODE_CONTROLS = [
+    {
+        id: "highlightByLinkForNodeColorFading",
+        type: "checkbox",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeColorFading,
+        label: "Прозрачность без альфа канала",
+    },
+    {
+        id: "highlightByLinkForNodeColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeColor ?? "#000000",
+        label: "Цвет",
+    },
+    {
+        id: "highlightByLinkForNodeFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByLinkForNodeColorFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeColorFadingMin,
+        max: 1,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности без альфа канала",
+    },
+    {
+        id: "highlightByLinkForNodeSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeSizingAdditional,
+        max: 10,
+        min: -10,
+        step: 0.01,
+        type: "range",
+        label: "Изменение радиуса (только для круга)",
+    },
+    {
+        id: "highlightByLinkForNodeSizingAdditionalCoefficient",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeSizingAdditionalCoefficient,
+        max: 10,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Коэффициент изменения размера (только не для круга)",
+    },
+    {
+        id: "highlightByLinkForNodeBorderColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeBorderColor ?? "#000000",
+        label: "Цвет границы",
+    },
+    {
+        id: "highlightByLinkForNodeBorderSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeBorderSizingAdditional,
+        max: 10,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Изменение размера границы",
+    },
+];
+const HIGHLIGHT_BY_LINK_FOR_TEXT_CONTROLS = [
+    {
+        id: "highlightByLinkForTextFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForTextFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByLinkForTextSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForTextSizingAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+    {
+        id: "highlightByLinkForTextWeightAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForTextWeightAdditional,
+        max: 1000,
+        min: -1e3,
+        step: 100,
+        type: "range",
+        label: "Изменение жирности",
+    },
+    {
+        id: "highlightByLinkForTextShiftXAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForTextShiftXAdditional,
+        max: 50,
+        min: -50,
+        step: 0.1,
+        type: "range",
+        label: "Смещение по оси X",
+    },
+    {
+        id: "highlightByLinkForTextShiftYAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForTextShiftYAdditional,
+        max: 50,
+        min: -50,
+        step: 0.1,
+        type: "range",
+        label: "Смещение по оси Y",
+    },
+];
+const HIGHLIGHT_BY_LINK_FOR_LABEL_CONTROLS = [
+    {
+        id: "highlightByLinkForLabelFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForLabelFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByLinkForLabelSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForLabelSizingAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+    {
+        id: "highlightByLinkForLabelWeightAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForLabelWeightAdditional,
+        max: 1000,
+        min: -1e3,
+        step: 100,
+        type: "range",
+        label: "Изменение жирности",
+    },
+];
+const HIGHLIGHT_BY_LINK_FOR_LINK_CONTROLS = [
+    {
+        id: "highlightByLinkForLinkColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForLinkColor ?? "#000000",
+        label: "Цвет",
+    },
+    {
+        id: "highlightByLinkForLinkFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForLinkFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByLinkForLinkSizeAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForLinkSizeAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+];
+const HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS = [
+    {
+        id: "highlightByLinkForArrowColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForArrowColor ?? "#000000",
+        label: "Цвет",
+    },
+    {
+        id: "highlightByLinkForArrowFadingMin",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForArrowFadingMin,
+        max: 1,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница прозрачности",
+    },
+    {
+        id: "highlightByLinkForArrowSizeAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForArrowSizeAdditional,
+        max: 10,
+        min: -10,
+        step: 0.1,
+        type: "range",
+        label: "Изменение размера",
+    },
+    {
+        id: "highlightByLinkForArrowBorderColor",
+        type: "color",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForArrowBorderColor ?? "#000000",
+        label: "Цвет границы",
+    },
+    {
+        id: "highlightByLinkForArrowBorderSizingAdditional",
+        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForArrowBorderSizingAdditional,
+        max: 10,
+        min: 0.01,
+        step: 0.01,
+        type: "range",
+        label: "Изменение размера границы",
+    },
+];
+
+const LINK_SETTINGS_CONTROLS = [
+    {
+        id: "cacheOptions",
+        type: "checkbox",
+        label: "Кеширование вычисляемых настроек",
+        initialValue: LINK_SETTINGS.cacheOptions,
+    },
+    {
+        id: "prettyDraw",
+        type: "checkbox",
+        label: "Обсчет корректного соединения",
+        initialValue: LINK_SETTINGS.prettyDraw,
+    },
+    {
+        id: "linkScaleSwitch",
+        initialValue: LINK_SETTINGS.linkScaleSwitch,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Граница зума для связи",
+    },
+    {
+        id: "linkWidthAfterScaleSwitch",
+        initialValue: LINK_SETTINGS.linkWidthAfterScaleSwitch,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Размер связи после границы зума",
+    },
+    {
+        id: "linkWidthBeforeScaleSwitch",
+        initialValue: LINK_SETTINGS.linkWidthBeforeScaleSwitch,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Размер связи до границы зума",
+    },
+    {
+        id: "linkColorAfterScaleSwitch",
+        type: "color",
+        initialValue: LINK_SETTINGS.linkColorAfterScaleSwitch,
+        label: "Цвет связи после границы зума",
+    },
+    {
+        id: "linkColorBeforeScaleSwitch",
+        type: "color",
+        initialValue: LINK_SETTINGS.linkColorBeforeScaleSwitch,
+        label: "Цвет связи до границы зума",
+    },
+    {
+        id: "arrow",
+        type: "checkbox",
+        label: "Стрелка",
+        initialValue: LINK_SETTINGS.arrow,
+    },
+    {
+        id: "arrowByHighlight",
+        type: "checkbox",
+        label: "Появление стрелки при анимации",
+        initialValue: LINK_SETTINGS.arrowByHighlight,
+    },
+    {
+        id: "particles",
+        type: "checkbox",
+        label: "Частицы",
+        initialValue: LINK_SETTINGS.particles,
+    },
+    {
+        id: "particleFlexSpeed",
+        type: "checkbox",
+        label: "Гибкий расчет скорости частицы",
+        initialValue: LINK_SETTINGS.particleFlexSpeed,
+    },
+    {
+        id: "particleFlexSpeedCoefficient",
+        initialValue: LINK_SETTINGS.particleFlexSpeedCoefficient,
+        max: 10,
+        min: 0.1,
+        step: 0.1,
+        type: "range",
+        label: "Коэффициент скорости частицы относительно расстояния",
+    },
+];
+const LINK_OPTIONS_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: "color",
+        type: "color",
+        initialValue: "#000000FF",
+        label: "Цвет",
+    },
+];
+const LINK_OPTIONS_ARROW_CONTROLS = [
+    {
+        id: "arrowColor",
+        type: "color",
+        initialValue: "#000000FF",
+        label: "Цвет стрелки",
+    },
+    {
+        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: "arrowBorderColor",
+        type: "color",
+        initialValue: LINK_OPTIONS.arrowBorderColor,
+        label: "Цвет границы",
+    },
+    {
+        id: "arrowBorderWidth",
+        type: "range",
+        max: 10,
+        min: 0,
+        step: 0.1,
+        label: "Размер границы",
+        initialValue: LINK_OPTIONS.arrowBorderWidth,
+    },
+];
+const LINK_OPTIONS_PARTICLE_CONTROLS = [
+    {
+        id: "particleColor",
+        type: "color",
+        initialValue: LINK_OPTIONS.particleColor,
+        label: "Цвет",
+    },
+    {
+        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: "particleBorderColor",
+        type: "color",
+        initialValue: LINK_OPTIONS.particleBorderColor,
+        label: "Цвет границы",
+    },
+    {
+        id: "particleBorderWidth",
+        type: "range",
+        max: 10,
+        min: 0,
+        step: 0.1,
+        label: "Размер границы",
+        initialValue: LINK_OPTIONS.particleBorderWidth,
+    },
+];
+
+const NODE_SETTINGS_CONTROLS = [
+    {
+        id: "cacheOptions",
+        type: "checkbox",
+        initialValue: NODE_SETTINGS.cacheOptions,
+        label: "Кеширование вычисляемых настроек",
+    },
+    {
+        id: "textNodeDebug",
+        type: "checkbox",
+        initialValue: NODE_SETTINGS.textNodeDebug,
+        label: "Отладка текстовой вершины",
+    },
+    {
+        id: "nodeRadiusFlexible",
+        type: "checkbox",
+        initialValue: NODE_SETTINGS.nodeRadiusFlexible,
+        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: "nodeSizeFlexible",
+        type: "checkbox",
+        initialValue: NODE_SETTINGS.nodeSizeFlexible,
+        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: "textScaleMin",
+        initialValue: NODE_SETTINGS.textScaleMin,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Минимальная граница зума для текста",
+    },
+    {
+        id: "textScaleMax",
+        initialValue: NODE_SETTINGS.textScaleMax,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Максимальная граница зума для текста",
+    },
+    {
+        id: "textSizeMin",
+        initialValue: NODE_SETTINGS.textSizeMin,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Размер текста на минимальной границе зума",
+    },
+    {
+        id: "textSizeMax",
+        initialValue: NODE_SETTINGS.textSizeMax,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Размер текста на максимальной границе зума",
+    },
+    {
+        id: "textShiftYMin",
+        initialValue: NODE_SETTINGS.textShiftYMin,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Смещение текста по оси Y на минимальной границе зума",
+    },
+    {
+        id: "textShiftYMax",
+        initialValue: NODE_SETTINGS.textShiftYMax,
+        max: 20,
+        min: 0,
+        step: 0.01,
+        type: "range",
+        label: "Смещение текста по оси Y на максимальной границе зума",
+    },
+];
+const NODE_OPTIONS_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: "color",
+        type: "color",
+        initialValue: "#000000FF",
+        label: "Цвет",
+    },
+    {
+        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: 0.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: "borderColor",
+        type: "color",
+        initialValue: "#000000FF",
+        label: "Цвет границы",
+    },
+    {
+        id: "borderWidth",
+        type: "range",
+        max: 5,
+        min: 0,
+        step: 0.1,
+        label: "Толщина границы",
+        initialValue: NODE_OPTIONS.borderWidth,
+    },
+    {
+        id: "borderRadius",
+        type: "range",
+        max: 50,
+        min: 0,
+        step: 1,
+        label: "Радиус границы (только не для круга)",
+        initialValue: NODE_OPTIONS.borderRadius,
+    },
+];
+const NODE_OPTIONS_TEXT_CONTROLS = [
+    {
+        id: "textColor",
+        type: "color",
+        initialValue: NODE_OPTIONS.textColor,
+        label: "Цвет",
+    },
+    {
+        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,
+    },
+];
+const NODE_OPTIONS_LABEL_CONTROLS = [
+    {
+        id: "labelColor",
+        type: "color",
+        initialValue: NODE_OPTIONS.labelColor,
+        label: "Цвет",
+    },
+    {
+        id: "labelSize",
+        type: "range",
+        max: 30,
+        min: 0,
+        step: 0.1,
+        label: "Размер",
+        initialValue: NODE_OPTIONS.labelSize,
+    },
+    {
+        id: "labelAlpha",
+        type: "range",
+        max: 1,
+        min: 0,
+        step: 0.1,
+        label: "Прозрачность",
+        initialValue: NODE_OPTIONS.labelAlpha,
+    },
+    {
+        id: "labelWidth",
+        type: "range",
+        max: 200,
+        min: 5,
+        step: 1,
+        label: "Ширина",
+        initialValue: NODE_OPTIONS.labelWidth,
+    },
+    {
+        id: "labelWeight",
+        type: "range",
+        max: 1000,
+        min: 100,
+        step: 100,
+        label: "Жирность",
+        initialValue: NODE_OPTIONS.labelWeight,
+    },
+    {
+        id: "labelGap",
+        type: "range",
+        max: 30,
+        min: 0,
+        step: 0.1,
+        label: "Расстояние между строками",
+        initialValue: NODE_OPTIONS.labelGap,
+    },
+    {
+        id: "labelXPadding",
+        type: "range",
+        max: 30,
+        min: 0,
+        step: 0.1,
+        label: "Отступы по оси X",
+        initialValue: NODE_OPTIONS.labelXPadding,
+    },
+    {
+        id: "labelYPadding",
+        type: "range",
+        max: 30,
+        min: 0,
+        step: 0.1,
+        label: "Отступы по оси Y",
+        initialValue: NODE_OPTIONS.labelYPadding,
+    },
+];
+
+exports.COMMON_SETTINGS = COMMON_SETTINGS;
+exports.FORCE_CONTROLS = FORCE_CONTROLS;
+exports.FORCE_SETTINGS = FORCE_SETTINGS;
+exports.GRAPH_CONTROLS = GRAPH_CONTROLS;
+exports.GRAPH_SETTINGS = GRAPH_SETTINGS;
 exports.GraphCanvas = GraphCanvas;
+exports.HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS = HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS;
+exports.HIGHLIGHT_BY_LINK_FOR_LABEL_CONTROLS = HIGHLIGHT_BY_LINK_FOR_LABEL_CONTROLS;
+exports.HIGHLIGHT_BY_LINK_FOR_LINK_CONTROLS = HIGHLIGHT_BY_LINK_FOR_LINK_CONTROLS;
+exports.HIGHLIGHT_BY_LINK_FOR_NODE_CONTROLS = HIGHLIGHT_BY_LINK_FOR_NODE_CONTROLS;
+exports.HIGHLIGHT_BY_LINK_FOR_TEXT_CONTROLS = HIGHLIGHT_BY_LINK_FOR_TEXT_CONTROLS;
+exports.HIGHLIGHT_BY_NODE_FOR_ARROW_CONTROLS = HIGHLIGHT_BY_NODE_FOR_ARROW_CONTROLS;
+exports.HIGHLIGHT_BY_NODE_FOR_LABEL_CONTROLS = HIGHLIGHT_BY_NODE_FOR_LABEL_CONTROLS;
+exports.HIGHLIGHT_BY_NODE_FOR_LINK_CONTROLS = HIGHLIGHT_BY_NODE_FOR_LINK_CONTROLS;
+exports.HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS = HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS;
+exports.HIGHLIGHT_BY_NODE_FOR_TEXT_CONTROLS = HIGHLIGHT_BY_NODE_FOR_TEXT_CONTROLS;
+exports.HIGHLIGHT_COMMON_CONTROLS = HIGHLIGHT_COMMON_CONTROLS;
+exports.HIGHLIGHT_SETTINGS = HIGHLIGHT_SETTINGS;
+exports.LINK_OPTIONS = LINK_OPTIONS;
+exports.LINK_OPTIONS_ARROW_CONTROLS = LINK_OPTIONS_ARROW_CONTROLS;
+exports.LINK_OPTIONS_LINK_CONTROLS = LINK_OPTIONS_LINK_CONTROLS;
+exports.LINK_OPTIONS_PARTICLE_CONTROLS = LINK_OPTIONS_PARTICLE_CONTROLS;
+exports.LINK_SETTINGS = LINK_SETTINGS;
+exports.LINK_SETTINGS_CONTROLS = LINK_SETTINGS_CONTROLS;
+exports.NODE_OPTIONS = NODE_OPTIONS;
+exports.NODE_OPTIONS_LABEL_CONTROLS = NODE_OPTIONS_LABEL_CONTROLS;
+exports.NODE_OPTIONS_NODE_CONTROLS = NODE_OPTIONS_NODE_CONTROLS;
+exports.NODE_OPTIONS_TEXT_CONTROLS = NODE_OPTIONS_TEXT_CONTROLS;
+exports.NODE_SETTINGS = NODE_SETTINGS;
+exports.NODE_SETTINGS_CONTROLS = NODE_SETTINGS_CONTROLS;
 exports.animationByProgress = animationByProgress;
 exports.calculateLinkPositionByNode = calculateLinkPositionByNode;
+exports.colorGetter = colorGetter;
 exports.colorToRgb = colorToRgb;
+exports.dragPlaceCoefficientGetter = dragPlaceCoefficientGetter;
 exports.drawText = drawText;
 exports.extractRgb = extractRgb;
 exports.fadeRgb = fadeRgb;
+exports.forceSettingsGetter = forceSettingsGetter;
 exports.getDrawLink = getDrawLink;
 exports.getDrawNode = getDrawNode;
-exports.getForceControls = getForceControls;
-exports.getGraphControls = getGraphControls;
-exports.getLinkOptionsControls = getLinkOptionsControls;
-exports.getLinkSettingsControls = getLinkSettingsControls;
-exports.getNodeOptionsControls = getNodeOptionsControls;
-exports.getNodeSettingControls = getNodeSettingControls;
 exports.getParticlePosition = getParticlePosition;
+exports.graphSettingsGetter = graphSettingsGetter;
+exports.highlightSettingsGetter = highlightSettingsGetter;
+exports.isNodeVisible = isNodeVisible;
+exports.isOverlapsNode = isOverlapsNode;
 exports.linkByPointerGetter = linkByPointerGetter;
+exports.linkFade = linkFade;
+exports.linkHighlight = linkHighlight;
 exports.linkIterationExtractor = linkIterationExtractor;
 exports.linkOptionsGetter = linkOptionsGetter;
+exports.linkSettingsGetter = linkSettingsGetter;
+exports.listenersGetter = listenersGetter;
 exports.nodeByPointerGetter = nodeByPointerGetter;
+exports.nodeFade = nodeFade;
+exports.nodeHighlight = nodeHighlight;
+exports.nodeIdGetter = nodeIdGetter;
 exports.nodeIterationExtractor = nodeIterationExtractor;
 exports.nodeOptionsGetter = nodeOptionsGetter;
 exports.nodeRadiusGetter = nodeRadiusGetter;
+exports.nodeSettingsGetter = nodeSettingsGetter;
+exports.nodeSizeGetter = nodeSizeGetter;
+exports.nodeTextSizeGetter = nodeTextSizeGetter;
+exports.pointerGetter = pointerGetter;
 exports.rgbAnimationByProgress = rgbAnimationByProgress;
 //# sourceMappingURL=index.cjs.map