chore: lint files

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2023-03-31 21:30:23 +02:00
parent 9d597ff454
commit f61e5beb02
69 changed files with 623 additions and 424 deletions
@@ -40,8 +40,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) => {
    if (isNode(el)) {
      el.position = {
        x: Math.random() * 400,
@@ -49,18 +49,25 @@ const updatePos = () =>
      }
    }
  })
+}

 /**
 * toObject transforms your current graph data to an easily persist-able object
 */
-const logToObject = () => console.log(toObject())
+function logToObject() {
+  return console.log(toObject())
+}

 /**
 * Resets the current viewpane transformation (zoom & pan)
 */
-const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
+function resetTransform() {
+  return setTransform({ x: 0, y: 0, zoom: 1 })
+}

-const toggleClass = () => (dark.value = !dark.value)
+function toggleClass() {
+  return (dark.value = !dark.value)
+}
 </script>

 <template>
@@ -1,5 +1,5 @@
 <script setup>
-const props = defineProps({
+defineProps({
  sourceX: {
    type: Number,
    required: true,
@@ -18,23 +18,27 @@ const bgName = ref('AYAME')
 const connectionLineStyle = { stroke: '#fff' }

 // minimap stroke color functions
-const nodeStroke = (n) => {
+function nodeStroke(n) {
  if (n.type === 'input') return '#0041d0'
  if (n.type === 'custom') return presets.sumi
  if (n.type === 'output') return '#ff0072'
  return '#eee'
 }

-const nodeColor = (n) => {
+function nodeColor(n) {
  if (n.type === 'custom') return bgColor.value
  return '#fff'
 }

 // output labels
-const outputColorLabel = () => h('div', {}, bgColor.value)
-const outputNameLabel = () => h('div', {}, bgName.value)
+function outputColorLabel() {
+  return h('div', {}, bgColor.value)
+}
+function outputNameLabel() {
+  return h('div', {}, bgName.value)
+}

-const onChange = (color) => {
+function onChange(color) {
  gradient.value = false
  bgColor.value = color.value
  bgName.value = color.name
@@ -42,7 +46,7 @@ const onChange = (color) => {
  findNode('3').hidden = false
 }

-const onGradient = () => {
+function onGradient() {
  gradient.value = true
  bgColor.value = null
  bgName.value = 'gradient'
@@ -12,11 +12,11 @@ const props = defineProps({

 const emit = defineEmits(['change', 'gradient'])

-const onSelect = (color) => {
+function onSelect(color) {
  emit('change', color)
 }

-const onGradient = () => {
+function onGradient() {
  emit('gradient')
 }

@@ -4,9 +4,11 @@ import { nextTick, watch } from 'vue'
 import Sidebar from './Sidebar.vue'

 let id = 0
-const getId = () => `dndnode_${id++}`
+function getId() {
+  return `dndnode_${id++}`
+}

-const { findNode, onConnect, nodes, edges, addEdges, addNodes, viewport, project, vueFlowRef } = useVueFlow({
+const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow({
  nodes: [
    {
      id: '1',
@@ -17,7 +19,7 @@ const { findNode, onConnect, nodes, edges, addEdges, addNodes, viewport, project
  ],
 })

-const onDragOver = (event) => {
+function onDragOver(event) {
  event.preventDefault()

  if (event.dataTransfer) {
@@ -27,7 +29,7 @@ const onDragOver = (event) => {

 onConnect((params) => addEdges([params]))

-const onDrop = (event) => {
+function onDrop(event) {
  const type = event.dataTransfer?.getData('application/vueflow')

  const { left, top } = vueFlowRef.value.getBoundingClientRect()
@@ -1,5 +1,5 @@
 <script setup>
-const onDragStart = (event, nodeType) => {
+function onDragStart(event, nodeType) {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/vueflow', nodeType)
    event.dataTransfer.effectAllowed = 'move'
@@ -3,11 +3,11 @@ import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background, BackgroundVariant } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'

-const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
+const { nodes, addNodes, addEdges, onConnect, dimensions } = useVueFlow()

 onConnect((params) => addEdges([params]))

-const addRandomNode = () => {
+function addRandomNode() {
  const nodeId = (nodes.value.length + 1).toString()

  const newNode = {
@@ -7,6 +7,7 @@ import { initialElements } from './initial-elements.js'
 * You can either use `getIntersectingNodes` to check if a given node intersects with others
 * or `isNodeIntersecting` to check if a node is intersecting with a given area
 */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { onNodeDrag, getIntersectingNodes, isNodeIntersecting, getNodes } = useVueFlow()

 const elements = ref(initialElements)
@@ -12,10 +12,12 @@ const elements = ref([
  { id: 'e1-3', source: '1', target: '3' },
 ])

-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 = () =>
-  elements.value.forEach((el) => {
+function updatePos() {
+  return elements.value.forEach((el) => {
    if (isNode(el)) {
      el.position = {
        x: Math.random() * 400,
@@ -23,6 +25,7 @@ const updatePos = () =>
      }
    }
  })
+}
 </script>

 <template>
@@ -5,7 +5,7 @@ import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { onMounted } from 'vue'

-const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { onConnect, addEdges, addNodes } = useVueFlow({
  fitViewOnInit: true,
  // set this to true so edges get elevated when selected, defaults to false
  elevateEdgesOnSelect: true,
@@ -5,11 +5,11 @@ const flowKey = 'example-flow'

 const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()

-const onSave = () => {
+function onSave() {
  localStorage.setItem(flowKey, JSON.stringify(toObject()))
 }

-const onRestore = () => {
+function onRestore() {
  const flow = JSON.parse(localStorage.getItem(flowKey))

  if (flow) {
@@ -20,7 +20,7 @@ const onRestore = () => {
  }
 }

-const onAdd = () => {
+function onAdd() {
  const id = nodes.value.length + 1

  const newNode = {
@@ -6,21 +6,22 @@ import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'

 const { nodes, edges } = getElements(15, 15)
+
 const elements = ref([...nodes, ...edges])

-const { onPaneReady, dimensions, onNodeClick, getEdges, fitView } = useVueFlow()
+const { onPaneReady, dimensions, fitView } = useVueFlow()

-onPaneReady((i) => {
-  i.fitView({
-    padding: 0.2,
-  })
+onPaneReady(({ fitView, getElements }) => {
+  fitView({ padding: 0.2 })

-  console.log(i.getElements.value)
+  console.log(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 = {
@@ -11,7 +11,7 @@ const props = defineProps({

 const { animation, transition, teleport, onClick } = useTeleport(props.id)

-const changeAnimation = () => {
+function changeAnimation() {
  animation.value = animation.value === 'fade' ? 'shrink' : 'fade'
 }
 </script>
@@ -7,7 +7,7 @@ import { nextTick, ref } from 'vue'
 * Animations that resize a node need to call the `updateNodeDimensions` function from store to update node handle positions
 * Otherwise edges do not connect properly
 */
-export const useTeleport = (id) => {
+export function useTeleport(id) {
  const animation = ref('fade')
  const transition = ref(false)
  const teleport = ref(null)
@@ -26,13 +26,21 @@ const elements = ref([

 const { updateEdge, addEdges } = useVueFlow()

-const onEdgeUpdateStart = (edge) => console.log('start update', edge)
+function onEdgeUpdateStart(edge) {
+  return console.log('start update', edge)
+}

-const onEdgeUpdateEnd = (edge) => console.log('end update', edge)
+function onEdgeUpdateEnd(edge) {
+  return console.log('end update', edge)
+}

-const onEdgeUpdate = ({ edge, connection }) => updateEdge(edge, connection)
+function onEdgeUpdate({ edge, connection }) {
+  return updateEdge(edge, connection)
+}

-const onConnect = (params) => addEdges([params])
+function onConnect(params) {
+  return addEdges([params])
+}
 </script>

 <template>
@@ -17,7 +17,7 @@ const opts = reactive({
  hidden: false,
 })

-const updateNode = () => {
+function updateNode() {
  const node = getNode.value('1')
  node.label = opts.label.trim() !== '' ? opts.label : defaultLabel
  node.style = { backgroundColor: opts.bg }
@@ -16,11 +16,15 @@ const elements = ref([
  { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
 ])

-const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType })
+function onConnectStart({ nodeId, handleType }) {
+  return console.log('on connect start', { nodeId, handleType })
+}

-const onConnectEnd = (event) => console.log('on connect end', event)
+function onConnectEnd(event) {
+  return console.log('on connect end', event)
+}

-const onConnect = (params) => {
+function onConnect(params) {
  console.log('on connect', params)
  addEdge(params, elements.value)
 }