@unovis/ts 1.0.0-beta.0

package/components/graph/modules/link/helper.js

@@ -0,0 +1,78 @@
+import { getNumber, getString, getValue } from '../../../../utils/data.js';
+import { stringToHtmlId } from '../../../../utils/misc.js';
+import { getColor, hexToBrightness } from '../../../../utils/color.js';
+import { color } from 'd3-color';
+import { getX, getY } from '../node/helper.js';
+import { ZoomLevel } from '../zoom-levels.js';
+
+// Utils
+const getPolylineData = (d) => `${d.x1},${d.y1} ${(d.x1 + d.x2) / 2},${(d.y1 + d.y2) / 2} ${d.x2},${d.y2}`;
+const LINK_LABEL_RADIUS = 8;
+const LINK_MARKER_WIDTH = 12;
+const LINK_MARKER_HEIGHT = 8;
+function getLinkShift(link, spacing) {
+    const sourceNode = link.source;
+    const targetNode = link.target;
+    const angle = Math.atan2(getY(targetNode) - getY(sourceNode), getX(targetNode) - getX(sourceNode)) - Math.PI / 2;
+    const dx = Math.cos(angle) * spacing * link._direction * (link._index - (link._neighbours - 1) / 2);
+    const dy = Math.sin(angle) * spacing * link._direction * (link._index - (link._neighbours - 1) / 2);
+    return { dx, dy };
+}
+function getLinkShiftTransform(link, spacing) {
+    const { dx, dy } = getLinkShift(link, spacing);
+    return `translate(${dx}, ${dy})`;
+}
+function getLinkLabelShift(link, linkSpacing, shiftFromCenter = 0) {
+    const x1 = getX(link.source);
+    const y1 = getY(link.source);
+    const x2 = getX(link.target);
+    const y2 = getY(link.target);
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const perpendicularShift = getLinkShift(link, linkSpacing);
+    const x = x1 + 0.5 * (x2 - x1) + shiftFromCenter * Math.cos(angle) + perpendicularShift.dx;
+    const y = y1 + 0.5 * (y2 - y1) + shiftFromCenter * Math.sin(angle) + perpendicularShift.dy;
+    return `translate(${x}, ${y})`;
+}
+function getLinkStrokeWidth(d, scale, config) {
+    const m = getNumber(d, config.linkWidth, d._indexGlobal);
+    return m / Math.pow(scale, 0.5);
+}
+function getLinkBandWidth(d, scale, config) {
+    const { nodeSize, linkBandWidth } = config;
+    const sourceNodeSize = getNumber(d.source, nodeSize, d.source._index);
+    const targetNodeSize = getNumber(d.target, nodeSize, d.target._index);
+    const minNodeSize = Math.min(sourceNodeSize, targetNodeSize);
+    return Math.min(minNodeSize, getNumber(d, linkBandWidth, d._indexGlobal) / Math.pow(scale || 1, 0.5)) || 0;
+}
+function getLinkColor(link, config) {
+    var _a;
+    const { linkStroke } = config;
+    const c = (_a = getColor(link, linkStroke, link._indexGlobal, true)) !== null && _a !== void 0 ? _a : 'var(--vis-graph-link-stroke-color)';
+    return c || null;
+}
+function getMarker(d, scale, config) {
+    const { linkArrow } = config;
+    if ((scale > ZoomLevel.Level2) && getString(d, linkArrow, d._indexGlobal)) {
+        const color = getLinkColor(d, config);
+        return `url(#${stringToHtmlId(color)}-${getValue(d, linkArrow, d._indexGlobal)})`;
+    }
+    else {
+        return null;
+    }
+}
+function getArrowPath() {
+    return `M0,0 V${LINK_MARKER_HEIGHT} L${LINK_MARKER_WIDTH},${LINK_MARKER_HEIGHT / 2} Z`;
+}
+function getDoubleArrowPath() {
+    return `M0,${LINK_MARKER_HEIGHT / 2} L${LINK_MARKER_WIDTH},0 L${LINK_MARKER_WIDTH * 2},${LINK_MARKER_HEIGHT / 2} L${LINK_MARKER_WIDTH},${LINK_MARKER_HEIGHT} Z`;
+}
+function getLinkLabelTextColor(label) {
+    if (!label.color)
+        return null;
+    const hex = color(label.color).hex();
+    const brightness = hexToBrightness(hex);
+    return brightness > 0.65 ? 'var(--vis-graph-link-label-text-color-dark)' : 'var(--vis-graph-link-label-text-color-bright)';
+}
+
+export { LINK_LABEL_RADIUS, LINK_MARKER_HEIGHT, LINK_MARKER_WIDTH, getArrowPath, getDoubleArrowPath, getLinkBandWidth, getLinkColor, getLinkLabelShift, getLinkLabelTextColor, getLinkShift, getLinkShiftTransform, getLinkStrokeWidth, getMarker, getPolylineData };
+//# sourceMappingURL=helper.js.map

