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

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

@@ -1,343 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { Transition } from 'd3-transition'
-import { arc } from 'd3-shape'
-
-// Types
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-
-// Utils
-import { trimString } from 'utils/text'
-import { polygon } from 'utils/path'
-import { smartTransition } from 'utils/d3'
-import { getBoolean, getNumber, getString, getValue, throttle } from 'utils/data'
-
-// Local Types
-import { GraphNode, GraphCircleLabel, GraphNodeAnimationState, GraphNodeAnimatedElement, GraphNodeShape } from '../../types'
-
-// Config
-import { GraphConfig } from '../../config'
-
-// Helpers
-import {
-  arcTween,
-  polyTween,
-  setLabelRect,
-  getX,
-  getY,
-  getSideLabelTextColor,
-  getNodeColor,
-  getNodeIconColor,
-  getNodeSize,
-  LABEL_RECT_VERTICAL_PADDING,
-} from './helper'
-import { appendShape, updateShape, isCustomXml } from '../shape'
-import { ZoomLevel } from '../zoom-levels'
-
-// Styles
-import * as generalSelectors from '../../style'
-import * as nodeSelectors from './style'
-
-const SIDE_LABEL_DEFAULT_RADIUS = 10
-
-export function createNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  config: GraphConfig<N, L>
-): void {
-  const { nodeShape } = config
-
-  selection.each((d, i, elements) => {
-    const element = elements[i]
-    const group = select<SVGGElement, GraphNode<N, L>>(element)
-    group
-      .attr('transform', (d: GraphNode<N, L>, i) => {
-        const configuredPosition = getValue<GraphNode<N, L>, [number, number] | undefined>(d, config.nodeEnterPosition, i)
-        const scale = getNumber(d, config.nodeEnterScale, i) ?? 0
-        const x = configuredPosition?.[0] ?? getX(d)
-        const y = configuredPosition?.[1] ?? getY(d)
-        return `translate(${x}, ${y}) scale(${scale})`
-      })
-      .attr('opacity', 0)
-
-    const shape = getString(d, nodeShape, d._index)
-    /** Todo: The 'nodeShape' storing logic below it a temporary fix, needs a cleaner implementation */
-    // eslint-disable-next-line dot-notation
-    element['nodeShape'] = shape
-    appendShape(group, shape, nodeSelectors.node, nodeSelectors.customNode, d._index)
-    appendShape(group, shape, nodeSelectors.nodeSelection, nodeSelectors.customNode, d._index)
-    group.append('path').attr('class', nodeSelectors.nodeGauge)
-    group.append('text').attr('class', nodeSelectors.nodeIcon)
-
-    const label = group.append('g').attr('class', nodeSelectors.label)
-    label.append('rect').attr('class', nodeSelectors.labelBackground)
-
-    const labelText = label.append('text')
-      .attr('class', nodeSelectors.labelText)
-      .attr('dy', '0.32em')
-    labelText.append('tspan').attr('class', nodeSelectors.labelTextContent)
-    labelText.append('tspan')
-      .attr('class', nodeSelectors.subLabelTextContent)
-      .attr('dy', '1.1em')
-      .attr('x', '0')
-
-    group.append('g')
-      .attr('class', nodeSelectors.sideLabelsGroup)
-
-    group.append('text')
-      .attr('class', nodeSelectors.nodeBottomIcon)
-  })
-}
-
-export function updateSelectedNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  config: GraphConfig<N, L>
-): void {
-  const { nodeDisabled } = config
-
-  selection.each((d, i, elements) => {
-    const group: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = select(elements[i])
-    const isGreyout = getBoolean(d, nodeDisabled, d._index) || d._state.greyout
-
-    group.classed(nodeSelectors.greyoutNode, isGreyout)
-      .classed(nodeSelectors.draggable, !config.disableDrag)
-
-    const nodeSelectionOutline = group.selectAll<SVGGElement, GraphNode<N, L>>(`.${nodeSelectors.nodeSelection}`)
-    nodeSelectionOutline.classed(nodeSelectors.nodeSelectionActive, d._state.selected)
-
-    group.selectAll<SVGTextElement, GraphCircleLabel>(`.${nodeSelectors.sideLabel}`)
-      .style('fill', (l) => isGreyout ? null : getSideLabelTextColor(l, selection.node()))
-
-    group.selectAll<SVGRectElement, GraphCircleLabel>(`.${nodeSelectors.sideLabelBackground}`)
-      .style('fill', (l) => isGreyout ? null : l.color)
-  })
-}
-
-export function updateNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  config: GraphConfig<N, L>,
-  duration: number,
-  scale = 1
-): Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> | Transition<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> {
-  const {
-    nodeGaugeAnimDuration, nodeStrokeWidth, nodeShape, nodeSize, nodeGaugeValue, nodeGaugeFill,
-    nodeIcon, nodeIconSize, nodeLabel, nodeLabelTrim, nodeLabelTrimMode, nodeLabelTrimLength,
-    nodeSubLabel, nodeSubLabelTrim, nodeSubLabelTrimMode, nodeSubLabelTrimLength,
-    nodeSideLabels, nodeStroke, nodeFill, nodeBottomIcon,
-  } = config
-
-  // Re-create nodes to update shapes if they were changes
-  selection.each((d, i, elements) => {
-    const element = elements[i]
-    const group = select<SVGGElement, GraphNode<N, L>>(element)
-    const shape = getString(d, nodeShape, d._index)
-
-    // eslint-disable-next-line dot-notation
-    if (element['nodeShape'] !== shape) {
-      group.select(`.${nodeSelectors.node}`).remove()
-      appendShape(group, nodeShape, nodeSelectors.node, nodeSelectors.customNode, d._index, `.${nodeSelectors.nodeSelection}`)
-      group.select(`.${nodeSelectors.nodeSelection}`).remove()
-      appendShape(group, shape, nodeSelectors.nodeSelection, null, d._index, `.${nodeSelectors.nodeGauge}`)
-      // eslint-disable-next-line dot-notation
-      element['nodeShape'] = shape
-    }
-  })
-
-  // Update nodes themselves
-  selection.each((d, i, elements) => {
-    const groupElement = elements[i]
-    const group: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = select(groupElement)
-    const node: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = group.select(`.${nodeSelectors.node}`)
-    const nodeArc = group.select<GraphNodeAnimatedElement<SVGElement>>(`.${nodeSelectors.nodeGauge}`)
-    const icon = group.select<SVGTextElement>(`.${nodeSelectors.nodeIcon}`)
-    const sideLabelsGroup = group.select<SVGGElement>(`.${nodeSelectors.sideLabelsGroup}`)
-    const label = group.select<SVGGElement>(`.${nodeSelectors.label}`)
-    const labelTextContent = label.select<SVGTextElement>(`.${nodeSelectors.labelTextContent}`)
-    const sublabelTextContent = label.select<SVGTextElement>(`.${nodeSelectors.subLabelTextContent}`)
-    const bottomIcon = group.select<SVGTextElement>(`.${nodeSelectors.nodeBottomIcon}`)
-    const nodeSelectionOutline = group.select<SVGGElement>(`.${nodeSelectors.nodeSelection}`)
-    const nodeSizeValue = getNodeSize(d, nodeSize, d._index)
-    const arcGenerator = arc<GraphNodeAnimationState>()
-      .innerRadius(state => getNodeSize(state, nodeSize, state.nodeIndex) / 2 - (getNumber(state, nodeStrokeWidth, state.nodeIndex) / 2))
-      .outerRadius(state => getNodeSize(state, nodeSize, state.nodeIndex) / 2 + (getNumber(state, nodeStrokeWidth, state.nodeIndex) / 2))
-      .startAngle(0 * (Math.PI / 180))
-      // eslint-disable-next-line dot-notation
-      .endAngle(a => a['endAngle'])
-
-    group
-      .classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)
-      .classed(nodeSelectors.nodeIsDragged, (d: GraphNode<N, L>) => d._state.isDragged)
-
-    // Update Group
-    group
-      .classed(nodeSelectors.nodePolygon, () => {
-        const shape = getString(d, nodeShape, d._index)
-        return shape === GraphNodeShape.Triangle || shape === GraphNodeShape.Hexagon || shape === GraphNodeShape.Square
-      })
-
-    // Update Node
-    node
-      .call(updateShape, nodeShape, nodeSize, d._index)
-      .attr('stroke-width', getNumber(d, nodeStrokeWidth, d._index) ?? 0)
-      .style('fill', getNodeColor(d, nodeFill, d._index))
-      .style('stroke', getString(d, nodeStroke, d._index) ?? null)
-
-    const nodeBBox = (node.node() as SVGGraphicsElement).getBBox()
-
-    nodeArc
-      .attr('stroke-width', getNumber(d, nodeStrokeWidth, d._index))
-      .style('display', !getNumber(d, nodeGaugeValue, d._index) ? 'none' : null)
-      .style('fill', getNodeColor(d, nodeGaugeFill, d._index))
-      .style('stroke', getNodeColor(d, nodeGaugeFill, d._index))
-      .style('stroke-opacity', d => getString(d, nodeShape, d._index) === GraphNodeShape.Circle ? 0 : null)
-
-    nodeArc
-      .transition()
-      .duration(nodeGaugeAnimDuration)
-      .attrTween('d', (
-        d,
-        j,
-        arr
-      ) => {
-        switch (getString(d, nodeShape, d._index)) {
-          case GraphNodeShape.Circle: return arcTween(d, config, arcGenerator, arr[j])
-          case GraphNodeShape.Hexagon: return polyTween(d, config, polygon, arr[j])
-          case GraphNodeShape.Square: return polyTween(d, config, polygon, arr[j])
-          case GraphNodeShape.Triangle: return polyTween(d, config, polygon, arr[j])
-          default: return null
-        }
-      })
-
-    // Set Node Selection
-    updateShape(nodeSelectionOutline, nodeShape, nodeSize, d._index)
-
-    // Update Node Icon
-    icon
-      .style('font-size', `${getNumber(d, nodeIconSize, d._index) ?? 2.5 * Math.sqrt(nodeSizeValue)}px`)
-      .attr('dy', '0.1em')
-      .style('fill', getNodeIconColor(d, nodeFill, d._index, selection.node()))
-      .html(getString(d, nodeIcon, d._index))
-
-    // Side Labels
-    const sideLabelsData = getValue<GraphNode<N, L>, GraphCircleLabel[]>(d, nodeSideLabels, d._index) || []
-    const sideLabels = sideLabelsGroup.selectAll<SVGGElement, GraphCircleLabel>('g').data(sideLabelsData)
-    const sideLabelsEnter = sideLabels.enter().append('g')
-      .attr('class', nodeSelectors.sideLabelGroup)
-    sideLabelsEnter.append('circle')
-      .attr('class', nodeSelectors.sideLabelBackground)
-      .attr('r', l => l.radius ?? SIDE_LABEL_DEFAULT_RADIUS)
-    sideLabelsEnter.append('text')
-      .attr('class', nodeSelectors.sideLabel)
-
-    const sideLabelsUpdate = sideLabels.merge(sideLabelsEnter)
-      .style('cursor', l => l.cursor ?? null)
-
-    // Side label text
-    sideLabelsUpdate.select(`.${nodeSelectors.sideLabel}`).html(d => d.text)
-      .attr('dy', '0.1em')
-      .style('fill', l => l.textColor ?? getSideLabelTextColor(l, selection.node()))
-      .style('font-size', l => l.fontSize ?? `${(2 + (l.radius ?? SIDE_LABEL_DEFAULT_RADIUS)) / Math.pow(l.text.toString().length, 0.3)}px`)
-      // Side label circle background
-    sideLabelsUpdate.select(`.${nodeSelectors.sideLabelBackground}`)
-      .style('fill', l => l.color)
-
-    sideLabelsUpdate.attr('transform', (l, j) => {
-      if (sideLabelsData.length === 1) return `translate(${nodeSizeValue / 2.5}, ${-nodeSizeValue / 2.5})`
-      const r = 1.05 * nodeSizeValue / 2
-      const angle = j * 1.15 * 2 * Math.atan2(l.radius ?? SIDE_LABEL_DEFAULT_RADIUS, r) - Math.PI / 3
-      return `translate(${r * Math.cos(angle)}, ${r * Math.sin(angle)})`
-    })
-
-    sideLabels.exit().remove()
-
-    // Set label and sub-label text
-    const labelText = getString(d, nodeLabel, d._index)
-    const sublabelText = getString(d, nodeSubLabel, d._index)
-    const labelTextTrimmed = getBoolean(d, nodeLabelTrim, d._index)
-      ? trimString(labelText, getNumber(d, nodeLabelTrimLength, d._index), getValue(d, nodeLabelTrimMode, d._index))
-      : labelText
-    const sublabelTextTrimmed = getBoolean(d, nodeSubLabelTrim, d._index)
-      ? trimString(sublabelText, getNumber(d, nodeSubLabelTrimLength, d._index), getValue(d, nodeSubLabelTrimMode, d._index))
-      : sublabelText
-
-    labelTextContent.text(labelTextTrimmed)
-    sublabelTextContent.text(sublabelTextTrimmed)
-    group
-      .on('mouseenter', () => {
-        labelTextContent.text(labelText)
-        sublabelTextContent.text(sublabelText)
-        setLabelRect(label, labelText, nodeSelectors.labelText)
-        group.raise()
-      })
-      .on('mouseleave', () => {
-        labelTextContent.text(labelTextTrimmed)
-        sublabelTextContent.text(sublabelTextTrimmed)
-        setLabelRect(label, labelTextTrimmed, nodeSelectors.labelText)
-      })
-
-    // Position label
-    const labelFontSize = parseFloat(window.getComputedStyle(groupElement).getPropertyValue('--vis-graph-node-label-font-size')) || 12
-    const labelMargin = LABEL_RECT_VERTICAL_PADDING + 1.25 * labelFontSize ** 1.03
-    const nodeHeight = isCustomXml((getString(d, nodeShape, d._index)) as GraphNodeShape) ? nodeBBox.height : nodeSizeValue
-    label.attr('transform', `translate(0, ${nodeHeight / 2 + labelMargin})`)
-    if (scale >= ZoomLevel.Level3) setLabelRect(label, getString(d, nodeLabel, d._index), nodeSelectors.labelText)
-
-    // Bottom Icon
-    bottomIcon.html(getString(d, nodeBottomIcon, d._index))
-      .attr('transform', `translate(0, ${nodeHeight / 2})`)
-  })
-
-  updateSelectedNodes(selection, config)
-
-  return smartTransition(selection, duration)
-    .attr('transform', d => `translate(${getX(d)}, ${getY(d)}) scale(1)`)
-    .attr('opacity', 1)
-}
-
-export function removeNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  config: GraphConfig<N, L>,
-  duration: number
-): void {
-  smartTransition(selection, duration / 2)
-    .attr('opacity', 0)
-    .attr('transform', (d, i) => {
-      const configuredPosition = getValue<GraphNode<N, L>, [number, number] | undefined>(d, config.nodeExitPosition, i)
-      const scale = getNumber(d, config.nodeExitScale, i) ?? 0
-      const x = configuredPosition?.[0] ?? getX(d)
-      const y = configuredPosition?.[1] ?? getY(d)
-      return `translate(${x}, ${y}) scale(${scale})`
-    })
-    .remove()
-}
-
-function setLabelBackgroundRect<N extends GraphInputNode, L extends GraphInputLink> (
-  selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  config: GraphConfig<N, L>
-): void {
-  const { nodeLabel } = config
-
-  selection.each((d, i, elements) => {
-    const group: Selection<SVGGElement, N, SVGGElement, N> = select(elements[i])
-    const label: Selection<SVGGElement, N, SVGGElement, N> = group.select(`.${nodeSelectors.label}`)
-    setLabelRect(label, getString(d, nodeLabel, i), nodeSelectors.labelText)
-  })
-}
-
-const setLabelBackgroundRectThrottled = throttle(setLabelBackgroundRect, 1000) as typeof setLabelBackgroundRect
-
-export function zoomNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  config: GraphConfig<N, L>,
-  scale: number
-): void {
-  selection.classed(generalSelectors.zoomOutLevel1, scale < ZoomLevel.Level1)
-  selection.classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)
-
-  selection.selectAll(`${nodeSelectors.sideLabelBackground}`)
-    .attr('transform', `scale(${1 / Math.pow(scale, 0.35)})`)
-  selection.selectAll(`.${nodeSelectors.sideLabel}`)
-    .attr('transform', `scale(${1 / Math.pow(scale, 0.45)})`)
-
-  if (scale >= ZoomLevel.Level3) selection.call(setLabelBackgroundRectThrottled, config)
-}
-
-export const zoomNodesThrottled = throttle(zoomNodes, 500)

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

