update(examples): Fix examples

bcakmakoglu · Oct 20, 2021 · 29c6df1 · 29c6df1
1 parent a5ae6a4
commit 29c6df1
Show file tree

Hide file tree

Showing 25 changed files with 688 additions and 883 deletions.
diff --git a/examples/App.tsx b/examples/App.tsx
diff --git a/examples/App.vue b/examples/App.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import Header from './Header.vue'
+</script>
+<template>
+  <Header />
+  <router-view />
+</template>
diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
@@ -1,30 +1,5 @@
-<template>
-  <RevueFlow
-    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, {
+<script lang="ts" setup>
+import Flow, {
   MiniMap,
   Controls,
   Background,
@@ -35,68 +10,74 @@ import RevueFlow, {
   OnLoadParams,
   addEdge,
   isNode,
-  removeElements
-} from '../../src';
-import { defineComponent, ref } from 'vue';
-
-const BasicFlow = defineComponent({
-  components: { RevueFlow, MiniMap, Controls, Background },
-  setup() {
-    const onNodeDragStop = ({ node }) => console.log('drag stop', node);
-    const onElementClick = ({ node }) => console.log('click', node);
-    const elements = ref<Elements>([
-      { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-      { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-      { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-      { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
-      { id: 'e1-2', source: '1', target: '2', animated: true },
-      { id: 'e1-3', source: '1', target: '3' }
-    ] as Elements);
-    const rfInstance = ref<OnLoadParams | null>(null);
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (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);
+  removeElements,
+  Node,
+} from '~/index'
 
-    const updatePos = () => {
-      elements.value = elements.value.map((el: FlowElement) => {
-        if (isNode(el)) {
-          el.position = {
-            x: Math.random() * 400,
-            y: Math.random() * 400
-          };
-        }
+const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
+const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
+const elements = ref<Elements>([
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+] as Elements)
+const rfInstance = ref<OnLoadParams | null>(null)
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (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)
 
-        return el;
-      });
-    };
+const updatePos = () => {
+  elements.value = elements.value.map((el: FlowElement) => {
+    if (isNode(el)) {
+      el.position = {
+        x: Math.random() * 400,
+        y: Math.random() * 400,
+      }
+    }
 
-    const logToObject = () => console.log(rfInstance.value?.toObject());
-    const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
+    return el
+  })
+}
 
-    const toggleClassnames = () => {
-      elements.value = elements.value.map((el: FlowElement) => {
-        if (isNode(el)) {
-          el.className = el.className === 'light' ? 'dark' : 'light';
-        }
+const logToObject = () => console.log(rfInstance.value?.toObject())
+const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 
-        return el;
-      });
-    };
-    return {
-      onLoad,
-      onConnect,
-      onElementClick,
-      onElementsRemove,
-      onNodeDragStop,
-      logToObject,
-      resetTransform,
-      toggleClassnames,
-      updatePos,
-      elements
-    };
-  }
-});
+const toggleClassnames = () => {
+  elements.value = elements.value.map((el: FlowElement) => {
+    if (isNode(el)) {
+      el.className = el.className === 'light' ? 'dark' : 'light'
+    }
 
-export default BasicFlow;
+    return el
+  })
+}
 </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>
diff --git a/examples/CustomConnectionLine/ConnectionLine.vue b/examples/CustomConnectionLine/ConnectionLine.vue
@@ -1,37 +1,23 @@
+<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
       class="animated"
       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>
diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,41 +1,21 @@
-<template>
-  <RevueFlow
-    v-model="elements"
-    :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';
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import ConnectionLine from './ConnectionLine.vue'
+import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
 
-export default defineComponent({
-  components: { RevueFlow, Background },
-  setup() {
-    const elements = ref<Elements>([
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'Node 1' },
-        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
-    };
-  }
-});
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    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))
 </script>
+<template>
+  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elementsRemove="onElementsRemove" @connect="onConnect">
+    <Background :variant="BackgroundVariant.Lines" />
+  </Flow>
+</template>
diff --git a/examples/CustomNode/ColorSelectorNode.vue b/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>