feat(svelte): add event handlers and props, rename class names

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import cc from 'classcat';
   import { Position, type Connection, type HandleProps } from '@reactflow/system';
   import { isMouseEvent } from '@reactflow/utils';
@@ -18,6 +19,8 @@
   const isTarget = type === 'target';
   const nodeId = getContext<string>('rf_nodeid');
   const handleId = id || null;
+  const dispatch = createEventDispatcher();
+
 
   const {
     connectionMode,
@@ -31,11 +34,16 @@
     updateConnection
   } = useStore();
 
+  function dispatchEvent(eventName: string) {
+    dispatch(eventName, { nodeId, handleId, type });
+  }
+
   function onConnectExtended(params: Connection) {
     addEdge(params);
     // @todo add props
     // onConnectAction?.(edgeParams);
     // onConnect?.(edgeParams);
+    dispatchEvent('connect')
   }
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -56,7 +64,9 @@
         onConnect: onConnectExtended,
         updateConnection,
         cancelConnection,
-        panBy
+        panBy,
+        onConnectStart: () => dispatchEvent('connect:start'),
+        onConnectEnd: () => dispatchEvent('connect:end')
       });
     }
 
@@ -74,8 +84,8 @@
   data-handlepos={position}
   data-id={`${nodeId}-${id}-${type}`}
   class={cc([
-    'react-flow__handle',
-    `react-flow__handle-${position}`,
+    'svelte-flow__handle',
+    `svelte-flow__handle-${position}`,
     'nodrag',
     'nopan',
     position
@@ -90,7 +100,7 @@
 </div>
 
 <style>
-  .react-flow__handle {
+  .svelte-flow__handle {
     position: absolute;
     pointer-events: none;
     min-width: 5px;

packages/svelte/src/lib/components/Handle/handler.ts

@@ -43,7 +43,9 @@ export function handlePointerDown({
   cancelConnection,
   isValidConnection,
   edgeUpdaterType,
-  onEdgeUpdateEnd
+  onEdgeUpdateEnd,
+  onConnectStart,
+  onConnectEnd
 }: {
   event: MouseEvent | TouchEvent;
   handleId: string | null;
@@ -61,8 +63,10 @@ export function handlePointerDown({
   panBy: (delta: XYPosition) => void;
   edgeUpdaterType?: HandleType;
   onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
+  onConnectStart: () => void;
+  onConnectEnd: () => void;
 }): void {
-  // when react-flow is used inside a shadow root we can't use document
+  // when svelte-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
   let autoPanId = 0;
   let prevClosestHandle: ConnectionHandle | null;
@@ -113,7 +117,9 @@ export function handlePointerDown({
   });
 
   // @todo add prop
+
   // onConnectStart?.(event, { nodeId, handleId, handleType });
+  onConnectStart();
 
   function onPointerMove(event: MouseEvent | TouchEvent) {
     const transform = get(transformStore);
@@ -166,7 +172,7 @@ export function handlePointerDown({
     if (connection.source !== connection.target && handleDomNode) {
       resetRecentHandle(prevActiveHandle);
       prevActiveHandle = handleDomNode;
-      // @todo: remove the old class names "react-flow__handle-" in the next major version
+      // @todo: remove the old class names "svelte-flow__handle-" in the next major version
       handleDomNode.classList.add('connecting');
       handleDomNode.classList.toggle('valid', isValid);
     }
@@ -179,8 +185,8 @@ export function handlePointerDown({
 
     // it's important to get a fresh reference from the store here
     // in order to get the latest state of onConnectEnd
-    // @todo add onConnectEnd prop
-    // getState().onConnectEnd?.(event);
+
+    onConnectEnd();
 
     if (edgeUpdaterType) {
       onEdgeUpdateEnd?.(event);

packages/svelte/src/lib/components/Handle/utils.ts

@@ -81,11 +81,11 @@ export function isValidHandle(
 ) {
   const isTarget = fromType === 'target';
   const handleDomNode = doc.querySelector(
-    `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
+    `.svelte-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
   );
   const { x, y } = getEventPosition(event);
   const handleBelow = doc.elementFromPoint(x, y);
-  const handleToCheck = handleBelow?.classList.contains('react-flow__handle')
+  const handleToCheck = handleBelow?.classList.contains('svelte-flow__handle')
     ? handleBelow
     : handleDomNode;