@krainovsd/graph 0.7.0 → 0.8.1

package/lib/cjs/index.cjs

@@ -87,95 +87,6 @@ function rgbAnimationByProgress(start, end, progress) {
     };
 }
 
-const FORCE_SETTINGS = {
-    centerPosition: {},
-    centerStrength: 1,
-    collideStrength: 0.1,
-    collideAdditionalRadius: 4,
-    collideIterations: 2,
-    collideOffMax: { links: 0, nodes: 0 },
-    collideOn: true,
-    chargeStrength: -40,
-    chargeDistanceMax: Infinity,
-    chargeDistanceMin: 1,
-    xForce: 0,
-    xStrength: 0.1,
-    yForce: 0,
-    yStrength: 0.1,
-    linkDistance: 30,
-    linkIterations: 1,
-    linkStrength: 1,
-    collideRadius: null,
-};
-const GRAPH_SETTINGS = {
-    zoomExtent: [0.1, 20],
-    translateExtent: [[], []],
-    translateExtentEnable: true,
-    translateExtentCoefficient: [1.2, 1.1],
-    highlightSizingAdditional: 0.5,
-    highlightColorFadingMin: 0.15,
-    highlightTextShiftXAdditional: 0,
-    highlightTextShiftYAdditional: 2,
-    highlightTextSizingAdditional: 1,
-    highlightTextWeightAdditional: 0,
-    highlightTextWidthAdditional: 10,
-    highlightOnlyRoot: true,
-    stickAfterDrag: false,
-    highlightByHover: false,
-    highlightLinkFadingMin: 0.21,
-    highlightFadingMin: 0.21,
-    highlightTextFadingMin: 0.21,
-    highlightDownStep: 0.2,
-    highlightUpStep: 0.2,
-    dragPlaceCoefficient: dragPlaceCoefficientGetter,
-    nodeRadiusInitial: 4,
-    nodeRadiusCoefficient: 5,
-    nodeRadiusFactor: 1,
-    nodeRadiusFlexible: true,
-    zoomInitial: null,
-};
-const NODE_SETTINGS = {
-    alpha: 1,
-    textAlpha: 1,
-    borderColor: "#000000FF",
-    borderWidth: 0.1,
-    textWidth: 20,
-    textShiftX: 0,
-    textFont: "Arial",
-    textAlign: "center",
-    textColor: "#333",
-    width: 1,
-    radius: 4,
-    textStyle: "normal",
-    textWeight: 500,
-    textGap: 1,
-    highlightFading: false,
-    highlightColor: true,
-    highlightSizing: true,
-    highlightTextFading: true,
-    highlightTextSizing: true,
-};
-const LINK_SETTINGS = {
-    alpha: 1,
-    highlightFading: true,
-    pretty: true,
-};
-const COMMON_SETTINGS = {
-    linkColorZoomFar: "#999",
-    linkColorZoomNear: "#000000FF",
-    linkWidthZoomFar: 1,
-    linkWidthZoomNear: 0.1,
-    linkWidthZoomBorder: 1,
-    linkColorZoomBorder: 1,
-    nodeTextScaleMin: 1.5,
-    nodeTextScaleMax: 20,
-    nodeTextSizeMin: 1.5,
-    nodeTextSizeMax: 3.5,
-    nodeTextShiftYMin: 2.5,
-    nodeTextShiftYMax: 4,
-    nodeTextChangeStepCount: 200,
-};
-
 function forceSettingsGetter(settings, prevSettings) {
     return {
         ...(prevSettings ?? FORCE_SETTINGS),
@@ -190,17 +101,20 @@ function graphSettingsGetter(settings, prevSettings) {
     };
 }
 
-function linkSettingsGetter(settings) {
-    return { options: settings?.options };
+function linkSettingsGetter(settings, prevSettings) {
+    return { ...(prevSettings ?? LINK_SETTINGS), ...settings };
 }
 function linkOptionsGetter(_, __, ___, state) {
     return {
-        ...LINK_SETTINGS,
+        ...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,
@@ -211,17 +125,18 @@ function listenersGetter(settings) {
     return settings ?? {};
 }
 
-function nodeSettingsGetter(settings) {
+function nodeSettingsGetter(settings, prevNodeSettings) {
     return {
-        idGetter: settings?.idGetter ?? nodeIdGetter,
-        options: settings?.options,
+        ...(prevNodeSettings ?? NODE_SETTINGS),
+        idGetter: nodeIdGetter,
+        ...settings,
     };
 }
 const color = colorGetter();
 function nodeOptionsGetter(node, _, __, state) {
     const { textShiftY, textSize } = nodeTextSizeGetter(state?.areaTransform);
     return {
-        ...NODE_SETTINGS,
+        ...NODE_OPTIONS,
         nodeDraw: null,
         nodeExtraDraw: null,
         textDraw: null,
@@ -410,7 +325,7 @@ function drawText({ context, id, textAlign, textColor, textFont, textStyle, text
     });
 }
 
-function calculateLinkPositionByRadius(link) {
+function calculateLinkPositionByRadius(link, arrowSize = 0) {
     const source = link.source;
     const target = link.target;
     if (typeof source != "object" || typeof target != "object")
@@ -419,7 +334,7 @@ function calculateLinkPositionByRadius(link) {
     const dy = (target.y ?? 0) - (source.y ?? 0);
     const dr = Math.sqrt(dx * dx + dy * dy);
     const sourceRadius = source._radius ?? 0;
-    const targetRadius = target._radius ?? 0;
+    const targetRadius = (target._radius ?? 0) + (arrowSize > 0 ? arrowSize * 0.85 : 0);
     return {
         x1: (source.x ?? 0) + (dx * sourceRadius) / dr,
         y1: (source.y ?? 0) + (dy * sourceRadius) / dr,
@@ -428,10 +343,723 @@ function calculateLinkPositionByRadius(link) {
     };
 }
 
+function animationByProgress(initial, additional, progress) {
+    const max = initial + additional;
+    let current = initial + (max - initial) * progress;
+    if (current > max)
+        current = max;
+    if (current < initial)
+        current = initial;
+    return current;
+}
+
+const ADDITIONAL_VIEWPORT = 10;
+function isNodeVisible(opts) {
+    const left = -opts.transform.x / opts.transform.k;
+    const right = (opts.width - opts.transform.x) / opts.transform.k;
+    const top = -opts.transform.y / opts.transform.k;
+    const bottom = (opts.height - opts.transform.y) / opts.transform.k;
+    return (left < opts.x + opts.radius + ADDITIONAL_VIEWPORT &&
+        opts.x - opts.radius - ADDITIONAL_VIEWPORT < right &&
+        top < opts.y + opts.radius + ADDITIONAL_VIEWPORT &&
+        opts.y - opts.radius - ADDITIONAL_VIEWPORT < bottom);
+}
+
+function getParticlePosition(opts) {
+    if (opts.particle.wait > 0) {
+        opts.particle.wait--;
+        return;
+    }
+    const remainingSteps = opts.totalSteps - opts.particle.step;
+    const progress = opts.particle.step / opts.totalSteps;
+    if (remainingSteps === 0) {
+        opts.particle.x = opts.xEnd;
+        opts.particle.y = opts.yEnd;
+        opts.particle.step = 0;
+        return;
+    }
+    const dx = opts.xEnd - opts.xStart;
+    const dy = opts.yEnd - opts.yStart;
+    const newX = opts.xStart + dx * progress;
+    const newY = opts.yStart + dy * progress;
+    opts.particle.x = newX;
+    opts.particle.y = newY;
+    opts.particle.step++;
+}
+
+const FORCE_SETTINGS = {
+    centerPosition: {},
+    centerStrength: 1,
+    collideStrength: 0.1,
+    collideAdditionalRadius: 4,
+    collideIterations: 2,
+    collideOffMax: { links: 0, nodes: 0 },
+    collideOn: true,
+    chargeStrength: -40,
+    chargeDistanceMax: Infinity,
+    chargeDistanceMin: 1,
+    xForce: 0,
+    xStrength: 0.1,
+    yForce: 0,
+    yStrength: 0.1,
+    linkDistance: 30,
+    linkIterations: 1,
+    linkStrength: 1,
+    collideRadius: null,
+};
+const GRAPH_SETTINGS = {
+    zoomExtent: [0.3, 10],
+    translateExtent: [[], []],
+    translateExtentEnable: true,
+    translateExtentCoefficient: [3, 3],
+    highlightSizingAdditional: 0.5,
+    highlightColorFadingMin: 0.15,
+    highlightTextShiftXAdditional: 0,
+    highlightTextShiftYAdditional: 2,
+    highlightTextSizingAdditional: 1,
+    highlightTextWeightAdditional: 0,
+    highlightTextWidthAdditional: 10,
+    highlightOnlyRoot: true,
+    stickAfterDrag: false,
+    highlightByHover: true,
+    highlightLinkFadingMin: 0.21,
+    highlightFadingMin: 0.21,
+    highlightTextFadingMin: 0.21,
+    highlightArrowFadingMin: 0.21,
+    highlightDownStep: 0.2,
+    highlightUpStep: 0.2,
+    dragPlaceCoefficient: dragPlaceCoefficientGetter,
+    nodeRadiusInitial: 4,
+    nodeRadiusCoefficient: 5,
+    nodeRadiusFactor: 1,
+    nodeRadiusFlexible: true,
+    zoomInitial: null,
+    showDrawTime: true,
+    showDrawTimeEveryTick: false,
+};
+const NODE_SETTINGS = {
+    cache: false,
+};
+const NODE_OPTIONS = {
+    alpha: 1,
+    textAlpha: 1,
+    borderColor: "#000000FF",
+    borderWidth: 0.1,
+    textWidth: 20,
+    textShiftX: 0,
+    textFont: "Arial",
+    textAlign: "center",
+    textColor: "#333",
+    radius: 4,
+    textStyle: "normal",
+    textWeight: 500,
+    textGap: 1,
+    highlightFading: true,
+    highlightColor: false,
+    highlightSizing: true,
+    highlightTextFading: true,
+    highlightTextSizing: true,
+};
+const LINK_SETTINGS = {
+    cache: false,
+    particles: true,
+};
+const LINK_OPTIONS = {
+    alpha: 1,
+    highlightFading: true,
+    pretty: true,
+    arrow: true,
+    arrowAlpha: 1,
+    arrowSize: 2,
+    arrowHighlightFading: true,
+    arrowReverseAppear: true,
+    particleAlpha: 1,
+    particleColor: "#000000FF",
+    particleCount: 2,
+    particleRadius: 0.5,
+    particleSteps: 60,
+};
+const COMMON_SETTINGS = {
+    linkColorZoomFar: "#999",
+    linkColorZoomNear: "#000000FF",
+    linkWidthZoomFar: 1,
+    linkWidthZoomNear: 0.1,
+    linkWidthZoomBorder: 1,
+    linkColorZoomBorder: 1,
+    nodeTextScaleMin: 1.5,
+    nodeTextScaleMax: 20,
+    nodeTextSizeMin: 1.5,
+    nodeTextSizeMax: 3.5,
+    nodeTextShiftYMin: 2.5,
+    nodeTextShiftYMax: 4,
+    nodeTextChangeStepCount: 200,
+};
+
+function getForceControls(keys) {
+    const FORCE_CONTROLS = [
+        {
+            id: "centerStrength",
+            initialValue: FORCE_SETTINGS.centerStrength,
+            label: "Граница центра",
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+        },
+        {
+            id: "collideStrength",
+            initialValue: FORCE_SETTINGS.collideStrength,
+            label: "Сила отталкивания",
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+        },
+        {
+            id: "collideAdditionalRadius",
+            initialValue: FORCE_SETTINGS.collideAdditionalRadius,
+            label: "Радиус отталкивания",
+            max: 300,
+            min: 0,
+            step: 0.1,
+            type: "range",
+        },
+        {
+            id: "collideIterations",
+            initialValue: FORCE_SETTINGS.collideIterations,
+            label: "Итерации отталкивания",
+            max: 10,
+            min: 0,
+            step: 1,
+            type: "range",
+        },
+        {
+            id: "chargeStrength",
+            initialValue: FORCE_SETTINGS.chargeStrength ,
+            label: "Гравитация",
+            max: 0,
+            min: -300,
+            step: 0.1,
+            type: "range",
+        },
+        {
+            type: "range",
+            id: "xForce",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Граница X",
+            initialValue: FORCE_SETTINGS.xForce ,
+        },
+        {
+            type: "range",
+            id: "yForce",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Граница Y",
+            initialValue: FORCE_SETTINGS.yForce ,
+        },
+        {
+            type: "range",
+            id: "xStrength",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Гравитация X",
+            initialValue: FORCE_SETTINGS.xStrength ,
+        },
+        {
+            type: "range",
+            id: "yStrength",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Гравитация Y",
+            initialValue: FORCE_SETTINGS.yStrength ,
+        },
+        {
+            type: "range",
+            id: "linkStrength",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            label: "Натяжение связей",
+            initialValue: FORCE_SETTINGS.linkStrength ,
+        },
+        {
+            type: "range",
+            id: "linkDistance",
+            min: 0,
+            max: 300,
+            step: 0.1,
+            label: "Расстояние связей",
+            initialValue: FORCE_SETTINGS.linkDistance ,
+        },
+        {
+            id: "collideOn",
+            type: "checkbox",
+            initialValue: FORCE_SETTINGS.collideOn,
+            label: "Отталкивание",
+        },
+    ];
+    return keys ? FORCE_CONTROLS.filter((control) => keys.includes(control.id)) : FORCE_CONTROLS;
+}
+function getGraphControls(keys) {
+    const GRAPH_CONTROLS = [
+        {
+            id: "highlightSizingAdditional",
+            initialValue: GRAPH_SETTINGS.highlightSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.01,
+            type: "range",
+            label: "Дополнительный размер при анимации",
+        },
+        {
+            id: "highlightColorFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightColorFadingMin,
+            max: 1,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания цвета",
+        },
+        {
+            id: "highlightTextShiftXAdditional",
+            initialValue: GRAPH_SETTINGS.highlightTextShiftXAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по X при анимации",
+        },
+        {
+            id: "highlightTextShiftYAdditional",
+            initialValue: GRAPH_SETTINGS.highlightTextShiftYAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по Y при анимации",
+        },
+        {
+            id: "highlightTextSizingAdditional",
+            initialValue: GRAPH_SETTINGS.highlightTextSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение текста при анимации",
+        },
+        {
+            id: "highlightTextWeightAdditional",
+            initialValue: GRAPH_SETTINGS.highlightTextWeightAdditional,
+            max: 1000,
+            min: 0,
+            step: 100,
+            type: "range",
+            label: "Увеличение жирности текста при анимации",
+        },
+        {
+            id: "highlightTextWidthAdditional",
+            initialValue: GRAPH_SETTINGS.highlightTextWidthAdditional,
+            max: 100,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение ширины текста при анимации",
+        },
+        {
+            id: "highlightTextFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightTextFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания текста при анимации",
+        },
+        {
+            id: "highlightLinkFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightLinkFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания связи при анимации",
+        },
+        {
+            id: "highlightFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания ноды при анимации",
+        },
+        {
+            id: "highlightArrowFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightArrowFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания стрелки при анимации",
+        },
+        {
+            id: "highlightDownStep",
+            initialValue: GRAPH_SETTINGS.highlightDownStep,
+            max: 1,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Скорость отмены анимации",
+        },
+        {
+            id: "highlightUpStep",
+            initialValue: GRAPH_SETTINGS.highlightUpStep,
+            max: 1,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Скорость применения анимации",
+        },
+        {
+            id: "nodeRadiusInitial",
+            initialValue: GRAPH_SETTINGS.nodeRadiusInitial,
+            max: 50,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Изначальный радиус ноды",
+        },
+        {
+            id: "nodeRadiusCoefficient",
+            initialValue: GRAPH_SETTINGS.nodeRadiusCoefficient,
+            max: 100,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Количество связей для увеличения радиуса",
+        },
+        {
+            id: "nodeRadiusFactor",
+            initialValue: GRAPH_SETTINGS.nodeRadiusFactor,
+            max: 50,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Коэффициент увеличения радиуса",
+        },
+        {
+            id: "highlightOnlyRoot",
+            type: "checkbox",
+            initialValue: GRAPH_SETTINGS.highlightOnlyRoot,
+            label: "Дополнительная анимация только главное цели",
+        },
+        {
+            id: "stickAfterDrag",
+            type: "checkbox",
+            initialValue: GRAPH_SETTINGS.stickAfterDrag,
+            label: "Фиксировании ноды после перетаскивания",
+        },
+        {
+            id: "highlightByHover",
+            type: "checkbox",
+            initialValue: GRAPH_SETTINGS.highlightByHover,
+            label: "Анимации при наведении",
+        },
+        {
+            id: "nodeRadiusFlexible",
+            type: "checkbox",
+            initialValue: GRAPH_SETTINGS.nodeRadiusFlexible,
+            label: "Гибкий радиус ноды",
+        },
+    ];
+    return keys ? GRAPH_CONTROLS.filter((control) => keys.includes(control.id)) : GRAPH_CONTROLS;
+}
+function getNodeControls(keys) {
+    const NODE_CONTROLS = [
+        {
+            id: "alpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность",
+            initialValue: NODE_OPTIONS.alpha,
+        },
+        {
+            id: "radius",
+            type: "range",
+            max: 50,
+            min: 1,
+            step: 1,
+            label: "Радиус",
+            initialValue: NODE_OPTIONS.radius,
+        },
+        {
+            id: "borderWidth",
+            type: "range",
+            max: 5,
+            min: 0,
+            step: 0.1,
+            label: "Толщина границы",
+            initialValue: NODE_OPTIONS.borderWidth,
+        },
+        {
+            id: "borderColor",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет границы",
+        },
+        {
+            id: "color",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет",
+        },
+        {
+            id: "textAlpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность текста",
+            initialValue: NODE_OPTIONS.textAlpha,
+        },
+        {
+            id: "textWidth",
+            type: "range",
+            max: 200,
+            min: 5,
+            step: 1,
+            label: "Ширина текста",
+            initialValue: NODE_OPTIONS.textWidth,
+        },
+        {
+            id: "textShiftX",
+            type: "range",
+            max: 100,
+            min: 0,
+            step: 0.1,
+            label: "Смещение X текста",
+            initialValue: NODE_OPTIONS.textShiftX,
+        },
+        {
+            id: "textShiftY",
+            type: "range",
+            max: 100,
+            min: 0,
+            step: 0.1,
+            label: "Смещение Y текста",
+            initialValue: 4,
+        },
+        {
+            id: "textWeight",
+            type: "range",
+            max: 1000,
+            min: 100,
+            step: 100,
+            label: "Жирность текста",
+            initialValue: NODE_OPTIONS.textWeight,
+        },
+        {
+            id: "textGap",
+            type: "range",
+            max: 30,
+            min: 0,
+            step: 0.1,
+            label: "Расстояние между строками",
+            initialValue: NODE_OPTIONS.textGap,
+        },
+        {
+            id: "highlightFading",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightFading,
+            label: "Анимация затухания",
+        },
+        {
+            id: "highlightColor",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightColor,
+            label: "Анимация затухания цвета",
+        },
+        {
+            id: "highlightSizing",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightSizing,
+            label: "Анимация размера",
+        },
+        {
+            id: "highlightTextFading",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightTextFading,
+            label: "Анимация затухания текста",
+        },
+        {
+            id: "highlightTextSizing",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightTextSizing,
+            label: "Анимация размера текста",
+        },
+    ];
+    return keys ? NODE_CONTROLS.filter((control) => keys.includes(control.id)) : NODE_CONTROLS;
+}
+function getLinkControls(keys) {
+    const LINK_CONTROLS = [
+        {
+            id: "alpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность",
+            initialValue: LINK_OPTIONS.alpha,
+        },
+        {
+            id: "width",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Толщина",
+            initialValue: 0.1,
+        },
+        {
+            id: "arrowAlpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность стрелки",
+            initialValue: LINK_OPTIONS.arrowAlpha,
+        },
+        {
+            id: "arrowSize",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Размер стрелки",
+            initialValue: LINK_OPTIONS.arrowSize,
+        },
+        {
+            id: "particleAlpha",
+            type: "range",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            label: "Прозрачность частиц",
+            initialValue: LINK_OPTIONS.particleAlpha,
+        },
+        {
+            id: "particleRadius",
+            type: "range",
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            label: "Радиус частиц",
+            initialValue: LINK_OPTIONS.particleRadius,
+        },
+        {
+            id: "particleCount",
+            type: "range",
+            max: 20,
+            min: 1,
+            step: 1,
+            label: "Количество частиц",
+            initialValue: LINK_OPTIONS.particleCount,
+        },
+        {
+            id: "particleSteps",
+            type: "range",
+            max: 200,
+            min: 1,
+            step: 1,
+            label: "Количество кадров у частиц",
+            initialValue: LINK_OPTIONS.particleSteps,
+        },
+        {
+            id: "color",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет",
+        },
+        {
+            id: "arrowColor",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет стрелки",
+        },
+        {
+            id: "particleColor",
+            type: "color",
+            initialValue: "#000000FF",
+            label: "Цвет частиц",
+        },
+        {
+            id: "highlightFading",
+            type: "checkbox",
+            label: "Анимация Затухания",
+            initialValue: LINK_OPTIONS.highlightFading,
+        },
+        {
+            id: "pretty",
+            type: "checkbox",
+            label: "Обсчет соединения",
+            initialValue: LINK_OPTIONS.pretty,
+        },
+        {
+            id: "arrow",
+            type: "checkbox",
+            label: "Стрелка",
+            initialValue: LINK_OPTIONS.arrow,
+        },
+        {
+            id: "arrowHighlightFading",
+            type: "checkbox",
+            label: "Анимация затухания стрелки",
+            initialValue: LINK_OPTIONS.arrowHighlightFading,
+        },
+        {
+            id: "arrowReverseAppear",
+            type: "checkbox",
+            label: "Появление стрелки при анимации",
+            initialValue: LINK_OPTIONS.arrowReverseAppear,
+        },
+    ];
+    return keys ? LINK_CONTROLS.filter((control) => keys.includes(control.id)) : LINK_CONTROLS;
+}
+
+let countTime = 0;
+let countOperation = 0;
+function setDrawTime(cb, showEveryTick) {
+    return () => {
+        const start = performance.now();
+        cb();
+        const end = performance.now();
+        const result = end - start;
+        countTime += result;
+        countOperation++;
+        if (showEveryTick) {
+            const average = countTime / countOperation;
+            // eslint-disable-next-line no-console
+            console.log("average draw: ", average, "current draw: ", result);
+        }
+    };
+}
+function getDrawTime() {
+    const average = countTime / countOperation;
+    // eslint-disable-next-line no-console
+    console.log("average draw: ", average);
+}
+
 class GraphCanvas {
     /** initial data */
     nodes;
     links;
+    particles = {};
     width;
     height;
     root;
@@ -451,6 +1079,8 @@ class GraphCanvas {
     draw;
     eventAbortController;
     cachedNodeText = {};
+    linkOptionsCache = {};
+    nodeOptionsCache = {};
     isDragging = false;
     highlightedNode = null;
     highlightedNeighbors = null;
@@ -523,20 +1153,35 @@ class GraphCanvas {
             this.updateData(alpha);
     }
     changeSettings(options) {
-        if (options.graphSettings)
+        if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
-        if (options.forceSettings)
+            this.draw = this.initDraw();
+            this.initZoom(this.areaTransform);
+        }
+        if (options.forceSettings) {
             this.forceSettings = forceSettingsGetter(options.forceSettings, this.forceSettings);
-        if (options.linkSettings)
-            this.linkSettings = linkSettingsGetter(options.linkSettings);
-        if (options.nodeSettings)
-            this.nodeSettings = nodeSettingsGetter(options.nodeSettings);
-        if (options.forceSettings)
+        }
+        if (options.linkSettings) {
+            this.linkSettings = linkSettingsGetter(options.linkSettings, this.linkSettings);
+            this.linkOptionsCache = {};
+        }
+        if (options.nodeSettings) {
+            this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
+            this.cachedNodeText = {};
+            this.nodeOptionsCache = {};
+        }
+        if (options.forceSettings) {
             return void this.updateSimulation();
+        }
         this.tick();
     }
+    clearCache() {
+        this.nodeOptionsCache = {};
+        this.linkOptionsCache = {};
+        this.cachedNodeText = {};
+    }
     tick() {
-        if (!this.simulationWorking)
+        if (!this.simulationWorking && !this.highlightWorking)
             this.draw();
     }
     restart(alpha) {
@@ -592,6 +1237,8 @@ class GraphCanvas {
     }
     clearDataDependencies() {
         this.cachedNodeText = {};
+        this.nodeOptionsCache = {};
+        this.linkOptionsCache = {};
     }
     updateData(alpha) {
         this.clearDataDependencies();
@@ -615,7 +1262,7 @@ class GraphCanvas {
         this.initZoom();
         this.initResize();
         this.initPointer();
-        if (!this.simulationWorking)
+        if (!this.simulationWorking && !this.highlightWorking)
             this.draw();
     }
     init() {
@@ -636,6 +1283,8 @@ class GraphCanvas {
             })
                 .on("end", () => {
                 this.listeners.onSimulationEnd?.(this.state);
+                if (this.graphSettings.showDrawTime)
+                    getDrawTime();
             });
             this.initSimulationForces();
         }
@@ -658,9 +1307,9 @@ class GraphCanvas {
             .distanceMax(this.forceSettings.chargeDistanceMax)
             .distanceMin(this.forceSettings.chargeDistanceMin))
             .force("center", d3Force.forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
-        this.initCollideForce();
+        this.initCollideForce(true);
     }
-    initCollideForce() {
+    initCollideForce(forceUpdate) {
         if (!this.simulation)
             return;
         if (!this.forceSettings.collideOn) {
@@ -671,9 +1320,10 @@ class GraphCanvas {
         const isHasMax = this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;
         const isMaxCollideNodes = isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;
         const isMaxCollideLinks = isHasMax && this.forceSettings.collideOffMax.links < this.links.length;
-        if (isMaxCollideNodes && isMaxCollideLinks)
+        if (isMaxCollideNodes && isMaxCollideLinks) {
             this.simulation.force("collide", null);
-        else if (!this.simulation.force("collide"))
+        }
+        else if (!this.simulation.force("collide") || forceUpdate) {
             this.simulation.force("collide", d3Force.forceCollide()
                 .radius((node, index) => {
                 if (this.forceSettings.collideRadius) {
@@ -691,6 +1341,7 @@ class GraphCanvas {
             })
                 .strength(this.forceSettings.collideStrength)
                 .iterations(this.forceSettings.collideIterations));
+        }
     }
     initArea() {
         if (!this.area || !this.context || !this.container) {
@@ -725,19 +1376,27 @@ class GraphCanvas {
                 this.highlightProgress -= this.graphSettings.highlightDownStep;
                 if (!this.simulationWorking)
                     return void requestAnimationFrame(() => this.draw());
-                return;
+                if (!this.linkSettings.particles)
+                    return;
             }
             if (this.highlightWorking && this.highlightProgress < 1) {
                 this.highlightProgress += this.graphSettings.highlightUpStep;
                 if (!this.simulationWorking)
                     return void requestAnimationFrame(() => this.draw());
-                return;
+                if (!this.linkSettings.particles)
+                    return;
+            }
+            if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
+                return void requestAnimationFrame(() => this.draw());
             }
             if (!this.highlightWorking && this.highlightProgress <= 0) {
-                if (this.highlightedNeighbors)
+                if (this.highlightedNeighbors || this.highlightedNode) {
                     this.highlightedNeighbors = null;
-                if (this.highlightedNode)
                     this.highlightedNode = null;
+                    this.particles = {};
+                    if (!this.simulationWorking)
+                        return void requestAnimationFrame(() => this.draw());
+                }
             }
             this.highlightDrawing = false;
         }
@@ -760,13 +1419,13 @@ class GraphCanvas {
             this.context.clearRect(0, 0, this.width, this.height);
             this.context.translate(this.areaTransform.x, this.areaTransform.y);
             this.context.scale(this.areaTransform.k, this.areaTransform.k);
+            const textRenders = [];
+            const nodeRenders = [];
+            this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
             /** links */
-            this.context.beginPath();
             this.links.forEach(getDrawLink(state).bind(this));
-            this.context.stroke();
             /** nodes */
-            const textRenders = [];
-            this.nodes.forEach(getDrawNode(textRenders, state).bind(this));
+            nodeRenders.forEach((render) => render());
             textRenders.forEach((render) => render());
             this.context.restore();
             this.listeners.onDrawFinished?.(state);
@@ -782,54 +1441,155 @@ class GraphCanvas {
                     !link.target.x ||
                     !link.target.y)
                     return;
-                const linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
+                if (!link.source._visible && !link.target._visible)
+                    return;
+                const id = `${link.target.id}${link.source.id}`;
+                let linkOptions;
+                if (this.linkSettings.cache && this.linkOptionsCache[id]) {
+                    linkOptions = this.linkOptionsCache[id];
+                }
+                else {
+                    linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
+                    if (this.linkSettings.cache) {
+                        this.linkOptionsCache[id] = linkOptions;
+                    }
+                }
                 if (linkOptions.drawLink) {
                     linkOptions.drawLink(link, linkOptions, state);
                     return;
                 }
                 let alpha = linkOptions.alpha;
+                let arrowAlpha = linkOptions.arrowReverseAppear ? 0 : linkOptions.arrowAlpha;
                 if (this.highlightedNeighbors && this.highlightedNode) {
                     /** Not highlighted */
                     if (this.highlightedNode.id != link.source.id &&
                         this.highlightedNode.id != link.target.id) {
-                        if (linkOptions.highlightFading)
-                            alpha =
-                                this.graphSettings.highlightLinkFadingMin +
-                                    (alpha - this.graphSettings.highlightLinkFadingMin) * (1 - this.highlightProgress);
+                        if (linkOptions.highlightFading) {
+                            const min = this.graphSettings.highlightLinkFadingMin < alpha
+                                ? this.graphSettings.highlightLinkFadingMin
+                                : alpha;
+                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                        }
+                        if (linkOptions.arrow &&
+                            linkOptions.arrowHighlightFading &&
+                            !linkOptions.arrowReverseAppear) {
+                            const min = this.graphSettings.highlightArrowFadingMin < arrowAlpha
+                                ? this.graphSettings.highlightArrowFadingMin
+                                : arrowAlpha;
+                            arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                        }
+                    }
+                    else {
+                        // eslint-disable-next-line no-lonely-if
+                        if (linkOptions.arrow && linkOptions.arrowReverseAppear) {
+                            /** Highlighted */
+                            arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                        }
                     }
-                    this.context.beginPath();
                 }
+                /** Link */
+                this.context.beginPath();
                 this.context.globalAlpha = alpha;
                 this.context.strokeStyle = linkOptions.color;
                 this.context.lineWidth = linkOptions.width;
+                let xStart = link.source.x;
+                let yStart = link.source.y;
+                let xEnd = link.target.x;
+                let yEnd = link.target.y;
                 if (linkOptions.pretty) {
-                    const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link) ?? {
+                    const isHasArrow = linkOptions.arrow && arrowAlpha > 0;
+                    const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link, isHasArrow ? linkOptions.arrowSize : 0) ?? {
                         x1: 0,
                         x2: 0,
                         y1: 0,
                         y2: 0,
                     };
-                    this.context.moveTo(x1, y1);
-                    this.context.lineTo(x2, y2);
+                    xStart = x1;
+                    xEnd = x2;
+                    yStart = y1;
+                    yEnd = y2;
                 }
-                else {
-                    this.context.moveTo(link.source.x, link.source.y);
-                    this.context.lineTo(link.target.x, link.target.y);
+                this.context.moveTo(xStart, yStart);
+                this.context.lineTo(xEnd, yEnd);
+                this.context.stroke();
+                /** Particle */
+                if (this.linkSettings.particles &&
+                    this.highlightedNode &&
+                    (this.highlightedNode.id === link.source.id || this.highlightedNode.id === link.target.id)) {
+                    if (!this.particles[id]) {
+                        const sourceId = link.source.id;
+                        const targetId = link.target.id;
+                        this.particles[id] = Array.from({ length: linkOptions.particleCount }, (_, index) => {
+                            return {
+                                step: 0,
+                                wait: index * (linkOptions.particleSteps / linkOptions.particleCount),
+                                sourceId,
+                                targetId,
+                            };
+                        });
+                    }
+                    this.particles[id].forEach((particle) => {
+                        if (!this.context)
+                            return;
+                        getParticlePosition({
+                            particle,
+                            totalSteps: linkOptions.particleSteps,
+                            xEnd,
+                            xStart,
+                            yEnd,
+                            yStart,
+                        });
+                        if (particle.x != undefined && particle.y != undefined) {
+                            this.context.beginPath();
+                            this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
+                            this.context.fillStyle = linkOptions.particleColor;
+                            this.context.fill();
+                            this.context.stroke();
+                        }
+                    });
                 }
-                if (this.highlightedNeighbors && this.highlightedNode)
+                /** Arrow */
+                if (linkOptions.arrow && arrowAlpha > 0) {
+                    const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByRadius(link) ?? {
+                        x1: 0,
+                        x2: 0,
+                        y1: 0,
+                        y2: 0,
+                    };
+                    const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
+                    this.context.beginPath();
+                    this.context.globalAlpha = arrowAlpha;
+                    this.context.moveTo(xEnd, yEnd);
+                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6));
+                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6));
+                    this.context.closePath();
+                    this.context.fillStyle = linkOptions.arrowColor;
+                    this.context.fill();
                     this.context.stroke();
+                }
                 if (linkOptions.drawExtraLink) {
                     linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
                 }
             };
         }
-        function getDrawNode(textRenders, state) {
+        function getDrawNode(nodeRenders, textRenders, state) {
             return function drawNode(node, index) {
                 if (!this.context || !node.x || !node.y)
                     return;
-                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                let nodeOptions;
+                if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
+                    nodeOptions = this.nodeOptionsCache[node.id];
+                }
+                else {
+                    nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                    if (this.nodeSettings.cache) {
+                        this.nodeOptionsCache[node.id] = nodeOptions;
+                    }
+                }
                 if (nodeOptions.nodeDraw) {
-                    nodeOptions.nodeDraw(node, nodeOptions, state);
+                    nodeRenders.push(() => {
+                        nodeOptions?.nodeDraw?.(node, nodeOptions, state);
+                    });
                     return;
                 }
                 let alpha = nodeOptions.alpha;
@@ -845,15 +1605,16 @@ class GraphCanvas {
                     /** Not highlighted */
                     if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
                         if (nodeOptions.highlightFading) {
-                            alpha =
-                                this.graphSettings.highlightFadingMin +
-                                    (alpha - this.graphSettings.highlightFadingMin) * (1 - this.highlightProgress);
+                            const min = this.graphSettings.highlightFadingMin < alpha
+                                ? this.graphSettings.highlightFadingMin
+                                : alpha;
+                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
                         }
                         if (nodeOptions.highlightTextFading) {
-                            textAlpha =
-                                this.graphSettings.highlightTextFadingMin +
-                                    (textAlpha - this.graphSettings.highlightTextFadingMin) *
-                                        (1 - this.highlightProgress);
+                            const min = this.graphSettings.highlightTextFadingMin < textAlpha
+                                ? this.graphSettings.highlightTextFadingMin
+                                : textAlpha;
+                            textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
                         }
                         if (nodeOptions.highlightColor) {
                             const colorRgb = extractRgb(colorToRgb(color));
@@ -868,20 +1629,14 @@ class GraphCanvas {
                         (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
                         /** Highlighted */
                         if (nodeOptions.highlightSizing) {
-                            const radiusMax = radiusInitial + this.graphSettings.highlightSizingAdditional;
-                            radiusInitial += ((radiusMax - radiusInitial) / 100) * (this.highlightProgress * 100);
+                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightSizingAdditional, this.highlightProgress);
                         }
                         if (nodeOptions.highlightTextSizing) {
-                            const textSizeMax = textSize + this.graphSettings.highlightTextSizingAdditional;
-                            const textShiftXMax = textShiftX + this.graphSettings.highlightTextShiftXAdditional;
-                            const textShiftYMax = textShiftY + this.graphSettings.highlightTextShiftYAdditional;
-                            const textWeightMax = textWeight + this.graphSettings.highlightTextWeightAdditional;
-                            const textWidthMax = textWidth + this.graphSettings.highlightTextWidthAdditional;
-                            textSize += ((textSizeMax - textSize) / 100) * (this.highlightProgress * 100);
-                            textShiftX += ((textShiftXMax - textShiftX) / 100) * (this.highlightProgress * 100);
-                            textShiftY += ((textShiftYMax - textShiftY) / 100) * (this.highlightProgress * 100);
-                            textWeight += ((textWeightMax - textWeight) / 100) * (this.highlightProgress * 100);
-                            textWidth += ((textWidthMax - textWidth) / 100) * (this.highlightProgress * 100);
+                            textSize = animationByProgress(textSize, this.graphSettings.highlightTextSizingAdditional, this.highlightProgress);
+                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightTextShiftXAdditional, this.highlightProgress);
+                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightTextShiftYAdditional, this.highlightProgress);
+                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightTextWeightAdditional, this.highlightProgress);
+                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightTextWidthAdditional, this.highlightProgress);
                         }
                     }
                 }
@@ -893,8 +1648,31 @@ class GraphCanvas {
                     linkCount: node.linkCount,
                 });
                 node._radius = radius;
-                this.context.beginPath();
-                this.context.globalAlpha = alpha;
+                if (!isNodeVisible({
+                    height: this.height,
+                    width: this.width,
+                    x: node.x,
+                    y: node.y,
+                    radius,
+                    transform: this.areaTransform,
+                })) {
+                    node._visible = false;
+                    return;
+                }
+                node._visible = true;
+                nodeRenders.push(() => {
+                    if (!this.context || !node.x || !node.y)
+                        return;
+                    this.context.beginPath();
+                    this.context.globalAlpha = alpha;
+                    /** circle */
+                    this.context.lineWidth = nodeOptions.borderWidth;
+                    this.context.strokeStyle = nodeOptions.borderColor;
+                    this.context.fillStyle = color;
+                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    this.context.fill();
+                    this.context.stroke();
+                });
                 /** text */
                 if (nodeOptions.textVisible && nodeOptions.text) {
                     textRenders.push(() => {
@@ -949,29 +1727,27 @@ class GraphCanvas {
                         }
                     });
                 }
-                /** circle */
-                this.context.lineWidth = nodeOptions.borderWidth;
-                this.context.strokeStyle = nodeOptions.borderColor;
-                this.context.fillStyle = color;
-                this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-                this.context.fill();
-                this.context.stroke();
                 if (nodeOptions.nodeExtraDraw) {
-                    nodeOptions.nodeExtraDraw(node, {
-                        ...nodeOptions,
-                        radius,
-                        alpha,
-                        color,
-                        textAlpha,
-                        textSize,
-                        textShiftX,
-                        textShiftY,
-                        textWeight,
-                        textWidth,
-                    }, state);
+                    nodeRenders.push(() => {
+                        nodeOptions?.nodeExtraDraw?.(node, {
+                            ...nodeOptions,
+                            radius,
+                            alpha,
+                            color,
+                            textAlpha,
+                            textSize,
+                            textShiftX,
+                            textShiftY,
+                            textWeight,
+                            textWidth,
+                        }, state);
+                    });
                 }
             };
         }
+        if (this.graphSettings.showDrawTime) {
+            return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
+        }
         return draw;
     }
     initResize() {
@@ -1165,7 +1941,7 @@ class GraphCanvas {
             this.listeners.onEndDragFinished?.(event, this.state);
         }));
     }
-    initZoom() {
+    initZoom(currentZoom) {
         if (!this.area)
             throw new Error("bad init data");
         const zoomInstance = d3Zoom.zoom()
@@ -1173,7 +1949,9 @@ class GraphCanvas {
             .on("zoom", (event) => {
             this.listeners.onZoom?.(event);
             this.areaTransform = event.transform;
-            if (!this.simulationWorking)
+            this.linkOptionsCache = {};
+            this.nodeOptionsCache = {};
+            if (!this.simulationWorking && !this.highlightWorking)
                 requestAnimationFrame(() => this.draw());
         });
         if (this.graphSettings.translateExtentEnable) {
@@ -1188,18 +1966,24 @@ class GraphCanvas {
             ]);
         }
         d3Selection.select(this.area).call(zoomInstance).on("dblclick.zoom", null);
-        const zoomInitial = this.graphSettings.zoomInitial;
+        const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
         this.areaTransform = new d3Zoom.ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
         d3Zoom.zoom().transform(d3Selection.select(this.area), this.areaTransform);
     }
 }
 
 exports.GraphCanvas = GraphCanvas;
+exports.animationByProgress = animationByProgress;
 exports.calculateLinkPositionByRadius = calculateLinkPositionByRadius;
 exports.colorToRgb = colorToRgb;
 exports.drawText = drawText;
 exports.extractRgb = extractRgb;
 exports.fadeRgb = fadeRgb;
+exports.getForceControls = getForceControls;
+exports.getGraphControls = getGraphControls;
+exports.getLinkControls = getLinkControls;
+exports.getNodeControls = getNodeControls;
+exports.getParticlePosition = getParticlePosition;
 exports.linkIterationExtractor = linkIterationExtractor;
 exports.linkOptionsGetter = linkOptionsGetter;
 exports.nodeIterationExtractor = nodeIterationExtractor;