update(examples): Fix examples

examples/App.tsx

@@ -1,20 +0,0 @@
-import { computed, defineComponent } from 'vue'
-import Header from './Header'
-import { useRoute } from 'vue-router'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    Header
-  },
-  setup() {
-    const route = useRoute()
-    const key = computed(() => route.fullPath)
-    return () => (
-      <>
-        <Header />
-        <router-view ref="view" key={key.value} />
-      </>
-    )
-  }
-})

examples/App.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import Header from './Header.vue'
+</script>
+<template>
+  <Header />
+  <router-view />
+</template>

examples/Basic/Basic.vue

@@ -1,30 +1,5 @@
-<template>
+<script lang="ts" setup>
-  <RevueFlow
+import Flow, {
-    v-model="elements"
-    class="revue-flow-basic-example"
-    :onElementsRemove="onElementsRemove"
-    :onConnect="onConnect"
-    :onNodeDragStop="onNodeDragStop"
-    :onNodeClick="onElementClick"
-    :defaultZoom="1.5"
-    :minZoom="0.2"
-    :maxZoom="4"
-    @elementClick="onElementClick"
-    @load="onLoad"
-  >
-    <MiniMap />
-    <Controls />
-    <Background color="#aaa" :gap="8" />
-    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
-      <button @click="resetTransform" style="margin-right: 5px">reset transform</button>
-      <button @click="updatePos" style="margin-right: 5px">change pos</button>
-      <button @click="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
-      <button @click="logToObject">toObject</button>
-    </div>
-  </RevueFlow>
-</template>
-<script lang="ts">
-import RevueFlow, {
   MiniMap,
   Controls,
   Background,
@@ -35,68 +10,74 @@ import RevueFlow, {
   OnLoadParams,
   addEdge,
   isNode,
-  removeElements
+  removeElements,
-} from '../../src';
+  Node,
-import { defineComponent, ref } from 'vue';
+} from '~/index'
 
-const BasicFlow = defineComponent({
+const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
-  components: { RevueFlow, MiniMap, Controls, Background },
+const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
-  setup() {
+const elements = ref<Elements>([
-    const onNodeDragStop = ({ node }) => console.log('drag stop', node);
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-    const onElementClick = ({ node }) => console.log('click', node);
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-    const elements = ref<Elements>([
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-      { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
-      { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
-      { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: 'e1-3', source: '1', target: '3' },
-      { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+] as Elements)
-      { id: 'e1-2', source: '1', target: '2', animated: true },
+const rfInstance = ref<OnLoadParams | null>(null)
-      { id: 'e1-3', source: '1', target: '3' }
+const onElementsRemove = (elementsToRemove: Elements) =>
-    ] as Elements);
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
-    const rfInstance = ref<OnLoadParams | null>(null);
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements))
-    const onElementsRemove = (elementsToRemove: Elements) =>
+const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance)
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements));
-    const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
 
-    const updatePos = () => {
+const updatePos = () => {
-      elements.value = elements.value.map((el: FlowElement) => {
+  elements.value = elements.value.map((el: FlowElement) => {
-        if (isNode(el)) {
+    if (isNode(el)) {
-          el.position = {
+      el.position = {
-            x: Math.random() * 400,
+        x: Math.random() * 400,
-            y: Math.random() * 400
+        y: Math.random() * 400,
-          };
+      }
-        }
+    }
 
-        return el;
+    return el
-      });
+  })
-    };
+}
 
-    const logToObject = () => console.log(rfInstance.value?.toObject());
+const logToObject = () => console.log(rfInstance.value?.toObject())
-    const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
+const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 
-    const toggleClassnames = () => {
+const toggleClassnames = () => {
-      elements.value = elements.value.map((el: FlowElement) => {
+  elements.value = elements.value.map((el: FlowElement) => {
-        if (isNode(el)) {
+    if (isNode(el)) {
-          el.className = el.className === 'light' ? 'dark' : 'light';
+      el.className = el.className === 'light' ? 'dark' : 'light'
-        }
+    }
 
-        return el;
+    return el
-      });
+  })
-    };
+}
-    return {
-      onLoad,
-      onConnect,
-      onElementClick,
-      onElementsRemove,
-      onNodeDragStop,
-      logToObject,
-      resetTransform,
-      toggleClassnames,
-      updatePos,
-      elements
-    };
-  }
-});
-
-export default BasicFlow;
 </script>
+<template>
+  <Flow
+    class="revue-flow-basic-example"
+    :elements="elements"
+    :on-elements-remove="onElementsRemove"
+    :on-connect="onConnect"
+    :on-node-drag-stop="onNodeDragStop"
+    :on-node-click="onElementClick"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    @elementClick="onElementClick"
+    @load="onLoad"
+  >
+    <MiniMap />
+    <Controls />
+    <Background color="#aaa" :gap="8" />
+    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
+      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
+      <button style="margin-right: 5px" @click="updatePos">change pos</button>
+      <button style="margin-right: 5px" @click="toggleClassnames">toggle classnames</button>
+      <button @click="logToObject">toObject</button>
+    </div>
+  </Flow>
+</template>