package/components/graph/modules/link/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../../src/components/graph/modules/link/helper.ts"],"sourcesContent":["// Utils\nimport { getNumber, getString, getValue } from 'utils/data'\nimport { stringToHtmlId } from 'utils/misc'\nimport { getColor, hexToBrightness } from 'utils/color'\nimport { color } from 'd3-color'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Local Types\nimport { GraphLink, GraphLinkArrowStyle, GraphCircleLabel } from '../../types'\n\n// Config\nimport { GraphConfig } from '../../config'\n\n// Helpers\nimport { getX, getY } from '../node/helper'\nimport { ZoomLevel } from '../zoom-levels'\n\nexport const getPolylineData = (d: { x1: number; x2: number; y1: number; y2: number}): string => `${d.x1},${d.y1} ${(d.x1 + d.x2) / 2},${(d.y1 + d.y2) / 2} ${d.x2},${d.y2}`\n\nexport const LINK_LABEL_RADIUS = 8\nexport const LINK_MARKER_WIDTH = 12\nexport const LINK_MARKER_HEIGHT = 8\n\nexport function getLinkShift (link: GraphLink, spacing: number): { dx: number; dy: number } {\n  const sourceNode = link.source\n  const targetNode = link.target\n  const angle = Math.atan2(getY(targetNode) - getY(sourceNode), getX(targetNode) - getX(sourceNode)) - Math.PI / 2\n  const dx = Math.cos(angle) * spacing * link._direction * (link._index - (link._neighbours - 1) / 2)\n  const dy = Math.sin(angle) * spacing * link._direction * (link._index - (link._neighbours - 1) / 2)\n  return { dx, dy }\n}\n\nexport function getLinkShiftTransform (link: GraphLink, spacing: number): string {\n  const { dx, dy } = getLinkShift(link, spacing)\n  return `translate(${dx}, ${dy})`\n}\n\nexport function getLinkLabelShift (link: GraphLink, linkSpacing: number, shiftFromCenter = 0): string {\n  const x1 = getX(link.source)\n  const y1 = getY(link.source)\n  const x2 = getX(link.target)\n  const y2 = getY(link.target)\n  const angle = Math.atan2(y2 - y1, x2 - x1)\n  const perpendicularShift = getLinkShift(link, linkSpacing)\n\n  const x = x1 + 0.5 * (x2 - x1) + shiftFromCenter * Math.cos(angle) + perpendicularShift.dx\n  const y = y1 + 0.5 * (y2 - y1) + shiftFromCenter * Math.sin(angle) + perpendicularShift.dy\n  return `translate(${x}, ${y})`\n}\n\nexport function getLinkStrokeWidth (d: GraphLink, scale: number, config: GraphConfig<GraphInputNode, GraphInputLink>): number {\n  const m = getNumber(d, config.linkWidth, d._indexGlobal)\n  return m / Math.pow(scale, 0.5)\n}\n\nexport function getLinkBandWidth (d: GraphLink, scale: number, config: GraphConfig<GraphInputNode, GraphInputLink>): number {\n  const { nodeSize, linkBandWidth } = config\n  const sourceNodeSize = getNumber(d.source, nodeSize, d.source._index)\n  const targetNodeSize = getNumber(d.target, nodeSize, d.target._index)\n  const minNodeSize = Math.min(sourceNodeSize, targetNodeSize)\n  return Math.min(minNodeSize, getNumber(d, linkBandWidth, d._indexGlobal) / Math.pow(scale || 1, 0.5)) || 0\n}\n\nexport function getLinkColor (link: GraphLink, config: GraphConfig<GraphInputNode, GraphInputLink>): string {\n  const { linkStroke } = config\n  const c = getColor(link, linkStroke, link._indexGlobal, true) ?? 'var(--vis-graph-link-stroke-color)'\n  return c || null\n}\n\nexport function getMarker (d: GraphLink, scale: number, config: GraphConfig<GraphInputNode, GraphInputLink>): string {\n  const { linkArrow } = config\n  if ((scale > ZoomLevel.Level2) && getString(d, linkArrow, d._indexGlobal)) {\n    const color = getLinkColor(d, config)\n    return `url(#${stringToHtmlId(color)}-${getValue<GraphLink, GraphLinkArrowStyle>(d, linkArrow, d._indexGlobal)})`\n  } else {\n    return null\n  }\n}\n\nexport function getArrowPath (): string {\n  return `M0,0 V${LINK_MARKER_HEIGHT} L${LINK_MARKER_WIDTH},${LINK_MARKER_HEIGHT / 2} Z`\n}\n\nexport function getDoubleArrowPath (): string {\n  return `M0,${LINK_MARKER_HEIGHT / 2} L${LINK_MARKER_WIDTH},0 L${LINK_MARKER_WIDTH * 2},${LINK_MARKER_HEIGHT / 2} L${LINK_MARKER_WIDTH},${LINK_MARKER_HEIGHT} Z`\n}\n\nexport function getLinkLabelTextColor (label: GraphCircleLabel): string {\n  if (!label.color) return null\n\n  const hex = color(label.color).hex()\n  const brightness = hexToBrightness(hex)\n  return brightness > 0.65 ? 'var(--vis-graph-link-label-text-color-dark)' : 'var(--vis-graph-link-label-text-color-bright)'\n}\n"],"names":[],"mappings":"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"}

package/components/graph/modules/link/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="lodash" />
+import { Selection } from 'd3-selection';
+import { GraphInputLink, GraphInputNode } from "../../../../types/graph";
+import { GraphLink } from '../../types';
+import { GraphConfig } from '../../config';
+export declare function createLinks<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>): void;
+export declare function updateSelectedLinks<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>, config: GraphConfig<N, L>, scale: number): void;
+export declare function updateLinks<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>, config: GraphConfig<N, L>, duration: number, scale?: number): void;
+export declare function removeLinks<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>, config: GraphConfig<N, L>, duration: number): void;
+export declare function animateLinkFlow<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>, config: GraphConfig<N, L>, scale: number): void;
+export declare function zoomLinks<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>, config: GraphConfig<N, L>, scale: number): void;
+export declare const zoomLinksThrottled: import("lodash").DebouncedFunc<typeof zoomLinks>;

package/components/graph/modules/link/index.js

