refactor(store): move hooks to store dir

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

src/composables/index.ts

@@ -1,6 +1,4 @@
 export { default as useHandle } from './useHandle'
-export { default as useHooks } from './useHooks'
-export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useWindow } from './useWindow'

src/composables/useVueFlow.ts

@@ -1,4 +1,3 @@
-import useHooks from './useHooks'
 import {
   EdgeChange,
   EmitFunc,
@@ -10,8 +9,9 @@ import {
   FlowElement,
   GraphNode,
   GraphEdge,
+  SelectionChange,
 } from '~/types'
-import { useStore } from '~/store'
+import { useStore, useHooks } from '~/store'
 import { isGraphNode } from '~/utils'
 
 const applyChanges = (changes: NodeChange[] | EdgeChange[], elements: FlowElements): FlowElements => {
@@ -64,15 +64,16 @@ export const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]): Gra
 export const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]): GraphEdge[] =>
   <GraphEdge[]>applyChanges(changes, edges)
 
-export const createSelectionChange = (id: string, selected: boolean) => ({
+export const createSelectionChange = (id: string, selected: boolean): SelectionChange => ({
   id,
   type: 'select',
   selected,
 })
 
-export const getSelectionChanges = (items: any[], selectedIds: string[]) => {
+export const getSelectionChanges = (items: FlowElements, selectedIds: string[]) => {
   return items.reduce((res, item) => {
-    const willBeSelected = selectedIds.includes(item.id)
+    const willBeSelected =
+      selectedIds.includes(item.id) || (isGraphNode(item) && item.parentNode && selectedIds.includes(item.parentNode?.id))
 
     if (!item.selected && willBeSelected) {
       item.selected = true
@@ -83,7 +84,7 @@ export const getSelectionChanges = (items: any[], selectedIds: string[]) => {
     }
 
     return res
-  }, [])
+  }, [] as SelectionChange[])
 }
 
 export const initFlow = (emit: EmitFunc, id?: string): FlowStore => {

src/store/hooks.ts

@@ -22,7 +22,6 @@ export const createHooks = (): FlowHooks => ({
   move: createEventHook(),
   moveStart: createEventHook(),
   moveEnd: createEventHook(),
-  selectionChange: createEventHook(),
   selectionDragStart: createEventHook(),
   selectionDrag: createEventHook(),
   selectionDragStop: createEventHook(),

src/store/index.ts

@@ -1,2 +1,3 @@
+export { default as useHooks } from './hooks'
 export { default as useStore } from './store'
 export * from './state'

src/store/state.ts

@@ -1,6 +1,6 @@
+import { createHooks } from './hooks'
 import { ConnectionMode, FlowState, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
-import { createHooks } from '~/composables'
 
 export const defaultNodeTypes: DefaultNodeTypes = {
   input: InputNode,