examples/CustomConnectionLine/ConnectionLine.vue

@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+import { ConnectionLineComponentProps } from '~/index'
+
+interface ConnectionLineProps extends ConnectionLineComponentProps {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+const props = defineProps<ConnectionLineProps>()
+</script>
 <template>
   <g>
     <path
@@ -5,33 +16,8 @@
       fill="none"
       stroke="#222"
       :stroke-width="1.5"
-      :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
+      :d="`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
     />
-    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
   </g>
 </template>
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { ConnectionLineComponentProps } from '../../src';
-
-export default defineComponent({
-  props: {
-    sourceX: {
-      type: Number as PropType<ConnectionLineComponentProps['sourceX']>,
-      required: true
-    },
-    sourceY: {
-      type: Number as PropType<ConnectionLineComponentProps['sourceY']>,
-      required: true
-    },
-    targetX: {
-      type: Number as PropType<ConnectionLineComponentProps['targetX']>,
-      required: true
-    },
-    targetY: {
-      type: Number as PropType<ConnectionLineComponentProps['targetY']>,
-      required: true
-    }
-  }
-});
-</script>

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,41 +1,21 @@
-<template>
+<script lang="ts" setup>
-  <RevueFlow
+import ConnectionLine from './ConnectionLine.vue'
-    v-model="elements"
+import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
-    :connection-line-component="ConnectionLine"
-    @elementsRemove="onElementsRemove"
-    @connect="onConnect"
-  >
-    <Background :variant="bgVariant" />
-  </RevueFlow>
-</template>
-<script lang="ts">
-import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
 
-import ConnectionLine from './ConnectionLine.vue';
+const elements = ref<Elements>([
-import { defineComponent, ref } from 'vue';
+  {
-
+    id: '1',
-export default defineComponent({
+    type: 'input',
-  components: { RevueFlow, Background },
+    data: { label: 'Node 1' },
-  setup() {
+    position: { x: 250, y: 5 },
-    const elements = ref<Elements>([
+  },
-      {
+] as Elements)
-        id: '1',
+const onElementsRemove = (elementsToRemove: Elements) =>
-        type: 'input',
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
-        data: { label: 'Node 1' },
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
-        position: { x: 250, y: 5 }
-      }
-    ] as Elements);
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
-
-    return {
-      ConnectionLine,
-      elements,
-      onElementsRemove,
-      onConnect,
-      bgVariant: BackgroundVariant.Lines
-    };
-  }
-});
 </script>
+<template>
+  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elementsRemove="onElementsRemove" @connect="onConnect">
+    <Background :variant="BackgroundVariant.Lines" />
+  </Flow>
+</template>

examples/CustomNode/ColorSelectorNode.vue

@@ -1,43 +1,35 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Handle, Position, Connection, Edge, NodeProps } from '~/index'
+
+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>
-  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
+  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
   <div>
     Custom Color Picker Node: <strong>{{ data.color }}</strong>
   </div>
-  <input class="nodrag" type="color" :value="data.color" @input="onChange" />
+  <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" />
 </template>
-<script lang="ts">
-import { CSSProperties, defineComponent, PropType } from 'vue';
-import { Handle, Position, Connection, Edge } from '../../src';
-
-const ColorSelectorNode = defineComponent({
-  components: { Handle },
-  inheritAttrs: false,
-  props: {
-    data: {
-      type: Object as PropType<{ color: string; onChange: (event: any) => any }>,
-      required: false,
-      default: () => {}
-    }
-  },
-  setup(props) {
-    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);
-
-    return {
-      Position,
-      targetHandleStyle,
-      sourceHandleStyleA,
-      sourceHandleStyleB,
-      onConnect,
-      onChange: props.data.onChange
-    };
-  }
-});
-
-export default ColorSelectorNode;
-</script>

examples/CustomNode/CustomNode.vue

