@krainovsd/graph 0.4.5 → 0.6.0

package/lib/esm/index.js

@@ -1,936 +1,13 @@
-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';
-
-const FORCE_SETTINGS = {
-    centerPosition: {},
-    centerStrength: 1,
-    collideStrength: 0.1,
-    collideAdditionalRadius: 4,
-    collideIterations: 2,
-    collideOffMax: { links: 0, nodes: 0 },
-    collideOn: true,
-    chargeStrength: -40,
-    chargeDistanceMax: Infinity,
-    chargeDistanceMin: 1,
-    xForce: 0,
-    xStrength: 0.1,
-    yForce: 0,
-    yStrength: 0.1,
-    linkDistance: 30,
-    linkIterations: 1,
-    linkStrength: 1,
-    collideRadius: null,
-};
-const GRAPH_SETTINGS = {
-    zoomExtent: [0.1, 20],
-    stickAfterDrag: false,
-    highlightByHover: false,
-    highlightFadingMin: 0.21,
-    highlightDownStep: 0.09,
-    highlightUpStep: 0.09,
-    dragPlaceCoefficient: dragPlaceCoefficientGetter,
-    nodeRadiusInitial: 4,
-    nodeRadiusCoefficient: 5,
-    nodeRadiusFactor: 1,
-    nodeRadiusFlexible: true,
-    zoomInitial: null,
-};
-const NODE_SETTINGS = {
-    alpha: 1,
-    borderColor: "#000000FF",
-    borderWidth: 0.1,
-    textWidth: 20,
-    textShiftX: 0,
-    textFont: "Arial",
-    textAlign: "center",
-    textColor: "#333",
-    width: 1,
-    radius: 4,
-    textStyle: "normal",
-    textWeight: "500",
-    textGap: 1,
-};
-const LINK_SETTINGS = {
-    alpha: 1,
-};
-const COMMON_SETTINGS = {
-    linkColorZoomFar: "#999",
-    linkColorZoomNear: "#000000FF",
-    linkWidthZoomFar: 1,
-    linkWidthZoomNear: 0.1,
-    linkWidthZoomBorder: 1,
-    linkColorZoomBorder: 1,
-    nodeTextScaleMin: 1.5,
-    nodeTextScaleMax: 20,
-    nodeTextSizeMin: 1.5,
-    nodeTextSizeMax: 3.5,
-    nodeTextShiftYMin: 2.5,
-    nodeTextShiftYMax: 4,
-    nodeTextChangeStepCount: 200,
-};
-
-function forceSettingsGetter(settings, prevSettings) {
-    return {
-        ...(prevSettings ?? FORCE_SETTINGS),
-        ...settings,
-    };
-}
-
-function graphSettingsGetter(settings, prevSettings) {
-    return {
-        ...(prevSettings ?? GRAPH_SETTINGS),
-        ...settings,
-    };
-}
-
-function linkSettingsGetter(settings) {
-    return { options: settings?.options };
-}
-function linkOptionsGetter(_, __, ___, transform) {
-    return {
-        ...LINK_SETTINGS,
-        color: transform && transform.k > COMMON_SETTINGS.linkColorZoomBorder
-            ? COMMON_SETTINGS.linkColorZoomNear
-            : COMMON_SETTINGS.linkColorZoomFar,
-        width: transform && transform.k > COMMON_SETTINGS.linkWidthZoomBorder
-            ? COMMON_SETTINGS.linkWidthZoomNear
-            : COMMON_SETTINGS.linkWidthZoomFar,
-    };
-}
-
-function listenersGetter(settings) {
-    return settings || {};
-}
-
-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];
-    };
-}
-
-function nodeSettingsGetter(settings) {
-    return {
-        idGetter: settings?.idGetter ?? nodeIdGetter,
-        options: settings?.options,
-    };
-}
-const color = colorGetter();
-function nodeOptionsGetter(node, _, __, transform) {
-    const { textShiftY, textSize } = nodeTextSizeGetter(transform);
-    return {
-        ...NODE_SETTINGS,
-        color: color(String(node.group || "_DEFAULT")),
-        textVisible: Boolean(transform && transform.k > COMMON_SETTINGS.nodeTextScaleMin),
-        text: node.id != undefined ? String(node.id) : null,
-        textShiftY,
-        textSize,
-    };
-}
-function nodeTextSizeGetter(transform) {
-    let textSize = COMMON_SETTINGS.nodeTextSizeMax;
-    let textShiftY = COMMON_SETTINGS.nodeTextShiftYMax;
-    if (transform) {
-        const scaleStepCoefficient = (COMMON_SETTINGS.nodeTextScaleMax - COMMON_SETTINGS.nodeTextScaleMin) /
-            COMMON_SETTINGS.nodeTextChangeStepCount;
-        const textStepCoefficient = (COMMON_SETTINGS.nodeTextSizeMax - COMMON_SETTINGS.nodeTextSizeMin) /
-            COMMON_SETTINGS.nodeTextChangeStepCount;
-        const shiftStepCoefficient = (COMMON_SETTINGS.nodeTextShiftYMax - COMMON_SETTINGS.nodeTextShiftYMin) /
-            COMMON_SETTINGS.nodeTextChangeStepCount;
-        if (transform.k >= COMMON_SETTINGS.nodeTextScaleMax) {
-            textSize = COMMON_SETTINGS.nodeTextSizeMin;
-            textShiftY = COMMON_SETTINGS.nodeTextShiftYMin;
-        }
-        else if (transform.k > COMMON_SETTINGS.nodeTextScaleMin) {
-            const transformSteps = (transform.k - COMMON_SETTINGS.nodeTextScaleMin) / scaleStepCoefficient;
-            textSize -= transformSteps * textStepCoefficient;
-            textShiftY -= transformSteps * shiftStepCoefficient;
-        }
-    }
-    return { textSize, textShiftY };
-}
-function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }) {
-    return ((radiusFlexible && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + radiusInitial);
-}
-function nodeIdGetter(d) {
-    return d.id;
-}
-
-function pointerGetter(mouseEvent, areaRect, areaTransform) {
-    const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
-    const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
-    return [px, py];
-}
-
-function isOverlapsNode(node, radius, pointerX, pointerY) {
-    if (node.x == undefined || node.y == undefined)
-        return false;
-    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.index;
-}
-
-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 (customOptions && typeof customOptions === "object" && !Array.isArray(customOptions)) {
-        for (const key in customOptions) {
-            if (customOptions[key] === undefined)
-                delete customOptions[key];
-        }
-    }
-    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 nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, graphSettings, }) {
-    if (!areaRect)
-        return undefined;
-    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
-    return greatest(nodes, (node) => {
-        const radius = nodeRadiusGetter({
-            radiusFlexible: graphSettings.nodeRadiusFlexible,
-            radiusInitial: graphSettings.nodeRadiusInitial,
-            radiusCoefficient: graphSettings.nodeRadiusCoefficient,
-            radiusFactor: graphSettings.nodeRadiusFactor,
-            linkCount: node.linkCount,
-        });
-        if (isOverlapsNode(node, radius, pointerX, pointerY))
-            return node.index;
-    });
-}
-
-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 (customOptions && typeof customOptions === "object" && !Array.isArray(customOptions)) {
-        for (const key in customOptions) {
-            if (customOptions[key] === undefined)
-                delete customOptions[key];
-        }
-    }
-    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 SPACE = " ";
-function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }) {
-    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
-    context.fillStyle = textColor;
-    context.textAlign = textAlign;
-    if (cachedNodeText[id] != undefined) {
-        cachedNodeText[id].forEach((line, index) => {
-            context.fillText(line, x, y + index * textSize + index * textGap);
-        });
-        return;
-    }
-    if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {
-        cachedNodeText[id] = [text];
-        context.fillText(text, x, y);
-        return;
-    }
-    const spaceWidth = context.measureText(" ").width;
-    const lines = [];
-    let lineWidth = 0;
-    let line = "";
-    for (const word of text.split(" ")) {
-        const size = context.measureText(word).width;
-        lineWidth += size;
-        if (line === "") {
-            line = word;
-            continue;
-        }
-        if (lineWidth > maxWidth) {
-            lineWidth = 0;
-            lines.push(line);
-            line = word;
-        }
-        else {
-            lineWidth += spaceWidth;
-            line += `${SPACE}${word}`;
-        }
-    }
-    if (line !== "")
-        lines.push(line);
-    cachedNodeText[id] = lines;
-    lines.forEach((line, index) => {
-        context.fillText(line, x, y + index * textSize + index * textGap);
-    });
-}
-
-class GraphCanvas {
-    /** initial data */
-    nodes;
-    links;
-    width;
-    height;
-    root;
-    container;
-    area;
-    /** settings */
-    graphSettings;
-    forceSettings;
-    nodeSettings;
-    linkSettings;
-    listeners;
-    /** service */
-    context;
-    simulation;
-    areaTransform = zoomIdentity;
-    areaRect;
-    draw;
-    eventAbortController;
-    cachedNodeText = {};
-    simulationWorking = false;
-    isDragging = false;
-    highlightedNode = null;
-    highlightedNeighbors = null;
-    highlighFading = 1;
-    highlightFadingWorking = false;
-    highlightDrawing = false;
-    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.simulationWorking = false;
-        this.highlightedNode = null;
-        this.highlightedNeighbors = null;
-        this.highlighFading = 1;
-        this.highlightFadingWorking = 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.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 || 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.areaTransform, this.forceSettings.collideIterations, undefined);
-                }
-                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.areaTransform, this.nodeSettings.options || {}, nodeOptionsGetter);
-                const radius = nodeRadiusGetter({
-                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                    radiusInitial: this.graphSettings.nodeRadiusInitial,
-                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                    radiusFactor: this.graphSettings.nodeRadiusFactor,
-                    linkCount: node.linkCount,
-                }) ?? nodeOptions.radius;
-                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.highlightFadingWorking) {
-                switch (true) {
-                    case this.highlighFading < 1: {
-                        this.highlighFading += this.graphSettings.highlightUpStep;
-                        break;
-                    }
-                    default: {
-                        if (this.highlightedNeighbors)
-                            this.highlightedNeighbors = null;
-                        if (this.highlightedNode)
-                            this.highlightedNode = null;
-                        break;
-                    }
-                }
-                if (this.highlighFading < 1 && !this.simulationWorking)
-                    return void requestAnimationFrame(() => this.draw());
-            }
-            if (this.highlightFadingWorking) {
-                switch (true) {
-                    case this.highlighFading > this.graphSettings.highlightFadingMin: {
-                        this.highlighFading -= this.graphSettings.highlightDownStep;
-                        break;
-                    }
-                }
-                if (this.highlighFading > this.graphSettings.highlightFadingMin && !this.simulationWorking)
-                    return void requestAnimationFrame(() => this.draw());
-            }
-            this.highlightDrawing = false;
-        }
-        function draw() {
-            if (!this.context)
-                return;
-            if (this.listeners.onDraw) {
-                return void this.listeners.onDraw(this.context, this.areaTransform);
-            }
-            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((r) => r());
-            this.context.restore();
-            this.listeners.onDrawFinished?.(this.context, this.areaTransform);
-            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.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.highlighFading;
-                }
-                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();
-        }
-        const drawNode = (textRenders) => 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({
-                radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                radiusInitial: this.graphSettings.nodeRadiusInitial,
-                radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                radiusFactor: this.graphSettings.nodeRadiusFactor,
-                linkCount: node.linkCount,
-            }) ?? nodeOptions.radius;
-            let alpha = nodeOptions.alpha;
-            if (this.highlightedNeighbors && this.highlightedNode) {
-                if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                    alpha = this.highlighFading;
-                }
-            }
-            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 = alpha;
-                    drawText({
-                        id: node.id,
-                        cachedNodeText: this.cachedNodeText,
-                        context: this.context,
-                        text: nodeOptions.text,
-                        textAlign: nodeOptions.textAlign,
-                        textColor: nodeOptions.textColor,
-                        textFont: nodeOptions.textFont,
-                        textSize: nodeOptions.textSize,
-                        x: node.x + nodeOptions.textShiftX,
-                        y: node.y + radius + nodeOptions.textShiftY,
-                        maxWidth: nodeOptions.textWidth,
-                        textStyle: nodeOptions.textStyle,
-                        textWeight: nodeOptions.textWeight,
-                        textGap: nodeOptions.textGap,
-                    });
-                });
-            }
-            /** circle */
-            this.context.lineWidth = nodeOptions.borderWidth;
-            this.context.strokeStyle = nodeOptions.borderColor;
-            this.context.fillStyle = nodeOptions.color;
-            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-            this.context.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 && currentNode.neighbors && this.highlightedNode !== currentNode) {
-                    this.highlightedNode = currentNode;
-                    this.highlightedNeighbors = new Set(this.highlightedNode.neighbors);
-                    this.highlightFadingWorking = true;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
-                }
-                else if (!currentNode && this.highlightedNode) {
-                    this.highlightFadingWorking = 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.areaTransform, this.nodes);
-            }
-            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)
-                    return undefined;
-                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.areaTransform, this.nodeSettings.options || {}, nodeOptionsGetter);
-                const radius = nodeRadiusGetter({
-                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                    radiusInitial: this.graphSettings.nodeRadiusInitial,
-                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                    radiusFactor: this.graphSettings.nodeRadiusFactor,
-                    linkCount: node.linkCount,
-                }) ?? nodeOptions.radius;
-                index++;
-                return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY, radius);
-            });
-        })
-            .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);
-        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 };
+export { GraphCanvas } from './module/GraphCanvas/GraphCanvas.js';
+export { linkOptionsGetter } from './module/GraphCanvas/lib/settings/link-settings-getter.js';
+export { nodeOptionsGetter, nodeRadiusGetter } from './module/GraphCanvas/lib/settings/node-settings-getter.js';
+export { linkIterationExtractor } from './module/GraphCanvas/lib/utils/link-iteration-extractor.js';
+import 'd3-array';
+export { nodeIterationExtractor } from './module/GraphCanvas/lib/utils/node-iteration-extractor.js';
+export { drawText } from './module/GraphCanvas/lib/utils/draw-text.js';
+export { calculateLinkPositionByRadius } from './module/GraphCanvas/lib/utils/calculate-link-position-by-radius.js';
+export { colorToRgb } from './lib/color-to-rgb.js';
+export { extractRgb } from './lib/extract-rgb.js';
+export { fadeRgb } from './lib/fade-rgb.js';
+export { rgbAnimationByProgress } from './lib/rgb-animation-by-progress.js';
 //# sourceMappingURL=index.js.map