@krainovsd/graph 0.4.5 → 0.6.0

package/lib/cjs/index.cjs

@@ -0,0 +1,1144 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsHelpers = require('@krainovsd/js-helpers');
+const d3Array = require('d3-array');
+const d3Drag = require('d3-drag');
+const d3Force = require('d3-force');
+const d3Selection = require('d3-selection');
+const d3Zoom = require('d3-zoom');
+
+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 colorToRgb(color) {
+    const format = jsHelpers.getColorFormat(color);
+    switch (format) {
+        case jsHelpers.COLOR_FORMATS.Hex: {
+            return jsHelpers.transformHEXtoRGB(color);
+        }
+        case jsHelpers.COLOR_FORMATS.Rgb: {
+            return color;
+        }
+        case jsHelpers.COLOR_FORMATS.Rgba: {
+            return jsHelpers.transformRGBAtoRGB(color);
+        }
+        default: {
+            return null;
+        }
+    }
+}
+
+function extractRgb(color) {
+    if (!color)
+        return null;
+    const code = color.match(/\d+/g);
+    if (!code)
+        return null;
+    return {
+        r: +code[0],
+        g: +code[1],
+        b: +code[2],
+    };
+}
+
+function fadeRgb(color, fade) {
+    const gray = (color.r + color.g + color.b) / 3;
+    return {
+        r: color.r * fade + gray * (1 - fade),
+        g: color.g * fade + gray * (1 - fade),
+        b: color.b * fade + gray * (1 - fade),
+    };
+}
+
+function rgbAnimationByProgress(start, end, progress) {
+    return {
+        r: start.r + (end.r - start.r) * progress,
+        g: start.g + (end.g - start.g) * progress,
+        b: start.b + (end.b - start.b) * progress,
+    };
+}
+
+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],
+    translateExtent: [[], []],
+    translateExtentEnable: true,
+    translateExtentCoefficient: [1.2, 1.1],
+    highlightSizingAdditional: 0.5,
+    highlightColorFadingMin: 0.15,
+    highlightTextShiftXAdditional: 0,
+    highlightTextShiftYAdditional: 2,
+    highlightTextSizingAdditional: 1,
+    highlightTextWeightAdditional: 0,
+    highlightTextWidthAdditional: 10,
+    highlightOnlyRoot: true,
+    stickAfterDrag: false,
+    highlightByHover: false,
+    highlightLinkFadingMin: 0.21,
+    highlightFadingMin: 0.21,
+    highlightTextFadingMin: 0.21,
+    highlightDownStep: 0.2,
+    highlightUpStep: 0.2,
+    dragPlaceCoefficient: dragPlaceCoefficientGetter,
+    nodeRadiusInitial: 4,
+    nodeRadiusCoefficient: 5,
+    nodeRadiusFactor: 1,
+    nodeRadiusFlexible: true,
+    zoomInitial: null,
+};
+const NODE_SETTINGS = {
+    alpha: 1,
+    textAlpha: 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,
+    highlightFading: false,
+    highlightColor: true,
+    highlightSizing: true,
+    highlightTextFading: true,
+    highlightTextSizing: true,
+};
+const LINK_SETTINGS = {
+    alpha: 1,
+    highlightFading: true,
+    pretty: true,
+};
+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(_, __, ___, state) {
+    return {
+        ...LINK_SETTINGS,
+        color: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkColorZoomBorder
+            ? COMMON_SETTINGS.linkColorZoomNear
+            : COMMON_SETTINGS.linkColorZoomFar,
+        width: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkWidthZoomBorder
+            ? COMMON_SETTINGS.linkWidthZoomNear
+            : COMMON_SETTINGS.linkWidthZoomFar,
+    };
+}
+
+function listenersGetter(settings) {
+    return settings ?? {};
+}
+
+function nodeSettingsGetter(settings) {
+    return {
+        idGetter: settings?.idGetter ?? nodeIdGetter,
+        options: settings?.options,
+    };
+}
+const color = colorGetter();
+function nodeOptionsGetter(node, _, __, state) {
+    const { textShiftY, textSize } = nodeTextSizeGetter(state?.areaTransform);
+    return {
+        ...NODE_SETTINGS,
+        color: color(String(node.group ?? "_DEFAULT")),
+        textVisible: Boolean(state?.areaTransform && state.areaTransform.k > COMMON_SETTINGS.nodeTextScaleMin),
+        text: node.name ?? node.id.toString(),
+        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(node) {
+    return node.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, state, option, optionConstantGetter) {
+    let customOptions;
+    let constantOptions;
+    if (typeof option === "function")
+        customOptions = option(link, i, links, state);
+    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, state);
+        else
+            constantOptions = optionConstantGetter;
+        if (constantOptions &&
+            typeof constantOptions === "object" &&
+            !Array.isArray(constantOptions) &&
+            checkType(customOptions, customOptions === undefined ||
+                (typeof customOptions === "object" && !Array.isArray(customOptions)))) {
+            return {
+                ...constantOptions,
+                ...customOptions,
+            };
+        }
+    }
+    return customOptions;
+}
+
+function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, graphSettings, }) {
+    if (!areaRect)
+        return undefined;
+    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+    return d3Array.greatest(nodes, (node) => {
+        const radius = node._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, state, option, optionConstantGetter) {
+    let customOptions;
+    let constantOptions;
+    if (typeof option === "function")
+        customOptions = option(node, i, nodes, state);
+    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, state);
+        else
+            constantOptions = optionConstantGetter;
+        if (constantOptions &&
+            typeof constantOptions === "object" &&
+            !Array.isArray(constantOptions) &&
+            checkType(customOptions, customOptions === undefined ||
+                (typeof customOptions === "object" && !Array.isArray(customOptions)))) {
+            return {
+                ...constantOptions,
+                ...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);
+    });
+}
+
+function calculateLinkPositionByRadius(link) {
+    const source = link.source;
+    const target = link.target;
+    if (typeof source != "object" || typeof target != "object")
+        return null;
+    const dx = (target.x ?? 0) - (source.x ?? 0);
+    const dy = (target.y ?? 0) - (source.y ?? 0);
+    const dr = Math.sqrt(dx * dx + dy * dy);
+    const sourceRadius = source._radius ?? 0;
+    const targetRadius = target._radius ?? 0;
+    return {
+        x1: (source.x ?? 0) + (dx * sourceRadius) / dr,
+        y1: (source.y ?? 0) + (dy * sourceRadius) / dr,
+        x2: (target.x ?? 0) - (dx * targetRadius) / dr,
+        y2: (target.y ?? 0) - (dy * targetRadius) / dr,
+    };
+}
+
+class GraphCanvas {
+    /** initial data */
+    nodes;
+    links;
+    width;
+    height;
+    root;
+    container;
+    area;
+    /** settings */
+    graphSettings;
+    forceSettings;
+    nodeSettings;
+    linkSettings;
+    listeners;
+    /** service */
+    context;
+    simulation;
+    areaTransform = d3Zoom.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", d3Force.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 = d3Force.forceSimulation()
+                .nodes(this.nodes)
+                .force("link", d3Force.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", d3Force.forceX(this.forceSettings.xForce).strength(this.forceSettings.xStrength))
+            .force("y", d3Force.forceY(this.forceSettings.yForce).strength(this.forceSettings.yStrength))
+            .force("charge", d3Force.forceManyBody()
+            .strength(this.forceSettings.chargeStrength)
+            .distanceMax(this.forceSettings.chargeDistanceMax)
+            .distanceMin(this.forceSettings.chargeDistanceMin))
+            .force("center", d3Force.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", d3Force.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 = d3Selection.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 = d3Selection.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");
+        d3Selection.select(this.area).call(d3Drag.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 d3Array.greatest(this.nodes, (node) => {
+                if (!node.x || !node.y || (jsHelpers.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 = d3Zoom.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] = jsHelpers.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],
+            ]);
+        }
+        d3Selection.select(this.area).call(zoomInstance).on("dblclick.zoom", null);
+        const zoomInitial = this.graphSettings.zoomInitial;
+        this.areaTransform = new d3Zoom.ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
+        d3Zoom.zoom().transform(d3Selection.select(this.area), this.areaTransform);
+    }
+}
+
+exports.GraphCanvas = GraphCanvas;
+exports.calculateLinkPositionByRadius = calculateLinkPositionByRadius;
+exports.colorToRgb = colorToRgb;
+exports.drawText = drawText;
+exports.extractRgb = extractRgb;
+exports.fadeRgb = fadeRgb;
+exports.linkIterationExtractor = linkIterationExtractor;
+exports.linkOptionsGetter = linkOptionsGetter;
+exports.nodeIterationExtractor = nodeIterationExtractor;
+exports.nodeOptionsGetter = nodeOptionsGetter;
+exports.nodeRadiusGetter = nodeRadiusGetter;
+exports.rgbAnimationByProgress = rgbAnimationByProgress;
+//# sourceMappingURL=index.cjs.map