@@ -1,25 +1,6 @@
-<template>
+<script lang="ts" setup>
-  <RevueFlow
+import ColorSelectorNode from './ColorSelectorNode.vue'
-    v-model="elements"
+import Flow, {
-    :onElementClick="onElementClick"
-    :onElementsRemove="onElementsRemove"
-    :onConnect="onConnect"
-    :onNodeDragStop="onNodeDragStop"
-    :style="`background: ${bgColor}`"
-    :onLoad="onLoad"
-    :nodeTypes="nodeTypes"
-    :connectionLineStyle="connectionLineStyle"
-    :snapToGrid="true"
-    :snapGrid="snapGrid"
-    :defaultZoom="1.5"
-  >
-    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
-    <Controls />
-  </RevueFlow>
-</template>
-<script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
-import RevueFlow, {
   isEdge,
   removeElements,
   addEdge,
@@ -32,124 +13,120 @@ import RevueFlow, {
   Position,
   SnapGrid,
   Connection,
-  Edge
+  Edge,
-} from '../../src';
+} from '~/index'
-import ColorSelectorNode from './ColorSelectorNode.vue';
 
-const CustomNodeFlow = defineComponent({
+const elements = ref<Elements>([])
-  components: { RevueFlow, MiniMap, Controls },
+const bgColor = ref('#1A192B')
-  setup() {
+const connectionLineStyle = { stroke: '#fff' }
-    const connectionLineStyle = { stroke: '#fff' };
+const snapGrid: SnapGrid = [16, 16]
-    const snapGrid: SnapGrid = [16, 16];
+const nodeTypes = {
-    const nodeTypes = {
+  selectorNode: ColorSelectorNode,
-      selectorNode: ColorSelectorNode
+}
-    };
 
-    const onLoad = (revueFlowInstance: OnLoadParams) => {
+const onLoad = (revueFlowInstance: OnLoadParams) => {
-      revueFlowInstance.fitView();
+  revueFlowInstance.fitView()
-      console.log('flow loaded:', revueFlowInstance);
+  console.log('flow loaded:', revueFlowInstance)
-    };
+}
-    const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
-    const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
-    const nodeStroke = (n: Node): string => {
+const nodeStroke = (n: Node): string => {
-      if (n.type === 'input') return '#0041d0';
+  if (n.type === 'input') return '#0041d0'
-      if (n.type === 'selectorNode') return bgColor.value;
+  if (n.type === 'selectorNode') return bgColor.value
-      if (n.type === 'output') return '#ff0072';
+  if (n.type === 'output') return '#ff0072'
-      return '#eee';
+  return '#eee'
-    };
+}
-    const nodeColor = (n: Node): string => {
+const nodeColor = (n: Node): string => {
-      if (n.type === 'selectorNode') return bgColor.value;
+  if (n.type === 'selectorNode') return bgColor.value
-      return '#fff';
+  return '#fff'
-    };
+}
 
-    const elements = ref<Elements>([]);
+onMounted(() => {
-    const bgColor = ref('#1A192B');
+  const onChange = (event: Event) => {
+    elements.value = elements.value.map((e: FlowElement) => {
+      if (isEdge(e) || e.id !== '2') {
+        return e
+      }
 
-    onMounted(() => {
+      const color = (event.target as HTMLInputElement).value
-      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
 
-          bgColor.value = color;
+      return {
-
+        ...e,
-          return {
+        data: {
-            ...e,
+          ...e.data,
-            data: {
+          color,
-              ...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: 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' } }
-      ] as Elements;
-    });
-
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onConnect = (params: Connection | Edge) =>
-      (elements.value = addEdge(
-        {
-          ...params,
-          animated: true,
-          style: { stroke: '#fff' }
-        } as Edge,
-        elements.value as Elements
-      ));
-
-    return {
-      elements,
-      onConnect,
-      onElementsRemove,
-      onLoad,
-      onNodeDragStop,
-      onElementClick,
-      nodeStroke,
-      nodeColor,
-      connectionLineStyle,
-      snapGrid,
-      nodeTypes,
-      bgColor
-    };
   }
-});
 
-export default CustomNodeFlow;
+  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' } },
+  ] as Elements
+})
+
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+
+const onConnect = (params: Connection | Edge) =>
+  (elements.value = addEdge(
+    {
+      ...params,
+      animated: true,
+      style: { stroke: '#fff' },
+    } as Edge,
+    elements.value as Elements,
+  ))
 </script>
+<template>
+  <Flow
+    :elements="elements"
+    :on-element-click="onElementClick"
+    :on-elements-remove="onElementsRemove"
+    :on-connect="onConnect"
+    :on-node-drag-stop="onNodeDragStop"
+    :style="`background: ${bgColor}`"
+    :on-load="onLoad"
+    :node-types="nodeTypes"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    :default-zoom="1.5"
+  >
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+    <Controls />
+  </Flow>
+</template>

examples/DragNDrop/DnD.vue

@@ -1,86 +1,58 @@
+<script lang="ts" setup>
+import Sidebar from './Sidebar.vue'
+import Flow, { addEdge, removeElements, Controls, OnLoadParams, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import './dnd.css'
+
+const revueFlowInstance = ref<OnLoadParams>()
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input node' },
+    position: { x: 250, y: 5 },
+  },
+] as Elements)
+
+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 as Elements))
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance)
+
+const onDrop = (event: DragEvent) => {
+  event.preventDefault()
+
+  if (revueFlowInstance.value) {
+    console.log(event.dataTransfer?.getData('application/revueflow'))
+    const type = event.dataTransfer?.getData('application/revueflow')
+    const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
+    const newNode = {
+      id: getId(),
+      type,
+      position,
+      data: { label: `${type} node` },
+    } as Node
+
+    elements.value.push(newNode)
+  }
+}
+</script>
 <template>
   <div class="dndflow">
     <div class="revueflow-wrapper" @drop="onDrop">
-      <RevueFlow v-model="elements" @elementsRemove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
+      <Flow :elements="elements" @elementsRemove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
         <Controls />
-      </RevueFlow>
+      </Flow>
     </div>
     <Sidebar />
   </div>
 </template>
-<script lang="ts">
-import RevueFlow, {
-  addEdge,
-  removeElements,
-  Controls,
-  OnLoadParams,
-  Elements,
-  Connection,
-  Edge,
-  ElementId,
-  Node
-} from '../../src';
-import Sidebar from './Sidebar';
-
-import './dnd.css';
-import { defineComponent, ref } from 'vue';
-
-const DnDFlow = defineComponent({
-  components: { RevueFlow, Controls, Sidebar },
-  setup() {
-    const revueFlowInstance = ref<OnLoadParams>();
-    const elements = ref<Elements>([
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'input node' },
-        position: { x: 250, y: 5 }
-      }
-    ] as Elements);
-
-    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 as Elements));
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance);
-
-    const onDrop = (event: DragEvent) => {
-      event.preventDefault();
-
-      if (revueFlowInstance.value) {
-        console.log(event.dataTransfer?.getData('application/revueflow'));
-        const type = event.dataTransfer?.getData('application/revueflow');
-        const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
-        const newNode = {
-          id: getId(),
-          type,
-          position,
-          data: { label: `${type} node` }
-        } as Node;
-
-        elements.value.push(newNode);
-      }
-    };
-
-    return {
-      onConnect,
-      onElementsRemove,
-      onLoad,
-      onDrop,
-      onDragOver,
-      elements
-    };
-  }
-});
-
-export default DnDFlow;
-</script>

