<script setup lang="ts" name="PreviewNodesGatewayExclusive">
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 selected"
    :transform="matrix">
    <g class="fv-visual">
      <defs>
        <rect
          id="path-GatewayExclusive"
          x="0"
          y="0"
          width="28.28520919269299"
          height="28.28520919269299"
          rx="2"/>
        <filter
          id="filter-GatewayExclusive"
          x="-21.7%"
          y="-21.7%"
          width="176.7%"
          height="176.7%"
          filterUnits="objectBoundingBox">
          <feOffset
            dx="4"
            dy="4"
            in="SourceAlpha"
            result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0.933333333   0 0 0 0 0.4   0 0 0 0 0.4  0 0 0 0.243645301 0" type="matrix" in="shadowBlurOuter1"/>
        </filter>
      </defs>
      <g
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd">
        <g>
          <g>
            <g>
              <rect
                x="0"
                y="0"
                width="40"
                height="40"/>
              <g transform="translate(20, 0) rotate(45)">
                <use
                  fill="black"
                  fill-opacity="1"
                  filter="url(#filter-GatewayExclusive)"
                  xlink:href="#path-GatewayExclusive"/>
                <use fill="#EE6666" fill-rule="evenodd" xlink:href="#path-GatewayExclusive"/>
              </g>
            </g>
            <g transform="translate(20, 11.3) rotate(45)" fill-rule="nonzero">
              <rect
                fill="#000000"
                opacity="0"
                x="0"
                y="0"
                width="11.2"
                height="11.2"/>
              <polygon fill="#FFFFFF" points="5.37762569239835 0.47142015321154984 6.901520377136124 0.47142015321154984 6.901520377136124 5.355658691809075 11.785503830288746 5.355658691809075 11.785503830288746 6.879016146140248 6.901520377136124 6.879016146140248 6.901520377136124 11.785503830288746 5.37762569239835 11.785503830288746 5.37762569239835 6.879016146140248 0.47142015321154984 6.879016146140248 0.47142015321154984 5.355658691809075 5.37762569239835 5.355658691809075"/>
            </g>
          </g>
        </g>
      </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>
