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

chore: lint files

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 554ebebd13
commit 56e911c1e7
9 changed files with 231 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/EdgeWrapper.ts
+6 -9
View File
@@ -44,8 +44,6 @@ const EdgeWrapper = defineComponent({
const handleId = ref<string | null>(null)
const type = ref<HandleType>('source')
const edgeUpdaterType = ref<HandleType>('source')
const edgeEl = ref<SVGElement>()
@@ -53,17 +51,13 @@ const EdgeWrapper = defineComponent({
provide(EdgeId, props.id)
provide(EdgeRef, edgeEl)
const sourceNode = $computed(() => findNode(edge.source))
const targetNode = $computed(() => findNode(edge.target))
const edgeClass = $computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
const edgeStyle = $computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
const { handlePointerDown } = useHandle({
nodeId,
handleId,
type,
type: edgeUpdaterType,
isValidConnection: isValidConnection.value,
edgeUpdaterType,
onEdgeUpdate,
@@ -71,6 +65,9 @@ const EdgeWrapper = defineComponent({
})
return () => {
const sourceNode = findNode(edge.source)
const targetNode = findNode(edge.target)
if (!sourceNode || !targetNode || !edge) {
return null
}
@@ -248,9 +245,8 @@ const EdgeWrapper = defineComponent({
nodeId.value = isSourceHandle ? edge.target : edge.source
handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
type.value = isSourceHandle ? 'target' : 'source'
edgeUpdaterType.value = type.value
edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
hooks.emit.updateStart({ event, edge })
@@ -301,6 +297,7 @@ const EdgeWrapper = defineComponent({
if (unselect) {
edgeEl.value?.blur()
removeSelectedEdges([findEdge(props.id)!])
} else {
addSelectedEdges([findEdge(props.id)!])
packages/core/src/components/Nodes/NodeWrapper.ts
+5 -5
View File
@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
return styles
})
const zIndex = computed(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
const zIndex = () => Number(node.zIndex ?? getStyle.value.zIndex ?? 0)
onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(props.id)) {
@@ -124,18 +124,18 @@ const NodeWrapper = defineComponent({
() => parentNode.value?.computedPosition.x,
() => parentNode.value?.computedPosition.y,
() => parentNode.value?.computedPosition.z,
() => zIndex(),
() => node.selected,
() => node.dimensions.height,
() => node.dimensions.width,
() => parentNode.value?.dimensions.height,
() => parentNode.value?.dimensions.width,
zIndex,
],
([newX, newY, parentX, parentY, parentZ]) => {
([newX, newY, parentX, parentY, parentZ, nodeZIndex]) => {
const xyzPos = {
x: newX,
y: newY,
z: zIndex.value + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0),
z: nodeZIndex + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0),
}
if (isNumber(parentX) && isNumber(parentY)) {
@@ -187,7 +187,7 @@ const NodeWrapper = defineComponent({
getClass.value,
],
'style': {
zIndex: node.computedPosition.z ?? zIndex.value,
zIndex: node.computedPosition.z ?? zIndex(),
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
visibility: node.initialized ? 'visible' : 'hidden',
packages/core/src/components/NodesSelection/NodesSelection.vue
+12 -12
View File
@@ -3,18 +3,18 @@ const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y,
const updatePositions = useUpdateNodePositions()
const el = ref()
const el = ref<HTMLDivElement>()
const dragging = useDrag({
el,
onStart(event, node, nodes) {
emits.selectionDragStart({ event, node, nodes })
onStart(args) {
emits.selectionDragStart(args)
},
onDrag(event, node, nodes) {
emits.selectionDrag({ event, node, nodes })
onDrag(args) {
emits.selectionDrag(args)
},
onStop(event, node, nodes) {
emits.selectionDragStop({ event, node, nodes })
onStop(args) {
emits.selectionDragStop(args)
},
})
@@ -24,13 +24,13 @@ onMounted(() => {
}
})
const selectedNodesBBox = $computed(() => getRectOfNodes(getSelectedNodes))
const selectedNodesBBox = computed(() => getRectOfNodes(getSelectedNodes))
const innerStyle = computed(() => ({
width: `${selectedNodesBBox.width}px`,
height: `${selectedNodesBBox.height}px`,
top: `${selectedNodesBBox.y}px`,
left: `${selectedNodesBBox.x}px`,
width: `${selectedNodesBBox.value.width}px`,
height: `${selectedNodesBBox.value.height}px`,
top: `${selectedNodesBBox.value.y}px`,
left: `${selectedNodesBBox.value.x}px`,
}))
function onContextMenu(event: MouseEvent) {
packages/core/src/composables/useDrag.ts
+187 -193
View File
@@ -18,215 +18,209 @@ interface UseDragParams {
}
function useDrag(params: UseDragParams) {
const scope = effectScope()
const {
vueFlowRef,
snapToGrid,
snapGrid,
noDragClassName,
nodes,
nodeExtent,
viewport,
autoPanOnNodeDrag,
nodesDraggable,
panBy,
findNode,
multiSelectionActive,
nodesSelectionActive,
selectNodesOnDrag,
removeSelectedElements,
addSelectedNodes,
updateNodePositions,
emits,
} = $(useVueFlow())
tryOnScopeDispose(scope.stop)
const { onStart, onDrag, onStop, el, disabled, id, selectable } = params
return scope.run(() => {
const {
vueFlowRef,
snapToGrid,
snapGrid,
noDragClassName,
nodes,
nodeExtent,
viewport,
autoPanOnNodeDrag,
nodesDraggable,
panBy,
findNode,
multiSelectionActive,
nodesSelectionActive,
selectNodesOnDrag,
removeSelectedElements,
addSelectedNodes,
updateNodePositions,
emits,
} = $(useVueFlow())
const dragging = ref(false)
const { onStart, onDrag, onStop, el, disabled, id, selectable } = params
let dragItems = $ref<NodeDragItem[]>([])
const dragging = ref(false)
let dragHandler = $ref<DragBehavior<Element, unknown, unknown>>()
let dragItems = $ref<NodeDragItem[]>([])
let containerBounds = $ref<DOMRect | null>(null)
let dragHandler = $ref<DragBehavior<Element, unknown, unknown>>()
let lastPos = $ref<Partial<XYPosition>>({ x: undefined, y: undefined })
let mousePosition = $ref<XYPosition>({ x: 0, y: 0 })
let dragEvent = $ref<MouseEvent | null>(null)
let containerBounds = $ref<DOMRect | null>(null)
let autoPanId = $ref(0)
let autoPanStarted = $ref(false)
let lastPos = $ref<Partial<XYPosition>>({ x: undefined, y: undefined })
let mousePosition = $ref<XYPosition>({ x: 0, y: 0 })
let dragEvent = $ref<MouseEvent | null>(null)
const getPointerPosition = useGetPointerPosition()
let autoPanId = $ref(0)
let autoPanStarted = $ref(false)
const updateNodes = ({ x, y }: XYPosition) => {
lastPos = { x, y }
const node = $computed(() => (id ? findNode(id) : undefined))
let hasChange = false
const getPointerPosition = useGetPointerPosition()
dragItems = dragItems.map((n) => {
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y }
watch([() => resolveUnref(disabled), el], ([isDisabled, nodeEl]) => {
if (nodeEl) {
const selection = select(nodeEl)
const updateNodes = ({ x, y }: XYPosition) => {
lastPos = { x, y }
let hasChange = false
dragItems = dragItems.map((n) => {
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y }
if (snapToGrid) {
nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0])
nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1])
}
const { computedPosition } = calcNextPosition(
n,
nextPosition,
emits.error,
nodeExtent,
n.parentNode ? findNode(n.parentNode) : undefined,
)
// we want to make sure that we only fire a change event when there is a changes
hasChange = hasChange || n.position.x !== computedPosition.x || n.position.y !== computedPosition.y
n.position = computedPosition
return n
})
if (!hasChange) {
return
}
updateNodePositions(dragItems, true, true)
dragging.value = true
if (dragEvent) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onDrag({ event: dragEvent, node: currentNode, nodes })
}
}
const autoPan = (): void => {
if (!containerBounds) {
return
}
const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds)
if (xMovement !== 0 || yMovement !== 0) {
lastPos.x = (lastPos.x ?? 0) - xMovement / viewport.zoom
lastPos.y = (lastPos.y ?? 0) - yMovement / viewport.zoom
updateNodes(lastPos as XYPosition)
panBy({ x: xMovement, y: yMovement })
}
autoPanId = requestAnimationFrame(autoPan)
}
if (isDisabled) {
selection.on('.drag', null)
} else {
dragHandler = drag()
.on('start', (event: UseDragEvent) => {
if (!selectNodesOnDrag && !multiSelectionActive && id) {
if (!node?.selected) {
// we need to reset selected nodes when selectNodesOnDrag=false
removeSelectedElements()
}
}
if (node && resolveUnref(selectable) && selectNodesOnDrag) {
handleNodeClick(
node,
multiSelectionActive,
addSelectedNodes,
removeSelectedElements,
$$(nodesSelectionActive),
false,
nodeEl as HTMLDivElement,
)
}
const pointerPos = getPointerPosition(event)
lastPos = pointerPos
dragItems = getDragItems(nodes, nodesDraggable, pointerPos, findNode, id)
if (dragItems.length) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStart({ event: event.sourceEvent, node: currentNode, nodes })
}
containerBounds = vueFlowRef?.getBoundingClientRect() || null
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
})
.on('drag', (event: UseDragEvent) => {
const pointerPos = getPointerPosition(event)
if (!autoPanStarted && autoPanOnNodeDrag) {
autoPanStarted = true
autoPan()
}
// skip events without movement
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems.length) {
dragEvent = event.sourceEvent as MouseEvent
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
updateNodes(pointerPos)
}
})
.on('end', (event: UseDragEvent) => {
dragging.value = false
autoPanStarted = false
cancelAnimationFrame(autoPanId)
if (dragItems.length) {
updateNodePositions(dragItems, false, false)
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStop({ event: event.sourceEvent, node: currentNode, nodes })
}
})
.filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
const target = event.target as HTMLDivElement
return (
!event.button &&
(!noDragClassName ||
(!hasSelector(target, `.${noDragClassName}`, nodeEl) &&
(!node?.dragHandle || hasSelector(target, node.dragHandle, nodeEl))))
)
})
selection.call(dragHandler)
}
if (snapToGrid) {
nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0])
nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1])
}
const { computedPosition } = calcNextPosition(
n,
nextPosition,
emits.error,
nodeExtent,
n.parentNode ? findNode(n.parentNode) : undefined,
)
// we want to make sure that we only fire a change event when there is a changes
hasChange = hasChange || n.position.x !== computedPosition.x || n.position.y !== computedPosition.y
n.position = computedPosition
return n
})
return dragging
if (!hasChange) {
return
}
updateNodePositions(dragItems, true, true)
dragging.value = true
if (dragEvent) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onDrag({ event: dragEvent, node: currentNode, nodes })
}
}
const autoPan = (): void => {
if (!containerBounds) {
return
}
const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds)
if (xMovement !== 0 || yMovement !== 0) {
lastPos.x = (lastPos.x ?? 0) - xMovement / viewport.zoom
lastPos.y = (lastPos.y ?? 0) - yMovement / viewport.zoom
updateNodes(lastPos as XYPosition)
panBy({ x: xMovement, y: yMovement })
}
autoPanId = requestAnimationFrame(autoPan)
}
watch([() => resolveUnref(disabled), el], ([isDisabled, nodeEl]) => {
if (nodeEl) {
const selection = select(nodeEl)
if (isDisabled) {
selection.on('.drag', null)
} else {
const node = findNode(id)
dragHandler = drag()
.on('start', (event: UseDragEvent) => {
if (!selectNodesOnDrag && !multiSelectionActive && node) {
if (!node.selected) {
// we need to reset selected nodes when selectNodesOnDrag=false
removeSelectedElements()
}
}
if (node && resolveUnref(selectable) && selectNodesOnDrag) {
handleNodeClick(
node,
multiSelectionActive,
addSelectedNodes,
removeSelectedElements,
$$(nodesSelectionActive),
false,
nodeEl as HTMLDivElement,
)
}
const pointerPos = getPointerPosition(event)
lastPos = pointerPos
dragItems = getDragItems(nodes, nodesDraggable, pointerPos, findNode, id)
if (dragItems.length) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStart({ event: event.sourceEvent, node: currentNode, nodes })
}
containerBounds = vueFlowRef?.getBoundingClientRect() || null
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
})
.on('drag', (event: UseDragEvent) => {
const pointerPos = getPointerPosition(event)
if (!autoPanStarted && autoPanOnNodeDrag) {
autoPanStarted = true
autoPan()
}
// skip events without movement
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems.length) {
dragEvent = event.sourceEvent as MouseEvent
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
updateNodes(pointerPos)
}
})
.on('end', (event: UseDragEvent) => {
dragging.value = false
autoPanStarted = false
cancelAnimationFrame(autoPanId)
if (dragItems.length) {
updateNodePositions(dragItems, false, false)
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStop({ event: event.sourceEvent, node: currentNode, nodes })
}
})
.filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
const target = event.target as HTMLDivElement
return (
!event.button &&
(!noDragClassName ||
(!hasSelector(target, `.${noDragClassName}`, nodeEl) &&
(!node?.dragHandle || hasSelector(target, node.dragHandle, nodeEl))))
)
})
selection.call(dragHandler)
}
}
})
return dragging
}
export default useDrag
packages/core/src/composables/useVueFlow.ts
+1
View File
@@ -79,6 +79,7 @@ export class Storage {
type Injection = VueFlowStore | null | undefined
type Scope = (EffectScope & { vueFlowId: string }) | undefined
// todo: maybe replace the storage with a context based solution; This would break calling useVueFlow outside a setup function though, which should be fine
export default (options?: FlowProps): VueFlowStore => {
const storage = Storage.getInstance()
packages/core/src/container/Pane/Pane.vue
+1 -1
View File
@@ -248,7 +248,7 @@ export default {
ref="container"
:key="`pane-${id}`"
class="vue-flow__pane vue-flow__container"
:class="[{ selection: isSelecting }]"
:class="{ selection: isSelecting }"
@click="onClick"
@contextmenu="onContextMenu"
@wheel.passive="onWheel"
packages/core/src/store/actions.ts
+1 -1
View File
@@ -29,7 +29,7 @@ export function useActions(
): Actions {
let fitViewOnInitDone = false
const viewportHelper = useViewport(state, getters)
const viewportHelper = $(useViewport(state, getters))
const updateNodeInternals: Actions['updateNodeInternals'] = (ids) => {
const updateIds = ids ?? nodeIds.value ?? []
packages/node-resizer/src/ResizeControl.vue
+6 -2
View File
@@ -185,7 +185,9 @@ watchEffect((onCleanup) => {
prevValues.value.height = height
}
if (changes.length === 0) return
if (changes.length === 0) {
return
}
const direction = getDirection({
width: prevValues.value.width,
@@ -200,7 +202,9 @@ watchEffect((onCleanup) => {
const callResize = props.shouldResize?.(event, nextValues)
if (callResize === false) return
if (callResize === false) {
return
}
emits('resize', { event, params: nextValues })
packages/pathfinding-edge/src/edge/getBoundingBoxes.ts
+12 -4
View File
@@ -89,10 +89,18 @@ export function getBoundingBoxes(storeNodes: GraphNode[], nodePadding = 0, graph
bottomRight.y = roundUp(bottomRight.y, roundTo)
}
if (topLeft.y < yMin) yMin = topLeft.y
if (topLeft.x < xMin) xMin = topLeft.x
if (bottomRight.y > yMax) yMax = bottomRight.y
if (bottomRight.x > xMax) xMax = bottomRight.x
if (topLeft.y < yMin) {
yMin = topLeft.y
}
if (topLeft.x < xMin) {
xMin = topLeft.x
}
if (bottomRight.y > yMax) {
yMax = bottomRight.y
}
if (bottomRight.x > xMax) {
xMax = bottomRight.x
}
return {
id: node.id,