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

chore: lint files

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-31 21:30:23 +02:00
committed by Braks
parent 9d597ff454
commit f61e5beb02
69 changed files with 623 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/quasar/src/components/BasicFlow.vue
+10 -5
View File
@@ -37,8 +37,8 @@ const dark = ref(false)
* To update node properties you can simply use your elements v-model and mutate the elements directly
* Changes should always be reflected on the graph reactively, without the need to overwrite the elements
*/
const updatePos = () =>
elements.value.forEach((el) => {
function updatePos() {
return elements.value.forEach((el) => {
console.log(el, elements.value)
if (isNode(el)) {
el.position = {
@@ -47,18 +47,23 @@ const updatePos = () =>
}
}
})
}
/**
* toObject transforms your current graph data to an easily persist-able object
*/
const logToObject = () => console.log(instance.value?.toObject())
function logToObject() {
return console.log(instance.value?.toObject())
}
/**
* Resets the current viewpane transformation (zoom & pan)
*/
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
function resetTransform() {
return instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
}
const toggleClass = () => {
function toggleClass() {
dark.value = !dark.value
elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
}
examples/quasar/src/components/CustomizedFlow.vue
+10 -5
View File
@@ -37,8 +37,8 @@ const dark = ref(false)
* To update node properties you can simply use your elements v-model and mutate the elements directly
* Changes should always be reflected on the graph reactively, without the need to overwrite the elements
*/
const updatePos = () =>
elements.value.forEach((el) => {
function updatePos() {
return elements.value.forEach((el) => {
console.log(el, elements.value)
if (isNode(el)) {
el.position = {
@@ -47,18 +47,23 @@ const updatePos = () =>
}
}
})
}
/**
* toObject transforms your current graph data to an easily persist-able object
*/
const logToObject = () => console.log(instance.value?.toObject())
function logToObject() {
return console.log(instance.value?.toObject())
}
/**
* Resets the current viewpane transformation (zoom & pan)
*/
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
function resetTransform() {
return instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
}
const toggleClass = () => {
function toggleClass() {
dark.value = !dark.value
elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
}
examples/vite/Header.vue
+1 -1
View File
@@ -6,7 +6,7 @@ const router = useRouter()
const route = useRoute()
const onChange = (event: Event) => {
function onChange(event: Event) {
router.push((event.target as HTMLSelectElement).value)
}
examples/vite/src/Basic/Basic.vue
+12 -5
View File
@@ -23,8 +23,8 @@ onNodeDragStop((e) => console.log('drag stop', e.event))
onEdgeClick(console.log)
onConnect((params) => addEdges([params]))
const updatePos = () =>
elements.value.forEach((el) => {
function updatePos() {
return elements.value.forEach((el) => {
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
@@ -32,10 +32,17 @@ const updatePos = () =>
}
}
})
}
const logToObject = () => console.log(toObject())
const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
function logToObject() {
return console.log(toObject())
}
function resetTransform() {
return setTransform({ x: 0, y: 0, zoom: 1 })
}
function toggleclass() {
return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
}
</script>
<template>
examples/vite/src/DragNDrop/DnD.vue
+5 -3
View File
@@ -4,7 +4,9 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
import Sidebar from './Sidebar.vue'
let id = 0
const getId = () => `dndnode_${id++}`
function getId() {
return `dndnode_${id++}`
}
const { onConnect, addEdges, addNodes, project } = useVueFlow({
nodes: [
@@ -16,7 +18,7 @@ const { onConnect, addEdges, addNodes, project } = useVueFlow({
},
],
})
const onDragOver = (event: DragEvent) => {
function onDragOver(event: DragEvent) {
event.preventDefault()
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move'
@@ -27,7 +29,7 @@ const wrapper = ref()
onConnect((params) => addEdges([params]))
const onDrop = (event: DragEvent) => {
function onDrop(event: DragEvent) {
const type = event.dataTransfer?.getData('application/vueflow')
const flowbounds = wrapper.value.$el.getBoundingClientRect()
examples/vite/src/DragNDrop/Sidebar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
const onDragStart = (event: DragEvent, nodeType: string) => {
function onDragStart(event: DragEvent, nodeType: string) {
if (event.dataTransfer) {
event.dataTransfer.setData('application/vueflow', nodeType)
event.dataTransfer.effectAllowed = 'move'
examples/vite/src/EdgeTypes/utils.ts
+3 -1
View File
@@ -50,7 +50,9 @@ const offsets = [
]
let id = 0
const getNodeId = () => (id++).toString()
function getNodeId() {
return (id++).toString()
}
export function getElements(): Elements {
const initialElements = []
examples/vite/src/Empty/EmptyExample.vue
+1 -1
View File
@@ -12,7 +12,7 @@ onConnect((params) => addEdges([params]))
onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
onNodeDragStop((node) => console.log('drag stop', node))
const addRandomNode = () => {
function addRandomNode() {
const nodeId = (nodes.value.length + 1).toString()
const newNode: Node = {
id: nodeId,
examples/vite/src/Layouting/LayoutingExample.vue
+1 -1
View File
@@ -18,7 +18,7 @@ const nodeExtent: CoordinateExtent = [
const elements = ref<Elements>(initialElements)
const onLayout = (direction: string) => {
function onLayout(direction: string) {
const isHorizontal = direction === 'LR'
dagreGraph.setGraph({ rankdir: direction })
examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
+1 -1
View File
@@ -29,7 +29,7 @@ onConnect((params) => addEdges([params]))
onPaneReady((instance) => instance.fitView())
const changeType = () => {
function changeType() {
elements.value.forEach((el) => {
if (isEdge(el) || el.type === 'input') return
el.type = el.type === 'default' ? 'output' : 'default'
examples/vite/src/Overview/Overview.vue
+54 -20
View File
@@ -5,28 +5,62 @@ import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
const onNodeDragStop = (e: FlowEvents['nodeDragStop']) => console.log('drag stop', e)
const onNodeDoubleClick = (e: FlowEvents['nodeDoubleClick']) => console.log('node double click', e)
const onPaneClick = (e: FlowEvents['paneClick']) => console.log('pane click', e)
const onPaneScroll = (e: FlowEvents['paneScroll']) => console.log('pane scroll', e)
const onPaneContextMenu = (e: FlowEvents['paneContextMenu']) => console.log('pane context menu', e)
const onSelectionDrag = (e: FlowEvents['selectionDrag']) => console.log('selection drag', e)
const onSelectionDragStart = (e: FlowEvents['selectionDragStart']) => console.log('selection drag start', e)
const onSelectionDragStop = (e: FlowEvents['selectionDragStop']) => console.log('selection drag stop', e)
const onSelectionContextMenu = (e: FlowEvents['selectionContextMenu']) => console.log('selection context menu', e)
const onLoad = (flowInstance: VueFlowStore) => {
function onNodeDragStart(e: FlowEvents['nodeDragStart']) {
return console.log('drag start', e)
}
function onNodeDrag(e: FlowEvents['nodeDrag']) {
return console.log('drag', e)
}
function onNodeDragStop(e: FlowEvents['nodeDragStop']) {
return console.log('drag stop', e)
}
function onNodeDoubleClick(e: FlowEvents['nodeDoubleClick']) {
return console.log('node double click', e)
}
function onPaneClick(e: FlowEvents['paneClick']) {
return console.log('pane click', e)
}
function onPaneScroll(e: FlowEvents['paneScroll']) {
return console.log('pane scroll', e)
}
function onPaneContextMenu(e: FlowEvents['paneContextMenu']) {
return console.log('pane context menu', e)
}
function onSelectionDrag(e: FlowEvents['selectionDrag']) {
return console.log('selection drag', e)
}
function onSelectionDragStart(e: FlowEvents['selectionDragStart']) {
return console.log('selection drag start', e)
}
function onSelectionDragStop(e: FlowEvents['selectionDragStop']) {
return console.log('selection drag stop', e)
}
function onSelectionContextMenu(e: FlowEvents['selectionContextMenu']) {
return console.log('selection context menu', e)
}
function onLoad(flowInstance: VueFlowStore) {
console.log('flow loaded:', flowInstance)
flowInstance.fitView()
}
const onMoveEnd = (e: FlowEvents['moveEnd']) => console.log('zoom/move end', e.flowTransform)
const onEdgeContextMenu = (e: FlowEvents['edgeContextMenu']) => console.log('edge context menu', e)
const onEdgeMouseEnter = (e: FlowEvents['edgeMouseEnter']) => console.log('edge mouse enter', e)
const onEdgeMouseMove = (e: FlowEvents['edgeMouseMove']) => console.log('edge mouse move', e)
const onEdgeMouseLeave = (e: FlowEvents['edgeMouseLeave']) => console.log('edge mouse leave', e)
const onEdgeDoubleClick = (e: FlowEvents['edgeDoubleClick']) => console.log('edge double click', e)
function onMoveEnd(e: FlowEvents['moveEnd']) {
return console.log('zoom/move end', e.flowTransform)
}
function onEdgeContextMenu(e: FlowEvents['edgeContextMenu']) {
return console.log('edge context menu', e)
}
function onEdgeMouseEnter(e: FlowEvents['edgeMouseEnter']) {
return console.log('edge mouse enter', e)
}
function onEdgeMouseMove(e: FlowEvents['edgeMouseMove']) {
return console.log('edge mouse move', e)
}
function onEdgeMouseLeave(e: FlowEvents['edgeMouseLeave']) {
return console.log('edge mouse leave', e)
}
function onEdgeDoubleClick(e: FlowEvents['edgeDoubleClick']) {
return console.log('edge double click', e)
}
const initialElements: Elements = [
{
@@ -85,7 +119,7 @@ const initialElements: Elements = [
const snapGrid: SnapGrid = [16, 16]
const nodeStrokeColor = (n: Node): string => {
function nodeStrokeColor(n: Node): string {
if ((n.style as Styles)?.background) return (n.style as Styles).background as string
if (n.type === 'input') return '#0041d0'
if (n.type === 'output') return '#ff0072'
@@ -94,7 +128,7 @@ const nodeStrokeColor = (n: Node): string => {
return '#eee'
}
const nodeColor = (n: Node): string => {
function nodeColor(n: Node): string {
if ((n.style as Styles)?.background) return (n.style as Styles).background as string
return '#fff'
examples/vite/src/Provider/ProviderExample.vue
+3 -1
View File
@@ -7,7 +7,9 @@ import '@vue-flow/controls/dist/style.css'
import Sidebar from './Sidebar.vue'
const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
function onLoad(flowInstance: VueFlowStore) {
return console.log('flow loaded:', flowInstance)
}
const initialElements: Elements = [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
examples/vite/src/Provider/Sidebar.vue
+1 -1
View File
@@ -2,7 +2,7 @@
import { useVueFlow } from '@vue-flow/core'
const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
const selectAll = () => {
function selectAll() {
addSelectedNodes(getNodes.value)
nodesSelectionActive.value = true
}
examples/vite/src/RGBFlow/RGBFlow.vue
+8 -6
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
import { templateRef } from '@vueuse/core'
import type { Elements, VueFlowStore } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
import RGBNode from './RGBNode.vue'
@@ -10,6 +9,7 @@ interface Colors {
green: number
blue: number
}
const elements = ref<Elements>([
{ id: '1', type: 'rgb', data: { color: 'r' }, position: { x: -25, y: 50 } },
{ id: '2', type: 'rgb', data: { color: 'g' }, position: { x: 50, y: -100 } },
@@ -20,21 +20,23 @@ const elements = ref<Elements>([
{ id: 'e3-4', data: { color: 'blue' }, source: '3', target: '4', animated: true },
])
const el = templateRef<HTMLDivElement>('page', null)
const onLoad = (flowInstance: VueFlowStore) => {
function onLoad(flowInstance: VueFlowStore) {
flowInstance.fitView({ padding: 1 })
}
const color = ref<Colors>({
red: 100,
green: 150,
blue: 100,
})
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
return (color.value[c] = Number(val))
}
</script>
<template>
<div ref="page" class="demo-flow">
<div class="demo-flow">
<VueFlow v-model="elements" @pane-ready="onLoad">
<template #node-rgb="props">
<RGBNode v-bind="props" :amount="color" @change="onChange" />
examples/vite/src/SaveRestore/Controls.vue
+6 -4
View File
@@ -10,15 +10,17 @@ const state = useStorage<FlowExportObject>(flowKey, {
zoom: 1,
})
const getNodeId = () => `randomnode_${+new Date()}`
function getNodeId() {
return `randomnode_${+new Date()}`
}
const { addNodes, setNodes, setEdges, toObject, dimensions, setTransform } = useVueFlow()
const onSave = () => {
function onSave() {
state.value = toObject()
}
const onRestore = () => {
function onRestore() {
const flow: FlowExportObject | null = state.value
if (flow) {
@@ -32,7 +34,7 @@ const onRestore = () => {
}
}
const onAdd = () => {
function onAdd() {
const newNode = {
id: `random_node-${getNodeId()}`,
label: 'Added node',
examples/vite/src/Stress/StressExample.vue
+4 -2
View File
@@ -17,9 +17,11 @@ onPaneReady((i) => {
console.log(i.getElements.value)
})
const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
function toggleClass() {
return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
}
const updatePos = () => {
function updatePos() {
elements.value.forEach((el) => {
if (isNode(el)) {
el.position = {
examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+12 -4
View File
@@ -30,13 +30,21 @@ const { updateEdge } = useVueFlow()
const elements = ref(initialElements)
const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
function onLoad(flowInstance: VueFlowStore) {
return flowInstance.fitView()
}
const onEdgeUpdateStart = ({ edge }: FlowEvents['edgeUpdateStart']) => console.log('start update', edge)
function onEdgeUpdateStart({ edge }: FlowEvents['edgeUpdateStart']) {
return console.log('start update', edge)
}
const onEdgeUpdateEnd = ({ edge }: FlowEvents['edgeUpdateEnd']) => console.log('end update', edge)
function onEdgeUpdateEnd({ edge }: FlowEvents['edgeUpdateEnd']) {
return console.log('end update', edge)
}
const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => updateEdge(edge, connection)
function onEdgeUpdate({ edge, connection }: FlowEvents['edgeUpdate']) {
return updateEdge(edge, connection)
}
</script>
<template>
examples/vite/src/UpdateNode/UpdateNodeExample.vue
+1 -1
View File
@@ -15,7 +15,7 @@ const opts = reactive({
hidden: false,
})
const updateNode = () => {
function updateNode() {
elements.value.forEach((el) => {
if (el.id === '1') {
// it's important that you create a new object here in order to notify react flow about the change
examples/vite/src/Validation/ValidationExample.vue
+10 -4
View File
@@ -17,11 +17,17 @@ const { addEdges } = useVueFlow({
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
],
})
const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
function onLoad(flowInstance: VueFlowStore) {
return flowInstance.fitView()
}
function onConnectStart({ nodeId, handleType }: OnConnectStartParams) {
return console.log('on connect start', { nodeId, handleType })
}
function onConnectEnd(event: MouseEvent) {
return console.log('on connect end', event)
}
const onConnect = (params: Connection) => {
function onConnect(params: Connection) {
console.log('on connect', params)
addEdges([params])
}