feat(core): add connectableStart & connectableEnd props

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Handle/Handle.vue

@@ -3,7 +3,21 @@ import { isFunction, isString } from '@vueuse/core'
 import { Position } from '../../types'
 import type { HandleProps } from '../../types/handle'
 
-const { position = Position.Top, connectable, id, isValidConnection, ...props } = defineProps<HandleProps>()
+const {
+  position = Position.Top,
+  connectable,
+  connectableStart = true,
+  connectableEnd = true,
+  id,
+  isValidConnection,
+  ...props
+} = defineProps<HandleProps>()
+
+const emits = defineEmits<{
+  (event: 'mousedown', e: MouseEvent): void
+  (event: 'touchstart', e: TouchEvent): void
+  (event: 'click', e: MouseEvent): void
+}>()
 
 const type = toRef(props, 'type', 'source')
 
@@ -42,6 +56,14 @@ const isConnectable = computed(() => {
   return isDef(connectable) ? connectable : nodesConnectable.value
 })
 
+const isConnecting = computed(
+  () =>
+    connectionStartHandle &&
+    connectionStartHandle.nodeId === nodeId &&
+    connectionStartHandle.handleId === handleId &&
+    connectionStartHandle.type === type.value,
+)
+
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
 until(() => node.initialized)
   .toBe(true, { flush: 'post' })
@@ -71,6 +93,30 @@ until(() => node.initialized)
 
     node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
   })
+
+function onPointerDown(event: MouseEvent | TouchEvent) {
+  const isMouseTriggered = isMouseEvent(event)
+
+  if (isConnectable.value && connectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
+    handlePointerDown(event)
+  }
+
+  if (isMouseTriggered) {
+    emits('mousedown', event)
+  } else {
+    emits('touchstart', event)
+  }
+}
+
+function onClick(event: MouseEvent) {
+  if (!connectionStartHandle && !connectableStart) {
+    return
+  }
+
+  if (isConnectable.value) {
+    handleClick(event)
+  }
+}
 </script>
 
 <script lang="ts">
@@ -95,16 +141,15 @@ export default {
       type,
       {
         connectable: isConnectable,
-        connecting:
-          connectionStartHandle &&
-          connectionStartHandle.nodeId === nodeId &&
-          connectionStartHandle.handleId === handleId &&
-          connectionStartHandle.type === type,
+        connecting: isConnecting,
+        connectablestart: connectableStart,
+        connectableend: connectableEnd,
+        connectionindicator: (isConnectable && connectableStart && !isConnecting) || (connectableEnd && isConnecting),
       },
     ]"
-    @mousedown="handlePointerDown"
-    @touchstart.passive="handlePointerDown"
-    @click="handleClick"
+    @mousedown="onPointerDown"
+    @touchstart.passive="onPointerDown"
+    @click="onClick"
   >
     <slot :id="id" />
   </div>