@@ -0,0 +1,201 @@
+import { select } from 'd3-selection';
+import { throttle, range, getBoolean, getValue } from '../../../../utils/data.js';
+import { smartTransition } from '../../../../utils/d3.js';
+import { GraphLinkStyle } from '../../types.js';
+import { getX, getY } from '../node/helper.js';
+import { getMarker, getLinkStrokeWidth, getLinkBandWidth, getLinkColor, getLinkShiftTransform, getPolylineData, LINK_MARKER_WIDTH, getLinkLabelShift, LINK_LABEL_RADIUS, getLinkLabelTextColor } from './helper.js';
+import { ZoomLevel } from '../zoom-levels.js';
+import { zoomOutLevel2 } from '../../style.js';
+import { flowCircle, link, linkBand, linkSupport, flowGroup, labelGroups, greyout, linkDashed, labelGroup, labelCircle, labelContent } from './style.js';
+
+function createLinks(selection) {
+    selection.attr('opacity', 0);
+    selection.append('line')
+        .attr('class', linkSupport);
+    selection.append('polyline')
+        .attr('class', link);
+    selection.append('line')
+        .attr('class', linkBand)
+        .attr('x1', d => getX(d.source))
+        .attr('y1', d => getY(d.source))
+        .attr('x2', d => getX(d.target))
+        .attr('y2', d => getY(d.target));
+    selection.append('g')
+        .attr('class', flowGroup)
+        .selectAll(`.${flowCircle}`)
+        .data(range(6)).enter()
+        .append('circle')
+        .attr('class', flowCircle);
+    selection.append('g')
+        .attr('class', labelGroups);
+}
+function updateSelectedLinks(selection, config, scale) {
+    const isGreyedOut = (d, i) => getBoolean(d, config.linkDisabled, i) || d._state.greyout;
+    selection
+        .classed(greyout, (d, i) => isGreyedOut(d, i));
+    selection.each((d, i, elements) => {
+        const element = elements[i];
+        const group = select(element);
+        group.select(`.${link}`);
+        group.select(`.${linkBand}`);
+        const linkSupport$1 = group.select(`.${linkSupport}`);
+        linkSupport$1
+            .style('stroke-opacity', (d._state.hovered || d._state.selected) ? 0.2 : 0)
+            .style('stroke-width', d._state.selected
+            ? getLinkBandWidth(d, scale, config) + 5
+            : d._state.hovered ? getLinkBandWidth(d, scale, config) + 10 : null);
+    });
+}
+function updateLinks(selection, config, duration, scale = 1) {
+    const { linkFlowParticleSize, linkStyle, linkFlow, linkArrow, linkLabel, linkLabelShiftFromCenter } = config;
+    if (!selection.size())
+        return;
+    selection
+        .classed(linkDashed, d => getValue(d, linkStyle, d._indexGlobal) === GraphLinkStyle.Dashed);
+    selection.each((d, i, elements) => {
+        const element = elements[i];
+        const linkGroup = select(element);
+        const link$1 = linkGroup.select(`.${link}`);
+        const linkBand$1 = linkGroup.select(`.${linkBand}`);
+        const linkSupport$1 = linkGroup.select(`.${linkSupport}`);
+        const flowGroup$1 = linkGroup.select(`.${flowGroup}`);
+        const x1 = getX(d.source);
+        const y1 = getY(d.source);
+        const x2 = getX(d.target);
+        const y2 = getY(d.target);
+        link$1
+            .attr('class', link)
+            .attr('marker-mid', getMarker(d, scale, config))
+            .style('stroke-width', getLinkStrokeWidth(d, scale, config))
+            .style('stroke', getLinkColor(d, config))
+            .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing));
+        smartTransition(link$1, duration)
+            .attr('points', getPolylineData({ x1, y1, x2, y2 }));
+        linkBand$1
+            .attr('class', linkBand)
+            .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+            .style('stroke-width', getLinkBandWidth(d, scale, config))
+            .style('stroke', getLinkColor(d, config));
+        smartTransition(linkBand$1, duration)
+            .attr('x1', x1)
+            .attr('y1', y1)
+            .attr('x2', x2)
+            .attr('y2', y2);
+        linkSupport$1
+            .style('stroke', getLinkColor(d, config))
+            .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+            .attr('x1', x1)
+            .attr('y1', y1)
+            .attr('x2', x2)
+            .attr('y2', y2);
+        flowGroup$1
+            .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+            .style('display', getBoolean(d, linkFlow, d._indexGlobal) ? null : 'none')
+            .style('opacity', 0);
+        flowGroup$1
+            .selectAll(`.${flowCircle}`)
+            .attr('r', linkFlowParticleSize / scale)
+            .style('fill', getLinkColor(d, config));
+        smartTransition(flowGroup$1, duration)
+            .style('opacity', scale < ZoomLevel.Level2 ? 0 : 1);
+        // Labels
+        const labelGroups$1 = linkGroup.selectAll(`.${labelGroups}`);
+        const labelDatum = getValue(d, linkLabel, d._indexGlobal);
+        const markerWidth = getValue(d, linkArrow, d._indexGlobal) ? LINK_MARKER_WIDTH * 2 : 0;
+        const labelShift = getBoolean(d, linkLabelShiftFromCenter, d._indexGlobal) ? -markerWidth + 4 : 0;
+        const labelTranslate = getLinkLabelShift(d, config.linkNeighborSpacing, labelShift);
+        const labels = labelGroups$1.selectAll(`.${labelGroup}`).data(labelDatum ? [labelDatum] : []);
+        // Enter
+        const labelsEnter = labels.enter().append('g')
+            .attr('class', labelGroup)
+            .attr('transform', labelTranslate)
+            .style('opacity', 0);
+        labelsEnter.append('circle')
+            .attr('class', labelCircle)
+            .attr('r', 0);
+        labelsEnter.append('text')
+            .attr('class', labelContent)
+            .attr('dy', 1);
+        // Update
+        const labelsUpdate = labels.merge(labelsEnter);
+        smartTransition(labelsUpdate.select(`.${labelCircle}`), duration)
+            .attr('r', LINK_LABEL_RADIUS)
+            .style('fill', label => label.color);
+        labelsUpdate.select(`.${labelContent}`)
+            .text(label => label.text)
+            .style('fill', label => getLinkLabelTextColor(label))
+            .style('font-size', label => `${10 / Math.pow(label.text.toString().length, 0.3)}px`);
+        smartTransition(labelsUpdate, duration)
+            .attr('transform', labelTranslate)
+            .style('opacity', 1);
+        // Exit
+        const labelsExit = labels.exit();
+        smartTransition(labelsExit.select(`.${labelCircle}`), duration)
+            .attr('r', 0);
+        smartTransition(labelsExit, duration)
+            .style('opacity', 0)
+            .remove();
+    });
+    if (duration > 0) {
+        selection.attr('pointer-events', 'none');
+        const t = smartTransition(selection, duration);
+        t
+            .attr('opacity', 1)
+            .on('end interrupt', (d, i, elements) => {
+            select(elements[i])
+                .attr('pointer-events', 'stroke')
+                .attr('opacity', 1);
+        });
+    }
+    else {
+        selection.attr('opacity', 1);
+    }
+    updateSelectedLinks(selection, config, scale);
+}
+function removeLinks(selection, config, duration) {
+    smartTransition(selection, duration / 2)
+        .attr('opacity', 0)
+        .remove();
+}
+function animateLinkFlow(selection, config, scale) {
+    const { linkFlow } = config;
+    if (scale < ZoomLevel.Level2)
+        return;
+    selection.each((d, i, elements) => {
+        const element = elements[i];
+        const linkGroup = select(element);
+        const flowGroup$1 = linkGroup.select(`.${flowGroup}`);
+        if (!getBoolean(d, linkFlow, d._indexGlobal))
+            return;
+        const t = d._state.flowAnimTime;
+        const circles = flowGroup$1.selectAll(`.${flowCircle}`);
+        circles
+            .attr('transform', index => {
+            const tt = (t + (+index) / (circles.size() - 1)) % 1;
+            const x1 = getX(d.source);
+            const y1 = getY(d.source);
+            const x2 = getX(d.target);
+            const y2 = getY(d.target);
+            const x = x1 + tt * (x2 - x1);
+            const y = y1 + tt * (y2 - y1);
+            return `translate(${x}, ${y})`;
+        });
+    });
+}
+function zoomLinks(selection, config, scale) {
+    const { linkFlowParticleSize } = config;
+    selection.classed(zoomOutLevel2, scale < ZoomLevel.Level2);
+    selection.selectAll(`.${flowCircle}`)
+        .attr('r', linkFlowParticleSize / scale);
+    const linkElements = selection.selectAll(`.${link}`);
+    linkElements
+        .attr('marker-mid', d => getMarker(d, scale, config))
+        .style('stroke-width', d => getLinkStrokeWidth(d, scale, config));
+    const linkBandElements = selection.selectAll(`.${linkBand}`);
+    linkBandElements
+        .style('stroke-width', d => getLinkBandWidth(d, scale, config));
+}
+const zoomLinksThrottled = throttle(zoomLinks, 500);
+
+export { animateLinkFlow, createLinks, removeLinks, updateLinks, updateSelectedLinks, zoomLinks, zoomLinksThrottled };
+//# sourceMappingURL=index.js.map

