update: types

* Add elements to flowoptions type
* add window interface to custom shims

src/additional-components/Background/Background.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { HTMLAttributes } from 'vue'
+import { SVGAttributes } from 'vue'
 import { BackgroundVariant } from '~/types'
 import { useStore } from '~/composables'
 
-export interface BackgroundProps extends HTMLAttributes {
+export interface BackgroundProps extends SVGAttributes {
   variant?: BackgroundVariant
   gap?: number
   color?: string

src/additional-components/Controls/Controls.vue

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<ControlProps>(), {
 const store = useStore()
 const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
-const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
+const isInteractive = computed(() => store.nodesDraggable && store.nodesConnectable && store.elementsSelectable)
 const mapClasses = ['vue-flow__controls']
 
 const onZoomInHandler = () => {
@@ -48,8 +48,8 @@ const onFitViewHandler = () => {
 }
 
 const onInteractiveChangeHandler = () => {
-  store.setInteractive?.(!isInteractive)
-  props.onInteractiveChange?.(!isInteractive)
+  store.setInteractive?.(!isInteractive.value)
+  props.onInteractiveChange?.(!isInteractive.value)
 }
 </script>
 <template>

src/additional-components/MiniMap/MiniMap.vue

@@ -24,9 +24,8 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
   nodeStrokeWidth: 2,
   maskColor: 'rgb(240, 242, 243, 0.7)',
 })
-const attrs: any = useAttrs()
 
-declare const window: any
+const attrs: any = useAttrs()
 
 const defaultWidth = 200
 const defaultHeight = 150
@@ -67,6 +66,8 @@ const viewBox = computed(() => {
     height: viewHeight + offset * 2,
   }
 })
+
+const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
 </script>
 <template>
   <svg
@@ -75,10 +76,9 @@ const viewBox = computed(() => {
     :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
     class="vue-flow__minimap"
   >
-    <slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
-      <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
+    <slot name="mini-map-nodes" :nodes="nodes" :view-box="viewBox">
+      <template v-for="(node, i) of 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"

src/container/Flow/Flow.vue

@@ -16,14 +16,15 @@ import {
   KeyCode,
   TranslateExtent,
   NodeExtent,
+  FlowOptions,
 } from '~/types'
 import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
 import { createEdgeTypes } from '~/container/EdgeRenderer/utils'
 import { createNodeTypes } from '~/container/NodeRenderer/utils'
 import { useHooks, useStore, createHooks } from '~/composables'
 
-export interface FlowProps {
+export interface FlowProps extends FlowOptions {
   elements: Elements
   nodeTypes?: Record<string, NodeType>
   edgeTypes?: Record<string, EdgeType>
@@ -57,6 +58,8 @@ export interface FlowProps {
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
+  edgeTypesId?: string
+  nodeTypesId?: string
 }
 
 const props = withDefaults(defineProps<FlowProps>(), {

src/custom.d.ts

@@ -1,2 +1,5 @@
 declare const __VUE_FLOW_VERSION__: string
 declare const __ENV__: string
+declare interface Window {
+  chrome?: any
+}

src/types/types.ts

@@ -91,6 +91,7 @@ export type OnLoadParams<T = any> = {
 export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
 
 export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
+  elements: Elements
   nodeTypes?: Record<string, NodeType>
   edgeTypes?: Record<string, EdgeType>
   connectionMode?: ConnectionMode
@@ -123,6 +124,6 @@ export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
-  // nodeTypesId?: string
-  // edgeTypesId?: string / used by react-flow to detect a re-render of node components
+  nodeTypesId?: string
+  edgeTypesId?: string
 }