@krainovsd/graph 0.4.5 → 0.6.0

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

@@ -0,0 +1,731 @@
+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 { 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 { 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';
+
+class GraphCanvas {
+    /** initial data */
+    nodes;
+    links;
+    width;
+    height;
+    root;
+    container;
+    area;
+    /** settings */
+    graphSettings;
+    forceSettings;
+    nodeSettings;
+    linkSettings;
+    listeners;
+    /** service */
+    context;
+    simulation;
+    areaTransform = zoomIdentity;
+    areaRect;
+    draw;
+    eventAbortController;
+    cachedNodeText = {};
+    isDragging = false;
+    highlightedNode = null;
+    highlightedNeighbors = null;
+    highlightProgress = 1;
+    highlightWorking = false;
+    highlightDrawing = false;
+    get simulationWorking() {
+        const simulationAlpha = this.simulation?.alpha?.() ?? 0;
+        const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
+        const simulationAlphaDecay = this.simulation?.alphaDecay?.() ?? 0;
+        const force = (simulationAlpha - simulationAlphaMin) / simulationAlphaDecay;
+        return force > 0;
+    }
+    get state() {
+        return {
+            areaTransform: this.areaTransform,
+            cachedNodeText: this.cachedNodeText,
+            context: this.context,
+            eventAbortController: this.eventAbortController,
+            highlightProgress: this.highlightProgress,
+            highlightDrawing: this.highlightDrawing,
+            highlightedNeighbors: this.highlightedNeighbors,
+            highlightedNode: this.highlightedNode,
+            highlightWorking: this.highlightWorking,
+            isDragging: this.isDragging,
+            simulation: this.simulation,
+            simulationWorking: this.simulationWorking,
+            height: this.height,
+            links: this.links,
+            nodes: this.nodes,
+            width: this.width,
+            forceSettings: this.forceSettings,
+            graphSettings: this.graphSettings,
+            linkSettings: this.linkSettings,
+            nodeSettings: this.nodeSettings,
+        };
+    }
+    constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, }) {
+        // root.style.position = "relative";
+        root.style.overflow = "hidden";
+        this.root = root;
+        this.forceSettings = forceSettingsGetter(forceSettings);
+        this.linkSettings = linkSettingsGetter(linkSettings);
+        this.nodeSettings = nodeSettingsGetter(nodeSettings);
+        this.listeners = listenersGetter(listeners);
+        this.graphSettings = graphSettingsGetter(graphSettings);
+        this.eventAbortController = new AbortController();
+        this.nodes = nodes;
+        this.links = links;
+        this.height = 0;
+        this.width = 0;
+        this.draw = this.initDraw();
+        this.init();
+    }
+    get dpi() {
+        return devicePixelRatio;
+    }
+    getData() {
+        return {
+            links: this.links,
+            nodes: this.nodes,
+        };
+    }
+    changeData(options, alpha) {
+        if (options.links != undefined)
+            this.links = options.links;
+        if (options.nodes != undefined)
+            this.nodes = options.nodes;
+        if (options.nodes != undefined || options.links != undefined)
+            this.updateData(alpha);
+    }
+    changeSettings(options) {
+        if (options.graphSettings)
+            this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
+        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)
+            return void this.updateSimulation();
+        this.tick();
+    }
+    tick() {
+        if (!this.simulationWorking)
+            this.draw();
+    }
+    restart(alpha) {
+        if (this.simulation)
+            this.simulation.alpha(alpha ?? 1).restart();
+    }
+    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() {
+        if (this.simulation) {
+            this.simulation.stop();
+            this.simulation = undefined;
+        }
+        this.clearHTMLElements();
+        this.clearState();
+        this.clearDataDependencies();
+    }
+    clearHTMLElements() {
+        this.root.replaceChildren();
+        this.area = undefined;
+        this.context = undefined;
+        this.container = undefined;
+        this.eventAbortController.abort();
+        this.eventAbortController = new AbortController();
+    }
+    updateSimulation() {
+        if (this.simulation) {
+            this.initSimulationForces();
+            this.simulation.alpha(1);
+            this.simulation.restart();
+        }
+    }
+    clearState() {
+        this.isDragging = false;
+        this.highlightedNode = null;
+        this.highlightedNeighbors = null;
+        this.highlightProgress = 0;
+        this.highlightWorking = false;
+        this.highlightDrawing = false;
+    }
+    clearDataDependencies() {
+        this.cachedNodeText = {};
+    }
+    updateData(alpha) {
+        this.clearDataDependencies();
+        if (this.simulation) {
+            this.initCollideForce();
+            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))
+                .alpha(alpha ?? 0.5)
+                .restart();
+        }
+    }
+    updateSize() {
+        this.clearHTMLElements();
+        this.initArea();
+        this.initDnd();
+        this.initZoom();
+        this.initResize();
+        this.initPointer();
+        if (!this.simulationWorking)
+            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);
+            });
+            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();
+    }
+    initCollideForce() {
+        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"))
+            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());
+                return;
+            }
+            if (this.highlightWorking && this.highlightProgress < 1) {
+                this.highlightProgress += this.graphSettings.highlightUpStep;
+                if (!this.simulationWorking)
+                    return void requestAnimationFrame(() => this.draw());
+                return;
+            }
+            if (!this.highlightWorking && this.highlightProgress <= 0) {
+                if (this.highlightedNeighbors)
+                    this.highlightedNeighbors = null;
+                if (this.highlightedNode)
+                    this.highlightedNode = null;
+            }
+            this.highlightDrawing = false;
+        }
+        function draw() {
+            if (!this.context)
+                return;
+            if (this.listeners.onDraw) {
+                this.listeners.onDraw(this.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);
+            /** links */
+            this.context.beginPath();
+            this.links.forEach(drawLink.bind(this));
+            this.context.stroke();
+            /** nodes */
+            const textRenders = [];
+            this.nodes.forEach(drawNode(textRenders).bind(this));
+            textRenders.forEach((render) => render());
+            this.context.restore();
+            this.listeners.onDrawFinished?.(this.state);
+            calculateHighlightFading.bind(this)();
+        }
+        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;
+            const linkOptions = linkIterationExtractor(link, index, this.links, this.state, this.linkSettings.options ?? {}, linkOptionsGetter);
+            let alpha = linkOptions.alpha;
+            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);
+                }
+                this.context.beginPath();
+            }
+            this.context.globalAlpha = alpha;
+            this.context.strokeStyle = linkOptions.color;
+            this.context.lineWidth = linkOptions.width;
+            if (linkOptions.pretty) {
+                const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link) ?? {
+                    x1: 0,
+                    x2: 0,
+                    y1: 0,
+                    y2: 0,
+                };
+                this.context.moveTo(x1, y1);
+                this.context.lineTo(x2, y2);
+            }
+            else {
+                this.context.moveTo(link.source.x, link.source.y);
+                this.context.lineTo(link.target.x, link.target.y);
+            }
+            if (this.highlightedNeighbors && this.highlightedNode)
+                this.context.stroke();
+        }
+        const drawNode = (textRenders) => function drawNode(node, index) {
+            if (!this.context || !node.x || !node.y)
+                return;
+            const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+            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) {
+                        alpha =
+                            this.graphSettings.highlightFadingMin +
+                                (alpha - this.graphSettings.highlightFadingMin) * (1 - this.highlightProgress);
+                    }
+                    if (nodeOptions.highlightTextFading) {
+                        textAlpha =
+                            this.graphSettings.highlightTextFadingMin +
+                                (textAlpha - this.graphSettings.highlightTextFadingMin) *
+                                    (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) {
+                        const radiusMax = radiusInitial + this.graphSettings.highlightSizingAdditional;
+                        radiusInitial += ((radiusMax - radiusInitial) / 100) * (this.highlightProgress * 100);
+                    }
+                    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);
+                    }
+                }
+            }
+            const radius = nodeRadiusGetter({
+                radiusFlexible: this.graphSettings.nodeRadiusFlexible,
+                radiusInitial,
+                radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
+                radiusFactor: this.graphSettings.nodeRadiusFactor,
+                linkCount: node.linkCount,
+            });
+            node._radius = radius;
+            this.context.beginPath();
+            this.context.globalAlpha = alpha;
+            /** text */
+            if (nodeOptions.textVisible && nodeOptions.text) {
+                textRenders.push(() => {
+                    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,
+                    });
+                });
+            }
+            /** 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();
+        };
+        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();
+            });
+        });
+        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() {
+        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;
+            if (!this.simulationWorking)
+                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 * coefficientX], [maxX = this.width * coefficientY, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
+            zoomInstance.translateExtent([
+                [minX, minY],
+                [maxX, maxY],
+            ]);
+        }
+        select(this.area).call(zoomInstance).on("dblclick.zoom", null);
+        const zoomInitial = 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);
+    }
+}
+
+export { GraphCanvas };
+//# sourceMappingURL=GraphCanvas.js.map