@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.9

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

@@ -0,0 +1,111 @@
+import { Position } from '../../../../types/position.js';
+import { isPlainObject, getBoolean } from '../../../../utils/data.js';
+import { getNodeSize, getX, getY } from '../node/helper.js';
+import { node } from '../node/style.js';
+
+const DEFAULT_PADDING = 15;
+const DEFAULT_LABEL_MARGIN = 16;
+const OUTLINE_SELECTION_PADDING = 5;
+const DEFAULT_SIDE_LABEL_SIZE = 25;
+function getPanelPadding(padding) {
+    var _a, _b, _c, _d;
+    const isPaddingAnObject = isPlainObject(padding);
+    return {
+        left: (_a = (isPaddingAnObject ? padding.left : padding)) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
+        right: (_b = (isPaddingAnObject ? padding.right : padding)) !== null && _b !== void 0 ? _b : DEFAULT_PADDING,
+        top: (_c = (isPaddingAnObject ? padding.top : padding)) !== null && _c !== void 0 ? _c : DEFAULT_PADDING,
+        bottom: (_d = (isPaddingAnObject ? padding.bottom : padding)) !== null && _d !== void 0 ? _d : DEFAULT_PADDING,
+    };
+}
+function initPanels(panelsConfig) {
+    const panels = (panelsConfig !== null && panelsConfig !== void 0 ? panelsConfig : []).map(p => (Object.assign(Object.assign({}, p), { _padding: getPanelPadding(p.padding) })));
+    return panels;
+}
+function setPanelForNodes(panels, nodes, config) {
+    if (!panels)
+        return;
+    // For each node store its related panels
+    nodes.forEach(node => {
+        // Find all panels to which node belong
+        const nodePanels = panels.filter(panel => panel.nodes && panel.nodes.includes(node._id));
+        node._panels = nodePanels;
+    });
+}
+function setPanelBBox(panelConfig, panelNodes, nodeSizeAccessor, nodeDisabledAccessor) {
+    const selection = panelNodes.select(`.${node}`);
+    if (selection.empty())
+        return;
+    const labelApprxHeight = 40;
+    const labelApprxWidth = 110;
+    const labelMargin = 10;
+    let box;
+    selection.each((d, i) => {
+        const nodeSize = getNodeSize(d, nodeSizeAccessor, i);
+        const w = Math.max(nodeSize, labelApprxWidth);
+        const h = nodeSize + labelMargin + labelApprxHeight;
+        // const nodeBBox = node.getBBox()
+        const yShift = 10; // This is hard to calculate, so we just use an approximation
+        const coords = {
+            x1: getX(d) - w / 2,
+            y1: getY(d) - h / 2 + yShift,
+            x2: getX(d) + w / 2,
+            y2: getY(d) + h / 2 + yShift,
+        };
+        if (!box) {
+            box = Object.assign({}, coords);
+        }
+        else {
+            if (box.x1 > coords.x1)
+                box.x1 = coords.x1;
+            if (box.y1 > coords.y1)
+                box.y1 = coords.y1;
+            if (box.x2 < coords.x2)
+                box.x2 = coords.x2;
+            if (box.y2 < coords.y2)
+                box.y2 = coords.y2;
+        }
+    });
+    panelConfig._x = box.x1 - panelConfig._padding.left;
+    panelConfig._y = box.y1 - panelConfig._padding.top;
+    panelConfig._width = box.x2 - box.x1 + panelConfig._padding.left + panelConfig._padding.right;
+    panelConfig._height = box.y2 - box.y1 + panelConfig._padding.top + panelConfig._padding.bottom;
+    panelConfig._disabled = selection.data()
+        .map((node, i) => getBoolean(node, nodeDisabledAccessor, node._index) || node._state.greyout)
+        .every(d => d);
+}
+function setPanelNumNodes(panelConfig, panelNodes) {
+    panelConfig._numNodes = panelNodes.size();
+}
+function updatePanelBBoxSize(nodesSelection, panels, config) {
+    const { layoutNonConnectedAside } = config;
+    if (!panels)
+        return;
+    panels.forEach(panelConfig => {
+        const panelNodes = nodesSelection.filter(node => {
+            return (!layoutNonConnectedAside || node._isConnected) && panelConfig.nodes.includes(node._id);
+        });
+        setPanelBBox(panelConfig, panelNodes, config.nodeSize, config.nodeDisabled);
+    });
+}
+function updatePanelNumNodes(nodesSelection, panels, config) {
+    const { layoutNonConnectedAside } = config;
+    if (!panels)
+        return;
+    panels.forEach(panelConfig => {
+        const panelNodes = nodesSelection.filter(node => {
+            return (!layoutNonConnectedAside || node._isConnected) && panelConfig.nodes.includes(node._id);
+        });
+        setPanelNumNodes(panelConfig, panelNodes);
+    });
+}
+function getLabelTranslateTransform(panel) {
+    const x = panel._width / 2;
+    const dy = DEFAULT_LABEL_MARGIN + (panel.dashedOutline ? OUTLINE_SELECTION_PADDING : 0);
+    const y = panel.labelPosition === Position.Bottom
+        ? panel._height + dy
+        : -dy;
+    return `translate(${x}, ${y})`;
+}
+
+export { DEFAULT_LABEL_MARGIN, DEFAULT_PADDING, DEFAULT_SIDE_LABEL_SIZE, OUTLINE_SELECTION_PADDING, getLabelTranslateTransform, getPanelPadding, initPanels, setPanelBBox, setPanelForNodes, setPanelNumNodes, updatePanelBBoxSize, updatePanelNumNodes };
+//# sourceMappingURL=helper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../../src/components/graph/modules/panel/helper.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Types\nimport { NumericAccessor, BooleanAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { Spacing } from 'types/spacing'\n\n// Utils\nimport { getBoolean, isPlainObject } from 'utils/data'\n\n// Local Types\nimport { GraphNode, GraphPanel, GraphPanelConfig } from '../../types'\n\n// Config\nimport { GraphConfig } from '../../config'\n\n// Helpers\nimport { getX, getY, getNodeSize } from '../node/helper'\n\n// Styles\nimport * as nodeSelectors from '../node/style'\n\nexport const DEFAULT_PADDING = 15\nexport const DEFAULT_LABEL_MARGIN = 16\nexport const OUTLINE_SELECTION_PADDING = 5\nexport const DEFAULT_SIDE_LABEL_SIZE = 25\n\nexport function getPanelPadding (padding: number | Spacing | undefined): Spacing {\n  const isPaddingAnObject = isPlainObject(padding)\n  return {\n    left: (isPaddingAnObject ? (padding as Spacing).left : (padding as number)) ?? DEFAULT_PADDING,\n    right: (isPaddingAnObject ? (padding as Spacing).right : (padding as number)) ?? DEFAULT_PADDING,\n    top: (isPaddingAnObject ? (padding as Spacing).top : (padding as number)) ?? DEFAULT_PADDING,\n    bottom: (isPaddingAnObject ? (padding as Spacing).bottom : (padding as number)) ?? DEFAULT_PADDING,\n  }\n}\n\nexport function initPanels (panelsConfig: GraphPanelConfig[] | undefined): GraphPanel[] {\n  const panels = (panelsConfig ?? []).map(p => ({\n    ...p,\n    _padding: getPanelPadding(p.padding),\n  })) as GraphPanel[]\n\n  return panels\n}\n\nexport function setPanelForNodes<N extends GraphInputNode, L extends GraphInputLink> (\n  panels: GraphPanel[],\n  nodes: GraphNode<N, L>[],\n  config: GraphConfig<N, L>\n): void {\n  if (!panels) return\n\n  // For each node store its related panels\n  nodes.forEach(node => {\n    // Find all panels to which node belong\n    const nodePanels = panels.filter(panel => panel.nodes && panel.nodes.includes(node._id))\n    node._panels = nodePanels\n  })\n}\n\nexport function setPanelBBox<N extends GraphInputNode, L extends GraphInputLink> (\n  panelConfig: GraphPanel,\n  panelNodes: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n  nodeSizeAccessor: NumericAccessor<N>,\n  nodeDisabledAccessor: BooleanAccessor<N>\n): void {\n  const selection = panelNodes.select(`.${nodeSelectors.node}`)\n  if (selection.empty()) return\n\n  const labelApprxHeight = 40\n  const labelApprxWidth = 110\n  const labelMargin = 10\n  let box: { x1: number; x2: number; y1: number; y2: number }\n\n  selection.each((d, i) => {\n    const nodeSize = getNodeSize(d, nodeSizeAccessor, i)\n    const w = Math.max(nodeSize, labelApprxWidth)\n    const h = nodeSize + labelMargin + labelApprxHeight\n    // const nodeBBox = node.getBBox()\n    const yShift = 10 // This is hard to calculate, so we just use an approximation\n\n    const coords = {\n      x1: getX(d) - w / 2, // We use d.x and d.y instead of bBox values here because `gBBox` contains initial ...\n      y1: getY(d) - h / 2 + yShift, // ... coordinates (before transition starts), not target coordinates\n      x2: getX(d) + w / 2,\n      y2: getY(d) + h / 2 + yShift,\n    }\n\n    if (!box) {\n      box = {\n        ...coords,\n      }\n    } else {\n      if (box.x1 > coords.x1) box.x1 = coords.x1\n      if (box.y1 > coords.y1) box.y1 = coords.y1\n      if (box.x2 < coords.x2) box.x2 = coords.x2\n      if (box.y2 < coords.y2) box.y2 = coords.y2\n    }\n  })\n\n  panelConfig._x = box.x1 - panelConfig._padding.left\n  panelConfig._y = box.y1 - panelConfig._padding.top\n  panelConfig._width = box.x2 - box.x1 + panelConfig._padding.left + panelConfig._padding.right\n  panelConfig._height = box.y2 - box.y1 + panelConfig._padding.top + panelConfig._padding.bottom\n  panelConfig._disabled = selection.data()\n    .map((node, i) => getBoolean(node, nodeDisabledAccessor, node._index) || node._state.greyout)\n    .every(d => d)\n}\n\nexport function setPanelNumNodes<N extends GraphInputNode, L extends GraphInputLink> (\n  panelConfig: GraphPanel,\n  panelNodes: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>\n): void {\n  panelConfig._numNodes = panelNodes.size()\n}\n\nexport function updatePanelBBoxSize<N extends GraphInputNode, L extends GraphInputLink> (\n  nodesSelection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n  panels: GraphPanel[],\n  config: GraphConfig<N, L>\n): void {\n  const { layoutNonConnectedAside } = config\n  if (!panels) return\n\n  panels.forEach(panelConfig => {\n    const panelNodes = nodesSelection.filter(node => {\n      return (!layoutNonConnectedAside || node._isConnected) && panelConfig.nodes.includes(node._id)\n    })\n    setPanelBBox(panelConfig, panelNodes, config.nodeSize, config.nodeDisabled)\n  })\n}\n\nexport function updatePanelNumNodes<N extends GraphInputNode, L extends GraphInputLink> (\n  nodesSelection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n  panels: GraphPanel[],\n  config: GraphConfig<N, L>\n): void {\n  const { layoutNonConnectedAside } = config\n  if (!panels) return\n\n  panels.forEach(panelConfig => {\n    const panelNodes = nodesSelection.filter(node => {\n      return (!layoutNonConnectedAside || node._isConnected) && panelConfig.nodes.includes(node._id)\n    })\n    setPanelNumNodes(panelConfig, panelNodes)\n  })\n}\n\nexport function getLabelTranslateTransform<N extends GraphInputNode, L extends GraphInputLink> (panel: GraphPanel): string {\n  const x = panel._width / 2\n  const dy = DEFAULT_LABEL_MARGIN + (panel.dashedOutline ? OUTLINE_SELECTION_PADDING : 0)\n  const y = panel.labelPosition === Position.Bottom\n    ? panel._height + dy\n    : -dy\n\n  return `translate(${x}, ${y})`\n}\n\n"],"names":["nodeSelectors.node"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { Selection } from 'd3-selection';
+import { GraphInputLink, GraphInputNode } from "../../../../types/graph";
+import { GraphNode, GraphLink, GraphPanel } from '../../types';
+import { GraphConfig } from '../../config';
+export declare function createPanels<N extends GraphNode, L extends GraphLink>(selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>): void;
+export declare function updatePanels<N extends GraphNode, L extends GraphLink>(selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>, config: GraphConfig<GraphInputNode, GraphInputLink>, duration: number): void;
+export declare function removePanels<N extends GraphNode, L extends GraphLink>(selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>, config: GraphConfig<GraphInputNode, GraphInputLink>, duration: number): void;

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

