alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): responsive pos of elements

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent d02ade03e9
commit 3c48913090
4 changed files with 199 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Additional.vue
+44 -49
View File
@@ -1,96 +1,94 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from 'vue'
import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from "@braks/vue-flow"; import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from '@braks/vue-flow'
const elements = ref<Elements>([ const elements = ref<Elements>([
{ {
id: "1", id: '1',
style: { width: "75px" }, style: { width: '75px' },
type: "input", type: 'input',
sourcePosition: Position.Right, sourcePosition: Position.Right,
label: "input", label: 'input',
position: { x: 25, y: 120 } position: { x: 25, y: 120 },
}, },
{ {
id: "2", id: '2',
label: "A", label: 'A',
targetPosition: Position.Left, targetPosition: Position.Left,
sourcePosition: Position.Right, sourcePosition: Position.Right,
position: { x: 150, y: 25 }, position: { x: 150, y: 25 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ {
id: "3", id: '3',
label: "B", label: 'B',
targetPosition: Position.Left, targetPosition: Position.Left,
sourcePosition: Position.Right, sourcePosition: Position.Right,
position: { x: 250, y: 25 }, position: { x: 250, y: 25 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ {
id: "4", id: '4',
label: "C", label: 'C',
targetPosition: Position.Left, targetPosition: Position.Left,
sourcePosition: Position.Right, sourcePosition: Position.Right,
position: { x: 350, y: 25 }, position: { x: 350, y: 25 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ {
id: "5", id: '5',
label: "D", label: 'D',
targetPosition: Position.Left, targetPosition: Position.Left,
sourcePosition: Position.Right, sourcePosition: Position.Right,
position: { x: 150, y: 220 }, position: { x: 150, y: 220 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ {
id: "6", id: '6',
label: "E", label: 'E',
targetPosition: Position.Left, targetPosition: Position.Left,
sourcePosition: Position.Right, sourcePosition: Position.Right,
position: { x: 250, y: 220 }, position: { x: 250, y: 220 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ {
id: "7", id: '7',
label: "F", label: 'F',
targetPosition: Position.Left, targetPosition: Position.Left,
sourcePosition: Position.Right, sourcePosition: Position.Right,
position: { x: 350, y: 220 }, position: { x: 350, y: 220 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ {
id: "8", id: '8',
type: "output", type: 'output',
label: "Output", label: 'Output',
targetPosition: Position.Left, targetPosition: Position.Left,
position: { x: 500, y: 120 }, position: { x: 500, y: 120 },
style: { width: "75px" } style: { width: '75px' },
}, },
{ id: "e1-2", type: "step", source: "1", target: "2" }, { id: 'e1-2', type: 'step', source: '1', target: '2' },
{ id: "e2-3", type: "step", source: "2", target: "3" }, { id: 'e2-3', type: 'step', source: '2', target: '3' },
{ id: "e3-4", type: "step", source: "3", target: "4" }, { id: 'e3-4', type: 'step', source: '3', target: '4' },
{ id: "e4-8", type: "step", source: "4", target: "8" }, { id: 'e4-8', type: 'step', source: '4', target: '8' },
{ id: "e1-5", type: "step", source: "1", target: "5", animated: true }, { id: 'e1-5', type: 'step', source: '1', target: '5', animated: true },
{ id: "e5-6", type: "step", source: "5", target: "6", animated: true }, { id: 'e5-6', type: 'step', source: '5', target: '6', animated: true },
{ id: "e6-7", type: "step", source: "6", target: "7", animated: true }, { id: 'e6-7', type: 'step', source: '6', target: '7', animated: true },
{ id: "e6-8", type: "step", source: "7", target: "8", animated: true } { id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
]); ])
const emit = defineEmits(["pane"]); const emit = defineEmits(['pane'])
const { onPaneReady } = useVueFlow({ const { onPaneReady } = useVueFlow({
modelValue: elements.value, modelValue: elements.value,
zoomOnScroll: false, zoomOnScroll: false,
panOnDrag: false, panOnDrag: false,
}); })
onPaneReady((i) => emit('pane', i)) onPaneReady((i) => emit('pane', i))
</script> </script>
<template> <template>
<div <div class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2">
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2"
>
<VueFlow> <VueFlow>
<Controls :show-interactive="false" /> <Controls :show-interactive="false" />
<MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" /> <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
@@ -101,13 +99,10 @@ onPaneReady((i) => emit('pane', i))
<div class="flex flex-col gap-2 items-center md:items-start"> <div class="flex flex-col gap-2 items-center md:items-start">
<h1>Additional Components</h1> <h1>Additional Components</h1>
<p> <p>
Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities and a supercharged composable to
composable to control the internal state control the internal state outside the Vue Flow component.
outside the Vue Flow component.
</p> </p>
<a class="button max-w-max" href="/docs"> <a class="button max-w-max" href="/docs"> Documentation </a>
Documentation
</a>
</div> </div>
</div> </div>
</template> </template>
docs/components/home/Home.vue
+66 -10
View File
@@ -5,7 +5,7 @@ import BoxNode from './nodes/Box.vue'
const breakpoints = useBreakpoints(breakpointsTailwind) const breakpoints = useBreakpoints(breakpointsTailwind)
const { dimensions, instance, onPaneReady, getNodes, getNode } = useVueFlow({ const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
nodes: [ nodes: [
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } }, { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } }, { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -37,19 +37,77 @@ const { dimensions, instance, onPaneReady, getNodes, getNode } = useVueFlow({
zoomOnScroll: false, zoomOnScroll: false,
}) })
const init = ref(false)
const edgeId = ref('eintro-documentation')
onPaneReady(({ fitView }) => { onPaneReady(({ fitView }) => {
fitView({ fitView({
nodes: ['intro', 'examples', 'documentation'], nodes: ['intro', 'examples', 'documentation'],
duration: 1500, duration: 1500,
}) })
setTimeout(() => { watch(
watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () => [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
setTimeout(() => { () => {
instance.value?.fitView() if (breakpoints.isSmaller('md')) {
}, 5), nextTick(() => {
) getNodes.value.forEach((node) => {
}, 1500) switch (node.id) {
case 'intro':
node.position = { x: 0, y: -50 }
break
case 'examples':
node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 300 }
break
case 'documentation':
node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 500 }
break
}
})
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
source: 'examples',
target: 'documentation',
sourceHandle: null,
targetHandle: null,
})
if (newEdge) edgeId.value = newEdge.id
})
} else {
nextTick(() => {
getNodes.value.forEach((node) => {
switch (node.id) {
case 'intro':
node.position = { x: 0, y: 0 }
break
case 'examples':
node.position = { x: -node.dimensions.width / 2, y: 400 }
break
case 'documentation':
node.position = { x: getNode.value('intro')!.dimensions.width / 2 + node.dimensions.width / 2, y: 400 }
break
}
})
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
source: 'intro',
target: 'documentation',
sourceHandle: null,
targetHandle: null,
})
if (newEdge) edgeId.value = newEdge.id
})
}
setTimeout(
() => {
if (!init.value) init.value = true
instance.value?.fitView()
},
init.value ? 5 : 1505,
)
},
{ immediate: true },
)
}) })
</script> </script>
<template> <template>
@@ -73,14 +131,12 @@ onPaneReady(({ fitView }) => {
<a class="link group bg-orange-500" href="/docs"> Read The Documentation </a> <a class="link group bg-orange-500" href="/docs"> Read The Documentation </a>
</div> </div>
<Handle type="target" :position="Position.Top" /> <Handle type="target" :position="Position.Top" />
<Handle type="source" :position="Position.Bottom" />
</template> </template>
<template v-else-if="props.id === 'examples'"> <template v-else-if="props.id === 'examples'">
<div class="flex"> <div class="flex">
<a class="link group bg-purple-500" href="/examples"> Check The Examples </a> <a class="link group bg-purple-500" href="/examples"> Check The Examples </a>
</div> </div>
<Handle type="target" :position="Position.Top" /> <Handle type="target" :position="Position.Top" />
<Handle type="source" :position="Position.Bottom" />
</template> </template>
</template> </template>
</VueFlow> </VueFlow>
docs/components/home/Nested.vue
+29 -27
View File
@@ -1,42 +1,47 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from "@braks/vue-flow"; import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
const emit = defineEmits(['pane']) const emit = defineEmits(['pane'])
const nodeClasses = ["!normal-case font-semibold !text-white", "!border-1", "shadow-md"].join(" ");
const childClasses = nodeClasses + " !bg-green-500/70 !border-white"; const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
const { onPaneReady } = useVueFlow({ const { onPaneReady } = useVueFlow({
fitViewOnInit: true, fitViewOnInit: true,
connectionMode: ConnectionMode.Loose, connectionMode: ConnectionMode.Loose,
zoomOnScroll: false, zoomOnScroll: false,
preventScrolling: false, preventScrolling: false,
translateExtent: [[-500, -100], [600, 500]], panOnDrag: false,
translateExtent: [
[-500, -100],
[600, 500],
],
nodes: [ nodes: [
{ id: "1", type: "input", label: "Outer Node", position: { x: 0, y: 0 }, class: childClasses }, { id: '1', type: 'input', label: 'Outer Node', position: { x: 0, y: 0 }, class: childClasses },
{ {
id: "2", id: '2',
label: "Parent Node", label: 'Parent Node',
position: { x: -125, y: 100 }, position: { x: -125, y: 100 },
class: nodeClasses + " !bg-green-500/30 !border-green-500", class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
style: { width: "400px", height: "160px" } style: { width: '400px', height: '160px' },
}, },
{ {
id: "2a", id: '2a',
label: "Child Node", label: 'Child Node',
position: { x: 17, y: 30 }, position: { x: 17, y: 30 },
parentNode: "2", parentNode: '2',
extent: 'parent', extent: 'parent',
class: childClasses class: childClasses,
}, },
{ id: "2b", label: "Child Node", position: { x: 225, y: 30 }, parentNode: "2", extent: 'parent', class: childClasses }, { id: '2b', label: 'Child Node', position: { x: 225, y: 30 }, parentNode: '2', extent: 'parent', class: childClasses },
{ id: "2c", label: "Child Node", position: { x: 125, y: 100 }, parentNode: "2", extent: 'parent', class: childClasses }, { id: '2c', label: 'Child Node', position: { x: 125, y: 100 }, parentNode: '2', extent: 'parent', class: childClasses },
{ id: "3", type: "output", label: "Outer Node", position: { x: 0, y: 300 }, class: childClasses }, { id: '3', type: 'output', label: 'Outer Node', position: { x: 0, y: 300 }, class: childClasses },
], ],
edges: [ edges: [
{ id: "e1-2a", source: "1", target: "2a", type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } }, { id: 'e1-2a', source: '1', target: '2a', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
{ id: "e2-3", source: "2", target: "3", type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } } { id: 'e2-3', source: '2', target: '3', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
] ],
}); })
onPaneReady((i) => emit('pane', i)) onPaneReady((i) => emit('pane', i))
</script> </script>
@@ -44,16 +49,13 @@ onPaneReady((i) => emit('pane', i))
<div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12"> <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
<div class="flex flex-col gap-2 items-center md:items-start"> <div class="flex flex-col gap-2 items-center md:items-start">
<h1>Nested- & Subflows</h1> <h1>Nested- & Subflows</h1>
<p> <p>Vue Flow comes with built-in support for nested nodes and nested flows.</p>
Vue Flow comes with built-in support for nested nodes and nested flows. <a class="button max-w-max" href="/docs"> Documentation </a>
</p>
<a class="button max-w-max" href="/docs">
Documentation
</a>
</div> </div>
</div> </div>
<div <div
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"> class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
>
<VueFlow class="nested"> <VueFlow class="nested">
<Controls class="md:!left-auto md:!right-[10px]" /> <Controls class="md:!left-auto md:!right-[10px]" />
<Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" /> <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
docs/components/home/RGB.vue
+60 -54
View File
@@ -1,19 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
import { import { breakpointsTailwind } from '@vueuse/core'
BackgroundVariant, import CustomEdge from './edges/Custom.vue'
VueFlow, import RGBNode from './nodes/Input.vue'
Background, import RGBOutputNode from './nodes/Output.vue'
Controls,
MiniMap, const breakpoints = useBreakpoints(breakpointsTailwind)
GraphNode,
MiniMapNodeFunc,
useVueFlow
} from "@braks/vue-flow";
import { templateRef } from "@vueuse/core";
import CustomEdge from "./edges/Custom.vue";
import RGBNode from "./nodes/Input.vue";
import RGBOutputNode from "./nodes/Output.vue";
type Colors = { type Colors = {
red: number red: number
@@ -21,59 +13,73 @@ type Colors = {
blue: number blue: number
} }
const emit = defineEmits(["pane"]); const emit = defineEmits(['pane'])
const { id, onPaneReady, store } = useVueFlow({ const { onPaneReady, getNode } = useVueFlow({
id: "rgb-flow", id: 'rgb-flow',
nodes: [ nodes: [
{ id: "1", type: "rgb", data: { color: "g" }, position: { x: -25, y: 0 } }, { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
{ id: "2", type: "rgb", data: { color: "r" }, position: { x: 50, y: -110 } }, { id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
{ id: "3", type: "rgb", data: { color: "b" }, position: { x: 0, y: 110 } }, { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 110 } },
{ id: "4", type: "rgb-output", label: "RGB", position: { x: 400, y: -25 } } { id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: -25 } },
], ],
edges: [ edges: [
{ id: "e1-4", type: "rgb-line", data: { color: "green" }, source: "1", target: "4", animated: true }, { id: 'e1-4', type: 'rgb-line', data: { color: 'green' }, source: '1', target: '4', animated: true },
{ id: "e2-4", type: "rgb-line", data: { color: "red" }, source: "2", target: "4", animated: true }, { id: 'e2-4', type: 'rgb-line', data: { color: 'red' }, source: '2', target: '4', animated: true },
{ id: "e3-4", type: "rgb-line", data: { color: "blue" }, source: "3", target: "4", animated: true } { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
], ],
zoomOnScroll: false, zoomOnScroll: false,
nodeExtent: [[-50, -150], [500, 300]] nodeExtent: [
}); [-50, -150],
[500, 300],
],
})
onPaneReady((i) => emit("pane", i)); onPaneReady((i) => emit('pane', i))
const el = templateRef<HTMLDivElement>("el", null); const el = templateRef<HTMLDivElement>('el', null)
const color = ref<Colors>({ const color = ref<Colors>({
red: 222, red: 222,
green: 45, green: 45,
blue: 140 blue: 140,
}); })
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val)); watch(
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
() => {
if (breakpoints.isSmaller('md')) {
getNode.value('4')!.position = { x: 300, y: -25 }
}
},
{ immediate: true },
)
const nodeColor: MiniMapNodeFunc = (node: GraphNode) => { const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
const nodeColor: MiniMapNodeFunc = (node) => {
switch (node.id) { switch (node.id) {
case "1": case '1':
return "green"; return 'green'
case "2": case '2':
return "red"; return 'red'
case "3": case '3':
return "blue"; return 'blue'
case "4": case '4':
return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`; return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`
} }
}; return ''
}
</script> </script>
<template> <template>
<div <div
ref="el" ref="el"
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2" class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
:style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }"> :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }"
>
<VueFlow class="relative font-mono"> <VueFlow class="relative font-mono">
<template #edge-rgb-line="rgbLineProps"> <template #edge-rgb-line="rgbLineProps">
<CustomEdge <CustomEdge v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
</template> </template>
<template #node-rgb="rgbProps"> <template #node-rgb="rgbProps">
<RGBNode v-bind="rgbProps" :amount="color" @change="onChange" /> <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
@@ -82,21 +88,21 @@ const nodeColor: MiniMapNodeFunc = (node: GraphNode) => {
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" /> <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
</template> </template>
<Controls class="transform scale-75 md:scale-100 origin-bottom-left" /> <Controls class="transform scale-75 md:scale-100 origin-bottom-left" />
<Background :variant="BackgroundVariant.Lines" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`" <Background
:gap="48" :variant="BackgroundVariant.Lines"
:size="1" /> :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :gap="48"
:node-color="nodeColor" /> :size="1"
/>
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
</VueFlow> </VueFlow>
</div> </div>
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12"> <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
<div class="flex flex-col gap-2 items-center md:items-start"> <div class="flex flex-col gap-2 items-center md:items-start">
<h1>Customizable</h1> <h1>Customizable</h1>
<p> <p>
You can create your own node and edge types or just pass a custom style. You can create your own node and edge types or just pass a custom style. Implement custom UIs inside your nodes and add
Implement custom UIs functionality to your edges.
inside your nodes
and add functionality to your edges.
</p> </p>
<a class="button max-w-max" href="/docs">Documentation</a> <a class="button max-w-max" href="/docs">Documentation</a>
</div> </div>