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

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

@@ -0,0 +1,160 @@
+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

@@ -0,0 +1,137 @@
+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()
+}

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

@@ -1,9 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const panels = css `
+export const panels = css`
   label: panels;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-graph-panel-border-color: #E6E9F3;
     --vis-graph-panel-border-opacity: 0.9;
@@ -40,23 +41,27 @@ const variables = injectGlobal `
     --vis-graph-panel-side-icon-shape-fill-color: var(--vis-dark-graph-panel-side-icon-shape-fill-color);
     --vis-graph-panel-border-color:  var(--vis-dark-graph-panel-border-color);
   }
-`;
-const gPanel = css `
+`
+
+export const gPanel = css`
   label: g-panel;
-`;
-const panel = css `
+`
+
+export const panel = css`
   label: panel;
 
   stroke: var(--vis-graph-panel-border-color);
   stroke-opacity: var(--vis-graph-panel-border-opacity);
   fill: var(--vis-graph-panel-fill-color);
-`;
-const label = css `
+`
+
+export const label = css`
   label: label;
 
   fill: var(--vis-graph-panel-label-color);
-`;
-const background = css `
+`
+
+export const background = css`
   label: background;
 
   opacity: 0.9;
@@ -64,8 +69,9 @@ const background = css `
   backdrop-filter: blur(2px);
   fill: var(--vis-graph-panel-label-background);
   stroke: none;
-`;
-const labelText = css `
+`
+
+export const labelText = css`
   label: label-text;
 
   text-anchor: middle;
@@ -74,11 +80,13 @@ const labelText = css `
   cursor: default;
   stroke: none;
   font-family: var(--vis-graph-panel-label-font-family, var(--vis-font-family));
-`;
-const panelSelectionActive = css `
+`
+
+export const panelSelectionActive = css`
   label: active;
-`;
-const panelSelection = css `
+`
+
+export const panelSelection = css`
   label: panel-selection-outline;
 
   opacity: 0;
@@ -93,24 +101,29 @@ const panelSelection = css `
     opacity: 1;
     stroke-opacity: 0.75;
   }
-`;
-const greyout = css `
+`
+
+export const greyout = css`
   label: greyout;
   opacity: 0.4;
-`;
-const sideIconGroup = css `
+`
+
+export const sideIconGroup = css`
   label: side-icon-group;
-`;
-const sideIconShape = css `
+`
+
+export const sideIconShape = css`
   label: side-icon-shape;
 
   fill: var(--vis-graph-panel-side-icon-shape-fill-color);
   stroke-width: 2px;
-`;
-const customSideIcon = css `
+`
+
+export const customSideIcon = css`
   label: side-icon-custom;
-`;
-const sideIconSymbol = css `
+`
+
+export const sideIconSymbol = css`
   label: side-label-icon-text;
   font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);
   fill: var(--vis-graph-panel-side-icon-symbol-color);