examples/DragNDrop/Sidebar.tsx

@@ -1,25 +0,0 @@
-const onDragStart = (event: DragEvent, nodeType: string) => {
-  if (event.dataTransfer) {
-    event.dataTransfer.setData('application/revueflow', nodeType)
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const Sidebar = () => {
-  return (
-    <aside>
-      <div class="description">You can drag these nodes to the pane on the left.</div>
-      <div class="revue-flow__node-input" onDragstart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
-        Input Node
-      </div>
-      <div class="revue-flow__node-default" onDragstart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
-        Default Node
-      </div>
-      <div class="revue-flow__node-output" onDragstart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
-        Output Node
-      </div>
-    </aside>
-  )
-}
-
-export default Sidebar

examples/DragNDrop/Sidebar.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/revueflow', nodeType)
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+</script>
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane on the left.</div>
+    <div class="revue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+      Input Node
+    </div>
+    <div class="revue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+      Default Node
+    </div>
+    <div class="revue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+      Output Node
+    </div>
+  </aside>
+</template>

examples/EdgeTypes/EdgeTypesExample.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+/**
+ * Example for checking the different edge types and source and target positions
+ */
+import { getElements } from './utils'
+import Flow, { removeElements, addEdge, MiniMap, Controls, Background, OnLoadParams, Connection, Edge, Elements } from '~/index'
+
+const onLoad = (reactFlowInstance: OnLoadParams) => {
+  reactFlowInstance.fitView()
+  console.log(reactFlowInstance.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" :on-load="onLoad" :on-elements-remove="onElementsRemove" :on-connect="onConnect" :min-zoom="0.2" />
+</template>

examples/EdgeTypes/index.tsx

@@ -1,43 +0,0 @@
-/**
- * Example for checking the different edge types and source and target positions
- */
-import RevueFlow, {
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  OnLoadParams,
-  Connection,
-  Edge,
-  Elements
-} from '../../src'
-import { getElements } from './utils'
-import { defineComponent, ref } from 'vue'
-
-const onLoad = (reactFlowInstance: OnLoadParams) => {
-  reactFlowInstance.fitView()
-  console.log(reactFlowInstance.getElements())
-}
-
-const initialElements = getElements()
-
-const EdgeTypesFlow = defineComponent({
-  setup() {
-    const elements = ref<Elements>(initialElements)
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-
-    return () => (
-      <RevueFlow
-        v-model={elements.value}
-        onLoad={onLoad}
-        onElementsRemove={onElementsRemove}
-        onConnect={onConnect}
-        minZoom={0.2}
-      ></RevueFlow>
-    )
-  }
-})
-
-export default EdgeTypesFlow

examples/EdgeWithButton/ButtonEdge.vue

@@ -59,12 +59,12 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" :style="props.style" class="revue-flow__edge-path" :d="edgePath.value" :marker-end="markerEnd.value" />
+  <path :id="props.id" :style="props.style" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <foreignObject
-    width="foreignObjectSize"
+    :width="foreignObjectSize"
-    height="foreignObjectSize"
+    :height="foreignObjectSize"
-    :x="center.value[0] - foreignObjectSize / 2"
+    :x="center[0] - foreignObjectSize / 2"
-    :y="center.value[1] - foreignObjectSize / 2"
+    :y="center[1] - foreignObjectSize / 2"
     class="edgebutton-foreignobject"
     requiredExtensions="http://www.w3.org/1999/xhtml"
   >

examples/EdgeWithButton/EdgeWithButton.vue

@@ -1,7 +1,47 @@
+<script lang="ts" setup>
+import ButtonEdge from './ButtonEdge.vue'
+import Flow, {
+  addEdge,
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  EdgeType,
+  Elements,
+  MiniMap,
+  OnLoadParams,
+  removeElements,
+} from '~/index'
+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',
+  },
+] as Elements)
+
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onConnect = (params: Connection | Edge) =>
+  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements))
+</script>
 <template>
