@unovis/ts 1.4.2-beta.0 → 1.5.0-alpha.0

package/components/graph/config.js

@@ -3,7 +3,7 @@ import { TrimMode } from '../../types/text.js';
 import { GraphLayoutType, GraphLinkStyle, GraphNodeShape } from './types.js';
 
 // Config
-const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
+const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, disableDrag: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
         linkDistance: 60,
         linkStrength: 0.45,
         charge: -500,
@@ -14,7 +14,7 @@ const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfi
     }, dagreLayoutSettings: {
         rankdir: 'BT',
         ranker: 'longest-path',
-    }, layoutElkSettings: undefined, layoutElkNodeGroups: undefined, linkFlowAnimDuration: 20000, linkFlowParticleSize: 2, linkWidth: 1, linkStyle: GraphLinkStyle.Solid, linkBandWidth: 0, linkArrow: undefined, linkStroke: undefined, linkFlow: false, linkLabel: undefined, linkLabelShiftFromCenter: true, linkNeighborSpacing: 8, linkDisabled: false, linkCurvature: 0, selectedLinkId: undefined, nodeGaugeAnimDuration: 1500, nodeSize: 30, nodeStrokeWidth: 3, nodeShape: GraphNodeShape.Circle, nodeGaugeValue: 0, nodeIcon: (n) => n.icon, nodeIconSize: undefined, nodeLabel: (n) => n.label, nodeLabelTrim: true, nodeLabelTrimLength: 15, nodeLabelTrimMode: TrimMode.Middle, nodeSubLabel: '', nodeSubLabelTrim: true, nodeSubLabelTrimLength: 15, nodeSubLabelTrimMode: TrimMode.Middle, nodeSideLabels: undefined, nodeBottomIcon: undefined, nodeDisabled: false, nodeFill: (n) => n.fill, nodeGaugeFill: undefined, nodeStroke: (n) => n.stroke, nodeEnterPosition: undefined, nodeEnterScale: 0.75, nodeExitPosition: undefined, nodeExitScale: 0.75, nodeSort: undefined, selectedNodeId: undefined, selectedNodeIds: undefined, panels: undefined, onNodeDragStart: undefined, onNodeDrag: undefined, onNodeDragEnd: undefined, onZoom: undefined, onLayoutCalculated: undefined, onNodeSelectionBrush: undefined, onNodeSelectionDrag: undefined });
+    }, layoutElkSettings: undefined, layoutElkNodeGroups: undefined, linkFlowAnimDuration: 20000, linkFlowParticleSize: 2, linkWidth: 1, linkStyle: GraphLinkStyle.Solid, linkBandWidth: 0, linkArrow: undefined, linkStroke: undefined, linkFlow: false, linkLabel: undefined, linkLabelShiftFromCenter: true, linkNeighborSpacing: 8, linkDisabled: false, linkCurvature: 0, selectedLinkId: undefined, nodeGaugeAnimDuration: 1500, nodeSize: 30, nodeStrokeWidth: 3, nodeShape: GraphNodeShape.Circle, nodeGaugeValue: 0, nodeIcon: (n) => n.icon, nodeIconSize: undefined, nodeLabel: (n) => n.label, nodeLabelTrim: true, nodeLabelTrimLength: 15, nodeLabelTrimMode: TrimMode.Middle, nodeSubLabel: '', nodeSubLabelTrim: true, nodeSubLabelTrimLength: 15, nodeSubLabelTrimMode: TrimMode.Middle, nodeSideLabels: undefined, nodeBottomIcon: undefined, nodeDisabled: false, nodeFill: (n) => n.fill, nodeGaugeFill: undefined, nodeStroke: (n) => n.stroke, nodeEnterPosition: undefined, nodeEnterScale: 0.75, nodeExitPosition: undefined, nodeExitScale: 0.75, nodeSort: undefined, selectedNodeId: undefined, panels: undefined, onNodeDragStart: undefined, onNodeDrag: undefined, onNodeDragEnd: undefined, onZoom: undefined, onLayoutCalculated: undefined, onRenderComplete: undefined });
 
 export { GraphDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/graph/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent } from 'd3-zoom'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n} from './types'\n\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles. Default: `20000` */\n  linkFlowAnimDuration?: number;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: number;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel, L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /**\n   * @deprecated Use `selectedNodeIds` instead for single or multiple node selection.\n   * Set selected node by unique id. Default: `undefined`\n   */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (n: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  selectedLinkId: undefined,\n  nodeGaugeAnimDuration: 1500,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles. Default: `20000` */\n  linkFlowAnimDuration?: number;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: number;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel, L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?: (datum: GraphNode<N, L>, nodeGroupElement: SVGGElement, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?: (datum: GraphNode<N, L>, nodeGroupElement: SVGGElement, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?: (datum: GraphNode<N, L>, nodeGroupElement: SVGGElement, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (n: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number\n  ) => void;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  disableDrag: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  selectedLinkId: undefined,\n  nodeGaugeAnimDuration: 1500,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n\n  selectedNodeId: undefined,\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onLayoutCalculated: undefined,\n  onRenderComplete: undefined,\n}\n"],"names":[],"mappings":"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"}

package/components/graph/index.d.ts

@@ -12,6 +12,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
 }, GraphConfigInterface<N, L>> {
     static selectors: {
         root: string;
+        graphGroup: string;
         background: string;
         node: string;
         nodeShape: string;
@@ -36,18 +37,18 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     protected _defaultConfig: GraphConfigInterface<N, L>;
     config: GraphConfigInterface<N, L>;
     datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>;
-    private _selectedNodes;
+    private _selectedNode;
     private _selectedLink;
     private _graphGroup;
     private _panelsGroup;
     private _linksGroup;
     private _nodesGroup;
-    private _brush;
     private _timer;
     private _isFirstRender;
     private _prevWidth;
     private _prevHeight;
     private _shouldRecalculateLayout;
+    private _currentLayoutType;
     private _layoutCalculationPromise;
     private _shouldFitLayout;
     private _shouldSetPanels;
@@ -59,8 +60,6 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _scale;
     private _initialTransform;
     private _isDragging;
-    private _brushBehavior;
-    private _groupDragInit;
     events: {
         [x: string]: {
             click: () => void;
@@ -76,9 +75,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
             mouseout: (d: GraphLink<N, L>) => void;
         };
     };
-    /** @deprecated Use selectedNodes instead */
     get selectedNode(): GraphNode<N, L>;
-    get selectedNodes(): GraphNode<N, L>[];
     get selectedLink(): GraphLink<N, L>;
     constructor(config?: GraphConfigInterface<N, L>);
     setData(data: {
@@ -97,7 +94,6 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _fit;
     private _getTransform;
     private _selectNode;
-    private _selectNodes;
     private _selectLink;
     private _resetSelection;
     private _updateSelectedElements;
@@ -110,15 +106,9 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _onLinkMouseOut;
     private _onLinkFlowTimerFrame;
     private _onZoom;
-    private _updateNodePosition;
-    private _onBrush;
-    private _handleDrag;
     private _onDragStarted;
     private _onDragged;
     private _onDragEnded;
-    private _dragSelectedNodes;
-    private _activateBrush;
-    private _clearBrush;
     private _shouldLayoutRecalculate;
     private _getLinkArrowDefId;
     private _addSVGDefs;

package/components/graph/index.js

@@ -1,7 +1,6 @@
 import { __awaiter } from 'tslib';
 import { min, max } from 'd3-array';
 import { select, pointer } from 'd3-selection';
-import { brush as brush$1 } from 'd3-brush';
 import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
 import { drag } from 'd3-drag';
 import { interval } from 'd3-timer';
@@ -11,12 +10,12 @@ import { isNumber, clamp, getBoolean, isFunction, shallowDiff } from '../../util
 import { smartTransition } from '../../utils/d3.js';
 import { GraphLayoutType, GraphLinkArrowStyle } from './types.js';
 import { GraphDefaultConfig } from './config.js';
-import { background, graphGroup, brush, root } from './style.js';
+import { background, graphGroup, root } from './style.js';
 import * as style from './modules/node/style.js';
-import { nodes, gNode, gNodeExit, brushed, brushable, node, nodeGauge, sideLabelGroup, label, greyedOutNode } from './modules/node/style.js';
+import { nodes, gNode, gNodeExit, node, nodeGauge, sideLabelGroup, label, greyedOutNode } from './modules/node/style.js';
 import { links, gLink, gLinkExit, link, greyedOutLink } from './modules/link/style.js';
 import { panels, gPanel, panel, panelSelection, label as label$1, labelText, sideIconGroup, sideIconShape, sideIconSymbol } from './modules/panel/style.js';
-import { createNodes, updateNodes, removeNodes, updateSelectedNodes, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
+import { createNodes, updateNodes, removeNodes, updateNodeSelectedGreyout, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
 import { getMaxNodeSize, getX, getY, getNodeSize } from './modules/node/helper.js';
 import { createLinks, updateLinks, removeLinks, updateSelectedLinks, animateLinkFlow, zoomLinksThrottled, zoomLinks } from './modules/link/index.js';
 import { getArrowPath, getDoubleArrowPath } from './modules/link/helper.js';
@@ -54,28 +53,17 @@ class Graph extends ComponentCore {
             this.setConfig(config);
         this._backgroundRect = this.g.append('rect').attr('class', background);
         this._graphGroup = this.g.append('g').attr('class', graphGroup);
-        this._brush = this.g.append('g').attr('class', brush);
         this._zoomBehavior = zoom()
             .scaleExtent(this.config.zoomScaleExtent)
-            .on('zoom', (e) => this._onZoom(e.transform, e))
-            .filter(event => !event.shiftKey);
-        this._brushBehavior = brush$1()
-            .on('start brush end', this._onBrush.bind(this))
-            .filter(event => event.shiftKey)
-            .keyModifiers(false);
+            .on('zoom', (e) => this._onZoom(e.transform, e));
         this._panelsGroup = this._graphGroup.append('g').attr('class', panels);
         this._linksGroup = this._graphGroup.append('g').attr('class', links);
         this._nodesGroup = this._graphGroup.append('g').attr('class', nodes);
         this._defs = this._graphGroup.append('defs');
         this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this);
     }
-    /** @deprecated Use selectedNodes instead */
     get selectedNode() {
-        var _a;
-        return (_a = this._selectedNodes) === null || _a === void 0 ? void 0 : _a[0];
-    }
-    get selectedNodes() {
-        return this._selectedNodes;
+        return this._selectedNode;
     }
     get selectedLink() {
         return this._selectedLink;
@@ -94,6 +82,8 @@ class Graph extends ComponentCore {
         super.setConfig(config);
         this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate();
         this._shouldFitLayout = this._shouldFitLayout || this._shouldRecalculateLayout;
+        if (this._shouldFitLayout)
+            this._isAutoFitDisabled = false;
         this._shouldSetPanels = true;
     }
     get bleed() {
@@ -101,7 +91,7 @@ class Graph extends ComponentCore {
         return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding };
     }
     _render(customDuration) {
-        const { config: { disableBrush, disableZoom, duration, layoutAutofit }, datamodel } = this;
+        const { config: { disableZoom, duration, layoutAutofit }, datamodel } = this;
         if (!datamodel.nodes && !datamodel.links)
             return;
         const animDuration = isNumber(customDuration) ? customDuration : duration;
@@ -115,31 +105,18 @@ class Graph extends ComponentCore {
             this._prevWidth = this._width;
             this._prevHeight = this._height;
         }
-        // Handle brush behavior
-        if (!disableBrush) {
-            this._brushBehavior.extent([[0, 0], [this._width, this._height]]);
-            this._brush.call(this._brushBehavior);
-            // Activate the brush when the shift key is pressed
-            select(window)
-                .on('keydown.unovis-graph', e => e.key === 'Shift' && this._activateBrush())
-                .on('keyup.unovis-graph', e => e.key === 'Shift' && this._clearBrush());
-            this._zoomBehavior.filter(event => !event.shiftKey);
-        }
-        else {
-            this._brush.on('.brush', null);
-            select(window)
-                .on('keydown.unovis-graph', null)
-                .on('keyup.unovis-graph', null);
-            // Clear brush in case it was disabled in an active state
-            if (this._brush.classed('active'))
-                this._clearBrush();
-        }
         // Apply layout and render
         if (this._shouldRecalculateLayout || !this._layoutCalculationPromise) {
             this._layoutCalculationPromise = this._calculateLayout();
+            // Call `onLayoutCalculated` after the layout calculation is done and the `this._layoutCalculationPromise`
+            // variable is set because the `fitView` function relies on the promise to be initialized
+            this._layoutCalculationPromise.then(() => {
+                var _a, _b;
+                (_b = (_a = this.config).onLayoutCalculated) === null || _b === void 0 ? void 0 : _b.call(_a, datamodel.nodes, datamodel.links);
+            });
         }
         this._layoutCalculationPromise.then((isFirstRender) => {
-            var _a;
+            var _a, _b;
             // If the component has been destroyed while the layout calculation
             // was in progress, we cancel the render
             if (this.isDestroyed())
@@ -159,10 +136,9 @@ class Graph extends ComponentCore {
             this._drawLinks(animDuration);
             // Select Links / Nodes
             this._resetSelection();
-            if (this.config.selectedNodeId || this.config.selectedNodeIds) {
-                const selectedIds = (_a = this.config.selectedNodeIds) !== null && _a !== void 0 ? _a : [this.config.selectedNodeId];
-                const selectedNodes = selectedIds.map(id => datamodel.getNodeFromId(id));
-                this._selectNodes(selectedNodes);
+            if (this.config.selectedNodeId) {
+                const selectedNode = datamodel.nodes.find(node => node.id === this.config.selectedNodeId);
+                this._selectNode(selectedNode);
             }
             if (this.config.selectedLinkId) {
                 const selectedLink = datamodel.links.find(link => link.id === this.config.selectedLinkId);
@@ -194,6 +170,8 @@ class Graph extends ComponentCore {
             // calculation and they were not set up properly (see the render function of `ComponentCore`)
             this._setUpComponentEventsThrottled();
             this._setCustomAttributesThrottled();
+            // On render complete callback
+            (_b = (_a = this.config).onRenderComplete) === null || _b === void 0 ? void 0 : _b.call(_a, this.g, datamodel.nodes, datamodel.links, this.config, animDuration, this._scale);
         });
         this._isFirstRender = false;
     }
@@ -205,21 +183,21 @@ class Graph extends ComponentCore {
             .data(nodes, d => String(d._id));
         const nodeGroupsEnter = nodeGroups.enter().append('g')
             .attr('class', gNode)
-            .call(createNodes, config, duration);
+            .call(createNodes, config, duration, this._scale);
         const nodeGroupsMerged = nodeGroups.merge(nodeGroupsEnter);
         const nodeUpdateSelection = updateNodes(nodeGroupsMerged, config, duration, this._scale);
         this._drawPanels(nodeUpdateSelection, duration);
         const nodesGroupExit = nodeGroups.exit();
         nodesGroupExit
             .classed(gNodeExit, true)
-            .call(removeNodes, config, duration);
+            .call(removeNodes, config, duration, this._scale);
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const thisRef = this;
         if (!config.disableDrag) {
             const dragBehaviour = drag()
-                .on('start drag end', function (event, d) {
-                thisRef._handleDrag(d, event, select(this));
-            });
+                .on('start', function (event, d) { thisRef._onDragStarted(d, event, select(this)); })
+                .on('drag', function (event, d) { thisRef._onDragged(d, event, nodeGroupsMerged); })
+                .on('end', function (event, d) { thisRef._onDragEnded(d, event, select(this)); });
             nodeGroupsMerged.call(dragBehaviour);
         }
         else {
@@ -272,10 +250,16 @@ class Graph extends ComponentCore {
         panelToUpdate.call(updatePanels, config, duration);
     }
     _calculateLayout() {
-        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             const { config, datamodel } = this;
             const firstRender = this._isFirstRender;
+            // If the layout type has changed, we need to reset the node positions if they were fixed before
+            if (this._currentLayoutType !== config.layoutType) {
+                for (const node of datamodel.nodes) {
+                    delete node._state.fx;
+                    delete node._state.fy;
+                }
+            }
             switch (config.layoutType) {
                 case GraphLayoutType.Precalculated:
                     break;
@@ -305,8 +289,8 @@ class Graph extends ComponentCore {
             // We need to update the panels data right after the layout calculation
             // because we want to have the latest coordinates before calling `onLayoutCalculated`
             this._initPanelsData();
-            (_b = (_a = this.config).onLayoutCalculated) === null || _b === void 0 ? void 0 : _b.call(_a, datamodel.nodes, datamodel.links);
             this._shouldRecalculateLayout = false;
+            this._currentLayoutType = config.layoutType;
             return firstRender;
         });
     }
@@ -356,9 +340,21 @@ class Graph extends ComponentCore {
         return transform;
     }
     _selectNode(node) {
-        const { datamodel: { links } } = this;
+        const { datamodel: { nodes, links } } = this;
         if (!node)
             console.warn('Unovis | Graph: Select Node: Not found');
+        this._selectedNode = node;
+        // Apply grey out
+        // Grey out all nodes
+        nodes.forEach(n => {
+            n._state.selected = false;
+            n._state.greyout = true;
+        });
+        // Grey out all links
+        links.forEach(l => {
+            l._state.greyout = true;
+            l._state.selected = false;
+        });
         // Highlight selected
         if (node) {
             node._state.selected = true;
@@ -374,24 +370,6 @@ class Graph extends ComponentCore {
         }
         this._updateSelectedElements();
     }
-    _selectNodes(nodes) {
-        // Apply grey out
-        // Grey out all nodes
-        this.datamodel.nodes.forEach(n => {
-            n._state.selected = false;
-            n._state.greyout = true;
-        });
-        // Grey out all links
-        this.datamodel.links.forEach(l => {
-            l._state.greyout = true;
-            l._state.selected = false;
-        });
-        nodes.forEach(n => {
-            this._selectedNodes.push(n);
-            this._selectNode(n);
-        });
-        this._updateSelectedElements();
-    }
     _selectLink(link) {
         const { datamodel: { nodes, links } } = this;
         if (!link)
@@ -426,7 +404,7 @@ class Graph extends ComponentCore {
     }
     _resetSelection() {
         const { datamodel: { nodes, links } } = this;
-        this._selectedNodes = [];
+        this._selectedNode = undefined;
         this._selectedLink = undefined;
         // Disable Grayout
         nodes.forEach(n => {
@@ -444,7 +422,7 @@ class Graph extends ComponentCore {
         const linkElements = this._linksGroup.selectAll(`.${gLink}`);
         linkElements.call(updateSelectedLinks, config, this._scale);
         const nodeElements = this._nodesGroup.selectAll(`.${gNode}`);
-        nodeElements.call(updateSelectedNodes, config);
+        nodeElements.call(updateNodeSelectedGreyout, config);
         // this._drawPanels(nodeElements, 0)
     }
     _onBackgroundClick() {
@@ -516,17 +494,27 @@ class Graph extends ComponentCore {
         this._linksGroup.selectAll(`.${gLink}`)
             .call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks), config, this._scale, this._getLinkArrowDefId);
     }
-    _updateNodePosition(d, x, y) {
-        var _a, _b;
+    _onDragStarted(d, event, nodeSelection) {
+        var _a;
+        const { config } = this;
+        this._isDragging = true;
+        d._state.isDragged = true;
+        nodeSelection.call(updateNodes, config, 0, this._scale);
+        (_a = config.onNodeDragStart) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
+    }
+    _onDragged(d, event, allNodesSelection) {
+        var _a, _b, _c;
+        const { config } = this;
         const transform = zoomTransform(this.g.node());
         const scale = transform.k;
         // Prevent the node from being dragged offscreen or outside its panel
         const panels = (_b = (_a = this._panels) === null || _a === void 0 ? void 0 : _a.filter(p => p.nodes.includes(d._id))) !== null && _b !== void 0 ? _b : [];
-        const nodeSizeValue = getNodeSize(d, this.config.nodeSize, d._index);
+        const nodeSizeValue = getNodeSize(d, config.nodeSize, d._index);
         const maxY = min([(this._height - transform.y) / scale, ...panels.map(p => p._y + p._height)]) - nodeSizeValue / 2;
         const maxX = min([(this._width - transform.x) / scale, ...panels.map(p => p._x + p._width)]) - nodeSizeValue / 2;
         const minY = max([-transform.y / scale, ...panels.map(p => p._y)]) + nodeSizeValue / 2;
         const minX = max([-transform.x / scale, ...panels.map(p => p._x)]) + nodeSizeValue / 2;
+        let [x, y] = pointer(event, this._graphGroup.node());
         if (y < minY)
             y = minY;
         else if (y > maxY)
@@ -547,62 +535,6 @@ class Graph extends ComponentCore {
             delete d._state.fx;
         if (d._state.fy === d.y)
             delete d._state.fy;
-    }
-    _onBrush(event) {
-        var _a;
-        if (!event.selection || !event.sourceEvent)
-            return;
-        const { config } = this;
-        const transform = zoomTransform(this._graphGroup.node());
-        const [xMin, yMin] = transform.invert(event.selection[0]);
-        const [xMax, yMax] = transform.invert(event.selection[1]);
-        // Update brushed nodes
-        this._nodesGroup.selectAll(`.${gNode}`)
-            .each(n => {
-            const x = getX(n);
-            const y = getY(n);
-            n._state.brushed = x >= xMin && x <= xMax && y >= yMin && y <= yMax;
-        })
-            .classed(brushed, n => n._state.brushed);
-        const brushedNodes = this._nodesGroup.selectAll(`.${brushed}`)
-            .call(updateSelectedNodes, config, 0, this._scale);
-        this._brush.classed('active', event.type !== 'end');
-        (_a = config.onNodeSelectionBrush) === null || _a === void 0 ? void 0 : _a.call(config, brushedNodes.data(), event);
-    }
-    _handleDrag(d, event, nodeSelection) {
-        if (event.sourceEvent.shiftKey && d._state.brushed) {
-            this._dragSelectedNodes(event);
-        }
-        else if (!event.sourceEvent.shiftKey) {
-            switch (event.type) {
-                case 'start':
-                    this._onDragStarted(d, event, nodeSelection);
-                    break;
-                case 'drag':
-                    this._onDragged(d, event);
-                    break;
-                case 'end':
-                    this._onDragEnded(d, event, nodeSelection);
-                    break;
-            }
-        }
-    }
-    _onDragStarted(d, event, nodeSelection) {
-        var _a;
-        const { config } = this;
-        this._isDragging = true;
-        d._state.isDragged = true;
-        nodeSelection.call(updateNodes, config, 0, this._scale);
-        (_a = config.onNodeDragStart) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
-    }
-    _onDragged(d, event) {
-        var _a;
-        const { config } = this;
-        const transform = zoomTransform(this.g.node());
-        const scale = transform.k;
-        // Update node position
-        const [x, y] = pointer(event, this._graphGroup.node());
-        this._updateNodePosition(d, x, y);
         // Update affected DOM elements
         const nodeSelection = this._nodesGroup.selectAll(`.${gNode}`);
         const nodeToUpdate = nodeSelection.filter((n) => n._id === d._id);
@@ -617,7 +549,7 @@ class Graph extends ComponentCore {
         const linksToAnimate = linksToUpdate.filter(d => d._state.greyout);
         if (linksToAnimate.size())
             animateLinkFlow(linksToAnimate, config, this._scale);
-        (_a = config.onNodeDrag) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
+        (_c = config.onNodeDrag) === null || _c === void 0 ? void 0 : _c.call(config, d, event);
     }
     _onDragEnded(d, event, nodeSelection) {
         var _a;
@@ -627,49 +559,6 @@ class Graph extends ComponentCore {
         nodeSelection.call(updateNodes, config, 0, this._scale);
         (_a = config.onNodeDragEnd) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
-    _dragSelectedNodes(event) {
-        var _a, _b;
-        const { config } = this;
-        const curr = pointer(event, this._graphGroup.node());
-        const selectedNodes = smartTransition(this._nodesGroup.selectAll(`.${brushed}`));
-        if (event.type === 'start') {
-            this._groupDragInit = curr;
-            this._isDragging = true;
-            selectedNodes.each(n => {
-                n.x = getX(n);
-                n.y = getY(n);
-                n._state.isDragged = true;
-            });
-        }
-        else if (event.type === 'drag') {
-            const dx = curr[0] - this._groupDragInit[0];
-            const dy = curr[1] - this._groupDragInit[1];
-            selectedNodes.each(n => this._updateNodePosition(n, n.x + dx, n.y + dy));
-            const connectedLinks = smartTransition(this._linksGroup.selectAll(`.${gLink}`)
-                .filter(l => { var _a, _b, _c, _d; return ((_b = (_a = l.source) === null || _a === void 0 ? void 0 : _a._state) === null || _b === void 0 ? void 0 : _b.isDragged) || ((_d = (_c = l.target) === null || _c === void 0 ? void 0 : _c._state) === null || _d === void 0 ? void 0 : _d.isDragged); }));
-            connectedLinks.call(updateLinks, this.config, 0, this._scale, this._getLinkArrowDefId);
-        }
-        else {
-            this._isDragging = false;
-            selectedNodes.each(n => { n._state.isDragged = false; });
-        }
-        selectedNodes.call(updateNodes, config, 0, this._scale);
-        (_b = (_a = this.config).onNodeSelectionDrag) === null || _b === void 0 ? void 0 : _b.call(_a, selectedNodes.data(), event);
-    }
-    _activateBrush() {
-        this._brush.classed('active', true);
-        this._nodesGroup.selectAll(`.${gNode}`)
-            .classed(brushable, true);
-    }
-    _clearBrush() {
-        var _a;
-        this._brush.classed('active', false).call((_a = this._brushBehavior) === null || _a === void 0 ? void 0 : _a.clear);
-        this._nodesGroup.selectAll(`.${gNode}`)
-            .classed(brushable, false)
-            .classed(brushed, false)
-            .each(n => { n._state.brushed = false; })
-            .call(updateSelectedNodes, this.config, 0, this._scale);
-    }
     _shouldLayoutRecalculate() {
         const { prevConfig, config } = this;
         if (prevConfig.layoutType !== config.layoutType)
@@ -765,6 +654,7 @@ class Graph extends ComponentCore {
 }
 Graph.selectors = {
     root: root,
+    graphGroup: graphGroup,
     background: background,
     node: gNode,
     nodeShape: node,