<script setup lang="ts" name="PreviewNodesEnd">
import { computed } from 'vue'
import Outline from '../modules/Outline.vue'

const props = defineProps<{
  x: number
  y: number
}>()

const matrix = computed(() => `matrix(1 0 0 1 ${props.x} ${props.y})`)
</script>

<template>
  <g
    class="fv-element fv-shape"
    :transform="matrix">
    <g class="fv-visual">
      <defs>
        <circle
          id="path-1"
          cx="20"
          cy="20"
          r="20"/>
        <filter
          id="filter-2"
          x="-28.8%"
          y="-16.2%"
          width="157.5%"
          height="157.5%"
          filterUnits="objectBoundingBox">
          <feOffset
            dx="0"
            dy="4"
            in="SourceAlpha"
            result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0.329411765   0 0 0 0 0.439215686   0 0 0 0 0.776470588  0 0 0 0.327443796 0" type="matrix" in="shadowBlurOuter1"/>
        </filter>
      </defs>
      <g
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd">
        <g>
          <g id="椭圆形">
            <use
              fill="black"
              fill-opacity="1"
              filter="url(#filter-2)"
              xlink:href="#path-1"/>
            <use fill="#6588F3" fill-rule="evenodd" xlink:href="#path-1"/>
          </g>
          <g transform="translate(12, 12)" fill-rule="nonzero">
            <rect
              id="矩形"
              fill="#000000"
              opacity="0"
              x="0"
              y="0"
              width="13.2"
              height="13.2"/>
            <path d="M4.777777785,2 L11.7222222,2 C13.57407405,2 14.5,2.92592593 14.5,4.777777785 L14.5,11.7222222 C14.5,13.57407405 13.57407405,14.5 11.7222222,14.5 L4.777777785,14.5 C2.92592593,14.5 2,13.57407405 2,11.7222222 L2,4.777777785 C2,2.92592593 2.92592593,2 4.777777785,2 Z" fill="#FFFFFF"/>
          </g>
        </g>
        <rect
          x="0"
          y="0"
          width="40"
          height="40"/>
      </g>
    </g>
    <rect
      class="fv-hit fv-hit-all"
      x="0"
      y="0"
      width="40"
      height="40"
      style="fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;"/>
    <Outline :points="[[0,0],[40,40]]" />
  </g>
</template>
