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

defineOptions({
  inheritAttrs: false
})
const props = defineProps<{
  width?: string
  height?: string
}>()

const nodeConfig = inject<Ref<INodes[]>>('nodeConfig')
// path attributes
const stylePath = computed(() => {
  return {
    fill: 'none',
    strokeWidth: '1px',
    stroke: '#A8B7C7',
    strokeLinejoin: 'round',
    markerEnd: 'url(#sequenceflow-end-white-black)'
  }
})
// polyline attributes
const stylePolyline = computed(() => ({
  fill: 'none',
  strokeOpacity: 0,
  strokeWidth: '15px',
  stroke: 'white'
}))

// path attribute d
function dPath(path: IPaths) {
  return 'M' + path.points.join('L')
}
// polyline attribute points
function pointsPolyline(path: IPaths) {
  return path.points.join(' ')
}
</script>

<template>
  <g class="fv-root-lines">
    <template v-for="(item, index) in nodeConfig">
      <g v-for="(path, indexPath) in item.nodePath.paths" :key="`rootPolyline${index}${indexPath}}`" class="fv-group">
        <g class="fv-element fv-connection">
          <g class="fv-visual">
            <path :d="dPath(path)" v-bind="stylePath"/>
          </g>
          <polyline :points="pointsPolyline(path)" class="fv-hit fv-hit-stroke" :style="stylePolyline"/>
        </g>
      </g>
    </template>
  </g>
</template>

<style lang="less" scoped>
.fv-connection {
  display: block;
  .fv-visual {
    stroke-width: 2px;
    fill: none;
  }
}
.fv-hit-stroke {
  pointer-events: stroke;
}

.updating {
  pointer-events: none;
  * {
    pointer-events: none;
  }
  :deep(*) {
    pointer-events: none;
  }
  :deep(.fv-outline) {
    display: none;
  }
}

.fv-group {
  :deep(.fv-element) {
    display: block;
    &.select {
      .fv-outline {
        // stroke: #4773FC;
        visibility: visible;
      }
    }
    /* hit */
    > .fv-hit-all,
    > .fv-hit-no-move {
      pointer-events: all;
    }
    /* 隐藏拖拽中的连线 */
    &.updating {
      display: none;
    }
  }
}
.isGhost{
  opacity: 0.3;
}
.isDrag{
  filter:drop-shadow(0px 0px 6px #03a9f4);
}
</style>
