update(docs): fix view height

docs/app.vue

@@ -1,6 +1,6 @@
 <template>
   <Header />
-  <div class="flex h-full">
+  <div id="app" class="flex">
     <Sidebar />
     <div id="vue-flow-docs" class="flex-1">
       <NuxtPage />
@@ -10,4 +10,8 @@
 <style>
 @import 'assets/index.css';
 @import 'node_modules/@braks/vue-flow/dist/style.css';
+
+#app {
+  height: calc(100% - 92px);
+}
 </style>

docs/assets/index.css

@@ -13,9 +13,10 @@ html,
 body,
 #root,
 #__nuxt {
+  height: 100vh;
   margin: 0;
-  height: 100%;
   color: #111;
+  overflow: hidden;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

docs/components/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
+import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },

docs/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex items-center py-4 px-8 text-white">
+  <header class="flex items-center py-4 px-8 text-white h-[92px]">
     <div class="flex flex-col">
       <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
       <span class="text-xs text-gray-800 mt-2"

docs/nuxt.config.ts

@@ -5,7 +5,8 @@ export default defineNuxtConfig({
     title: 'Vue Flow',
     description: 'Vue Flow Documentation',
   },
-  target: 'client',
-  ssr: false,
+  router: {
+    base: '/',
+  },
   buildModules: ['nuxt-windicss'],
 })

docs/package.json

@@ -11,6 +11,7 @@
     "localforage": "^1.10.0"
   },
   "devDependencies": {
+    "@nuxt/nitro": "^0.10.0",
     "@types/dagre": "^0.7.46",
     "nuxt-windicss": "^2.0.4",
     "nuxt3": "latest"

docs/pages/examples/basic.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
@@ -26,12 +27,9 @@ const elements = ref<Elements>([
 ])
 const rfInstance = ref<FlowInstance | null>(null)
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Edge | Connection) => {
-  elements.value = addEdge(params, elements.value)
-  console.log(params)
-}
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
 const onLoad = (flowInstance: FlowInstance) => {
-  flowInstance.fitView({ padding: 0.1 })
+  flowInstance?.fitView({ padding: 0.1 })
   rfInstance.value = flowInstance
 }
 

docs/pages/examples/button-edge.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   Background,
   Connection,

docs/pages/examples/custom-connectionline.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
+import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
 import CustomConnectionLine from '../../components/CustomConnectionLine.vue'
 
 const elements = ref<Elements>([

docs/pages/examples/custom-node.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   isEdge,
   removeElements,
   addEdge,

docs/pages/examples/drag-n-drop.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

docs/pages/examples/edge-types.vue

@@ -2,7 +2,8 @@
 /**
  * Example for checking the different edge types and source and target positions
  */
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

docs/pages/examples/edges.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

docs/pages/examples/empty.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

docs/pages/examples/hidden.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
+import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

docs/pages/examples/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

docs/pages/examples/interaction.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   MiniMap,
   Controls,

docs/pages/examples/layouting.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import Flow, {
+import {
+  Flow,
   Controls,
   addEdge,
   ConnectionMode,

docs/pages/examples/node-type-change.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
+import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

docs/pages/examples/node-types-id-change.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
+import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
 import NodeA from '../../components/NodeA.vue'
 import NodeB from '../../components/NodeB.vue'
 

docs/pages/examples/provider.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

docs/pages/examples/save-restore.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
+import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
 import Controls from '../../components/SaveControls.vue'
 
 const initialElements: Elements = [

docs/pages/examples/stress.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

docs/pages/examples/switch.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
+import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)

docs/pages/examples/unidirectional.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

docs/pages/examples/updatable-edge.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   Controls,
   updateEdge,
   addEdge,

docs/pages/examples/update-node-internals.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

docs/pages/examples/update-node.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Elements } from '@braks/vue-flow'
+import { Flow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },

docs/pages/examples/validation.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   Handle,
   Connection,

docs/pages/examples/zoom-pan-helper.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   Background,

docs/yarn.lock

@@ -369,6 +369,11 @@
     unctx "^1.0.2"
     untyped "^0.2.9"
 
+"@nuxt/nitro@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/nitro/-/nitro-0.10.0.tgz#e2157be377f6131ec72484153d56908da8704094"
+  integrity sha512-3ffdZMD0WK7UNgrkBhOyPr3fyOfmy2nPMxDOaX6eUCamr5NuY7cHQhWnum/BwSm1vIOm4b9/rnd/cgYcg9qiag==
+
 "@nuxt/nitro@npm:@nuxt/nitro-edge@3.0.0-27249044.7d918e1":
   version "3.0.0-27249044.7d918e1"
   resolved "https://registry.yarnpkg.com/@nuxt/nitro-edge/-/nitro-edge-3.0.0-27249044.7d918e1.tgz#340dc19a58d295a0009add91ca2467a2598d8072"

package.json

@@ -40,7 +40,8 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
-    "pinia": "^2.0.0-rc.14"
+    "pinia": "^2.0.0-rc.14",
+    "ssr-window": "^4.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",

src/additional-components/MiniMap/MiniMap.vue

@@ -2,7 +2,7 @@
 import { HTMLAttributes } from 'vue'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import { Node } from '../../types'
-import { useStore } from '../../composables'
+import { useStore, useWindow } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
 
 type StringFunc = (node: Node) => string
@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
 })
 
 const attrs: any = useAttrs()
+const window = useWindow()
 
 const defaultWidth = 200
 const defaultHeight = 150
@@ -41,8 +42,7 @@ const nodeStrokeColorFunc: StringFunc =
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering: ShapeRendering =
-  (window && typeof window === 'undefined') || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)

src/auto-imports.d.ts

@@ -17,8 +17,11 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -39,6 +42,7 @@ declare global {
   const onMounted: typeof import('vue')['onMounted']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']

src/composables/index.ts

@@ -3,6 +3,6 @@ export { default as useHooks } from './useHooks'
 export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
-export { default as useZoom } from './useZoom'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useStore } from './useStore'
+export { default as useWindow } from './useWindow'

src/composables/useKeyPress.ts

@@ -1,9 +1,11 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import { KeyCode } from '../types'
+import useWindow from './useWindow'
 
 // todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
+  const window = useWindow()
   const isPressed = controlledRef<boolean>(false, {
     onBeforeChange(val, oldVal) {
       if (val === oldVal) return false
@@ -37,11 +39,9 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
     },
   )
 
-  if (window && typeof window !== 'undefined') {
-    useEventListener(window, 'blur', () => {
-      isPressed.value = false
-    })
-  }
+  useEventListener(window, 'blur', () => {
+    isPressed.value = false
+  })
 
   if (onChange && typeof onChange === 'function') onChange(isPressed.value)
 

src/composables/useWindow.ts

@@ -0,0 +1,6 @@
+import { ssrWindow } from 'ssr-window'
+
+export default (): Window & typeof globalThis & { chrome?: any } => {
+  if (typeof window !== 'undefined') return window
+  else return ssrWindow as any
+}