feat: implement workspaces

examples/.gitignore

@@ -0,0 +1 @@
+auto-imports.d.ts

examples/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
 import ResizableNode from './ResizableNode.vue'
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '~/index'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -33,7 +33,7 @@ const updatePos = () =>
   })
 
 const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => elements.value.push({ id: '1234', position: { x: 50, y: 50 }, label: 'Foobar' })
+const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 <template>

examples/Basic/BasicOptionsAPI.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '~/index'
+import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',

examples/Basic/ResizableNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '~/index'
+import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface Props {
   id: string

examples/CustomConnectionLine/CustomConnectionLine.vue

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

examples/CustomNode/ColorSelectorNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, Position, Connection, Edge, NodeProps } from '~/index'
+import { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {

examples/CustomNode/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
-import { ConnectionMode, Controls, Elements, isEdge, MiniMap, Node, Position, SnapGrid, useVueFlow, VueFlow } from '~/index'
+import { ConnectionMode, Controls, Elements, isEdge, MiniMap, Node, Position, SnapGrid, useVueFlow, VueFlow } from '@braks/vue-flow'
 
 const elements = ref<Elements>([])
 const bgColor = ref('#1A192B')

examples/DragNDrop/DnD.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, FlowInstance, Node, useVueFlow } from '~/index'
+import { VueFlow, FlowInstance, Node, useVueFlow } from '@braks/vue-flow'
 
 let id = 0
 const getId = () => `dndnode_${id++}`

examples/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { VueFlow, MiniMap, Controls, FlowInstance } from '~/index'
+import { VueFlow, MiniMap, Controls, FlowInstance } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()

examples/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Elements, Position } from '../../src'
+import { Elements, Position } from '../../package/src'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2

examples/Edges/CustomEdge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getBezierPath, getMarkerId, Position, EdgeProps } from '~/index'
+import { getBezierPath, getMarkerId, Position, EdgeProps } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   source: string

examples/Edges/CustomEdge2.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string

examples/Edges/EdgesExample.vue

@@ -2,7 +2,7 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '@braks/vue-flow'
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },

examples/Empty/EmptyExample.vue

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

examples/Hidden/HiddenExample.vue

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

examples/Interaction/InteractionExample.vue

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

examples/Layouting/LayoutingExample.vue

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

examples/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Elements, XYPosition } from '~/index'
+import { Elements, XYPosition } from '@braks/vue-flow'
 
 const position: XYPosition = { x: 0, y: 0 }
 

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Elements } from '~/index'
+import { VueFlow, Background, Elements } from '@braks/vue-flow'
 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/Nesting/GroupNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '~/index'
-import type { NodeProps } from '~/index'
+import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, transform } = useVueFlow()

examples/Nesting/Nesting.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
+import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '@braks/vue-flow'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,

examples/NodeTypeChange/NodeTypeChangeExample.vue

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

examples/Overview/Overview.vue

@@ -14,7 +14,7 @@ import {
   Edge,
   FlowEvents,
   MarkerType,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)

examples/Provider/ProviderExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
+import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 

examples/Provider/Sidebar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '~/index'
+import { useVueFlow } from '@braks/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
 
 const selectAll = () => {

examples/RGBFlow/RGBFlow.vue

@@ -2,7 +2,7 @@
 import { templateRef } from '@vueuse/core'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow } from '~/index'
+import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 
 type Colors = {
   red: number

examples/RGBFlow/RGBNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {

examples/RGBFlow/RGBOutputNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string

examples/SaveRestore/Controls.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '~/index'
+import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {

examples/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },

examples/Stress/StressExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { VueFlow, FlowInstance } from '~/index'
+import { VueFlow, FlowInstance } from '@braks/vue-flow'
 
 const instance = ref<FlowInstance>()
 const onLoad = (flowInstance: FlowInstance) => {

examples/Stress/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from '~/index'
+import { Edge, Node } from '@braks/vue-flow'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/Unidirectional/CustomNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, Position } from '~/index'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface Props {
   id: string

examples/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
-import { VueFlow, useZoomPanHelper, Elements, Node, ConnectionLineType, ConnectionMode, MarkerType } from '~/index'
+import { VueFlow, useZoomPanHelper, Elements, Node, ConnectionLineType, ConnectionMode, MarkerType } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -10,7 +10,7 @@ import {
   Edge,
   FlowEvents,
   ConnectionMode,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

examples/UpdateNode/UpdateNodeExample.vue

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

examples/Validation/CustomInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '~/index'
+import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc

examples/Validation/CustomNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, NodeProps, ValidConnectionFunc } from '~/index'
+import { Position, Handle, NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string

examples/Validation/ValidationExample.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '~/index'
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, edges, addEdges } = useVueFlow({
   nodes: [

examples/index.css

@@ -1,3 +1,9 @@
+/* import the required styles */
+@import '@braks/vue-flow/dist/style.css';
+
+/* import the default theme (optional) */
+@import '@braks/vue-flow/dist/theme-default.css';
+
 body {
   color: #111;
   padding: 5px;

examples/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<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</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="./main.ts"></script>
+</body>
+</html>

examples/main.ts

@@ -1,17 +1,10 @@
 import { createApp } from 'vue'
 import './index.css'
-import { DraggablePlugin } from '@braks/revue-draggable'
 import App from './App.vue'
 import { router } from './router'
-/* import the required styles */
-import '../src/style.css'
-
-/* import the default theme (optional) */
-import '../src/theme-default.css'
 
 const app = createApp(App)
 
 app.config.performance = true
 app.use(router)
-app.use(DraggablePlugin)
 app.mount('#root')

examples/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "examples",
+  "version": "0.0.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bcakmakoglu/vue-flow"
+  },
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
+  "homepage": "https://vueflow.dev/",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite serve"
+  },
+  "dependencies": {
+    "@braks/vue-flow": "^0.4.0-17"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.46",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vue/compiler-sfc": "3.2.22",
+    "dagre": "^0.8.5",
+    "vite": "2.5.x",
+    "vite-plugin-vue-type-imports": "^0.1.3",
+    "vue": "3.2.21",
+    "vue-router": "^4.0.12"
+  }
+}

examples/tsconfig.json

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

examples/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

examples/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueTypes from 'vite-plugin-vue-type-imports'
+import AutoImport from 'unplugin-auto-import/vite'
+
+export default defineConfig({
+  root: '.',
+  plugins: [
+    vue(),
+    vueTypes(),
+    // https://github.com/antfu/unplugin-auto-import
+    AutoImport({
+      imports: ['vue', '@vueuse/core'],
+      dts: 'auto-imports.d.ts',
+    }),
+  ],
+  optimizeDeps: {
+    include: ['@braks/vue-flow'],
+  },
+})