From a8f7cc2389d76e67f7b29cc4a270563d3dc43f4e Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 Nov 2021 23:29:14 +0100
Subject: [PATCH] fix: zoom pane not scaling

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/pages/examples/drag-n-drop.vue           |    2 +-
 examples-app/.gitignore                       |    5 +
 examples-app/README.md                        |   11 +
 index.html => examples-app/index.html         |    5 +-
 examples-app/package.json                     |   26 +
 examples-app/public/favicon.ico               |    0
 examples-app/src/App.vue                      |   21 +
 examples-app/src/Basic/Basic.vue              |   91 +
 .../CustomConnectionLine/ConnectionLine.vue   |   23 +
 .../CustomConnectionLine.vue                  |   23 +
 .../src/CustomNode/ColorPickerNode.vue        |   38 +
 examples-app/src/CustomNode/CustomNode.vue    |  132 ++
 examples-app/src/DragNDrop/DnD.vue            |   70 +
 examples-app/src/DragNDrop/Sidebar.vue        |   47 +
 .../src/EdgeTypes/EdgeTypesExample.vue        |   30 +
 examples-app/src/EdgeTypes/utils.ts           |  106 +
 .../src/EdgeWithButton/ButtonEdge.vue         |   80 +
 .../src/EdgeWithButton/EdgeWithButton.vue     |   55 +
 examples-app/src/Edges/CustomEdge.vue         |   41 +
 examples-app/src/Edges/CustomEdge2.vue        |   65 +
 examples-app/src/Edges/CustomLabel.vue        |   10 +
 examples-app/src/Edges/EdgesExample.vue       |  106 +
 examples-app/src/Empty/EmptyExample.vue       |   54 +
 examples-app/src/Header.vue                   |   16 +
 examples-app/src/Hidden/HiddenExample.vue     |   39 +
 .../src/Interaction/InteractionExample.vue    |  152 ++
 .../src/Layouting/LayoutingExample.vue        |   92 +
 .../src/Layouting/initial-elements.ts         |   71 +
 examples-app/src/MultiFlows/Flow.vue          |   20 +
 .../src/MultiFlows/MultiFlowsExample.vue      |   24 +
 .../NodeTypeChange/NodeTypeChangeExample.vue  |   47 +
 examples-app/src/NodeTypesIdChange/NodeA.vue  |   11 +
 examples-app/src/NodeTypesIdChange/NodeB.vue  |   11 +
 .../NodeTypesIdChangeExample.vue              |   60 +
 examples-app/src/Overview/Overview.vue        |  172 ++
 examples-app/src/Provider/ProviderExample.vue |   97 +
 examples-app/src/Provider/Sidebar.vue         |   27 +
 examples-app/src/SaveRestore/Controls.vue     |   60 +
 .../src/SaveRestore/SaveRestoreExample.vue    |   37 +
 examples-app/src/Sidebar.vue                  |  126 ++
 examples-app/src/Stress/StressExample.vue     |   90 +
 examples-app/src/Switch/SwitchExample.vue     |   47 +
 .../src/Unidirectional/CustomNode.vue         |   19 +
 .../Unidirectional/UnidirectionalExample.vue  |  205 ++
 .../UpdatableEdge/UpdatableEdgeExample.vue    |   89 +
 .../src/UpdateNode/UpdateNodeExample.vue      |   73 +
 .../src/UpdateNodeInternals/CustomNode.vue    |   25 +
 .../UpdateNodeInternalsExample.vue            |   83 +
 examples-app/src/Validation/CustomInput.vue   |    9 +
 examples-app/src/Validation/CustomNode.vue    |   16 +
 .../src/Validation/ValidationExample.vue      |   84 +
 .../ZoomPanHelper/ZoomPanHelperExample.vue    |   51 +
 examples-app/src/assets/index.css             |  108 +
 examples-app/src/assets/logo.png              |    0
 examples-app/src/assets/polygon-scatter.svg   |    1 +
 examples-app/src/auto-imports.d.ts            |   50 +
 examples-app/src/env.d.ts                     |    8 +
 examples-app/src/main.ts                      |   15 +
 examples-app/src/router.ts                    |  113 ++
 examples-app/tsconfig.json                    |   16 +
 examples-app/vite.config.ts                   |   27 +
 examples-app/yarn.lock                        | 1791 +++++++++++++++++
 src/components/Edges/Edge.vue                 |    2 +-
 src/container/EdgeRenderer/EdgeRenderer.vue   |    4 +-
 src/container/ZoomPane/ZoomPane.vue           |   15 +-
 65 files changed, 5030 insertions(+), 14 deletions(-)
 create mode 100644 examples-app/.gitignore
 create mode 100644 examples-app/README.md
 rename index.html => examples-app/index.html (62%)
 create mode 100644 examples-app/package.json
 create mode 100644 examples-app/public/favicon.ico
 create mode 100644 examples-app/src/App.vue
 create mode 100644 examples-app/src/Basic/Basic.vue
 create mode 100644 examples-app/src/CustomConnectionLine/ConnectionLine.vue
 create mode 100644 examples-app/src/CustomConnectionLine/CustomConnectionLine.vue
 create mode 100644 examples-app/src/CustomNode/ColorPickerNode.vue
 create mode 100644 examples-app/src/CustomNode/CustomNode.vue
 create mode 100644 examples-app/src/DragNDrop/DnD.vue
 create mode 100644 examples-app/src/DragNDrop/Sidebar.vue
 create mode 100644 examples-app/src/EdgeTypes/EdgeTypesExample.vue
 create mode 100644 examples-app/src/EdgeTypes/utils.ts
 create mode 100644 examples-app/src/EdgeWithButton/ButtonEdge.vue
 create mode 100644 examples-app/src/EdgeWithButton/EdgeWithButton.vue
 create mode 100644 examples-app/src/Edges/CustomEdge.vue
 create mode 100644 examples-app/src/Edges/CustomEdge2.vue
 create mode 100644 examples-app/src/Edges/CustomLabel.vue
 create mode 100644 examples-app/src/Edges/EdgesExample.vue
 create mode 100644 examples-app/src/Empty/EmptyExample.vue
 create mode 100644 examples-app/src/Header.vue
 create mode 100644 examples-app/src/Hidden/HiddenExample.vue
 create mode 100644 examples-app/src/Interaction/InteractionExample.vue
 create mode 100644 examples-app/src/Layouting/LayoutingExample.vue
 create mode 100644 examples-app/src/Layouting/initial-elements.ts
 create mode 100644 examples-app/src/MultiFlows/Flow.vue
 create mode 100644 examples-app/src/MultiFlows/MultiFlowsExample.vue
 create mode 100644 examples-app/src/NodeTypeChange/NodeTypeChangeExample.vue
 create mode 100644 examples-app/src/NodeTypesIdChange/NodeA.vue
 create mode 100644 examples-app/src/NodeTypesIdChange/NodeB.vue
 create mode 100644 examples-app/src/NodeTypesIdChange/NodeTypesIdChangeExample.vue
 create mode 100644 examples-app/src/Overview/Overview.vue
 create mode 100644 examples-app/src/Provider/ProviderExample.vue
 create mode 100644 examples-app/src/Provider/Sidebar.vue
 create mode 100644 examples-app/src/SaveRestore/Controls.vue
 create mode 100644 examples-app/src/SaveRestore/SaveRestoreExample.vue
 create mode 100644 examples-app/src/Sidebar.vue
 create mode 100644 examples-app/src/Stress/StressExample.vue
 create mode 100644 examples-app/src/Switch/SwitchExample.vue
 create mode 100644 examples-app/src/Unidirectional/CustomNode.vue
 create mode 100644 examples-app/src/Unidirectional/UnidirectionalExample.vue
 create mode 100644 examples-app/src/UpdatableEdge/UpdatableEdgeExample.vue
 create mode 100644 examples-app/src/UpdateNode/UpdateNodeExample.vue
 create mode 100644 examples-app/src/UpdateNodeInternals/CustomNode.vue
 create mode 100644 examples-app/src/UpdateNodeInternals/UpdateNodeInternalsExample.vue
 create mode 100644 examples-app/src/Validation/CustomInput.vue
 create mode 100644 examples-app/src/Validation/CustomNode.vue
 create mode 100644 examples-app/src/Validation/ValidationExample.vue
 create mode 100644 examples-app/src/ZoomPanHelper/ZoomPanHelperExample.vue
 create mode 100644 examples-app/src/assets/index.css
 create mode 100644 examples-app/src/assets/logo.png
 create mode 100644 examples-app/src/assets/polygon-scatter.svg
 create mode 100644 examples-app/src/auto-imports.d.ts
 create mode 100644 examples-app/src/env.d.ts
 create mode 100644 examples-app/src/main.ts
 create mode 100644 examples-app/src/router.ts
 create mode 100644 examples-app/tsconfig.json
 create mode 100644 examples-app/vite.config.ts
 create mode 100644 examples-app/yarn.lock

diff --git a/docs/pages/examples/drag-n-drop.vue b/docs/pages/examples/drag-n-drop.vue
index 2b2177a9..cd35a132 100644
--- a/docs/pages/examples/drag-n-drop.vue
+++ b/docs/pages/examples/drag-n-drop.vue
@@ -57,7 +57,7 @@ const onDrop = (event: DragEvent) => {
 }
 </script>
 <template>
-  <div class="flex flex-col md:flex-row h-full">
+  <div class="flex flex-col md:flex-row w-full h-full">
     <div class="flex-1 h-full" @drop="onDrop">
       <Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
         <Controls />