@@ -0,0 +1,98 @@
+import { select } from 'd3-selection';
+import { trimString } from '../../../../utils/text.js';
+import { smartTransition } from '../../../../utils/d3.js';
+import { setLabelRect } from '../node/helper.js';
+import { getLabelTranslateTransform, OUTLINE_SELECTION_PADDING, DEFAULT_SIDE_LABEL_SIZE } from './helper.js';
+import { panelSelection, panel, label, background, labelText, sideIconGroup, sideIconShape, customSideIcon, sideIconSymbol, panelSelectionActive } from './style.js';
+import { appendShape, updateShape } from '../shape.js';
+
+function createPanels(selection) {
+    selection
+        .attr('transform', d => `translate(${d._x}, ${d._y})`)
+        .style('opacity', 0);
+    selection.append('rect').attr('class', panelSelection)
+        .attr('rx', 9)
+        .attr('ry', 9)
+        .attr('width', d => d._width)
+        .attr('height', d => d._height);
+    selection.append('rect').attr('class', panel)
+        .attr('rx', 7)
+        .attr('ry', 7)
+        .attr('width', d => d._width)
+        .attr('height', d => d._height);
+    const panelLabel = selection.append('g').attr('class', label)
+        .attr('transform', getLabelTranslateTransform);
+    panelLabel.append('rect').attr('class', background);
+    panelLabel.append('text').attr('class', labelText)
+        .attr('dy', '0.32em');
+    const sideIcon = selection.append('g')
+        .attr('class', sideIconGroup)
+        .attr('transform', (d, i, elements) => {
+        const dx = -OUTLINE_SELECTION_PADDING;
+        const dy = -OUTLINE_SELECTION_PADDING;
+        return `translate(${d._width + dx}, ${-dy})`;
+    });
+    appendShape(sideIcon, (d) => d.sideIconShape, sideIconShape, customSideIcon);
+    sideIcon.append('text').attr('class', sideIconSymbol);
+}
+function updatePanels(selection, config, duration) {
+    smartTransition(selection, duration)
+        .attr('transform', d => `translate(${d._x}, ${d._y})`)
+        .style('opacity', d => d._disabled ? 0.4 : 1);
+    const panels = selection.selectAll(`.${panel}`).data(d => [d]);
+    smartTransition(panels, duration)
+        .attr('width', d => d._width)
+        .attr('height', d => d._height)
+        .style('stroke', d => d.borderColor)
+        .style('stroke-width', d => d.borderWidth);
+    const panelSelection$1 = selection.select(`.${panelSelection}`)
+        .classed(panelSelectionActive, d => d.dashedOutline);
+    smartTransition(panelSelection$1, duration)
+        .attr('x', d => -OUTLINE_SELECTION_PADDING)
+        .attr('y', d => -OUTLINE_SELECTION_PADDING)
+        .attr('width', d => d._width + OUTLINE_SELECTION_PADDING * 2)
+        .attr('height', d => d._height + OUTLINE_SELECTION_PADDING * 2);
+    const sideIcon = selection.select(`.${sideIconGroup}`);
+    sideIcon.select(`.${sideIconShape}`)
+        .call(updateShape, (d) => d.sideIconShape, (d) => { var _a; return (_a = d.sideIconShapeSize) !== null && _a !== void 0 ? _a : DEFAULT_SIDE_LABEL_SIZE; })
+        .style('stroke', d => d.sideIconShapeStroke)
+        .style('cursor', d => { var _a; return (_a = d.sideIconCursor) !== null && _a !== void 0 ? _a : null; })
+        .style('opacity', d => d.sideIconShape ? 1 : 0);
+    sideIcon.select(`.${sideIconSymbol}`)
+        .html(d => d.sideIconSymbol)
+        .attr('dy', 1)
+        .style('fill', d => d.sideIconSymbolColor)
+        .style('font-size', d => { var _a, _b; return (_a = d.sideIconFontSize) !== null && _a !== void 0 ? _a : (((_b = d.sideIconShapeSize) !== null && _b !== void 0 ? _b : DEFAULT_SIDE_LABEL_SIZE) / 2.5); });
+    smartTransition(sideIcon, duration)
+        .attr('transform', d => {
+        const dx = -OUTLINE_SELECTION_PADDING;
+        const dy = -OUTLINE_SELECTION_PADDING;
+        return `translate(${d._width + dx}, ${-dy})`;
+    });
+    const panelLabel = selection.select(`.${label}`);
+    panelLabel.select(`.${labelText}`)
+        .text(d => trimString(d.label));
+    smartTransition(panelLabel, duration)
+        .attr('transform', getLabelTranslateTransform);
+    panelLabel
+        .on('mouseover', (event, d) => {
+        const label = select(event.currentTarget);
+        const labelContent = d.label;
+        label.select('text').text(labelContent);
+        setLabelRect(label, labelContent, labelText);
+    })
+        .on('mouseleave', (event, d) => {
+        const label = select(event.currentTarget);
+        const labelContent = trimString(d.label);
+        label.select('text').text(labelContent);
+        setLabelRect(label, labelContent, labelText);
+    });
+}
+function removePanels(selection, config, duration) {
+    smartTransition(selection, duration / 2)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createPanels, removePanels, updatePanels };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/graph/modules/panel/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { trimString } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Local Types\nimport { GraphNode, GraphLink, GraphPanel } from '../../types'\n\n// Config\nimport { GraphConfig } from '../../config'\n\n// Helpers\nimport { setLabelRect } from '../node/helper'\nimport { getLabelTranslateTransform, OUTLINE_SELECTION_PADDING, DEFAULT_SIDE_LABEL_SIZE } from './helper'\n\n// Styles\nimport * as panelSelectors from './style'\nimport { appendShape, updateShape } from '../shape'\n\nexport function createPanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>\n): void {\n  selection\n    .attr('transform', d => `translate(${d._x}, ${d._y})`)\n    .style('opacity', 0)\n\n  selection.append('rect').attr('class', panelSelectors.panelSelection)\n    .attr('rx', 9)\n    .attr('ry', 9)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n\n  selection.append('rect').attr('class', panelSelectors.panel)\n    .attr('rx', 7)\n    .attr('ry', 7)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n\n  const panelLabel = selection.append('g').attr('class', panelSelectors.label)\n    .attr('transform', getLabelTranslateTransform)\n  panelLabel.append('rect').attr('class', panelSelectors.background)\n  panelLabel.append('text').attr('class', panelSelectors.labelText)\n    .attr('dy', '0.32em')\n\n  const sideIcon = selection.append('g')\n    .attr('class', panelSelectors.sideIconGroup)\n    .attr('transform', (d, i, elements) => {\n      const dx = -OUTLINE_SELECTION_PADDING\n      const dy = -OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n  appendShape(sideIcon, (d: GraphPanel) => d.sideIconShape, panelSelectors.sideIconShape, panelSelectors.customSideIcon)\n  sideIcon.append('text').attr('class', panelSelectors.sideIconSymbol)\n}\n\nexport function updatePanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,\n  config: GraphConfig<GraphInputNode, GraphInputLink>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .attr('transform', d => `translate(${d._x}, ${d._y})`)\n    .style('opacity', d => d._disabled ? 0.4 : 1)\n\n  const panels = selection.selectAll<SVGRectElement, GraphPanel>(`.${panelSelectors.panel}`).data(d => [d])\n  smartTransition(panels, duration)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n    .style('stroke', d => d.borderColor)\n    .style('stroke-width', d => d.borderWidth)\n\n  const panelSelection = selection.select<SVGRectElement>(`.${panelSelectors.panelSelection}`)\n    .classed(panelSelectors.panelSelectionActive, d => d.dashedOutline)\n\n  smartTransition(panelSelection, duration)\n    .attr('x', d => -OUTLINE_SELECTION_PADDING)\n    .attr('y', d => -OUTLINE_SELECTION_PADDING)\n    .attr('width', d => d._width + OUTLINE_SELECTION_PADDING * 2)\n    .attr('height', d => d._height + OUTLINE_SELECTION_PADDING * 2)\n\n  const sideIcon = selection.select<SVGGElement>(`.${panelSelectors.sideIconGroup}`)\n\n  sideIcon.select<SVGGElement>(`.${panelSelectors.sideIconShape}`)\n    .call(updateShape, (d: GraphPanel) => d.sideIconShape, (d: GraphPanel) => d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE)\n    .style('stroke', d => d.sideIconShapeStroke)\n    .style('cursor', d => d.sideIconCursor ?? null)\n    .style('opacity', d => d.sideIconShape ? 1 : 0)\n\n  sideIcon.select(`.${panelSelectors.sideIconSymbol}`)\n    .html(d => d.sideIconSymbol)\n    .attr('dy', 1)\n    .style('fill', d => d.sideIconSymbolColor)\n    .style('font-size', d => d.sideIconFontSize ?? ((d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE) / 2.5))\n\n  smartTransition(sideIcon, duration)\n    .attr('transform', d => {\n      const dx = -OUTLINE_SELECTION_PADDING\n      const dy = -OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n\n  const panelLabel = selection.select<SVGGElement>(`.${panelSelectors.label}`)\n\n  panelLabel.select<SVGTextElement>(`.${panelSelectors.labelText}`)\n    .text(d => trimString(d.label))\n\n  smartTransition(panelLabel, duration)\n    .attr('transform', getLabelTranslateTransform)\n\n  panelLabel\n    .on('mouseover', (event: MouseEvent, d) => {\n      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)\n      const labelContent = d.label\n      label.select('text').text(labelContent)\n      setLabelRect(label, labelContent, panelSelectors.labelText)\n    })\n    .on('mouseleave', (event: MouseEvent, d) => {\n      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)\n      const labelContent = trimString(d.label)\n      label.select('text').text(labelContent)\n      setLabelRect(label, labelContent, panelSelectors.labelText)\n    })\n}\n\nexport function removePanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,\n  config: GraphConfig<GraphInputNode, GraphInputLink>,\n  duration: number\n): void {\n  smartTransition(selection, duration / 2)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["panelSelectors.panelSelection","panelSelectors.panel","panelSelectors.label","panelSelectors.background","panelSelectors.labelText","panelSelectors.sideIconGroup","panelSelectors.sideIconShape","panelSelectors.customSideIcon","panelSelectors.sideIconSymbol","panelSelection","panelSelectors.panelSelectionActive"],"mappings":";;;;;;;;AAuBM,SAAU,YAAY,CAC1B,SAAmE,EAAA;IAEnE,SAAS;AACN,SAAA,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAA,UAAA,EAAa,CAAC,CAAC,EAAE,CAAK,EAAA,EAAA,CAAC,CAAC,EAAE,GAAG,CAAC;AACrD,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AAEtB,IAAA,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEA,cAA6B,CAAC;AAClE,SAAA,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;AACb,SAAA,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACb,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;SAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAA;AAEjC,IAAA,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,KAAoB,CAAC;AACzD,SAAA,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;AACb,SAAA,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACb,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;SAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAA;AAEjC,IAAA,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,KAAoB,CAAC;AACzE,SAAA,IAAI,CAAC,WAAW,EAAE,0BAA0B,CAAC,CAAA;AAChD,IAAA,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,UAAyB,CAAC,CAAA;AAClE,IAAA,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,SAAwB,CAAC;AAC9D,SAAA,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;AAEvB,IAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC;AACnC,SAAA,IAAI,CAAC,OAAO,EAAEC,aAA4B,CAAC;SAC3C,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,KAAI;AACpC,QAAA,MAAM,EAAE,GAAG,CAAC,yBAAyB,CAAA;AACrC,QAAA,MAAM,EAAE,GAAG,CAAC,yBAAyB,CAAA;QACrC,OAAO,CAAA,UAAA,EAAa,CAAC,CAAC,MAAM,GAAG,EAAE,CAAK,EAAA,EAAA,CAAC,EAAE,CAAA,CAAA,CAAG,CAAA;AAC9C,KAAC,CAAC,CAAA;IACJ,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,aAAa,EAAEC,aAA4B,EAAEC,cAA6B,CAAC,CAAA;AACtH,IAAA,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,cAA6B,CAAC,CAAA;AACtE,CAAC;SAEe,YAAY,CAC1B,SAAmE,EACnE,MAAmD,EACnD,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAA,UAAA,EAAa,CAAC,CAAC,EAAE,CAAK,EAAA,EAAA,CAAC,CAAC,EAAE,GAAG,CAAC;AACrD,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;IAE/C,MAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAA6B,CAAA,CAAA,EAAIP,KAAoB,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;AACzG,IAAA,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC;SAC9B,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;SAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;SAC9B,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;SACnC,KAAK,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IAE5C,MAAMQ,gBAAc,GAAG,SAAS,CAAC,MAAM,CAAiB,CAAA,CAAA,EAAIT,cAA6B,CAAA,CAAE,CAAC;AACzF,SAAA,OAAO,CAACU,oBAAmC,EAAE,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAA;AAErE,IAAA,eAAe,CAACD,gBAAc,EAAE,QAAQ,CAAC;SACtC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC;SAC1C,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC;AAC1C,SAAA,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,yBAAyB,GAAG,CAAC,CAAC;AAC5D,SAAA,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,yBAAyB,GAAG,CAAC,CAAC,CAAA;AAEjE,IAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAc,CAAI,CAAA,EAAAJ,aAA4B,CAAE,CAAA,CAAC,CAAA;IAElF,QAAQ,CAAC,MAAM,CAAc,CAAA,CAAA,EAAIC,aAA4B,EAAE,CAAC;SAC7D,IAAI,CAAC,WAAW,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAa,KAAK,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,iBAAiB,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,uBAAuB,CAAA,EAAA,CAAC;SACxH,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,mBAAmB,CAAC;AAC3C,SAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,IAAI,CAAA,EAAA,CAAC;AAC9C,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IAEjD,QAAQ,CAAC,MAAM,CAAC,CAAA,CAAA,EAAIE,cAA6B,EAAE,CAAC;SACjD,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC;AAC3B,SAAA,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACb,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,mBAAmB,CAAC;AACzC,SAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,gBAAgB,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAAC,CAAC,CAAA,EAAA,GAAA,CAAC,CAAC,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,uBAAuB,IAAI,GAAG,CAAC,CAAA,EAAA,CAAC,CAAA;AAE1G,IAAA,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAChC,SAAA,IAAI,CAAC,WAAW,EAAE,CAAC,IAAG;AACrB,QAAA,MAAM,EAAE,GAAG,CAAC,yBAAyB,CAAA;AACrC,QAAA,MAAM,EAAE,GAAG,CAAC,yBAAyB,CAAA;QACrC,OAAO,CAAA,UAAA,EAAa,CAAC,CAAC,MAAM,GAAG,EAAE,CAAK,EAAA,EAAA,CAAC,EAAE,CAAA,CAAA,CAAG,CAAA;AAC9C,KAAC,CAAC,CAAA;AAEJ,IAAA,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,CAAc,CAAI,CAAA,EAAAN,KAAoB,CAAE,CAAA,CAAC,CAAA;IAE5E,UAAU,CAAC,MAAM,CAAiB,CAAA,CAAA,EAAIE,SAAwB,EAAE,CAAC;AAC9D,SAAA,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;AAEjC,IAAA,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC;AAClC,SAAA,IAAI,CAAC,WAAW,EAAE,0BAA0B,CAAC,CAAA;IAEhD,UAAU;SACP,EAAE,CAAC,WAAW,EAAE,CAAC,KAAiB,EAAE,CAAC,KAAI;QACxC,MAAM,KAAK,GAAG,MAAM,CAAgC,KAAK,CAAC,aAA4B,CAAC,CAAA;AACvF,QAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAA;QAC5B,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACvC,YAAY,CAAC,KAAK,EAAE,YAAY,EAAEA,SAAwB,CAAC,CAAA;AAC7D,KAAC,CAAC;SACD,EAAE,CAAC,YAAY,EAAE,CAAC,KAAiB,EAAE,CAAC,KAAI;QACzC,MAAM,KAAK,GAAG,MAAM,CAAgC,KAAK,CAAC,aAA4B,CAAC,CAAA;QACvF,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;QACxC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACvC,YAAY,CAAC,KAAK,EAAE,YAAY,EAAEA,SAAwB,CAAC,CAAA;AAC7D,KAAC,CAAC,CAAA;AACN,CAAC;SAEe,YAAY,CAC1B,SAAmE,EACnE,MAAmD,EACnD,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,GAAG,CAAC,CAAC;AACrC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnB,SAAA,MAAM,EAAE,CAAA;AACb;;;;"}

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

