@krainovsd/graph 0.14.0-beta.7 → 0.14.0-beta.9

package/lib/cjs/index.cjs

@@ -2164,7 +2164,7 @@ function initPointer() {
             this.area.style.cursor = "default";
         }
         this.animateHighlight(highlightNode ? currentNode : undefined, highlightLink ? currentLink : undefined);
-        if (!this.listeners.onMove)
+        if (!this.listeners.onHover)
             return;
         if (!currentNode && !checkHighlightNode) {
             const [pointerX, pointerY] = this.getPointerAreaPosition(event);
@@ -2184,8 +2184,7 @@ function initPointer() {
                 curve: this.linkSettings.curve,
             });
         }
-        if (!currentNode)
-            return void this.listeners.onMove.call(this, event, currentNode, currentLink);
+        this.listeners.onHover.call(this, event, currentNode, currentLink);
     }
     function onWheelClick(event) {
         if (this.isDragging ||
@@ -2328,8 +2327,16 @@ function initResize() {
         signal: abortController.signal,
     });
     document.addEventListener("visibilitychange", () => {
-        if (document.hidden)
+        if (document.hidden) {
+            this.highlightController?.abort();
+            this.highlightedNode = null;
+            this.highlightedLink = null;
+            this.highlightedNeighbors = null;
+            this.highlightProgress = 0;
+            this.highlightStart = null;
+            this.highlightPositive = false;
             return;
+        }
         this.updateSize();
         requestAnimationFrame(() => {
             this.updateSize();
@@ -2945,6 +2952,212 @@ function initCollideForce(forceUpdate) {
     }
 }
 
+function escapeXml(s) {
+    return s
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+class SvgContextAdapter {
+    parts;
+    globalAlpha = 1;
+    fillStyle = "black";
+    strokeStyle = "black";
+    lineWidth = 1;
+    textAlign = "start";
+    _font = "normal normal 400 12px sans-serif";
+    fontFamily = "sans-serif";
+    fontSize = 12;
+    fontWeight = 400;
+    fontStyle = "normal";
+    stateStack = [];
+    currentPath = [];
+    hasPath = false;
+    transformX = 0;
+    transformY = 0;
+    transformK = 1;
+    constructor(parts) {
+        this.parts = parts;
+    }
+    set font(value) {
+        this._font = value;
+        const p = value.trim().split(/\s+/);
+        if (p.length >= 5) {
+            this.fontStyle = p[0];
+            this.fontWeight = parseInt(p[2], 10) || 400;
+            this.fontSize = parseFloat(p[3]) || 12;
+            this.fontFamily = p.slice(4).join(" ");
+        }
+    }
+    get font() {
+        return this._font;
+    }
+    save() {
+        this.stateStack.push({
+            globalAlpha: this.globalAlpha,
+            fillStyle: this.fillStyle,
+            strokeStyle: this.strokeStyle,
+            lineWidth: this.lineWidth,
+            font: this._font,
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            fontWeight: this.fontWeight,
+            fontStyle: this.fontStyle,
+            textAlign: this.textAlign,
+        });
+    }
+    restore() {
+        const state = this.stateStack.pop();
+        if (state) {
+            this.globalAlpha = state.globalAlpha;
+            this.fillStyle = state.fillStyle;
+            this.strokeStyle = state.strokeStyle;
+            this.lineWidth = state.lineWidth;
+            this._font = state.font;
+            this.fontFamily = state.fontFamily;
+            this.fontSize = state.fontSize;
+            this.fontWeight = state.fontWeight;
+            this.fontStyle = state.fontStyle;
+            this.textAlign = state.textAlign;
+        }
+    }
+    beginPath() {
+        this.currentPath = [];
+        this.hasPath = false;
+    }
+    closePath() {
+        this.currentPath.push("Z");
+    }
+    moveTo(x, y) {
+        this.hasPath = true;
+        this.currentPath.push(`M${x},${y}`);
+    }
+    lineTo(x, y) {
+        this.hasPath = true;
+        this.currentPath.push(`L${x},${y}`);
+    }
+    arc(cx, cy, radius, startAngle, endAngle) {
+        this.hasPath = true;
+        if (endAngle - startAngle >= 2 * Math.PI - 0.01) {
+            const x1 = cx - radius;
+            const x2 = cx + radius;
+            this.currentPath.push(`M${x1},${cy} A${radius},${radius} 0 1,1 ${x2},${cy} A${radius},${radius} 0 1,1 ${x1},${cy}`);
+        }
+        else {
+            const sx = cx + radius * Math.cos(startAngle);
+            const sy = cy + radius * Math.sin(startAngle);
+            const ex = cx + radius * Math.cos(endAngle);
+            const ey = cy + radius * Math.sin(endAngle);
+            this.currentPath.push(`M${sx},${sy} A${radius},${radius} 0 0,1 ${ex},${ey}`);
+        }
+    }
+    quadraticCurveTo(cpx, cpy, x, y) {
+        this.hasPath = true;
+        this.currentPath.push(`Q${cpx},${cpy} ${x},${y}`);
+    }
+    roundRect(x, y, w, h, radii) {
+        this.hasPath = true;
+        const r = typeof radii === "number" ? radii : (radii[0] ?? 0);
+        if (r < 0.001) {
+            this.currentPath.push(`M${x},${y} L${x + w},${y} L${x + w},${y + h} L${x},${y + h} Z`);
+        }
+        else {
+            this.currentPath.push(`M${x + r},${y} L${x + w - r},${y} A${r},${r} 0 0,1 ${x + w},${y + r} L${x + w},${y + h - r} A${r},${r} 0 0,1 ${x + w - r},${y + h} L${x + r},${y + h} A${r},${r} 0 0,1 ${x},${y + h - r} L${x},${y + r} A${r},${r} 0 0,1 ${x + r},${y} Z`);
+        }
+    }
+    rect(x, y, w, h) {
+        this.hasPath = true;
+        this.currentPath.push(`M${x},${y} L${x + w},${y} L${x + w},${y + h} L${x},${y + h} Z`);
+    }
+    fill() {
+        if (!this.hasPath)
+            return;
+        const d = this.currentPath.join(" ");
+        this.parts.push(`<path d="${d}" fill="${this.fillStyle}" stroke="none" opacity="${this.globalAlpha}" stroke-linejoin="round"/>`);
+    }
+    stroke() {
+        if (!this.hasPath)
+            return;
+        const d = this.currentPath.join(" ");
+        this.parts.push(`<path d="${d}" fill="none" stroke="${this.strokeStyle}" stroke-width="${this.lineWidth}" opacity="${this.globalAlpha}" stroke-linecap="round" stroke-linejoin="round"/>`);
+    }
+    fillText(text, x, y) {
+        const anchor = this.textAlign === "center" ? "middle" : this.textAlign === "right" ? "end" : "start";
+        this.parts.push(`<text x="${x}" y="${y}" font-family="${this.fontFamily}" font-size="${this.fontSize}" font-weight="${this.fontWeight}" font-style="${this.fontStyle}" fill="${this.fillStyle}" text-anchor="${anchor}" opacity="${this.globalAlpha}">${escapeXml(text)}</text>`);
+    }
+    fillRect(x, y, w, h) {
+        this.parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${this.fillStyle}" opacity="${this.globalAlpha}"/>`);
+    }
+    strokeRect(x, y, w, h) {
+        this.parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="none" stroke="${this.strokeStyle}" stroke-width="${this.lineWidth}" opacity="${this.globalAlpha}"/>`);
+    }
+    clearRect() { }
+    translate(x, y) {
+        this.transformX = x;
+        this.transformY = y;
+    }
+    scale(k) {
+        this.transformK = k;
+    }
+    closeTransform() {
+        this.parts.unshift(`<g transform="translate(${this.transformX},${this.transformY}) scale(${this.transformK})">`);
+        this.parts.push("</g>");
+    }
+    setLineDash() { }
+    clip() { }
+    drawImage() { }
+}
+
+function exportToSvgSlice(filename = "graph.svg", fit = false) {
+    this.tick();
+    let svgWidth = this.width;
+    let svgHeight = this.height;
+    const svgParts = [];
+    const adapter = new SvgContextAdapter(svgParts);
+    const clone = Object.assign(Object.create(Object.getPrototypeOf(this)), this);
+    clone.context = adapter;
+    clone.isSelecting = false;
+    clone.listeners = {};
+    clone.nodes = jsHelpers.cloneDeep(this.nodes);
+    clone.links = jsHelpers.cloneDeep(this.links);
+    clone.particles = jsHelpers.cloneDeep(this.particles);
+    if (fit) {
+        const bounds = computeGraphBounds(clone.nodes);
+        if (bounds) {
+            const pad = 50;
+            const graphWidth = bounds.maxX - bounds.minX;
+            const graphHeight = bounds.maxY - bounds.minY;
+            if (graphWidth > 0 && graphHeight > 0) {
+                svgWidth = graphWidth + pad * 2;
+                svgHeight = graphHeight + pad * 2;
+                const graphCenterX = bounds.minX + graphWidth / 2;
+                const graphCenterY = bounds.minY + graphHeight / 2;
+                clone.areaTransform = d3Zoom.zoomIdentity
+                    .translate(svgWidth / 2, svgHeight / 2)
+                    .translate(-graphCenterX, -graphCenterY);
+                clone.width = svgWidth;
+                clone.height = svgHeight;
+            }
+        }
+    }
+    const draw = initDraw.call(clone);
+    draw();
+    adapter.closeTransform();
+    const svg = [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${svgHeight}">`,
+        ...svgParts,
+        "</svg>",
+    ].join("\n");
+    const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
 class GraphCanvas {
     /** initial data */
     nodes;
@@ -3074,6 +3287,9 @@ class GraphCanvas {
         }
         this.animateZoom(area, target, this.areaTransform, duration);
     };
+    exportToSvg = (filename = "graph.svg", fit = false) => {
+        exportToSvgSlice.call(this, filename, fit);
+    };
     changeData = (options, alpha = 0.5, clearCache = true, precompute = false) => {
         if (options.links != undefined)
             this.links = options.links;
@@ -3376,7 +3592,7 @@ class GraphCanvas {
             if (controller.signal.aborted)
                 return;
             const elapsed = performance.now() - startTime;
-            const t = Math.min(elapsed / duration, 1);
+            const t = duration === 0 ? 1 : Math.min(elapsed / duration, 1);
             const current = startProgress + delta * t;
             const eased = current < 0.5 ? 4 * current * current * current : 1 - (-2 * current + 2) ** 3 / 2;
             this.highlightProgress = eased;