@@ -119,7 +132,4 @@ const sideIconSymbol = css `
   text-anchor: middle;
   pointer-events: none;
   cursor: default;
-`;
-
-export { background, customSideIcon, gPanel, greyout, label, labelText, panel, panelSelection, panelSelectionActive, panels, sideIconGroup, sideIconShape, sideIconSymbol, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/graph/modules/shape.ts

@@ -0,0 +1,108 @@
+import { Selection, select } from 'd3-selection'
+
+// Types
+import { NumericAccessor, StringAccessor } from 'types/accessor'
+
+// Utils
+import { polygon } from 'utils/path'
+import { getString } from 'utils/data'
+
+// Types
+
+// Local Types
+import { GraphNodeShape } from '../types'
+
+// Helpers
+import { getNodeSize } from './node/helper'
+
+export function isCustomXml (shape: GraphNodeShape): boolean {
+  return /<[a-z][\s\S]*>/i.test(shape)
+}
+
+export function appendShape<T> (
+  selection: Selection<SVGGElement, T, SVGGElement, unknown>,
+  shapeAccessor: StringAccessor<T>,
+  shapeSelector: string,
+  customShapeSelector: string,
+  index?: number,
+  insertSelector = ':last-child'
+): void {
+  selection.each((d, i, elements) => {
+    const element = select(elements[i])
+    const shape = getString(d, shapeAccessor, index) as GraphNodeShape
+
+    let shapeElement
+    const isCustomXmlShape = isCustomXml(shape)
+    if (isCustomXmlShape) {
+      shapeElement = element.insert('g', insertSelector)
+        .html(shape)
+    } else {
+      switch (shape) {
+        case GraphNodeShape.Square:
+          shapeElement = element.insert('rect', insertSelector)
+            .attr('rx', 5)
+            .attr('ry', 5)
+          break
+        case GraphNodeShape.Hexagon:
+        case GraphNodeShape.Triangle:
+          shapeElement = element.insert('path', insertSelector)
+          break
+        case GraphNodeShape.Circle:
+        default:
+          shapeElement = element.insert('circle', insertSelector)
+      }
+    }
+
+    return shapeElement.attr('class', shapeSelector)
+      .classed(customShapeSelector, isCustomXmlShape)
+  })
+}
+
+export function updateShape<T> (
+  selection: Selection<SVGGElement, T, SVGGElement, unknown>,
+  shape: StringAccessor<T>,
+  size: NumericAccessor<T>,
+  index: number
+): void {
+  if (selection.size() === 0) return
+
+  const d: T = selection.datum()
+  const nodeSize = getNodeSize(d, size, index)
+  selection.filter('circle')
+    .attr('r', nodeSize / 2)
+
+  selection.filter('rect')
+    .attr('width', nodeSize)
+    .attr('height', nodeSize)
+    .attr('x', -nodeSize / 2)
+    .attr('y', -nodeSize / 2)
+
+  selection.filter('path')
+    .attr('d', () => {
+      let n: number
+      switch (getString(d, shape, index)) {
+        case GraphNodeShape.Square:
+          n = 4
+          break
+        case GraphNodeShape.Triangle:
+          n = 3
+          break
+        case GraphNodeShape.Hexagon:
+        default:
+          n = 6
+      }
+
+      return polygon(nodeSize, n)
+    })
+
+  selection.filter('g')
+    .filter(() => !isCustomXml(getString(d, shape, index) as GraphNodeShape))
+    .html(getString(d, shape, index))
+
+  selection.filter('g')
+    .each((d, i, elements) => {
+      const el = select(elements[i])
+      const bBox = el.node().getBBox()
+      el.attr('transform', `translate(${-bBox.width / 2},${-bBox.height / 2})`)
+    })
+}

package/src/components/graph/modules/zoom-levels.ts

@@ -0,0 +1,6 @@
+export enum ZoomLevel {
+  Level0 = 1.0,
+  Level1 = 0.6,
+  Level2 = 0.4,
+  Level3 = 0.2,
+}

package/src/components/graph/style.ts

@@ -0,0 +1,72 @@
+import { css, injectGlobal } from '@emotion/css'
+import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'
+
+// Nodes
+import * as nodeSelectors from './modules/node/style'
+
+// Links
+import * as linkSelectors from './modules/link/style'
+
+export const variables = injectGlobal`
+  :root {
+    --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};
+  }
+`
+
+// General
+export const root = css`
+  label: graph-component;
+`
+
+export const background = css`
+  label: background;
+`
+
+export const graphGroup = css`
+  label: graph-group;
+`
+
+export const zoomOutLevel1 = css`
+  label: zoom-out-level-1;
+
+  ${`.${nodeSelectors.label}`} {
+    rect {
+      stroke: none;
+    }
+  }
+`
+
+export const zoomOutLevel2 = css`
+  label: zoom-out-level-2;
+
+  ${`.${nodeSelectors.label}`} {
+    visibility: visible;
+  }
+
+  ${`.${nodeSelectors.nodeGauge}`} {
+    visibility: visible;
+  }
+
+  ${`.${nodeSelectors.node}`} {
+    stroke-width: 4px;
+  }
+
+  rect${`.${nodeSelectors.node}`} {
+    stroke-width: 2px;
+  }
+
+  ${`.${linkSelectors.gLink}`} {
+    animation: none;
+    stroke-dasharray: none;
+  }
+
+  ${`.${linkSelectors.flowCircle}`} {
+    display: none;
+  }
+
+  ${`.${nodeSelectors.nodeSelection}`} {
+    &${`.${nodeSelectors.nodeSelectionActive}`} {
+      transform: scale(1.15);
+    }
+  }
+`