@@ -0,0 +1,14 @@
+export declare const panels: string;
+export declare const variables: void;
+export declare const gPanel: string;
+export declare const panel: string;
+export declare const label: string;
+export declare const background: string;
+export declare const labelText: string;
+export declare const panelSelectionActive: string;
+export declare const panelSelection: string;
+export declare const greyout: string;
+export declare const sideIconGroup: string;
+export declare const sideIconShape: string;
+export declare const customSideIcon: string;
+export declare const sideIconSymbol: string;

package/{src/components/graph/modules/panel/style.ts → components/graph/modules/panel/style.js}

@@ -1,10 +1,9 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-export const panels = css`
+const panels = css `
   label: panels;
-`
-
-export const variables = injectGlobal`
+`;
+const variables = injectGlobal `
   :root {
     --vis-graph-panel-border-color: #E6E9F3;
     --vis-graph-panel-border-opacity: 0.9;
@@ -41,27 +40,23 @@ export const variables = injectGlobal`
     --vis-graph-panel-side-icon-shape-fill-color: var(--vis-dark-graph-panel-side-icon-shape-fill-color);
     --vis-graph-panel-border-color:  var(--vis-dark-graph-panel-border-color);
   }
-`
-
-export const gPanel = css`
+`;
+const gPanel = css `
   label: g-panel;
-`
-
-export const panel = css`
+`;
+const panel = css `
   label: panel;
 
   stroke: var(--vis-graph-panel-border-color);
   stroke-opacity: var(--vis-graph-panel-border-opacity);
   fill: var(--vis-graph-panel-fill-color);
-`
-
-export const label = css`
+`;
+const label = css `
   label: label;
 
   fill: var(--vis-graph-panel-label-color);
-`
-
-export const background = css`
+`;
+const background = css `
   label: background;
 
   opacity: 0.9;
@@ -69,9 +64,8 @@ export const background = css`
   backdrop-filter: blur(2px);
   fill: var(--vis-graph-panel-label-background);
   stroke: none;
-`
-
-export const labelText = css`
+`;
+const labelText = css `
   label: label-text;
 
   text-anchor: middle;
@@ -80,13 +74,11 @@ export const labelText = css`
   cursor: default;
   stroke: none;
   font-family: var(--vis-graph-panel-label-font-family, var(--vis-font-family));
-`
-
-export const panelSelectionActive = css`
+`;
+const panelSelectionActive = css `
   label: active;
-`
-
-export const panelSelection = css`
+`;
+const panelSelection = css `
   label: panel-selection-outline;
 
   opacity: 0;
@@ -101,29 +93,24 @@ export const panelSelection = css`
     opacity: 1;
     stroke-opacity: 0.75;
   }