diff --git a/examples-app/.gitignore b/examples-app/.gitignore
new file mode 100644
index 00000000..d451ff16
--- /dev/null
+++ b/examples-app/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples-app/README.md b/examples-app/README.md
new file mode 100644
index 00000000..f5342b7d
--- /dev/null
+++ b/examples-app/README.md
@@ -0,0 +1,11 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
diff --git a/index.html b/examples-app/index.html
similarity index 62%
rename from index.html
rename to examples-app/index.html
index cea0eeff..f1244535 100644
--- a/index.html
+++ b/examples-app/index.html
@@ -2,11 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue Flow Examples</title>
+    <title>Vite App</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/examples/main.ts"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/examples-app/package.json b/examples-app/package.json
new file mode 100644
index 00000000..aef49ab4
--- /dev/null
+++ b/examples-app/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vue-flow-example",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@braks/vue-flow": "link:..",
+    "dagre": "^0.8.5",
+    "localforage": "^1.10.0",
+    "vue": "^3.2.16",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.46",
+    "@vitejs/plugin-vue": "^1.9.3",
+    "typescript": "^4.4.3",
+    "unplugin-auto-import": "^0.4.13",
+    "vite": "^2.6.4",
+    "vite-plugin-windicss": "^1.5.1",
+    "vue-tsc": "^0.3.0",
+    "windicss": "^3.2.1"
+  }
+}
diff --git a/examples-app/public/favicon.ico b/examples-app/public/favicon.ico
new file mode 100644
index 00000000..e69de29b
diff --git a/examples-app/src/App.vue b/examples-app/src/App.vue
new file mode 100644
index 00000000..695879a1
--- /dev/null
+++ b/examples-app/src/App.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+</script>
+<template>
+  <Header />
+  <div id="app" class="flex">
+    <Sidebar />
+    <div id="vue-flow-docs" class="flex-1">
+      <router-view />
+    </div>
+  </div>
+</template>
+<style>
+@import 'assets/index.css';
+@import '@braks/vue-flow/dist/style.css';
+
+#app {
+  height: calc(100% - 92px);
+}
+</style>
diff --git a/examples-app/src/Basic/Basic.vue b/examples-app/src/Basic/Basic.vue
new file mode 100644
index 00000000..e8b7f7ee
--- /dev/null
+++ b/examples-app/src/Basic/Basic.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  MiniMap,
+  Controls,
+  Background,
+  Connection,
+  Edge,
+  Elements,
+  FlowElement,
+  FlowInstance,
+  addEdge,
+  isNode,
+  removeElements,
+  Node,
+} from '@braks/vue-flow'
+
+const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
+const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
+const elements = ref<Elements>([
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+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))
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance?.fitView({ padding: 0.1 })
+  rfInstance.value = flowInstance
+}
+
+const updatePos = () => {
+  elements.value = elements.value.map((el: FlowElement) => {
+    if (isNode(el)) {
+      el.position = {
+        x: Math.random() * 400,
+        y: Math.random() * 400,
+      }
+    }
+    return el
+  })
+}
+
+const logToObject = () => console.log(rfInstance.value?.toObject())
+const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+
+const toggleClassnames = () => {
+  elements.value = elements.value.map((el: FlowElement) => {
+    if (isNode(el)) el.class = el.class === 'dark' ? 'light' : 'dark'
+    return el
+  })
+}
+</script>
+<template>
+  <Flow
+    class="vue-flow-basic-example"
+    :elements="elements"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @node-click="onElementClick"
+    @elementClick="onElementClick"
+    @load="onLoad"
+  >
+    <MiniMap />
+    <Controls />
+    <Background color="#aaa" :gap="8" />
+    <div class="absolute right-[10px] top-[10px] z-4">
+      <button class="button" @click="resetTransform">reset transform</button>
+      <button class="button" @click="updatePos">change pos</button>
+      <button class="button" @click="toggleClassnames">toggle classnames</button>
+      <button class="button" @click="logToObject">toObject</button>
+    </div>
+  </Flow>
+</template>
+<style>
+.vue-flow--node .light {
+  @apply bg-white;
+}
+
+.vue-flow--node .dark {
+  @apply bg-black;
+}
+</style>
diff --git a/examples-app/src/CustomConnectionLine/ConnectionLine.vue b/examples-app/src/CustomConnectionLine/ConnectionLine.vue
new file mode 100644
index 00000000..aa31b651
--- /dev/null
+++ b/examples-app/src/CustomConnectionLine/ConnectionLine.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ConnectionLineComponentProps } from '@braks/vue-flow'
+
+interface ConnectionLineProps extends ConnectionLineComponentProps {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+const props = defineProps<ConnectionLineProps>()
+</script>
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="#222"
+      :stroke-width="1.5"
+      :d="`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
+    />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>
diff --git a/examples-app/src/CustomConnectionLine/CustomConnectionLine.vue b/examples-app/src/CustomConnectionLine/CustomConnectionLine.vue
new file mode 100644
index 00000000..b934056a
--- /dev/null
+++ b/examples-app/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
+import CustomConnectionLine from './CustomConnectionLine.vue'
+
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+])
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+<template>
+  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+    <template #custom-connection-line="props">
+      <CustomConnectionLine v-bind="props" />
+    </template>
+    <Background :variant="BackgroundVariant.Lines" />
+  </Flow>
+</template>
diff --git a/examples-app/src/CustomNode/ColorPickerNode.vue b/examples-app/src/CustomNode/ColorPickerNode.vue
new file mode 100644
index 00000000..5a8715b6
--- /dev/null
+++ b/examples-app/src/CustomNode/ColorPickerNode.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
+
+interface ColorSelectorNodeProps extends NodeProps {
+  data: {
+    color: string
+    onChange: (event: any) => void
+  }
+  type: string
+  selected?: boolean
+  connectable?: boolean
+  xPos?: number
+  yPos?: number
+  targetPosition?: Position
+  sourcePosition?: Position
+  dragging?: boolean
+}
+const props = defineProps<ColorSelectorNodeProps>()
+
+const targetHandleStyle: CSSProperties = { background: '#555' }
+const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' }
+const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
+</script>
+<template>
+  <div class="py-1 px-1 flex flex-col gap-1 justify-center items-center">
+    <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
+    <div class="text-md font-bold">Custom Color Picker Node</div>
+    <div :style="{ color: data.color }" class="text-md font-semibold">
+      {{ data.color }}
+    </div>
+    <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
+    <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+    <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+  </div>
+</template>
diff --git a/examples-app/src/CustomNode/CustomNode.vue b/examples-app/src/CustomNode/CustomNode.vue
new file mode 100644
index 00000000..34e04d81
--- /dev/null
+++ b/examples-app/src/CustomNode/CustomNode.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  isEdge,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Node,
+  FlowElement,
+  FlowInstance,
+  Elements,
+  Position,
+  SnapGrid,
+  Connection,
+  ConnectionMode,
+  Edge,
+} from '@braks/vue-flow'
+import ColorPickerNode from './ColorPickerNode.vue'
+
+const elements = ref<Elements>([])
+const bgColor = ref('#1A192B')
+const connectionLineStyle = { stroke: '#fff' }
+const snapGrid: SnapGrid = [16, 16]
+const nodeTypes = {
+  selectorNode: ColorPickerNode,
+}
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView()
+  console.log('flow loaded:', flowInstance)
+}
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+const nodeStroke = (n: Node): string => {
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'selectorNode') return bgColor.value
+  if (n.type === 'output') return '#ff0072'
+  return '#eee'
+}
+const nodeColor = (n: Node): string => {
+  if (n.type === 'selectorNode') return bgColor.value
+  return '#fff'
+}
+
+onMounted(() => {
+  const onChange = (event: Event) => {
+    elements.value = elements.value.map((e: FlowElement) => {
+      if (isEdge(e) || e.id !== '2') {
+        return e
+      }
+      const color = (event.target as HTMLInputElement).value
+      bgColor.value = color
+
+      return {
+        ...e,
+        data: {
+          ...e.data,
+          color,
+        },
+      }
+    })
+  }
+
+  elements.value = [
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'An input node' },
+      position: { x: 0, y: 50 },
+      sourcePosition: Position.Right,
+    },
+    {
+      id: '2',
+      type: 'selectorNode',
+      data: { onChange, color: bgColor.value },
+      style: { border: '1px solid #777', padding: '10px' },
+      position: { x: 250, y: 50 },
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output A' },
+      position: { x: 650, y: 25 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: '4',
+      type: 'output',
+      data: { label: 'Output B' },
+      position: { x: 650, y: 100 },
+      targetPosition: Position.Left,
+    },
+
+    { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
+    { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
+    { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
+  ]
+})
+
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+
+const onConnect = (params: Connection | Edge) =>
+  (elements.value = addEdge(
+    {
+      ...params,
+      animated: true,
+      style: { stroke: '#fff' },
+    } as Edge,
+    elements.value,
+  ))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :style="`background: ${bgColor}`"
+    :node-types="nodeTypes"
+    :connection-mode="ConnectionMode.Loose"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    :default-zoom="1.5"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @load="onLoad"
+  >
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+    <Controls />
+  </Flow>
+</template>
diff --git a/examples-app/src/DragNDrop/DnD.vue b/examples-app/src/DragNDrop/DnD.vue
new file mode 100644
index 00000000..69ea01ba
--- /dev/null
+++ b/examples-app/src/DragNDrop/DnD.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  addEdge,
+  removeElements,
+  Controls,
+  MiniMap,
+  Background,
+  FlowInstance,
+  Elements,
+  Connection,
+  Edge,
+  ElementId,
+} from '@braks/vue-flow'
+import Sidebar from './Sidebar.vue'
+
+const flowInstance = ref<FlowInstance>()
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input node' },
+    position: { x: 250, y: 5 },
+  },
+])
+
+let id = 0
+const getId = (): ElementId => `dndnode_${id++}`
+
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
+
+const onDrop = (event: DragEvent) => {
+  event.preventDefault()
+
+  if (flowInstance.value) {
+    console.log(event.dataTransfer?.getData('application/vueflow'))
+    const type = event.dataTransfer?.getData('application/vueflow')
+    const position = flowInstance.value.project({ x: event.clientX - 400, y: event.clientY - 40 })
+    const newNode = {
+      id: getId(),
+      type,
+      position,
+      data: { label: `${type} node` },
+    }
+
+    elements.value.push(newNode)
+  }
+}
+</script>
+<template>
+  <div class="flex flex-col md:flex-row h-full">
+    <div class="flex-1 h-full" @drop="onDrop">
+      <Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
+        <Controls />
+        <MiniMap />
+        <Background color="#aaa" :gap="8" />
+      </Flow>
+    </div>
+    <Sidebar />
+  </div>
+</template>
diff --git a/examples-app/src/DragNDrop/Sidebar.vue b/examples-app/src/DragNDrop/Sidebar.vue
new file mode 100644
index 00000000..b18d329b
--- /dev/null
+++ b/examples-app/src/DragNDrop/Sidebar.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/vueflow', nodeType)
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+</script>
+<template>
+  <aside class="md:(w-[30%] max-w-[200px])">
+    <div class="mb-6">You can drag these nodes to the pane on the left.</div>
+    <div
+      class="droppable-node vue-flow__node-input"
+      :draggable="true"
+      @dragstart="(event: DragEvent) => onDragStart(event, 'input')"
+    >
+      Input Node
+    </div>
+    <div
+      class="droppable-node vue-flow__node-default"
+      :draggable="true"
+      @dragstart="(event: DragEvent) => onDragStart(event, 'default')"
+    >
+      Default Node
+    </div>
+    <div
+      class="droppable-node vue-flow__node-output"
+      :draggable="true"
+      @dragstart="(event: DragEvent) => onDragStart(event, 'output')"
+    >
+      Output Node
+    </div>
+  </aside>
+</template>
+<style scoped>
+aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.droppable-node {
+  @apply mb-6;
+  cursor: grab;
+}
+</style>
diff --git a/examples-app/src/EdgeTypes/EdgeTypesExample.vue b/examples-app/src/EdgeTypes/EdgeTypesExample.vue
new file mode 100644
index 00000000..56e847c9
--- /dev/null
+++ b/examples-app/src/EdgeTypes/EdgeTypesExample.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  FlowInstance,
+  Connection,
+  Edge,
+  Elements,
+} from '@braks/vue-flow'
+import { getElements } from './utils'
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView()
+  console.log(flowInstance.getElements())
+}
+
+const elements = ref<Elements>(getElements())
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+<template>
+  <Flow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
+    <MiniMap />
+    <Controls />
+  </Flow>
+</template>
diff --git a/examples-app/src/EdgeTypes/utils.ts b/examples-app/src/EdgeTypes/utils.ts
new file mode 100644
index 00000000..d570fc4b
--- /dev/null
+++ b/examples-app/src/EdgeTypes/utils.ts
@@ -0,0 +1,106 @@
+import { ElementId, Elements, Position } from '@braks/vue-flow'
+
+const nodeWidth = 80
+const nodeGapWidth = nodeWidth * 2
+const nodeStyle = { width: `${nodeWidth}px`, fontSize: '11px', color: 'white' }
+
+const sourceTargetPositions = [
+  { source: Position.Bottom, target: Position.Top },
+  { source: Position.Right, target: Position.Left },
+]
+const nodeColors = [
+  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8'],
+]
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight']
+const offsets = [
+  {
+    x: 0,
+    y: -nodeGapWidth,
+  },
+  {
+    x: nodeGapWidth,
+    y: -nodeGapWidth,
+  },
+  {
+    x: nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: 0,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: -nodeGapWidth,
+    y: -nodeGapWidth,
+  },
+]
+
+let id = 0
+const getNodeId = (): ElementId => (id++).toString()
+
+export function getElements(): Elements {
+  const initialElements = []
+
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
+    const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex]
+
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
+      const currEdgeType = edgeTypes[edgeTypeIndex]
+
+      for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+        const currOffset = offsets[offsetIndex]
+
+        const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] }
+        const sourcePosition = {
+          x: offsetIndex * nodeWidth * 4,
+          y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300,
+        }
+        const sourceId = getNodeId()
+        const sourceData = { label: `Source ${sourceId}` }
+        const sourceNode = {
+          id: sourceId,
+          style,
+          data: sourceData,
+          position: sourcePosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target,
+        }
+
+        const targetId = getNodeId()
+        const targetData = { label: `Target ${targetId}` }
+        const targetPosition = {
+          x: sourcePosition.x + currOffset.x,
+          y: sourcePosition.y + currOffset.y,
+        }
+        const targetNode = {
+          id: targetId,
+          style,
+          data: targetData,
+          position: targetPosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target,
+        }
+
+        initialElements.push(sourceNode)
+        initialElements.push(targetNode)
+
+        initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType })
+      }
+    }
+  }
+
+  return initialElements
+}
diff --git a/examples-app/src/EdgeWithButton/ButtonEdge.vue b/examples-app/src/EdgeWithButton/ButtonEdge.vue
new file mode 100644
index 00000000..39be5af2
--- /dev/null
+++ b/examples-app/src/EdgeWithButton/ButtonEdge.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import {
+  useHooks,
+  useStore,
+  getEdgeCenter,
+  getBezierPath,
+  getMarkerEnd,
+  ArrowHeadType,
+  EdgeProps,
+  ElementId,
+  Position,
+} from '@braks/vue-flow'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  id: ElementId
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  arrowHeadType?: ArrowHeadType
+  markerEndId?: string
+  data?: T
+}
+
+const props = defineProps<CustomEdgeProps>()
+const store = useStore()
+const hooks = useHooks()
+const onEdgeClick = (evt: Event, id: string) => {
+  const edge = store.edges.find((edge) => edge.id === id)
+  if (edge) {
+    hooks.elementsRemove.trigger([edge])
+  }
+  evt.stopPropagation()
+  alert(`remove ${id}`)
+}
+
+const foreignObjectSize = 40
+
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
+</script>
+<template>
+  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <foreignObject
+    :width="foreignObjectSize"
+    :height="foreignObjectSize"
+    :x="center[0] - foreignObjectSize / 2"
+    :y="center[1] - foreignObjectSize / 2"
+    class="edgebutton-foreignobject"
+    requiredExtensions="http://www.w3.org/1999/xhtml"
+  >
+    <body class="p-1">
+      <button class="edgebutton bg-gray-500 p-[4px] h-full w-full" @click="(event) => onEdgeClick(event, props.id)">×</button>
+    </body>
+  </foreignObject>
+</template>
+<style scoped>
+body {
+  background: unset;
+}
+</style>
diff --git a/examples-app/src/EdgeWithButton/EdgeWithButton.vue b/examples-app/src/EdgeWithButton/EdgeWithButton.vue
new file mode 100644
index 00000000..ebbcdfff
--- /dev/null
+++ b/examples-app/src/EdgeWithButton/EdgeWithButton.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  addEdge,
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  EdgeType,
+  Elements,
+  MiniMap,
+  FlowInstance,
+  removeElements,
+} from '@braks/vue-flow'
+import ButtonEdge from './ButtonEdge.vue'
+const edgeTypes = {
+  buttonedge: ButtonEdge as EdgeType,
+}
+
+const elements = ref<Elements>([
+  {
+    id: 'ewb-1',
+    type: 'input',
+    data: { label: 'Input 1' },
+    position: { x: 250, y: 0 },
+  },
+  { id: 'ewb-2', data: { label: 'Node 2' }, position: { x: 250, y: 300 } },
+  {
+    id: 'edge-1-2',
+    source: 'ewb-1',
+    target: 'ewb-2',
+    type: 'buttonedge',
+  },
+])
+
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) =>
+  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value))
+</script>
+<template>
+  <Flow
+    key="edge-with-button"
+    :elements="elements"
+    :snap-to-grid="true"
+    :edge-types="edgeTypes"
+    @load="onLoad"
+    @elementsRemove="onElementsRemove"
+    @connect="onConnect"
+  >
+    <MiniMap />
+    <Controls />
+    <Background />
+  </Flow>
+</template>
diff --git a/examples-app/src/Edges/CustomEdge.vue b/examples-app/src/Edges/CustomEdge.vue
new file mode 100644
index 00000000..41bd6a7a
--- /dev/null
+++ b/examples-app/src/Edges/CustomEdge.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ArrowHeadType, ElementId, getBezierPath, getMarkerEnd, Position, EdgeProps } from '@braks/vue-flow'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  source: ElementId
+  target: ElementId
+  sourceHandleId?: ElementId
+  targetHandleId?: ElementId
+  id: ElementId
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  arrowHeadType?: ArrowHeadType
+  markerEndId?: string
+  data?: T
+}
+
+const props = defineProps<CustomEdgeProps>()
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+</script>
+<template>
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <text>
+    <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
+      {{ props.data.text }}
+    </textPath>
+  </text>
+</template>
diff --git a/examples-app/src/Edges/CustomEdge2.vue b/examples-app/src/Edges/CustomEdge2.vue
new file mode 100644
index 00000000..c6237e76
--- /dev/null
+++ b/examples-app/src/Edges/CustomEdge2.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import {
+  getBezierPath,
+  getMarkerEnd,
+  ArrowHeadType,
+  EdgeProps,
+  ElementId,
+  getEdgeCenter,
+  Position,
+  EdgeText,
+} from '@braks/vue-flow'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  source: ElementId
+  target: ElementId
+  sourceHandleId?: ElementId
+  targetHandleId?: ElementId
+  id: ElementId
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  arrowHeadType?: ArrowHeadType
+  markerEndId?: string
+  data?: T
+}
+
+const props = defineProps<CustomEdgeProps>()
+
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
+</script>
+<template>
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <EdgeText
+    :x="center[0]"
+    :y="center[1]"
+    :label="props.data?.text"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: 'red' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+    @click="() => console.log(props.data)"
+  />
+</template>
diff --git a/examples-app/src/Edges/CustomLabel.vue b/examples-app/src/Edges/CustomLabel.vue
new file mode 100644
index 00000000..67073d7d
--- /dev/null
+++ b/examples-app/src/Edges/CustomLabel.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+interface CustomLabelProps {
+  text: string
+}
+
+const props = defineProps<CustomLabelProps>()
+</script>
+<template>
+  <tspan dy="10" x="0">{{ props.text }}</tspan>
+</template>
diff --git a/examples-app/src/Edges/EdgesExample.vue b/examples-app/src/Edges/EdgesExample.vue
new file mode 100644
index 00000000..9aa255af
--- /dev/null
+++ b/examples-app/src/Edges/EdgesExample.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  MiniMap,
+  Controls,
+  Background,
+  Elements,
+  FlowInstance,
+  FlowElement,
+  removeElements,
+  Connection,
+  Edge,
+  addEdge,
+  ArrowHeadType,
+} from '@braks/vue-flow'
+import CustomEdge from './CustomEdge.vue'
+import CustomEdge2 from './CustomEdge2.vue'
+import CustomLabel from './CustomLabel.vue'
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
+  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
+  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
+  { id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
+  { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
+  { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
+  { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
+  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
+  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
+  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: {
+      component: CustomLabel,
+      props: {
+        text: 'custom label text',
+      },
+    },
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    arrowHeadType: ArrowHeadType.ArrowClosed,
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+    arrowHeadType: ArrowHeadType.ArrowClosed,
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
+]
+
+const edgeTypes: Record<string, any> = {
+  custom: CustomEdge,
+  custom2: CustomEdge2,
+}
+
+const elements = ref<Elements>(initialElements)
+
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onNodeDragStop = (node: Node) => console.log('drag stop', node)
+const onElementClick = (element: FlowElement) => console.log('click', element)
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :snap-to-grid="true"
+    :edge-types="edgeTypes"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @load="onLoad"
+  >
+    <MiniMap />
+    <Controls />
+    <Background />
+  </Flow>
+</template>
diff --git a/examples-app/src/Empty/EmptyExample.vue b/examples-app/src/Empty/EmptyExample.vue
new file mode 100644
index 00000000..0259a4c0
--- /dev/null
+++ b/examples-app/src/Empty/EmptyExample.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import {
+  Flow,
+  MiniMap,
+  Controls,
+  Background,
+  BackgroundVariant,
+  Connection,
+  Edge,
+  ElementId,
+  Elements,
+  FlowElement,
+  Node,
+  FlowInstance,
+  addEdge,
+  removeElements,
+} from '@braks/vue-flow'
+
+const elements = ref<Elements>([])
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
+const onElementClick = (element: FlowElement) => console.log('click', element)
+const onNodeDragStop = (node: Node) => console.log('drag stop', node)
+
+const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
+const addRandomNode = () => {
+  const nodeId: ElementId = (elements.value.length + 1).toString()
+  const newNode: Node = {
+    id: nodeId,
+    data: { label: `Node: ${nodeId}` },
+    position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
+  } as Node
+  elements.value = [...elements.value, newNode]
+}
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    @load="onLoad"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="(p) => onConnect(p)"
+    @node-drag-stop="onNodeDragStop"
+  >
+    <MiniMap />
+    <Controls />
+    <Background :variant="BackgroundVariant.Lines" />
+
+    <button class="button" type="button" :style="buttonStyle" @click="addRandomNode">add node</button>
+  </Flow>
+</template>
diff --git a/examples-app/src/Header.vue b/examples-app/src/Header.vue
new file mode 100644
index 00000000..1ff95673
--- /dev/null
+++ b/examples-app/src/Header.vue
@@ -0,0 +1,16 @@
+<template>
+  <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"
+        >An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
+        Based on <a href="https://reactflow.dev">React Flow</a>
+      </span>
+    </div>
+    <div class="flex-1">Docs</div>
+    <div class="flex-1">
+      <router-link to="/examples"> Examples </router-link>
+    </div>
+    <div class="flex-1"><a href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
+  </header>
+</template>
diff --git a/examples-app/src/Hidden/HiddenExample.vue b/examples-app/src/Hidden/HiddenExample.vue
new file mode 100644
index 00000000..51e08dfe
--- /dev/null
+++ b/examples-app/src/Hidden/HiddenExample.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+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 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4' },
+]
+
+const elements = ref<Elements>(initialElements)
+const isHidden = ref<boolean>(false)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+watchEffect(() => {
+  elements.value = elements.value.map((e) => {
+    e.isHidden = isHidden.value
+    return e
+  })
+})
+</script>
+<template>
+  <Flow :elements="elements" @connect="onConnect">
+    <MiniMap />
+    <Controls />
+
+    <div :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }">
+      <div>
+        <label for="ishidden">
+          isHidden
+          <input id="ishidden" v-model="isHidden" type="checkbox" class="vue-flow__ishidden" />
+        </label>
+      </div>
+    </div>
+  </Flow>
+</template>
diff --git a/examples-app/src/Interaction/InteractionExample.vue b/examples-app/src/Interaction/InteractionExample.vue
new file mode 100644
index 00000000..a68498dd
--- /dev/null
+++ b/examples-app/src/Interaction/InteractionExample.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  addEdge,
+  MiniMap,
+  Controls,
+  Elements,
+  Node,
+  FlowElement,
+  Connection,
+  Edge,
+  PanOnScrollMode,
+  FlowTransform,
+} from '@braks/vue-flow'
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+]
+
+const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node)
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event)
+const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event)
+const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event)
+const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform)
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+const isSelectable = ref(false)
+const isDraggable = ref(false)
+const isConnectable = ref(false)
+const zoomOnScroll = ref(false)
+const zoomOnPinch = ref(false)
+const panOnScroll = ref(false)
+const panOnScrollMode = ref<PanOnScrollMode>(PanOnScrollMode.Free)
+const zoomOnDoubleClick = ref(false)
+const paneMoveable = ref(true)
+const captureZoomClick = ref(false)
+const captureZoomScroll = ref(false)
+const captureElementClick = ref(false)
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :elements-selectable="isSelectable"
+    :nodes-connectable="isConnectable"
+    :nodes-draggable="isDraggable"
+    :zoom-on-scroll="zoomOnScroll"
+    :zoom-on-pinch="zoomOnPinch"
+    :pan-on-scroll="panOnScroll"
+    :pan-on-scroll-mode="panOnScrollMode"
+    :zoom-on-double-click="zoomOnDoubleClick"
+    :pane-moveable="paneMoveable"
+    @connect="onConnect"
+    @element-click="captureElementClick ? onElementClick : undefined"
+    @node-drag-start="onNodeDragStart"
+    @node-drag-stop="onNodeDragStop"
+    @pane-click="captureZoomClick ? onPaneClick : undefined"
+    @pane-scroll="captureZoomScroll ? onPaneScroll : undefined"
+    @pane-context-menu="captureZoomClick ? onPaneContextMenu : undefined"
+    @move-end="onMoveEnd"
+  >
+    <MiniMap />
+    <Controls />
+
+    <div :style="{ position: 'absolute', left: 10, top: 10, zIndex: 4 }">
+      <div>
+        <label for="draggable">
+          nodesDraggable
+          <input id="draggable" v-model="isDraggable" type="checkbox" class="vue-flow__draggable" />
+        </label>
+      </div>
+      <div>
+        <label for="connectable">
+          nodesConnectable
+          <input id="connectable" v-model="isConnectable" type="checkbox" class="vue-flow__connectable" />
+        </label>
+      </div>
+      <div>
+        <label for="selectable">
+          elementsSelectable
+          <input id="selectable" v-model="isSelectable" type="checkbox" class="vue-flow__selectable" />
+        </label>
+      </div>
+      <div>
+        <label for="zoomonscroll">
+          zoomOnScroll
+          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
+        </label>
+      </div>
+      <div>
+        <label for="zoomonpinch">
+          zoomOnPinch
+          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
+        </label>
+      </div>
+      <div>
+        <label for="panonscroll">
+          panOnScroll
+          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
+        </label>
+      </div>
+      <div>
+        <label>
+          panOnScrollMode
+          <select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
+            <option value="free">free</option>
+            <option value="horizontal">horizontal</option>
+            <option value="vertical">vertical</option>
+          </select>
+        </label>
+      </div>
+      <div>
+        <label for="zoomondbl">
+          zoomOnDoubleClick
+          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
+        </label>
+      </div>
+      <div>
+        <label for="panemoveable">
+          paneMoveable
+          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="vue-flow__panemoveable" />
+        </label>
+      </div>
+      <div>
+        <label for="capturezoompaneclick">
+          capture onPaneClick
+          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
+        </label>
+      </div>
+      <div>
+        <label for="capturezoompanescroll">
+          capture onPaneScroll
+          <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
+        </label>
+      </div>
+      <div>
+        <label for="captureelementclick">
+          capture onElementClick
+          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="vue-flow__captureelementclick" />
+        </label>
+      </div>
+    </div>
+  </Flow>
+</template>
diff --git a/examples-app/src/Layouting/LayoutingExample.vue b/examples-app/src/Layouting/LayoutingExample.vue
new file mode 100644
index 00000000..1f2b24a8
--- /dev/null
+++ b/examples-app/src/Layouting/LayoutingExample.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import dagre from 'dagre'
+import {
+  Flow,
+  Controls,
+  addEdge,
+  ConnectionMode,
+  Connection,
+  Edge,
+  Elements,
+  isNode,
+  NodeExtent,
+  Position,
+  removeElements,
+} from '@braks/vue-flow'
+import initialElements from './initial-elements'
+
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+const nodeExtent: NodeExtent = [
+  [0, 0],
+  [1000, 1000],
+]
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+
+// todo changing elements not properly updating flowchart...
+const onLayout = (direction: string) => {
+  const isHorizontal = direction === 'LR'
+  dagreGraph.setGraph({ rankdir: direction })
+
+  elements.value.forEach((el) => {
+    if (isNode(el)) {
+      dagreGraph.setNode(el.id, { width: 150, height: 50 })
+    } else {
+      dagreGraph.setEdge(el.source, el.target)
+    }
+  })
+
+  dagre.layout(dagreGraph)
+
+  elements.value = elements.value.map((el) => {
+    if (isNode(el)) {
+      const nodeWithPosition = dagreGraph.node(el.id)
+      el.targetPosition = isHorizontal ? Position.Left : Position.Top
+      el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
+      el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
+    }
+
+    return el
+  })
+  console.log(elements.value)
+}
+</script>
+<template>
+  <div class="layoutflow">
+    <Flow
+      :elements="elements"
+      :node-extent="nodeExtent"
+      :connection-mode="ConnectionMode.Loose"
+      @connect="onConnect"
+      @clements-remove="onElementsRemove"
+      @load="() => onLayout('TB')"
+    >
+      <Controls />
+    </Flow>
+    <div class="controls">
+      <button class="button" :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
+      <button class="button" @click="() => onLayout('LR')">horizontal layout</button>
+    </div>
+  </div>
+</template>
+<style>
+.layoutflow {
+  flex-grow: 1;
+  position: relative;
+}
+
+.layoutflow .controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 10;
+}
+
+.controls button {
+  margin-left: 10px;
+}
+</style>
diff --git a/examples-app/src/Layouting/initial-elements.ts b/examples-app/src/Layouting/initial-elements.ts
new file mode 100644
index 00000000..35280ada
--- /dev/null
+++ b/examples-app/src/Layouting/initial-elements.ts
@@ -0,0 +1,71 @@
+import { Elements, XYPosition } from '@braks/vue-flow'
+
+const position: XYPosition = { x: 0, y: 0 }
+
+const elements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input' },
+    position,
+  },
+  {
+    id: '2',
+    data: { label: 'node 2' },
+    position,
+  },
+  {
+    id: '2a',
+    data: { label: 'node 2a' },
+    position,
+  },
+  {
+    id: '2b',
+    data: { label: 'node 2b' },
+    position,
+  },
+  {
+    id: '2c',
+    data: { label: 'node 2c' },
+    position,
+  },
+  {
+    id: '2d',
+    data: { label: 'node 2d' },
+    position,
+  },
+  {
+    id: '3',
+    data: { label: 'node 3' },
+    position,
+  },
+  {
+    id: '4',
+    data: { label: 'node 4' },
+    position,
+  },
+  {
+    id: '5',
+    data: { label: 'node 5' },
+    position,
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'output' },
+    position,
+  },
+  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
+  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
+  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
+  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
+  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
+  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
+  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
+
+  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
+  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
+  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
+]
+
+export default elements
diff --git a/examples-app/src/MultiFlows/Flow.vue b/examples-app/src/MultiFlows/Flow.vue
new file mode 100644
index 00000000..8e856d6d
--- /dev/null
+++ b/examples-app/src/MultiFlows/Flow.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+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' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+]
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+    <Background />
+  </Flow>
+</template>
diff --git a/examples-app/src/MultiFlows/MultiFlowsExample.vue b/examples-app/src/MultiFlows/MultiFlowsExample.vue
new file mode 100644
index 00000000..f6c05e29
--- /dev/null
+++ b/examples-app/src/MultiFlows/MultiFlowsExample.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import Flow from './Flow.vue'
+</script>
+<template>
+  <div class="vue-flow__example-multiflows flex-1">
+    <Flow />
+    <Flow />
+  </div>
+</template>
+<style>
+.vue-flow__example-multiflows {
+  display: flex;
+  height: 100%;
+}
+
+.vue-flow__example-multiflows .vue-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.vue-flow__example-multiflows .vue-flow:first-child {
+  border-right: 2px solid #333;
+}
+</style>
diff --git a/examples-app/src/NodeTypeChange/NodeTypeChangeExample.vue b/examples-app/src/NodeTypeChange/NodeTypeChangeExample.vue
new file mode 100644
index 00000000..2f3ab6af
--- /dev/null
+++ b/examples-app/src/NodeTypeChange/NodeTypeChangeExample.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    sourcePosition: Position.Right,
+    type: 'input',
+    data: { label: 'Input' },
+    position: { x: 0, y: 80 },
+  },
+  {
+    id: '2',
+    type: 'output',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    data: { label: 'A Node' },
+    position: { x: 250, y: 0 },
+  },
+  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
+]
+
+const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
+
+const elements = ref<Elements>(initialElements)
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+
+const changeType = () => {
+  elements.value = elements.value.map((el) => {
+    if (isEdge(el) || el.type === 'input') return el
+
+    return {
+      ...el,
+      type: el.type === 'default' ? 'output' : 'default',
+    }
+  })
+}
+</script>
+<template>
+  <Flow :elements="elements" @connect="onConnect" @load="onLoad">
+    <button class="button mt-2" :style="buttonStyle" @click="changeType">change type</button>
+  </Flow>
+</template>
diff --git a/examples-app/src/NodeTypesIdChange/NodeA.vue b/examples-app/src/NodeTypesIdChange/NodeA.vue
new file mode 100644
index 00000000..91b50d6a
--- /dev/null
+++ b/examples-app/src/NodeTypesIdChange/NodeA.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { NodeProps } from '@braks/vue-flow'
+
+interface NodeAProps extends NodeProps {
+  nodeStyles: Record<string, any>
+}
+const props = defineProps<NodeAProps>()
+</script>
+<template>
+  <div :style="props.nodeStyles">A</div>
+</template>
diff --git a/examples-app/src/NodeTypesIdChange/NodeB.vue b/examples-app/src/NodeTypesIdChange/NodeB.vue
new file mode 100644
index 00000000..1ab16e18
--- /dev/null
+++ b/examples-app/src/NodeTypesIdChange/NodeB.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { NodeProps } from '@braks/vue-flow'
+
+interface NodeBPro extends NodeProps {
+  nodeStyles: Record<string, any>
+}
+const props = defineProps<NodeBPro>()
+</script>
+<template>
+  <div :style="props.nodeStyles">B</div>
+</template>
diff --git a/examples-app/src/NodeTypesIdChange/NodeTypesIdChangeExample.vue b/examples-app/src/NodeTypesIdChange/NodeTypesIdChangeExample.vue
new file mode 100644
index 00000000..add3ca9a
--- /dev/null
+++ b/examples-app/src/NodeTypesIdChange/NodeTypesIdChangeExample.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
+import NodeA from './NodeA.vue'
+import NodeB from './NodeB.vue'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    sourcePosition: Position.Right,
+    type: 'input',
+    data: { label: 'Input' },
+    position: { x: 0, y: 80 },
+  },
+  {
+    id: '2',
+    type: 'a',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    data: { label: 'A Node' },
+    position: { x: 250, y: 0 },
+  },
+]
+
+const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
+
+const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
+type NodeTypesObject = {
+  [key: string]: Record<string, NodeType>
+}
+
+const nodeTypesObjects: NodeTypesObject = {
+  a: {
+    a: NodeA as NodeType,
+  },
+  b: {
+    b: NodeB as NodeType,
+  },
+}
+
+const elements = ref(initialElements)
+const nodeTypesId = ref('a')
+const changeType = () => {
+  const id = nodeTypesId.value === 'a' ? 'b' : 'a'
+  elements.value[1].type = id
+  nodeTypesId.value = id
+}
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+<template>
+  <Flow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
+    <template #node-a>
+      <NodeA :node-styles="nodeStyles" />
+    </template>
+    <template #node-b>
+      <NodeB :node-styles="nodeStyles" />
+    </template>
+    <button class="button mt-2" :style="buttonStyle" @click="changeType">change type</button>
+  </Flow>
+</template>
diff --git a/examples-app/src/Overview/Overview.vue b/examples-app/src/Overview/Overview.vue
new file mode 100644
index 00000000..756ceed2
--- /dev/null
+++ b/examples-app/src/Overview/Overview.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import {
+  Flow,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  isNode,
+  Node,
+  Elements,
+  FlowElement,
+  FlowInstance,
+  FlowTransform,
+  SnapGrid,
+  ArrowHeadType,
+  Connection,
+  Edge,
+} from '@braks/vue-flow'
+
+const onNodeDragStart = (node: Node) => console.log('drag start', node)
+const onNodeDrag = (node: Node) => console.log('drag', node)
+const onNodeDragStop = (node: Node) => console.log('drag stop', node)
+const onNodeDoubleClick = (node: Node) => console.log('node double click', node)
+const onPaneClick = (event: MouseEvent) => console.log('pane click', event)
+const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event)
+const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event)
+const onSelectionDrag = (nodes: Node[]) => console.log('selection drag', nodes)
+const onSelectionDragStart = (nodes: Node[]) => console.log('selection drag start', nodes)
+const onSelectionDragStop = (nodes: Node[]) => console.log('selection drag stop', nodes)
+const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
+  event.preventDefault()
+  console.log('selection context menu', nodes)
+}
+const onElementClick = (element: FlowElement) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
+const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements)
+const onLoad = (flowInstance: FlowInstance) => {
+  console.log('flow loaded:', flowInstance)
+  flowInstance.fitView()
+}
+
+const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
+const onEdgeContextMenu = (edge: Edge) => console.log('edge context menu', edge)
+const onEdgeMouseEnter = (edge: Edge) => console.log('edge mouse enter', edge)
+const onEdgeMouseMove = (edge: Edge) => console.log('edge mouse move', edge)
+const onEdgeMouseLeave = (edge: Edge) => console.log('edge mouse leave', edge)
+const onEdgeDoubleClick = (edge: Edge) => console.log('edge double click', edge)
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'Welcome to <strong>Vue Flow!</strong>',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'This is a <strong>default node</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'This one has a <strong>custom style</strong>',
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: `You can find the docs on
+          <a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
+            Github
+          </a>`,
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: 'Or check out the other <strong>examples</strong>',
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: 'An <strong>output node</strong>',
+    },
+    position: { x: 100, y: 480 },
+  },
+  { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
+  { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
+  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+]
+
+const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
+const snapGrid: SnapGrid = [16, 16]
+
+const nodeStrokeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'output') return '#ff0072'
+  if (n.type === 'default') return '#1a192b'
+
+  return '#eee'
+}
+
+const nodeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+
+  return '#fff'
+}
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @eonnect="onConnect"
+    @pane-click="onPaneClick"
+    @pane-scroll="onPaneScroll"
+    @pane-contex-menu="onPaneContextMenu"
+    @node-drag-start="onNodeDragStart"
+    @node-drag="onNodeDrag"
+    @node-drag-stop="onNodeDragStop"
+    @node-double-click="onNodeDoubleClick"
+    @selection-drag-start="onSelectionDragStart"
+    @selection-drag="onSelectionDrag"
+    @selection-drag-stop="onSelectionDragStop"
+    @selection-context-menu="onSelectionContextMenu"
+    @selection-change="onSelectionChange"
+    @move-end="onMoveEnd"
+    @load="onLoad"
+    @edge-context-menu="onEdgeContextMenu"
+    @edge-mouse-enter="onEdgeMouseEnter"
+    @edge-mouse-move="onEdgeMouseMove"
+    @edge-mouse-leave="onEdgeMouseLeave"
+    @edge-double-click="onEdgeDoubleClick"
+  >
+    <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
+    <Controls />
+    <Background color="#aaa" gap="20" />
+  </Flow>
+</template>
diff --git a/examples-app/src/Provider/ProviderExample.vue b/examples-app/src/Provider/ProviderExample.vue
new file mode 100644
index 00000000..25db4ed4
--- /dev/null
+++ b/examples-app/src/Provider/ProviderExample.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  addEdge,
+  removeElements,
+  Controls,
+  FlowInstance,
+  FlowElement,
+  Connection,
+  Edge,
+  Elements,
+  ConnectionMode,
+  useStore,
+} from '@braks/vue-flow'
+import Sidebar from './Sidebar.vue'
+
+const onElementClick = (element: FlowElement) => console.log('click', element)
+const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+]
+
+useStore()
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <div class="providerflow">
+    <Sidebar />
+    <div class="vue-flow-wrapper">
+      <Flow
+        :elements="elements"
+        :connection-mode="ConnectionMode.Loose"
+        @element-click="onElementClick"
+        @connect="onConnect"
+        @elements-remove="onElementsRemove"
+        @load="onLoad"
+      >
+        <Controls />
+      </Flow>
+    </div>
+  </div>
+</template>
+<style>
+.providerflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.providerflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.providerflow aside .description {
+  margin-bottom: 10px;
+}
+
+.providerflow aside .title {
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.providerflow aside .transform {
+  margin-bottom: 20px;
+}
+
+.providerflow .vue-flow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+.providerflow .selectall {
+  margin-top: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .providerflow {
+    flex-direction: row;
+  }
+
+  .providerflow aside {
+    max-width: 250px;
+  }
+}
+</style>
diff --git a/examples-app/src/Provider/Sidebar.vue b/examples-app/src/Provider/Sidebar.vue
new file mode 100644
index 00000000..1c2a5474
--- /dev/null
+++ b/examples-app/src/Provider/Sidebar.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useStore } from '@braks/vue-flow'
+const store = useStore()
+
+const nodes = computed(() => store.nodes)
+const transform = computed(() => store.transform)
+
+const selectAll = () => {
+  store.selectedElements = nodes.value
+  store.unsetUserSelection()
+}
+</script>
+<template>
+  <aside>
+    <div class="description">This is an example of how you can access the internal state outside of the Vue Flow component.</div>
+    <div class="title">Zoom & pan transform</div>
+    <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
+    <div class="title">Nodes</div>
+    <div v-for="node of nodes" :key="node.id">
+      Node {{ node.id }} - x: {{ node.__rf.position.x.toFixed(2) }}, y: {{ node.__rf.position.y.toFixed(2) }}
+    </div>
+
+    <div class="selectall">
+      <button class="button" @click="selectAll">select all nodes</button>
+    </div>
+  </aside>
+</template>
diff --git a/examples-app/src/SaveRestore/Controls.vue b/examples-app/src/SaveRestore/Controls.vue
new file mode 100644
index 00000000..7efa8425
--- /dev/null
+++ b/examples-app/src/SaveRestore/Controls.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import localforage from 'localforage'
+import { useZoomPanHelper, FlowInstance, FlowExportObject, Node } from '@braks/vue-flow'
+
+localforage.config({
+  name: 'vue-flow',
+  storeName: 'flows',
+})
+
+const flowKey = 'example-flow'
+
+const getNodeId = () => `randomnode_${+new Date()}`
+
+const { transform } = useZoomPanHelper()
+
+type ControlsProps = {
+  flowInstance?: FlowInstance
+}
+
+const props = defineProps<ControlsProps>()
+const emit = defineEmits(['restore', 'add'])
+
+const onSave = () => {
+  if (props.flowInstance) {
+    const flow = props.flowInstance.toObject()
+    localforage.setItem(flowKey, flow)
+  }
+}
+
+const onRestore = () => {
+  const restoreFlow = async () => {
+    const flow: FlowExportObject | null = await localforage.getItem(flowKey)
+
+    console.log(flow)
+    if (flow) {
+      const [x = 0, y = 0] = flow.position
+      emit('restore', flow.elements ?? [])
+      transform({ x, y, zoom: flow.zoom || 0 })
+    }
+  }
+
+  restoreFlow()
+}
+
+const onAdd = () => {
+  const newNode = {
+    id: `random_node-${getNodeId()}`,
+    data: { label: 'Added node' },
+    position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
+  } as Node
+  emit('add', newNode)
+}
+</script>
+<template>
+  <div class="save__controls">
+    <button class="button" @click="onSave">save</button>
+    <button class="button" @click="onRestore">restore</button>
+    <button class="button" @click="onAdd">add node</button>
+  </div>
+</template>
diff --git a/examples-app/src/SaveRestore/SaveRestoreExample.vue b/examples-app/src/SaveRestore/SaveRestoreExample.vue
new file mode 100644
index 00000000..7578c96a
--- /dev/null
+++ b/examples-app/src/SaveRestore/SaveRestoreExample.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
+import Controls from './Controls.vue'
+
+const initialElements: Elements = [
+  { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+]
+
+const elements = ref(initialElements)
+const flowInstance = ref()
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
+const onRestore = (els: Elements) => (elements.value = els)
+const onAdd = (el: Node) => (elements.value = elements.value.concat(el))
+</script>
+<template>
+  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @load="onLoad">
+    <Controls :flow-instance="flowInstance" @restore="onRestore" @add="onAdd" />
+  </Flow>
+</template>
+<style>
+.save__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.save__controls button {
+  margin-left: 5px;
+}
+</style>
diff --git a/examples-app/src/Sidebar.vue b/examples-app/src/Sidebar.vue
new file mode 100644
index 00000000..5942c2c1
--- /dev/null
+++ b/examples-app/src/Sidebar.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+const examples = [
+  {
+    path: '/',
+    label: 'Overview',
+  },
+  {
+    path: '/basic',
+    label: 'Basic',
+  },
+  {
+    path: '/custom-connectionline',
+    label: 'Custom Connectionline',
+  },
+  {
+    path: '/custom-node',
+    label: 'Custom Node',
+  },
+  {
+    path: '/drag-n-drop',
+    label: 'Drag and Drop',
+  },
+  {
+    path: '/edges',
+    label: 'Edges',
+  },
+  {
+    path: '/button-edge',
+    label: 'Edge with Button',
+  },
+  {
+    path: '/edge-types',
+    label: 'Edge Types',
+  },
+  {
+    path: '/empty',
+    label: 'Empty',
+  },
+  {
+    path: '/hidden',
+    label: 'Hidden',
+  },
+  {
+    path: '/interaction',
+    label: 'Interaction',
+  },
+  {
+    path: '/layouting',
+    label: 'Layouting',
+  },
+  {
+    path: '/multi-flows',
+    label: 'Multi Flows',
+  },
+  {
+    path: '/node-type-change',
+    label: 'Node Type Change',
+  },
+  {
+    path: '/node-types-id-change',
+    label: 'Node Types ID Change',
+  },
+  {
+    path: '/provider',
+    label: 'Provider',
+  },
+  {
+    path: '/save-restore',
+    label: 'Save and Restore',
+  },
+  {
+    path: '/stress',
+    label: 'Stress',
+  },
+  {
+    path: '/switch',
+    label: 'Switch',
+  },
+  {
+    path: '/unidirectional',
+    label: 'Unidirectional',
+  },
+  {
+    path: '/updatable-edge',
+    label: 'Updatable Edge',
+  },
+  {
+    path: '/update-node',
+    label: 'Update Node',
+  },
+  {
+    path: '/update-node-internals',
+    label: 'Update Node Internals',
+  },
+  {
+    path: '/validation',
+    label: 'Validation',
+  },
+  {
+    path: '/zoom-pan-helper',
+    label: 'Zoom Pan Helper',
+  },
+]
+</script>
+<template>
+  <aside>
+    <div class="flex flex-col justify-center items-start">
+      <router-link v-for="(example, i) of examples" :key="`example-link-${i}`" class="example-link" :to="example.path">
+        {{ example.label }}
+      </router-link>
+    </div>
+    <slot></slot>
+  </aside>
+</template>
+<style>
+.example-link {
+  @apply text-lg text-white hover:text-black py-2 underline;
+}
+aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  height: 100%; /* Full-height: remove this if you want "auto" height */
+  width: 280px; /* Set the width of the sidebar */
+  overflow-x: hidden; /* Disable horizontal scroll */
+}
+</style>
diff --git a/examples-app/src/Stress/StressExample.vue b/examples-app/src/Stress/StressExample.vue
new file mode 100644
index 00000000..c415d192
--- /dev/null
+++ b/examples-app/src/Stress/StressExample.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import {
+  Flow,
+  removeElements,
+  addEdge,
+  MiniMap,
+  isNode,
+  Controls,
+  Background,
+  FlowInstance,
+  Elements,
+  Connection,
+  Edge,
+} from '@braks/vue-flow'
+
+function getElements(xElements = 10, yElements = 10): Elements {
+  const initialElements = []
+  let nodeId = 1
+  let recentNodeId = null
+
+  for (let y = 0; y < yElements; y++) {
+    for (let x = 0; x < xElements; x++) {
+      const position = { x: x * 100, y: y * 50 }
+      const data = { label: `Node ${nodeId}` }
+      const node = {
+        id: nodeId.toString(),
+        style: { width: 50, fontSize: 11 },
+        data,
+        position,
+      }
+      initialElements.push(node)
+
+      if (recentNodeId && nodeId <= xElements * yElements) {
+        initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() })
+      }
+
+      recentNodeId = nodeId
+      nodeId++
+    }
+  }
+
+  return initialElements
+}
+
+const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 }
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView()
+  console.log(flowInstance.getElements())
+}
+
+const initialElements: Elements = getElements(10, 10)
+const elements = ref(initialElements)
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const updatePos = () => {
+  elements.value = elements.value.map((el) => {
+    if (isNode(el)) {
+      return {
+        ...el,
+        position: {
+          x: Math.random() * window.innerWidth,
+          y: Math.random() * window.innerHeight,
+        },
+      }
+    }
+
+    return el
+  })
+}
+
+const updateElements = () => {
+  const grid = Math.ceil(Math.random() * 10)
+  elements.value = getElements(grid, grid)
+}
+</script>
+<template>
+  <Flow :elements="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
+    <MiniMap />
+    <Controls />
+    <Background />
+
+    <div :style="buttonWrapperStyles">
+      <button style="margin-right: 5px" @click="updatePos">change pos</button>
+      <button @click="updateElements">update elements</button>
+    </div>
+  </Flow>
+</template>
diff --git a/examples-app/src/Switch/SwitchExample.vue b/examples-app/src/Switch/SwitchExample.vue
new file mode 100644
index 00000000..8167f8c3
--- /dev/null
+++ b/examples-app/src/Switch/SwitchExample.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+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)
+
+const elementsA: Elements = [
+  { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1a', target: '2a' },
+  { id: 'e1-3', source: '1a', target: '3a' },
+]
+
+const elementsB: Elements = [
+  { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, class: 'light' },
+  { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, class: 'light' },
+  { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, class: 'light' },
+  { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, class: 'light' },
+
+  { id: 'e1b', source: 'inputb', target: '1b' },
+  { id: 'e2b', source: 'inputb', target: '2b' },
+  { id: 'e3b', source: 'inputb', target: '3b' },
+  { id: 'e4b', source: 'inputb', target: '4b' },
+]
+
+const elements = ref(elementsA)
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+  >
+    <div :style="{ position: 'absolute', right: '10px', top: '10px', zIndex: 4 }">
+      <button class="button" style="margin-right: 5px" @click="() => (elements = elementsA)">flow a</button>
+      <button class="button" @click="() => (elements = elementsB)">flow b</button>
+    </div>
+  </Flow>
+</template>
diff --git a/examples-app/src/Unidirectional/CustomNode.vue b/examples-app/src/Unidirectional/CustomNode.vue
new file mode 100644
index 00000000..0b400d14
--- /dev/null
+++ b/examples-app/src/Unidirectional/CustomNode.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
+
+interface CustomNodeProps extends NodeProps {
+  id: string
+}
+const props = defineProps<CustomNodeProps>()
+const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
+</script>
+<template>
+  <div :style="nodeStyles">
+    <div>node {{ props.id }}</div>
+    <Handle id="left" type="source" :position="Position.Left" />
+    <Handle id="right" type="source" :position="Position.Right" />
+    <Handle id="top" type="source" :position="Position.Top" />
+    <Handle id="bottom" type="source" :position="Position.Bottom" />
+  </div>
+</template>
diff --git a/examples-app/src/Unidirectional/UnidirectionalExample.vue b/examples-app/src/Unidirectional/UnidirectionalExample.vue
new file mode 100644
index 00000000..936d13a5
--- /dev/null
+++ b/examples-app/src/Unidirectional/UnidirectionalExample.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  NodeType,
+  addEdge,
+  useZoomPanHelper,
+  Elements,
+  Connection,
+  Edge,
+  ElementId,
+  Node,
+  ConnectionLineType,
+  ConnectionMode,
+  updateEdge,
+  ArrowHeadType,
+} from '@braks/vue-flow'
+import CustomNode from './CustomNode.vue'
+
+const initialElements: Elements = [
+  {
+    id: '00',
+    type: 'custom',
+    position: { x: 300, y: 250 },
+  },
+  {
+    id: '01',
+    type: 'custom',
+    position: { x: 100, y: 50 },
+  },
+  {
+    id: '02',
+    type: 'custom',
+    position: { x: 500, y: 50 },
+  },
+  {
+    id: '03',
+    type: 'custom',
+    position: { x: 500, y: 500 },
+  },
+  {
+    id: '04',
+    type: 'custom',
+    position: { x: 100, y: 500 },
+  },
+  {
+    id: '10',
+    type: 'custom',
+    position: { x: 300, y: 5 },
+  },
+  {
+    id: '20',
+    type: 'custom',
+    position: { x: 600, y: 250 },
+  },
+  {
+    id: '30',
+    type: 'custom',
+    position: { x: 300, y: 600 },
+  },
+  {
+    id: '40',
+    type: 'custom',
+    position: { x: 5, y: 250 },
+  },
+  {
+    id: 'e0-1a',
+    source: '00',
+    target: '01',
+    sourceHandle: 'left',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-1b',
+    source: '00',
+    target: '01',
+    sourceHandle: 'top',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-2a',
+    source: '00',
+    target: '02',
+    sourceHandle: 'top',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-2b',
+    source: '00',
+    target: '02',
+    sourceHandle: 'right',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-3a',
+    source: '00',
+    target: '03',
+    sourceHandle: 'right',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-3b',
+    source: '00',
+    target: '03',
+    sourceHandle: 'bottom',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-4a',
+    source: '00',
+    target: '04',
+    sourceHandle: 'bottom',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-4b',
+    source: '00',
+    target: '04',
+    sourceHandle: 'left',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-10',
+    source: '00',
+    target: '10',
+    sourceHandle: 'top',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-20',
+    source: '00',
+    target: '20',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-30',
+    source: '00',
+    target: '30',
+    sourceHandle: 'bottom',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-40',
+    source: '00',
+    target: '40',
+    sourceHandle: 'left',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+]
+
+const nodeTypes: Record<string, NodeType> = {
+  custom: CustomNode as NodeType,
+}
+
+let id = 4
+const getId = (): ElementId => `${id++}`
+
+const elements = ref(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, type: 'smoothstep' }, elements.value))
+const { project } = useZoomPanHelper()
+const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
+  (elements.value = updateEdge(oldEdge, newConnection, elements.value))
+
+const onPaneClick = (evt: MouseEvent) =>
+  (elements.value = elements.value.concat({
+    id: getId(),
+    position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+    type: 'custom',
+  } as Node))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :node-types="nodeTypes"
+    :connection-line-type="ConnectionLineType.SmoothStep"
+    :connection-mode="ConnectionMode.Loose"
+    @connect="onConnect"
+    @pane-click="onPaneClick"
+    @edge-pdate="onEdgeUpdate"
+  />
+</template>
diff --git a/examples-app/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples-app/src/UpdatableEdge/UpdatableEdgeExample.vue
new file mode 100644
index 00000000..d25c044a
--- /dev/null
+++ b/examples-app/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  Controls,
+  updateEdge,
+  addEdge,
+  Elements,
+  FlowInstance,
+  Connection,
+  Edge,
+  removeElements,
+  FlowEvents,
+  ConnectionMode,
+} from '@braks/vue-flow'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'Node <strong>A</strong>',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'Node <strong>B</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'Node <strong>C</strong>',
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge' },
+]
+
+const elements = ref(initialElements)
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
+const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
+const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) =>
+  (elements.value = updateEdge(edge, connection, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :snap-to-grid="true"
+    :connection-mode="ConnectionMode.Loose"
+    @load="onLoad"
+    @edge-update="onEdgeUpdate"
+    @connect="onConnect"
+    @edge-update-start="onEdgeUpdateStart"
+    @elements-remove="onElementsRemove"
+    @edge-update-end="onEdgeUpdateEnd"
+  >
+    <Controls />
+  </Flow>
+</template>
+<style>
+.updatenode__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.updatenode__controls label {
+  display: block;
+}
+
+.updatenode__bglabel {
+  margin-top: 10px;
+}
+
+.updatenode__checkboxwrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/examples-app/src/UpdateNode/UpdateNodeExample.vue b/examples-app/src/UpdateNode/UpdateNodeExample.vue
new file mode 100644
index 00000000..3d34bb16
--- /dev/null
+++ b/examples-app/src/UpdateNode/UpdateNodeExample.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { Flow, Elements } from '@braks/vue-flow'
+
+const initialElements: Elements = [
+  { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+]
+
+const elements = ref<Elements>(initialElements)
+const nodeName = ref<string>('Node 1')
+const nodeBg = ref<string>('#eee')
+const nodeHidden = ref<boolean>(false)
+
+const updateNode = () => {
+  elements.value = elements.value.map((el) => {
+    if (el.id === '1') {
+      // it's important that you create a new object here in order to notify react flow about the change
+      el.data = {
+        ...el.data,
+        label: nodeName.value,
+      }
+      el.style = { backgroundColor: nodeBg.value }
+      el.isHidden = nodeHidden.value
+    }
+
+    return el
+  })
+}
+
+watchEffect(() => {
+  updateNode()
+})
+</script>
+<template>
+  <Flow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+    <div class="updatenode__controls p-4 bg-gray-300 rounded-xl">
+      <label>label:</label>
+      <input v-model="nodeName" />
+
+      <label class="updatenode__bglabel">background:</label>
+      <input v-model="nodeBg" type="color" />
+
+      <div class="updatenode__checkboxwrapper">
+        <label>hidden:</label>
+        <input v-model="nodeHidden" type="checkbox" />
+      </div>
+    </div>
+  </Flow>
+</template>
+<style>
+.updatenode__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+
+.updatenode__controls label {
+  display: block;
+}
+
+.updatenode__bglabel {
+  margin-top: 10px;
+}
+
+.updatenode__checkboxwrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/examples-app/src/UpdateNodeInternals/CustomNode.vue b/examples-app/src/UpdateNodeInternals/CustomNode.vue
new file mode 100644
index 00000000..a0108f7b
--- /dev/null
+++ b/examples-app/src/UpdateNodeInternals/CustomNode.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Handle, Position, NodeProps } from '@braks/vue-flow'
+
+interface CustomNodeProps extends NodeProps {
+  data: any
+}
+const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }
+
+const props = defineProps<CustomNodeProps>()
+</script>
+<template>
+  <div :style="nodeStyles">
+    <Handle type="target" :position="Position.Left" />
+    <div>output handle count: {{ props.data.handleCount }}</div>
+    <Handle
+      v-for="i of props.data.handleCount"
+      :id="`handle-${i}`"
+      :key="`handle-${i}`"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: 10 * i + props.data.handlePosition * 10 }"
+    />
+  </div>
+</template>
diff --git a/examples-app/src/UpdateNodeInternals/UpdateNodeInternalsExample.vue b/examples-app/src/UpdateNodeInternals/UpdateNodeInternalsExample.vue
new file mode 100644
index 00000000..b978bae5
--- /dev/null
+++ b/examples-app/src/UpdateNodeInternals/UpdateNodeInternalsExample.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import {
+  Flow,
+  NodeType,
+  addEdge,
+  useZoomPanHelper,
+  Node,
+  Elements,
+  Connection,
+  Edge,
+  ElementId,
+  Position,
+  isEdge,
+  FlowInstance,
+} from '@braks/vue-flow'
+import CustomNode from './CustomNode.vue'
+
+const initialHandleCount = 1
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'custom',
+    data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 },
+    position: { x: 250, y: 5 },
+  },
+]
+
+const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: '10px', top: '10px', zIndex: 10 }
+
+const nodeTypes: Record<string, NodeType> = {
+  custom: CustomNode as NodeType,
+}
+
+let id = 5
+const getId = (): ElementId => `${id++}`
+
+const elements = ref<Elements>(initialElements)
+const flowInstance = ref<FlowInstance>()
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const { project } = useZoomPanHelper()
+
+const onPaneClick = (evt: MouseEvent) =>
+  (elements.value = elements.value.concat({
+    id: getId(),
+    position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+    data: { label: 'new node' },
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+  } as Node))
+
+const toggleHandleCount = () =>
+  (elements.value = elements.value.map((el) => {
+    if (isEdge(el)) {
+      return el
+    }
+
+    return { ...el, data: { ...el.data, handleCount: el.data?.handleCount === 1 ? 2 : 1 } }
+  }))
+
+const toggleHandlePosition = () =>
+  (elements.value = elements.value.map((el) => {
+    if (isEdge(el)) return el
+    return { ...el, data: { ...el.data, handlePosition: el.data?.handlePosition === 0 ? 1 : 0 } }
+  }))
+
+const onLoad = (instance: FlowInstance) => {
+  instance.fitView()
+  flowInstance.value = instance
+}
+
+const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
+</script>
+<template>
+  <Flow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
+    <div :style="buttonWrapperStyles">
+      <button class="button" @click="toggleHandleCount">toggle handle count</button>
+      <button class="button" @click="toggleHandlePosition">toggle handle position</button>
+      <button class="button" @click="updateNodeInternals">update node internals</button>
+    </div>
+  </Flow>
+</template>
diff --git a/examples-app/src/Validation/CustomInput.vue b/examples-app/src/Validation/CustomInput.vue
new file mode 100644
index 00000000..5e04408a
--- /dev/null
+++ b/examples-app/src/Validation/CustomInput.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Position, Handle, Connection } from '@braks/vue-flow'
+
+const isValidConnection = (connection: Connection) => connection.target === 'B'
+</script>
+<template>
+  <div>Only connectable with B</div>
+  <Handle type="source" :position="Position.Right" :is-valid-connection="isValidConnection" />
+</template>
diff --git a/examples-app/src/Validation/CustomNode.vue b/examples-app/src/Validation/CustomNode.vue
new file mode 100644
index 00000000..4ebc01ce
--- /dev/null
+++ b/examples-app/src/Validation/CustomNode.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Position, Handle, Connection, NodeProps } from '@braks/vue-flow'
+
+interface CustomNodeProps extends NodeProps {
+  id: string
+}
+
+const props = defineProps<CustomNodeProps>()
+
+const isValidConnection = (connection: Connection) => connection.target === 'B'
+</script>
+<template>
+  <Handle type="target" :position="Position.Left" :is-valid-connection="isValidConnection" />
+  <div>{{ props.id }}</div>
+  <Handle type="source" :position="Position.Right" :is-valid-connection="isValidConnection" />
+</template>
diff --git a/examples-app/src/Validation/ValidationExample.vue b/examples-app/src/Validation/ValidationExample.vue
new file mode 100644
index 00000000..a12644f1
--- /dev/null
+++ b/examples-app/src/Validation/ValidationExample.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  addEdge,
+  Handle,
+  Connection,
+  Position,
+  Elements,
+  Edge,
+  OnConnectStartParams,
+  NodeProps,
+  FlowInstance,
+  NodeType,
+} from '@braks/vue-flow'
+import CustomInput from './CustomInput.vue'
+import CustomNode from './CustomNode.vue'
+
+const initialElements: Elements = [
+  { id: '0', type: 'custominput', position: { x: 0, y: 150 } },
+  { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
+  { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
+  { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
+]
+
+const onLoad = (reactFlowInstance: FlowInstance) => reactFlowInstance.fitView()
+const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
+const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
+const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => {
+  console.log('on connect', params)
+  elements.value = addEdge(params, elements.value)
+}
+const nodeTypes: Record<string, NodeType> = {
+  custominput: CustomInput as NodeType,
+  customnode: CustomNode as NodeType,
+}
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :select-nodes-on-drag="false"
+    class="validationflow"
+    :node-types="nodeTypes"
+    @connect="onConnect"
+    @oad="onLoad"
+    @connect-start="onConnectStart"
+    @connect-stop="onConnectStop"
+    @connect-end="onConnectEnd"
+  />
+</template>
+<style>
+.validationflow .vue-flow__node {
+  width: 150px;
+  border-radius: 5px;
+  padding: 10px;
+  color: #555;
+  border: 1px solid #ddd;
+  text-align: center;
+  font-size: 12px;
+}
+
+.validationflow .vue-flow__node-customnode {
+  background: #e6e6e9;
+  border: 1px solid #ddd;
+}
+
+.vue-flow__node-custominput .vue-flow__handle {
+  background: #e6e6e9;
+}
+
+.validationflow .vue-flow__node-custominput {
+  background: #fff;
+}
+
+.validationflow .vue-flow__handle-connecting {
+  background: #ff6060;
+}
+
+.validationflow .vue-flow__handle-valid {
+  background: #55dd99;
+}
+</style>
diff --git a/examples-app/src/ZoomPanHelper/ZoomPanHelperExample.vue b/examples-app/src/ZoomPanHelper/ZoomPanHelperExample.vue
new file mode 100644
index 00000000..aa112dc8
--- /dev/null
+++ b/examples-app/src/ZoomPanHelper/ZoomPanHelperExample.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import {
+  Flow,
+  removeElements,
+  addEdge,
+  Background,
+  MiniMap,
+  useZoomPanHelper,
+  Elements,
+  ElementId,
+  Connection,
+  Edge,
+  Node,
+} 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' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+]
+
+let id = 5
+const getId = (): ElementId => `${id++}`
+
+const { project } = useZoomPanHelper()
+
+const elements = ref(initialElements)
+
+const onPaneClick = (evt: MouseEvent) => {
+  const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 })
+
+  elements.value = elements.value.concat({
+    id: getId(),
+    position: projectedPosition,
+    data: {
+      label: `${projectedPosition.x}-${projectedPosition.y}`,
+    },
+  } as Node)
+}
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
+    <Background />
+    <MiniMap />
+  </Flow>
+</template>
diff --git a/examples-app/src/assets/index.css b/examples-app/src/assets/index.css
new file mode 100644
index 00000000..4195fe9a
--- /dev/null
+++ b/examples-app/src/assets/index.css
@@ -0,0 +1,108 @@
+#root{
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+html,
+body,
+#root{
+  position: relative;
+  height: 100vh;
+  margin: 0;
+  color: #111;
+  overflow: hidden;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url('./polygon-scatter.svg');
+}
+
+.backround-img {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url('./polygon-scatter.svg');
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  font-weight: 700;
+}
+
+.logo {
+  text-decoration: none;
+  display: block;
+  line-height: 1;
+}
+
+header a:hover {
+  color: #c9c9c9;
+}
+
+header select {
+  margin-left: 1em;
+}
+
+.overview-example__add {
+  display: none;
+}
+
+.vue-flow__node a {
+  font-weight: 700;
+  color: #111;
+}
+
+.vue-flow__node.dark-node {
+  background: #0041d0;
+  color: #f8f8f8;
+}
+
+.vue-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
+.vue-flow__node-selectorNode {
+  font-size: 14px;
+  background: #f0f2f3;
+  border: 1px solid #555;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.vue-flow__node-selectorNode .vue-flow__handle {
+  border-color: #f0f2f3;
+}
+
+@media screen and (min-width: 768px) {
+  .overview-example__add {
+    display: block;
+  }
+}
+
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink , 0 0 0 4px #f05f75;
+}
+
+#vue-flow-docs {
+  display: flex;
+  margin:0;
+  background: #fff;
+}
+
+.button {
+  @apply bg-gray-200 hover:bg-gray-300 focus:outline-none font-bold mr-2 border-2 p-2 rounded-xl;
+}
diff --git a/examples-app/src/assets/logo.png b/examples-app/src/assets/logo.png
new file mode 100644
index 00000000..e69de29b
diff --git a/examples-app/src/assets/polygon-scatter.svg b/examples-app/src/assets/polygon-scatter.svg
new file mode 100644
index 00000000..5b07c11f
--- /dev/null
+++ b/examples-app/src/assets/polygon-scatter.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
\ No newline at end of file
diff --git a/examples-app/src/auto-imports.d.ts b/examples-app/src/auto-imports.d.ts
new file mode 100644
index 00000000..39339a76
--- /dev/null
+++ b/examples-app/src/auto-imports.d.ts
@@ -0,0 +1,50 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  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 onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+}
+export {}
diff --git a/examples-app/src/env.d.ts b/examples-app/src/env.d.ts
new file mode 100644
index 00000000..d27eb5a3
--- /dev/null
+++ b/examples-app/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples-app/src/main.ts b/examples-app/src/main.ts
new file mode 100644
index 00000000..17195c29
--- /dev/null
+++ b/examples-app/src/main.ts
@@ -0,0 +1,15 @@
+import 'virtual:windi.css'
+import { createApp } from 'vue'
+import './assets/index.css'
+import { createPinia } from 'pinia'
+import { DraggablePlugin } from '@braks/revue-draggable'
+import App from './App.vue'
+import { router } from './router'
+
+const app = createApp(App)
+
+app.config.performance = true
+app.use(router)
+app.use(DraggablePlugin)
+app.use(createPinia())
+app.mount('#root')
diff --git a/examples-app/src/router.ts b/examples-app/src/router.ts
new file mode 100644
index 00000000..157e0a39
--- /dev/null
+++ b/examples-app/src/router.ts
@@ -0,0 +1,113 @@
+import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'
+
+export const routes: RouterOptions['routes'] = [
+  {
+    path: '/',
+    redirect: '/overview',
+  },
+  {
+    path: '/basic',
+    component: () => import('./Basic/Basic.vue'),
+  },
+  {
+    path: '/custom-connectionline',
+    component: () => import('./CustomConnectionLine/CustomConnectionLine.vue'),
+  },
+  {
+    path: '/custom-node',
+    component: () => import('./CustomNode/CustomNode.vue'),
+  },
+  {
+    path: '/drag-n-drop',
+    component: () => import('./DragNDrop/DnD.vue'),
+  },
+  {
+    path: '/edges',
+    component: () => import('./Edges/EdgesExample.vue'),
+  },
+  {
+    path: '/button-edge',
+    component: () => import('./EdgeWithButton/EdgeWithButton.vue'),
+  },
+  {
+    path: '/edge-types',
+    component: () => import('./EdgeTypes/EdgeTypesExample.vue'),
+  },
+  {
+    path: '/empty',
+    component: () => import('./Empty/EmptyExample.vue'),
+  },
+  {
+    path: '/hidden',
+    component: () => import('./Hidden/HiddenExample.vue'),
+  },
+  {
+    path: '/interaction',
+    component: () => import('./Interaction/InteractionExample.vue'),
+  },
+  {
+    path: '/layouting',
+    component: () => import('./Layouting/LayoutingExample.vue'),
+  },
+  {
+    path: '/multi-flows',
+    component: () => import('./MultiFlows/MultiFlowsExample.vue'),
+  },
+  {
+    path: '/node-type-change',
+    component: () => import('./NodeTypeChange/NodeTypeChangeExample.vue'),
+  },
+  {
+    path: '/node-types-id-change',
+    component: () => import('./NodeTypesIdChange/NodeTypesIdChangeExample.vue'),
+  },
+  {
+    path: '/overview',
+    component: () => import('./Overview/Overview.vue'),
+  },
+  {
+    path: '/provider',
+    component: () => import('./Provider/ProviderExample.vue'),
+  },
+  {
+    path: '/save-restore',
+    component: () => import('./SaveRestore/SaveRestoreExample.vue'),
+  },
+  {
+    path: '/stress',
+    component: () => import('./Stress/StressExample.vue'),
+  },
+  {
+    path: '/switch',
+    component: () => import('./Switch/SwitchExample.vue'),
+  },
+  {
+    path: '/unidirectional',
+    component: () => import('./Unidirectional/UnidirectionalExample.vue'),
+  },
+  {
+    path: '/updateable-edge',
+    component: () => import('./UpdatableEdge/UpdatableEdgeExample.vue'),
+  },
+  {
+    path: '/update-node',
+    component: () => import('./UpdateNode/UpdateNodeExample.vue'),
+  },
+  {
+    path: '/update-node-internals',
+    component: () => import('./UpdateNodeInternals/UpdateNodeInternalsExample.vue'),
+  },
+  {
+    path: '/validation',
+    component: () => import('./Validation/ValidationExample.vue'),
+  },
+  {
+    path: '/zoom-pan-helper',
+    component: () => import('./ZoomPanHelper/ZoomPanHelperExample.vue'),
+  },
+]
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
diff --git a/examples-app/tsconfig.json b/examples-app/tsconfig.json
new file mode 100644
index 00000000..d848874f
--- /dev/null
+++ b/examples-app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/examples-app/vite.config.ts b/examples-app/vite.config.ts
new file mode 100644
index 00000000..c751f6b9
--- /dev/null
+++ b/examples-app/vite.config.ts
@@ -0,0 +1,27 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import WindiCSS from 'vite-plugin-windicss'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  alias: {
+    vue: resolve('./node_modules/vue'),
+  },
+  resolve: {
+    dedupe: ['vue'],
+    preserveSymlinks: false,
+  },
+  build: {
+    emptyOutDir: true,
+  },
+  plugins: [
+    vue(),
+    AutoImport({
+      imports: ['vue'],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    WindiCSS(),
+  ],
+})
diff --git a/examples-app/yarn.lock b/examples-app/yarn.lock
new file mode 100644
index 00000000..0d679879
--- /dev/null
+++ b/examples-app/yarn.lock
@@ -0,0 +1,1791 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@antfu/utils@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.3.0.tgz#6306c43b52a883bd8e973e3ed8dd64248418bcc4"
+  integrity sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==
+  dependencies:
+    "@types/throttle-debounce" "^2.1.0"
+
+"@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
+
+"@babel/parser@^7.15.0", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
+  version "7.16.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.2.tgz#3723cd5c8d8773eef96ce57ea1d9b7faaccd12ac"
+  integrity sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==
+
+"@babel/types@^7.6.1", "@babel/types@^7.9.6":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
+  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    to-fast-properties "^2.0.0"
+
+"@braks/revue-draggable@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.2.5.tgz#28a94ee4633aab25bcee28877511e0c9ad262f59"
+  integrity sha512-iKGLFXaurfEqoyPbkANv8ZuO1229krVvUQDDYN9le5WlVssFWcQtA3hNvBD2TPuwil226qXv9SqXGp5kgDhAsA==
+  dependencies:
+    "@vueuse/core" "^5.1.3"
+    vue-demi latest
+
+"@braks/vue-flow@link:..":
+  version "0.0.0"
+  uid ""
+
+"@emmetio/abbreviation@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz#746762fd9e7a8c2ea604f580c62e3cfe250e6989"
+  integrity sha512-TtE/dBnkTCct8+LntkqVrwqQao6EnPAs1YN3cUgxOxTaBlesBCY37ROUAVZrRlG64GNnVShdl/b70RfAI3w5lw==
+  dependencies:
+    "@emmetio/scanner" "^1.0.0"
+
+"@emmetio/css-abbreviation@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@emmetio/css-abbreviation/-/css-abbreviation-2.1.4.tgz#90362e8a1122ce3b76f6c3157907d30182f53f54"
+  integrity sha512-qk9L60Y+uRtM5CPbB0y+QNl/1XKE09mSO+AhhSauIfr2YOx/ta3NJw2d8RtCFxgzHeRqFRr8jgyzThbu+MZ4Uw==
+  dependencies:
+    "@emmetio/scanner" "^1.0.0"
+
+"@emmetio/scanner@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
+  integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@rollup/pluginutils@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@types/d3-array@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.2.tgz#71c35bca8366a40d1b8fce9279afa4a77fb0065d"
+  integrity sha512-5mjGjz6XOXKOCdTajXTZ/pMsg236RdiwKPrRPWAEf/2S/+PzwY+LLYShUpeysWaMvsdS7LArh6GdUefoxpchsQ==
+
+"@types/d3-axis@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.1.tgz#6afc20744fa5cc0cbc3e2bd367b140a79ed3e7a8"
+  integrity sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-brush@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.1.tgz#ae5f17ce391935ca88b29000e60ee20452c6357c"
+  integrity sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-chord@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.1.tgz#54c8856c19c8e4ab36a53f73ba737de4768ad248"
+  integrity sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==
+
+"@types/d3-color@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.0.2.tgz#53f2d6325f66ee79afd707c05ac849e8ae0edbb0"
+  integrity sha512-WVx6zBiz4sWlboCy7TCgjeyHpNjMsoF36yaagny1uXfbadc9f+5BeBf7U+lRmQqY3EHbGQpP8UdW8AC+cywSwQ==
+
+"@types/d3-contour@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.1.tgz#9ff4e2fd2a3910de9c5097270a7da8a6ef240017"
+  integrity sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/geojson" "*"
+
+"@types/d3-delaunay@*":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.0.tgz#c09953ac7e5460997f693d2d7bf3522e0d4a88e6"
+  integrity sha512-iGm7ZaGLq11RK3e69VeMM6Oqj2SjKUB9Qhcyd1zIcqn2uE8w9GFB445yCY46NOQO3ByaNyktX1DK+Etz7ZaX+w==
+
+"@types/d3-dispatch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz#a1b18ae5fa055a6734cb3bd3cbc6260ef19676e3"
+  integrity sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==
+
+"@types/d3-drag@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.1.tgz#fb1e3d5cceeee4d913caa59dedf55c94cb66e80f"
+  integrity sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-dsv@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.0.tgz#f3c61fb117bd493ec0e814856feb804a14cfc311"
+  integrity sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==
+
+"@types/d3-ease@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
+  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
+
+"@types/d3-fetch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.1.tgz#f9fa88b81aa2eea5814f11aec82ecfddbd0b8fe0"
+  integrity sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==
+  dependencies:
+    "@types/d3-dsv" "*"
+
+"@types/d3-force@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.3.tgz#76cb20d04ae798afede1ea6e41750763ff5a9c82"
+  integrity sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==
+
+"@types/d3-format@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d"
+  integrity sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==
+
+"@types/d3-geo@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.0.2.tgz#e7ec5f484c159b2c404c42d260e6d99d99f45d9a"
+  integrity sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-hierarchy@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.0.2.tgz#ca63f2f4da15b8f129c5b7dffd71d904cba6aca2"
+  integrity sha512-+krnrWOZ+aQB6v+E+jEkmkAx9HvsNAD+1LCD0vlBY3t+HwjKnsBFbpVLx6WWzDzCIuiTWdAxXMEnGnVXpB09qQ==
+
+"@types/d3-interpolate@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-polygon@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.0.tgz#5200a3fa793d7736fa104285fa19b0dbc2424b93"
+  integrity sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==
+
+"@types/d3-quadtree@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz#433112a178eb7df123aab2ce11c67f51cafe8ff5"
+  integrity sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==
+
+"@types/d3-random@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.1.tgz#5c8d42b36cd4c80b92e5626a252f994ca6bfc953"
+  integrity sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==
+
+"@types/d3-scale-chromatic@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#103124777e8cdec85b20b51fd3397c682ee1e954"
+  integrity sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==
+
+"@types/d3-scale@*":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.2.tgz#41be241126af4630524ead9cb1008ab2f0f26e69"
+  integrity sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-selection@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.1.tgz#e57b01ab69b18b380f68db97b76ceefe62f17191"
+  integrity sha512-aJ1d1SCUtERHH65bB8NNoLpUOI3z8kVcfg2BGm4rMMUwuZF4x6qnIEKjT60Vt0o7gP/a/xkRVs4D9CpDifbyRA==
+
+"@types/d3-shape@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.0.2.tgz#4b1ca4ddaac294e76b712429726d40365cd1e8ca"
+  integrity sha512-5+ButCmIfNX8id5seZ7jKj3igdcxx+S9IDBiT35fQGTLZUfkFgTv+oBH34xgeoWDKpWcMITSzBILWQtBoN5Piw==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time-format@*":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.0.tgz#ee7b6e798f8deb2d9640675f8811d0253aaa1946"
+  integrity sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==
+
+"@types/d3-time@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-timer@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
+  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
+
+"@types/d3-transition@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.1.tgz#c9a96125567173d6163a6985b874f79154f4cc3d"
+  integrity sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.1.tgz#4bfc7e29625c4f79df38e2c36de52ec3e9faf826"
+  integrity sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.1.0.tgz#8f32a7e7f434d8f920c8b1ebdfed55e18c033720"
+  integrity sha512-gYWvgeGjEl+zmF8c+U1RNIKqe7sfQwIXeLXO5Os72TjDjCEtgpvGBvZ8dXlAuSS1m6B90Y1Uo6Bm36OGR/OtCA==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
+
+"@types/dagre@^0.7.46":
+  version "0.7.46"
+  resolved "https://registry.yarnpkg.com/@types/dagre/-/dagre-0.7.46.tgz#c51ffcc62ca8a9affa07f5e06842acd840d3d442"
+  integrity sha512-ku3y+F8sPqmiB5Ugl22NpukI2dLAViJiWwdtueXLeuF4fxZozl+bytPSFVlLu/gDgaKiwobu3LBXXRWktIMiIA==
+
+"@types/geojson@*":
+  version "7946.0.8"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
+  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
+"@vitejs/plugin-vue@^1.9.3":
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.9.4.tgz#4f48485432cbb986a9fb9d254dc33ce30ddccbfa"
+  integrity sha512-0CZqaCoChriPTTtGkERy1LGPcYjGFpi2uYRhBPIkqJqUGV5JnJFhQAgh6oH9j5XZHfrRaisX8W0xSpO4T7S78A==
+
+"@volar/code-gen@^0.27.24":
+  version "0.27.24"
+  resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.27.24.tgz#ccdbe858951c1ee4e0c3979232d52412dc46756a"
+  integrity sha512-s4j/QqOZUW03PeD6LmVYI00Q1C3CfJEOePDOQwDvCTUov4lFk0iSBtFyYhjlLyQ1pdtV1+TDTErkj2aMQtc4PA==
+  dependencies:
+    "@volar/shared" "^0.27.24"
+    "@volar/source-map" "^0.27.24"
+
+"@volar/html2pug@^0.27.13":
+  version "0.27.13"
+  resolved "https://registry.yarnpkg.com/@volar/html2pug/-/html2pug-0.27.13.tgz#48dfa73ecf1ef1955a02a046d0c88845950fac85"
+  integrity sha512-3NYgNA5F3PDsKbbpOrVdGy2S7ZYmZIbFmbp1A/27DDzjj/uIC9Pj7HXVvbYOzi8HcOxUPt0BMrh4TVzBUaCFww==
+  dependencies:
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+    htmlparser2 "^6.1.0"
+    pug "^3.0.2"
+
+"@volar/shared@^0.27.24":
+  version "0.27.24"
+  resolved "https://registry.yarnpkg.com/@volar/shared/-/shared-0.27.24.tgz#a33457ec8ac0b0d367ed54c9e21913a5f8c2d6c2"
+  integrity sha512-Mi8a4GQaiorfb+o4EqOXDZm9E/uBJXgScFgF+NhtcMBOUKHNMKQyLI7YRGumtyJTTdaX7nSDJjGGTkv23tcOtQ==
+  dependencies:
+    upath "^2.0.1"
+    vscode-jsonrpc "^8.0.0-next.2"
+    vscode-uri "^3.0.2"
+
+"@volar/source-map@^0.27.24":
+  version "0.27.24"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.27.24.tgz#60f2e070c169be82cbf7ffa296a30c2823c5205f"
+  integrity sha512-2I5a7cXqekZ66D6lHep7ttJgvVVtPEBUIe1hnpcGbnXWNA2ya6f6jKNNyTmrXQyfkh32IEuaUd4kocR+3AKMag==
+  dependencies:
+    "@volar/shared" "^0.27.24"
+
+"@volar/transforms@^0.27.24":
+  version "0.27.24"
+  resolved "https://registry.yarnpkg.com/@volar/transforms/-/transforms-0.27.24.tgz#68ebc53dca2e36884e247c0866ec3d24ed815784"
+  integrity sha512-sOHi1ZSapFlxn7yPl4MO5TXd9aWC0BVq2CgXAJ2EESb+ddh2uJbGQgLLNocX+MDh419cUuuFT2QAJpuWHhJcng==
+  dependencies:
+    "@volar/shared" "^0.27.24"
+    vscode-languageserver "^8.0.0-next.2"
+
+"@vscode/emmet-helper@^2.7.0":
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/@vscode/emmet-helper/-/emmet-helper-2.8.2.tgz#9b2ce4fdd62cf3fda45cf8af67c012cfce55edc9"
+  integrity sha512-A/+pkBYQq2JTow1A2flfTmEOmiF780KpdkoX7VBjQ7wujeA+CFUPd17YdeIa9aim20+J5Jp7SFujPDwVFiQucQ==
+  dependencies:
+    emmet "^2.3.0"
+    jsonc-parser "^2.3.0"
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-types "^3.15.1"
+    vscode-nls "^5.0.0"
+    vscode-uri "^2.1.2"
+
+"@vue/compiler-core@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.21.tgz#26566c32b2ad838199d471ef5df620a83846f24e"
+  integrity sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@vue/shared" "3.2.21"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.2.21", "@vue/compiler-dom@^3.2.19":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz#d6f6c85364ef8888f9c4e9122bfba11e78fb398c"
+  integrity sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA==
+  dependencies:
+    "@vue/compiler-core" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+"@vue/compiler-sfc@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz#42639ee49e725afb7d8f1d1940e75dc17a56002c"
+  integrity sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.21"
+    "@vue/compiler-dom" "3.2.21"
+    "@vue/compiler-ssr" "3.2.21"
+    "@vue/ref-transform" "3.2.21"
+    "@vue/shared" "3.2.21"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@vue/compiler-ssr@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz#37d124f89e8adef9fd56b85775de4b5310a0436e"
+  integrity sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g==
+  dependencies:
+    "@vue/compiler-dom" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+"@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.19":
+  version "6.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.tgz#b5405c9a84fb44687d05e7c4c7854b1639141106"
+  integrity sha512-21u2jFOk8jbAneeGpDwZQ0W66RJa0IBDUyVl6SgKnn2cRFjLWzKj+ukXjpLhYr1KASyCe5E5U4jXwChVo0YUAw==
+
+"@vue/reactivity@3.2.21", "@vue/reactivity@^3.2.19":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.21.tgz#073ad144192ed78a07e151e95a3baa515e4099a2"
+  integrity sha512-7C57zFm/5E3SSTUhVuYj1InDwuJ+GIVQ/z+H43C9sST85gIThGXVhksl1yWTAadf8Yz4T5lSbqi5Ds8U/ueWcw==
+  dependencies:
+    "@vue/shared" "3.2.21"
+
+"@vue/ref-transform@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.21.tgz#b0c554c9f640c3f005f77e676066aa0faba90984"
+  integrity sha512-uiEWWBsrGeun9O7dQExYWzXO3rHm/YdtFNXDVqCSoPypzOVxWxdiL+8hHeWzxMB58fVuV2sT80aUtIVyaBVZgQ==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.21"
+    "@vue/shared" "3.2.21"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/runtime-core@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.21.tgz#e12dac8c3893b7aebfc37e32066718d8aa686ac5"
+  integrity sha512-7oOxKaU0D2IunOAMOOHZgJVrHg63xwng8BZx3fbgmakqEIMwHhQcp+5GV1sOg/sWW7R4UhaRDIUCukO2GRVK2Q==
+  dependencies:
+    "@vue/reactivity" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+"@vue/runtime-dom@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.21.tgz#33dd15bc85281e773177a30dc6931c294bd77aa1"
+  integrity sha512-apBdriD6QsI4ywbllY8kjr9/0scGuStDuvLbJULPQkFPtHzntd51bP5PQTQVAEIc9kwnTozmj6x6ZdX/cwo7xA==
+  dependencies:
+    "@vue/runtime-core" "3.2.21"
+    "@vue/shared" "3.2.21"
+    csstype "^2.6.8"
+
+"@vue/server-renderer@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.21.tgz#887d0a44de76f72313cff2686a24c0315231d634"
+  integrity sha512-QBgYqVgI7XCSBCqGa4LduV9vpfQFdZBOodFmq5Txk5W/v1KrJ1LoOh2Q0RHiRgtoK/UR9uyvRVcYqOmwHkZNEg==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+"@vue/shared@3.2.21", "@vue/shared@^3.2.19":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.21.tgz#4cd80c0e62cf65a7adab2449e86b6f0cb33a130b"
+  integrity sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA==
+
+"@vueuse/core@^5.1.3":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.3.0.tgz#d8c6e939e18089afa224fab6e443fae2bdb57a51"
+  integrity sha512-bBL1/JMRHFWmbgQzUZHF4WOwlqfenR1B8+elriXsbnHlogQM5foSz9++WyDBR0YPIVgCJq7fvNLqd4T7+cjc5w==
+  dependencies:
+    "@vueuse/shared" "5.3.0"
+    vue-demi "*"
+
+"@vueuse/core@^6.6.2":
+  version "6.7.6"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.7.6.tgz#4eb402a60bf5c40e04ebab3f183f0486faa140e9"
+  integrity sha512-oVyqARXnTvhf4m6xf/sHw+SNJWcRYJn8+L4TZTFBU9POf9GIzBN7iHD2Oc4K4rTWXGQzXfoFHgbrXyeMFCRoqA==
+  dependencies:
+    "@vueuse/shared" "6.7.6"
+    vue-demi "*"
+
+"@vueuse/shared@5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-5.3.0.tgz#2b9583f80f1284242f808925e7e141310e400e45"
+  integrity sha512-qZfkPFH0qTScFpYiPOFpTcxWriRhlM3bgSzl3DFTgr/U0eZg3w2EFWaRZHdWeSvAUdNQyjOC4Toa8S0zJyEjHw==
+  dependencies:
+    vue-demi "*"
+
+"@vueuse/shared@6.7.6":
+  version "6.7.6"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.7.6.tgz#52a1aa8a6335a004bde31367ddbed82ddf8bfa53"
+  integrity sha512-MfzTKkFK63PcjDdTpJRuJqylpyUdXpic9ueTRcgpPizqFpoYIuI6DkdYjub2Ch5+OYYhVnCqe8ynW6WzYo7DGQ==
+  dependencies:
+    vue-demi "*"
+
+"@windicss/config@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.5.1.tgz#e3fdaddfc553442c85f67f2e9290ef46ce87b3a1"
+  integrity sha512-nWNgvvJj9RcYhLcqwju/Z8FfaHRjyWHDYS3IgY7lWUM+vWTLFuKqhavKfC1589kdYjiO9JeX07Vg+YzfcxP0Yw==
+  dependencies:
+    debug "^4.3.2"
+    jiti "^1.12.9"
+    windicss "^3.2.1"
+
+"@windicss/plugin-utils@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.5.1.tgz#9750bb72e8c14585e011d46a33351d47d8519e31"
+  integrity sha512-gxJiTCMKv1p1x4W2BLG2yfNe+DfIVPc8+aKvfCUCtOpdg5GB5yzhuAC4ROsKiXHxu4QXoojrh7jXH6ELlrELpQ==
+  dependencies:
+    "@antfu/utils" "^0.3.0"
+    "@windicss/config" "1.5.1"
+    debug "^4.3.2"
+    fast-glob "^3.2.7"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.2.1"
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
+assert-never@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/assert-never/-/assert-never-1.2.1.tgz#11f0e363bf146205fb08193b5c7b90f4d1cf44fe"
+  integrity sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==
+
+babel-walk@3.0.0-canary-5:
+  version "3.0.0-canary-5"
+  resolved "https://registry.yarnpkg.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz#f66ecd7298357aee44955f235a6ef54219104b11"
+  integrity sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==
+  dependencies:
+    "@babel/types" "^7.9.6"
+
+braces@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+builtins@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/builtins/-/builtins-4.0.0.tgz#a8345420de82068fdc4d6559d0456403a8fb1905"
+  integrity sha512-qC0E2Dxgou1IHhvJSLwGDSTvokbRovU5zZFuDY6oY8Y2lF3nGt5Ad8YZK7GMtqzY84Wu7pXTPeHQeHcXSXsRhw==
+  dependencies:
+    semver "^7.0.0"
+
+call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+character-parser@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
+  integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
+  dependencies:
+    is-regex "^1.0.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+commander@7:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+constantinople@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-4.0.1.tgz#0def113fa0e4dc8de83331a5cf79c8b325213151"
+  integrity sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==
+  dependencies:
+    "@babel/parser" "^7.6.0"
+    "@babel/types" "^7.6.1"
+
+csstype@^2.6.8:
+  version "2.6.18"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
+  integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
+
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.1.1.tgz#7797eb53ead6b9083c75a45a681e93fc41bc468c"
+  integrity sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==
+  dependencies:
+    internmap "1 - 2"
+
+d3-axis@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
+
+d3-brush@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
+
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-3.0.1.tgz#d156d61f485fce8327e6abf339cb41d8cbba6966"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-color@1 - 3", d3-color@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.0.1.tgz#03316e595955d1fcd39d9f3610ad41bb90194d0a"
+  integrity sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==
+
+d3-contour@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-3.0.1.tgz#2c64255d43059599cd0dba8fe4cc3d51ccdd9bbd"
+  integrity sha512-0Oc4D0KyhwhM7ZL0RMnfGycLN7hxHB8CMmwZ3+H26PWAG0ozNuYG5hXSDNgmP1SgJkQMrlG6cP20HoaSbvcJTQ==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-delaunay@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92"
+  integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==
+  dependencies:
+    delaunator "5"
+
+"d3-dispatch@1 - 3", d3-dispatch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+"d3-ease@1 - 3", d3-ease@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
+"d3-format@1 - 3", d3-format@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.0.1.tgz#e41b81b2ab79277141ec1404aa5d05001da64084"
+  integrity sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA==
+
+d3-geo@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.0.1.tgz#4f92362fd8685d93e3b1fae0fd97dc8980b1ed7e"
+  integrity sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hierarchy@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.0.1.tgz#0365342d54972e38ca05e9143e0ab1c60846b3b5"
+  integrity sha512-RlLTaofEoOrMK1JoXYIGhKTkJFI/6rFrYPgxy6QlZo2BcVc4HGTqEU0rPpzuMq5T/5XcMtAzv1XiLA3zRTfygw==
+
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+"d3-path@1 - 3", d3-path@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e"
+  integrity sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==
+
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
+
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+
+d3-scale-chromatic@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
+  integrity sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+d3-shape@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.0.1.tgz#9ccdfb28fd9b0d12f2d8aec234cd5c4a9ea27931"
+  integrity sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-time-format@2 - 4", d3-time-format@4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.0.0.tgz#930ded86a9de761702344760d8a25753467f28b7"
+  integrity sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
+  integrity sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==
+  dependencies:
+    d3-array "2 - 3"
+
+"d3-timer@1 - 3", d3-timer@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3", d3-transition@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@3, d3-zoom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.1.1.tgz#77b9a0c9893b13643b8e52316ec65dca3a6a115e"
+  integrity sha512-8zkLMwSvUAnfN9pcJDfkuxU0Nvg4RLUD0A4BZN1KxJPtlnCGzMx3xM5cRl4m8fym/Vy8rlq52tl90UF3m91OnA==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "3"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
+
+dagre@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
+  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+  dependencies:
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
+debug@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
+delaunator@5:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b"
+  integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==
+  dependencies:
+    robust-predicates "^3.0.0"
+
+doctypes@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
+  integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
+
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+domhandler@^4.0.0, domhandler@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f"
+  integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.5.2:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+emmet@^2.3.0:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/emmet/-/emmet-2.3.4.tgz#5ba0d7a5569a68c7697dfa890c772e4f3179d123"
+  integrity sha512-3IqSwmO+N2ZGeuhDyhV/TIOJFUbkChi53bcasSNRE7Yd+4eorbbYz4e53TpMECt38NtYkZNupQCZRlwdAYA42A==
+  dependencies:
+    "@emmetio/abbreviation" "^2.2.2"
+    "@emmetio/css-abbreviation" "^2.1.4"
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+esbuild-android-arm64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.12.tgz#e1f199dc05405cdc6670c00fb6c793822bf8ae4c"
+  integrity sha512-TSVZVrb4EIXz6KaYjXfTzPyyRpXV5zgYIADXtQsIenjZ78myvDGaPi11o4ZSaHIwFHsuwkB6ne5SZRBwAQ7maw==
+
+esbuild-darwin-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.12.tgz#f5c59e622955c01f050e5a7ac9c1d41db714b94d"
+  integrity sha512-c51C+N+UHySoV2lgfWSwwmlnLnL0JWj/LzuZt9Ltk9ub1s2Y8cr6SQV5W3mqVH1egUceew6KZ8GyI4nwu+fhsw==
+
+esbuild-darwin-arm64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.12.tgz#8abae74c2956a8aa568fc52c78829338c4a4b988"
+  integrity sha512-JvAMtshP45Hd8A8wOzjkY1xAnTKTYuP/QUaKp5eUQGX+76GIie3fCdUUr2ZEKdvpSImNqxiZSIMziEiGB5oUmQ==
+
+esbuild-freebsd-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.12.tgz#6ad2ab8c0364ee7dd2d6e324d876a8e60ae75d12"
+  integrity sha512-r6On/Skv9f0ZjTu6PW5o7pdXr8aOgtFOEURJZYf1XAJs0IQ+gW+o1DzXjVkIoT+n1cm3N/t1KRJfX71MPg/ZUA==
+
+esbuild-freebsd-arm64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.12.tgz#6f38155f4c300ac4c8adde1fde3cc6a4440a8294"
+  integrity sha512-F6LmI2Q1gii073kmBE3NOTt/6zLL5zvZsxNLF8PMAwdHc+iBhD1vzfI8uQZMJA1IgXa3ocr3L3DJH9fLGXy6Yw==
+
+esbuild-linux-32@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.12.tgz#b1d15e330188a8c21de75c3f0058628a3eefade7"
+  integrity sha512-U1UZwG3UIwF7/V4tCVAo/nkBV9ag5KJiJTt+gaCmLVWH3bPLX7y+fNlhIWZy8raTMnXhMKfaTvWZ9TtmXzvkuQ==
+
+esbuild-linux-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.12.tgz#25bd64b66162b02348e32d8f12e4c9ee61f1d070"
+  integrity sha512-YpXSwtu2NxN3N4ifJxEdsgd6Q5d8LYqskrAwjmoCT6yQnEHJSF5uWcxv783HWN7lnGpJi9KUtDvYsnMdyGw71Q==
+
+esbuild-linux-arm64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.12.tgz#ba582298457cc5c9ac823a275de117620c06537f"
+  integrity sha512-sgDNb8kb3BVodtAlcFGgwk+43KFCYjnFOaOfJibXnnIojNWuJHpL6aQJ4mumzNWw8Rt1xEtDQyuGK9f+Y24jGA==
+
+esbuild-linux-arm@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.12.tgz#6bc81c957bff22725688cc6359c29a25765be09b"
+  integrity sha512-SyiT/JKxU6J+DY2qUiSLZJqCAftIt3uoGejZ0HDnUM2MGJqEGSGh7p1ecVL2gna3PxS4P+j6WAehCwgkBPXNIw==
+
+esbuild-linux-mips64le@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.12.tgz#ef3c4aba3e585d847cbade5945a8b4a5c62c7ce2"
+  integrity sha512-qQJHlZBG+QwVIA8AbTEtbvF084QgDi4DaUsUnA+EolY1bxrG+UyOuGflM2ZritGhfS/k7THFjJbjH2wIeoKA2g==
+
+esbuild-linux-ppc64le@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.12.tgz#a21fb64e80c38bef06122e48283990fc6db578e1"
+  integrity sha512-2dSnm1ldL7Lppwlo04CGQUpwNn5hGqXI38OzaoPOkRsBRWFBozyGxTFSee/zHFS+Pdh3b28JJbRK3owrrRgWNw==
+
+esbuild-netbsd-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.12.tgz#1ea7fc8cfce88a20a4047b867ef184049a6641ae"
+  integrity sha512-D4raxr02dcRiQNbxOLzpqBzcJNFAdsDNxjUbKkDMZBkL54Z0vZh4LRndycdZAMcIdizC/l/Yp/ZsBdAFxc5nbA==
+
+esbuild-openbsd-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.12.tgz#adde32f2f1b05dc4bd4fc544d6ea5a4379f9ca4d"
+  integrity sha512-KuLCmYMb2kh05QuPJ+va60bKIH5wHL8ypDkmpy47lzwmdxNsuySeCMHuTv5o2Af1RUn5KLO5ZxaZeq4GEY7DaQ==
+
+esbuild-sunos-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.12.tgz#a7ecaf52b7364fbee76dc8aa707fa3e1cff3342c"
+  integrity sha512-jBsF+e0woK3miKI8ufGWKG3o3rY9DpHvCVRn5eburMIIE+2c+y3IZ1srsthKyKI6kkXLvV4Cf/E7w56kLipMXw==
+
+esbuild-windows-32@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.12.tgz#a8756033dc905c4b7bea19be69f7ee68809f8770"
+  integrity sha512-L9m4lLFQrFeR7F+eLZXG82SbXZfUhyfu6CexZEil6vm+lc7GDCE0Q8DiNutkpzjv1+RAbIGVva9muItQ7HVTkQ==
+
+esbuild-windows-64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.12.tgz#ae694aa66ca078acb8509b2da31197ed1f40f798"
+  integrity sha512-k4tX4uJlSbSkfs78W5d9+I9gpd+7N95W7H2bgOMFPsYREVJs31+Q2gLLHlsnlY95zBoPQMIzHooUIsixQIBjaQ==
+
+esbuild-windows-arm64@0.13.12:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.12.tgz#782c5a8bd6d717ea55aaafe648f9926ca36a4a88"
+  integrity sha512-2tTv/BpYRIvuwHpp2M960nG7uvL+d78LFW/ikPItO+2GfK51CswIKSetSpDii+cjz8e9iSPgs+BU4o8nWICBwQ==
+
+esbuild@^0.13.2:
+  version "0.13.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.12.tgz#9cac641594bf03cf34145258c093d743ebbde7ca"
+  integrity sha512-vTKKUt+yoz61U/BbrnmlG9XIjwpdIxmHB8DlPR0AAW6OdS+nBQBci6LUHU2q9WbBobMEIQxxDpKbkmOGYvxsow==
+  optionalDependencies:
+    esbuild-android-arm64 "0.13.12"
+    esbuild-darwin-64 "0.13.12"
+    esbuild-darwin-arm64 "0.13.12"
+    esbuild-freebsd-64 "0.13.12"
+    esbuild-freebsd-arm64 "0.13.12"
+    esbuild-linux-32 "0.13.12"
+    esbuild-linux-64 "0.13.12"
+    esbuild-linux-arm "0.13.12"
+    esbuild-linux-arm64 "0.13.12"
+    esbuild-linux-mips64le "0.13.12"
+    esbuild-linux-ppc64le "0.13.12"
+    esbuild-netbsd-64 "0.13.12"
+    esbuild-openbsd-64 "0.13.12"
+    esbuild-sunos-64 "0.13.12"
+    esbuild-windows-32 "0.13.12"
+    esbuild-windows-64 "0.13.12"
+    esbuild-windows-arm64 "0.13.12"
+
+estree-walker@^2.0.1, estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
+  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+get-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+graphlib@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
+  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
+  dependencies:
+    lodash "^4.17.15"
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+iconv-lite@0.6:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
+import-meta-resolve@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-1.1.1.tgz#244fd542fd1fae73550d4f8b3cde3bba1d7b2b18"
+  integrity sha512-JiTuIvVyPaUg11eTrNDx5bgQ/yMKMZffc7YSjvQeSMXy58DO2SQ8BtAf3xteZvmzvjYh14wnqNjL8XVeDy2o9A==
+  dependencies:
+    builtins "^4.0.0"
+
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
+is-core-module@^2.2.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
+  integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
+  dependencies:
+    has "^1.0.3"
+
+is-expression@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-4.0.0.tgz#c33155962abf21d0afd2552514d67d2ec16fd2ab"
+  integrity sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==
+  dependencies:
+    acorn "^7.1.1"
+    object-assign "^4.1.1"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-promise@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
+
+is-regex@^1.0.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+jiti@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.9.tgz#2ce45b265cfc8dc91ebd70a5204807cf915291bc"
+  integrity sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
+
+js-stringify@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
+  integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
+
+jsonc-parser@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342"
+  integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==
+
+jsonc-parser@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
+  integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==
+
+jstransformer@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
+  integrity sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=
+  dependencies:
+    is-promise "^2.0.0"
+    promise "^7.0.1"
+
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
+local-pkg@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.1.0.tgz#7422b2ae8fc1e3b9ef2f132b0a0e92d879df52ef"
+  integrity sha512-WsR2tHvRGIxcC2clC30ECb5fjywzsjQagaHIy1+ykZaHz0ByoB0OL2riHqIYA5YYnensRXLszwbzHkhKzehZDg==
+  dependencies:
+    mlly "^0.2.2"
+
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
+lodash@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
+mlly@^0.2.2:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.2.10.tgz#645902c9761dc6b5ded174b8e717147fe52e4893"
+  integrity sha512-xfyW6c2QBGArtctzNnTV5leOKX8nOMz2simeubtXofdsdSJFSNw+Ncvrs8kxcN3pBrQLXuYBHNFV6NgZ5Ryf4A==
+  dependencies:
+    import-meta-resolve "^1.1.1"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoid@^3.1.30:
+  version "3.1.30"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
+  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+path-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.2.2, picomatch@^2.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+pinia@^2.0.0-rc.14:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.2.tgz#51a21129251ee85a4ab57a3b0d489909ec78b6ee"
+  integrity sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.19"
+    vue-demi "*"
+
+postcss@^8.1.10, postcss@^8.3.8:
+  version "8.3.11"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
+  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+  dependencies:
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
+    source-map-js "^0.6.2"
+
+promise@^7.0.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
+pug-attrs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-3.0.0.tgz#b10451e0348165e31fad1cc23ebddd9dc7347c41"
+  integrity sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==
+  dependencies:
+    constantinople "^4.0.1"
+    js-stringify "^1.0.2"
+    pug-runtime "^3.0.0"
+
+pug-code-gen@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-3.0.2.tgz#ad190f4943133bf186b60b80de483100e132e2ce"
+  integrity sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==
+  dependencies:
+    constantinople "^4.0.1"
+    doctypes "^1.1.0"
+    js-stringify "^1.0.2"
+    pug-attrs "^3.0.0"
+    pug-error "^2.0.0"
+    pug-runtime "^3.0.0"
+    void-elements "^3.1.0"
+    with "^7.0.0"
+
+pug-error@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-2.0.0.tgz#5c62173cb09c34de2a2ce04f17b8adfec74d8ca5"
+  integrity sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==
+
+pug-filters@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-4.0.0.tgz#d3e49af5ba8472e9b7a66d980e707ce9d2cc9b5e"
+  integrity sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==
+  dependencies:
+    constantinople "^4.0.1"
+    jstransformer "1.0.0"
+    pug-error "^2.0.0"
+    pug-walk "^2.0.0"
+    resolve "^1.15.1"
+
+pug-lexer@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-5.0.1.tgz#ae44628c5bef9b190b665683b288ca9024b8b0d5"
+  integrity sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==
+  dependencies:
+    character-parser "^2.2.0"
+    is-expression "^4.0.0"
+    pug-error "^2.0.0"
+
+pug-linker@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-4.0.0.tgz#12cbc0594fc5a3e06b9fc59e6f93c146962a7708"
+  integrity sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==
+  dependencies:
+    pug-error "^2.0.0"
+    pug-walk "^2.0.0"
+
+pug-load@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-3.0.0.tgz#9fd9cda52202b08adb11d25681fb9f34bd41b662"
+  integrity sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==
+  dependencies:
+    object-assign "^4.1.1"
+    pug-walk "^2.0.0"
+
+pug-parser@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-6.0.0.tgz#a8fdc035863a95b2c1dc5ebf4ecf80b4e76a1260"
+  integrity sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==
+  dependencies:
+    pug-error "^2.0.0"
+    token-stream "1.0.0"
+
+pug-runtime@^3.0.0, pug-runtime@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-3.0.1.tgz#f636976204723f35a8c5f6fad6acda2a191b83d7"
+  integrity sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==
+
+pug-strip-comments@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz#f94b07fd6b495523330f490a7f554b4ff876303e"
+  integrity sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==
+  dependencies:
+    pug-error "^2.0.0"
+
+pug-walk@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-2.0.0.tgz#417aabc29232bb4499b5b5069a2b2d2a24d5f5fe"
+  integrity sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==
+
+pug@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/pug/-/pug-3.0.2.tgz#f35c7107343454e43bc27ae0ff76c731b78ea535"
+  integrity sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==
+  dependencies:
+    pug-code-gen "^3.0.2"
+    pug-filters "^4.0.0"
+    pug-lexer "^5.0.1"
+    pug-linker "^4.0.0"
+    pug-load "^3.0.0"
+    pug-parser "^6.0.0"
+    pug-runtime "^3.0.1"
+    pug-strip-comments "^2.0.0"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+request-light@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/request-light/-/request-light-0.5.4.tgz#497a98c6d8ae49536417a5e2d7f383b934f3e38c"
+  integrity sha512-t3566CMweOFlUk7Y1DJMu5OrtpoZEb6aSTsLQVT3wtrIEJ5NhcY9G/Oqxvjllzl4a15zXfFlcr9q40LbLVQJqw==
+
+resolve@^1.15.1, resolve@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+robust-predicates@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a"
+  integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==
+
+rollup@^2.57.0:
+  version "2.59.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.59.0.tgz#108c61b0fa0a37ebc8d1f164f281622056f0db59"
+  integrity sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+semver@^7.0.0, semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+token-stream@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
+  integrity sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=
+
+typescript@^4.4.3:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
+  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
+
+unplugin-auto-import@^0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-0.4.13.tgz#8986d47f0f521b485d4a870f7c39d951006420d4"
+  integrity sha512-tSN4eObmxVJQtDrpEo7VgWScbTOQU3r4NuD0+6vM55ORe3qMrJJcrOqEpqjRdAlI9edYa9p2TS0BxGECNKub+g==
+  dependencies:
+    "@antfu/utils" "^0.3.0"
+    "@rollup/pluginutils" "^4.1.1"
+    local-pkg "^0.1.0"
+    magic-string "^0.25.7"
+    resolve "^1.20.0"
+    unplugin "^0.2.15"
+
+unplugin@^0.2.15:
+  version "0.2.20"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.20.tgz#fd579b8f302459eb1ae3616f71c2ba93e6076187"
+  integrity sha512-CGnCaTqNjqeixpIlNEkpysxfR2hb4xv21xa4IURXnhYTfCp73UWuG0KcdanuhFJbwO5w+EGK4XaAaqdb/1vWbg==
+  dependencies:
+    webpack-virtual-modules "^0.4.3"
+
+upath@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
+  integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
+
+vite-plugin-windicss@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.5.1.tgz#bf15165da15cacadc3cdb8cc1a61d287cef2dc75"
+  integrity sha512-AUuRFT5Y7SfW9eclaKf5BOTZ7MMfkUZzOeVzqd9yq/uIwzWyleRtssCTuJgZ0+om+hnXn9YwcIpR26lsaasIbg==
+  dependencies:
+    "@windicss/plugin-utils" "1.5.1"
+    chalk "^4.1.2"
+    debug "^4.3.2"
+    windicss "^3.2.1"
+
+vite@^2.6.4:
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.13.tgz#16b3ec85a66d5b461ac29a903874d4357f9af432"
+  integrity sha512-+tGZ1OxozRirTudl4M3N3UTNJOlxdVo/qBl2IlDEy/ZpTFcskp+k5ncNjayR3bRYTCbqSOFz2JWGN1UmuDMScA==
+  dependencies:
+    esbuild "^0.13.2"
+    postcss "^8.3.8"
+    resolve "^1.20.0"
+    rollup "^2.57.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+void-elements@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
+
+vscode-css-languageservice@^5.1.4:
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-5.1.8.tgz#36cb389788ffc2d5e6630ffc84e55ee38f8a2338"
+  integrity sha512-Si1sMykS8U/p8LYgLGPCfZD1YFT0AtvUJQp9XJGw64DZWhtwYo28G2l64USLS9ge4ZPMZpwdpOK7PfbVKfgiiA==
+  dependencies:
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-types "^3.16.0"
+    vscode-nls "^5.0.0"
+    vscode-uri "^3.0.2"
+
+vscode-html-languageservice@^4.0.7:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-4.1.1.tgz#93739c9f3d0c12c8249bad23f5005850c289ec38"
+  integrity sha512-rrDyCiOgMwOPgchpPGAeLzjYVVEW/Ror2/a1BWUEI3S9+NQhA9vj4SQkzmH6g2Bq9S9SV0OQeadD+xphOf1N3w==
+  dependencies:
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-types "^3.16.0"
+    vscode-nls "^5.0.0"
+    vscode-uri "^3.0.2"
+
+vscode-json-languageservice@^4.1.7:
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-4.1.9.tgz#fb48edc69e37167c3cafd447c3fa898052d87b61"
+  integrity sha512-kxNHitUy2fCxmP6vAp0SRLrUSuecUYzzxlC+85cC3jJlFHWmvtCJOzikC+kcUnIdls9fQSB8n0yHs8Sl6taxJw==
+  dependencies:
+    jsonc-parser "^3.0.0"
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-types "^3.16.0"
+    vscode-nls "^5.0.0"
+    vscode-uri "^3.0.2"
+
+vscode-jsonrpc@8.0.0-next.3, vscode-jsonrpc@^8.0.0-next.2:
+  version "8.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.0.0-next.3.tgz#b55edff0e550b03f3804aade44aca2699af27255"
+  integrity sha512-2wRiBR5tZAXZ4UxIO4F0cT/zN6OpruoWO0vc7EpQZxVfumb0pYiSegB+PaOzXCuFQzh7YEshW/XMg4zTz3FGVQ==
+
+vscode-languageserver-protocol@3.17.0-next.9:
+  version "3.17.0-next.9"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.0-next.9.tgz#0fd4ad43611c96acd83d8d998dbe76668f60e604"
+  integrity sha512-DGkRmbI1hRBMY6HU6MOyza5AvYp0+HcbMf2qdmI98luyQJ26dOfHY5K38OS4hlTHhdJg9RypTQ/uBbLZehmn1Q==
+  dependencies:
+    vscode-jsonrpc "8.0.0-next.3"
+    vscode-languageserver-types "3.17.0-next.4"
+
+vscode-languageserver-textdocument@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.2.tgz#2f9f6bd5b5eb3d8e21424c0c367009216f016236"
+  integrity sha512-T7uPC18+f8mYE4lbVZwb3OSmvwTZm3cuFhrdx9Bn2l11lmp3SvSuSVjy2JtvrghzjAo4G6Trqny2m9XGnFnWVA==
+
+vscode-languageserver-types@3.17.0-next.4:
+  version "3.17.0-next.4"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.4.tgz#f6788b375ec163da8b381f2f3e3f547cbc7fbeec"
+  integrity sha512-MraVkZDhfqa3ftnKW9rEDeqsV+ji8OrtEjx6mVjzVGm5U2XXT+mdqDWyQ+y0Gvb2/aa2oJJQyTAaDmRTUKiUbg==
+
+vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.16.0:
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
+  integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==
+
+vscode-languageserver@^8.0.0-next.2:
+  version "8.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-8.0.0-next.3.tgz#36c701a6844ec269505539e3b84a37693760a52f"
+  integrity sha512-uxL/tKUa/gRdvQINVmMnK32d6LwfTPTvF7l1iZIFDuAdhGrQ+Po+4lS3w4hwQSeUmapM1WMELXNBFca/u3H5Uw==
+  dependencies:
+    vscode-languageserver-protocol "3.17.0-next.9"
+
+vscode-nls@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-5.0.0.tgz#99f0da0bd9ea7cda44e565a74c54b1f2bc257840"
+  integrity sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==
+
+vscode-pug-languageservice@^0.27.24:
+  version "0.27.24"
+  resolved "https://registry.yarnpkg.com/vscode-pug-languageservice/-/vscode-pug-languageservice-0.27.24.tgz#fa805c4d3e33dee3681e660a0767136738e68370"
+  integrity sha512-GSvsFB+rPhAD7cBlEKCVNNsFGIaOnp/0zyLw3WpYbXY24vJZafXu1kHvtYaaQXJRnIhqp5EI5p+EqpdI3hTBnw==
+  dependencies:
+    "@volar/code-gen" "^0.27.24"
+    "@volar/shared" "^0.27.24"
+    "@volar/source-map" "^0.27.24"
+    "@volar/transforms" "^0.27.24"
+    pug-lexer "^5.0.1"
+    pug-parser "^6.0.0"
+    vscode-languageserver "^8.0.0-next.2"
+
+vscode-typescript-languageservice@^0.27.25:
+  version "0.27.25"
+  resolved "https://registry.yarnpkg.com/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.27.25.tgz#acd211723b600108c25515388b75d55ce15bb056"
+  integrity sha512-nxpJI9MnF2rn5rKL/032Qrsq3T9DgM3slK5fwZp3suNdo90JG2zFTs3Ola8n62k7+KWu4A775obxyb4wLIW6Gw==
+  dependencies:
+    "@volar/shared" "^0.27.24"
+    semver "^7.3.5"
+    upath "^2.0.1"
+    vscode-languageserver "^8.0.0-next.2"
+    vscode-languageserver-textdocument "^1.0.1"
+
+vscode-uri@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
+  integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
+
+vscode-uri@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.2.tgz#ecfd1d066cb8ef4c3a208decdbab9a8c23d055d0"
+  integrity sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==
+
+vscode-vue-languageservice@^0.27.0:
+  version "0.27.30"
+  resolved "https://registry.yarnpkg.com/vscode-vue-languageservice/-/vscode-vue-languageservice-0.27.30.tgz#1f32b0203dd233582f74a457428519a6318f039e"
+  integrity sha512-nPnUNCMqqHfxcCPLyLWvmgbNCgos3SwvPcl/CzAnMbqcjLtNZppsdI7bKX3EEj0Jbg6SGLQ9NanIvZaMI1bsUA==
+  dependencies:
+    "@volar/code-gen" "^0.27.24"
+    "@volar/html2pug" "^0.27.13"
+    "@volar/shared" "^0.27.24"
+    "@volar/source-map" "^0.27.24"
+    "@volar/transforms" "^0.27.24"
+    "@vscode/emmet-helper" "^2.7.0"
+    "@vue/compiler-dom" "^3.2.19"
+    "@vue/reactivity" "^3.2.19"
+    "@vue/shared" "^3.2.19"
+    request-light "^0.5.4"
+    upath "^2.0.1"
+    vscode-css-languageservice "^5.1.4"
+    vscode-html-languageservice "^4.0.7"
+    vscode-json-languageservice "^4.1.7"
+    vscode-languageserver "^8.0.0-next.2"
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-pug-languageservice "^0.27.24"
+    vscode-typescript-languageservice "^0.27.25"
+
+vue-demi@*, vue-demi@latest:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
+vue-router@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.18"
+
+vue-tsc@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.3.0.tgz#3b3872bf4f1d2e4409b57adbd826032e253db406"
+  integrity sha512-zaDRZBxwRIz1XjhNP92FqugG71st6BUMnA2EwPeXrAyzbEYVRz6TezNFceYl3QYqqN8CtaxbqUhaQEDj/ntoCA==
+  dependencies:
+    vscode-vue-languageservice "^0.27.0"
+
+vue@^3.2.16:
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.21.tgz#55f5665172d95cf97e806b9aad0a375180be23a1"
+  integrity sha512-jpy7ckXdyclfRzqLjL4mtq81AkzQleE54KjZsJg/9OorNVurAxdlU5XpD49GpjKdnftuffKUvx2C5jDOrgc/zg==
+  dependencies:
+    "@vue/compiler-dom" "3.2.21"
+    "@vue/compiler-sfc" "3.2.21"
+    "@vue/runtime-dom" "3.2.21"
+    "@vue/server-renderer" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+webpack-virtual-modules@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz#cd597c6d51d5a5ecb473eea1983a58fa8a17ded9"
+  integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==
+
+windicss@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.2.1.tgz#bd0f7b9ebabba04ea8dfedcbb0263c2ef9591db4"
+  integrity sha512-LusrIrryBFHAPQ/OOTbS4EWWuzI6eGeJglI9nQ3kDBr1cqH69NWt8Z8q59f9kTkgptXroejmWfksWwqgHs8EVw==
+
+with@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"
+  integrity sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==
+  dependencies:
+    "@babel/parser" "^7.9.6"
+    "@babel/types" "^7.9.6"
+    assert-never "^1.2.1"
+    babel-walk "3.0.0-canary-5"
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 1c46d441..6e8db463 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -118,6 +118,7 @@ const edgePos = computed(() =>
 </script>
 <template>
   <g
+    v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.edge.type || 'default'}`,
@@ -136,7 +137,6 @@ const edgePos = computed(() =>
     @mouseleave="onEdgeMouseLeave"
   >
     <slot
-      v-if="!props.edge.isHidden && isVisible(edgePos)"
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 9b15d5f5..a585717a 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -32,9 +32,7 @@ const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
 <template>
   <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
-    <g
-      :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"
-    >
+    <g :transform="`translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`">
       <template v-for="edge of edges" :key="edge.id">
         <Edge
           :edge="edge"
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index b4017346..ca136c37 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
@@ -40,7 +39,9 @@ const hooks = useHooks()
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
-  prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
+  (prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
+  (prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
+  (prevTransform.zoom !== eventTransform.k && !isNaN(eventTransform.k))
 
 const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
   x: eventTransform.x,
@@ -52,7 +53,6 @@ const clampedX = clamp(props.defaultPosition[0], store.translateExtent[0][0], st
 const clampedY = clamp(props.defaultPosition[1], store.translateExtent[0][1], store.translateExtent[1][1])
 const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
 const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
-
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
 
@@ -93,10 +93,12 @@ until(zoomPaneEl)
           d3z.on('zoom', null)
         } else {
           d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-            const flowTransform = eventToFlowTransform(event.transform)
-            transform.value = flowTransform
+            if (viewChanged(transform.value, event.transform)) {
+              const flowTransform = eventToFlowTransform(event.transform)
+              transform.value = flowTransform
 
-            hooks.move.trigger(flowTransform)
+              hooks.move.trigger(flowTransform)
+            }
           })
         }
       })
@@ -190,7 +192,6 @@ store.dimensions = {
   width: width.value,
   height: height.value,
 }
-store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
 watch(width, (val) => (store.dimensions.width = val))
 watch(height, (val) => (store.dimensions.height = val))