-  <RevueFlow
+  <Flow
     key="edge-with-button"
-    v-model="elements"
+    :elements="elements"
     :snap-to-grid="true"
     :edge-types="edgeTypes"
     @load="onLoad"
@@ -11,59 +51,5 @@
     <MiniMap />
     <Controls />
     <Background />
-  </RevueFlow>
+  </Flow>
 </template>
-<script lang="ts">
-import ButtonEdge from './ButtonEdge';
-import { defineComponent, ref } from 'vue';
-import RevueFlow, {
-  addEdge,
-  Background,
-  Connection,
-  Controls,
-  Edge,
-  Elements,
-  MiniMap,
-  OnLoadParams,
-  removeElements
-} from '../../src';
-
-export default defineComponent({
-  components: { RevueFlow, Background, Controls, MiniMap },
-  setup() {
-    const edgeTypes = {
-      buttonedge: ButtonEdge as any
-    };
-
-    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'
-      }
-    ] as Elements);
-
-    const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onConnect = (params: Connection | Edge) =>
-      (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements));
-
-    return {
-      onLoad,
-      onElementsRemove,
-      onConnect,
-      elements,
-      edgeTypes
-    };
-  }
-});
-</script>

examples/Empty/EmptyExample.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import Flow, {
+  MiniMap,
+  Controls,
+  Background,
+  BackgroundVariant,
+  Connection,
+  Edge,
+  ElementId,
+  Elements,
+  FlowElement,
+  Node,
+  OnLoadParams,
+} from '~/index'
+import { addEdge, removeElements } from '~/utils/graph'
+
+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 = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+const onNodeDragStop = (_: MouseEvent, 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"
+    :on-load="onLoad"
+    :on-element-click="onElementClick"
+    :on-elements-remove="onElementsRemove"
+    :on-connect="(p) => onConnect(p)"
+    :on-node-drag-stop="onNodeDragStop"
+    :only-render-visible-elements="false"
+  >
+    <MiniMap />
+    <Controls />
+    <Background :variant="BackgroundVariant.Lines" />
+
+    <button type="button" :style="buttonStyle" @click="addRandomNode">add node</button>
+  </Flow>
+</template>

examples/Empty/index.tsx

@@ -1,64 +0,0 @@
-import RevueFlow, {
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  OnLoadParams,
-  Elements,
-  ElementId,
-  Node,
-  FlowElement,
-  BackgroundVariant,
-  Connection,
-  Edge
-} from '../../src'
-import { CSSProperties, defineComponent, ref } from 'vue'
-
-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
-
-const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
-
-const EmptyFlow = defineComponent({
-  setup() {
-    {
-      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 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]
-      }
-
-      return () => (
-        <RevueFlow
-          v-model={elements.value}
-          onLoad={onLoad}
-          onElementClick={onElementClick}
-          onElementsRemove={onElementsRemove}
-          onConnect={(p) => onConnect(p)}
-          onNodeDragStop={onNodeDragStop}
-          onlyRenderVisibleElements={false}
-        >
-          <MiniMap />
-          <Controls />
-          <Background variant={BackgroundVariant.Lines} />
-
-          <button type="button" onClick={addRandomNode} style={buttonStyle}>
-            add node
-          </button>
-        </RevueFlow>
-      )
-    }
-  }
-})
-
-export default EmptyFlow

examples/Header.tsx