-`
-
-export const greyout = css`
+`;
+const greyout = css `
   label: greyout;
   opacity: 0.4;
-`
-
-export const sideIconGroup = css`
+`;
+const sideIconGroup = css `
   label: side-icon-group;
-`
-
-export const sideIconShape = css`
+`;
+const sideIconShape = css `
   label: side-icon-shape;
 
   fill: var(--vis-graph-panel-side-icon-shape-fill-color);
   stroke-width: 2px;
-`
-
-export const customSideIcon = css`
+`;
+const customSideIcon = css `
   label: side-icon-custom;
-`
-
-export const sideIconSymbol = css`
+`;
+const sideIconSymbol = css `
   label: side-label-icon-text;
   font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);
   fill: var(--vis-graph-panel-side-icon-symbol-color);
@@ -132,4 +119,7 @@ export const sideIconSymbol = css`
   text-anchor: middle;
   pointer-events: none;
   cursor: default;
-`
+`;
+
+export { background, customSideIcon, gPanel, greyout, label, labelText, panel, panelSelection, panelSelectionActive, panels, sideIconGroup, sideIconShape, sideIconSymbol, variables };
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/panel/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const panels = css`\n  label: panels;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-panel-border-color: #E6E9F3;\n    --vis-graph-panel-border-opacity: 0.9;\n    --vis-graph-panel-fill-color: #ffffff;\n\n    --vis-graph-panel-label-color: #6c778c;\n    --vis-graph-panel-label-background: #ffffff;\n\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-graph-panel-label-font-family: */\n    --vis-graph-panel-label-font-size: 10pt;\n    --vis-graph-panel-label-font-weight: 300;\n\n    --vis-graph-panel-dashed-outline-color: #b7b7b7;\n\n    --vis-graph-panel-side-icon-symbol-color: #9ea7b8;\n    --vis-graph-panel-side-icon-shape-fill-color: #ffffff;\n\n    --vis-dark-graph-panel-border-color: var(--vis-color-grey);\n    --vis-dark-graph-panel-fill-color: #292b34;\n    --vis-dark-graph-panel-label-color: #E6E9F3;\n    --vis-dark-graph-panel-label-background: var(--vis-color-grey);\n    --vis-dark-graph-panel-side-icon-symbol-color: #ffffff;\n    --vis-dark-graph-panel-side-icon-shape-fill-color: #6c778c;\n    --vis-dark-graph-panel-border-color: #a0a6ad;\n  }\n\n  body.theme-dark ${`.${panels}`} {\n    --vis-graph-panel-border-color: var(--vis-dark-graph-panel-border-color);\n    --vis-graph-panel-fill-color: var(--vis-dark-graph-panel-fill-color);\n    --vis-graph-panel-label-color: var(--vis-dark-graph-panel-label-color);\n    --vis-graph-panel-label-background: var(--vis-dark-graph-panel-label-background);\n    --vis-graph-panel-side-icon-symbol-color: var(--vis-dark-graph-panel-side-icon-symbol-color);\n    --vis-graph-panel-side-icon-shape-fill-color: var(--vis-dark-graph-panel-side-icon-shape-fill-color);\n    --vis-graph-panel-border-color:  var(--vis-dark-graph-panel-border-color);\n  }\n`\n\nexport const gPanel = css`\n  label: g-panel;\n`\n\nexport const panel = css`\n  label: panel;\n\n  stroke: var(--vis-graph-panel-border-color);\n  stroke-opacity: var(--vis-graph-panel-border-opacity);\n  fill: var(--vis-graph-panel-fill-color);\n`\n\nexport const label = css`\n  label: label;\n\n  fill: var(--vis-graph-panel-label-color);\n`\n\nexport const background = css`\n  label: background;\n\n  opacity: 0.9;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  fill: var(--vis-graph-panel-label-background);\n  stroke: none;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  text-anchor: middle;\n  font-size: var(--vis-graph-panel-label-font-size);\n  font-weight: var(--vis-graph-panel-label-font-weight);;\n  cursor: default;\n  stroke: none;\n  font-family: var(--vis-graph-panel-label-font-family, var(--vis-font-family));\n`\n\nexport const panelSelectionActive = css`\n  label: active;\n`\n\nexport const panelSelection = css`\n  label: panel-selection-outline;\n\n  opacity: 0;\n  stroke-width: 1;\n  stroke-dasharray: 3 3;\n  fill: var(--vis-graph-node-selection-color);\n  fill-opacity: 0.1;\n  stroke: var(--vis-graph-panel-dashed-outline-color);\n  stroke-opacity: 0;\n\n  &${`.${panelSelectionActive}`} {\n    opacity: 1;\n    stroke-opacity: 0.75;\n  }\n`\n\nexport const greyout = css`\n  label: greyout;\n  opacity: 0.4;\n`\n\nexport const sideIconGroup = css`\n  label: side-icon-group;\n`\n\nexport const sideIconShape = css`\n  label: side-icon-shape;\n\n  fill: var(--vis-graph-panel-side-icon-shape-fill-color);\n  stroke-width: 2px;\n`\n\nexport const customSideIcon = css`\n  label: side-icon-custom;\n`\n\nexport const sideIconSymbol = css`\n  label: side-label-icon-text;\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  fill: var(--vis-graph-panel-side-icon-symbol-color);\n  stroke: none;\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  cursor: default;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BjB,kBAAA,EAAA,CAAA,CAAA,EAAI,MAAM,CAAE,CAAA,CAAA;;;;;;;;;EAS/B;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS3B;AAEM,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA;;EAEtC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;AAW5B,GAAA,EAAA,CAAA,CAAA,EAAI,oBAAoB,CAAE,CAAA,CAAA;;;;EAI9B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;EAGzB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;EAK/B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;"}

