diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 19f6b0ba2..101a8a4d0 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,29 @@
# @vue-flow/core
+## 1.29.0
+
+### Minor Changes
+
+- [#1237](https://github.com/bcakmakoglu/vue-flow/pull/1237) [`16c7d32`](https://github.com/bcakmakoglu/vue-flow/commit/16c7d32746d72dd413e866c5c19461a5bee227ca) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Expose handleClick and handlePointerDown from handle components
+
+- [#1238](https://github.com/bcakmakoglu/vue-flow/pull/1238) [`dd4cbe0`](https://github.com/bcakmakoglu/vue-flow/commit/dd4cbe0c92121fc6039e5f43bdc6e5d1663b8069) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `useConnection` composable for easy access of current connection params
+
+### Patch Changes
+
+- [#1243](https://github.com/bcakmakoglu/vue-flow/pull/1243) [`b5e77a4`](https://github.com/bcakmakoglu/vue-flow/commit/b5e77a43da76db0ee4cbc16d205e90ef84f2ed62) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Pass vueflow id to `getMarkerId` in connection line component
+
+- [#1236](https://github.com/bcakmakoglu/vue-flow/pull/1236) [`be15b5a`](https://github.com/bcakmakoglu/vue-flow/commit/be15b5acbcb6ccd06107a5dc195cc9e0c35b211c) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add default event handler when no handlers for a given event exist anymore
+
+- [#1250](https://github.com/bcakmakoglu/vue-flow/pull/1250) [`f3c786f`](https://github.com/bcakmakoglu/vue-flow/commit/f3c786f3c9e4445a401e063306e8d1985b3eaf5e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Allow panning on scroll when selection is active
+
+- [#1236](https://github.com/bcakmakoglu/vue-flow/pull/1236) [`d46ac3a`](https://github.com/bcakmakoglu/vue-flow/commit/d46ac3a52c55e96d2e1994a60407767cdd945118) Thanks [@github-actions](https://github.com/apps/github-actions)! - Merge connection line styles with options
+
+- [#1250](https://github.com/bcakmakoglu/vue-flow/pull/1250) [`b71754f`](https://github.com/bcakmakoglu/vue-flow/commit/b71754fe10a3f7a13132ed1f6058385da267ed88) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Return false for boolean key filter and set the `isPressed` ref to whatever the keyFilter would be (true/false)
+
+- [#1250](https://github.com/bcakmakoglu/vue-flow/pull/1250) [`4109cf1`](https://github.com/bcakmakoglu/vue-flow/commit/4109cf1027455fbb308cdc4262e401e904ad07e2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Await fitView before emitting pane-ready
+
+- [#1236](https://github.com/bcakmakoglu/vue-flow/pull/1236) [`d46ac3a`](https://github.com/bcakmakoglu/vue-flow/commit/d46ac3a52c55e96d2e1994a60407767cdd945118) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add fallback for connection line type (bezier as default)
+
## 1.28.0
### Minor Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 4cd3d06fc..c962caa4b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue-flow/core",
- "version": "1.28.0",
+ "version": "1.29.0",
"private": false,
"license": "MIT",
"author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
index 89bc8763c..b0615e9f1 100644
--- a/packages/core/src/components/ConnectionLine/index.ts
+++ b/packages/core/src/components/ConnectionLine/index.ts
@@ -19,6 +19,7 @@ const ConnectionLine = defineComponent({
compatConfig: { MODE: 3 },
setup() {
const {
+ id,
connectionMode,
connectionStartHandle,
connectionEndHandle,
@@ -91,7 +92,7 @@ const ConnectionLine = defineComponent({
return null
}
- const type = connectionLineType.value ?? connectionLineOptions.value.type
+ const type = connectionLineType.value ?? connectionLineOptions.value.type ?? ConnectionLineType.Bezier
let dAttr = ''
@@ -138,16 +139,19 @@ const ConnectionLine = defineComponent({
sourceHandle: fromHandle,
targetNode,
targetHandle: toHandle,
- markerEnd: `url(#${getMarkerId(connectionLineOptions.value.markerEnd)})`,
- markerStart: `url(#${getMarkerId(connectionLineOptions.value.markerStart)})`,
+ markerEnd: `url(#${getMarkerId(connectionLineOptions.value.markerEnd, id)})`,
+ markerStart: `url(#${getMarkerId(connectionLineOptions.value.markerStart, id)})`,
connectionStatus: connectionStatus.value,
})
: h('path', {
'd': dAttr,
'class': [connectionLineOptions.value.class, connectionStatus, 'vue-flow__connection-path'],
- 'style': connectionLineStyle.value || connectionLineOptions.value.style,
- 'marker-end': `url(#${getMarkerId(connectionLineOptions.value.markerEnd)})`,
- 'marker-start': `url(#${getMarkerId(connectionLineOptions.value.markerStart)})`,
+ 'style': {
+ ...connectionLineStyle.value,
+ ...connectionLineOptions.value.style,
+ },
+ 'marker-end': `url(#${getMarkerId(connectionLineOptions.value.markerEnd, id)})`,
+ 'marker-start': `url(#${getMarkerId(connectionLineOptions.value.markerStart, id)})`,
}),
),
)
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index 4a398c2f6..f75c28bd6 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -17,7 +17,7 @@ import EdgeAnchor from './EdgeAnchor'
interface Props {
id: string
- type: EdgeComponent | Function | Object | false
+ type: EdgeComponent | ((...args: any[]) => any) | object | false
name: string
selectable?: boolean
focusable?: boolean
@@ -49,7 +49,7 @@ const EdgeWrapper = defineComponent({
const hooks = useEdgeHooks(props.edge, emits)
- const edge = $(useVModel(props, 'edge'))
+ const edge = useVModel(props, 'edge')
const mouseOver = ref(false)
@@ -66,8 +66,8 @@ const EdgeWrapper = defineComponent({
provide(EdgeId, props.id)
provide(EdgeRef, edgeEl)
- 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 edgeClass = computed(() => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class))
+ const edgeStyle = computed(() => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style))
const { handlePointerDown } = useHandle({
nodeId,
@@ -80,23 +80,25 @@ const EdgeWrapper = defineComponent({
})
return () => {
- const sourceNode = findNode(edge.source)
- const targetNode = findNode(edge.target)
+ const sourceNode = findNode(edge.value.source)
+ const targetNode = findNode(edge.value.target)
if (!sourceNode && !targetNode) {
- flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
+ flowHooks.value.error.trigger(
+ new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.value.id, edge.value.source, edge.value.target),
+ )
return null
}
if (!sourceNode) {
- flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.id, edge.source))
+ flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.value.id, edge.value.source))
return null
}
if (!targetNode) {
- flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.id, edge.target))
+ flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.value.id, edge.value.target))
return null
}
@@ -112,7 +114,7 @@ const EdgeWrapper = defineComponent({
sourceNodeHandles = [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]
}
- const sourceHandle = getHandle(sourceNodeHandles, edge.sourceHandle)
+ const sourceHandle = getHandle(sourceNodeHandles, edge.value.sourceHandle)
let targetNodeHandles
if (connectionMode.value === ConnectionMode.Strict) {
@@ -121,7 +123,7 @@ const EdgeWrapper = defineComponent({
targetNodeHandles = [...(targetNode.handleBounds.target || []), ...(targetNode.handleBounds.source || [])]
}
- const targetHandle = getHandle(targetNodeHandles, edge.targetHandle)
+ const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
@@ -136,10 +138,10 @@ const EdgeWrapper = defineComponent({
targetPosition,
)
- edge.sourceX = sourceX
- edge.sourceY = sourceY
- edge.targetX = targetX
- edge.targetY = targetY
+ edge.value.sourceX = sourceX
+ edge.value.sourceY = sourceY
+ edge.value.targetX = targetX
+ edge.value.targetY = targetY
return h(
'g',
@@ -154,8 +156,8 @@ const EdgeWrapper = defineComponent({
edgeClass.value,
{
updating: mouseOver.value,
- selected: edge.selected,
- animated: edge.animated,
+ selected: edge.value.selected,
+ animated: edge.value.animated,
inactive: !props.selectable,
},
],
@@ -167,7 +169,10 @@ const EdgeWrapper = defineComponent({
'onMouseleave': onEdgeMouseLeave,
'onKeyDown': props.focusable ? onKeyDown : undefined,
'tabIndex': props.focusable ? 0 : undefined,
- 'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
+ 'aria-label':
+ edge.value.ariaLabel === null
+ ? undefined
+ : edge.value.ariaLabel || `Edge from ${edge.value.source} to ${edge.value.target}`,
'aria-describedby': props.focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
'role': props.focusable ? 'button' : 'img',
},
@@ -178,32 +183,32 @@ const EdgeWrapper = defineComponent({
id: props.id,
sourceNode,
targetNode,
- source: edge.source,
- target: edge.target,
- type: edge.type,
+ source: edge.value.source,
+ target: edge.value.target,
+ type: edge.value.type,
updatable: props.updatable,
- selected: edge.selected,
- animated: edge.animated,
- label: edge.label,
- labelStyle: edge.labelStyle,
- labelShowBg: edge.labelShowBg,
- labelBgStyle: edge.labelBgStyle,
- labelBgPadding: edge.labelBgPadding,
- labelBgBorderRadius: edge.labelBgBorderRadius,
- data: edge.data,
- events: { ...edge.events, ...hooks.on },
+ selected: edge.value.selected,
+ animated: edge.value.animated,
+ label: edge.value.label,
+ labelStyle: edge.value.labelStyle,
+ labelShowBg: edge.value.labelShowBg,
+ labelBgStyle: edge.value.labelBgStyle,
+ labelBgPadding: edge.value.labelBgPadding,
+ labelBgBorderRadius: edge.value.labelBgBorderRadius,
+ data: edge.value.data,
+ events: { ...edge.value.events, ...hooks.on },
style: edgeStyle.value,
- markerStart: `url(#${getMarkerId(edge.markerStart, vueFlowId)})`,
- markerEnd: `url(#${getMarkerId(edge.markerEnd, vueFlowId)})`,
+ markerStart: `url(#${getMarkerId(edge.value.markerStart, vueFlowId)})`,
+ markerEnd: `url(#${getMarkerId(edge.value.markerEnd, vueFlowId)})`,
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
- sourceHandleId: edge.sourceHandle,
- targetHandleId: edge.targetHandle,
- interactionWidth: edge.interactionWidth,
+ sourceHandleId: edge.value.sourceHandle,
+ targetHandleId: edge.value.targetHandle,
+ interactionWidth: edge.value.interactionWidth,
}),
[
props.updatable === 'source' || props.updatable === true
@@ -260,11 +265,11 @@ const EdgeWrapper = defineComponent({
}
function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
- hooks.emit.update({ event, edge, connection })
+ hooks.emit.update({ event, edge: edge.value, connection })
}
function onEdgeUpdateEnd(event: MouseTouchEvent) {
- hooks.emit.updateEnd({ event, edge })
+ hooks.emit.updateEnd({ event, edge: edge.value })
updating.value = false
}
@@ -275,28 +280,28 @@ const EdgeWrapper = defineComponent({
updating.value = true
- nodeId.value = isSourceHandle ? edge.target : edge.source
- handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
+ nodeId.value = isSourceHandle ? edge.value.target : edge.value.source
+ handleId.value = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
- hooks.emit.updateStart({ event, edge })
+ hooks.emit.updateStart({ event, edge: edge.value })
handlePointerDown(event)
}
function onEdgeClick(event: MouseEvent) {
- const data = { event, edge }
+ const data = { event, edge: edge.value }
if (props.selectable) {
nodesSelectionActive.value = false
- if (edge.selected && multiSelectionActive.value) {
- removeSelectedEdges([edge])
+ if (edge.value.selected && multiSelectionActive.value) {
+ removeSelectedEdges([edge.value])
edgeEl.value?.blur()
} else {
- addSelectedEdges([edge])
+ addSelectedEdges([edge.value])
}
}
@@ -304,23 +309,23 @@ const EdgeWrapper = defineComponent({
}
function onEdgeContextMenu(event: MouseEvent) {
- hooks.emit.contextMenu({ event, edge })
+ hooks.emit.contextMenu({ event, edge: edge.value })
}
function onDoubleClick(event: MouseEvent) {
- hooks.emit.doubleClick({ event, edge })
+ hooks.emit.doubleClick({ event, edge: edge.value })
}
function onEdgeMouseEnter(event: MouseEvent) {
- hooks.emit.mouseEnter({ event, edge })
+ hooks.emit.mouseEnter({ event, edge: edge.value })
}
function onEdgeMouseMove(event: MouseEvent) {
- hooks.emit.mouseMove({ event, edge })
+ hooks.emit.mouseMove({ event, edge: edge.value })
}
function onEdgeMouseLeave(event: MouseEvent) {
- hooks.emit.mouseLeave({ event, edge })
+ hooks.emit.mouseLeave({ event, edge: edge.value })
}
function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {
diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index 5f59fbadf..f3088b9a6 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -156,6 +156,13 @@ function onClick(event: MouseEvent) {
handleClick(event)
}
}
+
+defineExpose({
+ handleClick,
+ handlePointerDown,
+ onClick,
+ onPointerDown,
+})
@@ -214,7 +213,6 @@ export default {