@@ -1,32 +0,0 @@
-import { defineComponent } from 'vue'
-import { routes } from './router'
-import { useRoute, useRouter } from 'vue-router'
-
-const Header = defineComponent({
-  setup() {
-    const router = useRouter()
-    const route = useRoute()
-    const onChange = async (event: any) => {
-      await router.push(event.target.value)
-    }
-
-    return () => (
-      <header>
-        <a class="logo" href="https://github.com/bcakmakoglu/revue-flow">
-          Revue Flow Dev
-        </a>
-        <select v-model={route.path} onChange={onChange}>
-          {routes.map((route) =>
-            route.path !== '/' ? (
-              <option value={route.path} key={route.path}>
-                {route.path.substr(1, route.path.length)}
-              </option>
-            ) : null
-          )}
-        </select>
-      </header>
-    )
-  }
-})
-
-export default Header

examples/Header.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router'
+import { routes } from './router'
+
+const router = useRouter()
+const route = useRoute()
+const onChange = (event: any) => {
+  router.push(event.target.value)
+}
+</script>
+<template>
+  <header>
+    <a class="logo" href="https://github.com/bcakmakoglu/revue-flow"> Revue Flow Dev </a>
+    <select v-model="route.path" @change="onChange">
+      <template v-for="(r, i) of routes" :key="`route-${i}`">
+        <option v-if="r.path !== '/'" :value="r.path">
+          {{ r.path.substr(1, r.path.length) }}
+        </option>
+      </template>
+    </select>
+  </header>
+</template>

examples/Hidden/HiddenExample.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+
+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' },
+] as Elements
+
+const elements = ref<Elements>(initialElements)
+const isHidden = ref<boolean>(false)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+watchEffect(() => {
+  console.log(isHidden.value)
+  elements.value = elements.value.map((e) => {
+    e.isHidden = isHidden.value
+    return e
+  })
+})
+
+const toggle = (event: any) => {
+  console.log(event.target)
+  isHidden.value = event.target?.checked
+}
+</script>
+<template>
+  <Flow :elements="elements" :on-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="revue-flow__ishidden" />
+        </label>
+      </div>
+    </div>
+  </Flow>
+</template>

examples/Hidden/index.tsx

@@ -1,51 +0,0 @@
-import RevueFlow, { addEdge, MiniMap, Controls, Connection, Edge, Elements } from '../../src'
-import { defineComponent, ref, watchEffect } from 'vue'
-
-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' }
-] as Elements
-
-const HiddenFlow = defineComponent({
-  setup() {
-    const elements = ref<Elements>(initialElements)
-    const isHidden = ref<boolean>(false)
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-
-    watchEffect(() => {
-      console.log(isHidden.value)
-      elements.value = elements.value.map((e) => {
-        e.isHidden = isHidden.value
-        return e
-      })
-    })
-
-    const toggle = (event) => {
-      console.log(event.target)
-      isHidden.value = event.target?.checked
-    }
-
-    return () => (
-      <RevueFlow v-model={elements.value} onConnect={onConnect}>
-        <MiniMap />
-        <Controls />
-
-        <div style={{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }}>
-          <div>
-            <label htmlFor="ishidden">
-              isHidden
-              <input id="ishidden" type="checkbox" v-model={isHidden.value} class="revue-flow__ishidden" />
-            </label>
-          </div>
-        </div>
-      </RevueFlow>
-    )
-  }
-})
-
-export default HiddenFlow

examples/Interaction/InteractionExample.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import Flow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Elements,
+  Node,
+  FlowElement,
+  Connection,
+  Edge,
+  PanOnScrollMode,
+  FlowTransform,
+} from '~/index'
+
+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' },
+] as Elements
+
+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"
+    :on-connect="onConnect"
+    :on-element-click="captureElementClick ? onElementClick : undefined"
+    :on-node-drag-start="onNodeDragStart"
+    :on-node-drag-stop="onNodeDragStop"
+    :pane-moveable="paneMoveable"
+    :on-pane-click="captureZoomClick ? onPaneClick : undefined"
+    :on-pane-scroll="captureZoomScroll ? onPaneScroll : undefined"
+    :on-pane-context-menu="captureZoomClick ? onPaneContextMenu : undefined"
+    :on-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="revue-flow__draggable" />
+        </label>
+      </div>
+      <div>
+        <label for="connectable">
+          nodesConnectable
+          <input id="connectable" v-model="isConnectable" type="checkbox" class="revue-flow__connectable" />
+        </label>
+      </div>
+      <div>
+        <label for="selectable">
+          elementsSelectable
+          <input id="selectable" v-model="isSelectable" type="checkbox" class="revue-flow__selectable" />
+        </label>
+      </div>
+      <div>
+        <label for="zoomonscroll">
+          zoomOnScroll
+          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="revue-flow__zoomonscroll" />
+        </label>
+      </div>
+      <div>
+        <label for="zoomonpinch">
+          zoomOnPinch
+          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="revue-flow__zoomonpinch" />
+        </label>
+      </div>
+      <div>
+        <label for="panonscroll">
+          panOnScroll
+          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="revue-flow__panonscroll" />
+        </label>
+      </div>
+      <div>
+        <label>
+          panOnScrollMode
+          <select id="panonscrollmode" v-model="panOnScrollMode" class="revue-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="revue-flow__zoomondbl" />
+        </label>
+      </div>
+      <div>
+        <label for="panemoveable">
+          paneMoveable
+          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="revue-flow__panemoveable" />
+        </label>
+      </div>
+      <div>
+        <label for="capturezoompaneclick">
+          capture onPaneClick
+          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="revue-flow__capturezoompaneclick" />
+        </label>
+      </div>
+      <div>
+        <label for="capturezoompanescroll">
+          capture onPaneScroll
+          <input
+            id="capturezoompanescroll"
+            v-model="captureZoomScroll"
+            type="checkbox"
+            class="revue-flow__capturezoompanescroll"
+          />
+        </label>
+      </div>
+      <div>
+        <label for="captureelementclick">
+          capture onElementClick
+          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="revue-flow__captureelementclick" />
+        </label>
+      </div>
+    </div>
+  </Flow>
+</template>