package/components/graph/modules/shape.d.ts

@@ -0,0 +1,6 @@
+import { Selection } from 'd3-selection';
+import { NumericAccessor, StringAccessor } from "../../../types/accessor";
+import { GraphNodeShape } from '../types';
+export declare function isCustomXml(shape: GraphNodeShape): boolean;
+export declare function appendShape<T>(selection: Selection<SVGGElement, T, SVGGElement, unknown>, shapeAccessor: StringAccessor<T>, shapeSelector: string, customShapeSelector: string, index?: number, insertSelector?: string): void;
+export declare function updateShape<T>(selection: Selection<SVGGElement, T, SVGGElement, unknown>, shape: StringAccessor<T>, size: NumericAccessor<T>, index: number): void;

package/components/graph/modules/shape.js

@@ -0,0 +1,80 @@
+import { select } from 'd3-selection';
+import { polygon } from '../../../utils/path.js';
+import { getString } from '../../../utils/data.js';
+import { GraphNodeShape } from '../types.js';
+import { getNodeSize } from './node/helper.js';
+
+function isCustomXml(shape) {
+    return /<[a-z][\s\S]*>/i.test(shape);
+}
+function appendShape(selection, shapeAccessor, shapeSelector, customShapeSelector, index, insertSelector = ':last-child') {
+    selection.each((d, i, elements) => {
+        const element = select(elements[i]);
+        const shape = getString(d, shapeAccessor, index);
+        let shapeElement;
+        const isCustomXmlShape = isCustomXml(shape);
+        if (isCustomXmlShape) {
+            shapeElement = element.insert('g', insertSelector)
+                .html(shape);
+        }
+        else {
+            switch (shape) {
+                case GraphNodeShape.Square:
+                    shapeElement = element.insert('rect', insertSelector)
+                        .attr('rx', 5)
+                        .attr('ry', 5);
+                    break;
+                case GraphNodeShape.Hexagon:
+                case GraphNodeShape.Triangle:
+                    shapeElement = element.insert('path', insertSelector);
+                    break;
+                case GraphNodeShape.Circle:
+                default:
+                    shapeElement = element.insert('circle', insertSelector);
+            }
+        }
+        return shapeElement.attr('class', shapeSelector)
+            .classed(customShapeSelector, isCustomXmlShape);
+    });
+}
+function updateShape(selection, shape, size, index) {
+    if (selection.size() === 0)
+        return;
+    const d = selection.datum();
+    const nodeSize = getNodeSize(d, size, index);
+    selection.filter('circle')
+        .attr('r', nodeSize / 2);
+    selection.filter('rect')
+        .attr('width', nodeSize)
+        .attr('height', nodeSize)
+        .attr('x', -nodeSize / 2)
+        .attr('y', -nodeSize / 2);
+    selection.filter('path')
+        .attr('d', () => {
+        let n;
+        switch (getString(d, shape, index)) {
+            case GraphNodeShape.Square:
+                n = 4;
+                break;
+            case GraphNodeShape.Triangle:
+                n = 3;
+                break;
+            case GraphNodeShape.Hexagon:
+            default:
+                n = 6;
+        }
+        return polygon(nodeSize, n);
+    });
+    selection.filter('g')
+        .filter(() => !isCustomXml(getString(d, shape, index)))
+        .html(getString(d, shape, index));
+    selection.filter('g')
+        .each((d, i, elements) => {
+        const el = select(elements[i]);
+        const bBox = el.node().getBBox();
+        el.attr('transform', `translate(${-bBox.width / 2},${-bBox.height / 2})`);
+    });
+}
+
+export { appendShape, isCustomXml, updateShape };
+//# sourceMappingURL=shape.js.map

