@pgcorp/ui-kit 0.1.0

package/src/components/shared/graph/SGraphViewport.vue

@@ -0,0 +1,858 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-graph-viewport"
+    :data-render-state="renderState"
+    :data-positioning="resolvedPositioningMode"
+  >
+    <div ref="rendererRef" class="s-graph-viewport__renderer" aria-hidden="true" />
+    <div v-if="renderError" class="s-graph-viewport__error">
+      <SAsyncState
+        :state="{ status: 'error', message: renderError.message }"
+        presentation="block"
+      />
+    </div>
+    <div
+      class="s-graph-viewport__node-inventory"
+      :class="{ 's-graph-viewport__node-inventory--fallback': renderError !== null }"
+    >
+      <SListbox
+        :label="resolvedNodeListLabel"
+        :model-value="selectedNodeId"
+        :options="nodeListOptions"
+        :empty-label="resolvedNodeListEmptyLabel"
+        @update:model-value="handleInventorySelection"
+        @option-keydown="handleInventoryOptionKeydown"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Graph from 'graphology'
+import Sigma from 'sigma'
+import type { Settings } from 'sigma/settings'
+import type {
+  SGraphEdge,
+  SGraphNode,
+  SGraphNodeSizeMode,
+  SGraphNodePointerEvent,
+  SGraphPosition,
+  SGraphPositionChange,
+  SGraphRenderError,
+  SGraphRenderErrorReason,
+  SGraphRenderMetric,
+  SGraphSelection,
+  SGraphTone,
+  SGraphViewportGraph,
+  SGraphViewportInteraction,
+} from './_internal/graphViewportContract'
+import {
+  assertSGraphViewportGraph,
+  assertSGraphViewportInteraction,
+  SGraphContractError,
+} from './_internal/graphViewportContract'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { useRuntimeTheme } from '../../../internal/runtimeTheme'
+import SListbox, { type SListboxOptionKeydownPayload } from '../controls/SListbox.vue'
+import SAsyncState from '../feedback/SAsyncState.vue'
+
+defineOptions({ inheritAttrs: false })
+
+type SGraphAttributes = Record<string, unknown>
+
+type GraphNodeAttributes = SGraphAttributes & SGraphNode & {
+  color: string
+  borderColor: string
+  labelColor: string
+  highlighted: boolean
+  hidden: boolean
+}
+
+type GraphEdgeAttributes = SGraphAttributes & SGraphEdge & {
+  color: string
+  hidden: boolean
+  size: number
+  opacity: number
+}
+
+const props = withDefaults(defineProps<{
+  graph: SGraphViewportGraph
+  interaction: SGraphViewportInteraction
+  nodeListLabel: string
+  nodeListEmptyLabel: string
+  showEdgeLabels?: boolean
+  labelZoomThreshold?: number
+  nodeSizeMode?: SGraphNodeSizeMode
+}>(), {
+  showEdgeLabels: false,
+  labelZoomThreshold: 0.76,
+  nodeSizeMode: 'screen',
+})
+
+const emit = defineEmits<{
+  'hover-node': [event: SGraphNodePointerEvent]
+  'leave-node': []
+  'selection-change': [selection: SGraphSelection]
+  'activate-node': [nodeId: string]
+  'positions-change': [changes: SGraphPositionChange[]]
+  'render-metric': [metric: SGraphRenderMetric]
+  'render-error': [error: SGraphRenderError]
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SGraphViewport', owner: 'graph viewport root' })
+useInteractiveLeafRegistration({ owner: 'SGraphViewport' })
+const rendererRef = ref<HTMLElement | null>(null)
+const runtimeTheme = useRuntimeTheme()
+const renderState = ref<'idle' | 'painted' | 'failed'>('idle')
+const renderError = ref<SGraphRenderError | null>(null)
+let sigma: Sigma<GraphNodeAttributes, GraphEdgeAttributes> | null = null
+let renderedGraph: Graph<GraphNodeAttributes, GraphEdgeAttributes> | null = null
+let resizeObserver: ResizeObserver | null = null
+let draggedNodeId: string | null = null
+let draggedNodeStartPosition: SGraphPosition | null = null
+let draggedGroupStartPositions = new Map<string, SGraphPosition>()
+let didDrag = false
+
+const SIGMA_INITIAL_CAMERA_RATIO = 1
+
+function assertViewportConfiguration(): void {
+  assertSGraphViewportGraph(props.graph)
+  assertSGraphViewportInteraction(props.interaction, props.graph)
+  if (typeof props.nodeListLabel !== 'string' || props.nodeListLabel.trim().length === 0) {
+    throw new SGraphContractError('SGraphViewport: nodeListLabel должен быть непустой строкой.')
+  }
+  if (typeof props.nodeListEmptyLabel !== 'string' || props.nodeListEmptyLabel.trim().length === 0) {
+    throw new SGraphContractError('SGraphViewport: nodeListEmptyLabel должен быть непустой строкой.')
+  }
+  if (!Number.isFinite(props.labelZoomThreshold) || props.labelZoomThreshold <= 0) {
+    throw new SGraphContractError('SGraphViewport: labelZoomThreshold должен быть конечным числом больше 0.')
+  }
+  if (!['screen', 'graph'].includes(props.nodeSizeMode)) {
+    throw new SGraphContractError(`SGraphViewport: неизвестный nodeSizeMode "${String(props.nodeSizeMode)}".`)
+  }
+  if (typeof props.showEdgeLabels !== 'boolean') {
+    throw new SGraphContractError('SGraphViewport: showEdgeLabels должен быть boolean.')
+  }
+}
+
+const interactionContract = computed(() => {
+  assertViewportConfiguration()
+  return props.interaction
+})
+const resolvedNodeListLabel = computed(() => {
+  assertViewportConfiguration()
+  return props.nodeListLabel
+})
+const resolvedNodeListEmptyLabel = computed(() => {
+  assertViewportConfiguration()
+  return props.nodeListEmptyLabel
+})
+const resolvedPositioningMode = computed(() => interactionContract.value.positioning.mode)
+const selectedNodeId = computed(() => (
+  interactionContract.value.selection.mode === 'single'
+    ? interactionContract.value.selection.nodeId
+    : null
+))
+const selectedNodeSet = computed(() => new Set(selectedNodeId.value === null ? [] : [selectedNodeId.value]))
+const nodeListOptions = computed(() => {
+  assertViewportConfiguration()
+  return props.graph.nodes.map((node) => ({ value: node.id, label: node.label }))
+})
+
+function requiredRuntimeToken(name: string): string {
+  const element = rendererRef.value
+  if (!element) {
+    throw new Error(`SGraphViewport: невозможно прочитать semantic token ${name} до монтирования viewport.`)
+  }
+  const value = getComputedStyle(element).getPropertyValue(name).trim()
+  if (!value) {
+    throw new Error(`SGraphViewport: обязательный semantic token ${name} отсутствует в computed style.`)
+  }
+  return value
+}
+
+function requiredRuntimeNumber(name: string): number {
+  const raw = requiredRuntimeToken(name)
+  const value = Number(raw)
+  if (!Number.isFinite(value)) {
+    throw new Error(`SGraphViewport: semantic token ${name} должен быть конечным unitless number, получено '${raw}'.`)
+  }
+  return value
+}
+
+function requiredRuntimePixels(name: string): number {
+  const raw = requiredRuntimeToken(name)
+  const match = raw.match(/^(-?(?:\d+(?:\.\d+)?|\.\d+))px$/u)
+  if (!match) {
+    throw new Error(`SGraphViewport: semantic token ${name} должен быть вычислен в px, получено '${raw}'.`)
+  }
+  return Number(match[1])
+}
+
+function requiredRuntimeDuration(name: string): number {
+  const raw = requiredRuntimeToken(name)
+  const match = raw.match(/^((?:\d+(?:\.\d+)?|\.\d+))(ms|s)$/u)
+  if (!match) {
+    throw new Error(`SGraphViewport: semantic token ${name} должен быть вычислен в ms или s, получено '${raw}'.`)
+  }
+  const value = Number(match[1])
+  return match[2] === 's' ? value * 1000 : value
+}
+
+function requiredRuntimeHexColor(name: string): string {
+  const value = requiredRuntimeToken(name)
+  if (!/^#[\da-f]{6}$/iu.test(value)) {
+    throw new Error(`SGraphViewport: semantic token ${name} должен быть вычислен в #RRGGBB, получено '${value}'.`)
+  }
+  return value
+}
+
+function resolveNodeTone(tone: SGraphTone): Pick<GraphNodeAttributes, 'color' | 'borderColor' | 'labelColor'> {
+  return {
+    color: requiredRuntimeHexColor(`--s-graph-node-tone-${tone}-fill`),
+    borderColor: requiredRuntimeHexColor(`--s-graph-node-tone-${tone}-border`),
+    labelColor: requiredRuntimeHexColor(`--s-graph-node-tone-${tone}-label`),
+  }
+}
+
+function resolveEdgeTone(tone: SGraphTone): string {
+  return requiredRuntimeHexColor(`--s-graph-edge-tone-${tone}`)
+}
+
+function colorWithOpacity(color: string, opacity: number | undefined): string {
+  if (opacity === undefined || opacity === 1) return color
+  const red = Number.parseInt(color.slice(1, 3), 16)
+  const green = Number.parseInt(color.slice(3, 5), 16)
+  const blue = Number.parseInt(color.slice(5, 7), 16)
+  return `rgba(${red}, ${green}, ${blue}, ${opacity})`
+}
+
+function buildGraph(source: SGraphViewportGraph): Graph<GraphNodeAttributes, GraphEdgeAttributes> {
+  assertSGraphViewportGraph(source)
+  const result = new Graph<GraphNodeAttributes, GraphEdgeAttributes>({ multi: true, type: 'mixed' })
+  for (const node of source.nodes) {
+    result.addNode(node.id, {
+      ...node,
+      ...resolveNodeTone(node.tone),
+      highlighted: false,
+      hidden: false,
+    })
+  }
+  for (const edge of source.edges) {
+    result.addEdgeWithKey(edge.id, edge.source, edge.target, {
+      ...edge,
+      color: resolveEdgeTone(edge.tone),
+      hidden: edge.hidden ?? false,
+      size: edge.size ?? 1,
+      opacity: edge.opacity ?? 1,
+    })
+  }
+  return result
+}
+
+function refreshGraphToneAttributes(): void {
+  if (!renderedGraph) return
+  for (const node of props.graph.nodes) {
+    if (!renderedGraph.hasNode(node.id)) {
+      throw new Error(`SGraphViewport: node "${node.id}" отсутствует при обновлении runtime theme.`)
+    }
+    const tone = resolveNodeTone(node.tone)
+    renderedGraph.setNodeAttribute(node.id, 'color', tone.color)
+    renderedGraph.setNodeAttribute(node.id, 'borderColor', tone.borderColor)
+    renderedGraph.setNodeAttribute(node.id, 'labelColor', tone.labelColor)
+  }
+  for (const edge of props.graph.edges) {
+    if (!renderedGraph.hasEdge(edge.id)) {
+      throw new Error(`SGraphViewport: edge "${edge.id}" отсутствует при обновлении runtime theme.`)
+    }
+    renderedGraph.setEdgeAttribute(edge.id, 'color', resolveEdgeTone(edge.tone))
+  }
+}
+
+function graphSettings(): Partial<Settings<GraphNodeAttributes, GraphEdgeAttributes>> {
+  return {
+    renderLabels: true,
+    renderEdgeLabels: props.showEdgeLabels,
+    hideEdgesOnMove: true,
+    hideLabelsOnMove: true,
+    enableEdgeEvents: false,
+    defaultNodeColor: requiredRuntimeHexColor('--s-graph-node-default-color'),
+    defaultEdgeColor: requiredRuntimeHexColor('--s-graph-edge-default-color'),
+    labelColor: { attribute: 'labelColor', color: requiredRuntimeHexColor('--s-graph-label-color') },
+    labelFont: requiredRuntimeToken('--s-graph-label-font-family'),
+    labelSize: requiredRuntimePixels('--s-graph-label-font-size'),
+    labelWeight: requiredRuntimeToken('--s-graph-label-font-weight'),
+    labelDensity: requiredRuntimeNumber('--s-graph-label-density'),
+    labelGridCellSize: requiredRuntimePixels('--s-graph-label-grid-cell-size'),
+    labelRenderedSizeThreshold: requiredRuntimePixels('--s-graph-label-rendered-size-threshold'),
+    minEdgeThickness: requiredRuntimePixels('--s-graph-min-edge-thickness'),
+    stagePadding: requiredRuntimePixels('--s-graph-stage-padding'),
+    zIndex: true,
+    ...(props.nodeSizeMode === 'screen'
+      ? {
+          zoomToSizeRatioFunction: (ratio: number) =>
+            Math.max(0.08, Math.min(0.72, Math.sqrt(Math.max(0.0001, ratio)) * 0.78)),
+        }
+      : {}),
+    nodeReducer: (nodeId, data) => {
+      const isSelected = selectedNodeSet.value.has(nodeId)
+      const forceLabel = Boolean(data.forceLabel) || isSelected || data.highlighted
+      // Sigma синхронно вызывает reducer внутри конструктора до присваивания
+      // готового instance. Камера Sigma стартует с ratio 1; следующие проходы
+      // reducer читают состояние уже смонтированной камеры.
+      const zoom = sigma?.getCamera().getState().ratio ?? SIGMA_INITIAL_CAMERA_RATIO
+      const label = forceLabel || zoom < props.labelZoomThreshold ? data.label : ''
+      return {
+        x: data.x,
+        y: data.y,
+        label,
+        color: isSelected ? data.borderColor : data.color,
+        size: isSelected ? Math.min(data.size * 1.16, data.size + 1.4) : data.size,
+        forceLabel,
+        highlighted: data.highlighted || isSelected,
+        zIndex: data.role === 'group' || data.role === 'coverage' ? 4 : isSelected ? 5 : 1,
+      }
+    },
+    edgeReducer: (_edgeId, data) => {
+      if (!renderedGraph) throw new Error('SGraphViewport: edge reducer вызван без rendered graph.')
+      if (!renderedGraph.hasNode(data.source) || !renderedGraph.hasNode(data.target)) {
+        throw new Error(
+          `SGraphViewport: edge "${data.id}" ссылается на отсутствующий rendered node при reducer.`,
+        )
+      }
+      const selected = selectedNodeId.value
+      const relatedToSelection = selected ? data.source === selected || data.target === selected : false
+      const sourceHighlighted = Boolean(renderedGraph.getNodeAttribute(data.source, 'highlighted'))
+      const targetHighlighted = Boolean(renderedGraph.getNodeAttribute(data.target, 'highlighted'))
+      const relatedToInteraction = relatedToSelection || sourceHighlighted || targetHighlighted
+      return {
+        color: colorWithOpacity(data.color, relatedToInteraction ? Math.max(data.opacity, 0.55) : data.opacity),
+        size: relatedToInteraction ? Math.max(data.size, 1.4) : data.size,
+        hidden: data.hidden
+          || Boolean(selected && !relatedToSelection)
+          || Boolean(data.showOnInteractionOnly && !relatedToInteraction),
+        forceLabel: false,
+      }
+    },
+  }
+}
+
+function emitRenderMetric(phase: SGraphRenderMetric['phase'], startedAt: number): void {
+  emit('render-metric', {
+    phase,
+    durationMs: performance.now() - startedAt,
+    nodes: props.graph.nodes.length,
+    edges: props.graph.edges.length,
+    renderer: 'sigma',
+  })
+}
+
+function failRender(reason: SGraphRenderErrorReason, message: string): void {
+  sigma?.kill()
+  sigma = null
+  renderedGraph = null
+  renderState.value = 'failed'
+  renderError.value = {
+    reason,
+    message,
+    nodes: props.graph.nodes.length,
+    edges: props.graph.edges.length,
+  }
+  emit('render-error', renderError.value)
+}
+
+function clearRenderError(): void {
+  renderError.value = null
+  if (renderState.value === 'failed') renderState.value = 'idle'
+}
+
+function hasRenderableContainer(): boolean {
+  const container = rendererRef.value
+  if (!container) return false
+  return container.clientWidth > 0 && container.clientHeight > 0
+}
+
+function hasWebgl2Support(): boolean {
+  const canvas = document.createElement('canvas')
+  return canvas.getContext('webgl2') !== null
+}
+
+function tryMountSigma(): void {
+  if (sigma || !hasRenderableContainer()) return
+  mountSigma()
+}
+
+function refreshRuntimeTheme(): void {
+  if (!sigma) return
+  try {
+    refreshGraphToneAttributes()
+    sigma.setSettings(graphSettings())
+    sigma.refresh()
+  } catch (error) {
+    failRender(
+      'sigma_mount_failed',
+      error instanceof Error ? error.message : 'SGraphViewport: не удалось применить semantic runtime theme.',
+    )
+  }
+}
+
+function mountSigma(): void {
+  const container = rendererRef.value
+  if (!container || !hasRenderableContainer()) return
+  let nextGraph: Graph<GraphNodeAttributes, GraphEdgeAttributes>
+  try {
+    assertViewportConfiguration()
+    nextGraph = buildGraph(props.graph)
+  } catch (error) {
+    failRender(
+      error instanceof SGraphContractError ? 'invalid_graph' : 'sigma_mount_failed',
+      error instanceof Error ? error.message : 'Граф содержит некорректные данные.',
+    )
+    return
+  }
+  if (!hasWebgl2Support()) {
+    failRender('webgl_unavailable', 'Графический движок требует WebGL2.')
+    return
+  }
+  const startedAt = performance.now()
+  try {
+    renderedGraph = nextGraph
+    sigma = new Sigma<GraphNodeAttributes, GraphEdgeAttributes>(renderedGraph, container, graphSettings())
+    clearRenderError()
+    renderState.value = 'painted'
+    bindSigmaEvents()
+    emitRenderMetric('sigma_mount', startedAt)
+  } catch (error) {
+    failRender(
+      error instanceof SGraphContractError ? 'invalid_graph' : 'sigma_mount_failed',
+      error instanceof Error ? error.message : 'Графический движок не смог построить карту.',
+    )
+  }
+}
+
+function assertRenderedNode(nodeId: string, operation: string): void {
+  if (!renderedGraph?.hasNode(nodeId)) {
+    throw new Error(`SGraphViewport: node "${nodeId}" отсутствует при ${operation}.`)
+  }
+}
+
+function requestSelection(selection: SGraphSelection): void {
+  if (selection.mode === 'single' && !props.graph.nodes.some((node) => node.id === selection.nodeId)) {
+    throw new SGraphContractError(
+      `SGraphViewport: selection-change ссылается на отсутствующий node "${selection.nodeId}".`,
+    )
+  }
+  emit('selection-change', selection)
+}
+
+function requestActivation(nodeId: string): void {
+  if (!props.graph.nodes.some((node) => node.id === nodeId)) {
+    throw new SGraphContractError(`SGraphViewport: activate-node ссылается на отсутствующий node "${nodeId}".`)
+  }
+  emit('activate-node', nodeId)
+}
+
+function bindSigmaEvents(): void {
+  if (!sigma || !renderedGraph) {
+    throw new Error('SGraphViewport: Sigma event binding требует mounted renderer и graph.')
+  }
+  sigma.on('enterNode', ({ node, event }) => {
+    assertRenderedNode(node, 'hover')
+    renderedGraph?.setNodeAttribute(node, 'highlighted', true)
+    sigma?.refresh()
+    emit('hover-node', { nodeId: node, pointer: { x: event.x, y: event.y } })
+  })
+  sigma.on('leaveNode', ({ node }) => {
+    assertRenderedNode(node, 'leave')
+    renderedGraph?.setNodeAttribute(node, 'highlighted', false)
+    sigma?.refresh()
+    emit('leave-node')
+  })
+  sigma.on('clickNode', ({ node }) => {
+    if (!didDrag) requestSelection({ mode: 'single', nodeId: node })
+  })
+  sigma.on('clickStage', () => {
+    if (!didDrag) requestSelection({ mode: 'none' })
+  })
+  sigma.on('doubleClickNode', ({ node }) => requestActivation(node))
+  sigma.on('downNode', ({ node }) => startNodeDrag(node))
+  sigma.getMouseCaptor().on('mousemovebody', updateNodeDrag)
+  sigma.getMouseCaptor().on('mouseup', finishNodeDrag)
+  sigma.getMouseCaptor().on('mousedown', () => {
+    if (!sigma?.getCustomBBox()) sigma?.setCustomBBox(sigma.getBBox())
+  })
+}
+
+function replaceGraph(): void {
+  const startedAt = performance.now()
+  let nextGraph: Graph<GraphNodeAttributes, GraphEdgeAttributes>
+  try {
+    assertViewportConfiguration()
+    nextGraph = buildGraph(props.graph)
+  } catch (error) {
+    failRender('invalid_graph', error instanceof Error ? error.message : 'Граф содержит некорректные данные.')
+    return
+  }
+  try {
+    renderedGraph = nextGraph
+    if (sigma) {
+      sigma.setGraph(nextGraph)
+      sigma.setSettings(graphSettings())
+      sigma.refresh()
+      clearRenderError()
+      renderState.value = 'painted'
+      emitRenderMetric('graph_replace', startedAt)
+      return
+    }
+    tryMountSigma()
+  } catch (error) {
+    failRender(
+      error instanceof SGraphContractError ? 'invalid_graph' : 'sigma_mount_failed',
+      error instanceof Error ? error.message : 'SGraphViewport: не удалось заменить граф.',
+    )
+  }
+}
+
+function refreshValidatedInteraction(): void {
+  try {
+    assertViewportConfiguration()
+  } catch (error) {
+    failRender('invalid_graph', error instanceof Error ? error.message : 'SGraphViewport: interaction некорректен.')
+    return
+  }
+  if (resolvedPositioningMode.value === 'readonly') cancelNodeDrag()
+  if (!sigma) {
+    tryMountSigma()
+    return
+  }
+  sigma.refresh()
+}
+
+function refreshValidatedSettings(): void {
+  try {
+    assertViewportConfiguration()
+  } catch (error) {
+    failRender('invalid_graph', error instanceof Error ? error.message : 'SGraphViewport: renderer settings некорректны.')
+    return
+  }
+  if (!sigma) {
+    tryMountSigma()
+    return
+  }
+  try {
+    sigma.setSettings(graphSettings())
+    sigma.refresh()
+  } catch (error) {
+    failRender(
+      'sigma_mount_failed',
+      error instanceof Error ? error.message : 'SGraphViewport: не удалось обновить renderer settings.',
+    )
+  }
+}
+
+function isEditablePositioning(): boolean {
+  return interactionContract.value.positioning.mode === 'editable'
+}
+
+function startNodeDrag(nodeId: string): void {
+  if (!isEditablePositioning()) return
+  if (!sigma || !renderedGraph) {
+    throw new Error('SGraphViewport: pointer positioning требует mounted renderer и graph.')
+  }
+  assertRenderedNode(nodeId, 'начале drag')
+  draggedNodeId = nodeId
+  draggedNodeStartPosition = {
+    x: Number(renderedGraph.getNodeAttribute(nodeId, 'x')),
+    y: Number(renderedGraph.getNodeAttribute(nodeId, 'y')),
+  }
+  const dragGroupIds = renderedGraph.getNodeAttribute(nodeId, 'dragGroupIds') ?? []
+  draggedGroupStartPositions = new Map()
+  for (const groupNodeId of [nodeId, ...dragGroupIds]) {
+    assertRenderedNode(groupNodeId, 'начале group drag')
+    draggedGroupStartPositions.set(groupNodeId, {
+      x: Number(renderedGraph.getNodeAttribute(groupNodeId, 'x')),
+      y: Number(renderedGraph.getNodeAttribute(groupNodeId, 'y')),
+    })
+  }
+  renderedGraph.setNodeAttribute(nodeId, 'highlighted', true)
+  didDrag = false
+}
+
+function updateNodeDrag(event: { x: number; y: number; preventSigmaDefault: () => void; original: Event }): void {
+  if (!draggedNodeId) return
+  if (!isEditablePositioning()) {
+    cancelNodeDrag()
+    return
+  }
+  if (!sigma || !renderedGraph || !draggedNodeStartPosition) {
+    throw new Error('SGraphViewport: active drag потерял renderer, graph или start position.')
+  }
+  const position = sigma.viewportToGraph(event)
+  const delta = {
+    x: position.x - draggedNodeStartPosition.x,
+    y: position.y - draggedNodeStartPosition.y,
+  }
+  if (Math.abs(delta.x) + Math.abs(delta.y) > 0.5) didDrag = true
+  for (const [nodeId, startPosition] of draggedGroupStartPositions.entries()) {
+    assertRenderedNode(nodeId, 'обновлении drag')
+    renderedGraph.setNodeAttribute(nodeId, 'x', startPosition.x + delta.x)
+    renderedGraph.setNodeAttribute(nodeId, 'y', startPosition.y + delta.y)
+  }
+  event.preventSigmaDefault()
+  event.original.preventDefault()
+}
+
+function finishNodeDrag(): void {
+  if (!draggedNodeId) {
+    didDrag = false
+    return
+  }
+  if (!isEditablePositioning()) {
+    cancelNodeDrag()
+    return
+  }
+  if (!renderedGraph) throw new Error('SGraphViewport: active drag потерял rendered graph при завершении.')
+  assertRenderedNode(draggedNodeId, 'завершении drag')
+  renderedGraph.setNodeAttribute(draggedNodeId, 'highlighted', false)
+  const changes: SGraphPositionChange[] = []
+  for (const nodeId of draggedGroupStartPositions.keys()) {
+    assertRenderedNode(nodeId, 'завершении group drag')
+    changes.push({
+      nodeId,
+      position: {
+        x: Number(renderedGraph.getNodeAttribute(nodeId, 'x')),
+        y: Number(renderedGraph.getNodeAttribute(nodeId, 'y')),
+      },
+    })
+  }
+  if (didDrag) emit('positions-change', changes)
+  draggedNodeId = null
+  draggedNodeStartPosition = null
+  draggedGroupStartPositions = new Map()
+  window.setTimeout(() => { didDrag = false }, 0)
+}
+
+function cancelNodeDrag(): void {
+  if (renderedGraph && draggedNodeId && renderedGraph.hasNode(draggedNodeId)) {
+    renderedGraph.setNodeAttribute(draggedNodeId, 'highlighted', false)
+  }
+  draggedNodeId = null
+  draggedNodeStartPosition = null
+  draggedGroupStartPositions = new Map()
+  didDrag = false
+}
+
+function handleInventorySelection(value: unknown): void {
+  if (typeof value !== 'string' || value.trim().length === 0) {
+    throw new SGraphContractError('SGraphViewport: SListbox вернул недопустимый node id.')
+  }
+  requestSelection({ mode: 'single', nodeId: value })
+}
+
+function sourcePosition(nodeId: string): SGraphPosition {
+  if (renderedGraph?.hasNode(nodeId)) {
+    return {
+      x: Number(renderedGraph.getNodeAttribute(nodeId, 'x')),
+      y: Number(renderedGraph.getNodeAttribute(nodeId, 'y')),
+    }
+  }
+  const node = props.graph.nodes.find((candidate) => candidate.id === nodeId)
+  if (!node) throw new Error(`SGraphViewport: node "${nodeId}" отсутствует при keyboard positioning.`)
+  return { x: node.x, y: node.y }
+}
+
+function nudgeNode(nodeId: string, delta: SGraphPosition): void {
+  const sourceNode = props.graph.nodes.find((node) => node.id === nodeId)
+  if (!sourceNode) throw new Error(`SGraphViewport: node "${nodeId}" отсутствует при keyboard positioning.`)
+  const ids = [sourceNode.id, ...(sourceNode.dragGroupIds ?? [])]
+  const changes = ids.map((id): SGraphPositionChange => {
+    const position = sourcePosition(id)
+    const next = { x: position.x + delta.x, y: position.y + delta.y }
+    if (renderedGraph?.hasNode(id)) {
+      renderedGraph.setNodeAttribute(id, 'x', next.x)
+      renderedGraph.setNodeAttribute(id, 'y', next.y)
+    }
+    return { nodeId: id, position: next }
+  })
+  sigma?.refresh()
+  requestSelection({ mode: 'single', nodeId })
+  emit('positions-change', changes)
+}
+
+function handleInventoryOptionKeydown(payload: SListboxOptionKeydownPayload<string>): void {
+  const { event, value: nodeId } = payload
+  if (nodeId === null) {
+    throw new SGraphContractError('SGraphViewport: node inventory не поддерживает clear option.')
+  }
+  if (event.key === 'Enter' && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+    requestActivation(nodeId)
+    return
+  }
+  const positioning = interactionContract.value.positioning
+  if (positioning.mode !== 'editable' || !event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+  const step = positioning.keyboardStep
+  const deltas: Partial<Record<string, SGraphPosition>> = {
+    ArrowLeft: { x: -step, y: 0 },
+    ArrowRight: { x: step, y: 0 },
+    ArrowUp: { x: 0, y: -step },
+    ArrowDown: { x: 0, y: step },
+  }
+  const delta = deltas[event.key]
+  if (!delta) return
+  event.preventDefault()
+  event.stopPropagation()
+  nudgeNode(nodeId, delta)
+}
+
+onMounted(() => {
+  assertViewportConfiguration()
+  const renderer = rendererRef.value
+  if (typeof ResizeObserver !== 'undefined' && renderer) {
+    resizeObserver = new ResizeObserver(() => {
+      if (!sigma) {
+        tryMountSigma()
+        return
+      }
+      sigma.resize()
+      sigma.refresh()
+    })
+    resizeObserver.observe(renderer)
+  }
+  void nextTick(tryMountSigma)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  sigma?.kill()
+  sigma = null
+  renderedGraph = null
+  renderError.value = null
+  renderState.value = 'idle'
+  cancelNodeDrag()
+})
+
+watch(() => props.graph, replaceGraph, { deep: true })
+watch(runtimeTheme, refreshRuntimeTheme)
+watch(() => props.interaction, refreshValidatedInteraction, { deep: true })
+watch(() => props.showEdgeLabels, refreshValidatedSettings)
+watch(() => props.labelZoomThreshold, refreshValidatedSettings)
+watch(() => props.nodeSizeMode, refreshValidatedSettings)
+
+function zoomIn(): void {
+  const camera = sigma?.getCamera()
+  if (!camera) return
+  const state = camera.getState()
+  camera.animate(
+    { ratio: Math.max(state.ratio * 0.82, 0.02) },
+    { duration: requiredRuntimeDuration('--s-graph-camera-duration') },
+  )
+}
+
+function zoomOut(): void {
+  const camera = sigma?.getCamera()
+  if (!camera) return
+  const state = camera.getState()
+  camera.animate(
+    { ratio: Math.min(state.ratio * 1.18, 12) },
+    { duration: requiredRuntimeDuration('--s-graph-camera-duration') },
+  )
+}
+
+function fit(): void {
+  sigma?.setCustomBBox(null)
+  sigma?.getCamera().animatedReset({ duration: requiredRuntimeDuration('--s-graph-camera-reset-duration') })
+}
+
+defineExpose({ zoomIn, zoomOut, fit })
+</script>
+
+<style scoped>
+.s-graph-viewport {
+  position: absolute;
+  inset: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: var(--s-graph-surface-border-width) solid var(--s-graph-surface-border);
+  border-radius: var(--s-graph-surface-radius);
+  background: var(--s-graph-surface-background);
+}
+
+.s-graph-viewport::before {
+  position: absolute;
+  z-index: var(--s-graph-grid-layer);
+  inset: 0;
+  background-image: var(--s-graph-grid-background-image);
+  background-position: var(--s-graph-grid-background-position);
+  background-size: var(--s-graph-grid-background-size);
+  content: "";
+  opacity: var(--s-graph-grid-opacity);
+  pointer-events: none;
+}
+
+.s-graph-viewport__renderer {
+  position: absolute;
+  z-index: var(--s-graph-renderer-layer);
+  inset: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.s-graph-viewport__renderer :deep(canvas) {
+  border-radius: var(--s-graph-surface-radius);
+}
+
+.s-graph-viewport__error {
+  position: absolute;
+  z-index: var(--s-graph-error-layer);
+  inset: var(--s-graph-error-inset);
+  display: grid;
+  place-items: center;
+  border: var(--s-graph-error-border-width) solid var(--s-graph-error-border);
+  border-radius: var(--s-graph-error-radius);
+  background: var(--s-graph-error-background);
+  color: var(--s-graph-error-color);
+  font-family: var(--s-graph-label-font-family);
+  font-size: var(--s-graph-error-font-size);
+  font-weight: var(--s-graph-error-font-weight);
+  line-height: var(--s-graph-error-line-height);
+  text-align: center;
+  padding: var(--s-graph-error-padding);
+}
+
+.s-graph-viewport__node-inventory {
+  position: absolute;
+  z-index: var(--s-graph-inventory-layer);
+  inset-block-start: var(--s-graph-inventory-offset);
+  inset-inline-start: var(--s-graph-inventory-offset);
+  inline-size: min(var(--s-graph-inventory-inline-size), calc(100% - 2 * var(--s-graph-inventory-offset)));
+  max-block-size: calc(100% - 2 * var(--s-graph-inventory-offset));
+  overflow: auto;
+  border: var(--s-graph-inventory-border-width) solid transparent;
+  border-radius: var(--s-graph-inventory-radius);
+  opacity: 0;
+  clip-path: inset(0 0 100% 0);
+  pointer-events: none;
+  transform: translateY(calc(-1 * var(--s-graph-inventory-reveal-distance)));
+  transition:
+    opacity var(--s-motion-fast) ease,
+    transform var(--s-motion-fast) ease,
+    clip-path var(--s-motion-fast) ease;
+}
+
+.s-graph-viewport__node-inventory:focus-within,
+.s-graph-viewport__node-inventory--fallback {
+  border-color: var(--s-graph-inventory-border);
+  background: var(--s-graph-inventory-background);
+  box-shadow: var(--s-graph-inventory-shadow);
+  opacity: 1;
+  clip-path: inset(0);
+  padding: var(--s-graph-inventory-padding);
+  pointer-events: auto;
+  transform: translateY(0);
+}
+</style>