update: add slots to Background.vue, Controls.vue and MiniMap.vue

src/additional-components/Background/Background.vue

@@ -21,18 +21,17 @@ const defaultColors: Record<BackgroundVariant, string> = {
 }
 
 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 scaledGap = computed(() => props.gap && props.gap * store.transform[2])
+const xOffset = computed(() => scaledGap.value && store.transform[0] % scaledGap.value)
+const yOffset = computed(() => scaledGap.value && store.transform[1] % scaledGap.value)
+const size = computed(() => props.size || 0.4 * store.transform[2])
 
-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])
+const isLines = props.variant === BackgroundVariant.Lines
+const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]
+const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
 </script>
 <template>
   <svg
@@ -55,5 +54,6 @@ const size = computed(() => props.size || 0.4 * transform.value[2])
       </template>
     </pattern>
     <rect x="0" y="0" width="100%" height="100%" :fill="`url(#${patternId})`" />
+    <slot></slot>
   </svg>
 </template>

src/additional-components/Background/utils.tsx

@@ -1,7 +0,0 @@
-export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string) => {
-  return <path stroke={stroke} stroke-width={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />
-}
-
-export const createGridDotsPath = (size: number, fill: string) => {
-  return <circle cx={size} cy={size} r={size} fill={fill} />
-}

src/additional-components/Controls/Controls.vue

@@ -1,11 +1,11 @@
 <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 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 { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '~/types'
 import useZoomPanHelper from '~/hooks/useZoomPanHelper'
 
@@ -57,20 +57,38 @@ const onInteractiveChangeHandler = () => {
 <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>
+      <slot name="control-zoom-in">
+        <ControlButton class="revue-flow__controls-zoomin" @click="onZoomInHandler">
+          <slot name="icon-zoom-in">
+            <PlusIcon />
+          </slot>
+        </ControlButton>
+      </slot>
+      <slot name="control-zoom-out">
+        <ControlButton class="revue-flow__controls-zoomout" @click="onZoomOutHandler">
+          <slot name="icon-zoom-out">
+            <MinusIcon />
+          </slot>
+        </ControlButton>
+      </slot>
     </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 name="control-fitview">
+      <ControlButton v-if="props.showFitView" class="revue-flow__controls-fitview" @click="onFitViewHandler">
+        <slot name="icon-fitview">
+          <Fitview />
+        </slot>
+      </ControlButton>
+    </slot>
+    <slot name="control-interactive">
+      <ControlButton v-if="props.showInteractive" class="revue-flow__controls-interactive" @click="onInteractiveChangeHandler">
+        <slot name="icon-unlock">
+          <Unlock v-if="isInteractive" />
+        </slot>
+        <slot name="icon-lock">
+          <Lock v-if="!isInteractive" />
+        </slot>
+      </ControlButton>
+    </slot>
     <slot></slot>
   </div>
 </template>

src/additional-components/MiniMap/MiniMap.vue

@@ -74,22 +74,24 @@ const viewBox = computed(() => {
     :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
     class="revue-flow__minimap"
   >
-    <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
-      <MiniMapNode
-        v-if="!node.isHidden"
-        :x="node.__rf.position.x"
-        :y="node.__rf.position.y"
-        :width="node.__rf.width"
-        :height="node.__rf.height"
-        :style="node.style"
-        :class="nodeClassNameFunc(node)"
-        :color="nodeColorFunc(node)"
-        :border-radius="props.nodeBorderRadius"
-        :stroke-color="nodeStrokeColorFunc(node)"
-        :stroke-width="props.nodeStrokeWidth"
-        :shape-rendering="shapeRendering"
-      />
-    </template>
+    <slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
+      <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
+        <MiniMapNode
+          v-if="!node.isHidden"
+          :x="node.__rf.position.x"
+          :y="node.__rf.position.y"
+          :width="node.__rf.width"
+          :height="node.__rf.height"
+          :style="node.style"
+          :class="nodeClassNameFunc(node)"
+          :color="nodeColorFunc(node)"
+          :border-radius="props.nodeBorderRadius"
+          :stroke-color="nodeStrokeColorFunc(node)"
+          :stroke-width="props.nodeStrokeWidth"
+          :shape-rendering="shapeRendering"
+        />
+      </template>
+    </slot>
     <path
       class="revue-flow__minimap-mask"
       :d="`

tsconfig.json

@@ -25,6 +25,9 @@
     "paths": {
       "~/*": [
         "src/*"
+      ],
+      "@/*": [
+        "*"
       ]
     }
   },