CanvasBackground.vue 689 B

123456789101112131415161718192021222324
  1. <script setup lang="ts">
  2. import CanvasBackgroundStripedPattern from './CanvasBackgroundStripedPattern.vue'
  3. import { Background } from '@vue-flow/background'
  4. import type { ViewportTransform } from '@vue-flow/core'
  5. defineProps<{
  6. striped: boolean
  7. viewport: ViewportTransform
  8. }>()
  9. </script>
  10. <template>
  11. <Background data-test-id="canvas-background" pattern-color="var(--canvas--dot--color)" :gap="16">
  12. <template v-if="striped" #pattern-container="patternProps">
  13. <CanvasBackgroundStripedPattern
  14. :id="patternProps.id"
  15. data-test-id="canvas-background-striped-pattern"
  16. :x="viewport.x"
  17. :y="viewport.y"
  18. :zoom="viewport.zoom"
  19. />
  20. </template>
  21. </Background>
  22. </template>