package/components/graph/modules/link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/graph/modules/link/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\n\n// Utils\nimport { range, throttle, getValue, getBoolean } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Local Types\nimport { GraphCircleLabel, GraphLink, GraphLinkArrowStyle, GraphLinkStyle } from '../../types'\n\n// Config\nimport { GraphConfig } from '../../config'\n\n// Helpers\nimport { getX, getY } from '../node/helper'\nimport {\n  getPolylineData,\n  getLinkShiftTransform,\n  getLinkLabelShift,\n  getLinkStrokeWidth,\n  getLinkBandWidth,\n  getMarker,\n  getLinkColor,\n  getLinkLabelTextColor,\n  LINK_LABEL_RADIUS,\n  LINK_MARKER_WIDTH,\n} from './helper'\nimport { ZoomLevel } from '../zoom-levels'\n\n// Styles\nimport * as generalSelectors from '../../style'\nimport * as linkSelectors from './style'\n\nexport function createLinks<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>\n): void {\n  selection.attr('opacity', 0)\n\n  selection.append('line')\n    .attr('class', linkSelectors.linkSupport)\n\n  selection.append('polyline')\n    .attr('class', linkSelectors.link)\n\n  selection.append('line')\n    .attr('class', linkSelectors.linkBand)\n    .attr('x1', d => getX(d.source))\n    .attr('y1', d => getY(d.source))\n    .attr('x2', d => getX(d.target))\n    .attr('y2', d => getY(d.target))\n\n  selection.append('g')\n    .attr('class', linkSelectors.flowGroup)\n    .selectAll(`.${linkSelectors.flowCircle}`)\n    .data(range(6)).enter()\n    .append('circle')\n    .attr('class', linkSelectors.flowCircle)\n\n  selection.append('g')\n    .attr('class', linkSelectors.labelGroups)\n}\n\nexport function updateSelectedLinks<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>,\n  config: GraphConfig<N, L>,\n  scale: number\n): void {\n  const isGreyedOut = (d, i): boolean => getBoolean(d, config.linkDisabled, i) || d._state.greyout\n  selection\n    .classed(linkSelectors.greyout, (d, i) => isGreyedOut(d, i))\n\n  selection.each((d, i, elements) => {\n    const element = elements[i]\n    const group = select(element)\n    group.select(`.${linkSelectors.link}`)\n    group.select(`.${linkSelectors.linkBand}`)\n    const linkSupport = group.select(`.${linkSelectors.linkSupport}`)\n\n    linkSupport\n      .style('stroke-opacity', (d._state.hovered || d._state.selected) ? 0.2 : 0)\n      .style('stroke-width',\n        d._state.selected\n          ? getLinkBandWidth(d, scale, config) + 5\n          : d._state.hovered ? getLinkBandWidth(d, scale, config) + 10 : null\n      )\n  })\n}\n\nexport function updateLinks<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>,\n  config: GraphConfig<N, L>,\n  duration: number,\n  scale = 1\n): void {\n  const { linkFlowParticleSize, linkStyle, linkFlow, linkArrow, linkLabel, linkLabelShiftFromCenter } = config\n  if (!selection.size()) return\n\n  selection\n    .classed(\n      linkSelectors.linkDashed,\n      d => getValue<GraphLink<N, L>, GraphLinkStyle>(d, linkStyle, d._indexGlobal) === GraphLinkStyle.Dashed\n    )\n\n  selection.each((d, i, elements) => {\n    const element = elements[i]\n    const linkGroup = select(element)\n    const link = linkGroup.select(`.${linkSelectors.link}`)\n    const linkBand = linkGroup.select(`.${linkSelectors.linkBand}`)\n    const linkSupport = linkGroup.select(`.${linkSelectors.linkSupport}`)\n    const flowGroup = linkGroup.select(`.${linkSelectors.flowGroup}`)\n\n    const x1 = getX(d.source)\n    const y1 = getY(d.source)\n    const x2 = getX(d.target)\n    const y2 = getY(d.target)\n\n    link\n      .attr('class', linkSelectors.link)\n      .attr('marker-mid', getMarker(d, scale, config))\n      .style('stroke-width', getLinkStrokeWidth(d, scale, config))\n      .style('stroke', getLinkColor(d, config))\n      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))\n\n    smartTransition(link, duration)\n      .attr('points', getPolylineData({ x1, y1, x2, y2 }))\n\n    linkBand\n      .attr('class', linkSelectors.linkBand)\n      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))\n      .style('stroke-width', getLinkBandWidth(d, scale, config))\n      .style('stroke', getLinkColor(d, config))\n\n    smartTransition(linkBand, duration)\n      .attr('x1', x1)\n      .attr('y1', y1)\n      .attr('x2', x2)\n      .attr('y2', y2)\n\n    linkSupport\n      .style('stroke', getLinkColor(d, config))\n      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))\n      .attr('x1', x1)\n      .attr('y1', y1)\n      .attr('x2', x2)\n      .attr('y2', y2)\n\n    flowGroup\n      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))\n      .style('display', getBoolean(d, linkFlow, d._indexGlobal) ? null : 'none')\n      .style('opacity', 0)\n\n    flowGroup\n      .selectAll(`.${linkSelectors.flowCircle}`)\n      .attr('r', linkFlowParticleSize / scale)\n      .style('fill', getLinkColor(d, config))\n\n    smartTransition(flowGroup, duration)\n      .style('opacity', scale < ZoomLevel.Level2 ? 0 : 1)\n\n    // Labels\n    const labelGroups = linkGroup.selectAll(`.${linkSelectors.labelGroups}`)\n    const labelDatum = getValue<GraphLink<N, L>, GraphCircleLabel>(d, linkLabel, d._indexGlobal)\n    const markerWidth = getValue<GraphLink<N, L>, GraphLinkArrowStyle>(d, linkArrow, d._indexGlobal) ? LINK_MARKER_WIDTH * 2 : 0\n    const labelShift = getBoolean(d, linkLabelShiftFromCenter, d._indexGlobal) ? -markerWidth + 4 : 0\n    const labelTranslate = getLinkLabelShift(d, config.linkNeighborSpacing, labelShift)\n\n    const labels = labelGroups.selectAll(`.${linkSelectors.labelGroup}`).data(labelDatum ? [labelDatum] : [])\n\n    // Enter\n    const labelsEnter = labels.enter().append('g')\n      .attr('class', linkSelectors.labelGroup)\n      .attr('transform', labelTranslate)\n      .style('opacity', 0)\n\n    labelsEnter.append('circle')\n      .attr('class', linkSelectors.labelCircle)\n      .attr('r', 0)\n\n    labelsEnter.append('text')\n      .attr('class', linkSelectors.labelContent)\n      .attr('dy', 1)\n\n    // Update\n    const labelsUpdate = labels.merge(labelsEnter)\n\n    smartTransition(labelsUpdate.select(`.${linkSelectors.labelCircle}`), duration)\n      .attr('r', LINK_LABEL_RADIUS)\n      .style('fill', label => label.color)\n\n    labelsUpdate.select(`.${linkSelectors.labelContent}`)\n      .text(label => label.text)\n      .style('fill', label => getLinkLabelTextColor(label))\n      .style('font-size', label => `${10 / Math.pow(label.text.toString().length, 0.3)}px`)\n\n    smartTransition(labelsUpdate, duration)\n      .attr('transform', labelTranslate)\n      .style('opacity', 1)\n\n    // Exit\n    const labelsExit = labels.exit()\n    smartTransition(labelsExit.select(`.${linkSelectors.labelCircle}`), duration)\n      .attr('r', 0)\n\n    smartTransition(labelsExit, duration)\n      .style('opacity', 0)\n      .remove()\n  })\n\n  if (duration > 0) {\n    selection.attr('pointer-events', 'none')\n    const t = smartTransition(selection, duration) as Transition<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>\n    t\n      .attr('opacity', 1)\n      .on('end interrupt', (d, i, elements) => {\n        select(elements[i])\n          .attr('pointer-events', 'stroke')\n          .attr('opacity', 1)\n      })\n  } else {\n    selection.attr('opacity', 1)\n  }\n\n  updateSelectedLinks(selection, config, scale)\n}\n\nexport function removeLinks<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>,\n  config: GraphConfig<N, L>,\n  duration: number\n): void {\n  smartTransition(selection, duration / 2)\n    .attr('opacity', 0)\n    .remove()\n}\n\nexport function animateLinkFlow<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>,\n  config: GraphConfig<N, L>,\n  scale: number\n): void {\n  const { linkFlow } = config\n  if (scale < ZoomLevel.Level2) return\n\n  selection.each((d, i, elements) => {\n    const element = elements[i]\n    const linkGroup = select(element)\n    const flowGroup = linkGroup.select(`.${linkSelectors.flowGroup}`)\n\n    if (!getBoolean(d, linkFlow, d._indexGlobal)) return\n    const t = d._state.flowAnimTime\n    const circles = flowGroup.selectAll(`.${linkSelectors.flowCircle}`)\n\n    circles\n      .attr('transform', index => {\n        const tt = (t + (+index) / (circles.size() - 1)) % 1\n        const x1 = getX(d.source)\n        const y1 = getY(d.source)\n        const x2 = getX(d.target)\n        const y2 = getY(d.target)\n\n        const x = x1 + tt * (x2 - x1)\n        const y = y1 + tt * (y2 - y1)\n        return `translate(${x}, ${y})`\n      })\n  })\n}\n\nexport function zoomLinks<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>,\n  config: GraphConfig<N, L>,\n  scale: number\n): void {\n  const { linkFlowParticleSize } = config\n\n  selection.classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)\n  selection.selectAll(`.${linkSelectors.flowCircle}`)\n    .attr('r', linkFlowParticleSize / scale)\n\n  const linkElements = selection.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.link}`)\n  linkElements\n    .attr('marker-mid', d => getMarker(d, scale, config))\n    .style('stroke-width', d => getLinkStrokeWidth(d, scale, config))\n\n  const linkBandElements = selection.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.linkBand}`)\n  linkBandElements\n    .style('stroke-width', d => getLinkBandWidth(d, scale, config))\n}\n\nexport const zoomLinksThrottled = throttle(zoomLinks, 500)\n"],"names":["linkSelectors.linkSupport","linkSelectors.link","linkSelectors.linkBand","linkSelectors.flowGroup","linkSelectors.flowCircle","linkSelectors.labelGroups","linkSelectors.greyout","linkSupport","linkSelectors.linkDashed","link","linkBand","flowGroup","labelGroups","linkSelectors.labelGroup","linkSelectors.labelCircle","linkSelectors.labelContent","generalSelectors.zoomOutLevel2"],"mappings":"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"}

