refactor(utils): add getElementsToRemove and use in react and svelte packages

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -28,11 +28,12 @@
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
   export let deleteKey: $$Props['deleteKey'] = undefined;
+  export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
+  export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined
+  export let style: $$Props['style'] = undefined;
   let className: $$Props['class'] = undefined;
   export { className as class };
-  const dispatch = createEventDispatcher<{ 'on:nodeclick': number }>();
-
 
   let domNode: HTMLDivElement;
 
@@ -41,7 +42,6 @@
     nodeTypes
   });
 
-
   setContext(key, {
     getStore: () => store
   });
@@ -66,19 +66,15 @@
     const updatableProps = {
       id,
       connectionLineType,
+      connectionRadius,
+      defaultEdgeOptions
     };
 
     Object.keys(updatableProps).forEach(prop => {
       // @ts-ignore
       if (updatableProps[prop] !== undefined) {
-        // @ts-ignore
-        if (!store[prop]) {
-          // @ts-ignore
-          console.warn(store[prop], prop, 'ups')
-        } else {
         // @ts-ignore
         store[prop].set(updatableProps[prop]);
-        }
       }
     })
   }
@@ -111,9 +107,10 @@
 </script>
 
 <div
+  bind:this={domNode}
+  style={style}
   class={cc(['svelte-flow', className])}
   data-testid="rf__wrapper"
-  bind:this={domNode}
 >
   <KeyHandler {selectionKey} {deleteKey} />
   <Zoom {initialViewport}>

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -1,4 +1,10 @@
-import type { ConnectionLineType, NodeOrigin, Viewport } from '@reactflow/system';
+import type {
+  Connection,
+  ConnectionLineType,
+  NodeOrigin,
+  OnConnectStartParams,
+  Viewport
+} from '@reactflow/system';
 
 import type {
   Edge,
@@ -24,6 +30,7 @@ export type SvelteFlowProps = {
   maxZoom?: number;
   initialViewport?: Viewport;
   defaultEdgeOptions?: DefaultEdgeOptions;
+  connectionRadius?: number;
 
   class?: string;
   style?: string;
@@ -37,9 +44,9 @@ export type SvelteFlowEvents = {
   'node:mousemove': CustomEvent<Node>;
   'node:mouseleave': CustomEvent<Node>;
   'edge:click': CustomEvent<Edge>;
-  'connect:start': CustomEvent<number>;
-  connect: CustomEvent<number>;
-  'connect:end': CustomEvent<number>;
+  'connect:start': CustomEvent<OnConnectStartParams>;
+  connect: CustomEvent<Connection>;
+  'connect:end': CustomEvent<OnConnectStartParams>;
   'pane:click': CustomEvent;
   'pane:contextmenu': CustomEvent;
 };