package/components/graph/modules/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sources":["../../../../src/components/graph/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\n\n// Types\nimport { NumericAccessor, StringAccessor } from 'types/accessor'\n\n// Utils\nimport { polygon } from 'utils/path'\nimport { getString } from 'utils/data'\n\n// Types\n\n// Local Types\nimport { GraphNodeShape } from '../types'\n\n// Helpers\nimport { getNodeSize } from './node/helper'\n\nexport function isCustomXml (shape: GraphNodeShape): boolean {\n  return /<[a-z][\\s\\S]*>/i.test(shape)\n}\n\nexport function appendShape<T> (\n  selection: Selection<SVGGElement, T, SVGGElement, unknown>,\n  shapeAccessor: StringAccessor<T>,\n  shapeSelector: string,\n  customShapeSelector: string,\n  index?: number,\n  insertSelector = ':last-child'\n): void {\n  selection.each((d, i, elements) => {\n    const element = select(elements[i])\n    const shape = getString(d, shapeAccessor, index) as GraphNodeShape\n\n    let shapeElement\n    const isCustomXmlShape = isCustomXml(shape)\n    if (isCustomXmlShape) {\n      shapeElement = element.insert('g', insertSelector)\n        .html(shape)\n    } else {\n      switch (shape) {\n        case GraphNodeShape.Square:\n          shapeElement = element.insert('rect', insertSelector)\n            .attr('rx', 5)\n            .attr('ry', 5)\n          break\n        case GraphNodeShape.Hexagon:\n        case GraphNodeShape.Triangle:\n          shapeElement = element.insert('path', insertSelector)\n          break\n        case GraphNodeShape.Circle:\n        default:\n          shapeElement = element.insert('circle', insertSelector)\n      }\n    }\n\n    return shapeElement.attr('class', shapeSelector)\n      .classed(customShapeSelector, isCustomXmlShape)\n  })\n}\n\nexport function updateShape<T> (\n  selection: Selection<SVGGElement, T, SVGGElement, unknown>,\n  shape: StringAccessor<T>,\n  size: NumericAccessor<T>,\n  index: number\n): void {\n  if (selection.size() === 0) return\n\n  const d: T = selection.datum()\n  const nodeSize = getNodeSize(d, size, index)\n  selection.filter('circle')\n    .attr('r', nodeSize / 2)\n\n  selection.filter('rect')\n    .attr('width', nodeSize)\n    .attr('height', nodeSize)\n    .attr('x', -nodeSize / 2)\n    .attr('y', -nodeSize / 2)\n\n  selection.filter('path')\n    .attr('d', () => {\n      let n: number\n      switch (getString(d, shape, index)) {\n        case GraphNodeShape.Square:\n          n = 4\n          break\n        case GraphNodeShape.Triangle:\n          n = 3\n          break\n        case GraphNodeShape.Hexagon:\n        default:\n          n = 6\n      }\n\n      return polygon(nodeSize, n)\n    })\n\n  selection.filter('g')\n    .filter(() => !isCustomXml(getString(d, shape, index) as GraphNodeShape))\n    .html(getString(d, shape, index))\n\n  selection.filter('g')\n    .each((d, i, elements) => {\n      const el = select(elements[i])\n      const bBox = el.node().getBBox()\n      el.attr('transform', `translate(${-bBox.width / 2},${-bBox.height / 2})`)\n    })\n}\n"],"names":[],"mappings":"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"}

