refactor(flow): lowercase event names (OnPaneLoad -> onPaneLoad)

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/composables/useElementsState.ts

@@ -64,7 +64,7 @@ export const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => a
 export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = { applyDefault: true }): UseEdgesState => {
   const { store } = useVueFlow()
   if (edges && edges.length) store.setEdges(edges)
-  if (applyDefault && !store.applyDefault) store.hooksOn.OnEdgesChange((e) => applyEdgeChanges(e, store.edges))
+  if (applyDefault && !store.applyDefault) store.hooksOn.onEdgesChange((e) => applyEdgeChanges(e, store.edges))
   return {
     edges: store.edges,
     applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges),
@@ -90,14 +90,14 @@ export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = {
       return store.edges
     },
     updateEdge: (oldEdge, newConnection) => updateEdge(oldEdge, newConnection, store.edges),
-    OnEdgesChange: store.hooksOn.OnEdgesChange,
+    onEdgesChange: store.hooksOn.onEdgesChange,
   }
 }
 
 export const useNodesState = ({ nodes, applyDefault }: UseNodesStateOptions = { applyDefault: true }): UseNodesState => {
   const { store } = useVueFlow()
   if (nodes && nodes.length) store.setNodes(nodes)
-  if (applyDefault && !store.applyDefault) store.hooksOn.OnNodesChange((c) => applyNodeChanges(c, store.nodes))
+  if (applyDefault && !store.applyDefault) store.hooksOn.onNodesChange((c) => applyNodeChanges(c, store.nodes))
   return {
     nodes: store.nodes,
     applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes),
@@ -111,7 +111,7 @@ export const useNodesState = ({ nodes, applyDefault }: UseNodesStateOptions = {
       store.nodes.push(...parsed)
       return store.nodes
     },
-    OnNodesChange: store.hooksOn.OnNodesChange,
+    onNodesChange: store.hooksOn.onNodesChange,
   }
 }
 

src/store/store.ts

@@ -10,7 +10,7 @@ const useFlowStore = (preloadedState: State): Store => {
   const actions = useActions(state, getters)
   const hooksOn: FlowHooksOn = <any>{}
   Object.entries(state.hooks).forEach(([n, h]) => {
-    const name = `On${n.charAt(0).toUpperCase() + n.slice(1)}`
+    const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
     hooksOn[<keyof FlowHooksOn>name] = h.on as any
   })
   actions.setState(state)

src/types/flow.ts

@@ -142,7 +142,7 @@ export type UseNodesState<N = any> = {
   applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]
   setNodes: Actions['setNodes']
   addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => GraphNode<NA>[]
-  OnNodesChange: FlowHooksOn['OnNodesChange']
+  onNodesChange: FlowHooksOn['onNodesChange']
 }
 export type UseEdgesState<E = any> = {
   edges: GraphEdge[]
@@ -150,7 +150,7 @@ export type UseEdgesState<E = any> = {
   setEdges: Actions['setEdges']
   addEdges: <EA = E>(params: (Edge<EA> | Connection)[]) => GraphEdge<EA>[]
   updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => GraphEdge<EU> | false
-  OnEdgesChange: FlowHooksOn['OnEdgesChange']
+  onEdgesChange: FlowHooksOn['onEdgesChange']
 }
 export type UseElementsState<N = any, E = N> = UseNodesState<N> & UseEdgesState<E>
 

src/types/hooks.ts

@@ -1,4 +1,4 @@
-import { EventHook } from '@vueuse/core'
+import { EventHook, EventHookOn } from '@vueuse/core'
 import { MouseTouchEvent } from '@braks/revue-draggable'
 import { FlowInstance, Dimensions, XYPosition } from './flow'
 import { GraphEdge } from './edge'
@@ -81,10 +81,11 @@ export interface FlowEvents<N = any, E = N> {
 
 export type FlowEvent = FlowEvents[keyof FlowEvents]
 export type FlowHook<T extends FlowEvent = any> = EventHook<T>
+export type FlowHookOn<T extends FlowEvent = any> = EventHookOn<T>
 
 export type FlowHooks<N = any, E = N> = { [key in keyof FlowEvents<N, E>]: FlowHook<FlowEvents<N, E>[key]> }
 export type FlowHooksOn<N = any, E = N> = {
-  [key in keyof FlowEvents<N, E> as `On${Capitalize<key>}`]: FlowHook<FlowEvents<N, E>[key]>['on']
+  [key in keyof FlowEvents<N, E> as `on${Capitalize<key>}`]: FlowHookOn<FlowEvents<N, E>[key]>
 }
 
 export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void