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

package/src/components/graph/modules/link/index.ts

@@ -0,0 +1,302 @@
+import { select, Selection } from 'd3-selection'
+import { range } from 'd3-array'
+import { Transition } from 'd3-transition'
+
+// Utils
+import { throttle, getValue, getBoolean } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+import { getHref } from 'utils/misc'
+
+// Types
+import { GraphInputLink, GraphInputNode } from 'types/graph'
+
+// Local Types
+import { GraphCircleLabel, GraphLink, GraphLinkArrowStyle, GraphLinkStyle } from '../../types'
+
+// Config
+import { GraphConfig } from '../../config'
+
+// Helpers
+import { getX, getY } from '../node/helper'
+import {
+  getPolylineData,
+  getLinkShiftTransform,
+  getLinkLabelShift,
+  getLinkStrokeWidth,
+  getLinkBandWidth,
+  getLinkColor,
+  getLinkLabelTextColor,
+  LINK_LABEL_RADIUS,
+  LINK_MARKER_WIDTH,
+} from './helper'
+import { ZoomLevel } from '../zoom-levels'
+
+// Styles
+import * as generalSelectors from '../../style'
+import * as linkSelectors from './style'
+
+export function createLinks<N extends GraphInputNode, L extends GraphInputLink> (
+  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>
+): void {
+  selection.attr('opacity', 0)
+
+  selection.append('line')
+    .attr('class', linkSelectors.linkSupport)
+
+  selection.append('polyline')
+    .attr('class', linkSelectors.link)
+
+  selection.append('line')
+    .attr('class', linkSelectors.linkBand)
+    .attr('x1', d => getX(d.source))
+    .attr('y1', d => getY(d.source))
+    .attr('x2', d => getX(d.target))
+    .attr('y2', d => getY(d.target))
+
+  selection.append('g')
+    .attr('class', linkSelectors.flowGroup)
+    .selectAll(`.${linkSelectors.flowCircle}`)
+    .data(range(0, 6)).enter()
+    .append('circle')
+    .attr('class', linkSelectors.flowCircle)
+
+  selection.append('g')
+    .attr('class', linkSelectors.labelGroups)
+}
+
+export function updateSelectedLinks<N extends GraphInputNode, L extends GraphInputLink> (
+  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>,
+  config: GraphConfig<N, L>,
+  scale: number
+): void {
+  const isGreyedOut = (d, i): boolean => getBoolean(d, config.linkDisabled, i) || d._state.greyout
+  selection
+    .classed(linkSelectors.greyout, (d, i) => isGreyedOut(d, i))
+
+  selection.each((d, i, elements) => {
+    const element = elements[i]
+    const group = select(element)
+    group.select(`.${linkSelectors.link}`)
+    group.select(`.${linkSelectors.linkBand}`)
+    const linkSupport = group.select(`.${linkSelectors.linkSupport}`)
+
+    linkSupport
+      .style('stroke-opacity', (d._state.hovered || d._state.selected) ? 0.2 : 0)
+      .style('stroke-width',
+        d._state.selected
+          ? getLinkBandWidth(d, scale, config) + 5
+          : d._state.hovered ? getLinkBandWidth(d, scale, config) + 10 : null
+      )
+  })
+}
+
+export function updateLinks<N extends GraphInputNode, L extends GraphInputLink> (
+  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>,
+  config: GraphConfig<N, L>,
+  duration: number,
+  scale = 1,
+  getMarkerId: (d: GraphLink) => string
+): void {
+  const { linkFlowParticleSize, linkStyle, linkFlow, linkArrow, linkLabel, linkLabelShiftFromCenter } = config
+  if (!selection.size()) return
+
+  selection
+    .classed(
+      linkSelectors.linkDashed,
+      d => getValue<GraphLink<N, L>, GraphLinkStyle>(d, linkStyle, d._indexGlobal) === GraphLinkStyle.Dashed
+    )
+
+  selection.each((d, i, elements) => {
+    const element = elements[i]
+    const linkGroup = select(element)
+    const link = linkGroup.select(`.${linkSelectors.link}`)
+    const linkBand = linkGroup.select(`.${linkSelectors.linkBand}`)
+    const linkSupport = linkGroup.select(`.${linkSelectors.linkSupport}`)
+    const flowGroup = linkGroup.select(`.${linkSelectors.flowGroup}`)
+
+    const x1 = getX(d.source)
+    const y1 = getY(d.source)
+    const x2 = getX(d.target)
+    const y2 = getY(d.target)
+
+    link
+      .attr('class', linkSelectors.link)
+      .attr('marker-mid', getHref(d, getMarkerId))
+      .style('stroke-width', getLinkStrokeWidth(d, scale, config))
+      .style('stroke', getLinkColor(d, config))
+      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+
+    smartTransition(link, duration)
+      .attr('points', getPolylineData({ x1, y1, x2, y2 }))
+
+    linkBand
+      .attr('class', linkSelectors.linkBand)
+      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+      .style('stroke-width', getLinkBandWidth(d, scale, config))
+      .style('stroke', getLinkColor(d, config))
+
+    smartTransition(linkBand, duration)
+      .attr('x1', x1)
+      .attr('y1', y1)
+      .attr('x2', x2)
+      .attr('y2', y2)
+
+    linkSupport
+      .style('stroke', getLinkColor(d, config))
+      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+      .attr('x1', x1)
+      .attr('y1', y1)
+      .attr('x2', x2)
+      .attr('y2', y2)
+
+    flowGroup
+      .attr('transform', getLinkShiftTransform(d, config.linkNeighborSpacing))
+      .style('display', getBoolean(d, linkFlow, d._indexGlobal) ? null : 'none')
+      .style('opacity', 0)
+
+    flowGroup
+      .selectAll(`.${linkSelectors.flowCircle}`)
+      .attr('r', linkFlowParticleSize / scale)
+      .style('fill', getLinkColor(d, config))
+
+    smartTransition(flowGroup, duration)
+      .style('opacity', scale < ZoomLevel.Level2 ? 0 : 1)
+
+    // Labels
+    const labelGroups = linkGroup.selectAll(`.${linkSelectors.labelGroups}`)
+    const labelDatum = getValue<GraphLink<N, L>, GraphCircleLabel>(d, linkLabel, d._indexGlobal)
+    const markerWidth = getValue<GraphLink<N, L>, GraphLinkArrowStyle>(d, linkArrow, d._indexGlobal) ? LINK_MARKER_WIDTH * 2 : 0
+    const labelShift = getBoolean(d, linkLabelShiftFromCenter, d._indexGlobal) ? -markerWidth + 4 : 0
+    const labelTranslate = getLinkLabelShift(d, config.linkNeighborSpacing, labelShift)
+
+    const labels = labelGroups
+      .selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.labelGroup}`)
+      .data(labelDatum && labelDatum.text ? [labelDatum] : [])
+
+    // Enter
+    const labelsEnter = labels.enter().append('g')
+      .attr('class', linkSelectors.labelGroup)
+      .attr('transform', labelTranslate)
+      .style('opacity', 0)
+
+    labelsEnter.append('circle')
+      .attr('class', linkSelectors.labelCircle)
+      .attr('r', 0)
+
+    labelsEnter.append('text')
+      .attr('class', linkSelectors.labelContent)
+
+    // Update
+    const labelsUpdate = labels.merge(labelsEnter)
+
+    smartTransition(labelsUpdate.select(`.${linkSelectors.labelCircle}`), duration)
+      .attr('r', label => label.radius ?? LINK_LABEL_RADIUS)
+      .style('fill', label => label.color)
+
+    labelsUpdate.select(`.${linkSelectors.labelContent}`)
+      .text(label => label.text)
+      .attr('dy', '0.1em')
+      .style('fill', label => label.textColor ?? getLinkLabelTextColor(label))
+      .style('font-size', label => {
+        if (label.fontSize) return label.fontSize
+        const radius = label.radius ?? LINK_LABEL_RADIUS
+        return `${radius / Math.pow(label.text.toString().length, 0.4)}px`
+      })
+
+    smartTransition(labelsUpdate, duration)
+      .attr('transform', labelTranslate)
+      .style('cursor', label => label.cursor)
+      .style('opacity', 1)
+
+    // Exit
+    const labelsExit = labels.exit()
+    smartTransition(labelsExit.select(`.${linkSelectors.labelCircle}`), duration)
+      .attr('r', 0)
+
+    smartTransition(labelsExit, duration)
+      .style('opacity', 0)
+      .remove()
+  })
+
+  if (duration > 0) {
+    selection.attr('pointer-events', 'none')
+    const t = smartTransition(selection, duration) as Transition<SVGGElement, GraphLink<N, L>, SVGGElement, GraphLink<N, L>>
+    t
+      .attr('opacity', 1)
+      .on('end interrupt', (d, i, elements) => {
+        select(elements[i])
+          .attr('pointer-events', 'stroke')
+          .attr('opacity', 1)
+      })
+  } else {
+    selection.attr('opacity', 1)
+  }
+
+  updateSelectedLinks(selection, config, scale)
+}
+
+export function removeLinks<N extends GraphInputNode, L extends GraphInputLink> (
+  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>,
+  config: GraphConfig<N, L>,
+  duration: number
+): void {
+  smartTransition(selection, duration / 2)
+    .attr('opacity', 0)
+    .remove()
+}
+
+export function animateLinkFlow<N extends GraphInputNode, L extends GraphInputLink> (
+  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>,
+  config: GraphConfig<N, L>,
+  scale: number
+): void {
+  const { linkFlow } = config
+  if (scale < ZoomLevel.Level2) return
+
+  selection.each((d, i, elements) => {
+    const element = elements[i]
+    const linkGroup = select(element)
+    const flowGroup = linkGroup.select(`.${linkSelectors.flowGroup}`)
+
+    if (!getBoolean(d, linkFlow, d._indexGlobal)) return
+    const t = d._state.flowAnimTime
+    const circles = flowGroup.selectAll(`.${linkSelectors.flowCircle}`)
+
+    circles
+      .attr('transform', index => {
+        const tt = (t + (+index) / (circles.size() - 1)) % 1
+        const x1 = getX(d.source)
+        const y1 = getY(d.source)
+        const x2 = getX(d.target)
+        const y2 = getY(d.target)
+
+        const x = x1 + tt * (x2 - x1)
+        const y = y1 + tt * (y2 - y1)
+        return `translate(${x}, ${y})`
+      })
+  })
+}
+
+export function zoomLinks<N extends GraphInputNode, L extends GraphInputLink> (
+  selection: Selection<SVGGElement, GraphLink<N, L>, SVGGElement, unknown>,
+  config: GraphConfig<N, L>,
+  scale: number,
+  getMarkerId: (d: GraphLink) => string
+): void {
+  const { linkFlowParticleSize } = config
+
+  selection.classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)
+  selection.selectAll(`.${linkSelectors.flowCircle}`)
+    .attr('r', linkFlowParticleSize / scale)
+
+  const linkElements = selection.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.link}`)
+  linkElements
+    .attr('marker-mid', d => getHref(d, getMarkerId))
+    .style('stroke-width', d => getLinkStrokeWidth(d, scale, config))
+
+  const linkBandElements = selection.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.linkBand}`)
+  linkBandElements
+    .style('stroke-width', d => getLinkBandWidth(d, scale, config))
+}
+
+export const zoomLinksThrottled = throttle(zoomLinks, 500)

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

@@ -1,9 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const links = css `
+export const links = css`
   label: links;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-graph-link-stroke-color: #e6e9f3;
     --vis-graph-link-stroke-opacity: 1.0;
@@ -31,8 +32,9 @@ const variables = injectGlobal `
     --vis-graph-link-label-text-color: var(--vis-dark-graph-link-label-text-color);
     --vis-graph-link-label-fill-color: var(--vis-dark-graph-link-label-fill-color);
   }
