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

update: remove useHooks usage

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-18 23:17:09 +01:00
parent 99dbd4b2cc
commit 470ab3782a
16 changed files with 97 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/Edge.vue
+8 -9
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useHandle, useHooks, useStore } from '../../composables'
import { useHandle, useStore } from '../../composables'
import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '../../types'
import EdgeAnchor from './EdgeAnchor.vue'
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
@@ -15,7 +15,6 @@ interface EdgeProps {
const props = withDefaults(defineProps<EdgeProps>(), {})
const store = useStore()
const hooks = useHooks()
const onEdgeClick = (event: MouseEvent) => {
if (store.elementsSelectable) {
@@ -23,20 +22,20 @@ const onEdgeClick = (event: MouseEvent) => {
store.addSelectedElements([props.edge])
}
hooks.edgeClick.trigger({ event, edge: props.edge })
store.hooks.edgeClick.trigger({ event, edge: props.edge })
}
const onEdgeContextMenu = (event: MouseEvent) =>
hooks.edgeContextMenu.trigger({
store.hooks.edgeContextMenu.trigger({
event,
edge: props.edge,
})
const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: props.edge })
const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: props.edge })
const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
const handler = useHandle()
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
@@ -45,9 +44,9 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const isValidConnection = () => true
const isTarget = isSourceHandle
hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
store.hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source', (connection) =>
hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
store.hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
)
}
src/components/Handle/Handle.vue
+2 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useHandle, useHooks, useStore } from '../../composables'
import { useHandle, useStore } from '../../composables'
import { Position, ValidConnectionFunc } from '../../types'
import { NodeId } from '~/context'
import { NodeId } from '../../context'
interface HandleProps {
id?: string
@@ -19,7 +19,6 @@ const props = withDefaults(defineProps<HandleProps>(), {
})
const store = useStore()
const hooks = useHooks()
const nodeId = inject(NodeId)!
const handler = useHandle()
src/components/Nodes/Node.vue
+11 -12
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { useHooks, useStore } from '../../composables'
import { useStore } from '../../composables'
import { Node, NodeType, SnapGrid } from '../../types'
import { NodeId } from '~/context'
import { NodeId } from '../../context'
interface NodeProps {
node: Node
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<NodeProps>(), {
})
const store = useStore()
const hooks = useHooks()
provide(NodeId, props.node.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
@@ -33,15 +32,15 @@ const connectable = computed(() =>
const scale = computed(() => store.transform[2])
const onMouseEnterHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
const onMouseMoveHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
const onMouseLeaveHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
const onSelectNodeHandler = (event: MouseEvent) => {
if (!draggable.value) {
@@ -51,13 +50,13 @@ const onSelectNodeHandler = (event: MouseEvent) => {
if (!props.selected) store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n })
store.hooks.nodeClick.trigger({ event, node: n })
}
}
const onDragStart: DraggableEventListener = ({ event }) => {
const n = props.node
hooks.nodeDragStart.trigger({ event, node: n })
store.hooks.nodeDragStart.trigger({ event, node: n })
if (props.selectNodesOnDrag && selectable) {
store.unsetNodesSelection()
@@ -73,7 +72,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
const n = props.node
n.position.x += data.deltaX
n.position.y += data.deltaY
hooks.nodeDrag.trigger({ event, node: n })
store.hooks.nodeDrag.trigger({ event, node: n })
store.updateNodePosDiff({
id: props.node.id,
@@ -93,7 +92,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
if (selectable.value && !props.selectNodesOnDrag && !props.selected) {
store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n })
store.hooks.nodeClick.trigger({ event, node: n })
return
}
@@ -103,7 +102,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
isDragging: false,
})
hooks.nodeDragStop.trigger({ event, node: n })
store.hooks.nodeDragStop.trigger({ event, node: n })
}
onMounted(() => {
src/components/NodesSelection/NodesSelection.vue
+5 -6
View File
@@ -1,11 +1,10 @@
<script lang="ts" setup>
import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
import { useHooks, useStore } from '../../composables'
import { useStore } from '../../composables'
import { Node } from '../../types'
import { getRectOfNodes, isNode } from '../../utils'
const store = useStore()
const hooks = useHooks()
const selectedNodes = store.selectedElements
? store.selectedElements.filter(isNode).map((selectedNode) => {
@@ -29,12 +28,12 @@ const innerStyle = {
const onStart: DraggableEventListener = ({ event }) => {
const nodes = selectedNodes
hooks.selectionDragStart.trigger({ event, nodes })
store.hooks.selectionDragStart.trigger({ event, nodes })
}
const onDrag: DraggableEventListener = ({ event, data }) => {
const nodes = selectedNodes
hooks.selectionDrag.trigger({ event, nodes })
store.hooks.selectionDrag.trigger({ event, nodes })
store.updateNodePosDiff({
diff: {
x: data.deltaX,
@@ -46,7 +45,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
const onStop: DraggableEventListener = ({ event }) => {
const nodes = selectedNodes
hooks.selectionDragStop.trigger({ event, nodes })
store.hooks.selectionDragStop.trigger({ event, nodes })
store.updateNodePosDiff({
isDragging: false,
})
@@ -54,7 +53,7 @@ const onStop: DraggableEventListener = ({ event }) => {
const onContextMenu = (event: MouseEvent) => {
const nodes = selectedNodes
hooks.selectionContextMenu.trigger({ event, nodes })
store.hooks.selectionContextMenu.trigger({ event, nodes })
}
const transform = computed(() => store.transform)