feat: migrated vue 2 backwards compatibility for @vue-flow/background

feat: migrated vue 2 backwards compatibility for @vue-flow/background

.changeset/gold-jokes-tap.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+feat: added vue 2 backwards compatbility

packages/background/package.json

@@ -55,9 +55,17 @@
     "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
     "test": "exit 0"
   },
+  "dependencies": {
+    "vue-demi": "latest"
+  },
   "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
+    "@vue/composition-api": "^1.7.2",
+    "vue": "^2.7.15 || >=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",

packages/background/src/Background/index.ts

@@ -0,0 +1,207 @@
+import { type PropType, computed, defineComponent, h, ref } from 'vue-demi'
+
+// import { useVueFlow } from '@vue-flow/core'
+
+import { type BackgroundProps, BackgroundVariant, type BackgroundVariantType } from '../types'
+import { DefaultBgColors, DotPattern, LinePattern } from '../Pattern'
+
+import { transformForCompatibleAttrs, transformForCompatibleProps } from '../utils'
+
+const Background = defineComponent({
+  name: 'Background',
+  compatConfig: { MODE: 2 },
+  props: {
+    id: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    variant: {
+      type: String as PropType<BackgroundVariant | BackgroundVariantType>,
+      default: BackgroundVariant.Dots,
+      required: false,
+    },
+    gap: {
+      type: [Number, Array] as PropType<number | [number, number]>,
+      default: 20,
+      required: false,
+    },
+    size: {
+      type: Number,
+      default: () => 1,
+      required: false,
+    },
+    lineWidth: {
+      type: Number,
+      default: () => 1,
+      required: false,
+    },
+    height: {
+      type: Number,
+      default: () => 100,
+      required: false,
+    },
+    width: {
+      type: Number,
+      default: () => 100,
+      required: false,
+    },
+    x: {
+      type: Number,
+      default: () => 0,
+      required: false,
+    },
+    y: {
+      type: Number,
+      default: () => 0,
+      required: false,
+    },
+    offset: {
+      type: Number,
+      default: () => 2,
+      required: false,
+    },
+    bgColor: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    patternColor: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  },
+  setup(props: BackgroundProps, { slots }) {
+    const vueFlowId = 'vueflowid-background'
+
+    const viewport = ref({
+      x: 50,
+      y: 50,
+      zoom: 1,
+    })
+
+    const background = computed(() => {
+      const offset = props.offset || 2
+
+      const [gapX = 20, gapY = 20] = Array.isArray(props.gap) ? props.gap : [props.gap, props.gap]
+
+      const scaledGap: [number, number] = [gapX * (viewport.value.zoom || 1), gapY * (viewport.value.zoom || 1)]
+
+      const scaledSize = (props.size || 1) * viewport.value.zoom
+
+      const patternOffset =
+        props.variant === BackgroundVariant.Dots
+          ? [scaledSize / offset, scaledSize / offset]
+          : [scaledGap[0] / offset, scaledGap[1] / offset]
+
+      return {
+        scaledGap,
+        offset: patternOffset,
+        size: scaledSize,
+      }
+    })
+
+    // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
+    const patternId = computed(() => `pattern-${vueFlowId}${props.id ? `-${props.id}` : ''}`)
+
+    const patternColor = computed(() => props.patternColor || DefaultBgColors[props.variant || BackgroundVariant.Dots])
+
+    const height = computed(() => {
+      return props.height || 100
+    })
+
+    const width = computed(() => {
+      return props.width || 100
+    })
+
+    return () =>
+      h(
+        'svg',
+        {
+          class: ['vue-flow__background vue-flow__container'],
+          style: {
+            height: `${height.value > 100 ? 100 : height.value}%`,
+            width: `${width.value > 100 ? 100 : width.value}%`,
+          },
+        },
+        [
+          slots.patternContainer
+            ? slots.patternContainer(
+                transformForCompatibleProps({
+                  id: patternId.value,
+                }),
+              )
+            : h(
+                'pattern',
+                transformForCompatibleAttrs({
+                  id: patternId.value,
+                  x: viewport.value.x % background.value.scaledGap[0],
+                  y: viewport.value.y % background.value.scaledGap[1],
+                  width: background.value.scaledGap[0],
+                  height: background.value.scaledGap[1],
+                  patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+                  patternUnits: 'userSpaceOnUse',
+                }),
+                slots.pattern
+                  ? slots.pattern
+                  : [
+                      props.variant === BackgroundVariant.Lines
+                        ? h(
+                            LinePattern,
+                            transformForCompatibleProps({
+                              size: props.lineWidth,
+                              color: patternColor.value,
+                              dimensions: background.value.scaledGap,
+                            }),
+                          )
+                        : h(
+                            DotPattern,
+                            transformForCompatibleProps({
+                              color: patternColor.value,
+                              radius: background.value.size / (props.offset || 2),
+                            }),
+                          ),
+                      props.bgColor
+                        ? h(
+                            'svg',
+                            transformForCompatibleAttrs({
+                              height: '100',
+                              width: '100',
+                            }),
+                            [
+                              h(
+                                'rect',
+                                transformForCompatibleAttrs({
+                                  height: '100%',
+                                  width: '100%',
+                                  fill: props.bgColor,
+                                }),
+                              ),
+                            ],
+                          )
+                        : null,
+                    ],
+              ),
+          h(
+            'rect',
+            transformForCompatibleAttrs({
+              x: props.x,
+              y: props.y,
+              width: '100%',
+              height: '100%',
+              fill: `url(#${patternId.value})`,
+            }),
+          ),
+          slots.default &&
+            slots.default(
+              transformForCompatibleProps({
+                id: patternId.value,
+              }),
+            ),
+        ],
+      )
+  },
+})
+
+export default Background

packages/background/src/Pattern/dot.ts

@@ -0,0 +1,43 @@
+import { computed, defineComponent, h } from 'vue-demi'
+
+import { transformForCompatibleAttrs } from '../utils'
+
+interface DotPatternProps {
+  radius: number
+  color: string
+}
+
+const DotPattern = defineComponent({
+  name: 'DotPattern',
+  compatConfig: { MODE: 2 },
+  props: {
+    radius: {
+      type: Number,
+      default: () => 1,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: () => '#000',
+      required: true,
+    },
+  },
+  setup(props: DotPatternProps) {
+    const radius = computed(() => props.radius)
+
+    const color = computed(() => props.color)
+
+    return () =>
+      h(
+        'circle',
+        transformForCompatibleAttrs({
+          cx: radius.value,
+          cy: radius.value,
+          r: radius.value,
+          fill: color.value,
+        }),
+      )
+  },
+})
+
+export default DotPattern

packages/background/src/Pattern/index.ts

@@ -0,0 +1,16 @@
+import { BackgroundVariant } from '../types'
+
+import DotPattern from './dot'
+import LinePattern from './line'
+
+export const Patterns = {
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern,
+}
+
+export const DefaultBgColors: Record<BackgroundVariant, string> = {
+  [BackgroundVariant.Dots]: '#81818a',
+  [BackgroundVariant.Lines]: '#eee',
+}
+
+export { DotPattern, LinePattern }