update(examples): move examples into src dir

2022-04-04 21:42:48 +02:00
parent 9539d7f263
commit c1594b0071
53 changed files with 34 additions and 35 deletions
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { getElements } from './utils'
+import { VueFlow, MiniMap, Controls, FlowInstance } from '@braks/vue-flow'
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView()
+  console.log(flowInstance.getElements())
+}
+
+const elements = getElements()
+</script>
+<template>
+  <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
+    <MiniMap />
+    <Controls />
+  </VueFlow>
+</template>
@@ -0,0 +1,106 @@
+import { Elements, Position } from '@braks/vue-flow/src'
+
+const nodeWidth = 80
+const nodeGapWidth = nodeWidth * 2
+const nodeStyle = { width: `${nodeWidth}px`, fontSize: '11px', color: 'white' }
+
+const sourceTargetPositions = [
+  { source: Position.Bottom, target: Position.Top },
+  { source: Position.Right, target: Position.Left },
+]
+const nodeColors = [
+  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8'],
+]
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight']
+const offsets = [
+  {
+    x: 0,
+    y: -nodeGapWidth,
+  },
+  {
+    x: nodeGapWidth,
+    y: -nodeGapWidth,
+  },
+  {
+    x: nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: 0,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: nodeGapWidth,
+  },
+  {
+    x: -nodeGapWidth,
+    y: 0,
+  },
+  {
+    x: -nodeGapWidth,
+    y: -nodeGapWidth,
+  },
+]
+
+let id = 0
+const getNodeId = () => (id++).toString()
+
+export function getElements(): Elements {
+  const initialElements = []
+
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
+    const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex]
+
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
+      const currEdgeType = edgeTypes[edgeTypeIndex]
+
+      for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+        const currOffset = offsets[offsetIndex]
+
+        const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] }
+        const sourcePosition = {
+          x: offsetIndex * nodeWidth * 4,
+          y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300,
+        }
+        const sourceId = getNodeId()
+        const sourceLabel = `Source ${sourceId}`
+        const sourceNode = {
+          id: sourceId,
+          style,
+          label: sourceLabel,
+          position: sourcePosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target,
+        }
+
+        const targetId = getNodeId()
+        const targetLabel = `Target ${targetId}`
+        const targetPosition = {
+          x: sourcePosition.x + currOffset.x,
+          y: sourcePosition.y + currOffset.y,
+        }
+        const targetNode = {
+          id: targetId,
+          style,
+          label: targetLabel,
+          position: targetPosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target,
+        }
+
+        initialElements.push(sourceNode)
+        initialElements.push(targetNode)
+
+        initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType })
+      }
+    }
+  }
+
+  return initialElements
+}