@@ -1,160 +0,0 @@
-import { Selection } from 'd3-selection'
-
-// Types
-import { NumericAccessor, BooleanAccessor } from 'types/accessor'
-import { Position } from 'types/position'
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-import { Spacing } from 'types/spacing'
-
-// Utils
-import { getBoolean, isPlainObject } from 'utils/data'
-
-// Local Types
-import { GraphNode, GraphPanel, GraphPanelConfig } from '../../types'
-
-// Config
-import { GraphConfig } from '../../config'
-
-// Helpers
-import { getX, getY, getNodeSize } from '../node/helper'
-
-// Styles
-import * as nodeSelectors from '../node/style'
-
-export const DEFAULT_PADDING = 15
-export const DEFAULT_LABEL_MARGIN = 16
-export const OUTLINE_SELECTION_PADDING = 5
-export const DEFAULT_SIDE_LABEL_SIZE = 25
-
-export function getPanelPadding (padding: number | Spacing | undefined): Spacing {
-  const isPaddingAnObject = isPlainObject(padding)
-  return {
-    left: (isPaddingAnObject ? (padding as Spacing).left : (padding as number)) ?? DEFAULT_PADDING,
-    right: (isPaddingAnObject ? (padding as Spacing).right : (padding as number)) ?? DEFAULT_PADDING,
-    top: (isPaddingAnObject ? (padding as Spacing).top : (padding as number)) ?? DEFAULT_PADDING,
-    bottom: (isPaddingAnObject ? (padding as Spacing).bottom : (padding as number)) ?? DEFAULT_PADDING,
-  }
-}
-
-export function initPanels (panelsConfig: GraphPanelConfig[] | undefined): GraphPanel[] {
-  const panels = (panelsConfig ?? []).map(p => ({
-    ...p,
-    _padding: getPanelPadding(p.padding),
-  })) as GraphPanel[]
-
-  return panels
-}
-
-export function setPanelForNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  panels: GraphPanel[],
-  nodes: GraphNode<N, L>[],
-  config: GraphConfig<N, L>
-): void {
-  if (!panels) return
-
-  // For each node store its related panels
-  nodes.forEach(node => {
-    // Find all panels to which node belong
-    const nodePanels = panels.filter(panel => panel.nodes && panel.nodes.includes(node._id))
-    node._panels = nodePanels
-  })
-}
-
-export function setPanelBBox<N extends GraphInputNode, L extends GraphInputLink> (
-  panelConfig: GraphPanel,
-  panelNodes: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  nodeSizeAccessor: NumericAccessor<N>,
-  nodeDisabledAccessor: BooleanAccessor<N>
-): void {
-  const selection = panelNodes.select(`.${nodeSelectors.node}`)
-  if (selection.empty()) return
-
-  const labelApprxHeight = 40
-  const labelApprxWidth = 110
-  const labelMargin = 10
-  let box: { x1: number; x2: number; y1: number; y2: number }
-
-  selection.each((d, i) => {
-    const nodeSize = getNodeSize(d, nodeSizeAccessor, i)
-    const w = Math.max(nodeSize, labelApprxWidth)
-    const h = nodeSize + labelMargin + labelApprxHeight
-    // const nodeBBox = node.getBBox()
-    const yShift = 10 // This is hard to calculate, so we just use an approximation
-
-    const coords = {
-      x1: getX(d) - w / 2, // We use d.x and d.y instead of bBox values here because `gBBox` contains initial ...
-      y1: getY(d) - h / 2 + yShift, // ... coordinates (before transition starts), not target coordinates
-      x2: getX(d) + w / 2,
-      y2: getY(d) + h / 2 + yShift,
-    }
-
-    if (!box) {
-      box = {
-        ...coords,
-      }
-    } else {
-      if (box.x1 > coords.x1) box.x1 = coords.x1
-      if (box.y1 > coords.y1) box.y1 = coords.y1
-      if (box.x2 < coords.x2) box.x2 = coords.x2
-      if (box.y2 < coords.y2) box.y2 = coords.y2
-    }
-  })
-
-  panelConfig._x = box.x1 - panelConfig._padding.left
-  panelConfig._y = box.y1 - panelConfig._padding.top
-  panelConfig._width = box.x2 - box.x1 + panelConfig._padding.left + panelConfig._padding.right
-  panelConfig._height = box.y2 - box.y1 + panelConfig._padding.top + panelConfig._padding.bottom
-  panelConfig._disabled = selection.data()
-    .map((node, i) => getBoolean(node, nodeDisabledAccessor, node._index) || node._state.greyout)
-    .every(d => d)
-}
-
-export function setPanelNumNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  panelConfig: GraphPanel,
-  panelNodes: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>
-): void {
-  panelConfig._numNodes = panelNodes.size()
-}
-
-export function updatePanelBBoxSize<N extends GraphInputNode, L extends GraphInputLink> (
-  nodesSelection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  panels: GraphPanel[],
-  config: GraphConfig<N, L>
-): void {
-  const { layoutNonConnectedAside } = config
-  if (!panels) return
-
-  panels.forEach(panelConfig => {
-    const panelNodes = nodesSelection.filter(node => {
-      return (!layoutNonConnectedAside || node._isConnected) && panelConfig.nodes.includes(node._id)
-    })
-    setPanelBBox(panelConfig, panelNodes, config.nodeSize, config.nodeDisabled)
-  })
-}
-
-export function updatePanelNumNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  nodesSelection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,
-  panels: GraphPanel[],
-  config: GraphConfig<N, L>
-): void {
-  const { layoutNonConnectedAside } = config
-  if (!panels) return
-
-  panels.forEach(panelConfig => {
-    const panelNodes = nodesSelection.filter(node => {
-      return (!layoutNonConnectedAside || node._isConnected) && panelConfig.nodes.includes(node._id)
-    })
-    setPanelNumNodes(panelConfig, panelNodes)
-  })
-}
-
-export function getLabelTranslateTransform<N extends GraphInputNode, L extends GraphInputLink> (panel: GraphPanel): string {
-  const x = panel._width / 2
-  const dy = DEFAULT_LABEL_MARGIN + (panel.dashedOutline ? OUTLINE_SELECTION_PADDING : 0)
-  const y = panel.labelPosition === Position.Bottom
-    ? panel._height + dy
-    : -dy
-
-  return `translate(${x}, ${y})`
-}
-

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

