@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,860 +0,0 @@
-<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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-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' })
-const { t } = useUiKitLocale()
-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 : t('graph.themeFailed'),
-    )
-  }
-}
-
-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 : t('graph.invalidData'),
-    )
-    return
-  }
-  if (!hasWebgl2Support()) {
-    failRender('webgl_unavailable', t('graph.webglRequired'))
-    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 : t('graph.renderFailed'),
-    )
-  }
-}
-
-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 : t('graph.invalidData'))
-    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 : t('graph.renderFailed'),
-    )
-  }
-}
-
-function refreshValidatedInteraction(): void {
-  try {
-    assertViewportConfiguration()
-  } catch (error) {
-    failRender('invalid_graph', error instanceof Error ? error.message : t('graph.invalidData'))
-    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 : t('graph.invalidData'))
-    return
-  }
-  if (!sigma) {
-    tryMountSigma()
-    return
-  }
-  try {
-    sigma.setSettings(graphSettings())
-    sigma.refresh()
-  } catch (error) {
-    failRender(
-      'sigma_mount_failed',
-      error instanceof Error ? error.message : t('graph.renderFailed'),
-    )
-  }
-}
-
-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>