update(script-setup): Refactor additional-components

* Remove jsx files

fix: ConnectionLine.vue not recalculating properly

src/components/Handle/Handle.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ConnectionMode, ElementId, Position, RevueFlowStore } from '~/types'
-import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/handler'
+import { ElementId, Position, RevueFlowStore } from '~/types'
+import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/utils'
 import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
 
 interface HandleProps {
@@ -15,7 +15,6 @@ const props = withDefaults(defineProps<HandleProps>(), {
   id: '',
   type: 'source',
   position: Position.Top,
-  isValidConnection: () => true,
   connectable: true,
 })
 
@@ -24,7 +23,18 @@ const hooks = inject<RevueFlowHooks>('hooks')!
 const nodeId = inject<ElementId>('NodeIdContext')!
 
 const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(event, store, hooks, props.id, nodeId, props.type === 'target', props.isValidConnection)
+  onMouseDown(
+    event,
+    store,
+    hooks,
+    props.id,
+    nodeId,
+    props.type === 'target',
+    props.isValidConnection ??
+      function () {
+        return true
+      },
+  )
 </script>
 <template>
   <div

src/components/Handle/index.tsx

@@ -1,65 +0,0 @@
-import { ElementId, Position, RevueFlowStore } from '../../types'
-import { onMouseDown, ValidConnectionFunc } from './handler'
-import { defineComponent, inject, PropType } from 'vue'
-import { RevueFlowHooks } from '../../hooks/RevueFlowHooks'
-
-const alwaysValid = () => true
-
-export default defineComponent({
-  props: {
-    type: {
-      type: String,
-      required: false,
-      default: 'source'
-    },
-    position: {
-      type: String as PropType<Position>,
-      required: false,
-      default: Position.Top
-    },
-    isValidConnection: {
-      type: Function as PropType<ValidConnectionFunc>,
-      required: false,
-      default: alwaysValid
-    },
-    isConnectable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    id: {
-      type: String,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props, { slots }) {
-    const store = inject<RevueFlowStore>('store')!
-    const hooks = inject<RevueFlowHooks>('hooks')!
-    const nodeId = inject<ElementId>('NodeIdContext')!
-
-    const onMouseDownHandler = (event: MouseEvent) =>
-      onMouseDown(event, store, hooks, props.id as string, nodeId, props.type === 'target', props.isValidConnection)
-
-    return () => (
-      <div
-        data-handleid={props.id}
-        data-nodeid={nodeId}
-        data-handlepos={props.position}
-        class={[
-          'revue-flow__handle',
-          `revue-flow__handle-${props.position}`,
-          'nodrag',
-          {
-            source: props.type !== 'target',
-            target: props.type === 'target',
-            connectable: props.isConnectable
-          }
-        ]}
-        onMousedown={onMouseDownHandler}
-      >
-        {slots.default ? slots.default() : ''}
-      </div>
-    )
-  }
-})

src/components/Handle/utils.ts

@@ -1,5 +1,5 @@
 import { getHostForElement } from '~/utils'
-import { ElementId, ConnectionMode, Connection, HandleType, XYPosition, RevueFlowStore } from '~/types'
+import { ElementId, ConnectionMode, Connection, HandleType, RevueFlowStore } from '~/types'
 import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
 
 export type ValidConnectionFunc = (connection: Connection) => boolean
@@ -82,7 +82,9 @@ export function onMouseDown(
   handleId: ElementId,
   nodeId: ElementId,
   isTarget: boolean,
-  isValidConnection: ValidConnectionFunc = () => true,
+  isValidConnection: ValidConnectionFunc = () => {
+    return true
+  },
   elementEdgeUpdaterType?: HandleType,
 ): void {
   const revueFlowNode = (event.target as Element).closest('.revue-flow')
@@ -105,12 +107,6 @@ export function onMouseDown(
   const containerBounds = revueFlowNode.getBoundingClientRect()
   let recentHoveredHandle: Element
 
-  const connectionPosition = ref<XYPosition>({
-    x: event.clientX - containerBounds.left,
-    y: event.clientY - containerBounds.top,
-  })
-
-  if (!store.connectionPosition) store.connectionPosition = { x: 0, y: 0 }
   store.connectionPosition.x = event.clientX - containerBounds.left
   store.connectionPosition.y = event.clientY - containerBounds.top
 
@@ -122,8 +118,8 @@ export function onMouseDown(
   hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
 
   function onMouseMove(event: MouseEvent) {
-    connectionPosition.value.x = event.clientX - containerBounds.left
-    connectionPosition.value.y = event.clientY - containerBounds.top
+    store.connectionPosition.x = event.clientX - containerBounds.left
+    store.connectionPosition.y = event.clientY - containerBounds.top
 
     const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
       event,
@@ -173,6 +169,7 @@ export function onMouseDown(
 
     resetRecentHandle(recentHoveredHandle)
     store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined })
+    store.connectionPosition = { x: NaN, y: NaN }
 
     doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
     doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)