<script setup lang="ts" name="PreviewNodes">
import { type Ref, computed, inject } from 'vue'
import PreviewNode from './PreviewNode.vue'
import type { INodes } from '../utils/INodes'

const nodeConfig = inject<Ref<INodes[]>>('nodeConfig')
</script>

<template>
  <g class="layer-root">
    <g v-for="(node, index) in nodeConfig" :key="`Nodes${index}`" class="fv-group">
      <!-- 组件 -->
      <PreviewNode :node="node" />
      <!-- <PreviewNode :node="node" filter="url(#puzzleNormalShadow)" /> -->
    </g>
  </g>
</template>

<style lang="less" scoped>
:deep(.fv-visual),
:deep(.fv-outline) {
  pointer-events: none;
}
.fv-group {
  :deep(.fv-element) {
    display: block;
    &.select {
      .fv-outline {
        stroke: var(--primary-color);
        visibility: visible;
      }
    }
    /* hit */
    > .fv-hit-all,
    > .fv-hit-no-move {
      pointer-events: all;
    }
  }
}
</style>