-`;
-const linkSupport = css `
+`
+
+export const linkSupport = css`
   label: link-support;
 
   fill: none;
@@ -42,8 +44,9 @@ const linkSupport = css `
   stroke-opacity: 0;
   stroke: var(--vis-graph-link-stroke-color);
   transition: .2s;
-`;
-const link = css `
+`
+
+export const link = css`
   label: link;
 
   fill: none;
@@ -52,63 +55,71 @@ const link = css `
   transition: stroke 800ms;
   stroke-linecap: round;
   pointer-events: none;
-`;
-const linkDashed = css `
+`
+
+export const linkDashed = css`
   label: dashed;
 
   ${`.${link}`} {
     stroke-dasharray: var(--vis-graph-link-dashed-stroke-dasharray);
   }
-`;
-const gLink = css `
+`
+
+export const gLink = css`
   label: g-link;
-`;
-const gLinkExit = css `
+`
+
+export const gLinkExit = css`
   label: g-link-exit;
   pointer-events: none;
-`;
-const greyout = css `
+`
+
+export const greyout = css`
   label: greyout;
   opacity: var(--vis-graph-link-greyout-opacity);
-`;
-const linkBand = css `
+`
+
+export const linkBand = css`
   label: link-band;
 
   stroke-opacity: var(--vis-graph-link-band-opacity);
   pointer-events: none;
   stroke: var(--vis-graph-node-stroke-color);
