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

update(docs): Remove docs dir

Browse Source 
* Docs are in a dedicated repo now

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-15 20:07:03 +01:00
parent dec2774145
commit 98d7053951
59 changed files with 0 additions and 9275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/ButtonEdge.vue
-80
View File
@@ -1,80 +0,0 @@
<script lang="ts" setup>
import {
useHooks,
useStore,
getEdgeCenter,
getBezierPath,
getMarkerEnd,
ArrowHeadType,
EdgeProps,
ElementId,
Position,
} from '@braks/vue-flow'
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
id: ElementId
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: T
}
const props = defineProps<CustomEdgeProps>()
const store = useStore()
const hooks = useHooks()
const onEdgeClick = (evt: Event, id: string) => {
const edge = store.edges.find((edge) => edge.id === id)
if (edge) {
hooks.elementsRemove.trigger([edge])
}
evt.stopPropagation()
alert(`remove ${id}`)
}
const foreignObjectSize = 40
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
}),
)
</script>
<template>
<path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<foreignObject
:width="foreignObjectSize"
:height="foreignObjectSize"
:x="center[0] - foreignObjectSize / 2"
:y="center[1] - foreignObjectSize / 2"
class="edgebutton-foreignobject"
requiredExtensions="http://www.w3.org/1999/xhtml"
>
<body class="p-1">
<button class="edgebutton bg-gray-500 p-[4px] h-full w-full" @click="(event) => onEdgeClick(event, props.id)">×</button>
</body>
</foreignObject>
</template>
<style scoped>
body {
background: unset;
}
</style>
docs/components/ColorPickerNode.vue
-38
View File
@@ -1,38 +0,0 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
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>
<div class="py-1 px-1 flex flex-col gap-1 justify-center items-center">
<Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
<div class="text-md font-bold">Custom Color Picker Node</div>
<div :style="{ color: data.color }" class="text-md font-semibold">
{{ data.color }}
</div>
<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" />
</div>
</template>
docs/components/CustomConnectionLine.vue
-23
View File
@@ -1,23 +0,0 @@
<script lang="ts" setup>
import { ConnectionLineComponentProps } from '@braks/vue-flow'
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${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
/>
<circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
</g>
</template>
docs/components/CustomEdge.vue
-41
View File
@@ -1,41 +0,0 @@
<script lang="ts" setup>
import { ArrowHeadType, ElementId, getBezierPath, getMarkerEnd, Position, EdgeProps } from '@braks/vue-flow'
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
source: ElementId
target: ElementId
sourceHandleId?: ElementId
targetHandleId?: ElementId
id: ElementId
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: T
}
const props = defineProps<CustomEdgeProps>()
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<text>
<textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
{{ props.data.text }}
</textPath>
</text>
</template>
docs/components/CustomEdge2.vue
-65
View File
@@ -1,65 +0,0 @@
<script lang="ts" setup>
import {
getBezierPath,
getMarkerEnd,
ArrowHeadType,
EdgeProps,
ElementId,
getEdgeCenter,
Position,
EdgeText,
} from '@braks/vue-flow'
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
source: ElementId
target: ElementId
sourceHandleId?: ElementId
targetHandleId?: ElementId
id: ElementId
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: T
}
const props = defineProps<CustomEdgeProps>()
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
}),
)
</script>
<template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<EdgeText
:x="center[0]"
:y="center[1]"
:label="props.data?.text"
:label-style="{ fill: 'white' }"
:label-show-bg="true"
:label-bg-style="{ fill: 'red' }"
:label-bg-padding="[2, 4]"
:label-bg-border-radius="2"
@click="() => console.log(props.data)"
/>
</template>
docs/components/CustomLabel.vue
-10
View File
@@ -1,10 +0,0 @@
<script lang="ts" setup>
interface CustomLabelProps {
text: string
}
const props = defineProps<CustomLabelProps>()
</script>
<template>
<tspan dy="10" x="0">{{ props.text }}</tspan>
</template>
docs/components/DnDSidebar.vue
-47
View File
@@ -1,47 +0,0 @@
<script lang="ts" setup>
const onDragStart = (event: DragEvent, nodeType: string) => {
if (event.dataTransfer) {
event.dataTransfer.setData('application/vueflow', nodeType)
event.dataTransfer.effectAllowed = 'move'
}
}
</script>
<template>
<aside class="md:(w-[30%] max-w-[200px])">
<div class="mb-6">You can drag these nodes to the pane on the left.</div>
<div
class="droppable-node vue-flow__node-input"
:draggable="true"
@dragstart="(event: DragEvent) => onDragStart(event, 'input')"
>
Input Node
</div>
<div
class="droppable-node vue-flow__node-default"
:draggable="true"
@dragstart="(event: DragEvent) => onDragStart(event, 'default')"
>
Default Node
</div>
<div
class="droppable-node vue-flow__node-output"
:draggable="true"
@dragstart="(event: DragEvent) => onDragStart(event, 'output')"
>
Output Node
</div>
</aside>
</template>
<style scoped>
aside {
border-right: 1px solid #eee;
padding: 15px 10px;
font-size: 12px;
background: #fcfcfc;
}
.droppable-node {
@apply mb-6;
cursor: grab;
}
</style>
docs/components/DocsSidebar.vue
-30
View File
@@ -1,30 +0,0 @@
<script lang="ts" setup>
const examples = [
{
path: '/',
label: 'Introduction',
},
]
</script>
<template>
<aside>
<div class="flex flex-col text-left items-start">
<router-link v-for="(e, i) of examples" :key="`docs-link-${i}`" class="docs-link" :to="`/docs${e.path}`">
{{ e.label }}
</router-link>
</div>
</aside>
</template>
<style scoped>
.docs-link {
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500;
}
aside {
@apply w-[280px] px-[10px] py-[15px];
background: rgba(0, 0, 0, 0.25) !important;
overflow-x: hidden; /* Disable horizontal scroll */
}
</style>
docs/components/ExamplesSidebar.vue
-129
View File
@@ -1,129 +0,0 @@
<script lang="ts" setup>
const examples = [
{
path: '/',
label: 'Overview',
},
{
path: '/basic',
label: 'Basic',
},
{
path: '/custom-connectionline',
label: 'Custom Connectionline',
},
{
path: '/custom-node',
label: 'Custom Node',
},
{
path: '/drag-n-drop',
label: 'Drag and Drop',
},
{
path: '/edges',
label: 'Edges',
},
{
path: '/button-edge',
label: 'Edge with Button',
},
{
path: '/edge-types',
label: 'Edge Types',
},
{
path: '/empty',
label: 'Empty',
},
{
path: '/hidden',
label: 'Hidden',
},
{
path: '/interaction',
label: 'Interaction',
},
/*
todo: layouting example not working with dagre for some reason so it's disabled for now
{
path: '/layouting',
label: 'Layouting',
},
*/
{
path: '/multi-flows',
label: 'Multi Flows',
},
{
path: '/node-type-change',
label: 'Node Type Change',
},
{
path: '/node-types-id-change',
label: 'Node Types ID Change',
},
{
path: '/provider',
label: 'Provider',
},
{
path: '/save-restore',
label: 'Save and Restore',
},
{
path: '/stress',
label: 'Stress',
},
{
path: '/switch',
label: 'Switch',
},
{
path: '/unidirectional',
label: 'Unidirectional',
},
{
path: '/updatable-edge',
label: 'Updatable Edge',
},
{
path: '/update-node',
label: 'Update Node',
},
{
path: '/update-node-internals',
label: 'Update Node Internals',
},
{
path: '/validation',
label: 'Validation',
},
{
path: '/zoom-pan-helper',
label: 'Zoom Pan Helper',
},
]
</script>
<template>
<aside>
<div class="flex flex-col text-left items-start">
<router-link v-for="(e, i) of examples" :key="`example-link-${i}`" class="example-link" :to="`/examples${e.path}`">
{{ e.label }}
</router-link>
</div>
</aside>
</template>
<style scoped>
.example-link {
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2 leading-tight;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500 shadow-lg;
}
aside {
@apply relative w-[280px] h-full px-[10px] py-[15px];
background: rgba(0, 0, 0, 0.25) !important;
overflow-x: hidden; /* Disable horizontal scroll */
}
</style>
docs/components/Flow.vue
-20
View File
@@ -1,20 +0,0 @@
<script lang="ts" setup>
import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
]
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
</script>
<template>
<Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
<Background />
</Flow>
</template>
docs/components/Header.vue
-40
View File
@@ -1,40 +0,0 @@
<script setup>
import { useStore } from '@braks/vue-flow'
const store = useStore()
</script>
<template>
<header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
<div class="flex flex-col">
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow">
Vue Flow <span class="text-xs">v{{ store.vueFlowVersion }}</span></a
>
<span class="text-xs text-gray-800 mt-2"
>An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
Based on <a href="https://reactflow.dev">React Flow</a>
</span>
</div>
<div class="flex-1">
<router-link class="link" to="/docs">Docs</router-link>
</div>
<div class="flex-1">
<router-link class="link" to="/examples">Examples</router-link>
</div>
<div class="flex-1">
<a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a>
</div>
</header>
</template>
<style scoped>
a {
@apply hover:text-gray-300;
}
.logo {
text-decoration: none;
display: block;
line-height: 1;
}
.link {
@apply bg-gray-200 rounded-lg px-4 py-2 !hover:text-yellow-500 text-black;
}
</style>
docs/components/NodeA.vue
-11
View File
@@ -1,11 +0,0 @@
<script lang="ts" setup>
import { NodeProps } from '@braks/vue-flow'
interface NodeAProps extends NodeProps {
nodeStyles: Record<string, any>
}
const props = defineProps<NodeAProps>()
</script>
<template>
<div :style="props.nodeStyles">A</div>
</template>
docs/components/NodeB.vue
-11
View File
@@ -1,11 +0,0 @@
<script lang="ts" setup>
import { NodeProps } from '@braks/vue-flow'
interface NodeBPro extends NodeProps {
nodeStyles: Record<string, any>
}
const props = defineProps<NodeBPro>()
</script>
<template>
<div :style="props.nodeStyles">B</div>
</template>
docs/components/ProviderSidebar.vue
-27
View File
@@ -1,27 +0,0 @@
<script lang="ts" setup>
import { useStore } from '@braks/vue-flow'
const store = useStore()
const nodes = computed(() => store.nodes)
const transform = computed(() => store.transform)
const selectAll = () => {
store.selectedElements = nodes.value
store.unsetUserSelection()
}
</script>
<template>
<aside>
<div class="description">This is an example of how you can access the internal state outside of the Vue Flow component.</div>
<div class="title">Zoom & pan transform</div>
<div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
<div class="title">Nodes</div>
<div v-for="node of nodes" :key="node.id">
Node {{ node.id }} - x: {{ node.__rf.position.x.toFixed(2) }}, y: {{ node.__rf.position.y.toFixed(2) }}
</div>
<div class="selectall">
<button class="button" @click="selectAll">select all nodes</button>
</div>
</aside>
</template>
docs/components/SaveControls.vue
-60
View File
@@ -1,60 +0,0 @@
<script lang="ts" setup>
import localforage from 'localforage'
import { useZoomPanHelper, FlowInstance, FlowExportObject, Node } from '@braks/vue-flow'
localforage.config({
name: 'vue-flow',
storeName: 'flows',
})
const flowKey = 'example-flow'
const getNodeId = () => `randomnode_${+new Date()}`
const { transform } = useZoomPanHelper()
type ControlsProps = {
flowInstance?: FlowInstance
}
const props = defineProps<ControlsProps>()
const emit = defineEmits(['restore', 'add'])
const onSave = () => {
if (props.flowInstance) {
const flow = props.flowInstance.toObject()
localforage.setItem(flowKey, flow)
}
}
const onRestore = () => {
const restoreFlow = async () => {
const flow: FlowExportObject | null = await localforage.getItem(flowKey)
console.log(flow)
if (flow) {
const [x = 0, y = 0] = flow.position
emit('restore', flow.elements ?? [])
transform({ x, y, zoom: flow.zoom || 0 })
}
}
restoreFlow()
}
const onAdd = () => {
const newNode = {
id: `random_node-${getNodeId()}`,
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
} as Node
emit('add', newNode)
}
</script>
<template>
<div class="save__controls">
<button class="button" @click="onSave">save</button>
<button class="button" @click="onRestore">restore</button>
<button class="button" @click="onAdd">add node</button>
</div>
</template>
docs/components/UnidirectionalCustomNode.vue
-19
View File
@@ -1,19 +0,0 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { Handle, NodeProps, Position } from '@braks/vue-flow'
interface CustomNodeProps extends NodeProps {
id: string
}
const props = defineProps<CustomNodeProps>()
const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
</script>
<template>
<div :style="nodeStyles">
<div>node {{ props.id }}</div>
<Handle id="left" type="source" :position="Position.Left" />
<Handle id="right" type="source" :position="Position.Right" />
<Handle id="top" type="source" :position="Position.Top" />
<Handle id="bottom" type="source" :position="Position.Bottom" />
</div>
</template>
docs/components/UpdateNodeInternalsCustomNode.vue
-25
View File
@@ -1,25 +0,0 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { Handle, Position, NodeProps } from '@braks/vue-flow'
interface CustomNodeProps extends NodeProps {
data: any
}
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }
const props = defineProps<CustomNodeProps>()
</script>
<template>
<div :style="nodeStyles">
<Handle type="target" :position="Position.Left" />
<div>output handle count: {{ props.data.handleCount }}</div>
<Handle
v-for="i of props.data.handleCount"
:id="`handle-${i}`"
:key="`handle-${i}`"
type="source"
:position="Position.Right"
:style="{ top: 10 * i + props.data.handlePosition * 10 }"
/>
</div>
</template>
docs/components/ValidationCustomInput.vue
-9
View File
@@ -1,9 +0,0 @@
<script lang="ts" setup>
import { Position, Handle, Connection } from '@braks/vue-flow'
const isValidConnection = (connection: Connection) => connection.target === 'B'
</script>
<template>
<div>Only connectable with B</div>
<Handle type="source" :position="Position.Right" :is-valid-connection="isValidConnection" />
</template>
docs/components/ValidationCustomNode.vue
-16
View File
@@ -1,16 +0,0 @@
<script lang="ts" setup>
import { Position, Handle, Connection, NodeProps } from '@braks/vue-flow'
interface CustomNodeProps extends NodeProps {
id: string
}
const props = defineProps<CustomNodeProps>()
const isValidConnection = (connection: Connection) => connection.target === 'B'
</script>
<template>
<Handle type="target" :position="Position.Left" :is-valid-connection="isValidConnection" />
<div>{{ props.id }}</div>
<Handle type="source" :position="Position.Right" :is-valid-connection="isValidConnection" />
</template>