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

chore(core): cleanup

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-04-11 20:28:02 +02:00
committed by Braks
parent 1171e01c9c
commit 1e2a51ebb5
4 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Nodes/NodeWrapper.ts
+12 -12
View File
@@ -47,7 +47,7 @@ const NodeWrapper = defineComponent({
const node = $(useVModel(props, 'node'))
const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode) : undefined))
const parentNode = computed(() => findNode(node.parentNode))
const connectedEdges = $computed(() => getConnectedEdges([node], edges))
@@ -73,9 +73,9 @@ const NodeWrapper = defineComponent({
},
})
const getClass = $computed(() => (node.class instanceof Function ? node.class(node) : node.class))
const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
const getStyle = $computed(() => {
const getStyle = computed(() => {
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
const width = node.width instanceof Function ? node.width(node) : node.width
@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
return styles
})
const zIndex = computed(() => Number(node.zIndex ?? getStyle.zIndex ?? 0))
const zIndex = computed(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(props.id)) {
@@ -121,14 +121,14 @@ const NodeWrapper = defineComponent({
[
() => node.position.x,
() => node.position.y,
() => parentNode?.computedPosition.x,
() => parentNode?.computedPosition.y,
() => parentNode?.computedPosition.z,
() => parentNode.value?.computedPosition.x,
() => parentNode.value?.computedPosition.y,
() => parentNode.value?.computedPosition.z,
() => node.selected,
() => node.dimensions.height,
() => node.dimensions.width,
() => parentNode?.dimensions.height,
() => parentNode?.dimensions.width,
() => parentNode.value?.dimensions.height,
() => parentNode.value?.dimensions.width,
zIndex,
],
([newX, newY, parentX, parentY, parentZ]) => {
@@ -184,14 +184,14 @@ const NodeWrapper = defineComponent({
selected: node.selected,
selectable: props.selectable,
},
getClass,
getClass.value,
],
'style': {
zIndex: node.computedPosition.z ?? zIndex.value,
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
visibility: node.initialized ? 'visible' : 'hidden',
...getStyle,
...getStyle.value,
},
'tabIndex': props.focusable ? 0 : undefined,
'role': props.focusable ? 'button' : undefined,
@@ -239,7 +239,7 @@ const NodeWrapper = defineComponent({
nextPos.y = snapGrid[1] * Math.round(nextPos.y / snapGrid[1])
}
const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode)
const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode.value)
// only overwrite positions if there are changes when clamping
if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) {
packages/core/src/composables/useHandle.ts
+29 -27
View File
@@ -1,12 +1,12 @@
import type { MaybeRef } from '@vueuse/core'
import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc } from '~/types'
import type { MaybeRefOrGetter } from '~/types/utils'
interface UseHandleProps {
handleId: MaybeRef<string | null>
nodeId: MaybeRef<string>
type: MaybeRef<HandleType>
handleId: MaybeRefOrGetter<string | null>
nodeId: MaybeRefOrGetter<string>
type: MaybeRefOrGetter<HandleType>
isValidConnection?: ValidConnectionFunc | null
edgeUpdaterType?: MaybeRef<HandleType>
edgeUpdaterType?: MaybeRefOrGetter<HandleType>
onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
}
@@ -16,18 +16,15 @@ function alwaysValid() {
}
export default function useHandle({
handleId: _handleId,
nodeId: _nodeId,
handleId,
nodeId,
type,
isValidConnection,
edgeUpdaterType: _edgeUpdaterType,
edgeUpdaterType,
onEdgeUpdate,
onEdgeUpdateEnd,
}: UseHandleProps) {
const isTarget = computed(() => unref(type) === 'target')
const nodeId = computed(() => unref(_nodeId))
const handleId = computed(() => unref(_handleId))
const edgeUpdaterType = computed(() => unref(_edgeUpdaterType))
const isTarget = computed(() => resolveUnref(type) === 'target')
const {
vueFlowRef,
@@ -60,7 +57,7 @@ export default function useHandle({
const doc = getHostForElement(event.target as HTMLElement)
if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
const node = findNode(nodeId.value)
const node = findNode(resolveUnref(nodeId))
let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
@@ -74,7 +71,7 @@ export default function useHandle({
const { x, y } = getEventPosition(event)
const clickedHandle = doc?.elementFromPoint(x, y)
const handleType = getHandleType(edgeUpdaterType.value, clickedHandle)
const handleType = getHandleType(resolveUnref(edgeUpdaterType), clickedHandle)
const containerBounds = vueFlowRef.value?.getBoundingClientRect()
if (!containerBounds || !handleType) {
@@ -87,8 +84,8 @@ export default function useHandle({
const handleLookup = getHandleLookup({
nodes: getNodes.value,
nodeId: nodeId.value,
handleId: handleId.value,
nodeId: resolveUnref(nodeId),
handleId: resolveUnref(handleId),
handleType,
})
@@ -106,8 +103,8 @@ export default function useHandle({
startConnection(
{
nodeId: nodeId.value,
handleId: handleId.value,
nodeId: resolveUnref(nodeId),
handleId: resolveUnref(handleId),
type: handleType,
},
{
@@ -117,7 +114,7 @@ export default function useHandle({
event,
)
emits.connectStart({ event, nodeId: nodeId.value, handleId: handleId.value, handleType })
emits.connectStart({ event, nodeId: resolveUnref(nodeId), handleId: resolveUnref(handleId), handleType })
function onPointerMove(event: MouseTouchEvent) {
connectionPosition = getEventPosition(event, containerBounds)
@@ -137,8 +134,8 @@ export default function useHandle({
event,
prevClosestHandle,
connectionMode.value,
nodeId.value,
handleId.value,
resolveUnref(nodeId),
resolveUnref(handleId),
isTarget.value ? 'target' : 'source',
isValidConnectionHandler,
doc,
@@ -227,13 +224,18 @@ export default function useHandle({
}
if (!connectionClickStartHandle.value) {
emits.clickConnectStart({ event, nodeId: nodeId.value, handleId: handleId.value })
emits.clickConnectStart({ event, nodeId: resolveUnref(nodeId), handleId: resolveUnref(handleId) })
startConnection({ nodeId: nodeId.value, type: unref(type), handleId: handleId.value }, undefined, event, true)
startConnection(
{ nodeId: resolveUnref(nodeId), type: resolveUnref(type), handleId: resolveUnref(handleId) },
undefined,
event,
true,
)
} else {
let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
const node = findNode(nodeId.value)
const node = findNode(resolveUnref(nodeId))
if (!isValidConnectionHandler && node) {
isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
@@ -248,9 +250,9 @@ export default function useHandle({
const { connection, isValid } = isValidHandle(
event,
{
nodeId: nodeId.value,
id: handleId.value,
type: unref(type),
nodeId: resolveUnref(nodeId),
id: resolveUnref(handleId),
type: resolveUnref(type),
},
connectionMode.value,
connectionClickStartHandle.value.nodeId,
packages/core/src/composables/useNode.ts
+1 -1
View File
@@ -23,7 +23,7 @@ export default function useNode<Data = ElementData, CustomEvents extends Record<
id: nodeId,
nodeEl,
node,
parentNode: computed(() => (node.parentNode ? findNode(node.parentNode) : undefined)),
parentNode: computed(() => findNode(node.parentNode)),
connectedEdges: computed(() => getConnectedEdges([node], edges.value)),
}
}
packages/core/src/store/actions.ts
+21 -13
View File
@@ -180,13 +180,15 @@ export function useActions(
}
const nodeSelectionHandler = (nodes: GraphNode[], selected: boolean) => {
const nodeIds = nodes.map((n) => n.id)
let changedNodes: NodeChange[]
let changedEdges: EdgeChange[] = []
if (state.multiSelectionActive) {
changedNodes = nodeIds.value.map((nodeId) => createSelectionChange(nodeId, selected))
changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, selected))
} else {
const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], nodeIds.value)
const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], nodeIds)
changedNodes = selectionChanges.changedNodes
changedEdges = selectionChanges.changedEdges
}
@@ -201,13 +203,15 @@ export function useActions(
}
const edgeSelectionHandler = (edges: GraphEdge[], selected: boolean) => {
const edgeIds = edges.map((e) => e.id)
let changedNodes: NodeChange[] = []
let changedEdges: EdgeChange[]
if (state.multiSelectionActive) {
changedEdges = edgeIds.value.map((edgeId) => createSelectionChange(edgeId, selected))
changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, selected))
} else {
const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], edgeIds.value)
const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], edgeIds)
changedNodes = selectionChanges.changedNodes
changedEdges = selectionChanges.changedEdges
}
@@ -222,14 +226,14 @@ export function useActions(
}
const elementSelectionHandler = (elements: Elements, selected: boolean) => {
let { changedNodes, changedEdges } = getSelectionChanges(
[...state.nodes, ...state.edges],
[...nodeIds.value, ...edgeIds.value],
)
const nodeIds = elements.filter(isNode).map((n) => n.id)
const edgeIds = elements.filter(isEdge).map((e) => e.id)
let { changedNodes, changedEdges } = getSelectionChanges([...state.nodes, ...state.edges], [...nodeIds, ...edgeIds])
if (state.multiSelectionActive) {
changedNodes = nodeIds.value.map((nodeId) => createSelectionChange(nodeId, selected))
changedEdges = edgeIds.value.map((edgeId) => createSelectionChange(edgeId, selected))
changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, selected))
changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, selected))
}
if (changedNodes.length) {
@@ -258,7 +262,9 @@ export function useActions(
return nodeSelectionHandler(nodes, false)
}
const changedNodes = nodeIds.value.map((nodeId) => createSelectionChange(nodeId, false))
const nodeIds = nodes.map((n) => n.id)
const changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, false))
if (changedNodes.length) {
state.hooks.nodesChange.trigger(changedNodes)
@@ -270,7 +276,9 @@ export function useActions(
return edgeSelectionHandler(edges, false)
}
const changedEdges = edgeIds.value.map((edgeId) => createSelectionChange(edgeId, false))
const edgeIds = edges.map((e) => e.id)
const changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, false))
if (changedEdges.length) {
state.hooks.edgesChange.trigger(changedEdges)
@@ -285,7 +293,7 @@ export function useActions(
const { changedNodes, changedEdges } = elements.reduce(
(acc, curr) => {
const selectionChange = createSelectionChange(curr.id, false)
if (isGraphNode(curr)) {
if (isNode(curr)) {
acc.changedNodes.push(selectionChange)
} else {
acc.changedEdges.push(selectionChange)