package/components/graph/modules/link/style.d.ts

@@ -0,0 +1,15 @@
+export declare const links: string;
+export declare const variables: void;
+export declare const linkSupport: string;
+export declare const link: string;
+export declare const linkDashed: string;
+export declare const gLink: string;
+export declare const gLinkExit: string;
+export declare const greyout: string;
+export declare const linkBand: string;
+export declare const flowGroup: string;
+export declare const flowCircle: string;
+export declare const labelGroups: string;
+export declare const labelGroup: string;
+export declare const labelCircle: string;
+export declare const labelContent: string;

package/components/graph/modules/link/style.js

@@ -0,0 +1,112 @@
+import { css, injectGlobal } from '@emotion/css';
+
+const links = css `
+  label: links;
+`;
+injectGlobal `
+  :root {
+    --vis-graph-link-stroke-color: #e6e9f3;
+    --vis-graph-link-greyout-opacity: 0.3;
+    --vis-graph-link-dashed-stroke-dasharray: 6 6;
+
+    --vis-graph-link-label-stroke-color: #fff;
+    --vis-graph-link-label-fill-color: #e6e9f3;
+    --vis-graph-link-label-text-color-dark: #494b56;
+    --vis-graph-link-label-text-color-bright: #fff;
+    --vis-graph-link-label-text-color: var(--vis-graph-link-label-text-color-dark);
+
+    --vis-graph-link-band-opacity: 0.35;
+    --vis-graph-link-support-stroke-width: 10px;
+
+    --vis-dark-graph-link-stroke-color: #494b56;
+    --vis-dark-graph-link-label-stroke-color: #222;
+    --vis-dark-graph-link-label-fill-color: var(--vis-color-gray);
+    --vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright)
+  }
+
+  body.theme-dark ${`.${links}`} {
+    --vis-graph-link-stroke-color: var(--vis-dark-graph-link-stroke-color);
+    --vis-graph-link-label-stroke-color: var(--vis-dark-graph-link-label-stroke-color);
+    --vis-graph-link-label-text-color: var(--vis-dark-graph-link-label-text-color);
+    --vis-graph-link-label-fill-color: var(--vis-dark-graph-link-label-fill-color);
+  }
+`;
+const linkSupport = css `
+  label: link-support;
+
+  fill: none;
+  stroke-linecap: round;
+  pointer-events: stroke;
+  stroke-width: var(--vis-graph-link-support-stroke-width);
+  stroke-opacity: 0;
+  stroke: var(--vis-graph-link-stroke-color);
+  transition: .2s;
+`;
+const link = css `
+  label: link;
+
+  fill: none;
+  stroke: var(--vis-graph-link-stroke-color);
+  transition: stroke 800ms;
+  stroke-linecap: round;
+  pointer-events: none;
+`;
+const linkDashed = css `
+  label: dashed;
+
+  ${`.${link}`} {
+    stroke-dasharray: var(--vis-graph-link-dashed-stroke-dasharray);
+  }
+`;
+const gLink = css `
+  label: g-link;
+`;
+const gLinkExit = css `
+  label: g-link-exit;
+  pointer-events: none;
+`;
+const greyout = css `
+  label: greyout;
+  opacity: var(--vis-graph-link-greyout-opacity);
+`;
+const linkBand = css `
+  label: link-band;
+
+  stroke-opacity: var(--vis-graph-link-band-opacity);
+  pointer-events: none;
+  stroke: var(--vis-graph-node-stroke-color);
+`;
+const flowGroup = css `
+  label: flow-group;
+
+  pointer-events: none;
+`;
+const flowCircle = css `
+  label: flow-circle;
+
+  fill: var(--vis-graph-link-stroke-color);
+`;
+const labelGroups = css `
+  label: label-groups;
+`;
+const labelGroup = css `
+  label: label-group;
+  pointer-events: none;
+`;
+const labelCircle = css `
+  label: label-circle;
+
+  fill: var(--vis-graph-link-label-fill-color);
+  stroke: var(--vis-graph-link-label-stroke-color);
+`;
+const labelContent = css `
+  label: label-content;
+
+  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);
+  fill: var(--vis-graph-link-label-text-color);
+  text-anchor: middle;
+  dominant-baseline: middle;
+`;
+
+export { flowCircle, flowGroup, gLink, gLinkExit, greyout, labelCircle, labelContent, labelGroup, labelGroups, link, linkBand, linkDashed, linkSupport, links };
+//# sourceMappingURL=style.js.map