package/components/graph/modules/zoom-levels.d.ts

@@ -0,0 +1,6 @@
+export declare enum ZoomLevel {
+    Level0 = 1,
+    Level1 = 0.6,
+    Level2 = 0.4,
+    Level3 = 0.2
+}

package/components/graph/modules/zoom-levels.js

@@ -0,0 +1,10 @@
+var ZoomLevel;
+(function (ZoomLevel) {
+    ZoomLevel[ZoomLevel["Level0"] = 1] = "Level0";
+    ZoomLevel[ZoomLevel["Level1"] = 0.6] = "Level1";
+    ZoomLevel[ZoomLevel["Level2"] = 0.4] = "Level2";
+    ZoomLevel[ZoomLevel["Level3"] = 0.2] = "Level3";
+})(ZoomLevel || (ZoomLevel = {}));
+
+export { ZoomLevel };
+//# sourceMappingURL=zoom-levels.js.map

package/components/graph/modules/zoom-levels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-levels.js","sources":["../../../../src/components/graph/modules/zoom-levels.ts"],"sourcesContent":["export enum ZoomLevel {\n  Level0 = 1.0,\n  Level1 = 0.6,\n  Level2 = 0.4,\n  Level3 = 0.2,\n}\n"],"names":[],"mappings":"IAAY,UAKX;AALD,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAY,CAAA;AACZ,IAAA,SAAA,CAAA,SAAA,CAAA,QAAA,CAAA,GAAA,GAAA,CAAA,GAAA,QAAY,CAAA;AACZ,IAAA,SAAA,CAAA,SAAA,CAAA,QAAA,CAAA,GAAA,GAAA,CAAA,GAAA,QAAY,CAAA;AACZ,IAAA,SAAA,CAAA,SAAA,CAAA,QAAA,CAAA,GAAA,GAAA,CAAA,GAAA,QAAY,CAAA;AACd,CAAC,EALW,SAAS,KAAT,SAAS,GAKpB,EAAA,CAAA,CAAA;;;;"}

