@unovis/ts 1.3.2-beta.3 → 1.4.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/chord-diagram/index.js +2 -2
- package/components/chord-diagram/index.js.map +1 -1
- package/components/chord-diagram/modules/layout.d.ts +1 -1
- package/components/chord-diagram/modules/layout.js +7 -4
- package/components/chord-diagram/modules/layout.js.map +1 -1
- package/components/chord-diagram/modules/node.js +1 -1
- package/components/chord-diagram/modules/node.js.map +1 -1
- package/components/graph/config.d.ts +10 -13
- package/components/graph/config.js +3 -1
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +1 -1
- package/components/graph/index.js +17 -38
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/layout.js +33 -15
- package/components/graph/modules/layout.js.map +1 -1
- package/components/graph/modules/link/helper.d.ts +4 -6
- package/components/graph/modules/link/helper.js +15 -25
- package/components/graph/modules/link/helper.js.map +1 -1
- package/components/graph/modules/link/index.d.ts +3 -3
- package/components/graph/modules/link/index.js +108 -88
- package/components/graph/modules/link/index.js.map +1 -1
- package/components/graph/modules/link/style.d.ts +4 -4
- package/components/graph/modules/link/style.js +24 -20
- package/components/graph/modules/link/style.js.map +1 -1
- package/components/graph/modules/node/helper.d.ts +1 -0
- package/components/graph/modules/node/helper.js +4 -1
- package/components/graph/modules/node/helper.js.map +1 -1
- package/components/graph/modules/node/index.js +26 -9
- package/components/graph/modules/node/index.js.map +1 -1
- package/components/graph/modules/node/style.js +6 -3
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/modules/shape.d.ts +0 -2
- package/components/graph/modules/shape.js +7 -9
- package/components/graph/modules/shape.js.map +1 -1
- package/components/graph/types.d.ts +61 -4
- package/components/graph/types.js.map +1 -1
- package/components/timeline/config.js +1 -1
- package/components/timeline/config.js.map +1 -1
- package/components/timeline/index.js +13 -8
- package/components/timeline/index.js.map +1 -1
- package/package.json +1 -1
- package/utils/svg.d.ts +3 -0
- package/utils/svg.js +61 -0
- package/utils/svg.js.map +1 -0
- package/utils/text.js.map +1 -1
|
@@ -126,8 +126,8 @@ class ChordDiagram extends ComponentCore {
|
|
|
126
126
|
.startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))
|
|
127
127
|
.endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))
|
|
128
128
|
.cornerRadius(d => getNumber(d.data, config.cornerRadius))
|
|
129
|
-
.innerRadius(d => this.radiusScale(d.y1))
|
|
130
|
-
.outerRadius(d => this.radiusScale(d.y1)
|
|
129
|
+
.innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))
|
|
130
|
+
.outerRadius(d => this.radiusScale(d.y1));
|
|
131
131
|
this.g.classed(transparent, this._forceHighlight);
|
|
132
132
|
this.background
|
|
133
133
|
.attr('width', this._width)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { max } from 'd3-array'\nimport { partition } from 'd3-hierarchy'\nimport { Selection } from 'd3-selection'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphData, GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, getString, getValue } from 'utils/data'\nimport { estimateStringPixelLength } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode } from './types'\n\n// Config\nimport { ChordDiagramDefaultConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'\nimport { getHierarchyNodes, getRibbons, positionChildren } from './modules/layout'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<\n N extends ChordInputNode,\n L extends ChordInputLink,\n> extends ComponentCore<\n ChordDiagramData<N, L>,\n ChordDiagramConfigInterface<N, L>\n > {\n static selectors = s\n protected _defaultConfig = ChordDiagramDefaultConfig as ChordDiagramConfigInterface<N, L>\n public config: ChordDiagramConfigInterface<N, L> = this._defaultConfig\n datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n background: Selection<SVGRectElement, unknown, SVGGElement, unknown>\n nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n arcGen = arc<ChordNode<N>>()\n radiusScale: ScalePower<number, number> = scalePow()\n\n private _nodes: ChordNode<N>[] = []\n private _links: ChordRibbon<N>[] = []\n private _rootNode: ChordNode<N>\n\n events = {\n [ChordDiagram.selectors.node]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n [ChordDiagram.selectors.link]: {\n mouseover: this._onLinkMouseOver.bind(this),\n mouseout: this._onLinkMouseOut.bind(this),\n },\n [ChordDiagram.selectors.label]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n }\n\n private get _forceHighlight (): boolean {\n return this.config.highlightedNodeId !== undefined || this.config.highlightedLinkIds?.length > 0\n }\n\n constructor (config?: ChordDiagramConfigInterface<N, L>) {\n super()\n if (config) this.setConfig(config)\n this.background = this.g.append('rect').attr('class', s.background)\n this.linkGroup = this.g.append('g').attr('class', s.links)\n this.nodeGroup = this.g.append('g').attr('class', s.nodes)\n this.labelGroup = this.g.append('g').attr('class', s.labels)\n }\n\n get bleed (): Spacing {\n const { config } = this\n const padding = 4 + LABEL_PADDING * 2\n let top = 0; let bottom = 0; let right = 0; let left = 0\n this._nodes.forEach(n => {\n const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)\n if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n const labelWidth = estimateStringPixelLength(getString(n.data as N, config.nodeLabel) ?? '', 16)\n const [x, y] = this.arcGen.centroid(n)\n\n if (x < 0) left = Math.max(left, labelWidth)\n else right = Math.max(right, labelWidth)\n\n if (y < 0) top = Math.max(top, labelWidth)\n else bottom = Math.max(bottom, labelWidth)\n }\n })\n left += padding\n right += padding\n bottom += padding\n top += padding\n return { top, bottom, left, right }\n }\n\n setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n super.setSize(width, height, containerWidth, containerHeight)\n\n // Setting radius for initial bleed calculation. This ensures the correct radius is set when render is called\n this.radiusScale\n .exponent(this.config.radiusScaleExponent)\n .range([0, Math.min(width, height) / 2])\n }\n\n setData (data: GraphData<N, L>): void {\n super.setData(data)\n this._layoutData()\n }\n\n _layoutData (): void {\n const { nodes, links } = this.datamodel\n const { padAngle, linkValue, nodeLevels } = this.config\n nodes.forEach(n => { delete n._state.value })\n links.forEach(l => {\n delete l._state.points\n l._state.value = getNumber(l, linkValue)\n l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue)\n l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)\n })\n\n const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)\n\n const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>\n partitionData.each((n, i) => {\n positionChildren(n, padAngle)\n n.uid = `${this.uid.substr(0, 4)}-${i}`\n n.x0 = Number.isNaN(n.x0) ? 0 : n.x0\n n.x1 = Number.isNaN(n.x1) ? 0 : n.x1\n n._state = {}\n })\n\n const partitionDataWithRoot = partitionData.descendants()\n this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)\n this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node\n this._links = getRibbons<N>(partitionData, links, padAngle)\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, bleed } = this\n\n this._layoutData()\n const duration = isNumber(customDuration) ? customDuration : config.duration\n const size = Math.min(this._width, this._height)\n const radius = size / 2 - max([bleed.top, bleed.bottom, bleed.left, bleed.right])\n\n this.radiusScale.range([0, radius - config.nodeWidth])\n\n this.arcGen\n .startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))\n .endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))\n .cornerRadius(d => getNumber(d.data, config.cornerRadius))\n .innerRadius(d => this.radiusScale(d.y1))\n .outerRadius(d => this.radiusScale(d.y1) + -getNumber(d, config.nodeWidth))\n\n this.g.classed(s.transparent, this._forceHighlight)\n this.background\n .attr('width', this._width)\n .attr('height', this._height)\n .style('opacity', 0)\n\n // Center the view\n this.nodeGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.labelGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.linkGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n // Links\n const linksSelection = this.linkGroup\n .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .data(this._links, d => String(d.data._id))\n .classed(s.highlightedLink, l => {\n const linkId = l.data.id ?? l.data._indexGlobal\n return config.highlightedLinkIds?.includes(linkId)\n })\n\n const linksEnter = linksSelection.enter().append('path')\n .attr('class', s.link)\n .call(createLink, this.radiusScale)\n\n const linksMerged = linksSelection.merge(linksEnter)\n linksMerged.call(updateLink, config, this.radiusScale, duration)\n\n linksSelection.exit()\n .call(removeLink, duration)\n\n // Nodes\n const nodesSelection = this.nodeGroup\n .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .data(this._nodes, d => String(d.uid))\n .classed(s.highlightedNode, d => config.highlightedNodeId === d.data._id)\n\n const nodesEnter = nodesSelection.enter().append('path')\n .attr('class', s.node)\n .call(createNode, config)\n\n const nodesMerged = nodesSelection.merge(nodesEnter)\n nodesMerged.call(updateNode, config, this.arcGen, duration, this.bleed)\n\n nodesSelection.exit()\n .call(removeNode, duration)\n\n // Labels\n const labelWidth = size - radius - config.nodeWidth\n const labels = this.labelGroup\n .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)\n .data(this._nodes, d => String(d.uid))\n\n const labelEnter = labels.enter().append('g')\n .attr('class', s.label)\n .call(createLabel, config, this.radiusScale)\n\n const labelsMerged = labels.merge(labelEnter)\n labelsMerged.call(updateLabel, config, labelWidth, this.radiusScale, duration)\n\n labels.exit()\n .attr('class', s.labelExit)\n .call(removeLabel, duration)\n }\n\n private _onNodeMouseOver (d: ChordNode<N>): void {\n let ribbons: ChordRibbon<N>[]\n if (d.children) {\n const leaves = d.leaves() as ChordLeafNode<N>[]\n ribbons = this._links.filter(l =>\n leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n )\n } else {\n const leaf = d as ChordLeafNode<N>\n ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n }\n\n // Nodes without links should still be highlighted\n if (!ribbons.length) d._state.hovered = true\n this._highlightOnHover(ribbons)\n }\n\n private _onNodeMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _onLinkMouseOver (d: ChordRibbon<N>): void {\n this._highlightOnHover([d])\n }\n\n private _onLinkMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _highlightOnHover (links?: ChordRibbon<N>[]): void {\n if (this._forceHighlight) return\n if (links) {\n links.forEach(l => {\n l._state.hovered = true\n const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)\n const targetPath = (l.target as ChordNode<N>).path(this._rootNode)\n sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })\n targetPath.forEach(n => { if (n.depth) n._state.hovered = true })\n })\n } else {\n this._nodes.forEach(n => { delete n._state.hovered })\n this._links.forEach(l => { delete l._state.hovered })\n }\n\n this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .classed(s.highlightedNode, d => d._state.hovered)\n this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .classed(s.highlightedLink, d => d._state.hovered)\n\n this.g.classed(s.transparent, !!links)\n }\n}\n"],"names":["s.background","s.links","s.nodes","s.labels","s.transparent","s.link","s.highlightedLink","s.node","s.highlightedNode","s.label","s.labelExit","s"],"mappings":";;;;;;;;;;;;;;;;;AAgCM,MAAO,YAGX,SAAQ,aAGP,CAAA;AAqCD,IAAA,WAAA,CAAa,MAA0C,EAAA;AACrD,QAAA,KAAK,EAAE,CAAA;QApCC,IAAc,CAAA,cAAA,GAAG,yBAA8D,CAAA;AAClF,QAAA,IAAA,CAAA,MAAM,GAAsC,IAAI,CAAC,cAAc,CAAA;AACtE,QAAA,IAAA,CAAA,SAAS,GAAyB,IAAI,cAAc,EAAE,CAAA;QAOtD,IAAM,CAAA,MAAA,GAAG,GAAG,EAAgB,CAAA;QAC5B,IAAW,CAAA,WAAA,GAA+B,QAAQ,EAAE,CAAA;QAE5C,IAAM,CAAA,MAAA,GAAmB,EAAE,CAAA;QAC3B,IAAM,CAAA,MAAA,GAAqB,EAAE,CAAA;AAGrC,QAAA,IAAA,CAAA,MAAM,GAAG;AACP,YAAA,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,GAAG;gBAC7B,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC3C,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1C,aAAA;AACD,YAAA,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,GAAG;gBAC7B,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC3C,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1C,aAAA;AACD,YAAA,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,GAAG;gBAC9B,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC3C,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1C,aAAA;SACF,CAAA;AAQC,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAClC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEA,UAAY,CAAC,CAAA;QACnE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,KAAO,CAAC,CAAA;QAC1D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,KAAO,CAAC,CAAA;QAC1D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAEC,MAAQ,CAAC,CAAA;KAC7D;AAXD,IAAA,IAAY,eAAe,GAAA;;AACzB,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,iBAAiB,KAAK,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,kBAAkB,0CAAE,MAAM,IAAG,CAAC,CAAA;KACjG;AAWD,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AACvB,QAAA,MAAM,OAAO,GAAG,CAAC,GAAG,aAAa,GAAG,CAAC,CAAA;QACrC,IAAI,GAAG,GAAG,CAAC,CAAC;QAAC,IAAI,MAAM,GAAG,CAAC,CAAC;QAAC,IAAI,KAAK,GAAG,CAAC,CAAC;QAAC,IAAI,IAAI,GAAG,CAAC,CAAA;AACxD,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAG;;AACtB,YAAA,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAA;YACtE,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,kBAAkB,KAAK,mBAAmB,CAAC,aAAa,EAAE;gBAC9E,MAAM,UAAU,GAAG,yBAAyB,CAAC,MAAA,SAAS,CAAC,CAAC,CAAC,IAAS,EAAE,MAAM,CAAC,SAAS,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,EAAE,EAAE,CAAC,CAAA;AAChG,gBAAA,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;gBAEtC,IAAI,CAAC,GAAG,CAAC;oBAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;;oBACvC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;gBAExC,IAAI,CAAC,GAAG,CAAC;oBAAE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAA;;oBACrC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAC3C,aAAA;AACH,SAAC,CAAC,CAAA;QACF,IAAI,IAAI,OAAO,CAAA;QACf,KAAK,IAAI,OAAO,CAAA;QAChB,MAAM,IAAI,OAAO,CAAA;QACjB,GAAG,IAAI,OAAO,CAAA;QACd,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;KACpC;AAED,IAAA,OAAO,CAAE,KAAa,EAAE,MAAc,EAAE,cAAsB,EAAE,eAAuB,EAAA;QACrF,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,CAAC,CAAA;;AAG7D,QAAA,IAAI,CAAC,WAAW;AACb,aAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC;AACzC,aAAA,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;KAC3C;AAED,IAAA,OAAO,CAAE,IAAqB,EAAA;AAC5B,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QACnB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAED,WAAW,GAAA;QACT,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAA;QACvC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;AACvD,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAM,EAAA,OAAO,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA,EAAE,CAAC,CAAA;AAC7C,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAG;AAChB,YAAA,OAAO,CAAC,CAAC,MAAM,CAAC,MAAM,CAAA;YACtB,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;YACxC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;YAC9E,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;AAChF,SAAC,CAAC,CAAA;QAEF,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,EAAE,CAAC,IAAI,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,CAAC,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,CAAA,EAAA,EAAE,UAAU,CAAC,CAAA;QAEvE,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAiB,CAAA;QAC5F,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC1B,YAAA,gBAAgB,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;AAC7B,YAAA,CAAC,CAAC,GAAG,GAAG,CAAG,EAAA,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAI,CAAA,EAAA,CAAC,EAAE,CAAA;YACvC,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAA;YACpC,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAA;AACpC,YAAA,CAAC,CAAC,MAAM,GAAG,EAAE,CAAA;AACf,SAAC,CAAC,CAAA;AAEF,QAAA,MAAM,qBAAqB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAA;AACzD,QAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;AAC/D,QAAA,IAAI,CAAC,MAAM,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;QAC9D,IAAI,CAAC,MAAM,GAAG,UAAU,CAAI,aAAa,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KAC5D;AAED,IAAA,OAAO,CAAE,cAAuB,EAAA;AAC9B,QAAA,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;AAC7B,QAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;QAE9B,IAAI,CAAC,WAAW,EAAE,CAAA;AAClB,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;AAC5E,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;QAChD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;AAEjF,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAA;AAEtD,QAAA,IAAI,CAAC,MAAM;AACR,aAAA,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;AAC3E,aAAA,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;AACzE,aAAA,YAAY,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;AACzD,aAAA,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;aACxC,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAA;AAE7E,QAAA,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,WAAa,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;AACnD,QAAA,IAAI,CAAC,UAAU;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC;AAC1B,aAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AAC5B,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;;QAGtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC,CAAA;QACrF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC,CAAA;QACtF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC,CAAA;;AAGrF,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS;AAClC,aAAA,SAAS,CAAiC,CAAI,CAAA,EAAAC,IAAM,EAAE,CAAC;AACvD,aAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1C,aAAA,OAAO,CAACC,eAAiB,EAAE,CAAC,IAAG;;AAC9B,YAAA,MAAM,MAAM,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;YAC/C,OAAO,CAAA,EAAA,GAAA,MAAM,CAAC,kBAAkB,0CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;AACpD,SAAC,CAAC,CAAA;QAEJ,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACrD,aAAA,IAAI,CAAC,OAAO,EAAED,IAAM,CAAC;AACrB,aAAA,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAErC,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;AACpD,QAAA,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;QAEhE,cAAc,CAAC,IAAI,EAAE;AAClB,aAAA,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;;AAG7B,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS;AAClC,aAAA,SAAS,CAA+B,CAAI,CAAA,EAAAE,IAAM,EAAE,CAAC;AACrD,aAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AACrC,aAAA,OAAO,CAACC,eAAiB,EAAE,CAAC,IAAI,MAAM,CAAC,iBAAiB,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAE3E,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACrD,aAAA,IAAI,CAAC,OAAO,EAAED,IAAM,CAAC;AACrB,aAAA,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;QAE3B,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;AACpD,QAAA,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAEvE,cAAc,CAAC,IAAI,EAAE;AAClB,aAAA,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;;QAG7B,MAAM,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,SAAS,CAAA;AACnD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU;AAC3B,aAAA,SAAS,CAA4B,CAAI,CAAA,EAAAE,KAAO,EAAE,CAAC;AACnD,aAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAExC,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;AAC1C,aAAA,IAAI,CAAC,OAAO,EAAEA,KAAO,CAAC;aACtB,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAE9C,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;AAC7C,QAAA,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;QAE9E,MAAM,CAAC,IAAI,EAAE;AACV,aAAA,IAAI,CAAC,OAAO,EAAEC,SAAW,CAAC;AAC1B,aAAA,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;KAC/B;AAEO,IAAA,gBAAgB,CAAE,CAAe,EAAA;AACvC,QAAA,IAAI,OAAyB,CAAA;QAC7B,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,EAAwB,CAAA;YAC/C,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5F,CAAA;AACF,SAAA;AAAM,aAAA;YACL,MAAM,IAAI,GAAG,CAAqB,CAAA;AAClC,YAAA,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1G,SAAA;;QAGD,IAAI,CAAC,OAAO,CAAC,MAAM;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;AAC5C,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;KAChC;IAEO,eAAe,GAAA;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;AAEO,IAAA,gBAAgB,CAAE,CAAiB,EAAA;AACzC,QAAA,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAC5B;IAEO,eAAe,GAAA;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;AAEO,IAAA,iBAAiB,CAAE,KAAwB,EAAA;QACjD,IAAI,IAAI,CAAC,eAAe;YAAE,OAAM;AAChC,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAG;AAChB,gBAAA,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;AACvB,gBAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAClE,gBAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;gBAClE,UAAU,CAAC,OAAO,CAAC,CAAC,IAAM,EAAA,IAAI,CAAC,CAAC,KAAK;oBAAE,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA,EAAE,CAAC,CAAA;gBACjE,UAAU,CAAC,OAAO,CAAC,CAAC,IAAM,EAAA,IAAI,CAAC,CAAC,KAAK;oBAAE,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA,EAAE,CAAC,CAAA;AACnE,aAAC,CAAC,CAAA;AACH,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAG,EAAG,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA,EAAE,CAAC,CAAA;AACrD,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAG,EAAG,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA,EAAE,CAAC,CAAA;AACtD,SAAA;QAED,IAAI,CAAC,SAAS,CAAC,SAAS,CAA+B,IAAIH,IAAM,CAAA,CAAE,CAAC;AACjE,aAAA,OAAO,CAACC,eAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACpD,IAAI,CAAC,SAAS,CAAC,SAAS,CAAiC,IAAIH,IAAM,CAAA,CAAE,CAAC;AACnE,aAAA,OAAO,CAACC,eAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AAEpD,QAAA,IAAI,CAAC,CAAC,CAAC,OAAO,CAACF,WAAa,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;KACvC;;AAnPM,YAAS,CAAA,SAAA,GAAGO,KAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { max } from 'd3-array'\nimport { partition } from 'd3-hierarchy'\nimport { Selection } from 'd3-selection'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphData, GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, getString, getValue } from 'utils/data'\nimport { estimateStringPixelLength } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode } from './types'\n\n// Config\nimport { ChordDiagramDefaultConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'\nimport { getHierarchyNodes, getRibbons, positionChildren } from './modules/layout'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<\n N extends ChordInputNode,\n L extends ChordInputLink,\n> extends ComponentCore<\n ChordDiagramData<N, L>,\n ChordDiagramConfigInterface<N, L>\n > {\n static selectors = s\n protected _defaultConfig = ChordDiagramDefaultConfig as ChordDiagramConfigInterface<N, L>\n public config: ChordDiagramConfigInterface<N, L> = this._defaultConfig\n datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n background: Selection<SVGRectElement, unknown, SVGGElement, unknown>\n nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n arcGen = arc<ChordNode<N>>()\n radiusScale: ScalePower<number, number> = scalePow()\n\n private _nodes: ChordNode<N>[] = []\n private _links: ChordRibbon<N>[] = []\n private _rootNode: ChordNode<N>\n\n events = {\n [ChordDiagram.selectors.node]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n [ChordDiagram.selectors.link]: {\n mouseover: this._onLinkMouseOver.bind(this),\n mouseout: this._onLinkMouseOut.bind(this),\n },\n [ChordDiagram.selectors.label]: {\n mouseover: this._onNodeMouseOver.bind(this),\n mouseout: this._onNodeMouseOut.bind(this),\n },\n }\n\n private get _forceHighlight (): boolean {\n return this.config.highlightedNodeId !== undefined || this.config.highlightedLinkIds?.length > 0\n }\n\n constructor (config?: ChordDiagramConfigInterface<N, L>) {\n super()\n if (config) this.setConfig(config)\n this.background = this.g.append('rect').attr('class', s.background)\n this.linkGroup = this.g.append('g').attr('class', s.links)\n this.nodeGroup = this.g.append('g').attr('class', s.nodes)\n this.labelGroup = this.g.append('g').attr('class', s.labels)\n }\n\n get bleed (): Spacing {\n const { config } = this\n const padding = 4 + LABEL_PADDING * 2\n let top = 0; let bottom = 0; let right = 0; let left = 0\n this._nodes.forEach(n => {\n const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)\n if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n const labelWidth = estimateStringPixelLength(getString(n.data as N, config.nodeLabel) ?? '', 16)\n const [x, y] = this.arcGen.centroid(n)\n\n if (x < 0) left = Math.max(left, labelWidth)\n else right = Math.max(right, labelWidth)\n\n if (y < 0) top = Math.max(top, labelWidth)\n else bottom = Math.max(bottom, labelWidth)\n }\n })\n left += padding\n right += padding\n bottom += padding\n top += padding\n return { top, bottom, left, right }\n }\n\n setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n super.setSize(width, height, containerWidth, containerHeight)\n\n // Setting radius for initial bleed calculation. This ensures the correct radius is set when render is called\n this.radiusScale\n .exponent(this.config.radiusScaleExponent)\n .range([0, Math.min(width, height) / 2])\n }\n\n setData (data: GraphData<N, L>): void {\n super.setData(data)\n this._layoutData()\n }\n\n _layoutData (): void {\n const { nodes, links } = this.datamodel\n const { padAngle, linkValue, nodeLevels } = this.config\n nodes.forEach(n => { delete n._state.value })\n links.forEach(l => {\n delete l._state.points\n l._state.value = getNumber(l, linkValue)\n l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue)\n l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)\n })\n\n const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)\n\n const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>\n partitionData.each((n, i) => {\n positionChildren(n, padAngle)\n n.uid = `${this.uid.substr(0, 4)}-${i}`\n n.x0 = Number.isNaN(n.x0) ? 0 : n.x0\n n.x1 = Number.isNaN(n.x1) ? 0 : n.x1\n n._state = {}\n })\n\n const partitionDataWithRoot = partitionData.descendants()\n this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)\n this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node\n this._links = getRibbons<N>(partitionData, links, padAngle)\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, bleed } = this\n\n this._layoutData()\n const duration = isNumber(customDuration) ? customDuration : config.duration\n const size = Math.min(this._width, this._height)\n const radius = size / 2 - max([bleed.top, bleed.bottom, bleed.left, bleed.right])\n\n this.radiusScale.range([0, radius - config.nodeWidth])\n\n this.arcGen\n .startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))\n .endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))\n .cornerRadius(d => getNumber(d.data, config.cornerRadius))\n .innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))\n .outerRadius(d => this.radiusScale(d.y1))\n\n this.g.classed(s.transparent, this._forceHighlight)\n this.background\n .attr('width', this._width)\n .attr('height', this._height)\n .style('opacity', 0)\n\n // Center the view\n this.nodeGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.labelGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n this.linkGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n // Links\n const linksSelection = this.linkGroup\n .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .data(this._links, d => String(d.data._id))\n .classed(s.highlightedLink, l => {\n const linkId = l.data.id ?? l.data._indexGlobal\n return config.highlightedLinkIds?.includes(linkId)\n })\n\n const linksEnter = linksSelection.enter().append('path')\n .attr('class', s.link)\n .call(createLink, this.radiusScale)\n\n const linksMerged = linksSelection.merge(linksEnter)\n linksMerged.call(updateLink, config, this.radiusScale, duration)\n\n linksSelection.exit()\n .call(removeLink, duration)\n\n // Nodes\n const nodesSelection = this.nodeGroup\n .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .data(this._nodes, d => String(d.uid))\n .classed(s.highlightedNode, d => config.highlightedNodeId === d.data._id)\n\n const nodesEnter = nodesSelection.enter().append('path')\n .attr('class', s.node)\n .call(createNode, config)\n\n const nodesMerged = nodesSelection.merge(nodesEnter)\n nodesMerged.call(updateNode, config, this.arcGen, duration, this.bleed)\n\n nodesSelection.exit()\n .call(removeNode, duration)\n\n // Labels\n const labelWidth = size - radius - config.nodeWidth\n const labels = this.labelGroup\n .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)\n .data(this._nodes, d => String(d.uid))\n\n const labelEnter = labels.enter().append('g')\n .attr('class', s.label)\n .call(createLabel, config, this.radiusScale)\n\n const labelsMerged = labels.merge(labelEnter)\n labelsMerged.call(updateLabel, config, labelWidth, this.radiusScale, duration)\n\n labels.exit()\n .attr('class', s.labelExit)\n .call(removeLabel, duration)\n }\n\n private _onNodeMouseOver (d: ChordNode<N>): void {\n let ribbons: ChordRibbon<N>[]\n if (d.children) {\n const leaves = d.leaves() as ChordLeafNode<N>[]\n ribbons = this._links.filter(l =>\n leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n )\n } else {\n const leaf = d as ChordLeafNode<N>\n ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n }\n\n // Nodes without links should still be highlighted\n if (!ribbons.length) d._state.hovered = true\n this._highlightOnHover(ribbons)\n }\n\n private _onNodeMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _onLinkMouseOver (d: ChordRibbon<N>): void {\n this._highlightOnHover([d])\n }\n\n private _onLinkMouseOut (): void {\n this._highlightOnHover()\n }\n\n private _highlightOnHover (links?: ChordRibbon<N>[]): void {\n if (this._forceHighlight) return\n if (links) {\n links.forEach(l => {\n l._state.hovered = true\n const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)\n const targetPath = (l.target as ChordNode<N>).path(this._rootNode)\n sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })\n targetPath.forEach(n => { if (n.depth) n._state.hovered = true })\n })\n } else {\n this._nodes.forEach(n => { delete n._state.hovered })\n this._links.forEach(l => { delete l._state.hovered })\n }\n\n this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n .classed(s.highlightedNode, d => d._state.hovered)\n this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n .classed(s.highlightedLink, d => d._state.hovered)\n\n this.g.classed(s.transparent, !!links)\n }\n}\n"],"names":["s.background","s.links","s.nodes","s.labels","s.transparent","s.link","s.highlightedLink","s.node","s.highlightedNode","s.label","s.labelExit","s"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { HierarchyNode } from 'd3-hierarchy';
|
|
2
2
|
import { NumericAccessor } from "../../../types/accessor";
|
|
3
3
|
import { ChordNode, ChordRibbon, ChordLinkDatum, ChordHierarchyNode } from '../types';
|
|
4
|
-
export declare function getHierarchyNodes<N>(data: N[], value: NumericAccessor<N>, levels?:
|
|
4
|
+
export declare function getHierarchyNodes<N>(data: N[], value: NumericAccessor<N>, levels?: string[]): HierarchyNode<ChordHierarchyNode<N>>;
|
|
5
5
|
export declare function positionChildren<N>(node: ChordNode<N>, padding: number, scalingCoeff?: number): void;
|
|
6
6
|
export declare function getRibbons<N>(data: ChordNode<N>, links: ChordLinkDatum<N>[], padding: number): ChordRibbon<N>[];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { group, index } from 'd3-array';
|
|
1
2
|
import { hierarchy } from 'd3-hierarchy';
|
|
2
3
|
import { pie } from 'd3-shape';
|
|
3
|
-
import { group, index } from 'd3-array';
|
|
4
4
|
import { getNumber, groupBy } from '../../../utils/data.js';
|
|
5
5
|
|
|
6
6
|
function transformData(node) {
|
|
@@ -23,7 +23,7 @@ function positionChildren(node, padding, scalingCoeff = 0.95) {
|
|
|
23
23
|
if (!node.children)
|
|
24
24
|
return;
|
|
25
25
|
const length = node.x1 - node.x0;
|
|
26
|
-
const scaledLength = length *
|
|
26
|
+
const scaledLength = length * scalingCoeff;
|
|
27
27
|
const delta = length - scaledLength;
|
|
28
28
|
const positions = pie()
|
|
29
29
|
.startAngle(node.x0 + delta / 2)
|
|
@@ -32,8 +32,11 @@ function positionChildren(node, padding, scalingCoeff = 0.95) {
|
|
|
32
32
|
.value(d => d.value)
|
|
33
33
|
.sort((a, b) => node.children.indexOf(a) - node.children.indexOf(b))(node.children);
|
|
34
34
|
node.children.forEach((child, i) => {
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
const x0 = positions[i].startAngle;
|
|
36
|
+
const x1 = positions[i].endAngle;
|
|
37
|
+
const childDelta = (x1 - x0) * (1 - scalingCoeff);
|
|
38
|
+
child.x0 = x0 + childDelta / 2;
|
|
39
|
+
child.x1 = x1 - childDelta / 2;
|
|
37
40
|
});
|
|
38
41
|
}
|
|
39
42
|
function getRibbons(data, links, padding) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.js","sources":["../../../../src/components/chord-diagram/modules/layout.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"layout.js","sources":["../../../../src/components/chord-diagram/modules/layout.ts"],"sourcesContent":["import { group, index } from 'd3-array'\nimport { HierarchyNode, hierarchy } from 'd3-hierarchy'\nimport { pie } from 'd3-shape'\n\n// Utils\nimport { getNumber, groupBy } from 'utils/data'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { ChordNode, ChordRibbon, ChordLinkDatum, ChordHierarchyNode, ChordLeafNode } from '../types'\n\nfunction transformData <T> (node: HierarchyNode<T>): void {\n const { height, depth } = node\n if (height > 0) {\n const d = node.data as unknown as [string, T[]]\n const n = node as unknown as HierarchyNode<ChordHierarchyNode<T>>\n n.data = { key: d[0], values: d[1], depth, height, ancestors: n.ancestors().map(d => d.data.key) }\n }\n}\n\nexport function getHierarchyNodes<N> (\n data: N[],\n value: NumericAccessor<N>,\n levels: string[] = []\n): HierarchyNode<ChordHierarchyNode<N>> {\n const nodeLevels = levels.map(level => (d: N) => d[level as keyof N]) as unknown as [(d: N) => string]\n const nestedData = levels.length ? group<N, string>(data, ...nodeLevels) : { key: 'root', children: data }\n\n const root = hierarchy(nestedData)\n .sum(d => getNumber(d as unknown as N, value))\n .each(transformData)\n\n return root as unknown as HierarchyNode<ChordHierarchyNode<N>>\n}\n\nexport function positionChildren<N> (node: ChordNode<N>, padding: number, scalingCoeff = 0.95): void {\n if (!node.children) return\n\n const length = node.x1 - node.x0\n const scaledLength = length * scalingCoeff\n const delta = length - scaledLength\n\n const positions = pie<ChordNode<N>>()\n .startAngle(node.x0 + delta / 2)\n .endAngle(node.x1 - delta / 2)\n .padAngle(padding)\n .value(d => d.value)\n .sort((a, b) => node.children.indexOf(a) - node.children.indexOf(b))(node.children)\n\n node.children.forEach((child, i) => {\n const x0 = positions[i].startAngle\n const x1 = positions[i].endAngle\n const childDelta = (x1 - x0) * (1 - scalingCoeff)\n child.x0 = x0 + childDelta / 2\n child.x1 = x1 - childDelta / 2\n })\n}\n\nexport function getRibbons<N> (data: ChordNode<N>, links: ChordLinkDatum<N>[], padding: number): ChordRibbon<N>[] {\n type LinksArrayType = typeof links\n const groupedBySource: Record<string, LinksArrayType> = groupBy(links, d => d.source._id)\n const groupedByTarget: Record<string, LinksArrayType> = groupBy(links, d => d.target._id)\n\n const leafNodes = data.leaves() as ChordLeafNode<N>[]\n const leafNodesById: Map<string, ChordLeafNode<N>> = index(leafNodes, d => d.data._id)\n\n const getNodesInRibbon = (\n source: ChordLeafNode<N>,\n target: ChordLeafNode<N>,\n partitionHeight: number,\n nodes: ChordNode<N>[] = []\n ): ChordNode<N>[] => {\n nodes[source.height] = source\n nodes[partitionHeight * 2 - target.height] = target\n if (source.parent && target.parent) getNodesInRibbon(source.parent, target.parent, partitionHeight, nodes)\n return nodes\n }\n const calculatePoints = (links: LinksArrayType, type: 'in' | 'out', depth: number, maxDepth: number): void => {\n links.forEach(link => {\n if (!link._state.points) link._state.points = []\n\n const sourceLeaf = leafNodesById.get(link.source._id)\n const targetLeaf = leafNodesById.get(link.target._id)\n const nodesInRibbon = getNodesInRibbon(\n type === 'out' ? sourceLeaf : targetLeaf,\n type === 'out' ? targetLeaf : sourceLeaf,\n maxDepth\n )\n const currNode = nodesInRibbon[depth]\n const len = currNode.x1 - currNode.x0 - padding\n const x0 = currNode._prevX1 ?? (currNode.x0 + padding / 2)\n const x1 = x0 + len * link._state.value / currNode.value\n currNode._prevX1 = x1\n\n const pointIdx = type === 'out' ? depth : maxDepth * 2 - 1 - depth\n link._state.points[pointIdx] = { a0: x0, a1: x1, r: currNode.y1 }\n })\n }\n\n leafNodes.forEach(leafNode => {\n const outLinks = groupedBySource[leafNode.data._id] || []\n const inLinks = groupedByTarget[leafNode.data._id] || []\n for (let depth = 0; depth < leafNode.depth; depth += 1) {\n calculatePoints(outLinks, 'out', depth, leafNode.depth)\n calculatePoints(inLinks, 'in', depth, leafNode.depth)\n }\n })\n\n return links.map(l => ({\n source: leafNodesById.get(l.source._id),\n target: leafNodesById.get(l.target._id),\n data: l,\n points: l._state.points,\n _state: {},\n }))\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ function createNode(selection) {
|
|
|
18
18
|
});
|
|
19
19
|
}
|
|
20
20
|
function updateNode(selection, config, arcGen, duration) {
|
|
21
|
-
const nodeColor = (d) => getColor(d.data, config.nodeColor);
|
|
21
|
+
const nodeColor = (d) => getColor(d.data, config.nodeColor, d.height);
|
|
22
22
|
selection
|
|
23
23
|
.attr('id', d => d.uid)
|
|
24
24
|
.style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node.js","sources":["../../../../src/components/chord-diagram/modules/node.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordNode } from '../types'\n\n// Config\nimport { ChordDiagramConfigInterface } from '../config'\n\ntype AnimState = { x0: number; x1: number; y0: number; y1: number }\nexport interface ArcNode extends SVGElement {\n _animState?: AnimState;\n}\n\nexport function createNode<N extends ChordInputNode, L extends ChordInputLink> (\n selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>\n): void {\n selection\n .style('opacity', 0)\n .each((d, i, els) => {\n const arcNode: ArcNode = els[i]\n const angleCenter = (d.x0 + d.x1) / 2\n const angleHalfWidth = (d.x1 - d.x0) / 2\n arcNode._animState = {\n x0: angleCenter - angleHalfWidth * 0.8,\n x1: angleCenter + angleHalfWidth * 0.8,\n y0: d.y0,\n y1: d.y1,\n }\n })\n}\n\nexport function updateNode<N extends ChordInputNode, L extends ChordInputLink> (\n selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>,\n config: ChordDiagramConfigInterface<N, L>,\n arcGen: Arc<unknown, AnimState>,\n duration: number\n): void {\n const nodeColor = (d: ChordNode<N>): string => getColor(d.data, config.nodeColor)\n\n selection\n .attr('id', d => d.uid)\n .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n .style('fill', nodeColor)\n .style('stroke', nodeColor)\n\n if (duration) {\n const transition = smartTransition(selection, duration)\n .style('opacity', 1) as Transition<SVGPathElement, ChordNode<N>, SVGGElement, ChordNode<N>>\n\n transition.attrTween('d', (d, i, els) => {\n const arcNode: ArcNode = els[i]\n const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }\n const datum = interpolate(arcNode._animState, nextAnimState)\n\n return (t: number): string => {\n arcNode._animState = datum(t)\n return arcGen(arcNode._animState)\n }\n })\n } else {\n selection.attr('d', d => arcGen(d))\n .style('opacity', 1)\n }\n}\n\nexport function removeNode<N extends ChordInputNode> (\n selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,\n duration: number\n): void {\n smartTransition(selection, duration)\n .style('opacity', 0)\n .remove()\n}\n"],"names":[],"mappings":";;;;AAoBM,SAAU,UAAU,CACxB,SAAwE,EAAA;IAExE,SAAS;AACN,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;SACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AAClB,QAAA,MAAM,OAAO,GAAY,GAAG,CAAC,CAAC,CAAC,CAAA;AAC/B,QAAA,MAAM,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;AACrC,QAAA,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACxC,OAAO,CAAC,UAAU,GAAG;AACnB,YAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;AACtC,YAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;YACtC,EAAE,EAAE,CAAC,CAAC,EAAE;YACR,EAAE,EAAE,CAAC,CAAC,EAAE;SACT,CAAA;AACH,KAAC,CAAC,CAAA;AACN,CAAC;AAEK,SAAU,UAAU,CACxB,SAAwE,EACxE,MAAyC,EACzC,MAA+B,EAC/B,QAAgB,EAAA;
|
|
1
|
+
{"version":3,"file":"node.js","sources":["../../../../src/components/chord-diagram/modules/node.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordNode } from '../types'\n\n// Config\nimport { ChordDiagramConfigInterface } from '../config'\n\ntype AnimState = { x0: number; x1: number; y0: number; y1: number }\nexport interface ArcNode extends SVGElement {\n _animState?: AnimState;\n}\n\nexport function createNode<N extends ChordInputNode, L extends ChordInputLink> (\n selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>\n): void {\n selection\n .style('opacity', 0)\n .each((d, i, els) => {\n const arcNode: ArcNode = els[i]\n const angleCenter = (d.x0 + d.x1) / 2\n const angleHalfWidth = (d.x1 - d.x0) / 2\n arcNode._animState = {\n x0: angleCenter - angleHalfWidth * 0.8,\n x1: angleCenter + angleHalfWidth * 0.8,\n y0: d.y0,\n y1: d.y1,\n }\n })\n}\n\nexport function updateNode<N extends ChordInputNode, L extends ChordInputLink> (\n selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>,\n config: ChordDiagramConfigInterface<N, L>,\n arcGen: Arc<unknown, AnimState>,\n duration: number\n): void {\n const nodeColor = (d: ChordNode<N>): string => getColor(d.data, config.nodeColor, d.height)\n\n selection\n .attr('id', d => d.uid)\n .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n .style('fill', nodeColor)\n .style('stroke', nodeColor)\n\n if (duration) {\n const transition = smartTransition(selection, duration)\n .style('opacity', 1) as Transition<SVGPathElement, ChordNode<N>, SVGGElement, ChordNode<N>>\n\n transition.attrTween('d', (d, i, els) => {\n const arcNode: ArcNode = els[i]\n const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }\n const datum = interpolate(arcNode._animState, nextAnimState)\n\n return (t: number): string => {\n arcNode._animState = datum(t)\n return arcGen(arcNode._animState)\n }\n })\n } else {\n selection.attr('d', d => arcGen(d))\n .style('opacity', 1)\n }\n}\n\nexport function removeNode<N extends ChordInputNode> (\n selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,\n duration: number\n): void {\n smartTransition(selection, duration)\n .style('opacity', 0)\n .remove()\n}\n"],"names":[],"mappings":";;;;AAoBM,SAAU,UAAU,CACxB,SAAwE,EAAA;IAExE,SAAS;AACN,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;SACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AAClB,QAAA,MAAM,OAAO,GAAY,GAAG,CAAC,CAAC,CAAC,CAAA;AAC/B,QAAA,MAAM,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;AACrC,QAAA,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACxC,OAAO,CAAC,UAAU,GAAG;AACnB,YAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;AACtC,YAAA,EAAE,EAAE,WAAW,GAAG,cAAc,GAAG,GAAG;YACtC,EAAE,EAAE,CAAC,CAAC,EAAE;YACR,EAAE,EAAE,CAAC,CAAC,EAAE;SACT,CAAA;AACH,KAAC,CAAC,CAAA;AACN,CAAC;AAEK,SAAU,UAAU,CACxB,SAAwE,EACxE,MAAyC,EACzC,MAA+B,EAC/B,QAAgB,EAAA;IAEhB,MAAM,SAAS,GAAG,CAAC,CAAe,KAAa,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IAE3F,SAAS;SACN,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC;SACtB,KAAK,CAAC,YAAY,EAAE,CAAA,KAAA,EAAQ,QAAQ,CAAI,EAAA,CAAA,CAAC;AACzC,SAAA,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC;AACxB,SAAA,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;AAE7B,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,MAAM,UAAU,GAAG,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACpD,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAwE,CAAA;AAE7F,QAAA,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,KAAI;AACtC,YAAA,MAAM,OAAO,GAAY,GAAG,CAAC,CAAC,CAAC,CAAA;YAC/B,MAAM,aAAa,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAA;YAChE,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,CAAA;YAE5D,OAAO,CAAC,CAAS,KAAY;AAC3B,gBAAA,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;AAC7B,gBAAA,OAAO,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;AACnC,aAAC,CAAA;AACH,SAAC,CAAC,CAAA;AACH,KAAA;AAAM,SAAA;AACL,QAAA,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;AAChC,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AACvB,KAAA;AACH,CAAC;AAEe,SAAA,UAAU,CACxB,SAAmE,EACnE,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnB,SAAA,MAAM,EAAE,CAAA;AACb;;;;"}
|
|
@@ -2,7 +2,7 @@ import { ComponentConfigInterface } from "../../core/component/config";
|
|
|
2
2
|
import { TrimMode } from "../../types/text";
|
|
3
3
|
import { GraphInputLink, GraphInputNode } from "../../types/graph";
|
|
4
4
|
import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from "../../types/accessor";
|
|
5
|
-
import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape } from './types';
|
|
5
|
+
import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting } from './types';
|
|
6
6
|
export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
|
|
7
7
|
/** Zoom level constraints. Default: [0.35, 1.25] */
|
|
8
8
|
zoomScaleExtent?: [number, number];
|
|
@@ -56,20 +56,11 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
|
|
|
56
56
|
* Default: `undefined` */
|
|
57
57
|
layoutParallelSortConnectionsByGroup?: string;
|
|
58
58
|
/** Force Layout settings, see the `d3-force` package for more details */
|
|
59
|
-
forceLayoutSettings?: GraphForceLayoutSettings
|
|
59
|
+
forceLayoutSettings?: GraphForceLayoutSettings<N, L>;
|
|
60
60
|
/** Darge Layout settings, see the `dagrejs` package
|
|
61
61
|
* for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout
|
|
62
62
|
*/
|
|
63
|
-
dagreLayoutSettings?:
|
|
64
|
-
/** Direction for rank node. `TB`, `BT`, `LR`, or `RL`. Default: `BT` */
|
|
65
|
-
rankdir: string;
|
|
66
|
-
/** Type of algorithm to assigns a rank to each node in the input graph.
|
|
67
|
-
* `network-simplex`, `tight-tree` or `longest-path`.
|
|
68
|
-
* Default: `longest-path` */
|
|
69
|
-
ranker: string;
|
|
70
|
-
/** Other configurable Dagre settings. https://github.com/dagrejs/dagre/wiki */
|
|
71
|
-
[key: string]: any;
|
|
72
|
-
};
|
|
63
|
+
dagreLayoutSettings?: GraphDagreLayoutSetting;
|
|
73
64
|
/** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.
|
|
74
65
|
* If you want to specify custom layout option for each node group, you can provide an accessor function that
|
|
75
66
|
* receives group name ('root' for the top-level configuration) as the first argument and returns an object containing
|
|
@@ -87,7 +78,7 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
|
|
|
87
78
|
/** Link band width accessor function or constant value. Default: `0` */
|
|
88
79
|
linkBandWidth?: NumericAccessor<L>;
|
|
89
80
|
/** Link arrow accessor function or constant value. Default: `undefined` */
|
|
90
|
-
linkArrow?: GenericAccessor<GraphLinkArrowStyle, L> | undefined;
|
|
81
|
+
linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;
|
|
91
82
|
/** Link stroke color accessor function or constant value. Default: `undefined` */
|
|
92
83
|
linkStroke?: ColorAccessor<L>;
|
|
93
84
|
/** Link disabled state accessor function or constant value. Default: `false` */
|
|
@@ -104,6 +95,12 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
|
|
|
104
95
|
linkLabelShiftFromCenter?: BooleanAccessor<L>;
|
|
105
96
|
/** Spacing between neighboring links. Default: `8` */
|
|
106
97
|
linkNeighborSpacing?: number;
|
|
98
|
+
/** Curvature of the link. Recommended value range: [0:1.5].
|
|
99
|
+
* `0` - straight line,
|
|
100
|
+
* `1` - nice curvature,
|
|
101
|
+
* `1.5` - very curve.
|
|
102
|
+
* Default: `0` */
|
|
103
|
+
linkCurvature?: NumericAccessor<L>;
|
|
107
104
|
/** Set selected link by its unique id. Default: `undefined` */
|
|
108
105
|
selectedLinkId?: number | string;
|
|
109
106
|
/** Node size accessor function or constant value. Default: `30` */
|
|
@@ -9,10 +9,12 @@ const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfi
|
|
|
9
9
|
charge: -500,
|
|
10
10
|
forceXStrength: 0.15,
|
|
11
11
|
forceYStrength: 0.25,
|
|
12
|
+
numIterations: undefined,
|
|
13
|
+
fixNodePositionAfterSimulation: false,
|
|
12
14
|
}, dagreLayoutSettings: {
|
|
13
15
|
rankdir: 'BT',
|
|
14
16
|
ranker: 'longest-path',
|
|
15
|
-
}, 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, 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 });
|
|
17
|
+
}, 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 });
|
|
16
18
|
|
|
17
19
|
export { GraphDefaultConfig };
|
|
18
20
|
//# sourceMappingURL=config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["// 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} 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 /** Zoom event callback. Default: `undefined` */\n onZoom?: (zoomScale: number, zoomScaleExtent: [number, number]) => void;\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\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?: {\n /** Direction for rank node. `TB`, `BT`, `LR`, or `RL`. Default: `BT` */\n rankdir: string;\n /** Type of algorithm to assigns a rank to each node in the input graph.\n * `network-simplex`, `tight-tree` or `longest-path`.\n * Default: `longest-path` */\n ranker: string;\n /** Other configurable Dagre settings. https://github.com/dagrejs/dagre/wiki */\n [key: string]: any;\n };\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, 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 /** 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 /** 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\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 onZoom: undefined,\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 },\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 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"],"names":[],"mappings":";;;;AAAA;MAuMa,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,sBAAsB,CACzB,EAAA,EAAA,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,gCAAgC,EAAE,GAAG,EACrC,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAE9B,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACrB,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;KACvB,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAE9B,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,cAAc,EAAE,SAAS,EACzB,qBAAqB,EAAE,IAAI,EAE3B,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EAEnB,cAAc,EAAE,SAAS,EACzB,MAAM,EAAE,SAAS,EAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["// 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} 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 /** Zoom event callback. Default: `undefined` */\n onZoom?: (zoomScale: number, zoomScaleExtent: [number, number]) => void;\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 /** 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\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 onZoom: undefined,\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"],"names":[],"mappings":";;;;AAAA;MAqMa,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,sBAAsB,CACzB,EAAA,EAAA,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,gCAAgC,EAAE,GAAG,EACrC,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAE9B,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,8BAA8B,EAAE,KAAK;AACtC,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;KACvB,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAE9B,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,CAAC,EAChB,cAAc,EAAE,SAAS,EACzB,qBAAqB,EAAE,IAAI,EAE3B,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EAEnB,cAAc,EAAE,SAAS,EACzB,MAAM,EAAE,SAAS,EAAA;;;;"}
|
|
@@ -104,7 +104,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
|
|
|
104
104
|
private _onDragged;
|
|
105
105
|
private _onDragEnded;
|
|
106
106
|
private _shouldLayoutRecalculate;
|
|
107
|
-
private
|
|
107
|
+
private _getLinkArrowDefId;
|
|
108
108
|
private _addSVGDefs;
|
|
109
109
|
zoomIn(increment?: number): void;
|
|
110
110
|
zoomOut(increment?: number): void;
|
|
@@ -6,8 +6,7 @@ import { drag } from 'd3-drag';
|
|
|
6
6
|
import { interval } from 'd3-timer';
|
|
7
7
|
import { ComponentCore } from '../../core/component/index.js';
|
|
8
8
|
import { GraphDataModel } from '../../data-models/graph.js';
|
|
9
|
-
import { isNumber, clamp, getBoolean, isFunction, shallowDiff
|
|
10
|
-
import { stringToHtmlId } from '../../utils/misc.js';
|
|
9
|
+
import { isNumber, clamp, getBoolean, isFunction, shallowDiff } from '../../utils/data.js';
|
|
11
10
|
import { smartTransition } from '../../utils/d3.js';
|
|
12
11
|
import { GraphLayoutType, GraphLinkArrowStyle } from './types.js';
|
|
13
12
|
import { GraphDefaultConfig } from './config.js';
|
|
@@ -19,7 +18,7 @@ import { panels, gPanel, panel, panelSelection, label as label$1, labelText, sid
|
|
|
19
18
|
import { createNodes, updateNodes, removeNodes, updateSelectedNodes, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
|
|
20
19
|
import { getMaxNodeSize, getX, getY, getNodeSize } from './modules/node/helper.js';
|
|
21
20
|
import { createLinks, updateLinks, removeLinks, updateSelectedLinks, animateLinkFlow, zoomLinksThrottled, zoomLinks } from './modules/link/index.js';
|
|
22
|
-
import {
|
|
21
|
+
import { getArrowPath, getDoubleArrowPath } from './modules/link/helper.js';
|
|
23
22
|
import { removePanels, createPanels, updatePanels } from './modules/panel/index.js';
|
|
24
23
|
import { initPanels, setPanelForNodes, updatePanelNumNodes, updatePanelBBoxSize } from './modules/panel/helper.js';
|
|
25
24
|
import { applyLayoutCircular, applyELKLayout, applyLayoutConcentric, applyLayoutForce, applyLayoutDagre, applyLayoutParallel } from './modules/layout.js';
|
|
@@ -61,7 +60,7 @@ class Graph extends ComponentCore {
|
|
|
61
60
|
this._linksGroup = this._graphGroup.append('g').attr('class', links);
|
|
62
61
|
this._nodesGroup = this._graphGroup.append('g').attr('class', nodes);
|
|
63
62
|
this._defs = this._graphGroup.append('defs');
|
|
64
|
-
this.
|
|
63
|
+
this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this);
|
|
65
64
|
}
|
|
66
65
|
get selectedNode() {
|
|
67
66
|
return this._selectedNode;
|
|
@@ -205,7 +204,7 @@ class Graph extends ComponentCore {
|
|
|
205
204
|
.attr('class', gLink)
|
|
206
205
|
.call(createLinks, config, duration);
|
|
207
206
|
const linkGroupsMerged = linkGroups.merge(linkGroupsEnter);
|
|
208
|
-
linkGroupsMerged.call(updateLinks, config, duration, this._scale, this.
|
|
207
|
+
linkGroupsMerged.call(updateLinks, config, duration, this._scale, this._getLinkArrowDefId);
|
|
209
208
|
const linkGroupsExit = linkGroups.exit();
|
|
210
209
|
linkGroupsExit
|
|
211
210
|
.attr('class', gLinkExit)
|
|
@@ -451,7 +450,9 @@ class Graph extends ComponentCore {
|
|
|
451
450
|
const propVal = transform[prop];
|
|
452
451
|
const initialPropVal = this._initialTransform[prop];
|
|
453
452
|
const dVal = Math.abs(propVal - initialPropVal);
|
|
454
|
-
|
|
453
|
+
const scaledDVal = prop === 'k' ? 20 * dVal : dVal / 15;
|
|
454
|
+
acc += scaledDVal;
|
|
455
|
+
return acc;
|
|
455
456
|
}, 0);
|
|
456
457
|
if (diff > config.layoutAutofitTolerance)
|
|
457
458
|
this._isAutoFitDisabled = true;
|
|
@@ -461,7 +462,7 @@ class Graph extends ComponentCore {
|
|
|
461
462
|
this._nodesGroup.selectAll(`.${gNode}`)
|
|
462
463
|
.call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomNodesThrottled : zoomNodes), config, this._scale);
|
|
463
464
|
this._linksGroup.selectAll(`.${gLink}`)
|
|
464
|
-
.call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks), config, this._scale, this.
|
|
465
|
+
.call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks), config, this._scale, this._getLinkArrowDefId);
|
|
465
466
|
}
|
|
466
467
|
_onDragStarted(d, event, nodeSelection) {
|
|
467
468
|
const { config } = this;
|
|
@@ -512,7 +513,7 @@ class Graph extends ComponentCore {
|
|
|
512
513
|
const target = l.target;
|
|
513
514
|
return source._id === d._id || target._id === d._id;
|
|
514
515
|
});
|
|
515
|
-
linksToUpdate.call(updateLinks, config, 0, scale, this.
|
|
516
|
+
linksToUpdate.call(updateLinks, config, 0, scale, this._getLinkArrowDefId);
|
|
516
517
|
const linksToAnimate = linksToUpdate.filter(d => d._state.greyout);
|
|
517
518
|
if (linksToAnimate.size())
|
|
518
519
|
animateLinkFlow(linksToAnimate, config, this._scale);
|
|
@@ -551,40 +552,18 @@ class Graph extends ComponentCore {
|
|
|
551
552
|
}
|
|
552
553
|
return false;
|
|
553
554
|
}
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
const c = color !== null && color !== void 0 ? color : getLinkColor(d, config);
|
|
557
|
-
const a = arrow !== null && arrow !== void 0 ? arrow : getLinkArrow(d, this._scale, config);
|
|
558
|
-
return a && c ? `${this.uid}-${stringToHtmlId(c)}-${a}` : null;
|
|
555
|
+
_getLinkArrowDefId(arrow) {
|
|
556
|
+
return arrow ? `${this.uid}-${arrow}` : null;
|
|
559
557
|
}
|
|
560
558
|
_addSVGDefs() {
|
|
561
|
-
const { datamodel: { links } } = this;
|
|
562
559
|
// Clean up old defs
|
|
563
560
|
this._defs.selectAll('*').remove();
|
|
564
|
-
//
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
]).enter()
|
|
571
|
-
.append('marker')
|
|
572
|
-
.attr('id', d => this._getMarkerId(null, d.color, d.arrow))
|
|
573
|
-
.attr('orient', 'auto')
|
|
574
|
-
.attr('markerWidth', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_WIDTH * 2 : LINK_MARKER_WIDTH)
|
|
575
|
-
.attr('markerHeight', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_HEIGHT * 2 : LINK_MARKER_HEIGHT)
|
|
576
|
-
.attr('markerUnits', 'userSpaceOnUse')
|
|
577
|
-
.attr('refX', LINK_MARKER_WIDTH - LINK_MARKER_HEIGHT / 2)
|
|
578
|
-
.attr('refY', LINK_MARKER_HEIGHT - LINK_MARKER_HEIGHT / 2)
|
|
579
|
-
.html(d => {
|
|
580
|
-
var _a;
|
|
581
|
-
return `
|
|
582
|
-
<path
|
|
583
|
-
d="${d.arrow === GraphLinkArrowStyle.Double ? getDoubleArrowPath() : getArrowPath()}"
|
|
584
|
-
fill="${(_a = d.color) !== null && _a !== void 0 ? _a : null}"
|
|
585
|
-
/>
|
|
586
|
-
`;
|
|
587
|
-
});
|
|
561
|
+
// Single Arrow
|
|
562
|
+
this._defs.append('path').attr('d', getArrowPath())
|
|
563
|
+
.attr('id', this._getLinkArrowDefId(GraphLinkArrowStyle.Single));
|
|
564
|
+
// Double Arrow
|
|
565
|
+
this._defs.append('path').attr('d', getDoubleArrowPath())
|
|
566
|
+
.attr('id', this._getLinkArrowDefId(GraphLinkArrowStyle.Double));
|
|
588
567
|
}
|
|
589
568
|
zoomIn(increment = 0.3) {
|
|
590
569
|
const scaleBy = 1 + increment;
|