refactor(svelte): cleanup nodes selection

packages/svelte/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.0.23
+
+- updates `useSvelteFlow` hook:
+  - add `screenToFlowCoordinate` and `flowToScreenCoordinate`
+  - add `getConnectedEdges`, `getIncomers` and `getOutgoers`
+  - add `deleteElements`
+  - add `fitBounds`
+  - add `getIntersectingNodes` and `isNodeIntersecting`
+- add `useConnection` hook
+- add `useNodes` hook
+- add `useEdges` hook
+- add `viewport` prop (writable viewport)
+- fix selection style
+- fix Background component with lines variant
+
 ## 0.0.22
 
 - add `connectionLine` slot for rendering a custom connection line 

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -17,14 +17,9 @@
     class="selection-wrapper nopan"
     style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
     use:drag={{ disabled: false, store }}
-  />
+  >
-  <Selection
+    <Selection width="100%" height="100%" x={0} y={0} />
-    isVisible={$selectionRectMode === 'nodes'}
+  </div>
-    width={rect.width}
-    height={rect.height}
-    x={rect.x}
-    y={rect.y}
-  />
 {/if}
 
 <style>

packages/svelte/src/lib/components/Selection/Selection.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   export let x: number | null = 0;
   export let y: number | null = 0;
-  export let width: number | null = 0;
+  export let width: number | string | null = 0;
-  export let height: number | null = 0;
+  export let height: number | string | null = 0;
   export let isVisible: boolean = true;
 </script>
 
 {#if isVisible}
   <div
     class="svelte-flow__selection"
-    style="width: {width}px; height: {height}px; transform: translate({x}px, {y}px)"
+    style:width={typeof width === 'string' ? width : `${width}px`}
+    style:height={typeof height === 'string' ? height : `${height}px`}
+    style:transform={`translate(${x}px, ${y}px)`}
   />
 {/if}
 

packages/svelte/src/styles/style.css

@@ -7,3 +7,11 @@
   position: absolute;
   font-size: 10px;
 }
+
+.svelte-flow__nodes {
+  z-index: 0;
+}
+
+.svelte-flow__edgelabel-renderer {
+  z-index: 0;
+}

packages/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",