package/components/graph/style.d.ts

@@ -0,0 +1,6 @@
+export declare const variables: void;
+export declare const root: string;
+export declare const background: string;
+export declare const graphGroup: string;
+export declare const zoomOutLevel1: string;
+export declare const zoomOutLevel2: string;

package/components/graph/style.js

@@ -0,0 +1,66 @@
+import { injectGlobal, css } from '@emotion/css';
+import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
+import { label, nodeGauge, node, nodeSelection, nodeSelectionActive } from './modules/node/style.js';
+import { gLink, flowCircle } from './modules/link/style.js';
+
+const variables = injectGlobal `
+  :root {
+    --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};
+  }
+`;
+// General
+const root = css `
+  label: graph-component;
+`;
+const background = css `
+  label: background;
+`;
+const graphGroup = css `
+  label: graph-group;
+`;
+const zoomOutLevel1 = css `
+  label: zoom-out-level-1;
+
+  ${`.${label}`} {
+    rect {
+      stroke: none;
+    }
+  }
+`;
+const zoomOutLevel2 = css `
+  label: zoom-out-level-2;
+
+  ${`.${label}`} {
+    visibility: visible;
+  }
+
+  ${`.${nodeGauge}`} {
+    visibility: visible;
+  }
+
+  ${`.${node}`} {
+    stroke-width: 4px;
+  }
+
+  rect${`.${node}`} {
+    stroke-width: 2px;
+  }
+
+  ${`.${gLink}`} {
+    animation: none;
+    stroke-dasharray: none;
+  }
+
+  ${`.${flowCircle}`} {
+    display: none;
+  }
+
+  ${`.${nodeSelection}`} {
+    &${`.${nodeSelectionActive}`} {
+      transform: scale(1.15);
+    }
+  }
+`;
+
+export { background, graphGroup, root, variables, zoomOutLevel1, zoomOutLevel2 };
+//# sourceMappingURL=style.js.map

package/components/graph/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/graph/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\n// Nodes\nimport * as nodeSelectors from './modules/node/style'\n\n// Links\nimport * as linkSelectors from './modules/link/style'\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n  }\n`\n\n// General\nexport const root = css`\n  label: graph-component;\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const graphGroup = css`\n  label: graph-group;\n`\n\nexport const zoomOutLevel1 = css`\n  label: zoom-out-level-1;\n\n  ${`.${nodeSelectors.label}`} {\n    rect {\n      stroke: none;\n    }\n  }\n`\n\nexport const zoomOutLevel2 = css`\n  label: zoom-out-level-2;\n\n  ${`.${nodeSelectors.label}`} {\n    visibility: visible;\n  }\n\n  ${`.${nodeSelectors.nodeGauge}`} {\n    visibility: visible;\n  }\n\n  ${`.${nodeSelectors.node}`} {\n    stroke-width: 4px;\n  }\n\n  rect${`.${nodeSelectors.node}`} {\n    stroke-width: 2px;\n  }\n\n  ${`.${linkSelectors.gLink}`} {\n    animation: none;\n    stroke-dasharray: none;\n  }\n\n  ${`.${linkSelectors.flowCircle}`} {\n    display: none;\n  }\n\n  ${`.${nodeSelectors.nodeSelection}`} {\n    &${`.${nodeSelectors.nodeSelectionActive}`} {\n      transform: scale(1.15);\n    }\n  }\n`\n"],"names":["nodeSelectors.label","nodeSelectors.nodeGauge","nodeSelectors.node","linkSelectors.gLink","linkSelectors.flowCircle","nodeSelectors.nodeSelection","nodeSelectors.nodeSelectionActive"],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;oCAED,+BAA+B,CAAA;;EAElE;AAED;AACO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;IAIzB,CAAI,CAAA,EAAAC,SAAuB,CAAE,CAAA,CAAA;;;;IAI7B,CAAI,CAAA,EAAAC,IAAkB,CAAE,CAAA,CAAA;;;;QAIpB,CAAI,CAAA,EAAAA,IAAkB,CAAE,CAAA,CAAA;;;;IAI5B,CAAI,CAAA,EAAAC,KAAmB,CAAE,CAAA,CAAA;;;;;IAKzB,CAAI,CAAA,EAAAC,UAAwB,CAAE,CAAA,CAAA;;;;IAI9B,CAAI,CAAA,EAAAC,aAA2B,CAAE,CAAA,CAAA;OAC9B,CAAI,CAAA,EAAAC,mBAAiC,CAAE,CAAA,CAAA;;;;;;;;"}