examples/Interaction/index.tsx

@@ -1,172 +0,0 @@
-import RevueFlow, {
-  addEdge,
-  MiniMap,
-  Controls,
-  Elements,
-  Node,
-  FlowElement,
-  Connection,
-  Edge,
-  PanOnScrollMode,
-  FlowTransform
-} from '../../src'
-import { defineComponent, ref } from 'vue'
-
-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' }
-] as Elements
-
-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 InteractionFlow = defineComponent({
-  setup() {
-    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)
-
-    return () => (
-      <RevueFlow
-        v-model={elements.value}
-        elementsSelectable={isSelectable.value}
-        nodesConnectable={isConnectable.value}
-        nodesDraggable={isDraggable.value}
-        zoomOnScroll={zoomOnScroll.value}
-        zoomOnPinch={zoomOnPinch.value}
-        panOnScroll={panOnScroll.value}
-        panOnScrollMode={panOnScrollMode.value}
-        zoomOnDoubleClick={zoomOnDoubleClick.value}
-        onConnect={onConnect}
-        onElementClick={captureElementClick.value ? onElementClick : undefined}
-        onNodeDragStart={onNodeDragStart}
-        onNodeDragStop={onNodeDragStop}
-        paneMoveable={paneMoveable.value}
-        onPaneClick={captureZoomClick.value ? onPaneClick : undefined}
-        onPaneScroll={captureZoomScroll.value ? onPaneScroll : undefined}
-        onPaneContextMenu={captureZoomClick.value ? onPaneContextMenu : undefined}
-        onMoveEnd={onMoveEnd}
-      >
-        <MiniMap />
-        <Controls />
-
-        <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
-          <div>
-            <label htmlFor="draggable">
-              nodesDraggable
-              <input id="draggable" type="checkbox" v-model={isDraggable.value} class="revue-flow__draggable" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="connectable">
-              nodesConnectable
-              <input id="connectable" type="checkbox" v-model={isConnectable.value} class="revue-flow__connectable" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="selectable">
-              elementsSelectable
-              <input id="selectable" type="checkbox" v-model={isSelectable.value} class="revue-flow__selectable" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="zoomonscroll">
-              zoomOnScroll
-              <input id="zoomonscroll" type="checkbox" v-model={zoomOnScroll.value} class="revue-flow__zoomonscroll" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="zoomonpinch">
-              zoomOnPinch
-              <input id="zoomonpinch" type="checkbox" v-model={zoomOnPinch.value} class="revue-flow__zoomonpinch" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="panonscroll">
-              panOnScroll
-              <input id="panonscroll" type="checkbox" v-model={panOnScroll.value} class="revue-flow__panonscroll" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="panonscrollmode">
-              panOnScrollMode
-              <select id="panonscrollmode" v-model={panOnScrollMode.value} class="revue-flow__panonscrollmode">
-                <option value="free">free</option>
-                <option value="horizontal">horizontal</option>
-                <option value="vertical">vertical</option>
-              </select>
-            </label>
-          </div>
-          <div>
-            <label htmlFor="zoomondbl">
-              zoomOnDoubleClick
-              <input id="zoomondbl" type="checkbox" v-model={zoomOnDoubleClick.value} class="revue-flow__zoomondbl" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="panemoveable">
-              paneMoveable
-              <input id="panemoveable" type="checkbox" v-model={paneMoveable.value} class="revue-flow__panemoveable" />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="capturezoompaneclick">
-              capture onPaneClick
-              <input
-                id="capturezoompaneclick"
-                type="checkbox"
-                v-model={captureZoomClick.value}
-                class="revue-flow__capturezoompaneclick"
-              />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="capturezoompanescroll">
-              capture onPaneScroll
-              <input
-                id="capturezoompanescroll"
-                type="checkbox"
-                v-model={captureZoomScroll.value}
-                class="revue-flow__capturezoompanescroll"
-              />
-            </label>
-          </div>
-          <div>
-            <label htmlFor="captureelementclick">
-              capture onElementClick
-              <input
-                id="captureelementclick"
-                type="checkbox"
-                v-model={captureElementClick.value}
-                class="revue-flow__captureelementclick"
-              />
-            </label>
-          </div>
-        </div>
-      </RevueFlow>
-    )
-  }
-})
-
-export default InteractionFlow