@@ -1,137 +0,0 @@
-import { select, Selection } from 'd3-selection'
-
-// Utils
-import { trimString } from 'utils/text'
-import { smartTransition } from 'utils/d3'
-
-// Types
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-
-// Local Types
-import { GraphNode, GraphLink, GraphPanel } from '../../types'
-
-// Config
-import { GraphConfig } from '../../config'
-
-// Helpers
-import { setLabelRect } from '../node/helper'
-import { getLabelTranslateTransform, OUTLINE_SELECTION_PADDING, DEFAULT_SIDE_LABEL_SIZE } from './helper'
-
-// Styles
-import * as panelSelectors from './style'
-import { appendShape, updateShape } from '../shape'
-
-export function createPanels<N extends GraphNode, L extends GraphLink> (
-  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>
-): void {
-  selection
-    .attr('transform', d => `translate(${d._x}, ${d._y})`)
-    .style('opacity', 0)
-
-  selection.append('rect').attr('class', panelSelectors.panelSelection)
-    .attr('rx', 9)
-    .attr('ry', 9)
-    .attr('width', d => d._width)
-    .attr('height', d => d._height)
-
-  selection.append('rect').attr('class', panelSelectors.panel)
-    .attr('rx', 7)
-    .attr('ry', 7)
-    .attr('width', d => d._width)
-    .attr('height', d => d._height)
-
-  const panelLabel = selection.append('g').attr('class', panelSelectors.label)
-    .attr('transform', getLabelTranslateTransform)
-  panelLabel.append('rect').attr('class', panelSelectors.background)
-  panelLabel.append('text').attr('class', panelSelectors.labelText)
-    .attr('dy', '0.32em')
-
-  const sideIcon = selection.append('g')
-    .attr('class', panelSelectors.sideIconGroup)
-    .attr('transform', (d, i, elements) => {
-      const dx = -OUTLINE_SELECTION_PADDING
-      const dy = -OUTLINE_SELECTION_PADDING
-      return `translate(${d._width + dx}, ${-dy})`
-    })
-  appendShape(sideIcon, (d: GraphPanel) => d.sideIconShape, panelSelectors.sideIconShape, panelSelectors.customSideIcon)
-  sideIcon.append('text').attr('class', panelSelectors.sideIconSymbol)
-}
-
-export function updatePanels<N extends GraphNode, L extends GraphLink> (
-  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,
-  config: GraphConfig<GraphInputNode, GraphInputLink>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .attr('transform', d => `translate(${d._x}, ${d._y})`)
-    .style('opacity', d => d._disabled ? 0.4 : 1)
-
-  const panels = selection.selectAll<SVGRectElement, GraphPanel>(`.${panelSelectors.panel}`).data(d => [d])
-  smartTransition(panels, duration)
-    .attr('width', d => d._width)
-    .attr('height', d => d._height)
-    .style('stroke', d => d.borderColor)
-    .style('stroke-width', d => d.borderWidth)
-
-  const panelSelection = selection.select<SVGRectElement>(`.${panelSelectors.panelSelection}`)
-    .classed(panelSelectors.panelSelectionActive, d => d.dashedOutline)
-
-  smartTransition(panelSelection, duration)
-    .attr('x', d => -OUTLINE_SELECTION_PADDING)
-    .attr('y', d => -OUTLINE_SELECTION_PADDING)
-    .attr('width', d => d._width + OUTLINE_SELECTION_PADDING * 2)
-    .attr('height', d => d._height + OUTLINE_SELECTION_PADDING * 2)
-
-  const sideIcon = selection.select<SVGGElement>(`.${panelSelectors.sideIconGroup}`)
-
-  sideIcon.select<SVGGElement>(`.${panelSelectors.sideIconShape}`)
-    .call(updateShape, (d: GraphPanel) => d.sideIconShape, (d: GraphPanel) => d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE)
-    .style('stroke', d => d.sideIconShapeStroke)
-    .style('cursor', d => d.sideIconCursor ?? null)
-    .style('opacity', d => d.sideIconShape ? 1 : 0)
-
-  sideIcon.select(`.${panelSelectors.sideIconSymbol}`)
-    .html(d => d.sideIconSymbol)
-    .attr('dy', 1)
-    .style('fill', d => d.sideIconSymbolColor)
-    .style('font-size', d => d.sideIconFontSize ?? ((d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE) / 2.5))
-
-  smartTransition(sideIcon, duration)
-    .attr('transform', d => {
-      const dx = -OUTLINE_SELECTION_PADDING
-      const dy = -OUTLINE_SELECTION_PADDING
-      return `translate(${d._width + dx}, ${-dy})`
-    })
-
-  const panelLabel = selection.select<SVGGElement>(`.${panelSelectors.label}`)
-
-  panelLabel.select<SVGTextElement>(`.${panelSelectors.labelText}`)
-    .text(d => trimString(d.label))
-
-  smartTransition(panelLabel, duration)
-    .attr('transform', getLabelTranslateTransform)
-
-  panelLabel
-    .on('mouseover', (event: MouseEvent, d) => {
-      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)
-      const labelContent = d.label
-      label.select('text').text(labelContent)
-      setLabelRect(label, labelContent, panelSelectors.labelText)
-    })
-    .on('mouseleave', (event: MouseEvent, d) => {
-      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)
-      const labelContent = trimString(d.label)
-      label.select('text').text(labelContent)
-      setLabelRect(label, labelContent, panelSelectors.labelText)
-    })
-}
-
-export function removePanels<N extends GraphNode, L extends GraphLink> (
-  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,
-  config: GraphConfig<GraphInputNode, GraphInputLink>,
-  duration: number
-): void {
-  smartTransition(selection, duration / 2)
-    .style('opacity', 0)
-    .remove()
-}