@unovis/ts 1.0.0-beta.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    /* Node Fill */\n    --vis-graph-node-stroke-color: rgb(206, 211, 222);\n    --vis-graph-node-fill-color: #fff;\n    --vis-graph-node-gauge-color: #adb4c2;\n    --vis-graph-node-selection-color: #acb3b8;\n\n    --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n    --vis-dark-graph-node-fill-color: #494b56;\n    --vis-dark-graph-node-gauge-color: #989aa3;\n    --vis-dark-graph-node-selection-color: #494b56;\n\n    /* Node Central Icon */\n    --vis-graph-node-icon-fill-color-bright: #ffffff;\n    --vis-graph-node-icon-fill-color-dark: var(--vis-color-gray);\n    --vis-graph-node-icon-fill-color: #9ea7b8;\n\n    --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n    /* Node Bottom Icon */\n    --vis-graph-node-bottom-icon-font-size: 14pt;\n    --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n    --vis-graph-node-bottom-icon-stroke-color: #fff;\n    --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n    --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n    --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n    /* Node Label */\n    --vis-graph-node-label-font-size: 9pt;\n    --vis-graph-node-label-background: #ffffff;\n    --vis-graph-node-label-text-color: #0F1E57;\n    --vis-graph-node-sublabel-text-color: #989aa3;\n    --vis-graph-node-sublabel-font-size: 8pt;\n    --vis-graph-node-label-font-family: var(--vis-font-family);\n\n    --vis-dark-graph-node-label-background: var(--vis-color-gray);\n    --vis-dark-graph-node-label-text-color: #ffffff;\n    --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n    /* Node Side Labels (circular labels)*/\n    --vis-graph-node-side-label-background-fill-color: #a0a9af;\n    --vis-graph-node-side-label-background-stroke-color: #ffffff;\n    --vis-graph-node-side-label-fill-color-bright: #ffffff;\n    --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n    --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n    --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-gray);\n    --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n    --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-gray);\n\n    /* Greyout */\n    --vis-graph-node-greyout-color: #ebeff7;\n    --vis-graph-node-icon-greyout-color: #c6cad1;\n    --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n    --vis-dark-graph-node-greyout-color: #494b56;\n    --vis-dark-graph-node-icon-greyout-color: var(--vis-color-gray);\n    --vis-dark-graph-node-side-label-background-greyout-color: #f1f4f7;\n  }\n\n  body.theme-dark ${`.${nodes}`} {\n    --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n    --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n    --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n    --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n    --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n    --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n    --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n    --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n    --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n    --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n    --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n    --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n    --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n    --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n    --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n    --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n    --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n`\n\nexport const node = css`\n  label: node-shape;\n\n  stroke: var(--vis-graph-node-stroke-color);\n  fill: var(--vis-graph-node-fill-color);\n  transition: .4s fill, .4s stroke;\n`\n\nexport const nodeIcon = css`\n  label: icon;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  transition: .4s all;\n  fill: var(--vis-graph-node-icon-fill-color);\n`\n\nexport const nodeBottomIcon = css`\n  label: node-bottom-icon;\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  font-size: var(--vis-graph-node-bottom-icon-font-size);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  pointer-events: none;\n  transition: .4s fill;\n  fill: var(--vis-graph-node-bottom-icon-fill-color);\n  stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n  stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n`\n\nexport const nodeIsDragged = css`\n  label: dragged;\n`\n\nexport const label = css`\n  label: label;\n\n  text-anchor: middle;\n  font-weight: 300;\n  font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = 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-node-label-background);\n`\n\nexport const labelText = css`\n  label: label-text;\n`\n\nexport const labelTextContent = css`\n  label: label-text-content;\n\n  fill: var(--vis-graph-node-label-text-color);\n  font-family: var(--vis-graph-node-label-font-family);\n`\n\nexport const subLabelTextContent = css`\n  label: sublabel-text-content;\n\n  fill: var(--vis-graph-node-sublabel-text-color);\n  font-family: var(--vis-graph-node-label-font-family);\n  font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n  label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n  label: side-label-background;\n\n  stroke-opacity: 0.8;\n  stroke: var(--vis-graph-node-side-label-background-stroke-color);\n  fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n  label: side-label;\n\n  font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n  dominant-baseline: middle;\n  text-anchor: middle;\n  font-size: 16px;\n  fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n  label: side-label-group;\n  cursor: default;\n`\n\nexport const gNode = css`\n  label: g-node;\n\n  transition: .25s opacity;\n`\n\nexport const draggable = css`\n  label: draggable;\n\n  &:hover {\n    cursor: grab;\n  }\n\n  &${`.${nodeIsDragged}`} {\n    cursor: grabbing;\n  }\n`\n\nexport const gNodeExit = css`\n  label: g-node-exit;\n  pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n  label: active;\n`\n\nexport const nodeSelection = css`\n  label: node-selection;\n\n  fill: none;\n  stroke-width: 1;\n  stroke-dasharray: 3 3;\n  opacity: 0;\n  transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n  transform: scale(.5);\n  fill: var(--vis-graph-node-selection-color);\n  fill-opacity: 0.1;\n  stroke: var(--vis-graph-node-selection-color);\n  stroke-opacity: 0.75;\n\n  &${`.${nodeSelectionActive}`} {\n    opacity: 1;\n    transform: scale(1.2);\n  }\n`\n\nexport const nodeGauge = css`\n  label: node-gauge;\n\n  fill: var(--vis-graph-node-gauge-color);\n  transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n  label: polygon;\n\n  ${`.${nodeGauge}`} {\n    fill-opacity: 0;\n    stroke-linecap: round;\n    pointer-events: none;\n  }\n`\n\nexport const customNode = css`\n  label: custom-node;\n\n  stroke-width: 0;\n`\n\nexport const greyoutNode = css`\n  label: greyout;\n\n  ${`.${node}`} {\n    fill: var(--vis-graph-node-greyout-color) !important;\n    stroke: var(--vis-graph-node-greyout-color) !important;\n  }\n\n  ${`.${nodeIcon}`} {\n     fill: var(--vis-graph-node-icon-greyout-color) !important;\n  }\n\n  ${`.${nodeGauge}`} {\n    fill: var(--vis-graph-node-greyout-color) !important;\n    stroke: var(--vis-graph-node-greyout-color) !important;\n  }\n\n  ${`.${label}`} {\n    opacity: 0.5;\n  }\n\n  ${`.${sideLabelBackground}`} {\n     fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n     stroke-opacity: 0.5;\n   }\n\n   ${`.${sideLabel}`} {\n    fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n    opacity: 0.25;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuB9B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOjC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;EAKlC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;EAEjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ3B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;AAOvB,GAAA,EAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;;;EAGvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;EAErC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;AAc3B,GAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;EAK3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;EAKlB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;AAKV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;;AAId,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;AAKf,EAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;AAIX,EAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;;AAKxB,GAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;;;;"}

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

