@krainovsd/graph 0.0.1

package/lib/esm/index.js

@@ -0,0 +1,764 @@
+import { least } from 'd3-array';
+import { drag } from 'd3-drag';
+import { forceLink, forceCenter, forceSimulation, forceX, forceY, forceManyBody, forceCollide } from 'd3-force';
+import { create, select } from 'd3-selection';
+import { zoomIdentity, zoom } from 'd3-zoom';
+import debounce from 'lodash/debounce';
+
+function checkType(value, condition) {
+    return condition;
+}
+
+function colorGetter() {
+    const chosenColors = {};
+    const colors = [
+        "#1f77b4",
+        "#ff7f0e",
+        "#2ca02c",
+        "#d62728",
+        "#9467bd",
+        "#8c564b",
+        "#e377c2",
+        "#7f7f7f",
+        "#bcbd22",
+        "#17becf",
+    ];
+    let cursor = 0;
+    return function color(key) {
+        if (chosenColors[key])
+            return chosenColors[key];
+        chosenColors[key] = colors[cursor];
+        cursor++;
+        if (cursor >= colors.length)
+            cursor = 0;
+        return chosenColors[key];
+    };
+}
+
+const FORCE_SETTINGS = {
+    centerPosition: {},
+    centerStrength: 1,
+    collideAdditionalRadius: 2,
+    collideStrength: 1,
+    collideIterations: 1,
+    collideOffMax: { links: 0, nodes: 0 },
+    collideOn: true,
+    chargeStrength: -40,
+    chargeDistanceMax: Infinity,
+    chargeDistanceMin: 1,
+    xForce: 0,
+    xStrength: 0.1,
+    yForce: 0,
+    yStrength: 0.1,
+    linkDistance: 10,
+    linkIterations: 1,
+    linkStrength: 1,
+};
+const GRAPH_SETTINGS = {
+    zoomExtent: [0.1, 10],
+    stickAfterDrag: false,
+    highlightByHover: false,
+    minFading: 0.2,
+};
+const NODE_SETTINGS = {
+    alpha: 1,
+    colorOuter: "#fff",
+    font: "8px Arial",
+    fontAlign: "center",
+    fontColor: "#333",
+    width: 1,
+    zoomTextBorder: 2,
+    initialRadius: 4,
+    radiusCoefficient: 5,
+    radiusFactor: 1,
+    flexibleRadius: true,
+};
+const LINK_SETTINGS = {
+    alpha: 1,
+    colorFar: "#999",
+    colorNear: "#000000FF",
+    widthFar: 1,
+    widthNear: 0.1,
+    zoomWidthBorder: 1,
+    zoomColorBorder: 1,
+};
+
+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 linkOptionsGetter(_, __, ___, transform) {
+    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,
+    };
+}
+
+function linkSettingsGetter(settings) {
+    return { options: settings?.options };
+}
+
+function forceSettingsGetter(settings) {
+    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,
+    };
+}
+
+function listenersGetter(settings) {
+    return settings || {};
+}
+
+function isOverlapsNode(node, radius, pointerX, pointerY) {
+    if (node.x == undefined || node.y == undefined)
+        return false;
+    const isOverX = node.x - radius <= pointerX && pointerX <= node.x + radius;
+    const isOverY = node.y - radius <= pointerY && pointerY <= node.y + radius;
+    return isOverX && isOverY;
+}
+
+function dragPlaceCoefficientGetter(node, pointerX, pointerY, radius) {
+    if (!node.x || !node.y)
+        return undefined;
+    if (isOverlapsNode(node, radius, pointerX, pointerY))
+        return (node.x - pointerX) ** 2 + (node.y - pointerY) ** 2;
+    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) {
+    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;
+}
+
+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, }) {
+    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);
+        const radius = nodeRadiusGetter({
+            flexibleRadius: nodeOptions.flexibleRadius,
+            initialRadius: nodeOptions.initialRadius,
+            radiusCoefficient: nodeOptions.radiusCoefficient,
+            radiusFactor: nodeOptions.radiusFactor,
+            linkCount: node.linkCount,
+        });
+        return isOverlapsNode(node, radius, pointerX, pointerY);
+    });
+}
+
+function nodeIdGetter(d) {
+    return d.id;
+}
+
+function nodeSettingsGetter(settings) {
+    return {
+        idGetter: settings?.idGetter ?? nodeIdGetter,
+        options: settings?.options,
+    };
+}
+
+class GraphCanvas {
+    /** initial data */
+    nodes;
+    links;
+    width;
+    height;
+    root;
+    container;
+    area;
+    dpi = devicePixelRatio;
+    /** settings */
+    graphSettings;
+    forceSettings;
+    nodeSettings;
+    linkSettings;
+    listeners;
+    /** service */
+    context;
+    simulation;
+    areaTransform = zoomIdentity;
+    areaRect;
+    draw;
+    simulationWorking = false;
+    isDragging = false;
+    eventAbortController;
+    highlightedNode = null;
+    highlightedNeighbors = null;
+    fading = 0;
+    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();
+    }
+    getData() {
+        return {
+            links: this.links,
+            nodes: this.nodes,
+        };
+    }
+    changeData(options) {
+        if (options.links != undefined)
+            this.links = options.links;
+        if (options.nodes != undefined)
+            this.nodes = options.nodes;
+        this.updateData();
+    }
+    changeSettings(options) {
+        if (options.forceSettings)
+            this.forceSettings = forceSettingsGetter(options.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() {
+        this.init();
+    }
+    destroy() {
+        if (this.simulation) {
+            this.simulation.stop();
+            this.simulation = undefined;
+        }
+        this.root.replaceChildren();
+        this.area = undefined;
+        this.context = undefined;
+        this.container = undefined;
+        this.eventAbortController.abort();
+        this.eventAbortController = new AbortController();
+    }
+    updateSettings() {
+        if (this.simulation) {
+            this.simulation.stop().alpha(1);
+            this.initSimulationForces();
+            this.simulation.restart();
+        }
+    }
+    updateData() {
+        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))
+                .restart();
+        }
+    }
+    updateSize() {
+        if (!this.area || !this.simulation || !this.container)
+            return;
+        const { width, height } = this.container.getBoundingClientRect();
+        this.width = width;
+        this.height = height;
+        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();
+        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.simulationWorking = true;
+                this.draw();
+            })
+                .on("end", () => {
+                this.listeners.onSimulationEnd?.(this.simulation);
+                this.simulationWorking = false;
+            });
+            this.initSimulationForces();
+        }
+    }
+    initSimulationForces() {
+        if (!this.simulation)
+            return;
+        const linkForce = this.simulation.force("link");
+        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 || this.width / 2, this.forceSettings.centerPosition.y || this.height / 2).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.areaTransform, this.forceSettings.collideIterations, 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,
+                    linkCount: node.linkCount,
+                });
+                return radius + FORCE_SETTINGS.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 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);
+            this.context.scale(this.areaTransform.k, this.areaTransform.k);
+            /** links */
+            this.context.beginPath();
+            this.links.forEach(drawLink.bind(this));
+            this.context.stroke();
+            /** nodes */
+            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();
+                });
+            }
+        }
+        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.areaTransform, this.linkSettings.options || {}, linkOptionsGetter);
+            let alpha = linkOptions.alpha;
+            if (this.highlightedNeighbors && this.highlightedNode) {
+                if (this.highlightedNode.id != link.source.id &&
+                    this.highlightedNode.id != link.target.id) {
+                    alpha = this.fading;
+                }
+                this.context.beginPath();
+            }
+            this.context.globalAlpha = alpha;
+            this.context.strokeStyle = linkOptions.color;
+            this.context.lineWidth = linkOptions.width;
+            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();
+        }
+        function drawNode(node, index) {
+            if (!this.context || !node.x || !node.y)
+                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,
+                linkCount: node.linkCount,
+            });
+            let alpha = nodeOptions.alpha;
+            if (this.highlightedNeighbors && this.highlightedNode) {
+                if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
+                    alpha = this.fading;
+                }
+            }
+            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);
+            }
+            /** circle */
+            this.context.strokeStyle = nodeOptions.colorOuter;
+            this.context.lineWidth = nodeOptions.width;
+            this.context.moveTo(node.x + radius, node.y);
+            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+            this.context.fillStyle = nodeOptions.colorInner;
+            this.context.fill();
+            this.context.stroke();
+        }
+        return draw;
+    }
+    initResize() {
+        if (!this.area)
+            throw new Error("bad init data");
+        const resize = debounce(() => {
+            this.updateSize();
+        }, 10);
+        window.addEventListener("resize", () => {
+            requestAnimationFrame(() => {
+                resize();
+            });
+        }, { signal: this.eventAbortController.signal });
+    }
+    initPointer() {
+        if (!this.area || !this.nodes || !this.simulation)
+            throw new Error("bad init data");
+        this.area.addEventListener("pointermove", (event) => {
+            let currentNode;
+            if (this.graphSettings.highlightByHover) {
+                currentNode = nodeByPointerGetter({
+                    nodeCustomOptions: this.nodeSettings.options,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    nodes: this.nodes,
+                });
+                if (currentNode && currentNode.neighbors && this.highlightedNode !== currentNode) {
+                    this.highlightedNode = currentNode;
+                    this.highlightedNeighbors = new Set(this.highlightedNode.neighbors);
+                    requestAnimationFrame(() => {
+                        this.draw();
+                    });
+                }
+                else if (!currentNode && this.highlightedNode) {
+                    this.highlightedNode = null;
+                    this.highlightedNeighbors = null;
+                    requestAnimationFrame(() => {
+                        this.draw();
+                    });
+                }
+            }
+            if (!this.listeners.onMove)
+                return;
+            if (!currentNode)
+                currentNode = nodeByPointerGetter({
+                    nodeCustomOptions: this.nodeSettings.options,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    nodes: this.nodes,
+                });
+            return void this.listeners.onMove(event, currentNode);
+        }, {
+            signal: this.eventAbortController.signal,
+        });
+        this.area.addEventListener("dblclick", (event) => {
+            if (!this.listeners.onDoubleClick)
+                return;
+            const currentNode = nodeByPointerGetter({
+                nodeCustomOptions: this.nodeSettings.options,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                nodes: this.nodes,
+            });
+            return void this.listeners.onDoubleClick(event, currentNode);
+        });
+        this.area.addEventListener("pointerup", (event) => {
+            if (this.isDragging)
+                return;
+            if (event.button === 0) {
+                if (!this.listeners.onClick)
+                    return;
+                const currentNode = nodeByPointerGetter({
+                    nodeCustomOptions: this.nodeSettings.options,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    nodes: this.nodes,
+                });
+                return void this.listeners.onClick(event, currentNode);
+            }
+            if (event.button === 1) {
+                if (!this.listeners.onWheelClick)
+                    return;
+                const currentNode = nodeByPointerGetter({
+                    nodeCustomOptions: this.nodeSettings.options,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    nodes: this.nodes,
+                });
+                return void this.listeners.onWheelClick(event, currentNode);
+            }
+        }, {
+            signal: this.eventAbortController.signal,
+        });
+        this.area.addEventListener("contextmenu", (event) => {
+            if (!this.listeners.onContextMenu)
+                return;
+            const currentNode = nodeByPointerGetter({
+                nodeCustomOptions: this.nodeSettings.options,
+                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.areaTransform, this.nodes);
+            }
+            if (!this.areaRect)
+                return;
+            const mouseEvent = event.sourceEvent;
+            const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+            let index = 0;
+            return least(this.nodes, (node) => {
+                if (!node.x || !node.y)
+                    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,
+                    linkCount: node.linkCount,
+                });
+                index++;
+                return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY, radius);
+            });
+        })
+            .on("start", (event) => {
+            this.listeners.onStartDragFinished?.(event, this.simulation, this.areaTransform);
+        })
+            .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.simulation, this.areaTransform);
+        })
+            .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.simulation, this.areaTransform);
+        }));
+    }
+    initZoom() {
+        if (!this.area)
+            throw new Error("bad init data");
+        select(this.area)
+            .call(zoom()
+            .scaleExtent(this.graphSettings.zoomExtent)
+            .on("zoom", (event) => {
+            this.listeners.onZoom?.(event);
+            this.areaTransform = event.transform;
+            if (!this.simulationWorking)
+                requestAnimationFrame(() => this.draw());
+        }))
+            .on("dblclick.zoom", null);
+    }
+}
+
+export { GraphCanvas };
+//# sourceMappingURL=index.js.map