@krainovsd/graph 0.8.4 → 0.10.0-rc1

package/lib/esm/module/GraphCanvas/GraphCanvas.js

@@ -1,28 +1,19 @@
-import { isBoolean, isArray } from '@krainovsd/js-helpers';
-import { greatest } from 'd3-array';
-import { drag } from 'd3-drag';
-import { forceLink, forceSimulation, forceX, forceY, forceManyBody, forceCenter, forceCollide } from 'd3-force';
-import { create, select } from 'd3-selection';
-import { zoomIdentity, zoom, ZoomTransform } from 'd3-zoom';
-import { colorToRgb } from '../../lib/color-to-rgb.js';
-import { extractRgb } from '../../lib/extract-rgb.js';
-import { fadeRgb } from '../../lib/fade-rgb.js';
-import { rgbAnimationByProgress } from '../../lib/rgb-animation-by-progress.js';
+import { forceLink } from 'd3-force';
+import { zoomIdentity } from 'd3-zoom';
 import { forceSettingsGetter } from './lib/settings/force-settings-getter.js';
 import { graphSettingsGetter } from './lib/settings/graph-settings-getter.js';
-import { linkSettingsGetter, linkOptionsGetter } from './lib/settings/link-settings-getter.js';
+import { linkSettingsGetter } from './lib/settings/link-settings-getter.js';
 import { listenersGetter } from './lib/settings/listeners-getter.js';