@@ -0,0 +1,16 @@
+import { Selection, BaseType } from 'd3-selection';
+import { NumericAccessor, BooleanAccessor } from "../../../../types/accessor";
+import { GraphInputLink, GraphInputNode } from "../../../../types/graph";
+import { GraphNode, GraphPanel } from '../../types';
+import { GraphConfig } from '../../config';
+export declare const DEFAULT_PADDING = 15;
+export declare const DEFAULT_LABEL_MARGIN = 16;
+export declare const OUTLINE_SELECTION_PADDING = 5;
+export declare const DEFAULT_SIDE_LABEL_SIZE = 25;
+export declare function setPanelForNodes<N extends GraphInputNode, L extends GraphInputLink>(panels: GraphPanel[], nodes: GraphNode<N, L>[], config: GraphConfig<N, L>): void;
+export declare function setPanelBBox<N extends GraphInputNode, L extends GraphInputLink>(panelConfig: GraphPanel, panelNodes: Selection<BaseType, GraphNode<N, L>, SVGGElement, unknown>, nodeSizeAccessor: NumericAccessor<N>, nodeDisabledAccessor: BooleanAccessor<N>): void;
+export declare function setPanelNumNodes<N extends GraphInputNode, L extends GraphInputLink>(panelConfig: GraphPanel, panelNodes: Selection<BaseType, GraphNode<N, L>, SVGGElement, unknown>): void;
+export declare function updatePanelBBoxSize<N extends GraphInputNode, L extends GraphInputLink>(nodesSelection: Selection<BaseType, GraphNode<N, L>, SVGGElement, unknown>, panels: GraphPanel[], config: GraphConfig<N, L>): void;
+export declare function updatePanelNumNodes<N extends GraphInputNode, L extends GraphInputLink>(nodesSelection: Selection<BaseType, GraphNode<N, L>, SVGGElement, unknown>, panels: GraphPanel[], config: GraphConfig<N, L>): void;
+export declare function getMaxPanelPadding<N extends GraphInputNode, L extends GraphInputLink>(panels: GraphPanel[]): number;
+export declare function getLabelTranslateTransform<N extends GraphInputNode, L extends GraphInputLink>(panel: GraphPanel): string;

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

