chore: lint files
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -10,14 +10,22 @@ interface Props extends HTMLAttributes {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function shiftX(x: number, shift: number, position: Position): number {
|
function shiftX(x: number, shift: number, position: Position): number {
|
||||||
if (position === Position.Left) return x - shift
|
if (position === Position.Left) {
|
||||||
if (position === Position.Right) return x + shift
|
return x - shift
|
||||||
|
}
|
||||||
|
if (position === Position.Right) {
|
||||||
|
return x + shift
|
||||||
|
}
|
||||||
return x
|
return x
|
||||||
}
|
}
|
||||||
|
|
||||||
function shiftY(y: number, shift: number, position: Position): number {
|
function shiftY(y: number, shift: number, position: Position): number {
|
||||||
if (position === Position.Top) return y - shift
|
if (position === Position.Top) {
|
||||||
if (position === Position.Bottom) return y + shift
|
return y - shift
|
||||||
|
}
|
||||||
|
if (position === Position.Bottom) {
|
||||||
|
return y + shift
|
||||||
|
}
|
||||||
return y
|
return y
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -25,7 +25,9 @@ onMounted(getBox)
|
|||||||
watch([() => x, () => y, $$(el), () => label], getBox)
|
watch([() => x, () => y, $$(el), () => label], getBox)
|
||||||
|
|
||||||
function getBox() {
|
function getBox() {
|
||||||
if (!el) return
|
if (!el) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const nextBox = el.getBBox()
|
const nextBox = el.getBBox()
|
||||||
|
|
||||||
|
|||||||
@@ -71,7 +71,9 @@ const EdgeWrapper = defineComponent({
|
|||||||
})
|
})
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (!sourceNode || !targetNode || !edge) return null
|
if (!sourceNode || !targetNode || !edge) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
let sourceNodeHandles
|
let sourceNodeHandles
|
||||||
if (connectionMode.value === ConnectionMode.Strict) {
|
if (connectionMode.value === ConnectionMode.Strict) {
|
||||||
@@ -238,7 +240,9 @@ const EdgeWrapper = defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleEdgeUpdater(event: MouseEvent, isSourceHandle: boolean) {
|
function handleEdgeUpdater(event: MouseEvent, isSourceHandle: boolean) {
|
||||||
if (event.button !== 0) return
|
if (event.button !== 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
updating = true
|
updating = true
|
||||||
|
|
||||||
|
|||||||
@@ -85,11 +85,15 @@ until(() => node.initialized)
|
|||||||
.then(() => {
|
.then(() => {
|
||||||
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId.value)
|
const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId.value)
|
||||||
|
|
||||||
if (!vueFlowRef.value || existingBounds) return
|
if (!vueFlowRef.value || existingBounds) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
|
const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
|
||||||
|
|
||||||
if (!nodeEl || !handle.value || !viewportNode || !handleId.value) return
|
if (!nodeEl || !handle.value || !viewportNode || !handleId.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const nodeBounds = nodeEl.value.getBoundingClientRect()
|
const nodeBounds = nodeEl.value.getBoundingClientRect()
|
||||||
|
|
||||||
|
|||||||
@@ -81,9 +81,13 @@ const NodeWrapper = defineComponent({
|
|||||||
const width = node.width instanceof Function ? node.width(node) : node.width
|
const width = node.width instanceof Function ? node.width(node) : node.width
|
||||||
const height = node.height instanceof Function ? node.height(node) : node.height
|
const height = node.height instanceof Function ? node.height(node) : node.height
|
||||||
|
|
||||||
if (width) styles.width = typeof width === 'string' ? width : `${width}px`
|
if (width) {
|
||||||
|
styles.width = typeof width === 'string' ? width : `${width}px`
|
||||||
|
}
|
||||||
|
|
||||||
if (height) styles.height = typeof height === 'string' ? height : `${height}px`
|
if (height) {
|
||||||
|
styles.height = typeof height === 'string' ? height : `${height}px`
|
||||||
|
}
|
||||||
|
|
||||||
return styles
|
return styles
|
||||||
})
|
})
|
||||||
@@ -248,7 +252,9 @@ const NodeWrapper = defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateInternals() {
|
function updateInternals() {
|
||||||
if (nodeElement.value) updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value, forceUpdate: true }])
|
if (nodeElement.value) {
|
||||||
|
updateNodeDimensions([{ id: props.id, nodeElement: nodeElement.value, forceUpdate: true }])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseEnter(event: MouseEvent) {
|
function onMouseEnter(event: MouseEvent) {
|
||||||
@@ -294,7 +300,9 @@ const NodeWrapper = defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onKeyDown(event: KeyboardEvent) {
|
function onKeyDown(event: KeyboardEvent) {
|
||||||
if (isInputDOMNode(event)) return
|
if (isInputDOMNode(event)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (elementSelectionKeys.includes(event.key) && props.selectable) {
|
if (elementSelectionKeys.includes(event.key) && props.selectable) {
|
||||||
const unselect = event.key === 'Escape'
|
const unselect = event.key === 'Escape'
|
||||||
|
|||||||
@@ -38,7 +38,9 @@ function onContextMenu(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onKeyDown(event: KeyboardEvent) {
|
function onKeyDown(event: KeyboardEvent) {
|
||||||
if (disableKeyboardA11y) return
|
if (disableKeyboardA11y) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (arrowKeyDiffs[event.key]) {
|
if (arrowKeyDiffs[event.key]) {
|
||||||
updatePositions(
|
updatePositions(
|
||||||
|
|||||||
@@ -98,7 +98,9 @@ function useDrag(params: UseDragParams) {
|
|||||||
return n
|
return n
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!hasChange) return
|
if (!hasChange) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
updateNodePositions(dragItems, true, true)
|
updateNodePositions(dragItems, true, true)
|
||||||
|
|
||||||
@@ -116,7 +118,9 @@ function useDrag(params: UseDragParams) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const autoPan = (): void => {
|
const autoPan = (): void => {
|
||||||
if (!containerBounds) return
|
if (!containerBounds) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds)
|
const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds)
|
||||||
|
|
||||||
|
|||||||
@@ -77,7 +77,9 @@ export default (keyFilter: MaybeRef<KeyFilter | null>, onChange?: (keyPressed: b
|
|||||||
(e) => {
|
(e) => {
|
||||||
modifierPressed = wasModifierPressed(e)
|
modifierPressed = wasModifierPressed(e)
|
||||||
|
|
||||||
if (!modifierPressed && isInputDOMNode(e)) return
|
if (!modifierPressed && isInputDOMNode(e)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
@@ -90,7 +92,9 @@ export default (keyFilter: MaybeRef<KeyFilter | null>, onChange?: (keyPressed: b
|
|||||||
unrefKeyFilter,
|
unrefKeyFilter,
|
||||||
(e) => {
|
(e) => {
|
||||||
if (isPressed) {
|
if (isPressed) {
|
||||||
if (!modifierPressed && isInputDOMNode(e)) return
|
if (!modifierPressed && isInputDOMNode(e)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
modifierPressed = false
|
modifierPressed = false
|
||||||
|
|
||||||
|
|||||||
@@ -83,7 +83,9 @@ export default (state: State, getters: ComputedGetters) => {
|
|||||||
duration: 0,
|
duration: 0,
|
||||||
},
|
},
|
||||||
) => {
|
) => {
|
||||||
if (!nodes.length) return
|
if (!nodes.length) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
|
const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
|
||||||
const initialized = node.initialized && node.dimensions.width && node.dimensions.height
|
const initialized = node.initialized && node.dimensions.width && node.dimensions.height
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
type UseWindow = Window & typeof globalThis & { chrome?: any }
|
type UseWindow = Window & typeof globalThis & { chrome?: any }
|
||||||
|
|
||||||
export default (): UseWindow => {
|
export default (): UseWindow => {
|
||||||
if (typeof window !== 'undefined') return window as UseWindow
|
if (typeof window !== 'undefined') {
|
||||||
else return { chrome: false } as UseWindow
|
return window as UseWindow
|
||||||
|
} else {
|
||||||
|
return { chrome: false } as UseWindow
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -37,7 +37,9 @@ export default (vueFlowId?: string): ViewportFunctions => {
|
|||||||
duration: 0,
|
duration: 0,
|
||||||
},
|
},
|
||||||
) => {
|
) => {
|
||||||
if (!nodes.length) return
|
if (!nodes.length) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
|
const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
|
||||||
const initialized = node.initialized && node.dimensions.width && node.dimensions.height
|
const initialized = node.initialized && node.dimensions.width && node.dimensions.height
|
||||||
|
|||||||
@@ -25,7 +25,9 @@ const {
|
|||||||
const sourceNode = controlledComputed(
|
const sourceNode = controlledComputed(
|
||||||
() => connectionStartHandle?.nodeId,
|
() => connectionStartHandle?.nodeId,
|
||||||
() => {
|
() => {
|
||||||
if (connectionStartHandle?.nodeId) return findNode(connectionStartHandle.nodeId)
|
if (connectionStartHandle?.nodeId) {
|
||||||
|
return findNode(connectionStartHandle.nodeId)
|
||||||
|
}
|
||||||
|
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
@@ -74,7 +76,9 @@ function getType(type?: string, template?: GraphEdge['template']) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (edgeType && typeof edgeType !== 'string') return edgeType
|
if (edgeType && typeof edgeType !== 'string') {
|
||||||
|
return edgeType
|
||||||
|
}
|
||||||
|
|
||||||
const slot = slots?.[`edge-${name}`]
|
const slot = slots?.[`edge-${name}`]
|
||||||
if (!slot) {
|
if (!slot) {
|
||||||
|
|||||||
@@ -12,8 +12,11 @@ const markers = computed(() => {
|
|||||||
if (marker) {
|
if (marker) {
|
||||||
const markerId = getMarkerId(marker, vueFlowId)
|
const markerId = getMarkerId(marker, vueFlowId)
|
||||||
if (!ids.includes(markerId)) {
|
if (!ids.includes(markerId)) {
|
||||||
if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
|
if (typeof marker === 'object') {
|
||||||
else markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
|
markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
|
||||||
|
} else {
|
||||||
|
markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
|
||||||
|
}
|
||||||
ids.push(markerId)
|
ids.push(markerId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -70,7 +70,9 @@ function getType(type?: string, template?: GraphNode['template']) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (typeof nodeType !== 'string') return nodeType
|
if (typeof nodeType !== 'string') {
|
||||||
|
return nodeType
|
||||||
|
}
|
||||||
|
|
||||||
const slot = slots?.[`node-${name}`]
|
const slot = slots?.[`node-${name}`]
|
||||||
if (!slot) {
|
if (!slot) {
|
||||||
|
|||||||
@@ -42,7 +42,9 @@ const containerBounds = ref<DOMRect>()
|
|||||||
const hasActiveSelection = computed(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
|
const hasActiveSelection = computed(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
|
||||||
|
|
||||||
useKeyPress(deleteKeyCode, (keyPressed) => {
|
useKeyPress(deleteKeyCode, (keyPressed) => {
|
||||||
if (!keyPressed) return
|
if (!keyPressed) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const nodesToRemove = getNodes.value.reduce<GraphNode[]>((res, node) => {
|
const nodesToRemove = getNodes.value.reduce<GraphNode[]>((res, node) => {
|
||||||
if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) {
|
if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) {
|
||||||
@@ -82,7 +84,9 @@ function resetUserSelection() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onClick(event: MouseEvent) {
|
function onClick(event: MouseEvent) {
|
||||||
if (event.target !== container.value || hasActiveSelection.value) return
|
if (event.target !== container.value || hasActiveSelection.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
emits.paneClick(event)
|
emits.paneClick(event)
|
||||||
|
|
||||||
@@ -92,7 +96,9 @@ function onClick(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onContextMenu(event: MouseEvent) {
|
function onContextMenu(event: MouseEvent) {
|
||||||
if (event.target !== container.value) return
|
if (event.target !== container.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (Array.isArray(panOnDrag.value) && panOnDrag.value?.includes(2)) {
|
if (Array.isArray(panOnDrag.value) && panOnDrag.value?.includes(2)) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
@@ -103,7 +109,9 @@ function onContextMenu(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onWheel(event: WheelEvent) {
|
function onWheel(event: WheelEvent) {
|
||||||
if (event.target !== container.value) return
|
if (event.target !== container.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
emits.paneScroll(event)
|
emits.paneScroll(event)
|
||||||
}
|
}
|
||||||
@@ -141,11 +149,19 @@ function onMouseDown(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onMouseMove(event: MouseEvent) {
|
function onMouseMove(event: MouseEvent) {
|
||||||
if (!isSelecting || !containerBounds.value || !userSelectionRect.value) return
|
if (!isSelecting || !containerBounds.value || !userSelectionRect.value) {
|
||||||
if (!hasActiveSelection.value) return emits.paneMouseMove(event)
|
return
|
||||||
|
}
|
||||||
|
if (!hasActiveSelection.value) {
|
||||||
|
return emits.paneMouseMove(event)
|
||||||
|
}
|
||||||
|
|
||||||
if (!userSelectionActive.value) userSelectionActive.value = true
|
if (!userSelectionActive.value) {
|
||||||
if (nodesSelectionActive.value) nodesSelectionActive.value = false
|
userSelectionActive.value = true
|
||||||
|
}
|
||||||
|
if (nodesSelectionActive.value) {
|
||||||
|
nodesSelectionActive.value = false
|
||||||
|
}
|
||||||
|
|
||||||
const mousePos = getMousePosition(event, containerBounds.value)
|
const mousePos = getMousePosition(event, containerBounds.value)
|
||||||
const startX = userSelectionRect.value.startX ?? 0
|
const startX = userSelectionRect.value.startX ?? 0
|
||||||
@@ -177,9 +193,13 @@ function onMouseMove(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onMouseUp(event: MouseEvent) {
|
function onMouseUp(event: MouseEvent) {
|
||||||
if (!hasActiveSelection.value) return
|
if (!hasActiveSelection.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (event.button !== 0) return
|
if (event.button !== 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// We only want to trigger click functions when in selection mode if
|
// We only want to trigger click functions when in selection mode if
|
||||||
// the user did not move the mouse.
|
// the user did not move the mouse.
|
||||||
@@ -195,7 +215,9 @@ function onMouseUp(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onMouseLeave(event: MouseEvent) {
|
function onMouseLeave(event: MouseEvent) {
|
||||||
if (!hasActiveSelection.value) return emits.paneMouseLeave(event)
|
if (!hasActiveSelection.value) {
|
||||||
|
return emits.paneMouseLeave(event)
|
||||||
|
}
|
||||||
|
|
||||||
if (userSelectionActive.value) {
|
if (userSelectionActive.value) {
|
||||||
nodesSelectionActive.value = prevSelectedNodesCount.value > 0
|
nodesSelectionActive.value = prevSelectedNodesCount.value > 0
|
||||||
@@ -206,7 +228,9 @@ function onMouseLeave(event: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onMouseEnter(event: MouseEvent) {
|
function onMouseEnter(event: MouseEvent) {
|
||||||
if (hasActiveSelection.value) return
|
if (hasActiveSelection.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
emits.paneMouseEnter(event)
|
emits.paneMouseEnter(event)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -118,7 +118,9 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||||
if (!event.sourceEvent) return null
|
if (!event.sourceEvent) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
// we need to remember it here, because it's always 0 in the "zoom" event
|
// we need to remember it here, because it's always 0 in the "zoom" event
|
||||||
mouseButton = event.sourceEvent.button
|
mouseButton = event.sourceEvent.button
|
||||||
@@ -138,7 +140,9 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||||
if (!event.sourceEvent) return null
|
if (!event.sourceEvent) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
isZoomingOrPanning = false
|
isZoomingOrPanning = false
|
||||||
|
|
||||||
@@ -223,27 +227,43 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// if all interactions are disabled, we prevent all zoom events
|
// if all interactions are disabled, we prevent all zoom events
|
||||||
if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
|
if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// during a selection we prevent all other interactions
|
// during a selection we prevent all other interactions
|
||||||
if (userSelectionActive) return false
|
if (userSelectionActive) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// if zoom on double click is disabled, we prevent the double click event
|
// if zoom on double click is disabled, we prevent the double click event
|
||||||
if (!zoomOnDoubleClick && event.type === 'dblclick') return false
|
if (!zoomOnDoubleClick && event.type === 'dblclick') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// if the target element is inside an element with the nowheel class, we prevent zooming
|
// if the target element is inside an element with the nowheel class, we prevent zooming
|
||||||
if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') return false
|
if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// if the target element is inside an element with the nopan class, we prevent panning
|
// if the target element is inside an element with the nopan class, we prevent panning
|
||||||
if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') return false
|
if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
|
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// when there is no scroll handling enabled, we prevent all wheel events
|
// when there is no scroll handling enabled, we prevent all wheel events
|
||||||
if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') return false
|
if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
|
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
|
||||||
if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
|
if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
// if the pane is only movable using allowed clicks
|
// if the pane is only movable using allowed clicks
|
||||||
if (
|
if (
|
||||||
@@ -283,7 +303,9 @@ function eventToFlowTransform(eventTransform: ZoomTransform): ViewportTransform
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setDimensions() {
|
function setDimensions() {
|
||||||
if (!viewportEl.value) return
|
if (!viewportEl.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const { width, height } = getDimensions(viewportEl.value)
|
const { width, height } = getDimensions(viewportEl.value)
|
||||||
|
|
||||||
|
|||||||
@@ -25,8 +25,11 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
|
|||||||
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
|
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
|
||||||
let parentStyles: Styles = {}
|
let parentStyles: Styles = {}
|
||||||
|
|
||||||
if (isFunction(parent.style)) parentStyles = { ...parent.style(parent) }
|
if (isFunction(parent.style)) {
|
||||||
else if (parent.style) parentStyles = { ...parent.style }
|
parentStyles = { ...parent.style(parent) }
|
||||||
|
} else if (parent.style) {
|
||||||
|
parentStyles = { ...parent.style }
|
||||||
|
}
|
||||||
|
|
||||||
parentStyles.width = parentStyles.width ?? `${parent.dimensions.width}px`
|
parentStyles.width = parentStyles.width ?? `${parent.dimensions.width}px`
|
||||||
parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
|
parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
|
||||||
@@ -114,11 +117,15 @@ export function applyChanges<
|
|||||||
if (change.type === 'add') {
|
if (change.type === 'add') {
|
||||||
const index = elements.findIndex((el) => el.id === change.item.id)
|
const index = elements.findIndex((el) => el.id === change.item.id)
|
||||||
|
|
||||||
if (index === -1) elements.push(<T>change.item)
|
if (index === -1) {
|
||||||
|
elements.push(<T>change.item)
|
||||||
|
}
|
||||||
} else if (change.type === 'remove') {
|
} else if (change.type === 'remove') {
|
||||||
const index = elements.findIndex((el) => el.id === change.id)
|
const index = elements.findIndex((el) => el.id === change.id)
|
||||||
|
|
||||||
if (index !== -1) elements.splice(index, 1)
|
if (index !== -1) {
|
||||||
|
elements.splice(index, 1)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -134,9 +141,13 @@ export function applyChanges<
|
|||||||
break
|
break
|
||||||
case 'position':
|
case 'position':
|
||||||
if (isGraphNode(element)) {
|
if (isGraphNode(element)) {
|
||||||
if (typeof currentChange.position !== 'undefined') element.position = currentChange.position
|
if (typeof currentChange.position !== 'undefined') {
|
||||||
|
element.position = currentChange.position
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof currentChange.dragging !== 'undefined') element.dragging = currentChange.dragging
|
if (typeof currentChange.dragging !== 'undefined') {
|
||||||
|
element.dragging = currentChange.dragging
|
||||||
|
}
|
||||||
|
|
||||||
if (element.expandParent && element.parentNode) {
|
if (element.expandParent && element.parentNode) {
|
||||||
const parent = elements[elementIds.indexOf(element.parentNode)]
|
const parent = elements[elementIds.indexOf(element.parentNode)]
|
||||||
@@ -149,7 +160,9 @@ export function applyChanges<
|
|||||||
break
|
break
|
||||||
case 'dimensions':
|
case 'dimensions':
|
||||||
if (isGraphNode(element)) {
|
if (isGraphNode(element)) {
|
||||||
if (typeof currentChange.dimensions !== 'undefined') element.dimensions = currentChange.dimensions
|
if (typeof currentChange.dimensions !== 'undefined') {
|
||||||
|
element.dimensions = currentChange.dimensions
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof currentChange.updateStyle !== 'undefined') {
|
if (typeof currentChange.updateStyle !== 'undefined') {
|
||||||
element.style = {
|
element.style = {
|
||||||
@@ -159,7 +172,9 @@ export function applyChanges<
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof currentChange.resizing !== 'undefined') element.resizing = currentChange.resizing
|
if (typeof currentChange.resizing !== 'undefined') {
|
||||||
|
element.resizing = currentChange.resizing
|
||||||
|
}
|
||||||
|
|
||||||
if (element.expandParent && element.parentNode) {
|
if (element.expandParent && element.parentNode) {
|
||||||
const parent = elements[elementIds.indexOf(element.parentNode)]
|
const parent = elements[elementIds.indexOf(element.parentNode)]
|
||||||
@@ -175,7 +190,9 @@ export function applyChanges<
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!element.initialized) element.initialized = true
|
if (!element.initialized) {
|
||||||
|
element.initialized = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,8 +5,11 @@ export function hasSelector(target: Element, selector: string, node: Element): b
|
|||||||
let current = target
|
let current = target
|
||||||
|
|
||||||
do {
|
do {
|
||||||
if (current && current.matches(selector)) return true
|
if (current && current.matches(selector)) {
|
||||||
else if (current === node) return false
|
return true
|
||||||
|
} else if (current === node) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
current = current.parentElement as Element
|
current = current.parentElement as Element
|
||||||
} while (current)
|
} while (current)
|
||||||
|
|||||||
@@ -141,7 +141,9 @@ export function groupEdgesByZLevel(edges: GraphEdge[], findNode: Actions['findNo
|
|||||||
const source = findNode(edge.source)
|
const source = findNode(edge.source)
|
||||||
const target = findNode(edge.target)
|
const target = findNode(edge.target)
|
||||||
|
|
||||||
if (!source || !target) return tree
|
if (!source || !target) {
|
||||||
|
return tree
|
||||||
|
}
|
||||||
|
|
||||||
if (elevateEdgesOnSelect) {
|
if (elevateEdgesOnSelect) {
|
||||||
z = hasZIndex ? edge.zIndex! : Math.max(source.computedPosition.z || 0, target.computedPosition.z || 0)
|
z = hasZIndex ? edge.zIndex! : Math.max(source.computedPosition.z || 0, target.computedPosition.z || 0)
|
||||||
|
|||||||
@@ -58,8 +58,11 @@ export function getHostForElement(element: HTMLElement): Document {
|
|||||||
const doc = element.getRootNode() as Document
|
const doc = element.getRootNode() as Document
|
||||||
const window = useWindow()
|
const window = useWindow()
|
||||||
|
|
||||||
if ('elementFromPoint' in doc) return doc
|
if ('elementFromPoint' in doc) {
|
||||||
else return window.document
|
return doc
|
||||||
|
} else {
|
||||||
|
return window.document
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isEdge<Data = ElementData>(element: MaybeElement): element is Edge<Data> {
|
export function isEdge<Data = ElementData>(element: MaybeElement): element is Edge<Data> {
|
||||||
@@ -147,7 +150,9 @@ function getConnectedElements<T extends Elements = FlowElements>(
|
|||||||
elements: T,
|
elements: T,
|
||||||
dir: 'source' | 'target',
|
dir: 'source' | 'target',
|
||||||
): T extends FlowElements ? GraphNode[] : Node[] {
|
): T extends FlowElements ? GraphNode[] : Node[] {
|
||||||
if (!isNode(node)) return []
|
if (!isNode(node)) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
const origin = dir === 'source' ? 'target' : 'source'
|
const origin = dir === 'source' ? 'target' : 'source'
|
||||||
const ids = elements.filter((e) => isEdge(e) && e[origin] === node.id).map((e) => isEdge(e) && e[dir])
|
const ids = elements.filter((e) => isEdge(e) && e[origin] === node.id).map((e) => isEdge(e) && e[dir])
|
||||||
return elements.filter((e) => ids.includes(e.id)) as T extends FlowElements ? GraphNode[] : Node[]
|
return elements.filter((e) => ids.includes(e.id)) as T extends FlowElements ? GraphNode[] : Node[]
|
||||||
@@ -200,7 +205,9 @@ export function addEdge(edgeParams: Edge | Connection, elements: Elements, defau
|
|||||||
|
|
||||||
edge = parseEdge(edge, defaults)
|
edge = parseEdge(edge, defaults)
|
||||||
|
|
||||||
if (connectionExists(edge, elements)) return elements
|
if (connectionExists(edge, elements)) {
|
||||||
|
return elements
|
||||||
|
}
|
||||||
|
|
||||||
elements.push(edge)
|
elements.push(edge)
|
||||||
|
|
||||||
@@ -363,6 +370,21 @@ export function getConnectedEdges(nodes: (Node | GraphNode | { id: string })[],
|
|||||||
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
|
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getConnectedNodes(nodes: (Node | GraphNode | { id: string })[], edges: GraphEdge[]) {
|
||||||
|
const nodeIds = nodes.map((node) => node.id)
|
||||||
|
const connectedNodeIds = edges.reduce((acc, edge) => {
|
||||||
|
if (nodeIds.includes(edge.source)) {
|
||||||
|
acc.add(edge.target)
|
||||||
|
}
|
||||||
|
if (nodeIds.includes(edge.target)) {
|
||||||
|
acc.add(edge.source)
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, new Set<string>())
|
||||||
|
|
||||||
|
return nodes.filter((node) => connectedNodeIds.has(node.id))
|
||||||
|
}
|
||||||
|
|
||||||
export function getTransformForBounds(
|
export function getTransformForBounds(
|
||||||
bounds: Rect,
|
bounds: Rect,
|
||||||
width: number,
|
width: number,
|
||||||
@@ -396,20 +418,30 @@ export function getXYZPos(parentPos: XYZPosition, computedPosition: XYZPosition)
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function isParentSelected(node: GraphNode, findNode: Actions['findNode']): boolean {
|
export function isParentSelected(node: GraphNode, findNode: Actions['findNode']): boolean {
|
||||||
if (!node.parentNode) return false
|
if (!node.parentNode) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
const parent = findNode(node.parentNode)
|
const parent = findNode(node.parentNode)
|
||||||
if (!parent) return false
|
if (!parent) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
if (parent.selected) return true
|
if (parent.selected) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
return isParentSelected(parent, findNode)
|
return isParentSelected(parent, findNode)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getMarkerId(marker: EdgeMarkerType | undefined, vueFlowId?: string) {
|
export function getMarkerId(marker: EdgeMarkerType | undefined, vueFlowId?: string) {
|
||||||
if (typeof marker === 'undefined') return ''
|
if (typeof marker === 'undefined') {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof marker === 'string') return marker
|
if (typeof marker === 'string') {
|
||||||
|
return marker
|
||||||
|
}
|
||||||
|
|
||||||
const idPrefix = vueFlowId ? `${vueFlowId}__` : ''
|
const idPrefix = vueFlowId ? `${vueFlowId}__` : ''
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,9 @@ export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[], onE
|
|||||||
|
|
||||||
edge = parseEdge(edge)
|
edge = parseEdge(edge)
|
||||||
|
|
||||||
if (connectionExists(edge, edges)) return false
|
if (connectionExists(edge, edges)) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
return edge
|
return edge
|
||||||
}
|
}
|
||||||
@@ -102,7 +104,9 @@ export function createGraphNodes(
|
|||||||
node.isParent = true
|
node.isParent = true
|
||||||
}
|
}
|
||||||
|
|
||||||
if (parentNode) parentNode.isParent = true
|
if (parentNode) {
|
||||||
|
parentNode.isParent = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -26,8 +26,11 @@ export function useWatch(
|
|||||||
store.setElements(elements)
|
store.setElements(elements)
|
||||||
|
|
||||||
// only trigger store watcher immediately if we actually set any elements to the store
|
// only trigger store watcher immediately if we actually set any elements to the store
|
||||||
if (!pauseStore && !immediateStore && elements.length) immediateStore = true
|
if (!pauseStore && !immediateStore && elements.length) {
|
||||||
else pauseStore?.resume()
|
immediateStore = true
|
||||||
|
} else {
|
||||||
|
pauseStore?.resume()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -69,8 +72,11 @@ export function useWatch(
|
|||||||
store.setNodes(nodes)
|
store.setNodes(nodes)
|
||||||
|
|
||||||
// only trigger store watcher immediately if we actually set any elements to the store
|
// only trigger store watcher immediately if we actually set any elements to the store
|
||||||
if (!pauseStore && !immediateStore && nodes.length) immediateStore = true
|
if (!pauseStore && !immediateStore && nodes.length) {
|
||||||
else pauseStore?.resume()
|
immediateStore = true
|
||||||
|
} else {
|
||||||
|
pauseStore?.resume()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -112,8 +118,11 @@ export function useWatch(
|
|||||||
store.setEdges(edges)
|
store.setEdges(edges)
|
||||||
|
|
||||||
// only trigger store watcher immediately if we actually set any elements to the store
|
// only trigger store watcher immediately if we actually set any elements to the store
|
||||||
if (!pauseStore && !immediateStore && edges.length) immediateStore = true
|
if (!pauseStore && !immediateStore && edges.length) {
|
||||||
else pauseStore?.resume()
|
immediateStore = true
|
||||||
|
} else {
|
||||||
|
pauseStore?.resume()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -89,7 +89,9 @@ const viewBox = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const d = computed(() => {
|
const d = computed(() => {
|
||||||
if (!viewBox.value.x || !viewBox.value.y) return ''
|
if (!viewBox.value.x || !viewBox.value.y) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
|
M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
|
||||||
|
|||||||
Reference in New Issue
Block a user