From 77d2e01fc0dea8795c8eeec6c13ef8eca21489ca Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Oct 2021 00:24:59 +0200
Subject: [PATCH] update: types

* Add elements to flowoptions type
* add window interface to custom shims
---
 src/additional-components/Background/Background.vue |  4 ++--
 src/additional-components/Controls/Controls.vue     |  6 +++---
 src/additional-components/MiniMap/MiniMap.vue       | 10 +++++-----
 src/container/Flow/Flow.vue                         |  5 ++++-
 src/custom.d.ts                                     |  3 +++
 src/types/types.ts                                  |  5 +++--
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index f0364e08..185bbfc6 100644
--- a/src/additional-components/Background/Background.vue
+++ b/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
diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index 0e953033..bd8c4a8e 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/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>
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index 7261ba61..9e06055d 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/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"
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index 60eefb29..672bf9ca 100644
--- a/src/container/Flow/Flow.vue
+++ b/src/container/Flow/Flow.vue
@@ -16,6 +16,7 @@ import {
   KeyCode,
   TranslateExtent,
   NodeExtent,
+  FlowOptions,
 } from '~/types'
 import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
@@ -23,7 +24,7 @@ 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>(), {
diff --git a/src/custom.d.ts b/src/custom.d.ts
index 95053934..6222a348 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -1,2 +1,5 @@
 declare const __VUE_FLOW_VERSION__: string
 declare const __ENV__: string
+declare interface Window {
+  chrome?: any
+}
diff --git a/src/types/types.ts b/src/types/types.ts
index 591ef2dd..c41824cf 100644
--- a/src/types/types.ts
+++ b/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
 }