refactor(additional-components): move additional components into separate pkg

docs/components/Repl.vue

@@ -71,6 +71,7 @@ onMounted(async () => {
   // pre-set import map
   store.setImportMap({
     imports: {
+      '@vue-flow/additional-components': `${location.origin}/additional-components.es.js`,
       '@vue-flow/core': `${location.origin}/vue-flow.es.js`,
       ...additionalImports,
     },

docs/components/examples/basic/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 

docs/components/examples/connectionline/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomConnectionLine from './CustomConnectionLine.vue'
 

docs/components/examples/custom-node/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { computed, h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'

docs/components/examples/edges/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'

docs/components/examples/empty/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

docs/components/examples/hidden/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watchEffect } from 'vue'
 
 const isHidden = ref(false)

docs/components/examples/horizontal/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 

docs/components/examples/nested/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { onMounted } from 'vue'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({

docs/components/examples/update-edge/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
+import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([

docs/components/home/flows/Additional.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 

docs/components/home/flows/Basic.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
-import { Background, ConnectionLineType, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls } from '@vue-flow/additional-components'
 import Cross from '~icons/mdi/window-close'
 
 const emit = defineEmits(['pane'])

docs/components/home/flows/Intro.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
+import { Background } from '@vue-flow/additional-components'
 import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'
 

docs/components/home/flows/Nested.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
+import { Background, Controls } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 

docs/components/home/flows/RGB.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type { MiniMapNodeFunc } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
+import type { MiniMapNodeFunc } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'

docs/package.json

@@ -14,6 +14,7 @@
     "@algolia/client-search": "^4.14.2",
     "@animxyz/core": "^0.6.6",
     "@animxyz/vue3": "^0.6.7",
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@stackblitz/sdk": "^1.8.0",
     "@vue/repl": "1.1.2",

docs/src/.vitepress/copy-plugin.ts

@@ -2,19 +2,28 @@ import { existsSync, readFileSync } from 'fs'
 import { resolve } from 'path'
 import type { Plugin } from 'vite'
 
+const copyFile = (path: string, pkgName: string) => {
+  const filePath = resolve(__dirname, `${path}/${pkgName}`)
+  if (!existsSync(filePath)) {
+    throw new Error(`${pkgName} not built. ` + `Run "pnpm -w build" first.`)
+  }
+
+  ;(this as any).emitFile({
+    type: 'asset',
+    fileName: pkgName,
+    source: readFileSync(filePath, 'utf-8'),
+  })
+}
+
 export function copyVueFlowPlugin(): Plugin {
   return {
     name: 'copy-vue-flow',
     generateBundle() {
-      const filePath = resolve(__dirname, '../../node_modules/@vue-flow/core/dist/vue-flow.es.js')
-      if (!existsSync(filePath)) {
-        throw new Error(`@vue-flow/core/dist/vue-flow.es.js not built. ` + `Run "pnpm -w build" first.`)
-      }
-
-      this.emitFile({
-        type: 'asset',
-        fileName: 'vue-flow.es.js',
-        source: readFileSync(filePath, 'utf-8'),
+      ;[
+        { path: '../../node_modules/@vue-flow/core/dist/', pkgName: 'vue-flow.es.js' },
+        { path: '../../node_modules/@vue-flow/additional-components/dist/', pkgName: 'additional-components.es.js' },
+      ].forEach((pkg) => {
+        copyFile.call(this, pkg.path, pkg.pkgName)
       })
     },
   }

e2e/cypress/component/3-additional-components/background/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/additional-components'
 </script>
 
 <template>

e2e/cypress/component/3-additional-components/controls/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Controls, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 </script>
 
 <template>

e2e/cypress/component/3-additional-components/minimap/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { MiniMap, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/additional-components'
 
 defineProps({
   nodes: {

e2e/package.json

@@ -7,6 +7,7 @@
     "open": "cypress open"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {

examples/nuxt3/components/BasicFlow.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { initialElements } from './initial-elements.js'
 
 /**

examples/nuxt3/package.json

@@ -9,6 +9,7 @@
     "dev": "nuxt dev"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {

examples/quasar/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@quasar/extras": "^1.15.4",
     "quasar": "^2.9.2",

examples/quasar/src/components/BasicFlow.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { initialElements } from './initial-elements.js'
 
 /**

examples/vite/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   rules: {
     'no-use-before-define': 0,
     'no-console': 0,
+    'no-unused-vars': 1,
   },
   extends: ['../../.eslintrc.js'],
 }

examples/vite/package.json

@@ -7,6 +7,7 @@
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',

examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant } from '@vue-flow/additional-components'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([

examples/vite/src/CustomNode/CustomNode.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { VueFlowStore } from '@vue-flow/core'
-import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 import { getElements } from './utils'
 
 const onLoad = (flowInstance: VueFlowStore) => {

examples/vite/src/Edges/CustomEdge.vue

@@ -15,7 +15,7 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
 }
 
 const props = defineProps<CustomEdgeProps>()
-const { id: storeId, applyEdgeChanges, getEdges } = useVueFlow()
+const { applyEdgeChanges, getEdges } = useVueFlow()
 
 const onClick = (evt: Event, id: string) => {
   applyEdgeChanges([{ type: 'remove', id }])

examples/vite/src/Edges/EdgesExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Edge, Node } from '@vue-flow/core'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'

examples/vite/src/Empty/EmptyExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Node } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'

examples/vite/src/Hidden/HiddenExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 
 const isHidden = ref(false)
 

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 
 const {
   nodesDraggable,

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Position, VueFlow, isNode } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()

examples/vite/src/MultiFlows/Flow.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/additional-components'
+
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },

examples/vite/src/Nesting/GroupNode.vue

@@ -3,14 +3,16 @@ import { Handle, Position, getNodesInside, useVueFlow } from '@vue-flow/core'
 import type { NodeProps } from '@vue-flow/core'
 
 const props = defineProps<NodeProps>()
+
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
+
 onNodeDragStop(({ node }) => {
   const nodes = getNodesInside(
     getNodes.value,
     {
       ...props.dimensions,
-      x: props.computedPosition.x,
-      y: props.computedPosition.y,
+      x: props.position.x,
+      y: props.position.y,
     },
     viewport.value,
   )

examples/vite/src/Nesting/Nesting.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
-const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { onConnect, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   nodes: [

examples/vite/src/Overview/Overview.vue

@@ -1,16 +1,7 @@
 <script lang="ts" setup>
-import type {
-  Connection,
-  Edge,
-  Elements,
-  FlowEvents,
-  Node,
-  SnapGrid,
-  Styles,
-  ViewpaneTransform,
-  VueFlowStore,
-} from '@vue-flow/core'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
+import type { Connection, Edge, Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
+import { MarkerType, VueFlow, addEdge } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

examples/vite/src/Provider/ProviderExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 
 const initialElements: Elements = [
   {

examples/vite/src/Validation/ValidationExample.vue

@@ -4,7 +4,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
-const { nodes, edges, addEdges } = useVueFlow({
+const { addEdges } = useVueFlow({
   nodes: [
     { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
     {

packages/additional-components/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    'no-use-before-define': 0,
+    'vue/no-setup-props-destructure': 0,
+  },
+  extends: ['../../.eslintrc.js'],
+  ignorePatterns: ['!**/*'],
+}

packages/additional-components/.gitignore

@@ -0,0 +1,99 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+.webpack
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+# Db-Data
+hasura/db_data/
+
+# Codegen types
+types/types.ts
+
+build

packages/additional-components/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "quoteProps": "consistent",
+  "bracketSpacing": true,
+  "printWidth": 130
+}

packages/additional-components/README.md

@@ -0,0 +1,84 @@
+# Vue Flow Resizable Rotatable Node
+
+### Custom Node that can be resized and rotated
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/core-resize-rotate-node
+
+# or
+$ npm i --save @vue-flow/core-resize-rotate-node
+```
+
+## 🎮 Quickstart
+
+```vue
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { ResizeRotateNode } from '@vue-flow/core-resize-rotate-node'
+import initialElements from './initial-elements'
+
+const elements = ref(initialElements)
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow v-model="elements">
+      <template #node-resize-rotate="props">
+        <ResizeRotateNode v-bind="props" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+```
+
+```js
+// initial-elements.js
+export default [
+  {
+    id: '1',
+    label: 'Node 1',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    sourcePosition: 'right',
+    position: {
+      x: 0,
+      y: 0,
+    },
+    data: {
+      // additional styles for the node
+      // cannot use the regular style tag as those apply to the node wrapper
+      style: {
+        background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: '2',
+    label: 'Node 2',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    position: {
+      x: 330,
+      y: 50,
+    },
+    data: {
+      style: {
+        background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'smoothstep',
+  },
+]
+```

packages/additional-components/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vue-flow/additional-components",
+  "version": "0.0.1",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/background"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-additional-components.cjs.js",
+  "module": "./dist/vue-flow-additional-components.es.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-additional-components.iife.js",
+  "jsdelivr": "./dist/vue-flow-additional-components.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
+    "typedoc": "typedoc --options ./typedoc.json",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37",
+    "@vue-flow/core": "^0.4.41"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.3.0"
+  },
+  "devDependencies": {
+    "@vue-flow/core": "workspace:*",
+    "@vitejs/plugin-vue": "^2.3.4",
+    "unplugin-auto-import": "^0.11.2",
+    "vite": "^2.9.15",
+    "vite-svg-loader": "^3.6.0",
+    "vite-plugin-vue-type-imports": "0.2.0",
+    "vue-tsc": "^0.40.13"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

packages/additional-components/src/auto-imports.d.ts

@@ -0,0 +1,255 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  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 onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}

packages/additional-components/src/background/Background.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { BackgroundVariant } from '../../types'
-import { useVueFlow } from '../../composables'
-import type { BackgroundProps } from '../../types/components'
+import { useVueFlow } from '@vue-flow/core'
+import { BackgroundVariant } from './types'
+import type { BackgroundProps } from './types'
 
 const {
   variant = 'dots' as BackgroundVariant,
@@ -20,13 +20,13 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const { viewport } = $(useVueFlow())
+const { viewport } = useVueFlow()
 
 const background = $computed(() => {
-  const scaledGap = gap && gap * viewport.zoom
-  const xOffset = scaledGap && viewport.x % scaledGap
-  const yOffset = scaledGap && viewport.y % scaledGap
-  const bgSize = size * viewport.zoom
+  const scaledGap = gap && gap * viewport.value.zoom
+  const xOffset = scaledGap && viewport.value.x % scaledGap
+  const yOffset = scaledGap && viewport.value.y % scaledGap
+  const bgSize = size * viewport.value.zoom
 
   return {
     scaledGap,

packages/additional-components/src/background/index.ts

@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'

packages/additional-components/src/background/types.ts

@@ -0,0 +1,25 @@
+export enum BackgroundVariant {
+  Lines = 'lines',
+  Dots = 'dots',
+}
+
+export interface BackgroundProps {
+  /** The background pattern variant, {@link BackgroundVariant} */
+  variant?: BackgroundVariant
+  /** Background pattern gap */
+  gap?: number
+  /** Background pattern size */
+  size?: number
+  /** Background pattern color */
+  patternColor?: string
+  /** Background color */
+  bgColor?: string
+  /** Background height */
+  height?: number
+  /** Background width */
+  width?: number
+  /** Background x-coordinate (offset x) */
+  x?: number
+  /** Background y-coordinate (offset y) */
+  y?: number
+}

packages/additional-components/src/controls/Controls.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useVueFlow } from '../../composables'
-import type { ControlProps } from '../../types/components'
+import { useVueFlow } from '@vue-flow/core'
+import type { ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
-import PlusIcon from '~/assets/icons/plus.svg'
-import MinusIcon from '~/assets/icons/minus.svg'
-import FitView from '~/assets/icons/fitview.svg'
-import Lock from '~/assets/icons/lock.svg'
-import Unlock from '~/assets/icons/unlock.svg'
+import PlusIcon from './icons/plus.svg'
+import MinusIcon from './icons/minus.svg'
+import FitView from './icons/fitview.svg'
+import Lock from './icons/lock.svg'
+import Unlock from './icons/unlock.svg'
 
 const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
 

packages/additional-components/src/controls/index.ts

@@ -0,0 +1,4 @@
+export { default as Controls } from './Controls.vue'
+export { default as ControlButton } from './ControlButton.vue'
+
+export * from './types'

packages/additional-components/src/controls/types.ts

@@ -0,0 +1,12 @@
+import type { FitViewParams } from '@vue-flow/core'
+
+export interface ControlProps {
+  /** Show the zoom icon */
+  showZoom?: boolean
+  /** Show the fit-view icon */
+  showFitView?: boolean
+  /** Show the interactive icon */
+  showInteractive?: boolean
+  /** Params to use on fitView */
+  fitViewParams?: FitViewParams
+}

packages/additional-components/src/index.ts

@@ -0,0 +1,3 @@
+export * from './background'
+export * from './controls'
+export * from './minimap'

packages/additional-components/src/minimap/MiniMap.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { GraphNode, MiniMapNodeFunc, ShapeRendering } from '../../types'
-import { useVueFlow, useWindow } from '../../composables'
-import { getBoundsofRects, getConnectedEdges, getRectOfNodes } from '../../utils'
-import type { MiniMapProps } from '../../types/components'
+import type { GraphNode } from '@vue-flow/core'
+import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
+import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode'
 
 const {
@@ -20,12 +19,10 @@ const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMo
 
 const attrs: Record<string, any> = useAttrs()
 
-const window = useWindow()
-
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { edges, viewport, dimensions, emits, getNodes } = $(useVueFlow())
+const { edges, viewport, dimensions, emits, getNodes } = useVueFlow()
 
 const elementWidth = $computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
@@ -40,20 +37,18 @@ const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
-const bb = $computed(() => {
-  return getRectOfNodes(getNodes)
-})
+const bb = $computed(() => getRectOfNodes(getNodes.value))
 
 const viewBB = $computed(() => ({
-  x: -viewport.x / viewport.zoom,
-  y: -viewport.y / viewport.zoom,
-  width: dimensions.width / viewport.zoom,
-  height: dimensions.height / viewport.zoom,
+  x: -viewport.value.x / viewport.value.zoom,
+  y: -viewport.value.y / viewport.value.zoom,
+  width: dimensions.value.width / viewport.value.zoom,
+  height: dimensions.value.height / viewport.value.zoom,
 }))
 
 const viewBox = $(
   controlledComputed($$(viewBB), () => {
-    const boundingRect = getNodes && getNodes.length ? getBoundsofRects(bb, viewBB) : viewBB
+    const boundingRect = getNodes && getNodes.value.length ? getBoundsofRects(bb, viewBB) : viewBB
     const scaledWidth = boundingRect.width / elementWidth
     const scaledHeight = boundingRect.height / elementHeight
     const viewScale = Math.max(scaledWidth, scaledHeight)
@@ -87,31 +82,31 @@ const d = controlledComputed($$(viewBox), () => {
 })
 
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeClick(param)
   emit('nodeClick', param)
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeDoubleClick(param)
   emit('nodeDblclick', param)
 }
 
 const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseEnter(param)
   emit('nodeMouseenter', param)
 }
 
 const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseMove(param)
   emit('nodeMousemove', param)
 }
 
 const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseLeave(param)
   emit('nodeMouseleave', param)
 }

packages/additional-components/src/minimap/MiniMapNode.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, FunctionalComponent } from 'vue'
-import type { MiniMapNodeProps } from '~/types'
+import type { MiniMapNodeProps } from './types'
 
 const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
   {

packages/additional-components/src/minimap/index.ts

@@ -0,0 +1,4 @@
+export { default as MiniMap } from './MiniMap.vue'
+export { default as MiniMapNode } from './MiniMapNode'
+
+export * from './types'

packages/additional-components/src/minimap/types.ts

@@ -0,0 +1,43 @@
+import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
+import type { CSSProperties } from 'vue'
+
+/** expects a node and returns a color value */
+export type MiniMapNodeFunc = (node: GraphNode) => string
+// hack for vue-type imports
+type MiniMapNodeFunc2 = (node: GraphNode) => string
+type MiniMapNodeFunc3 = (node: GraphNode) => string
+
+export type ShapeRendering = CSSProperties['shapeRendering']
+
+export interface MiniMapProps {
+  /** Node color, can be either a string or a string func that receives the current node */
+  nodeColor?: string | MiniMapNodeFunc
+  /** Node stroke color, can be either a string or a string func that receives the current node */
+  nodeStrokeColor?: string | MiniMapNodeFunc2
+  /** Additional node class name, can be either a string or a string func that receives the current node */
+  nodeClassName?: string | MiniMapNodeFunc3
+  /** Node border radius */
+  nodeBorderRadius?: number
+  /** Node stroke width */
+  nodeStrokeWidth?: number
+  /** Background color of minimap */
+  maskColor?: string
+
+  width?: number
+  height?: number
+}
+
+/** these props are passed to mini map node slots */
+export interface MiniMapNodeProps {
+  id: string
+  parentNode?: string
+  selected?: boolean
+  dragging?: boolean
+  position: XYPosition
+  dimensions: Dimensions
+  borderRadius?: number
+  color?: string
+  shapeRendering?: ShapeRendering
+  strokeColor?: string
+  strokeWidth?: number
+}

packages/additional-components/src/window-shims.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  chrome: any
+}

packages/additional-components/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2017",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "types": ["vite/client", "vue/macros"],
+    "paths": {
+      "~/*": ["src/*"]
+    },
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/additional-components/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
+  "files": ["package.json"]
+}

packages/additional-components/vite.config.ts

@@ -0,0 +1,48 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import vueTypes from 'vite-plugin-vue-type-imports'
+import svgLoader from 'vite-svg-loader'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    dedupe: ['vue'],
+    extensions: ['.ts', '.vue'],
+  },
+  build: {
+    minify: 'esbuild',
+    emptyOutDir: false,
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'vueFlowBackground',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue', '@vue-flow/core'],
+      output: {
+        dir: './dist',
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          'vue': 'Vue',
+          '@vue-flow/core': 'VueFlow',
+        },
+      },
+    },
+  },
+  plugins: [
+    vue({
+      reactivityTransform: true,
+    }),
+    vueTypes(),
+    AutoImport({
+      imports: ['vue', '@vueuse/core', 'vue/macros'],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    svgLoader(),
+  ],
+})

packages/vue-flow/package.json

@@ -58,7 +58,6 @@
     "unplugin-auto-import": "^0.11.2",
     "vite": "^2.9.15",
     "vite-plugin-vue-type-imports": "0.2.0",
-    "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^0.40.13"
   },
   "publishConfig": {

packages/vue-flow/src/additional-components/index.ts

@@ -1,5 +0,0 @@
-export { default as MiniMap } from './MiniMap/MiniMap.vue'
-export { default as MiniMapNode } from './MiniMap/MiniMapNode'
-export { default as Controls } from './Controls/Controls.vue'
-export { default as ControlButton } from './Controls/ControlButton.vue'
-export { default as Background } from './Background/Background.vue'

packages/vue-flow/src/custom.d.ts

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

packages/vue-flow/src/env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-svg-loader" />
 /// <reference types="vue/macros-global" />
 
 declare module '*.vue' {

packages/vue-flow/src/index.ts

@@ -26,6 +26,7 @@ export {
   graphPosToZoomedPos,
   getNodesInside,
   getMarkerId,
+  getBoundsofRects,
 } from './utils/graph'
 
 /**
@@ -48,6 +49,4 @@ export { default as useNode } from './composables/useNode'
 
 export { default as useEdge } from './composables/useEdge'
 
-export * from './additional-components'
-
 export * from './types'

packages/vue-flow/src/types/components.ts

@@ -1,8 +1,6 @@
 import type { CSSProperties, Component, DefineComponent, SVGAttributes, VNode } from 'vue'
-import type { BackgroundVariant, Dimensions, XYPosition } from './flow'
-import type { GraphNode, NodeProps } from './node'
+import type { NodeProps } from './node'
 import type { EdgeProps } from './edge'
-import type { FitViewParams } from './zoom'
 
 /** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string
@@ -20,79 +18,6 @@ export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, an
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
 export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent }
 
-export interface BackgroundProps {
-  /** The background pattern variant, {@link BackgroundVariant} */
-  variant?: BackgroundVariant
-  /** Background pattern gap */
-  gap?: number
-  /** Background pattern size */
-  size?: number
-  /** Background pattern color */
-  patternColor?: string
-  /** Background color */
-  bgColor?: string
-  /** Background height */
-  height?: number
-  /** Background width */
-  width?: number
-  /** Background x-coordinate (offset x) */
-  x?: number
-  /** Background y-coordinate (offset y) */
-  y?: number
-}
-
-export interface ControlProps {
-  /** Show the zoom icon */
-  showZoom?: boolean
-  /** Show the fit-view icon */
-  showFitView?: boolean
-  /** Show the interactive icon */
-  showInteractive?: boolean
-  /** Params to use on fitView */
-  fitViewParams?: FitViewParams
-}
-
-/** expects a node and returns a color value */
-export type MiniMapNodeFunc = (node: GraphNode) => string
-// hack for vue-type imports
-type MiniMapNodeFunc2 = (node: GraphNode) => string
-type MiniMapNodeFunc3 = (node: GraphNode) => string
-
-export type ShapeRendering = CSSProperties['shapeRendering']
-
-export interface MiniMapProps {
-  /** Node color, can be either a string or a string func that receives the current node */
-  nodeColor?: string | MiniMapNodeFunc
-  /** Node stroke color, can be either a string or a string func that receives the current node */
-  nodeStrokeColor?: string | MiniMapNodeFunc2
-  /** Additional node class name, can be either a string or a string func that receives the current node */
-  nodeClassName?: string | MiniMapNodeFunc3
-  /** Node border radius */
-  nodeBorderRadius?: number
-  /** Node stroke width */
-  nodeStrokeWidth?: number
-  /** Background color of minimap */
-  maskColor?: string
-
-  width?: number
-  height?: number
-}
-
-/** these props are passed to mini map node slots */
-export interface MiniMapNodeProps {
-  id: string
-  parentNode?: string
-  selected?: boolean
-  dragging?: boolean
-  position: XYPosition
-  dimensions: Dimensions
-  borderRadius?: number
-  color?: string
-  shapeRendering?: ShapeRendering
-  strokeColor?: string
-  strokeWidth?: number
-}
-
 /** these props are passed to edge texts */
 export interface EdgeTextProps extends SVGAttributes {
   x: number

packages/vue-flow/src/types/flow.ts

@@ -58,11 +58,6 @@ export interface Rect extends Dimensions, XYPosition {}
 
 export type SnapGrid = [number, number]
 
-export enum BackgroundVariant {
-  Lines = 'lines',
-  Dots = 'dots',
-}
-
 export interface SelectionRect extends Rect {
   startX: number
   startY: number

packages/vue-flow/vite.config.ts

@@ -2,7 +2,6 @@ import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueTypes from 'vite-plugin-vue-type-imports'
-import svgLoader from 'vite-svg-loader'
 import AutoImport from 'unplugin-auto-import/vite'
 import replace from '@rollup/plugin-replace'
 import pkg from './package.json'
@@ -43,7 +42,6 @@ export default defineConfig({
       reactivityTransform: true,
     }),
     vueTypes(),
-    svgLoader(),
     AutoImport({
       imports: ['vue', '@vueuse/core', 'vue/macros'],
       dts: 'src/auto-imports.d.ts',

pnpm-lock.yaml

@@ -31,11 +31,12 @@ importers:
       '@algolia/client-search': ^4.14.2
       '@animxyz/core': ^0.6.6
       '@animxyz/vue3': ^0.6.7
-      '@vue-flow/core': workspace:*
       '@iconify/json': ^2.1.95
       '@stackblitz/sdk': ^1.8.0
       '@types/canvas-confetti': ^1.4.3
       '@types/node': ^18.7.8
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       '@vue/repl': 1.1.2
       '@windicss/plugin-scrollbar': ^1.2.3
       blobity: ^0.2.1
@@ -55,8 +56,9 @@ importers:
       '@algolia/client-search': 4.14.2
       '@animxyz/core': 0.6.6
       '@animxyz/vue3': 0.6.7_vue@3.2.37
-      '@vue-flow/core': link:../packages/vue-flow
       '@stackblitz/sdk': 1.8.0
+      '@vue-flow/additional-components': link:../packages/additional-components
+      '@vue-flow/core': link:../packages/vue-flow
       '@vue/repl': 1.1.2_vue@3.2.37
       blobity: 0.2.1_react@18.2.0+vue@3.2.37
       canvas-confetti: 1.5.1
@@ -79,10 +81,12 @@ importers:
 
   e2e:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       cypress: ^10.9.0
     dependencies:
+      '@vue-flow/additional-components': link:../packages/additional-components
       '@vue-flow/core': link:../packages/vue-flow
     devDependencies:
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
@@ -90,27 +94,31 @@ importers:
 
   examples/nuxt3:
     specifiers:
+      '@vue-flow/additional-components': workspace:*
       '@vue-flow/core': workspace:*
       nuxt: 3.0.0-rc.11
     dependencies:
+      '@vue-flow/additional-components': link:../../packages/additional-components
       '@vue-flow/core': link:../../packages/vue-flow
     devDependencies:
       nuxt: 3.0.0-rc.11_rollup@2.79.1+vite@3.1.6
 
   examples/quasar:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@quasar/app-vite': ^1.0.5
       '@quasar/extras': ^1.15.4
       '@types/node': ^18.8.3
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       autoprefixer: ^10.4.12
       quasar: ^2.9.2
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
-      '@vue-flow/core': link:../../packages/vue-flow
       '@quasar/extras': 1.15.4
+      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/core': link:../../packages/vue-flow
       quasar: 2.9.2
       vue: 3.2.37
       vue-router: 4.1.5_vue@3.2.37
@@ -122,9 +130,10 @@ importers:
 
   examples/vite:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@types/dagre': ^0.7.47
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       dagre: ^0.8.5
       unplugin-auto-import: ^0.6.9
       vite: 2.9.15
@@ -133,6 +142,7 @@ importers:
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
+      '@vue-flow/additional-components': link:../../packages/additional-components
       '@vue-flow/core': link:../../packages/vue-flow
     devDependencies:
       '@types/dagre': 0.7.47
@@ -145,11 +155,53 @@ importers:
       vue: 3.2.37
       vue-router: 4.1.5_vue@3.2.37
 
+  packages/additional-components:
+    specifiers:
+      '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
+      '@vueuse/core': ^9.3.0
+      unplugin-auto-import: ^0.11.2
+      vite: ^2.9.15
+      vite-plugin-vue-type-imports: 0.2.0
+      vite-svg-loader: ^3.6.0
+      vue: ^3.2.37
+      vue-tsc: ^0.40.13
+    dependencies:
+      '@vueuse/core': 9.3.0_vue@3.2.40
+      vue: 3.2.40
+    devDependencies:
+      '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
+      '@vue-flow/core': link:../vue-flow
+      unplugin-auto-import: 0.11.2_xpj53exthnjz7scid2fe37xep4
+      vite: 2.9.15
+      vite-plugin-vue-type-imports: 0.2.0_s5ljmfbyjcorxzsah2scwznsai
+      vite-svg-loader: 3.6.0
+      vue-tsc: 0.40.13_typescript@4.8.4
+
+  packages/example-pkg:
+    specifiers:
+      '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
+      unplugin-auto-import: ^0.11.2
+      vite: ^2.9.15
+      vite-plugin-vue-type-imports: 0.2.0
+      vue: ^3.2.37
+      vue-tsc: ^0.40.13
+    dependencies:
+      vue: 3.2.40
+    devDependencies:
+      '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
+      '@vue-flow/core': link:../vue-flow
+      unplugin-auto-import: 0.11.2_vite@2.9.15
+      vite: 2.9.15
+      vite-plugin-vue-type-imports: 0.2.0_s5ljmfbyjcorxzsah2scwznsai
+      vue-tsc: 0.40.13_typescript@4.8.4
+
   packages/pathfinding-edge:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@types/pathfinding': ^0.0.5
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
       pathfinding: ^0.4.18
       perfect-arrows: ^0.3.7
       ts-patch: ^2.0.1
@@ -164,9 +216,9 @@ importers:
       perfect-arrows: 0.3.7
       vue: 3.2.37
     devDependencies:
-      '@vue-flow/core': link:../vue-flow
       '@types/pathfinding': 0.0.5
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
+      '@vue-flow/core': link:../vue-flow
       ts-patch: 2.0.1_typescript@4.8.4
       typescript-transform-paths: 3.3.1_typescript@4.8.4
       unplugin-auto-import: 0.11.2_vite@2.9.15
@@ -176,8 +228,8 @@ importers:
 
   packages/resize-rotate-node:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
       '@vueuse/core': ^8.9.4
       ts-patch: ^2.0.1
       typescript-transform-paths: ^3.3.1
@@ -192,8 +244,8 @@ importers:
       vue: 3.2.37
       vue3-moveable: 0.4.9_@types+react@16.9.56
     devDependencies:
-      '@vue-flow/core': link:../vue-flow
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
+      '@vue-flow/core': link:../vue-flow
       ts-patch: 2.0.1_typescript@4.8.4
       typescript-transform-paths: 3.3.1_typescript@4.8.4
       unplugin-auto-import: 0.11.2_tz26lugnys4zsg624icbm2tdye
@@ -221,7 +273,6 @@ importers:
       unplugin-auto-import: ^0.11.2
       vite: ^2.9.15
       vite-plugin-vue-type-imports: 0.2.0
-      vite-svg-loader: ^3.6.0
       vue: ^3.2.25
       vue-tsc: ^0.40.13
     dependencies:
@@ -245,7 +296,6 @@ importers:
       unplugin-auto-import: 0.11.2_c3fy6twyvcjpks2csaqlppkdyi
       vite: 2.9.15
       vite-plugin-vue-type-imports: 0.2.0_ak2iftdnrkoetwl5f6az77kdzy
-      vite-svg-loader: 3.6.0
       vue-tsc: 0.40.13_typescript@4.7.4
 
 packages:
@@ -730,7 +780,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.19.3
-    dev: true
 
   /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.19.3:
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
@@ -2467,11 +2516,10 @@ packages:
   /@vue/compiler-core/3.2.40:
     resolution: {integrity: sha512-2Dc3Stk0J/VyQ4OUr2yEC53kU28614lZS+bnrCbFSAIftBJ40g/2yQzf4mPBiFuqguMB7hyHaujdgZAQ67kZYA==}
     dependencies:
-      '@babel/parser': 7.18.9
+      '@babel/parser': 7.19.3
       '@vue/shared': 3.2.40
       estree-walker: 2.0.2
       source-map: 0.6.1
-    dev: true
 
   /@vue/compiler-dom/3.2.37:
     resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
@@ -2484,7 +2532,6 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/compiler-sfc/3.2.37:
     resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==}
@@ -2503,7 +2550,7 @@ packages:
   /@vue/compiler-sfc/3.2.40:
     resolution: {integrity: sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==}
     dependencies:
-      '@babel/parser': 7.18.9
+      '@babel/parser': 7.19.3
       '@vue/compiler-core': 3.2.40
       '@vue/compiler-dom': 3.2.40
       '@vue/compiler-ssr': 3.2.40
@@ -2513,7 +2560,6 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.16
       source-map: 0.6.1
-    dev: true
 
   /@vue/compiler-ssr/3.2.37:
     resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==}
@@ -2526,7 +2572,6 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/devtools-api/6.2.1:
     resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
@@ -2543,12 +2588,11 @@ packages:
   /@vue/reactivity-transform/3.2.40:
     resolution: {integrity: sha512-HQUCVwEaacq6fGEsg2NUuGKIhUveMCjOk8jGHqLXPI2w6zFoPrlQhwWEaINTv5kkZDXKEnCijAp+4gNEHG03yw==}
     dependencies:
-      '@babel/parser': 7.18.9
+      '@babel/parser': 7.19.3
       '@vue/compiler-core': 3.2.40
       '@vue/shared': 3.2.40
       estree-walker: 2.0.2
       magic-string: 0.25.9
-    dev: true
 
   /@vue/reactivity/3.2.37:
     resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==}
@@ -2565,7 +2609,6 @@ packages:
     resolution: {integrity: sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==}
     dependencies:
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/repl/1.1.2_vue@3.2.37:
     resolution: {integrity: sha512-IYcoKZgwdn6spiVwGuWeXAbqAv3Nhjc/0dKEJ3BT5U6kV7KLLCwnuizjOvV8P+yFmtsfNkWbmWv9/56Pv5rH/w==}
@@ -2586,7 +2629,6 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/runtime-dom/3.2.37:
     resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
@@ -2601,7 +2643,6 @@ packages:
       '@vue/runtime-core': 3.2.40
       '@vue/shared': 3.2.40
       csstype: 2.6.20
-    dev: true
 
   /@vue/server-renderer/3.2.37_vue@3.2.37:
     resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@@ -2620,7 +2661,6 @@ packages:
       '@vue/compiler-ssr': 3.2.40
       '@vue/shared': 3.2.40
       vue: 3.2.40
-    dev: true
 
   /@vue/shared/3.2.37:
     resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
@@ -2631,7 +2671,6 @@ packages:
 
   /@vue/shared/3.2.40:
     resolution: {integrity: sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==}
-    dev: true
 
   /@vueuse/core/8.9.4_vue@3.2.37:
     resolution: {integrity: sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==}
@@ -2661,6 +2700,17 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/core/9.3.0_vue@3.2.40:
+    resolution: {integrity: sha512-64Rna8IQDWpdrJxgitDg7yv1yTp41ZmvV8zlLEylK4QQLWAhz1OFGZDPZ8bU4lwcGgbEJ2sGi2jrdNh4LttUSQ==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.15
+      '@vueuse/metadata': 9.3.0
+      '@vueuse/shared': 9.3.0_vue@3.2.40
+      vue-demi: 0.13.6_vue@3.2.40
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /@vueuse/head/0.7.13_vue@3.2.40:
     resolution: {integrity: sha512-VHSla/0uOAUii/mz+NWLFKMrMbz/lQoYxEcpS/ri7drepYjdB5QdbTnD2KdOX8EmQM/b07qpjKanr7erGrd3XA==}
     peerDependencies:
@@ -2707,7 +2757,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
 
   /@windicss/config/1.8.7:
     resolution: {integrity: sha512-8n+/Y36j5L3rw2tgMdLjeGRuNV7VYfKoHoraLK6Bk9OJ1MTPd5vv7pekof/uOPWVV7WWjVeZ6CTO8SDbDDW3iw==}
@@ -9198,7 +9247,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact/10.10.0:
     resolution: {integrity: sha512-fszkg1iJJjq68I4lI8ZsmBiaoQiQHbxf1lNq+72EmC/mZOsFF5zn3k1yv9QGoFgIXzgsdSKtYymLJsrJPoamjQ==}
@@ -11084,6 +11132,29 @@ packages:
       - webpack
     dev: true
 
+  /unplugin-auto-import/0.11.2_xpj53exthnjz7scid2fe37xep4:
+    resolution: {integrity: sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.5.2
+      '@rollup/pluginutils': 4.2.1
+      '@vueuse/core': 9.3.0_vue@3.2.40
+      local-pkg: 0.4.2
+      magic-string: 0.26.2
+      unimport: 0.6.7_vite@2.9.15
+      unplugin: 0.9.3_vite@2.9.15
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
   /unplugin-auto-import/0.6.9_vite@2.9.15:
     resolution: {integrity: sha512-IqgT7AoRrNQwNhiF/wDH3sMEDX8SqCYBEgJzwdg5441b5aiC5VwZz0J0wYqkaKu89YkZE9DG6rQ2JpFfZv1iiQ==}
     engines: {node: '>=14'}
@@ -11554,6 +11625,16 @@ packages:
       vue: 3.2.37
     dev: true
 
+  /vite-plugin-vue-type-imports/0.2.0_s5ljmfbyjcorxzsah2scwznsai:
+    resolution: {integrity: sha512-6rukBj1MP27WfsY5gqMZJg/Z8whK7f9oLbpICBDwzwOK2Oj7KkbP7IgFc2p3qInuB51SvUuxIIcJQVoUPaW6Nw==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.2.24
+      vue: ^3.2.24
+    dependencies:
+      '@vue/compiler-sfc': 3.2.40
+      vue: 3.2.40
+    dev: true
+
   /vite-plugin-windicss/1.8.7_vite@2.9.15:
     resolution: {integrity: sha512-/zwQ8+RV+MSkbG0IGqsEma6r2R01NzN/aNpNjJD7VVAkxAptNznqDXOObFTskkWfZ+9m6KJZCOuCPgAFtQIzEA==}
     peerDependencies:
@@ -11781,7 +11862,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.40
-    dev: true
 
   /vue-devtools-stub/0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -11861,7 +11941,6 @@ packages:
       '@vue/runtime-dom': 3.2.40
       '@vue/server-renderer': 3.2.40_vue@3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /vue3-moveable/0.4.9_@types+react@16.9.56:
     resolution: {integrity: sha512-B5hLiVBcvqvflOydKOPYKrQhRZRMqbgfbpD2ZEalFKVqxJm2YRcE5al48Bq6K8w5Fg1ce3YvndfuYYgpQ0Vcfw==}