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

package/src/components/graph/index.ts

@@ -0,0 +1,809 @@
+import { min, max } from 'd3-array'
+import { Transition } from 'd3-transition'
+import { select, Selection, pointer } from 'd3-selection'
+import { zoom, zoomTransform, zoomIdentity, ZoomTransform, D3ZoomEvent, ZoomBehavior } from 'd3-zoom'
+import { drag, D3DragEvent } from 'd3-drag'
+import { interval, Timer } from 'd3-timer'
+
+// Core
+import { ComponentCore } from 'core/component'
+import { GraphDataModel } from 'data-models/graph'
+
+// Types
+import { GraphInputLink, GraphInputNode } from 'types/graph'
+import { Spacing } from 'types/spacing'
+
+// Utils
+import { isNumber, clamp, clean, unique, shallowDiff, isFunction, getBoolean } from 'utils/data'
+import { stringToHtmlId } from 'utils/misc'
+import { smartTransition } from 'utils/d3'
+
+// Local Types
+import { GraphNode, GraphLink, GraphLayoutType, GraphLinkArrowStyle, GraphPanel } from './types'
+
+// Config
+import { GraphConfig, GraphConfigInterface } from './config'
+
+// Styles
+import * as generalSelectors from './style'
+import * as nodeSelectors from './modules/node/style'
+import * as linkSelectors from './modules/link/style'
+import * as panelSelectors from './modules/panel/style'
+
+// Modules
+import { createNodes, updateNodes, removeNodes, zoomNodesThrottled, zoomNodes, updateSelectedNodes } from './modules/node'
+import { getMaxNodeSize, getNodeSize, getX, getY } from './modules/node/helper'
+import { createLinks, updateLinks, removeLinks, zoomLinksThrottled, zoomLinks, animateLinkFlow, updateSelectedLinks } from './modules/link'
+import { LINK_MARKER_WIDTH, LINK_MARKER_HEIGHT, getDoubleArrowPath, getArrowPath, getLinkColor, getLinkArrow } from './modules/link/helper'
+import { createPanels, updatePanels, removePanels } from './modules/panel'
+import { setPanelForNodes, updatePanelBBoxSize, updatePanelNumNodes, initPanels } from './modules/panel/helper'
+import { applyLayoutCircular, applyLayoutParallel, applyLayoutDagre, applyLayoutConcentric, applyLayoutForce, applyELKLayout } from './modules/layout'
+
+export class Graph<
+  N extends GraphInputNode,
+  L extends GraphInputLink,
+> extends ComponentCore<
+  {nodes: N[]; links?: L[]},
+  GraphConfig<N, L>,
+  GraphConfigInterface<N, L>
+  > {
+  static selectors = {
+    root: generalSelectors.root,
+    background: generalSelectors.background,
+    node: nodeSelectors.gNode,
+    nodeShape: nodeSelectors.node,
+    nodeGauge: nodeSelectors.nodeGauge,
+    nodeSideLabel: nodeSelectors.sideLabelGroup,
+    nodeLabel: nodeSelectors.label,
+    link: linkSelectors.gLink,
+    linkLine: linkSelectors.link,
+    panel: panelSelectors.gPanel,
+    panelRect: panelSelectors.panel,
+    panelSelection: panelSelectors.panelSelection,
+    panelLabel: panelSelectors.label,
+    panelLabelText: panelSelectors.labelText,
+    panelSideIcon: panelSelectors.sideIconGroup,
+    panelSideIconShape: panelSelectors.sideIconShape,
+    panelSideIconSymbol: panelSelectors.sideIconSymbol,
+  }
+
+  static nodeSelectors = nodeSelectors
+  g: Selection<SVGGElement, unknown, null, undefined>
+  config: GraphConfig<N, L> = new GraphConfig()
+  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>> = new GraphDataModel()
+  private _selectedNode: GraphNode<N>
+  private _selectedLink: GraphLink<N, L>
+
+  private _graphGroup: Selection<SVGGElement, unknown, SVGGElement, undefined>
+  private _panelsGroup: Selection<SVGGElement, unknown, SVGGElement, undefined>
+  private _linksGroup: Selection<SVGGElement, unknown, SVGGElement, undefined>
+  private _nodesGroup: Selection<SVGGElement, unknown, SVGGElement, undefined>
+  private _timer: Timer
+
+  private _isFirstRender = true
+  private _prevWidth: number
+  private _prevHeight: number
+  private _shouldRecalculateLayout = false
+
+  private _shouldFitLayout: boolean
+  private _shouldSetPanels = false
+  private _panels: GraphPanel[]
+
+  private _defs: Selection<SVGDefsElement, unknown, SVGGElement, undefined>
+  private _backgroundRect: Selection<SVGRectElement, unknown, SVGGElement, undefined>
+  private _zoomBehavior: ZoomBehavior<SVGGElement, unknown>
+  private _isAutoFitDisabled = false
+  private _scale: number
+  private _initialTransform
+  private _isDragging = false
+
+  events = {
+    [Graph.selectors.background]: {
+      click: this._onBackgroundClick.bind(this),
+    },
+    [Graph.selectors.node]: {
+      click: this._onNodeClick.bind(this),
+      mouseover: this._onNodeMouseOver.bind(this),
+      mouseout: this._onNodeMouseOut.bind(this),
+    },
+    [Graph.selectors.link]: {
+      click: this._onLinkClick.bind(this),
+      mouseover: this._onLinkMouseOver.bind(this),
+      mouseout: this._onLinkMouseOut.bind(this),
+    },
+  }
+
+  public get selectedNode (): GraphNode<N> {
+    return this._selectedNode
+  }
+
+  public get selectedLink (): GraphLink<N, L> {
+    return this._selectedLink
+  }
+
+  constructor (config?: GraphConfigInterface<N, L>) {
+    super()
+    if (config) this.config.init(config)
+
+    this._backgroundRect = this.g.append('rect').attr('class', generalSelectors.background)
+    this._graphGroup = this.g.append('g').attr('class', generalSelectors.graphGroup)
+
+    this._zoomBehavior = zoom<SVGGElement, unknown>()
+      .scaleExtent(this.config.zoomScaleExtent)
+      .on('zoom', (e: D3ZoomEvent<SVGGElement, unknown>) => this._onZoom(e.transform, e))
+
+    this._panelsGroup = this._graphGroup.append('g').attr('class', panelSelectors.panels)
+    this._linksGroup = this._graphGroup.append('g').attr('class', linkSelectors.links)
+    this._nodesGroup = this._graphGroup.append('g').attr('class', nodeSelectors.nodes)
+
+    this._defs = this._graphGroup.append('defs')
+
+    this._getMarkerId = this._getMarkerId.bind(this)
+  }
+
+  setData (data: {nodes: N[]; links?: L[]}): void {
+    const { config } = this
+
+    this.datamodel.nodeSort = config.nodeSort
+    this.datamodel.data = data
+    this._shouldRecalculateLayout = true
+    if (config.layoutAutofit) this._shouldFitLayout = true
+    this._shouldSetPanels = true
+
+    this._addSVGDefs()
+  }
+
+  setConfig (config: GraphConfigInterface<N, L>): void {
+    this._shouldFitLayout = this._shouldFitLayout || this.config.layoutType !== config.layoutType
+    this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate(config)
+
+    super.setConfig(config)
+    this._shouldSetPanels = true
+  }
+
+  get bleed (): Spacing {
+    const extraPadding = 50 // Extra padding to take into account labels and selection outlines
+    return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding }
+  }
+
+  _render (customDuration?: number): void {
+    const { config: { disableZoom, duration, layoutAutofit, panels }, datamodel } = this
+    if (!datamodel.nodes && !datamodel.links) return
+    const animDuration = isNumber(customDuration) ? customDuration : duration
+
+    this._backgroundRect
+      .attr('width', this._width)
+      .attr('height', this._height)
+      .attr('opacity', 0)
+
+    if ((this._prevWidth !== this._width || this._prevHeight !== this._height) && layoutAutofit) {
+      // Fit layout on resize
+      this._shouldFitLayout = true
+      this._prevWidth = this._width
+      this._prevHeight = this._height
+    }
+
+    // Apply layout and render
+    this._calculateLayout().then((isFirstRender) => {
+      // If the component has been destroyed while the layout calculation
+      // was in progress, we cancel the render
+      if (this.isDestroyed()) return
+
+      if (this._shouldSetPanels) {
+        smartTransition(this._panelsGroup, duration / 2)
+          .style('opacity', panels?.length ? 1 : 0)
+
+        this._panels = initPanels(panels)
+        setPanelForNodes(this._panels, datamodel.nodes, this.config)
+        this._shouldSetPanels = false
+      }
+
+      if (isFirstRender) {
+        this._fit()
+        this._shouldFitLayout = false
+      } else if (this._shouldFitLayout && !this._isAutoFitDisabled) {
+        this._fit(duration)
+        this._shouldFitLayout = false
+      }
+
+      // Draw
+      this._drawNodes(animDuration)
+      this._drawLinks(animDuration)
+
+      // Select Links / Nodes
+      this._resetSelection()
+      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)
+        this._selectLink(selectedLink)
+      }
+
+      // Link flow animation timer
+      if (!this._timer) {
+        const refreshRateMs = 35
+        this._timer = interval(this._onLinkFlowTimerFrame.bind(this), refreshRateMs)
+      }
+
+      // Zoom
+      if (disableZoom) this.g.on('.zoom', null)
+      else this.g.call(this._zoomBehavior).on('dblclick.zoom', null)
+
+      if (!this._isFirstRender && !disableZoom) {
+        const transform = zoomTransform(this.g.node())
+        this._onZoom(transform)
+      }
+
+      // While the graph is animating we disable pointer events on the graph group
+      if (animDuration) { this._graphGroup.attr('pointer-events', 'none') }
+      smartTransition(this._graphGroup, animDuration)
+        .on('end interrupt', () => {
+          this._graphGroup.attr('pointer-events', null)
+        })
+
+      // We need to set up events and attributes again because the rendering might have been delayed by the layout
+      // calculation and they were not set up properly (see the render function of `ComponentCore`)
+      this._setUpComponentEventsThrottled()
+      this._setCustomAttributesThrottled()
+    })
+
+
+    this._isFirstRender = false
+  }
+
+  private _drawNodes (duration: number): void {
+    const { config, datamodel } = this
+
+    const nodes: GraphNode<N>[] = datamodel.nodes
+    const nodeGroups = this._nodesGroup
+      .selectAll<SVGGElement, GraphNode<N>>(`.${nodeSelectors.gNode}:not(.${nodeSelectors.gNodeExit})`)
+      .data(nodes, d => String(d._id))
+
+    const nodeGroupsEnter = nodeGroups.enter().append('g')
+      .attr('class', nodeSelectors.gNode)
+      .call(createNodes, config, duration)
+
+    const nodeGroupsMerged = nodeGroups.merge(nodeGroupsEnter)
+    const nodeUpdateSelection = updateNodes(nodeGroupsMerged, config, duration, this._scale)
+    this._drawPanels(nodeUpdateSelection, duration)
+
+    const nodesGroupExit = nodeGroups.exit<GraphNode<N>>()
+    nodesGroupExit
+      .classed(nodeSelectors.gNodeExit, true)
+      .call(removeNodes, config, duration)
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const thisRef = this
+    if (!config.disableDrag) {
+      const dragBehaviour = drag<SVGGElement, GraphNode<N>>()
+        .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 {
+      nodeGroupsMerged.on('.drag', null)
+    }
+  }
+
+  private _drawLinks (duration: number): void {
+    const { config, datamodel: { links } } = this
+
+    const linkGroups = this._linksGroup
+      .selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
+      .data(links, (d: GraphLink<N, L>) => String(d._id))
+
+    const linkGroupsEnter = linkGroups.enter().append('g')
+      .attr('class', linkSelectors.gLink)
+      .call(createLinks, config, duration)
+
+    const linkGroupsMerged = linkGroups.merge(linkGroupsEnter)
+    linkGroupsMerged.call(updateLinks, config, duration, this._scale, this._getMarkerId)
+
+    const linkGroupsExit = linkGroups.exit<GraphLink<N, L>>()
+    linkGroupsExit
+      .attr('class', linkSelectors.gLinkExit)
+      .call(removeLinks, config, duration)
+  }
+
+  private _drawPanels (
+    nodeUpdateSelection: Selection<SVGGElement, GraphNode<N>, SVGGElement, unknown> | Transition<SVGGElement, GraphNode<N>, SVGGElement, unknown>,
+    duration: number
+  ): void {
+    const { config } = this
+    if (!this._panels) return
+
+    const selection = ((nodeUpdateSelection as Transition<SVGGElement, GraphNode<N>, SVGGElement, unknown>).duration)
+      ? (nodeUpdateSelection as Transition<SVGGElement, GraphNode<N>, SVGGElement, unknown>).selection()
+      : nodeUpdateSelection as Selection<SVGGElement, GraphNode<N>, SVGGElement, unknown>
+
+    updatePanelNumNodes(selection, this._panels, config)
+    updatePanelBBoxSize(selection, this._panels, config)
+    const panelData = this._panels.filter(p => p._numNodes)
+    const panelGroup = this._panelsGroup
+      .selectAll<SVGGElement, GraphPanel>(`.${panelSelectors.gPanel}`)
+      .data(panelData, p => p.label)
+
+    const panelGroupExit = panelGroup.exit<GraphPanel<N, L>>()
+    panelGroupExit.call(removePanels, config, duration)
+
+    const panelGroupEnter = panelGroup.enter().append('g')
+      .attr('class', panelSelectors.gPanel)
+      .call(createPanels, selection)
+    const panelGroupMerged = panelGroup.merge(panelGroupEnter)
+
+    this._updatePanels(panelGroupMerged, duration)
+  }
+
+  private _updatePanels (panelToUpdate: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>, duration: number): void {
+    const { config } = this
+    if (!this._panels) return
+
+    panelToUpdate.call(updatePanels, config, duration)
+  }
+
+  private async _calculateLayout (): Promise<boolean> {
+    const { config, datamodel } = this
+
+    const firstRender = this._isFirstRender
+    if (this._shouldRecalculateLayout) {
+      switch (config.layoutType) {
+        case GraphLayoutType.Parallel:
+          applyLayoutParallel(datamodel, config, this._width, this._height)
+          break
+        case GraphLayoutType.ParallelHorizontal:
+          applyLayoutParallel(datamodel, config, this._width, this._height, 'horizontal')
+          break
+        case GraphLayoutType.Dagre:
+          await applyLayoutDagre(datamodel, config, this._width)
+          break
+        case GraphLayoutType.Force:
+          await applyLayoutForce(datamodel, config, this._width)
+          break
+        case GraphLayoutType.Concentric:
+          applyLayoutConcentric(datamodel, config, this._width, this._height)
+          break
+        case GraphLayoutType.Elk:
+          await applyELKLayout(datamodel, config, this._width)
+          break
+        case GraphLayoutType.Circular:
+        default:
+          applyLayoutCircular(datamodel, config, this._width, this._height)
+          break
+      }
+
+      this._shouldRecalculateLayout = false
+    }
+
+    return firstRender
+  }
+
+  private _fit (duration = 0): void {
+    const { datamodel: { nodes } } = this
+    if (nodes?.length && this.g?.size()) {
+      const transform = this._getTransform(nodes)
+      smartTransition(this.g, duration)
+        .call(this._zoomBehavior.transform, transform)
+      this._onZoom(transform)
+    } else {
+      console.warn('Unovis | Graph: Node data is not defined. Check if the component has been initialized.')
+    }
+  }
+
+  private _getTransform (nodes: GraphNode<N>[]): ZoomTransform {
+    const { nodeSize, zoomScaleExtent } = this.config
+    const { left, top, right, bottom } = this.bleed
+
+    const maxNodeSize = getMaxNodeSize(nodes, nodeSize)
+    const w = this._width
+    const h = this._height
+    const xExtent = [
+      min(nodes, d => getX(d) - maxNodeSize / 2 - (max(d._panels?.map(p => p._padding.left)) || 0)),
+      max(nodes, d => getX(d) + maxNodeSize / 2 + (max(d._panels?.map(p => p._padding.right)) || 0)),
+    ]
+    const yExtent = [
+      min(nodes, d => getY(d) - maxNodeSize / 2 - (max(d._panels?.map(p => p._padding.top)) || 0)),
+      max(nodes, d => getY(d) + maxNodeSize / 2 + (max(d._panels?.map(p => p._padding.bottom)) || 0)),
+    ]
+
+    const xScale = w / (xExtent[1] - xExtent[0] + left + right)
+    const yScale = h / (yExtent[1] - yExtent[0] + top + bottom)
+
+    const clampedScale = clamp(min([xScale, yScale]), zoomScaleExtent[0], zoomScaleExtent[1])
+
+    const xCenter = (xExtent[1] + xExtent[0]) / 2
+    const yCenter = (yExtent[1] + yExtent[0]) / 2
+    const translateX = this._width / 2 - xCenter * clampedScale
+    const translateY = this._height / 2 - yCenter * clampedScale
+    const transform = zoomIdentity
+      .translate(translateX, translateY)
+      .scale(clampedScale)
+
+    return transform
+  }
+
+  private _selectNode (node: GraphNode<N>): void {
+    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
+      node._state.greyout = false
+
+      const connectedLinks = links.filter(l => (l.source === node) || (l.target === node))
+      connectedLinks.forEach(l => {
+        const source = l.source as GraphNode<N>
+        const target = l.target as GraphNode<N>
+        source._state.greyout = false
+        target._state.greyout = false
+        l._state.greyout = false
+      })
+    }
+
+    this._updateSelectedElements()
+  }
+
+  private _selectLink (link: GraphLink<N, L>): void {
+    const { datamodel: { nodes, links } } = this
+    if (!link) console.warn('Unovis: Graph: Select Link: Not found')
+    this._selectedLink = link
+    const selectedLinkSource = link?.source as GraphNode<N>
+    const selectedLinkTarget = link?.target as GraphNode<N>
+
+    // Apply grey out
+    nodes.forEach(n => {
+      n._state.selected = false
+      n._state.greyout = true
+      if (selectedLinkTarget?._id === n._id || selectedLinkSource?._id === n._id) {
+        link._state.greyout = false
+      }
+    })
+
+    links.forEach(l => {
+      l._state.greyout = true
+      const source = l.source as GraphNode<N>
+      const target = l.target as GraphNode<N>
+      if ((source._id === selectedLinkSource?._id) && (target._id === selectedLinkTarget?._id)) {
+        source._state.greyout = false
+        target._state.greyout = false
+        l._state.greyout = false
+      }
+    })
+
+    links.forEach(l => {
+      delete l._state.selected
+    })
+
+    if (link) link._state.selected = true
+
+    this._updateSelectedElements()
+  }
+
+  private _resetSelection (): void {
+    const { datamodel: { nodes, links } } = this
+    this._selectedNode = undefined
+    this._selectedLink = undefined
+
+    // Disable Grayout
+    nodes.forEach(n => {
+      delete n._state.selected
+      delete n._state.greyout
+    })
+    links.forEach(l => {
+      delete l._state.greyout
+      delete l._state.selected
+    })
+
+    this._updateSelectedElements()
+  }
+
+  private _updateSelectedElements (): void {
+    const { config } = this
+
+    const linkElements = this._linksGroup.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
+    linkElements.call(updateSelectedLinks, config, this._scale)
+
+    const nodeElements = this._nodesGroup.selectAll<SVGGElement, GraphNode<N>>(`.${nodeSelectors.gNode}`)
+    nodeElements.call(updateSelectedNodes, config)
+
+    // this._drawPanels(nodeElements, 0)
+  }
+
+  private _onBackgroundClick (): void {
+    this._resetSelection()
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private _onNodeClick (d: GraphNode<N>): void {
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private _onNodeMouseOut (d: GraphNode<N>): void {
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private _onNodeMouseOver (d: GraphNode<N>): void {
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private _onLinkClick (d: GraphLink<N, L>): void {
+  }
+
+  private _onLinkMouseOver (d: GraphLink<N, L>): void {
+    if (this._isDragging) return
+
+    d._state.hovered = true
+    this._updateSelectedElements()
+  }
+
+  private _onLinkMouseOut (d: GraphLink<N, L>): void {
+    if (this._isDragging) return
+
+    delete d._state.hovered
+    this._updateSelectedElements()
+  }
+
+  private _onLinkFlowTimerFrame (elapsed = 0): void {
+    const { config: { linkFlow, linkFlowAnimDuration }, datamodel: { links } } = this
+
+    const hasLinksWithFlow = links.some((d, i) => getBoolean(d, linkFlow, i))
+    if (!hasLinksWithFlow) return
+
+    const t = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration
+    const linkElements = this._linksGroup.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
+
+    const linksToAnimate = linkElements.filter(d => !d._state.greyout)
+    linksToAnimate.each(d => { d._state.flowAnimTime = t })
+    animateLinkFlow(linksToAnimate, this.config, this._scale)
+  }
+
+  private _onZoom (t: ZoomTransform, event?: D3ZoomEvent<SVGGElement, unknown>): void {
+    const { config, datamodel: { nodes } } = this
+    const transform = t || event.transform
+    this._scale = transform.k
+    this._graphGroup.attr('transform', transform.toString())
+    if (isFunction(config.onZoom)) config.onZoom(this._scale, config.zoomScaleExtent)
+
+    if (!this._initialTransform) this._initialTransform = transform
+
+    // If the event was triggered by a mouse interaction (pan or zoom) we don't
+    //   refit the layout after recalculation (e.g. on container resize)
+    if (event?.sourceEvent) {
+      const diff = Object.keys(transform).reduce((acc, prop) => {
+        const val = transform[prop]
+        const dVal = Math.abs(val - this._initialTransform[prop])
+        return prop === 'k' ? 2 * dVal : dVal / 50
+      }, 0)
+
+      if (diff > config.layoutAutofitTolerance) this._isAutoFitDisabled = true
+      else this._isAutoFitDisabled = false
+    }
+
+    this._nodesGroup.selectAll<SVGGElement, GraphNode<N, L>>(`.${nodeSelectors.gNode}`)
+      .call(
+        (nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomNodesThrottled : zoomNodes) as typeof zoomNodes,
+        config,
+        this._scale
+      )
+
+    this._linksGroup.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
+      .call(
+        (nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks) as typeof zoomLinks,
+        config,
+        this._scale,
+        this._getMarkerId
+      )
+  }
+
+  private _onDragStarted (
+    d: GraphNode<N>,
+    event: D3DragEvent<SVGGElement, GraphNode<N>, unknown>,
+    nodeSelection: Selection<SVGGElement, GraphNode<N>, SVGGElement, unknown>
+  ): void {
+    const { config } = this
+    this._isDragging = true
+    d._state.isDragged = true
+    nodeSelection.call(updateNodes, config, 0, this._scale)
+  }
+
+  private _onDragged (
+    d: GraphNode<N>,
+    event: D3DragEvent<SVGGElement, GraphNode<N>, unknown>,
+    allNodesSelection: Selection<SVGGElement, GraphNode<N>, SVGGElement, unknown>
+  ): void {
+    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 = this._panels?.filter(p => p.nodes.includes(d._id)) ?? []
+    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) y = maxY
+    if (x < minX) x = minX
+    else if (x > maxX) x = maxX
+
+    // Snap to Layout
+    if (Math.sqrt(Math.pow(x - d.x, 2) + Math.pow(y - d.y, 2)) < 15) {
+      x = d.x
+      y = d.y
+    }
+
+    // Assign coordinates
+    d._state.fx = x
+    d._state.fy = y
+    if (d._state.fx === d.x) delete d._state.fx
+    if (d._state.fy === d.y) delete d._state.fy
+
+    // Update affected DOM elements
+    const nodeSelection = this._nodesGroup.selectAll<SVGGElement, GraphNode<N>>(`.${nodeSelectors.gNode}`)
+    const nodeToUpdate = nodeSelection.filter((n: GraphNode<N>) => n._id === d._id)
+    nodeToUpdate.call(updateNodes, config, 0, scale)
+
+    const linkSelection = this._linksGroup.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
+    const linksToUpdate = linkSelection.filter((l: L) => {
+      const source = l.source as GraphNode<N>
+      const target = l.target as GraphNode<N>
+      return source._id === d._id || target._id === d._id
+    })
+    linksToUpdate.call(updateLinks, config, 0, scale, this._getMarkerId)
+    const linksToAnimate = linksToUpdate.filter(d => d._state.greyout)
+    if (linksToAnimate.size()) animateLinkFlow(linksToAnimate, config, this._scale)
+  }
+
+  private _onDragEnded (
+    d: GraphNode<N>,
+    event: D3DragEvent<SVGGElement, GraphNode<N>, unknown>,
+    nodeSelection: Selection<SVGGElement, GraphNode<N>, SVGGElement, unknown>
+  ): void {
+    const { config } = this
+    this._isDragging = false
+    d._state.isDragged = false
+    nodeSelection.call(updateNodes, config, 0, this._scale)
+  }
+
+  private _shouldLayoutRecalculate (nextConfig: GraphConfigInterface<N, L>): boolean {
+    const { config } = this
+    if (config.layoutType !== nextConfig.layoutType) return true
+    if (config.layoutNonConnectedAside !== nextConfig.layoutNonConnectedAside) return true
+
+    if (config.layoutType === GraphLayoutType.Force) {
+      const forceSettingsDiff = shallowDiff(config.forceLayoutSettings, nextConfig.forceLayoutSettings)
+      if (Object.keys(forceSettingsDiff).length) return true
+    }
+
+    if (config.layoutType === GraphLayoutType.Dagre) {
+      const dagreSettingsDiff = shallowDiff(config.dagreLayoutSettings, nextConfig.dagreLayoutSettings)
+      if (Object.keys(dagreSettingsDiff).length) return true
+    }
+
+    if (
+      config.layoutType === GraphLayoutType.Parallel ||
+      config.layoutType === GraphLayoutType.ParallelHorizontal ||
+      config.layoutType === GraphLayoutType.Concentric
+    ) {
+      if (config.layoutGroupOrder !== nextConfig.layoutGroupOrder) return true
+      if (config.layoutParallelNodesPerColumn !== nextConfig.layoutParallelNodesPerColumn) return true
+      if (config.layoutParallelSortConnectionsByGroup !== nextConfig.layoutParallelSortConnectionsByGroup) return true
+    }
+
+    return false
+  }
+
+  private _getMarkerId (d: GraphLink, color?: string, arrow?: GraphLinkArrowStyle): string {
+    const { config } = this
+    const c = color ?? getLinkColor(d, config)
+    const a = arrow ?? getLinkArrow(d, this._scale, config)
+    return a && c ? `${this.uid}-${stringToHtmlId(c)}-${a}` : null
+  }
+
+  private _addSVGDefs (): void {
+    const { datamodel: { links } } = this
+
+    // Clean up old defs
+    this._defs.selectAll('*').remove()
+
+    // Get all variations of link colors to create markers
+    const linkColors = unique(clean(
+      links.map(d => getLinkColor(d, this.config))
+    ))
+
+    this._defs.selectAll('marker')
+      .data([
+        ...linkColors.map(d => ({ color: d, arrow: GraphLinkArrowStyle.Single })), // Single-sided arrows
+        ...linkColors.map(d => ({ color: d, arrow: GraphLinkArrowStyle.Double })), // Double-sided arrows
+      ]).enter()
+      .append('marker')
+      .attr('id', d => this._getMarkerId(null, d.color, d.arrow))
+      .attr('orient', 'auto')
+      .attr('markerWidth', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_WIDTH * 2 : LINK_MARKER_WIDTH)
+      .attr('markerHeight', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_HEIGHT * 2 : LINK_MARKER_HEIGHT)
+      .attr('markerUnits', 'userSpaceOnUse')
+      .attr('refX', LINK_MARKER_WIDTH - LINK_MARKER_HEIGHT / 2)
+      .attr('refY', LINK_MARKER_HEIGHT - LINK_MARKER_HEIGHT / 2)
+      .html(d => {
+        return `
+          <path
+            d="${d.arrow === GraphLinkArrowStyle.Double ? getDoubleArrowPath() : getArrowPath()}"
+            fill="${d.color ?? null}"
+          />
+        `
+      })
+  }
+
+  public zoomIn (increment = 0.3): void {
+    const scaleBy = 1 + increment
+    smartTransition(this.g, this.config.duration / 2)
+      .call(this._zoomBehavior.scaleBy, scaleBy)
+  }
+
+  public zoomOut (increment = 0.3): void {
+    const scaleBy = 1 - increment
+    smartTransition(this.g, this.config.duration / 2)
+      .call(this._zoomBehavior.scaleBy, scaleBy)
+  }
+
+  public setZoom (zoomLevel: number): void {
+    smartTransition(this.g, this.config.duration / 2)
+      .call(this._zoomBehavior.scaleTo, zoomLevel)
+  }
+
+  public fitView (): void {
+    this._fit(this.config.duration / 2)
+  }
+
+  /** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
+  public resetAutofitState (): void {
+    this._isAutoFitDisabled = false
+  }
+
+  /** Get current coordinates of the nodes as an array of { id: string; x: number; y: number } objects */
+  public getNodesCoordinates (): { id: string; x: number; y: number }[] {
+    const { datamodel: { nodes } } = this
+    return nodes.map(n => ({
+      id: n._id,
+      x: n.x,
+      y: n.y,
+    }))
+  }
+
+  /** Get node coordinates by id as { id: string; x: number; y: number } */
+  public getNodeCoordinatesById (id: string): { id: string; x: number; y: number } | undefined {
+    const { datamodel: { nodes } } = this
+    const node = nodes.find(n => n._id === id)
+
+    if (!node) {
+      console.warn(`Unovis | Graph: Node ${id} not found`)
+      return undefined
+    } else {
+      return {
+        id: node._id,
+        x: node.x,
+        y: node.y,
+      }
+    }
+  }
+}