-`;
-const flowGroup = css `
+`
+
+export const flowGroup = css`
   label: flow-group;
 
   pointer-events: none;
-`;
-const flowCircle = css `
+`
+
+export const flowCircle = css`
   label: flow-circle;
 
   fill: var(--vis-graph-link-stroke-color);
-`;
-const labelGroups = css `
+`
+
+export const labelGroups = css`
   label: label-groups;
-`;
-const labelGroup = css `
+`
+
+export const labelGroup = css`
   label: label-group;
   pointer-events: all;
-`;
-const labelCircle = css `
+`
+
+export const labelCircle = css`
   label: label-circle;
 
   fill: var(--vis-graph-link-label-fill-color);
   stroke: var(--vis-graph-link-label-stroke-color);
-`;
-const labelContent = css `
+`
+
+export const labelContent = css`
   label: label-content;
 
   font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);
   fill: var(--vis-graph-link-label-text-color);
   text-anchor: middle;
   dominant-baseline: middle;
-`;
-
-export { flowCircle, flowGroup, gLink, gLinkExit, greyout, labelCircle, labelContent, labelGroup, labelGroups, link, linkBand, linkDashed, linkSupport, links, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/graph/modules/node/helper.ts

@@ -0,0 +1,162 @@
+import { BaseType, Selection } from 'd3-selection'
+import { interpolate } from 'd3-interpolate'
+import { max, mean } from 'd3-array'
+import { Arc } from 'd3-shape'
+
+// Types
+import { ColorAccessor, NumericAccessor } from 'types/accessor'
+import { GraphInputLink, GraphInputNode } from 'types/graph'
+
+// Utils
+import { scoreRectPath } from 'utils/path'
+import { isEmpty, isNil, getNumber, getString } from 'utils/data'
+import { getColor, getHexValue, hexToBrightness } from 'utils/color'
+
+// Local Types
+import { GraphNode, GraphCircleLabel, GraphNodeAnimatedElement, GraphNodeAnimationState, GraphNodeShape } from '../../types'
+
+// Config
+import { GraphConfigInterface } from '../../config'
+
+export const NODE_SIZE = 30
+export const LABEL_RECT_HORIZONTAL_PADDING = 10
+export const LABEL_RECT_VERTICAL_PADDING = 4
+
+export function getNodeSize<T> (d: T, nodeSizeAccessor: NumericAccessor<T>, index: number): number {
+  return getNumber(d, nodeSizeAccessor, index) || NODE_SIZE
+}
+
+function _setInitialAnimState (el: GraphNodeAnimatedElement<SVGElement>, index: number): void {
+  el._animState = {
+    endAngle: 0,
+    nodeIndex: index,
+  }
+}
+
+// Animate the arc around node with keeping
+// the current anim state info
+export function arcTween<N extends GraphInputNode, L extends GraphInputLink> (
+  d: GraphNode<N, L>,
+  config: GraphConfigInterface<N, L>,
+  arcConstructor: Arc<any, GraphNodeAnimationState>,
+  el: GraphNodeAnimatedElement<SVGElement>
+): (t: number) => string {
+  const { nodeStrokeWidth, nodeSize, nodeGaugeValue } = config
+  if (!el._animState) _setInitialAnimState(el, d._index)
+
+  const i = interpolate(el._animState, {
+    endAngle: 2 * Math.PI * (getNumber(d, nodeGaugeValue, d._index) ?? 0) / 100,
+    nodeIndex: d._index,
+    nodeSize: getNodeSize(d, nodeSize, d._index),
+    borderWidth: getNumber(d, nodeStrokeWidth, d._index),
+  })
+  el._animState = i(0)
+
+  return (t: number): string => {
+    el._animState = i(t)
+    return arcConstructor(el._animState)
+  }
+}
+
+export function polyTween<N extends GraphInputNode, L extends GraphInputLink> (
+  d: GraphNode<N, L>,
+  config: GraphConfigInterface<N, L>, polygonConstructor,
+  el: GraphNodeAnimatedElement<SVGElement>
+): (t: number) => string {
+  const { nodeShape, nodeGaugeValue } = config
+  const nodeSize = getNodeSize(d, config.nodeSize, d._index)
+  let n: number
+  switch (getString(d, nodeShape, d._index)) {
+    case GraphNodeShape.Square:
+      n = 4
+      break
+    case GraphNodeShape.Triangle:
+      n = 3
+      break
+    case GraphNodeShape.Hexagon:
+    default:
+      n = 6
+  }
+
+  if (!el._animState) _setInitialAnimState(el, d._index)
+  const i = interpolate(el._animState, {
+    endAngle: 2 * Math.PI * (getNumber(d, nodeGaugeValue, d._index) ?? 0) / 100,
+    nodeIndex: d._index,
+  })
+  el._animState = i(0)
+
+  return (t: number): string => {
+    el._animState = i(t)
+    return n === 4 ? scoreRectPath({
+      x: -nodeSize / 2,
+      y: -nodeSize / 2,
+      w: nodeSize,
+      h: nodeSize,
+      r: 5,
+      score: el._animState.endAngle / (2 * Math.PI),
+    }) : polygonConstructor(nodeSize, n, el._animState.endAngle, true)
+  }
+}
+
+export function setLabelRect<T, K extends BaseType, L> (
+  labelSelection: Selection<SVGGElement, T, K, L>,
+  label: string,
+  selector: string
+): Selection<SVGRectElement, T, K, L> {
+  // Set label background rectangle size by text size
+  const labelIsEmpty = isEmpty(label)
+  const labelTextSelection = labelSelection.select<SVGTextElement>(`.${selector}`)
+  const labelTextBBox = (labelTextSelection.node() as SVGGraphicsElement).getBBox()
+  const backgroundRect = labelSelection.select<SVGRectElement>('rect')
+    .attr('visibility', labelIsEmpty ? 'hidden' : null)
+    .attr('rx', 4)
+    .attr('ry', 4)
+    .attr('x', -labelTextBBox.width / 2 - LABEL_RECT_HORIZONTAL_PADDING)
+    .attr('y', '-0.64em')
+    .attr('width', labelTextBBox.width + 2 * LABEL_RECT_HORIZONTAL_PADDING)
+    .attr('height', labelTextBBox.height + 2 * LABEL_RECT_VERTICAL_PADDING)
+    .style('transform', `translateY(${-LABEL_RECT_VERTICAL_PADDING}px)`)
+
+  return backgroundRect
+}
+
+export function getX (node: GraphNode): number {
+  return node._state && !isNil(node._state.fx) ? node._state.fx : node.x
+}
+
+export function getY (node: GraphNode): number {
+  return node._state && !isNil(node._state.fy) ? node._state.fy : node.y
+}
+
+export function configuredNodeSize<T> (nodeSizeAccessor: NumericAccessor<T>): number {
+  return typeof nodeSizeAccessor === 'number' ? nodeSizeAccessor : NODE_SIZE
+}
+
+export function getMaxNodeSize<T> (data: T[], nodeSize: NumericAccessor<T>): number {
+  return max(data || [], (d, i) => getNodeSize(d, nodeSize, i)) || NODE_SIZE
+}
+
+export function getAverageNodeSize<T> (data: T[], nodeSize: NumericAccessor<T>): number {
+  return mean(data || [], (d, i) => getNodeSize(d, nodeSize, i)) || NODE_SIZE
+}
+
+export function getSideLabelTextColor (label: GraphCircleLabel, context: SVGElement): string {
+  if (!label.color) return null
+
+  const hex = getHexValue(label.color, context)
+  const brightness = hexToBrightness(hex)
+  return brightness > 0.65 ? 'var(--vis-graph-node-side-label-fill-color-dark)' : 'var(--vis-graph-node-side-label-fill-color-bright)'
+}
+
+export function getNodeColor<T> (d: T, colorAccessor: ColorAccessor<T>, index: number): string {
+  return getColor(d, colorAccessor, index, true) ?? null
+}
+
+export function getNodeIconColor<T> (d: T, colorAccessor: ColorAccessor<T>, index: number, context: SVGElement): string {
+  const nodeColor = getNodeColor(d, colorAccessor, index)
+  if (!nodeColor) return null
+
+  const hex = getHexValue(nodeColor, context)
+  const brightness = hexToBrightness(hex)
+  return brightness > 0.65 ? 'var(--vis-graph-node-icon-fill-color-dark)' : 'var(--vis-graph-node-icon-fill-color-bright)'
+}