@@ -0,0 +1,110 @@
+import { max } from 'd3-array';
+import { Position } from '../../../../types/position.js';
+import { find, 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 setPanelForNodes(panels, nodes, config) {
+    const { layoutNonConnectedAside } = config;
+    if (!panels)
+        return;
+    // For each Node create Panels to which node belongs
+    // Then for each Panel create an array of neighbouring Nodes
+    nodes.forEach(node => {
+        // Find all panels to which node is belong
+        const nodePanels = panels.filter(panel => panel.nodes && panel.nodes.includes(node._id));
+        if (!layoutNonConnectedAside || node._isConnected) {
+            // Find and put neighbour Nodes to each panel
+            node._panels = nodePanels.map(panel => {
+                const panelNodes = panel.nodes.map((panelNodeId) => find(nodes, (n) => panelNodeId === n._id));
+                return layoutNonConnectedAside ? panelNodes.filter((n) => n._isConnected) : panelNodes;
+            });
+        }
+    });
+}
+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 using an approximation
+        const coords = {
+            x1: getX(d) - w / 2 - DEFAULT_PADDING,
+            y1: getY(d) - h / 2 + yShift - DEFAULT_PADDING,
+            x2: getX(d) + w / 2 + DEFAULT_PADDING,
+            y2: getY(d) + h / 2 + yShift + DEFAULT_PADDING,
+        };
+        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._y = box.y1;
+    panelConfig._width = box.x2 - box.x1;
+    panelConfig._height = box.y2 - box.y1;
+    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 getMaxPanelPadding(panels) {
+    return (panels === null || panels === void 0 ? void 0 : panels.length) ? DEFAULT_PADDING + max(panels.map(d => { var _a; return (_a = d.padding) !== null && _a !== void 0 ? _a : 0; })) : 0;
+}
+function getLabelTranslateTransform(panel) {
+    var _a;
+    const x = panel._width / 2;
+    const dy = ((_a = panel.padding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING) + 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, getMaxPanelPadding, 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, BaseType } from 'd3-selection'\nimport { max } from 'd3-array'\n\n// Types\nimport { NumericAccessor, BooleanAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Utils\nimport { find, getBoolean } from 'utils/data'\n\n// Local Types\nimport { GraphNode, GraphPanel } 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 setPanelForNodes<N extends GraphInputNode, L extends GraphInputLink> (\n  panels: GraphPanel[],\n  nodes: GraphNode<N, L>[],\n  config: GraphConfig<N, L>\n): void {\n  const { layoutNonConnectedAside } = config\n  if (!panels) return\n\n  // For each Node create Panels to which node belongs\n  // Then for each Panel create an array of neighbouring Nodes\n  nodes.forEach(node => {\n    // Find all panels to which node is belong\n    const nodePanels = panels.filter(panel => panel.nodes && panel.nodes.includes(node._id))\n    if (!layoutNonConnectedAside || node._isConnected) {\n      // Find and put neighbour Nodes to each panel\n      node._panels = nodePanels.map(panel => {\n        const panelNodes = panel.nodes.map((panelNodeId): GraphNode<N, L> => find(nodes, (n: GraphNode<N, L>) => panelNodeId === n._id))\n        return layoutNonConnectedAside ? panelNodes.filter((n: GraphNode<N, L>) => n._isConnected) : panelNodes\n      })\n    }\n  })\n}\n\nexport function setPanelBBox<N extends GraphInputNode, L extends GraphInputLink> (\n  panelConfig: GraphPanel,\n  panelNodes: Selection<BaseType, 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 using an approximation\n\n    const coords = {\n      x1: getX(d) - w / 2 - DEFAULT_PADDING, // We use d.x and d.y instead of bBox values here because gBBox contains initial ...\n      y1: getY(d) - h / 2 + yShift - DEFAULT_PADDING, // ... coordinates (before transition starts), not target coordinates\n      x2: getX(d) + w / 2 + DEFAULT_PADDING,\n      y2: getY(d) + h / 2 + yShift + DEFAULT_PADDING,\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\n  panelConfig._y = box.y1\n  panelConfig._width = box.x2 - box.x1\n  panelConfig._height = box.y2 - box.y1\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<BaseType, 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<BaseType, 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<BaseType, 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 getMaxPanelPadding<N extends GraphInputNode, L extends GraphInputLink> (panels: GraphPanel[]): number {\n  return panels?.length ? DEFAULT_PADDING + max(panels.map(d => d.padding ?? 0)) : 0\n}\n\nexport function getLabelTranslateTransform<N extends GraphInputNode, L extends GraphInputLink> (panel: GraphPanel): string {\n  const x = panel._width / 2\n  const dy = (panel.padding ?? DEFAULT_PADDING) + 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"],"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>, nodesSelection: Selection<SVGGElement, N, SVGGElement, N>): 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,103 @@
+import { select } from 'd3-selection';
+import { trimText } from '../../../../utils/text.js';
+import { smartTransition } from '../../../../utils/d3.js';
+import { setLabelRect } from '../node/helper.js';
+import { DEFAULT_PADDING, getLabelTranslateTransform, OUTLINE_SELECTION_PADDING, DEFAULT_SIDE_LABEL_SIZE } from './helper.js';
+import { panelSelection, panel, label, background, labelText, sideIconGroup, sideIconSymbol, panelSelectionActive, sideIconShape, customSideIcon } from './style.js';
+import { appendShape, updateShape } from '../shape.js';
+
+function createPanels(selection, nodesSelection) {
+    selection
+        .attr('transform', d => `translate(${d._x}, ${d._y})`)
+        .style('opacity', 0);
+    selection.append('rect').attr('class', panelSelection)
+        .attr('rx', 9)
+        .attr('ry', 9);
+    selection.append('rect').attr('class', panel)
+        .attr('rx', 7)
+        .attr('ry', 7)
+        .attr('x', d => -(d.padding || DEFAULT_PADDING))
+        .attr('y', d => -(d.padding || DEFAULT_PADDING))
+        .attr('width', d => d._width + (d.padding || DEFAULT_PADDING) * 2)
+        .attr('height', d => d._height + (d.padding || DEFAULT_PADDING) * 2);
+    const label$1 = selection.append('g').attr('class', label)
+        .attr('transform', getLabelTranslateTransform);
+    label$1.append('rect').attr('class', background);
+    label$1.append('text').attr('class', labelText)
+        .attr('dy', '0.32em');
+    const sideLabel = selection.append('g')
+        .attr('class', sideIconGroup)
+        .attr('transform', (d, i, elements) => {
+        const dx = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING;
+        const dy = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING;
+        return `translate(${d._width + dx}, ${-dy})`;
+    });
+    appendShape(sideLabel, (d) => d.sideIconShape, sideIconShape, customSideIcon);
+    sideLabel.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('x', d => -(d.padding || DEFAULT_PADDING))
+        .attr('y', d => -(d.padding || DEFAULT_PADDING))
+        .attr('width', d => d._width + (d.padding || DEFAULT_PADDING) * 2)
+        .attr('height', d => d._height + (d.padding || DEFAULT_PADDING) * 2)
+        .style('stroke', d => d.borderColor)
+        .style('stroke-width', d => d.borderWidth);
+    const panelSelectionOutlines = selection.selectAll(`.${panelSelection}`)
+        .data(d => [d])
+        .classed(panelSelectionActive, d => d.dashedOutline);
+    smartTransition(panelSelectionOutlines, duration)
+        .attr('x', d => -(d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING)
+        .attr('y', d => -(d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING)
+        .attr('width', d => d._width + (d.padding || DEFAULT_PADDING) * 2 + OUTLINE_SELECTION_PADDING * 2)
+        .attr('height', d => d._height + (d.padding || DEFAULT_PADDING) * 2 + OUTLINE_SELECTION_PADDING * 2);
+    const sideLabels = selection.selectAll(`.${sideIconGroup}`)
+        .data(d => [d]);
+    sideLabels.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);
+    sideLabels.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(sideLabels, duration)
+        .attr('transform', (d, i, elements) => {
+        const dx = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING;
+        const dy = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING;
+        return `translate(${d._width + dx}, ${-dy})`;
+    });
+    const labels = selection.selectAll(`.${label}`)
+        .data(d => [d]);
+    labels.select(`.${labelText}`)
+        .text(d => trimText(d.label));
+    smartTransition(labels, duration)
+        .attr('transform', getLabelTranslateTransform);
+    labels
+        .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 = trimText(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 { trimText } 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_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  nodesSelection: Selection<SVGGElement, N, SVGGElement, N>\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\n  selection.append('rect').attr('class', panelSelectors.panel)\n    .attr('rx', 7)\n    .attr('ry', 7)\n    .attr('x', d => -(d.padding || DEFAULT_PADDING))\n    .attr('y', d => -(d.padding || DEFAULT_PADDING))\n    .attr('width', d => d._width + (d.padding || DEFAULT_PADDING) * 2)\n    .attr('height', d => d._height + (d.padding || DEFAULT_PADDING) * 2)\n\n  const label = selection.append('g').attr('class', panelSelectors.label)\n    .attr('transform', getLabelTranslateTransform)\n  label.append('rect').attr('class', panelSelectors.background)\n  label.append('text').attr('class', panelSelectors.labelText)\n    .attr('dy', '0.32em')\n\n  const sideLabel = selection.append('g')\n    .attr('class', panelSelectors.sideIconGroup)\n    .attr('transform', (d, i, elements) => {\n      const dx = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING\n      const dy = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n  appendShape(sideLabel, (d: GraphPanel) => d.sideIconShape, panelSelectors.sideIconShape, panelSelectors.customSideIcon)\n  sideLabel.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(`.${panelSelectors.panel}`).data(d => [d])\n  smartTransition(panels, duration)\n    .attr('x', d => -(d.padding || DEFAULT_PADDING))\n    .attr('y', d => -(d.padding || DEFAULT_PADDING))\n    .attr('width', d => d._width + (d.padding || DEFAULT_PADDING) * 2)\n    .attr('height', d => d._height + (d.padding || DEFAULT_PADDING) * 2)\n    .style('stroke', d => d.borderColor)\n    .style('stroke-width', d => d.borderWidth)\n\n  const panelSelectionOutlines = selection.selectAll(`.${panelSelectors.panelSelection}`)\n    .data(d => [d])\n    .classed(panelSelectors.panelSelectionActive, d => d.dashedOutline)\n\n  smartTransition(panelSelectionOutlines, duration)\n    .attr('x', d => -(d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING)\n    .attr('y', d => -(d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING)\n    .attr('width', d => d._width + (d.padding || DEFAULT_PADDING) * 2 + OUTLINE_SELECTION_PADDING * 2)\n    .attr('height', d => d._height + (d.padding || DEFAULT_PADDING) * 2 + OUTLINE_SELECTION_PADDING * 2)\n\n  const sideLabels = selection.selectAll(`.${panelSelectors.sideIconGroup}`)\n    .data(d => [d])\n\n  sideLabels.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  sideLabels.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(sideLabels, duration)\n    .attr('transform', (d, i, elements) => {\n      const dx = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING\n      const dy = (d.padding || DEFAULT_PADDING) - OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n\n  const labels = selection.selectAll(`.${panelSelectors.label}`)\n    .data(d => [d])\n\n  labels.select(`.${panelSelectors.labelText}`)\n    .text(d => trimText(d.label))\n\n  smartTransition(labels, duration)\n    .attr('transform', getLabelTranslateTransform)\n\n  labels\n    .on('mouseover', (event: MouseEvent, d) => {\n      const label = select(event.currentTarget as SVGTextElement)\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(event.currentTarget as SVGTextElement)\n      const labelContent = trimText(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","label","panelSelectors.label","panelSelectors.background","panelSelectors.labelText","panelSelectors.sideIconGroup","panelSelectors.sideIconShape","panelSelectors.customSideIcon","panelSelectors.sideIconSymbol","panelSelectors.panelSelectionActive"],"mappings":"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"}

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/components/graph/modules/panel/style.js

@@ -0,0 +1,123 @@
+import { css, injectGlobal } from '@emotion/css';
+
+const panels = css `
+  label: panels;
+`;
+injectGlobal `
+  :root {
+    --vis-graph-panel-border-color: #E6E9F3;
+    --vis-graph-panel-border-opacity: 0.9;
+    --vis-graph-panel-fill-color: #ffffff;
+
+    --vis-graph-panel-label-color: #6c778c;
+    --vis-graph-panel-label-background: #ffffff;
+    --vis-graph-panel-label-font-family: var(--vis-font-family);
+    --vis-graph-panel-label-font-size: 10pt;
+    --vis-graph-panel-label-font-weight: 300;
+
+    --vis-graph-panel-dashed-outline-color: #b7b7b7;
+
+    --vis-graph-panel-side-icon-symbol-color: #9ea7b8;
+    --vis-graph-panel-side-icon-shape-fill-color: #ffffff;
+
+    --vis-dark-graph-panel-border-color: var(--vis-color-gray);
+    --vis-dark-graph-panel-fill-color: #292b34;
+    --vis-dark-graph-panel-label-color: #E6E9F3;
+    --vis-dark-graph-panel-label-background: var(--vis-color-gray);
+    --vis-dark-graph-panel-side-icon-symbol-color: #ffffff;
+    --vis-dark-graph-panel-side-icon-shape-fill-color: #6c778c;
+    --vis-dark-graph-panel-border-color: #a0a6ad;
+  }
+
+  body.theme-dark ${`.${panels}`} {
+    --vis-graph-panel-border-color: var(--vis-dark-graph-panel-border-color);
+    --vis-graph-panel-fill-color: var(--vis-dark-graph-panel-fill-color);
+    --vis-graph-panel-label-color: var(--vis-dark-graph-panel-label-color);
+    --vis-graph-panel-label-background: var(--vis-dark-graph-panel-label-background);
+    --vis-graph-panel-side-icon-symbol-color: var(--vis-dark-graph-panel-side-icon-symbol-color);
+    --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);
+  }
+`;
+const gPanel = css `
+  label: g-panel;
+`;
+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);
+`;
+const label = css `
+  label: label;
+
+  fill: var(--vis-graph-panel-label-color);
+`;
+const background = css `
+  label: background;
+
+  opacity: 0.9;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  fill: var(--vis-graph-panel-label-background);
+  stroke: none;
+`;
+const labelText = css `
+  label: label-text;
+
+  text-anchor: middle;
+  font-size: var(--vis-graph-panel-label-font-size);
+  font-weight: var(--vis-graph-panel-label-font-weight);;
+  cursor: default;
+  stroke: none;
+  font-family: var(--vis-graph-panel-label-font-family);
+`;
+const panelSelectionActive = css `
+  label: active;
+`;
+const panelSelection = css `
+  label: panel-selection-outline;
+
+  opacity: 0;
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  fill: var(--vis-graph-node-selection-color);
+  fill-opacity: 0.1;
+  stroke: var(--vis-graph-panel-dashed-outline-color);
+  stroke-opacity: 0;
+
+  &${`.${panelSelectionActive}`} {
+    opacity: 1;
+    stroke-opacity: 0.75;
+  }
+`;
+css `
+  label: greyout;
+  opacity: 0.4;
+`;
+const sideIconGroup = css `
+  label: side-icon-group;
+`;
+const sideIconShape = css `
+  label: side-icon-shape;
+
+  fill: var(--vis-graph-panel-side-icon-shape-fill-color);
+  stroke-width: 2px;
+`;
+const customSideIcon = css `
+  label: side-icon-custom;
+`;
+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);
+  stroke: none;
+  dominant-baseline: middle;
+  text-anchor: middle;
+  pointer-events: none;
+  cursor: default;
+`;
+
+export { background, customSideIcon, gPanel, label, labelText, panel, panelSelection, panelSelectionActive, panels, sideIconGroup, sideIconShape, sideIconSymbol };
+//# 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    --vis-graph-panel-label-font-family: var(--vis-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-gray);\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-gray);\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);\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;AAEwB,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BjB,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;AAEsB,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,7 @@
+import { Selection } from 'd3-selection';
+import { NumericAccessor, StringAccessor } from "../../../types/accessor";
+import { GraphInputLink, GraphInputNode } from "../../../types/graph";
+import { GraphNode, GraphPanel, GraphNodeShape } from '../types';
+export declare function isCustomXml(shape: GraphNodeShape): boolean;
+export declare function appendShape<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphNode<N, L> | GraphPanel, SVGGElement, unknown>, shapeAccessor: StringAccessor<GraphNode<N, L> | GraphPanel>, shapeSelector: string, customShapeSelector: string, index?: number, insertSelector?: string): void;
+export declare function updateShape<N extends GraphInputNode, L extends GraphInputLink>(selection: Selection<SVGGElement, GraphNode<N, L> | GraphPanel, SVGGElement, unknown>, shape: StringAccessor<GraphNode<N, L> | GraphPanel>, size: NumericAccessor<GraphNode<N, L> | GraphPanel>, 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\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Local Types\nimport { GraphNode, GraphPanel, 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<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphNode<N, L> | GraphPanel, SVGGElement, unknown>,\n  shapeAccessor: StringAccessor<GraphNode<N, L> | GraphPanel>,\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<N extends GraphInputNode, L extends GraphInputLink> (\n  selection: Selection<SVGGElement, GraphNode<N, L> | GraphPanel, SVGGElement, unknown>,\n  shape: StringAccessor<GraphNode<N, L> | GraphPanel>,\n  size: NumericAccessor<GraphNode<N, L> | GraphPanel>,\n  index: number\n): void {\n  if (selection.size() === 0) return\n\n  const d: GraphNode<N, L> | GraphPanel = 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;