examples/main.ts

@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
 import './index.css'
-import App from './App'
-import { router } from './router'
 import { createPinia } from 'pinia'
 import { DraggablePlugin } from '@braks/revue-draggable'
+import App from './App.vue'
+import { router } from './router'
 
 const app = createApp(App)
 

examples/router.ts

@@ -31,19 +31,19 @@ export const routes: RouterOptions['routes'] = [
   },
   {
     path: '/edge-types',
-    component: () => import('./EdgeTypes'),
+    component: () => import('./EdgeTypes/EdgeTypesExample.vue'),
   },
   {
     path: '/empty',
-    component: () => import('./Empty'),
+    component: () => import('./Empty/EmptyExample.vue'),
   },
   {
     path: '/hidden',
-    component: () => import('./Hidden'),
+    component: () => import('./Hidden/HiddenExample.vue'),
   },
   {
     path: '/interaction',
-    component: () => import('./Interaction'),
+    component: () => import('./Interaction/InteractionExample.vue'),
   },
   {
     path: '/super-flow',

src/container/Flow/Flow.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import '~/style.css'
 import '~/theme-default.css'
-import { CSSProperties, onBeforeUnmount } from 'vue'
+import { CSSProperties, onBeforeUnmount, watchPostEffect } from 'vue'
 import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
 import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
@@ -27,14 +27,14 @@ import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components
 import { createEdgeTypes } from '~/container/EdgeRenderer/utils'
 import { createNodeTypes } from '~/container/NodeRenderer/utils'
 
-interface RevueFlowProps {
+export interface FlowProps {
   elements: Elements
   nodeTypes?: Record<string, NodeType>
   edgeTypes?: Record<string, EdgeType>
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  connectionLineComponent?: CustomConnectionLine
+  customConnectionLine?: CustomConnectionLine
   deleteKeyCode?: KeyCode
   selectionKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode
@@ -64,8 +64,8 @@ interface RevueFlowProps {
   edgeUpdaterRadius?: number
 }
 
-const props = withDefaults(defineProps<RevueFlowProps>(), {
+const props = withDefaults(defineProps<FlowProps>(), {
-  modelValue: () => [] as Elements,
+  elements: () => [],
   connectionMode: ConnectionMode.Strict,
   connectionLineType: ConnectionLineType.Bezier,
   selectionKeyCode: 'Shift',
@@ -116,7 +116,7 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
   smoothstep: SmoothStepEdge as EdgeType,
 }
 
-let store = inject<RevueFlowStore>('store')
+let store = inject<RevueFlowStore>('store')!
 if (!store) {
   store = configureStore({
     ...initialState,
@@ -127,11 +127,13 @@ if (!store) {
 
 onBeforeUnmount(() => store?.$dispose())
 
-store.setElements(props.elements)
+watchPostEffect(() => {
-store.setMinZoom(props.minZoom)
+  store.setElements(props.elements)
-store.setMaxZoom(props.maxZoom)
+  store.setMinZoom(props.minZoom)
-store.setTranslateExtent(props.translateExtent)
+  store.setMaxZoom(props.maxZoom)
-store.setNodeExtent(props.nodeExtent)
+  store.setTranslateExtent(props.translateExtent)
+  store.setNodeExtent(props.nodeExtent)
+})
 
 const hooks = useRevueFlow().bind(emit)
 provide<RevueFlowHooks>('hooks', hooks)
@@ -161,9 +163,21 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
           :selection-key-code="props.selectionKeyCode"
         >
           <NodeRenderer :node-types="nodeTypes" :transform="transform" :dimensions="dimensions" />
-          <EdgeRenderer :edge-types="edgeTypes" :transform="transform" :dimensions="dimensions" />
+          <EdgeRenderer
+            :connection-line-type="props.connectionLineType"
+            :connection-line-style="props.connectionLineStyle"
+            :custom-connection-line="props.customConnectionLine"
+            :connection-mode="props.connectionMode"
+            :arrow-head-color="props.arrowHeadColor"
+            :marker-end-id="props.markerEndId"
+            :only-render-visible-elements="props.onlyRenderVisibleElements"
+            :edge-types="edgeTypes"
+            :transform="transform"
+            :dimensions="dimensions"
+          />
         </SelectionPane>
       </template>
     </ZoomPane>
+    <slot></slot>
   </div>
 </template>