<script setup lang="ts">
import type { AgentStudioConnectionView, AgentStudioViewport } from './types';

defineProps<{
  connections: AgentStudioConnectionView[];
  viewport: AgentStudioViewport;
}>();
</script>

<template>
  <svg class="agent-studio-edge-layer" aria-hidden="true">
    <g
      :transform="`translate(${viewport.x} ${viewport.y}) scale(${viewport.zoom})`"
    >
      <path
        v-for="connection in connections"
        :key="connection.id"
        class="agent-studio-edge-layer__path"
        :class="{ 'is-active': connection.active }"
        :d="connection.path"
        :data-source-id="connection.sourceId"
        :data-target-id="connection.targetId"
      />
    </g>
  </svg>
</template>

<style scoped>
.agent-studio-edge-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.agent-studio-edge-layer__path {
  fill: none;
  stroke: var(--el-border-color);
  stroke: color-mix(
    in srgb,
    var(--el-color-primary) 30%,
    var(--el-border-color)
  );
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.agent-studio-edge-layer__path.is-active {
  stroke: var(--el-color-primary);
  stroke-width: 2.2;
}
</style>