package/components/graph/modules/link/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/link/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const links = css`\n  label: links;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-link-stroke-color: #e6e9f3;\n    --vis-graph-link-greyout-opacity: 0.3;\n    --vis-graph-link-dashed-stroke-dasharray: 6 6;\n\n    --vis-graph-link-label-stroke-color: #fff;\n    --vis-graph-link-label-fill-color: #e6e9f3;\n    --vis-graph-link-label-text-color-dark: #494b56;\n    --vis-graph-link-label-text-color-bright: #fff;\n    --vis-graph-link-label-text-color: var(--vis-graph-link-label-text-color-dark);\n\n    --vis-graph-link-band-opacity: 0.35;\n    --vis-graph-link-support-stroke-width: 10px;\n\n    --vis-dark-graph-link-stroke-color: #494b56;\n    --vis-dark-graph-link-label-stroke-color: #222;\n    --vis-dark-graph-link-label-fill-color: var(--vis-color-gray);\n    --vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright)\n  }\n\n  body.theme-dark ${`.${links}`} {\n    --vis-graph-link-stroke-color: var(--vis-dark-graph-link-stroke-color);\n    --vis-graph-link-label-stroke-color: var(--vis-dark-graph-link-label-stroke-color);\n    --vis-graph-link-label-text-color: var(--vis-dark-graph-link-label-text-color);\n    --vis-graph-link-label-fill-color: var(--vis-dark-graph-link-label-fill-color);\n  }\n`\n\nexport const linkSupport = css`\n  label: link-support;\n\n  fill: none;\n  stroke-linecap: round;\n  pointer-events: stroke;\n  stroke-width: var(--vis-graph-link-support-stroke-width);\n  stroke-opacity: 0;\n  stroke: var(--vis-graph-link-stroke-color);\n  transition: .2s;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: none;\n  stroke: var(--vis-graph-link-stroke-color);\n  transition: stroke 800ms;\n  stroke-linecap: round;\n  pointer-events: none;\n`\n\nexport const linkDashed = css`\n  label: dashed;\n\n  ${`.${link}`} {\n    stroke-dasharray: var(--vis-graph-link-dashed-stroke-dasharray);\n  }\n`\n\nexport const gLink = css`\n  label: g-link;\n`\n\nexport const gLinkExit = css`\n  label: g-link-exit;\n  pointer-events: none;\n`\n\nexport const greyout = css`\n  label: greyout;\n  opacity: var(--vis-graph-link-greyout-opacity);\n`\n\nexport const linkBand = css`\n  label: link-band;\n\n  stroke-opacity: var(--vis-graph-link-band-opacity);\n  pointer-events: none;\n  stroke: var(--vis-graph-node-stroke-color);\n`\n\nexport const flowGroup = css`\n  label: flow-group;\n\n  pointer-events: none;\n`\n\nexport const flowCircle = css`\n  label: flow-circle;\n\n  fill: var(--vis-graph-link-stroke-color);\n`\n\nexport const labelGroups = css`\n  label: label-groups;\n`\n\nexport const labelGroup = css`\n  label: label-group;\n  pointer-events: none;\n`\n\nexport const labelCircle = css`\n  label: label-circle;\n\n  fill: var(--vis-graph-link-label-fill-color);\n  stroke: var(--vis-graph-link-label-stroke-color);\n`\n\nexport const labelContent = css`\n  label: label-content;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  fill: var(--vis-graph-link-label-text-color);\n  text-anchor: middle;\n  dominant-baseline: middle;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEwB,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AAqBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;EAM9B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAU7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;AAGzB,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAGb;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;EAGzB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;EAM1B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;EAI3B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;"}

package/components/graph/modules/node/helper.d.ts

@@ -0,0 +1,21 @@
+import { Selection, BaseType } from 'd3-selection';
+import { Arc } from 'd3-shape';
+import { ColorAccessor, NumericAccessor } from "../../../../types/accessor";
+import { GraphInputLink, GraphInputNode } from "../../../../types/graph";
+import { GraphNode, GraphCircleLabel, GraphNodeAnimatedElement, GraphNodeAnimationState } from '../../types';
+import { GraphConfigInterface } from '../../config';
+export declare const NODE_SIZE = 30;
+export declare const LABEL_RECT_HORIZONTAL_PADDING = 10;
+export declare const LABEL_RECT_VERTICAL_PADDING = 4;
+export declare function getNodeSize<T>(d: T, nodeSizeAccessor: NumericAccessor<T>, index: number): number;
+export declare function arcTween<N extends GraphInputNode, L extends GraphInputLink>(d: GraphNode<N, L>, config: GraphConfigInterface<N, L>, arcConstructor: Arc<any, GraphNodeAnimationState>, el: GraphNodeAnimatedElement<SVGElement>): (t: number) => string;
+export declare function polyTween<N extends GraphInputNode, L extends GraphInputLink>(d: GraphNode<N, L>, config: GraphConfigInterface<N, L>, polygonConstructor: any, el: GraphNodeAnimatedElement<SVGElement>): (t: number) => string;
+export declare function setLabelRect<A>(labelSelection: Selection<BaseType, A, SVGGElement, A>, label: string, selector: string): Selection<BaseType, A, SVGGElement, A>;
+export declare function getX(node: GraphNode): number;
+export declare function getY(node: GraphNode): number;
+export declare function configuredNodeSize<T>(nodeSizeAccessor: NumericAccessor<T>): number;
+export declare function getMaxNodeSize<T>(data: T[], nodeSize: NumericAccessor<T>): number;
+export declare function getAverageNodeSize<T>(data: T[], nodeSize: NumericAccessor<T>): number;
+export declare function getSideLabelTextColor(label: GraphCircleLabel): string;
+export declare function getNodeColor<T>(d: T, colorAccessor: ColorAccessor<T>, index: number): string;
+export declare function getNodeIconColor<T>(d: T, colorAccessor: ColorAccessor<T>, index: number): string;

package/components/graph/modules/node/helper.js

@@ -0,0 +1,127 @@
+import { interpolate } from 'd3-interpolate';
+import { max, mean } from 'd3-array';
+import { color } from 'd3-color';
+import { scoreRectPath } from '../../../../utils/path.js';
+import { getNumber, isNil, isEmpty, getString } from '../../../../utils/data.js';
+import { getColor, hexToBrightness } from '../../../../utils/color.js';
+import { GraphNodeShape } from '../../types.js';
+
+const NODE_SIZE = 30;
+const LABEL_RECT_HORIZONTAL_PADDING = 10;
+const LABEL_RECT_VERTICAL_PADDING = 4;
+function getNodeSize(d, nodeSizeAccessor, index) {
+    return getNumber(d, nodeSizeAccessor, index) || NODE_SIZE;
+}
+function _setInitialAnimState(el, index) {
+    el._animState = {
+        endAngle: 0,
+        nodeIndex: index,
+    };
+}
+// Animate the arc around node with keeping
+// the current anim state info
+function arcTween(d, config, arcConstructor, el) {
+    var _a;
+    const { nodeStrokeWidth, nodeSize, nodeGaugeValue } = config;
+    if (!el._animState)
+        _setInitialAnimState(el, d._index);
+    const i = interpolate(el._animState, {
+        endAngle: 2 * Math.PI * ((_a = getNumber(d, nodeGaugeValue, d._index)) !== null && _a !== void 0 ? _a : 0) / 100,
+        nodeIndex: d._index,
+        nodeSize: getNodeSize(d, nodeSize, d._index),
+        borderWidth: getNumber(d, nodeStrokeWidth, d._index),
+    });
+    el._animState = i(0);
+    return (t) => {
+        el._animState = i(t);
+        return arcConstructor(el._animState);
+    };
+}
+function polyTween(d, config, polygonConstructor, el) {
+    var _a;
+    const { nodeShape, nodeGaugeValue } = config;
+    const nodeSize = getNodeSize(d, config.nodeSize, d._index);
+    let n;
+    switch (getString(d, nodeShape, d._index)) {
+        case GraphNodeShape.Square:
+            n = 4;
+            break;
+        case GraphNodeShape.Triangle:
+            n = 3;
+            break;
+        case GraphNodeShape.Hexagon:
+        default:
+            n = 6;
+    }
+    if (!el._animState)
+        _setInitialAnimState(el, d._index);
+    const i = interpolate(el._animState, {
+        endAngle: 2 * Math.PI * ((_a = getNumber(d, nodeGaugeValue, d._index)) !== null && _a !== void 0 ? _a : 0) / 100,
+        nodeIndex: d._index,
+    });
+    el._animState = i(0);
+    return (t) => {
+        el._animState = i(t);
+        return n === 4 ? scoreRectPath({
+            x: -nodeSize / 2,
+            y: -nodeSize / 2,
+            w: nodeSize,
+            h: nodeSize,
+            r: 5,
+            score: el._animState.endAngle / (2 * Math.PI),
+        }) : polygonConstructor(nodeSize, n, el._animState.endAngle, true);
+    };
+}
+function setLabelRect(labelSelection, label, selector) {
+    // Set label background rectangle size by text size
+    const labelIsEmpty = isEmpty(label);
+    const labelTextSelection = labelSelection.select(`.${selector}`);
+    const labelTextBBox = labelTextSelection.node().getBBox();
+    const backgroundRect = labelSelection.select('rect')
+        .attr('visibility', labelIsEmpty ? 'hidden' : null)
+        .attr('rx', 4)
+        .attr('ry', 4)
+        .attr('x', -labelTextBBox.width / 2 - LABEL_RECT_HORIZONTAL_PADDING)
+        .attr('y', '-0.64em')
+        .attr('width', labelTextBBox.width + 2 * LABEL_RECT_HORIZONTAL_PADDING)
+        .attr('height', labelTextBBox.height + 2 * LABEL_RECT_VERTICAL_PADDING)
+        .style('transform', `translateY(${-LABEL_RECT_VERTICAL_PADDING}px)`);
+    return backgroundRect;
+}
+function getX(node) {
+    return node._state && !isNil(node._state.fx) ? node._state.fx : node.x;
+}
+function getY(node) {
+    return node._state && !isNil(node._state.fy) ? node._state.fy : node.y;
+}
+function configuredNodeSize(nodeSizeAccessor) {
+    return typeof nodeSizeAccessor === 'number' ? nodeSizeAccessor : NODE_SIZE;
+}
+function getMaxNodeSize(data, nodeSize) {
+    return max(data || [], (d, i) => getNodeSize(d, nodeSize, i)) || NODE_SIZE;
+}
+function getAverageNodeSize(data, nodeSize) {
+    return mean(data || [], (d, i) => getNodeSize(d, nodeSize, i)) || NODE_SIZE;
+}
+function getSideLabelTextColor(label) {
+    if (!label.color)
+        return null;
+    const hex = color(label.color).hex();
+    const brightness = hexToBrightness(hex);
+    return brightness > 0.65 ? 'var(--vis-graph-node-side-label-fill-color-dark)' : 'var(--vis-graph-node-side-label-fill-color-bright)';
+}
+function getNodeColor(d, colorAccessor, index) {
+    var _a;
+    return (_a = getColor(d, colorAccessor, index, true)) !== null && _a !== void 0 ? _a : null;
+}
+function getNodeIconColor(d, colorAccessor, index) {
+    const nodeColor = getNodeColor(d, colorAccessor, index);
+    if (!nodeColor)
+        return null;
+    const hex = color(nodeColor).hex();
+    const brightness = hexToBrightness(hex);
+    return brightness > 0.65 ? 'var(--vis-graph-node-icon-fill-color-dark)' : 'var(--vis-graph-node-icon-fill-color-bright)';
+}
+
+export { LABEL_RECT_HORIZONTAL_PADDING, LABEL_RECT_VERTICAL_PADDING, NODE_SIZE, arcTween, configuredNodeSize, getAverageNodeSize, getMaxNodeSize, getNodeColor, getNodeIconColor, getNodeSize, getSideLabelTextColor, getX, getY, polyTween, setLabelRect };
+//# sourceMappingURL=helper.js.map