@krainovsd/graph 0.1.2 → 0.2.0

package/lib/esm/index.js

@@ -1,8 +1,8 @@
 import { least } from 'd3-array';
 import { drag } from 'd3-drag';
-import { forceLink, forceCenter, forceSimulation, forceX, forceY, forceManyBody, forceCollide } from 'd3-force';
+import { forceLink, forceSimulation, forceX, forceY, forceManyBody, forceCenter, forceCollide } from 'd3-force';
 import { create, select } from 'd3-selection';
-import { zoomIdentity, zoom } from 'd3-zoom';
+import { zoomIdentity, zoom, ZoomTransform } from 'd3-zoom';
 import debounce from 'lodash/debounce';
 
 function checkType(value, condition) {
@@ -38,9 +38,9 @@ function colorGetter() {
 const FORCE_SETTINGS = {
     centerPosition: {},
     centerStrength: 1,
-    collideAdditionalRadius: 2,
-    collideStrength: 1,
-    collideIterations: 1,
+    collideStrength: 0.1,
+    collideAdditionalRadius: 4,
+    collideIterations: 2,
     collideOffMax: { links: 0, nodes: 0 },
     collideOn: true,
     chargeStrength: -40,
@@ -50,100 +50,84 @@ const FORCE_SETTINGS = {
     xStrength: 0.1,
     yForce: 0,
     yStrength: 0.1,
-    linkDistance: 10,
+    linkDistance: 30,
     linkIterations: 1,
     linkStrength: 1,
+    collideRadius: null,
 };
 const GRAPH_SETTINGS = {
-    zoomExtent: [0.1, 10],
+    zoomExtent: [0.1, 20],
     stickAfterDrag: false,
     highlightByHover: false,
-    minFading: 0.2,
+    highlightFadingMin: 0.21,
+    highlightDownStep: 0.09,
+    highlightUpStep: 0.09,
+    dragPlaceCoefficient: dragPlaceCoefficientGetter,
+    nodeRadiusInitial: 4,
+    nodeRadiusCoefficient: 5,
+    nodeRadiusFactor: 1,
+    nodeRadiusFlexible: true,
 };
 const NODE_SETTINGS = {
     alpha: 1,
-    colorOuter: "#fff",
-    font: "8px Arial",
-    fontAlign: "center",
-    fontColor: "#333",
+    borderColor: "#000000FF",
+    borderWidth: 0.1,
+    textWidth: 20,
+    textShiftX: 0,
+    textFont: "Arial",
+    textAlign: "center",
+    textColor: "#333",
     width: 1,
-    zoomTextBorder: 2,
-    initialRadius: 4,
-    radiusCoefficient: 5,
-    radiusFactor: 1,
-    flexibleRadius: true,
+    radius: 4,
+    textStyle: "normal",
+    textWeight: "500",
+    textGap: 1,
 };
 const LINK_SETTINGS = {
     alpha: 1,
-    colorFar: "#999",
-    colorNear: "#000000FF",
-    widthFar: 1,
-    widthNear: 0.1,
-    zoomWidthBorder: 1,
-    zoomColorBorder: 1,
+};
+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 linkIterationExtractor(link, i, links, transform, option, optionConstantGetter) {
-    let customOptions;
-    let constantOptions;
-    if (typeof option === "function")
-        customOptions = option(link, i, links, transform);
-    else
-        customOptions = option;
-    if (optionConstantGetter) {
-        if (typeof optionConstantGetter === "function")
-            constantOptions = optionConstantGetter(link, i, links, transform);
-        else
-            constantOptions = optionConstantGetter;
-        if (constantOptions &&
-            typeof constantOptions === "object" &&
-            !Array.isArray(constantOptions) &&
-            checkType(customOptions, customOptions === undefined ||
-                (typeof customOptions === "object" && !Array.isArray(constantOptions)))) {
-            return {
-                ...constantOptions,
-                ...(customOptions || {}),
-            };
-        }
-    }
-    return customOptions;
+function forceSettingsGetter(settings, prevSettings) {
+    return {
+        ...(prevSettings ?? FORCE_SETTINGS),
+        ...settings,
+    };
 }
 
-function linkOptionsGetter(_, __, ___, transform) {
+function graphSettingsGetter(settings, prevSettings) {
     return {
-        ...LINK_SETTINGS,
-        color: transform && transform.k > LINK_SETTINGS.zoomColorBorder
-            ? LINK_SETTINGS.colorNear
-            : LINK_SETTINGS.colorFar,
-        width: transform && transform.k > LINK_SETTINGS.zoomWidthBorder
-            ? LINK_SETTINGS.widthNear
-            : LINK_SETTINGS.widthFar,
+        ...(prevSettings ?? GRAPH_SETTINGS),
+        ...settings,
     };
 }
 
 function linkSettingsGetter(settings) {
     return { options: settings?.options };
 }
-
-function forceSettingsGetter(settings) {
+function linkOptionsGetter(_, __, ___, transform) {
     return {
-        centerPosition: settings?.centerPosition ?? FORCE_SETTINGS.centerPosition,
-        centerStrength: settings?.centerStrength ?? FORCE_SETTINGS.centerStrength,
-        collideRadius: settings?.collideRadius ?? null,
-        collideStrength: settings?.collideStrength ?? FORCE_SETTINGS.collideStrength,
-        collideIterations: settings?.collideIterations ?? FORCE_SETTINGS.collideIterations,
-        collideOffMax: settings?.collideOffMax ?? FORCE_SETTINGS.collideOffMax,
-        collideOn: settings?.collideOn ?? FORCE_SETTINGS.collideOn,
-        chargeStrength: settings?.chargeStrength ?? FORCE_SETTINGS.chargeStrength,
-        chargeDistanceMax: settings?.chargeDistanceMax ?? FORCE_SETTINGS.chargeDistanceMax,
-        chargeDistanceMin: settings?.chargeDistanceMin ?? FORCE_SETTINGS.chargeDistanceMin,
-        xForce: settings?.xForce ?? FORCE_SETTINGS.xForce,
-        xStrength: settings?.xStrength ?? FORCE_SETTINGS.xStrength,
-        yForce: settings?.yForce ?? FORCE_SETTINGS.yForce,
-        yStrength: settings?.yStrength ?? FORCE_SETTINGS.yStrength,
-        linkDistance: settings?.linkDistance ?? FORCE_SETTINGS.linkDistance,
-        linkIterations: settings?.linkIterations ?? FORCE_SETTINGS.linkIterations,
-        linkStrength: settings?.linkStrength ?? FORCE_SETTINGS.linkStrength,
+        ...LINK_SETTINGS,
+        color: transform && transform.k > COMMON_SETTINGS.linkColorZoomBorder
+            ? COMMON_SETTINGS.linkColorZoomNear
+            : COMMON_SETTINGS.linkColorZoomFar,
+        width: transform && transform.k > COMMON_SETTINGS.linkWidthZoomBorder
+            ? COMMON_SETTINGS.linkWidthZoomNear
+            : COMMON_SETTINGS.linkWidthZoomFar,
     };
 }
 
@@ -151,6 +135,59 @@ function listenersGetter(settings) {
     return settings || {};
 }
 
+function nodeSettingsGetter(settings) {
+    return {
+        idGetter: settings?.idGetter ?? nodeIdGetter,
+        options: settings?.options,
+    };
+}
+const color = colorGetter();
+function nodeOptionsGetter(node, _, __, transform) {
+    const { textShiftY, textSize } = nodeTextSizeGetter(transform);
+    return {
+        ...NODE_SETTINGS,
+        color: color(String(node.group || "_DEFAULT")),
+        textVisible: Boolean(transform && transform.k > COMMON_SETTINGS.nodeTextScaleMin),
+        text: node.id != undefined ? String(node.id) : null,
+        textShiftY,
+        textSize,
+    };
+}
+function nodeTextSizeGetter(transform) {
+    let textSize = COMMON_SETTINGS.nodeTextSizeMax;
+    let textShiftY = COMMON_SETTINGS.nodeTextShiftYMax;
+    if (transform) {
+        const scaleStepCoefficient = (COMMON_SETTINGS.nodeTextScaleMax - COMMON_SETTINGS.nodeTextScaleMin) /
+            COMMON_SETTINGS.nodeTextChangeStepCount;
+        const textStepCoefficient = (COMMON_SETTINGS.nodeTextSizeMax - COMMON_SETTINGS.nodeTextSizeMin) /
+            COMMON_SETTINGS.nodeTextChangeStepCount;
+        const shiftStepCoefficient = (COMMON_SETTINGS.nodeTextShiftYMax - COMMON_SETTINGS.nodeTextShiftYMin) /
+            COMMON_SETTINGS.nodeTextChangeStepCount;
+        if (transform.k >= COMMON_SETTINGS.nodeTextScaleMax) {
+            textSize = COMMON_SETTINGS.nodeTextSizeMin;
+            textShiftY = COMMON_SETTINGS.nodeTextShiftYMin;
+        }
+        else if (transform.k > COMMON_SETTINGS.nodeTextScaleMin) {
+            const transformSteps = (transform.k - COMMON_SETTINGS.nodeTextScaleMin) / scaleStepCoefficient;
+            textSize -= transformSteps * textStepCoefficient;
+            textShiftY -= transformSteps * shiftStepCoefficient;
+        }
+    }
+    return { textSize, textShiftY };
+}
+function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }) {
+    return ((radiusFlexible && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + radiusInitial);
+}
+function nodeIdGetter(d) {
+    return d.id;
+}
+
+function pointerGetter(mouseEvent, areaRect, areaTransform) {
+    const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
+    const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
+    return [px, py];
+}
+
 function isOverlapsNode(node, radius, pointerX, pointerY) {
     if (node.x == undefined || node.y == undefined)
         return false;
@@ -167,32 +204,16 @@ function dragPlaceCoefficientGetter(node, pointerX, pointerY, radius) {
     return undefined;
 }
 
-function graphSettingsGetter(settings) {
-    return {
-        zoomExtent: settings?.zoomExtent || GRAPH_SETTINGS.zoomExtent,
-        dragPlaceCoefficient: settings?.dragPlaceCoefficient || dragPlaceCoefficientGetter,
-        stickAfterDrag: settings?.stickAfterDrag || GRAPH_SETTINGS.stickAfterDrag,
-        highlightByHover: settings?.highlightByHover || GRAPH_SETTINGS.highlightByHover,
-        minFading: settings?.minFading || GRAPH_SETTINGS.minFading,
-    };
-}
-
-function pointerGetter(mouseEvent, areaRect, areaTransform) {
-    const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
-    const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
-    return [px, py];
-}
-
-function nodeIterationExtractor(node, i, nodes, transform, option, optionConstantGetter) {
+function linkIterationExtractor(link, i, links, transform, option, optionConstantGetter) {
     let customOptions;
     let constantOptions;
     if (typeof option === "function")
-        customOptions = option(node, i, nodes, transform);
+        customOptions = option(link, i, links, transform);
     else
         customOptions = option;
     if (optionConstantGetter) {
         if (typeof optionConstantGetter === "function")
-            constantOptions = optionConstantGetter(node, i, nodes, transform);
+            constantOptions = optionConstantGetter(link, i, links, transform);
         else
             constantOptions = optionConstantGetter;
         if (constantOptions &&
@@ -202,7 +223,6 @@ function nodeIterationExtractor(node, i, nodes, transform, option, optionConstan
                 (typeof customOptions === "object" && !Array.isArray(constantOptions)))) {
             return {
                 ...constantOptions,
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
                 ...(customOptions || {}),
             };
         }
@@ -210,47 +230,92 @@ function nodeIterationExtractor(node, i, nodes, transform, option, optionConstan
     return customOptions;
 }
 
-const color = colorGetter();
-function nodeOptionsGetter(node, _, __, transform) {
-    return {
-        ...NODE_SETTINGS,
-        colorInner: color(String(node.group || "_DEFAULT")),
-        text: transform && node.id != undefined && transform.k > NODE_SETTINGS.zoomTextBorder
-            ? String(node.id)
-            : null,
-    };
-}
-
-function nodeRadiusGetter({ flexibleRadius, initialRadius, linkCount, radiusCoefficient, radiusFactor, }) {
-    return ((flexibleRadius && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + initialRadius);
-}
-
-function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, nodeCustomOptions, }) {
+function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, graphSettings, }) {
     if (!areaRect)
         return undefined;
     const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
-    return nodes.find((node, index) => {
-        const nodeOptions = nodeIterationExtractor(node, index, nodes, areaTransform, nodeCustomOptions || {}, nodeOptionsGetter);
+    return nodes.find((node) => {
         const radius = nodeRadiusGetter({
-            flexibleRadius: nodeOptions.flexibleRadius,
-            initialRadius: nodeOptions.initialRadius,
-            radiusCoefficient: nodeOptions.radiusCoefficient,
-            radiusFactor: nodeOptions.radiusFactor,
+            radiusFlexible: graphSettings.nodeRadiusFlexible,
+            radiusInitial: graphSettings.nodeRadiusInitial,
+            radiusCoefficient: graphSettings.nodeRadiusCoefficient,
+            radiusFactor: graphSettings.nodeRadiusFactor,
             linkCount: node.linkCount,
         });
         return isOverlapsNode(node, radius, pointerX, pointerY);
     });
 }
 
-function nodeIdGetter(d) {
-    return d.id;
+function nodeIterationExtractor(node, i, nodes, transform, option, optionConstantGetter) {
+    let customOptions;
+    let constantOptions;
+    if (typeof option === "function")
+        customOptions = option(node, i, nodes, transform);
+    else
+        customOptions = option;
+    if (optionConstantGetter) {
+        if (typeof optionConstantGetter === "function")
+            constantOptions = optionConstantGetter(node, i, nodes, transform);
+        else
+            constantOptions = optionConstantGetter;
+        if (constantOptions &&
+            typeof constantOptions === "object" &&
+            !Array.isArray(constantOptions) &&
+            checkType(customOptions, customOptions === undefined ||
+                (typeof customOptions === "object" && !Array.isArray(constantOptions)))) {
+            return {
+                ...constantOptions,
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+                ...(customOptions || {}),
+            };
+        }
+    }
+    return customOptions;
 }
 
-function nodeSettingsGetter(settings) {
-    return {
-        idGetter: settings?.idGetter ?? nodeIdGetter,
-        options: settings?.options,
-    };
+const SPACE = " ";
+function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }) {
+    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
+    context.fillStyle = textColor;
+    context.textAlign = textAlign;
+    if (cachedNodeText[id] != undefined) {
+        cachedNodeText[id].forEach((line, index) => {
+            context.fillText(line, x, y + index * textSize + index * textGap);
+        });
+        return;
+    }
+    if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {
+        cachedNodeText[id] = [text];
+        context.fillText(text, x, y);
+        return;
+    }
+    const spaceWidth = context.measureText(" ").width;
+    const lines = [];
+    let lineWidth = 0;
+    let line = "";
+    for (const word of text.split(" ")) {
+        const size = context.measureText(word).width;
+        lineWidth += size;
+        if (line === "") {
+            line = word;
+            continue;
+        }
+        if (lineWidth > maxWidth) {
+            lineWidth = 0;
+            lines.push(line);
+            line = word;
+        }
+        else {
+            lineWidth += spaceWidth;
+            line += `${SPACE}${word}`;
+        }
+    }
+    if (line !== "")
+        lines.push(line);
+    cachedNodeText[id] = lines;
+    lines.forEach((line, index) => {
+        context.fillText(line, x, y + index * textSize + index * textGap);
+    });
 }
 
 class GraphCanvas {
@@ -275,12 +340,15 @@ class GraphCanvas {
     areaTransform = zoomIdentity;
     areaRect;
     draw;
+    eventAbortController;
+    cachedNodeText = {};
     simulationWorking = false;
     isDragging = false;
-    eventAbortController;
     highlightedNode = null;
     highlightedNeighbors = null;
-    fading = 0;
+    highlighFading = 1;
+    highlightFadingWorking = false;
+    highlightDrawing = false;
     constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, }) {
         root.style.position = "relative";
         root.style.overflow = "hidden";
@@ -309,20 +377,33 @@ class GraphCanvas {
             this.links = options.links;
         if (options.nodes != undefined)
             this.nodes = options.nodes;
-        this.updateData();
+        if (options.nodes != undefined || options.links != undefined)
+            this.updateData();
     }
     changeSettings(options) {
+        if (options.graphSettings)
+            this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
         if (options.forceSettings)
-            this.forceSettings = forceSettingsGetter(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.graphSettings)
-            this.graphSettings = graphSettingsGetter(options.graphSettings);
         this.updateSettings();
     }
     start() {
+        if (this.simulation)
+            this.simulation.alpha(1).restart();
+        if (this.container)
+            this.container.style.display = "block";
+    }
+    stop() {
+        if (this.simulation)
+            this.simulation.stop();
+        if (this.container)
+            this.container.style.display = "none";
+    }
+    create() {
         this.init();
     }
     destroy() {
@@ -336,26 +417,40 @@ class GraphCanvas {
         this.container = undefined;
         this.eventAbortController.abort();
         this.eventAbortController = new AbortController();
+        this.clearState();
+        this.clearDataDependencies();
     }
     updateSettings() {
         if (this.simulation) {
-            this.simulation.stop().alpha(1);
             this.initSimulationForces();
+            this.simulation.alpha(1);
             this.simulation.restart();
         }
     }
+    clearState() {
+        this.isDragging = false;
+        this.simulationWorking = false;
+        this.highlightedNode = null;
+        this.highlightedNeighbors = null;
+        this.highlighFading = 1;
+        this.highlightFadingWorking = false;
+        this.highlightDrawing = false;
+    }
+    clearDataDependencies() {
+        this.cachedNodeText = {};
+    }
     updateData() {
+        this.clearDataDependencies();
         if (this.simulation) {
             this.initCollideForce();
             this.simulation
-                .stop()
-                .alpha(1)
                 .nodes(this.nodes)
                 .force("link", forceLink(this.links)
                 .id(this.nodeSettings.idGetter)
                 .distance(this.forceSettings.linkDistance)
                 .strength(this.forceSettings.linkStrength)
                 .iterations(this.forceSettings.linkIterations))
+                .alpha(0.5)
                 .restart();
         }
     }
@@ -368,11 +463,7 @@ class GraphCanvas {
         this.area.width = this.dpi * width;
         this.area.height = this.dpi * height;
         this.areaRect = this.area.getBoundingClientRect();
-        this.simulation
-            .stop()
-            .alpha(1)
-            .force("center", forceCenter(this.forceSettings.centerPosition.x || this.width / 2, this.forceSettings.centerPosition.y || this.height / 2).strength(this.forceSettings.centerStrength))
-            .restart();
+        this.simulation.alpha(0.1).restart();
         if (!this.simulationWorking)
             this.draw();
     }
@@ -415,7 +506,7 @@ class GraphCanvas {
             .strength(this.forceSettings.chargeStrength)
             .distanceMax(this.forceSettings.chargeDistanceMax)
             .distanceMin(this.forceSettings.chargeDistanceMin))
-            .force("center", forceCenter(this.forceSettings.centerPosition.x || this.width / 2, this.forceSettings.centerPosition.y || this.height / 2).strength(this.forceSettings.centerStrength));
+            .force("center", forceCenter(this.forceSettings.centerPosition.x || 0, this.forceSettings.centerPosition.y || 0).strength(this.forceSettings.centerStrength));
         this.initCollideForce();
     }
     initCollideForce() {
@@ -439,13 +530,13 @@ class GraphCanvas {
                 }
                 const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.areaTransform, this.nodeSettings.options || {}, nodeOptionsGetter);
                 const radius = nodeRadiusGetter({
-                    flexibleRadius: nodeOptions.flexibleRadius,
-                    initialRadius: nodeOptions.initialRadius,
-                    radiusCoefficient: nodeOptions.radiusCoefficient,
-                    radiusFactor: nodeOptions.radiusFactor,
+                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
+                    radiusInitial: this.graphSettings.nodeRadiusInitial,
+                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
+                    radiusFactor: this.graphSettings.nodeRadiusFactor,
                     linkCount: node.linkCount,
-                });
-                return radius + FORCE_SETTINGS.collideAdditionalRadius;
+                }) ?? nodeOptions.radius;
+                return radius + this.forceSettings.collideAdditionalRadius;
             })
                 .strength(this.forceSettings.collideStrength)
                 .iterations(this.forceSettings.collideIterations));
@@ -477,16 +568,43 @@ class GraphCanvas {
         }
     }
     initDraw() {
+        function calculateHighlightFading() {
+            this.highlightDrawing = true;
+            if (!this.highlightFadingWorking) {
+                switch (true) {
+                    case this.highlighFading < 1: {
+                        this.highlighFading += this.graphSettings.highlightUpStep;
+                        break;
+                    }
+                    default: {
+                        if (this.highlightedNeighbors)
+                            this.highlightedNeighbors = null;
+                        if (this.highlightedNode)
+                            this.highlightedNode = null;
+                        break;
+                    }
+                }
+                if (this.highlighFading < 1 && !this.simulationWorking)
+                    return void requestAnimationFrame(() => this.draw());
+            }
+            if (this.highlightFadingWorking) {
+                switch (true) {
+                    case this.highlighFading > this.graphSettings.highlightFadingMin: {
+                        this.highlighFading -= this.graphSettings.highlightDownStep;
+                        break;
+                    }
+                }
+                if (this.highlighFading > this.graphSettings.highlightFadingMin && !this.simulationWorking)
+                    return void requestAnimationFrame(() => this.draw());
+            }
+            this.highlightDrawing = false;
+        }
         function draw() {
             if (!this.context)
                 return;
             if (this.listeners.onDraw) {
                 return void this.listeners.onDraw(this.context, this.areaTransform);
             }
-            if (this.highlightedNeighbors && this.highlightedNode) {
-                if (this.fading === 0)
-                    this.fading = 1;
-            }
             this.context.save();
             this.context.clearRect(0, 0, this.width, this.height);
             this.context.translate(this.areaTransform.x, this.areaTransform.y);
@@ -499,12 +617,7 @@ class GraphCanvas {
             this.nodes.forEach(drawNode.bind(this));
             this.context.restore();
             this.listeners.onDrawFinished?.(this.context, this.areaTransform);
-            if (this.fading > this.graphSettings.minFading) {
-                this.fading -= 0.1;
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-            }
+            calculateHighlightFading.bind(this)();
         }
         function drawLink(link, index) {
             if (!this.context ||
@@ -520,7 +633,7 @@ class GraphCanvas {
             if (this.highlightedNeighbors && this.highlightedNode) {
                 if (this.highlightedNode.id != link.source.id &&
                     this.highlightedNode.id != link.target.id) {
-                    alpha = this.fading;
+                    alpha = this.highlighFading;
                 }
                 this.context.beginPath();
             }
@@ -537,33 +650,44 @@ class GraphCanvas {
                 return;
             const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.areaTransform, this.nodeSettings.options || {}, nodeOptionsGetter);
             const radius = nodeRadiusGetter({
-                flexibleRadius: nodeOptions.flexibleRadius,
-                initialRadius: nodeOptions.initialRadius,
-                radiusCoefficient: nodeOptions.radiusCoefficient,
-                radiusFactor: nodeOptions.radiusFactor,
+                radiusFlexible: this.graphSettings.nodeRadiusFlexible,
+                radiusInitial: this.graphSettings.nodeRadiusInitial,
+                radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
+                radiusFactor: this.graphSettings.nodeRadiusFactor,
                 linkCount: node.linkCount,
-            });
+            }) ?? nodeOptions.radius;
             let alpha = nodeOptions.alpha;
             if (this.highlightedNeighbors && this.highlightedNode) {
                 if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                    alpha = this.fading;
+                    alpha = this.highlighFading;
                 }
             }
             this.context.beginPath();
             this.context.globalAlpha = alpha;
             /** text */
-            if (nodeOptions.text) {
-                this.context.font = nodeOptions.font;
-                this.context.fillStyle = nodeOptions.fontColor;
-                this.context.textAlign = nodeOptions.fontAlign;
-                this.context.fillText(nodeOptions.text, node.x, node.y + radius + 10);
+            if (nodeOptions.textVisible && nodeOptions.text) {
+                drawText({
+                    id: node.id,
+                    cachedNodeText: this.cachedNodeText,
+                    context: this.context,
+                    text: nodeOptions.text,
+                    textAlign: nodeOptions.textAlign,
+                    textColor: nodeOptions.textColor,
+                    textFont: nodeOptions.textFont,
+                    textSize: nodeOptions.textSize,
+                    x: node.x + nodeOptions.textShiftX,
+                    y: node.y + radius + nodeOptions.textShiftY,
+                    maxWidth: nodeOptions.textWidth,
+                    textStyle: nodeOptions.textStyle,
+                    textWeight: nodeOptions.textWeight,
+                    textGap: nodeOptions.textGap,
+                });
             }
             /** circle */
-            this.context.strokeStyle = nodeOptions.colorOuter;
-            this.context.lineWidth = nodeOptions.width;
-            this.context.moveTo(node.x + radius, node.y);
+            this.context.lineWidth = nodeOptions.borderWidth;
+            this.context.strokeStyle = nodeOptions.borderColor;
+            this.context.fillStyle = nodeOptions.color;
             this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-            this.context.fillStyle = nodeOptions.colorInner;
             this.context.fill();
             this.context.stroke();
         }
@@ -586,9 +710,9 @@ class GraphCanvas {
             throw new Error("bad init data");
         this.area.addEventListener("pointermove", (event) => {
             let currentNode;
-            if (this.graphSettings.highlightByHover) {
+            if (this.graphSettings.highlightByHover && !this.isDragging) {
                 currentNode = nodeByPointerGetter({
-                    nodeCustomOptions: this.nodeSettings.options,
+                    graphSettings: this.graphSettings,
                     areaRect: this.areaRect,
                     areaTransform: this.areaTransform,
                     mouseEvent: event,
@@ -597,23 +721,25 @@ class GraphCanvas {
                 if (currentNode && currentNode.neighbors && this.highlightedNode !== currentNode) {
                     this.highlightedNode = currentNode;
                     this.highlightedNeighbors = new Set(this.highlightedNode.neighbors);
-                    requestAnimationFrame(() => {
-                        this.draw();
-                    });
+                    this.highlightFadingWorking = true;
+                    if (!this.simulationWorking && !this.highlightDrawing)
+                        requestAnimationFrame(() => {
+                            this.draw();
+                        });
                 }
                 else if (!currentNode && this.highlightedNode) {
-                    this.highlightedNode = null;
-                    this.highlightedNeighbors = null;
-                    requestAnimationFrame(() => {
-                        this.draw();
-                    });
+                    this.highlightFadingWorking = false;
+                    if (!this.simulationWorking && !this.highlightDrawing)
+                        requestAnimationFrame(() => {
+                            this.draw();
+                        });
                 }
             }
             if (!this.listeners.onMove)
                 return;
             if (!currentNode)
                 currentNode = nodeByPointerGetter({
-                    nodeCustomOptions: this.nodeSettings.options,
+                    graphSettings: this.graphSettings,
                     areaRect: this.areaRect,
                     areaTransform: this.areaTransform,
                     mouseEvent: event,
@@ -627,7 +753,7 @@ class GraphCanvas {
             if (!this.listeners.onDoubleClick)
                 return;
             const currentNode = nodeByPointerGetter({
-                nodeCustomOptions: this.nodeSettings.options,
+                graphSettings: this.graphSettings,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
@@ -642,7 +768,7 @@ class GraphCanvas {
                 if (!this.listeners.onClick)
                     return;
                 const currentNode = nodeByPointerGetter({
-                    nodeCustomOptions: this.nodeSettings.options,
+                    graphSettings: this.graphSettings,
                     areaRect: this.areaRect,
                     areaTransform: this.areaTransform,
                     mouseEvent: event,
@@ -654,7 +780,7 @@ class GraphCanvas {
                 if (!this.listeners.onWheelClick)
                     return;
                 const currentNode = nodeByPointerGetter({
-                    nodeCustomOptions: this.nodeSettings.options,
+                    graphSettings: this.graphSettings,
                     areaRect: this.areaRect,
                     areaTransform: this.areaTransform,
                     mouseEvent: event,
@@ -669,7 +795,7 @@ class GraphCanvas {
             if (!this.listeners.onContextMenu)
                 return;
             const currentNode = nodeByPointerGetter({
-                nodeCustomOptions: this.nodeSettings.options,
+                graphSettings: this.graphSettings,
                 areaRect: this.areaRect,
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
@@ -698,12 +824,12 @@ class GraphCanvas {
                     return undefined;
                 const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.areaTransform, this.nodeSettings.options || {}, nodeOptionsGetter);
                 const radius = nodeRadiusGetter({
-                    flexibleRadius: nodeOptions.flexibleRadius,
-                    initialRadius: nodeOptions.initialRadius,
-                    radiusCoefficient: nodeOptions.radiusCoefficient,
-                    radiusFactor: nodeOptions.radiusFactor,
+                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
+                    radiusInitial: this.graphSettings.nodeRadiusInitial,
+                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
+                    radiusFactor: this.graphSettings.nodeRadiusFactor,
                     linkCount: node.linkCount,
-                });
+                }) ?? nodeOptions.radius;
                 index++;
                 return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY, radius);
             });
@@ -757,6 +883,8 @@ class GraphCanvas {
                 requestAnimationFrame(() => this.draw());
         }))
             .on("dblclick.zoom", null);
+        this.areaTransform = new ZoomTransform(1, this.width / 2, this.height / 2);
+        zoom().transform(select(this.area), this.areaTransform);
     }
 }