update(script-setup): Refactor additional-components

* Remove jsx files

fix: ConnectionLine.vue not recalculating properly

src/additional-components/Background/Background.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { HTMLAttributes } from 'vue'
+import { BackgroundVariant, RevueFlowStore } from '~/types'
+
+export interface BackgroundProps extends HTMLAttributes {
+  variant?: BackgroundVariant
+  gap?: number
+  color?: string
+  size?: number
+}
+
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant: BackgroundVariant.Dots,
+  gap: 10,
+  size: 0.4,
+})
+
+const defaultColors: Record<BackgroundVariant, string> = {
+  [BackgroundVariant.Dots]: '#81818a',
+  [BackgroundVariant.Lines]: '#eee',
+}
+
+const store = inject<RevueFlowStore>('store')!
+const transform = computed(() => store.transform)
+// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
+const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
+
+const bgClasses = ['revue-flow__background']
+const scaledGap = computed(() => props.gap && props.gap * transform.value[2])
+const xOffset = computed(() => scaledGap.value && transform.value[0] % scaledGap.value)
+const yOffset = computed(() => scaledGap.value && transform.value[1] % scaledGap.value)
+
+const isLines = computed(() => props.variant === BackgroundVariant.Lines)
+const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
+const size = computed(() => props.size || 0.4 * transform.value[2])
+</script>
+<template>
+  <svg
+    :class="bgClasses"
+    :style="{
+      width: '100%',
+      height: '100%',
+    }"
+  >
+    <pattern :id="patternId" :x="xOffset" :y="yOffset" :width="scaledGap" :height="scaledGap" patternUnits="userSpaceOnUse">
+      <template v-if="isLines">
+        <path
+          :stroke="bgColor"
+          :stroke-width="props.size"
+          :d="`M${scaledGap / 2} 0 V${scaledGap} M0 ${scaledGap / 2} H${scaledGap}`"
+        />
+      </template>
+      <template v-else>
+        <circle :cx="size" :cy="size" :r="size" :fill="bgColor" />
+      </template>
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" :fill="`url(#${patternId})`" />
+  </svg>
+</template>

src/additional-components/Controls/ControlButton.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+export type ControlButtonProps = HTMLButtonElement
+
+const props = defineProps<ControlButtonProps>()
+</script>
+<template>
+  <button :class="['revue-flow__controls-button']" v-bind="props">
+    <slot></slot>
+  </button>
+</template>

src/additional-components/Controls/Controls.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { HTMLAttributes } from 'vue'
+import PlusIcon from '../../../assets/icons/plus.svg'
+import MinusIcon from '../../../assets/icons/minus.svg'
+import Fitview from '../../../assets/icons/fitview.svg'
+import Lock from '../../../assets/icons/lock.svg'
+import Unlock from '../../../assets/icons/unlock.svg'
+import ControlButton from './ControlButton.vue'
+import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '~/types'
+import useZoomPanHelper from '~/hooks/useZoomPanHelper'
+
+export interface ControlProps extends HTMLAttributes {
+  showZoom?: boolean
+  showFitView?: boolean
+  showInteractive?: boolean
+  fitViewParams?: FitViewParams
+  onZoomIn?: () => void
+  onZoomOut?: () => void
+  onFitView?: () => void
+  onInteractiveChange?: (interactiveStatus: boolean) => void
+}
+
+const props = withDefaults(defineProps<ControlProps>(), {
+  showZoom: true,
+  showFitView: true,
+  showInteractive: true,
+})
+
+const store = inject<RevueFlowStore>('store')!
+// const { onReady } = useZoomPanHelper()
+
+const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
+const mapClasses = ['revue-flow__controls']
+
+/*
+* const onZoomInHandler = () => {
+  zoomHelper.value?.zoomIn?.()
+  props.onZoomIn?.()
+}
+
+const onZoomOutHandler = () => {
+  zoomHelper.value?.zoomOut?.()
+  props.onZoomOut?.()
+}
+
+const onFitViewHandler = () => {
+  zoomHelper.value?.fitView?.(props.fitViewParams)
+  props.onFitView?.()
+}
+
+const onInteractiveChangeHandler = () => {
+  store.setInteractive?.(!isInteractive)
+  props.onInteractiveChange?.(!isInteractive)
+}
+*/
+</script>
+<template>
+  <div :class="mapClasses">
+    <template v-if="props.showZoom">
+      <ControlButton on-click="onZoomInHandler" class="revue-flow__controls-zoomin">
+        <PlusIcon />
+      </ControlButton>
+      <ControlButton on-click="onZoomOutHandler" class="revue-flow__controls-zoomout">
+        <MinusIcon />
+      </ControlButton>
+    </template>
+    <ControlButton v-if="props.showFitView" class="revue-flow__controls-fitview" on-click="onFitViewHandler">
+      <Fitview />
+    </ControlButton>
+    <ControlButton v-if="props.showInteractive" class="revue-flow__controls-interactive" on-click="onInteractiveChangeHandler">
+      <Unlock v-if="isInteractive" />
+      <Lock v-else />
+    </ControlButton>
+    <slot></slot>
+  </div>
+</template>