-import { nodeSettingsGetter, nodeRadiusGetter, nodeOptionsGetter } from './lib/settings/node-settings-getter.js';
-import { pointerGetter } from './lib/utils/pointer-getter.js';
-import { linkIterationExtractor } from './lib/utils/link-iteration-extractor.js';
-import { nodeByPointerGetter } from './lib/utils/node-by-pointer-getter.js';
-import { nodeIterationExtractor } from './lib/utils/node-iteration-extractor.js';
-import { drawText } from './lib/utils/draw-text.js';
-import { calculateLinkPositionByRadius } from './lib/utils/calculate-link-position-by-radius.js';
-import { animationByProgress } from './lib/utils/animation-by-progress.js';
-import { isNodeVisible } from './lib/utils/is-node-visible.js';
-import { getParticlePosition } from './lib/utils/get-particle-position.js';
-import { getDrawTime, setDrawTime } from '../../lib/draw-time.js';
+import { nodeSettingsGetter } from './lib/settings/node-settings-getter.js';
+import '@krainovsd/js-helpers';
+import 'd3-array';
+import { initArea } from './slices/init-area.js';
+import { initDnd } from './slices/init-dnd.js';
+import { initDraw } from './slices/init-draw.js';
+import { initPointer } from './slices/init-pointer.js';
+import { initResize } from './slices/init-resize.js';
+import { initCollideForce, initSimulationForces, initSimulation } from './slices/init-simulation.js';
+import { initZoom } from './slices/init-zoom.js';
 
 class GraphCanvas {
     /** initial data */
@@ -52,6 +43,7 @@ class GraphCanvas {
     nodeOptionsCache = {};
     isDragging = false;
     highlightedNode = null;
+    highlightedLink = null;
     highlightedNeighbors = null;
     highlightProgress = 1;
     highlightWorking = false;
@@ -73,6 +65,7 @@ class GraphCanvas {
             highlightDrawing: this.highlightDrawing,
             highlightedNeighbors: this.highlightedNeighbors,
             highlightedNode: this.highlightedNode,
+            highlightedLink: this.highlightedLink,
             highlightWorking: this.highlightWorking,
             isDragging: this.isDragging,
             simulation: this.simulation,
@@ -101,7 +94,7 @@ class GraphCanvas {
         this.links = links;
         this.height = 0;
         this.width = 0;
-        this.draw = this.initDraw();
+        this.draw = initDraw.call(this);
         this.init();
     }
     get dpi() {
@@ -124,8 +117,8 @@ class GraphCanvas {
     changeSettings(options) {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
-            this.draw = this.initDraw();
-            this.initZoom(this.areaTransform);
+            this.draw = initDraw.call(this);
+            initZoom.call(this, this.areaTransform);
         }
         if (options.forceSettings) {
             this.forceSettings = forceSettingsGetter(options.forceSettings, this.forceSettings);
@@ -138,6 +131,7 @@ class GraphCanvas {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
             this.cachedNodeText = {};
             this.nodeOptionsCache = {};
+            initCollideForce.call(this, true);
         }
         if (options.forceSettings) {
             return void this.updateSimulation();
@@ -195,7 +189,7 @@ class GraphCanvas {
     }
     updateSimulation() {
         if (this.simulation) {
-            this.initSimulationForces();
+            initSimulationForces.call(this);
             this.simulation.alpha(1);
             this.simulation.restart();
         }
@@ -203,6 +197,7 @@ class GraphCanvas {
     clearState() {
         this.isDragging = false;
         this.highlightedNode = null;
+        this.highlightedLink = null;
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
         this.highlightWorking = false;
@@ -216,740 +211,41 @@ class GraphCanvas {
     updateData(alpha) {
         this.clearDataDependencies();
         if (this.simulation) {
-            this.initCollideForce();
+            initCollideForce.call(this, false);
             this.simulation
                 .nodes(this.nodes)
                 .force("link", forceLink(this.links)
                 .id(this.nodeSettings.idGetter)
-                .distance(this.forceSettings.linkDistance)
-                .strength(this.forceSettings.linkStrength)
-                .iterations(this.forceSettings.linkIterations))
+                .distance(this.forceSettings.forces && this.forceSettings.linkForce
+                ? this.forceSettings.linkDistance
+                : 0)
+                .strength(this.forceSettings.forces && this.forceSettings.linkForce
+                ? this.forceSettings.linkStrength
+                : 0)
+                .iterations(this.forceSettings.forces && this.forceSettings.linkForce
+                ? this.forceSettings.linkIterations
+                : 0))
                 .alpha(alpha ?? 0.5)
                 .restart();
         }
     }
     updateSize() {
         this.clearHTMLElements();
-        this.initArea();
-        this.initDnd();
-        this.initZoom();
-        this.initResize();
-        this.initPointer();
+        initArea.call(this);
+        initDnd.call(this);
+        initZoom.call(this);
+        initResize.call(this);
+        initPointer.call(this);
         if (!this.simulationWorking && !this.highlightWorking)
             this.draw();
     }
     init() {
-        this.initArea();
-        this.initSimulation();
-        this.initDnd();
-        this.initZoom();
-        this.initResize();
-        this.initPointer();
-    }
-    initSimulation() {
-        if (!this.simulation) {
-            this.simulation = forceSimulation()
-                .nodes(this.nodes)
-                .force("link", forceLink(this.links).id(this.nodeSettings.idGetter))
-                .on("tick", () => {
-                this.draw();
-            })
-                .on("end", () => {
-                this.listeners.onSimulationEnd?.(this.state);
-                if (this.graphSettings.showDrawTime)
-                    getDrawTime();
-            });
-            this.initSimulationForces();
-        }
-    }
-    initSimulationForces() {
-        if (!this.simulation)
-            return;
-        const linkForce = this.simulation.force("link");
-        if (!linkForce)
-            return;
-        linkForce
-            .distance(this.forceSettings.linkDistance)
-            .strength(this.forceSettings.linkStrength)
-            .iterations(this.forceSettings.linkIterations);
-        this.simulation
-            .force("x", forceX(this.forceSettings.xForce).strength(this.forceSettings.xStrength))
-            .force("y", forceY(this.forceSettings.yForce).strength(this.forceSettings.yStrength))
-            .force("charge", forceManyBody()
-            .strength(this.forceSettings.chargeStrength)
-            .distanceMax(this.forceSettings.chargeDistanceMax)
-            .distanceMin(this.forceSettings.chargeDistanceMin))
-            .force("center", forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
-        this.initCollideForce(true);
-    }
-    initCollideForce(forceUpdate) {
-        if (!this.simulation)
-            return;
-        if (!this.forceSettings.collideOn) {
-            if (this.simulation.force("collide"))
-                this.simulation.force("collide", null);
-            return;
-        }
-        const isHasMax = this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;
-        const isMaxCollideNodes = isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;
-        const isMaxCollideLinks = isHasMax && this.forceSettings.collideOffMax.links < this.links.length;
-        if (isMaxCollideNodes && isMaxCollideLinks) {
-            this.simulation.force("collide", null);
-        }
-        else if (!this.simulation.force("collide") || forceUpdate) {
-            this.simulation.force("collide", forceCollide()
-                .radius((node, index) => {
-                if (this.forceSettings.collideRadius) {
-                    return nodeIterationExtractor(node, index, this.nodes, this.state, this.forceSettings.collideRadius, undefined);
-                }
-                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-                const radius = nodeRadiusGetter({
-                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                    radiusInitial: nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial,
-                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                    radiusFactor: this.graphSettings.nodeRadiusFactor,
-                    linkCount: node.linkCount,
-                });
-                return radius + this.forceSettings.collideAdditionalRadius;
-            })
-                .strength(this.forceSettings.collideStrength)
-                .iterations(this.forceSettings.collideIterations));
-        }
-    }
-    initArea() {
-        if (!this.area || !this.context || !this.container) {
-            this.container = create("div")
-                .attr("style", "padding: 0 !important; width: 100%; height: 100%;")
-                .node();
-            if (!this.container)
-                throw new Error("couldn't create container");
-            this.root.appendChild(this.container);
-            const { width, height } = this.root.getBoundingClientRect();
-            this.width = width;
-            this.height = height;
-            this.area = create("canvas")
-                .attr("width", this.dpi * this.width)
-                .attr("height", this.dpi * this.height)
-                .attr("style", `width: 100%; height: 100%; border: none !important;`)
-                .node();
-            if (!this.area)
-                throw new Error("couldn't create canvas");
-            this.container.appendChild(this.area);
-            this.areaRect = this.area.getBoundingClientRect();
-            this.context = this.area.getContext("2d");
-            if (!this.context)
-                throw new Error("couldn't create canvas context");
-            this.context.scale(this.dpi, this.dpi);
-        }
-    }
-    initDraw() {
-        function calculateHighlightFading() {
-            this.highlightDrawing = true;
-            if (!this.highlightWorking && this.highlightProgress > 0) {
-                this.highlightProgress -= this.graphSettings.highlightDownStep;
-                if (!this.simulationWorking)
-                    return void requestAnimationFrame(() => this.draw());
-                if (!this.linkSettings.particles)
-                    return;
-            }
-            if (this.highlightWorking && this.highlightProgress < 1) {
-                this.highlightProgress += this.graphSettings.highlightUpStep;
-                if (!this.simulationWorking)
-                    return void requestAnimationFrame(() => this.draw());
-                if (!this.linkSettings.particles)
-                    return;
-            }
-            if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
-                return void requestAnimationFrame(() => this.draw());
-            }
-            if (!this.highlightWorking && this.highlightProgress <= 0) {
-                if (this.highlightedNeighbors || this.highlightedNode) {
-                    this.highlightedNeighbors = null;
-                    this.highlightedNode = null;
-                    this.particles = {};
-                    if (!this.simulationWorking)
-                        return void requestAnimationFrame(() => this.draw());
-                }
-            }
-            this.highlightDrawing = false;
-        }
-        function draw() {
-            if (!this.context)
-                return;
-            const state = this.state;
-            if (this.listeners.onDraw) {
-                this.listeners.onDraw(state, (status) => {
-                    this.highlightDrawing = status;
-                }, () => {
-                    if (this.highlightedNeighbors)
-                        this.highlightedNeighbors = null;
-                    if (this.highlightedNode)
-                        this.highlightedNode = null;
-                });
-                return;
-            }
-            this.context.save();
-            this.context.clearRect(0, 0, this.width, this.height);
-            this.context.translate(this.areaTransform.x, this.areaTransform.y);
-            this.context.scale(this.areaTransform.k, this.areaTransform.k);
-            const textRenders = [];
-            const nodeRenders = [];
-            this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
-            /** links */
-            this.links.forEach(getDrawLink(state).bind(this));
-            /** nodes */
-            nodeRenders.forEach((render) => render());
-            textRenders.forEach((render) => render());
-            this.context.restore();
-            this.listeners.onDrawFinished?.(state);
-            calculateHighlightFading.bind(this)();
-        }
-        function getDrawLink(state) {
-            return function drawLink(link, index) {
-                if (!this.context ||
-                    typeof link.source !== "object" ||
-                    typeof link.target !== "object" ||
-                    !link.source.x ||
-                    !link.source.y ||
-                    !link.target.x ||
-                    !link.target.y)
-                    return;
-                if (!link.source._visible && !link.target._visible)
-                    return;
-                const id = `${link.target.id}${link.source.id}`;
-                let linkOptions;
-                if (this.linkSettings.cache && this.linkOptionsCache[id]) {
-                    linkOptions = this.linkOptionsCache[id];
-                }
-                else {
-                    linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
-                    if (this.linkSettings.cache) {
-                        this.linkOptionsCache[id] = linkOptions;
-                    }
-                }
-                if (linkOptions.drawLink) {
-                    linkOptions.drawLink(link, linkOptions, state);
-                    return;
-                }
-                let alpha = linkOptions.alpha;
-                let arrowAlpha = linkOptions.arrowReverseAppear ? 0 : linkOptions.arrowAlpha;
-                if (this.highlightedNeighbors && this.highlightedNode) {
-                    /** Not highlighted */
-                    if (this.highlightedNode.id != link.source.id &&
-                        this.highlightedNode.id != link.target.id) {
-                        if (linkOptions.highlightFading) {
-                            const min = this.graphSettings.highlightLinkFadingMin < alpha
-                                ? this.graphSettings.highlightLinkFadingMin
-                                : alpha;
-                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
-                        }
-                        if (linkOptions.arrow &&
-                            linkOptions.arrowHighlightFading &&
-                            !linkOptions.arrowReverseAppear) {
-                            const min = this.graphSettings.highlightArrowFadingMin < arrowAlpha
-                                ? this.graphSettings.highlightArrowFadingMin
-                                : arrowAlpha;
-                            arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
-                        }
-                    }
-                    else {
-                        // eslint-disable-next-line no-lonely-if
-                        if (linkOptions.arrow && linkOptions.arrowReverseAppear) {
-                            /** Highlighted */
-                            arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
-                        }
-                    }
-                }
-                /** Link */
-                this.context.beginPath();
-                this.context.globalAlpha = alpha;
-                this.context.strokeStyle = linkOptions.color;
-                this.context.lineWidth = linkOptions.width;
-                let xStart = link.source.x;
-                let yStart = link.source.y;
-                let xEnd = link.target.x;
-                let yEnd = link.target.y;
-                if (linkOptions.pretty) {
-                    const isHasArrow = linkOptions.arrow && arrowAlpha > 0;
-                    const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link, isHasArrow ? linkOptions.arrowSize : 0) ?? {
-                        x1: 0,
-                        x2: 0,
-                        y1: 0,
-                        y2: 0,
-                    };
-                    xStart = x1;
-                    xEnd = x2;
-                    yStart = y1;
-                    yEnd = y2;
-                }
-                this.context.moveTo(xStart, yStart);
-                this.context.lineTo(xEnd, yEnd);
-                this.context.stroke();
-                /** Particle */
-                if (this.linkSettings.particles &&
-                    this.highlightedNode &&
-                    (this.highlightedNode.id === link.source.id || this.highlightedNode.id === link.target.id)) {
-                    if (!this.particles[id]) {
-                        const sourceId = link.source.id;
-                        const targetId = link.target.id;
-                        this.particles[id] = Array.from({ length: linkOptions.particleCount }, (_, index) => {
-                            return {
-                                step: 0,
-                                wait: index * (linkOptions.particleSteps / linkOptions.particleCount),
-                                sourceId,
-                                targetId,
-                            };
-                        });
-                    }
-                    this.particles[id].forEach((particle) => {
-                        if (!this.context)
-                            return;
-                        getParticlePosition({
-                            particle,
-                            totalSteps: linkOptions.particleSteps,
-                            xEnd,
-                            xStart,
-                            yEnd,
-                            yStart,
-                        });
-                        if (particle.x != undefined && particle.y != undefined) {
-                            this.context.beginPath();
-                            this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
-                            this.context.fillStyle = linkOptions.particleColor;
-                            this.context.fill();
-                            this.context.stroke();
-                        }
-                    });
-                }
-                /** Arrow */
-                if (linkOptions.arrow && arrowAlpha > 0) {
-                    const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByRadius(link) ?? {
-                        x1: 0,
-                        x2: 0,
-                        y1: 0,
-                        y2: 0,
-                    };
-                    const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
-                    this.context.beginPath();
-                    this.context.globalAlpha = arrowAlpha;
-                    this.context.moveTo(xEnd, yEnd);
-                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6));
-                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6));
-                    this.context.closePath();
-                    this.context.fillStyle = linkOptions.arrowColor;
-                    this.context.fill();
-                    this.context.stroke();
-                }
-                if (linkOptions.drawExtraLink) {
-                    linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
-                }
-            };
-        }
-        function getDrawNode(nodeRenders, textRenders, state) {
-            return function drawNode(node, index) {
-                if (!this.context || !node.x || !node.y)
-                    return;
-                let nodeOptions;
-                if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
-                    nodeOptions = this.nodeOptionsCache[node.id];
-                }
-                else {
-                    nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-                    if (this.nodeSettings.cache) {
-                        this.nodeOptionsCache[node.id] = nodeOptions;
-                    }
-                }
-                if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
-                    nodeRenders.push(() => {
-                        nodeOptions?.nodeDraw?.(node, nodeOptions, state);
-                    });
-                    textRenders.push(() => {
-                        nodeOptions?.textDraw?.(node, nodeOptions, state);
-                    });
-                    return;
-                }
-                let alpha = nodeOptions.alpha;
-                let color = nodeOptions.color;
-                let radiusInitial = nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial;
-                let textAlpha = nodeOptions.textAlpha;
-                let textSize = nodeOptions.textSize;
-                let textShiftX = nodeOptions.textShiftX;
-                let textShiftY = nodeOptions.textShiftY;
-                let textWeight = nodeOptions.textWeight;
-                let textWidth = nodeOptions.textWidth;
-                if (this.highlightedNeighbors && this.highlightedNode) {
-                    /** Not highlighted */
-                    if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                        if (nodeOptions.highlightFading) {
-                            const min = this.graphSettings.highlightFadingMin < alpha
-                                ? this.graphSettings.highlightFadingMin
-                                : alpha;
-                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
-                        }
-                        if (nodeOptions.highlightTextFading) {
-                            const min = this.graphSettings.highlightTextFadingMin < textAlpha
-                                ? this.graphSettings.highlightTextFadingMin
-                                : textAlpha;
-                            textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
-                        }
-                        if (nodeOptions.highlightColor) {
-                            const colorRgb = extractRgb(colorToRgb(color));
-                            if (colorRgb) {
-                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
-                                const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
-                                color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
-                            }
-                        }
-                    }
-                    else if (!this.graphSettings.highlightOnlyRoot ||
-                        (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
-                        /** Highlighted */
-                        if (nodeOptions.highlightSizing) {
-                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightSizingAdditional, this.highlightProgress);
-                        }
-                        if (nodeOptions.highlightTextSizing) {
-                            textSize = animationByProgress(textSize, this.graphSettings.highlightTextSizingAdditional, this.highlightProgress);
-                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightTextShiftXAdditional, this.highlightProgress);
-                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightTextShiftYAdditional, this.highlightProgress);
-                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightTextWeightAdditional, this.highlightProgress);
-                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightTextWidthAdditional, this.highlightProgress);
-                        }
-                    }
-                }
-                const radius = nodeRadiusGetter({
-                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                    radiusInitial,
-                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                    radiusFactor: this.graphSettings.nodeRadiusFactor,
-                    linkCount: node.linkCount,
-                });
-                node._radius = radius;
-                if (!isNodeVisible({
-                    height: this.height,
-                    width: this.width,
-                    x: node.x,
-                    y: node.y,
-                    radius,
-                    transform: this.areaTransform,
-                })) {
-                    node._visible = false;
-                    return;
-                }
-                node._visible = true;
-                nodeRenders.push(() => {
-                    if (!this.context || !node.x || !node.y)
-                        return;
-                    this.context.beginPath();
-                    this.context.globalAlpha = alpha;
-                    /** circle */
-                    this.context.lineWidth = nodeOptions.borderWidth;
-                    this.context.strokeStyle = nodeOptions.borderColor;
-                    this.context.fillStyle = color;
-                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-                    this.context.fill();
-                    this.context.stroke();
-                });
-                if (nodeOptions.nodeExtraDraw) {
-                    nodeRenders.push(() => {
-                        nodeOptions?.nodeExtraDraw?.(node, {
-                            ...nodeOptions,
-                            radius,
-                            alpha,
-                            color,
-                            textAlpha,
-                            textSize,
-                            textShiftX,
-                            textShiftY,
-                            textWeight,
-                            textWidth,
-                        }, state);
-                    });
-                }
-                /** text */
-                if (nodeOptions.textVisible && nodeOptions.text) {
-                    textRenders.push(() => {
-                        if (nodeOptions.textDraw) {
-                            nodeOptions.textDraw(node, {
-                                ...nodeOptions,
-                                radius,
-                                alpha,
-                                color,
-                                textAlpha,
-                                textSize,
-                                textShiftX,
-                                textShiftY,
-                                textWeight,
-                                textWidth,
-                            }, state);
-                            return;
-                        }
-                        if (!this.context || !node.x || !node.y || !nodeOptions.text)
-                            return;
-                        this.context.beginPath();
-                        this.context.globalAlpha = textAlpha;
-                        drawText({
-                            id: node.id,
-                            cachedNodeText: this.cachedNodeText,
-                            context: this.context,
-                            text: nodeOptions.text,
-                            textAlign: nodeOptions.textAlign,
-                            textColor: nodeOptions.textColor,
-                            textFont: nodeOptions.textFont,
-                            textSize,
-                            x: node.x + textShiftX,
-                            y: node.y + radius + textShiftY,
-                            maxWidth: textWidth,
-                            textStyle: nodeOptions.textStyle,
-                            textWeight,
-                            textGap: nodeOptions.textGap,
-                        });
-                        if (nodeOptions.textExtraDraw) {
-                            nodeOptions.textExtraDraw(node, {
-                                ...nodeOptions,
-                                radius,
-                                alpha,
-                                color,
-                                textAlpha,
-                                textSize,
-                                textShiftX,
-                                textShiftY,
-                                textWeight,
-                                textWidth,
-                            }, state);
-                        }
-                    });
-                }
-            };
-        }
-        if (this.graphSettings.showDrawTime) {
-            return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
-        }
-        return draw;
-    }
-    initResize() {
-        if (!this.area)
-            throw new Error("bad init data");
-        let initialResizeCall = true;
-        const abortController = this.eventAbortController;
-        const observer = new ResizeObserver(() => {
-            if (initialResizeCall) {
-                initialResizeCall = false;
-                return;
-            }
-            if (abortController.signal.aborted) {
-                observer.disconnect();
-                return;
-            }
-            requestAnimationFrame(() => {
-                this.updateSize();
-            });
-        });
-        document.addEventListener("scroll", this.updateRect.bind(this), {
-            capture: true,
-            passive: true,
-            signal: abortController.signal,
-        });
-        observer.observe(this.area);
-    }
-    initPointer() {
-        if (!this.area || !this.nodes || !this.simulation)
-            throw new Error("bad init data");
-        /** hover */
-        this.area.addEventListener("pointermove", (event) => {
-            let currentNode;
-            if (this.graphSettings.highlightByHover && !this.isDragging) {
-                currentNode = nodeByPointerGetter({
-                    graphSettings: this.graphSettings,
-                    areaRect: this.areaRect,
-                    areaTransform: this.areaTransform,
-                    mouseEvent: event,
-                    nodes: this.nodes,
-                });
-                if (currentNode && this.highlightedNode !== currentNode) {
-                    this.highlightedNode = currentNode;
-                    this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
-                    this.highlightWorking = true;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
-                }
-                else if (!currentNode && this.highlightedNode) {
-                    this.highlightWorking = false;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
-                }
-            }
-            if (!this.listeners.onMove)
-                return;
-            if (!currentNode)
-                currentNode = nodeByPointerGetter({
-                    graphSettings: this.graphSettings,
-                    areaRect: this.areaRect,
-                    areaTransform: this.areaTransform,
-                    mouseEvent: event,
-                    nodes: this.nodes,
-                });
-            return void this.listeners.onMove(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** dblclick */
-        this.area.addEventListener("dblclick", (event) => {
-            if (!this.listeners.onDoubleClick)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onDoubleClick(event, currentNode);
-        });
-        /** wheel click */
-        this.area.addEventListener("mousedown", (event) => {
-            if (this.isDragging || !this.listeners.onWheelClick || event.button !== 1)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onWheelClick(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** click */
-        this.area.addEventListener("click", (event) => {
-            if (this.isDragging || !this.listeners.onClick || event.button !== 0)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onClick(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** right click */
-        this.area.addEventListener("contextmenu", (event) => {
-            if (!this.listeners.onContextMenu)
-                return;
-            const currentNode = nodeByPointerGetter({
-                graphSettings: this.graphSettings,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
-                nodes: this.nodes,
-            });
-            return void this.listeners.onContextMenu(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-    }
-    initDnd() {
-        if (!this.area || !this.nodes || !this.simulation)
-            throw new Error("bad init data");
-        select(this.area).call(drag()
-            .subject((event) => {
-            if (this.listeners.onDragSubject) {
-                return this.listeners.onDragSubject(event, this.state);
-            }
-            if (!this.areaRect)
-                return;
-            const mouseEvent = event.sourceEvent;
-            const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-            let index = 0;
-            return greatest(this.nodes, (node) => {
-                if (!node.x || !node.y || (isBoolean(node.drag) && !node.drag))
-                    return undefined;
-                let radius = node._radius;
-                if (!radius) {
-                    const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-                    radius = nodeRadiusGetter({
-                        radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                        radiusInitial: nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial,
-                        radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                        radiusFactor: this.graphSettings.nodeRadiusFactor,
-                        linkCount: node.linkCount,
-                    });
-                }
-                index++;
-                return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY, radius);
-            });
-        })
-            .on("start", (event) => {
-            this.listeners.onStartDragFinished?.(event, this.state);
-        })
-            .on("drag", (event) => {
-            if (!this.isDragging) {
-                this.isDragging = true;
-                if (this.simulation)
-                    this.simulation.alphaTarget(0.3).restart();
-            }
-            if (!this.areaRect)
-                return;
-            const mouseEvent = event.sourceEvent;
-            const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-            event.subject.fx = pointerX;
-            event.subject.fy = pointerY;
-            this.listeners.onMoveDragFinished?.(event, this.state);
-        })
-            .on("end", (event) => {
-            this.isDragging = false;
-            if (!event.active && this.simulation)
-                this.simulation.alphaTarget(0);
-            if (this.graphSettings.stickAfterDrag && this.areaRect) {
-                if (!this.areaRect)
-                    return;
-                const mouseEvent = event.sourceEvent;
-                const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-                event.subject.fx = pointerX;
-                event.subject.fy = pointerY;
-            }
-            else {
-                event.subject.fx = null;
-                event.subject.fy = null;
-            }
-            this.listeners.onEndDragFinished?.(event, this.state);
-        }));
-    }
-    initZoom(currentZoom) {
-        if (!this.area)
-            throw new Error("bad init data");
-        const zoomInstance = zoom()
-            .scaleExtent(this.graphSettings.zoomExtent)
-            .on("zoom", (event) => {
-            this.listeners.onZoom?.(event);
-            this.areaTransform = event.transform;
-            this.linkOptionsCache = {};
-            this.nodeOptionsCache = {};
-            if (!this.simulationWorking && !this.highlightWorking)
-                requestAnimationFrame(() => this.draw());
-        });
-        if (this.graphSettings.translateExtentEnable) {
-            const coefficient = this.graphSettings.translateExtentCoefficient;
-            const [coefficientX, coefficientY] = isArray(coefficient)
-                ? coefficient
-                : [coefficient, coefficient];
-            const [[minX = -this.width * coefficientX, minY = -this.height * coefficientY], [maxX = this.width * coefficientX, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
-            zoomInstance.translateExtent([
-                [minX, minY],
-                [maxX, maxY],
-            ]);
-        }
-        select(this.area).call(zoomInstance).on("dblclick.zoom", null);
-        const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
-        this.areaTransform = new ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
-        zoom().transform(select(this.area), this.areaTransform);
+        initArea.call(this);
+        initSimulation.call(this);
+        initDnd.call(this);
+        initZoom.call(this);
+        initResize.call(this);
+        initPointer.call(this);
     }
 }