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

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

@@ -1,302 +0,0 @@
-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/src/components/graph/modules/node/helper.ts

@@ -1,162 +0,0 @@
-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)'
-}