From 6bb9c5360d7831c8f9e2a34b45877e88bd4758fe Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 18 Jan 2024 13:14:44 +0100
Subject: [PATCH 1/6] Cleaned up edge label styles and added default edge label
 background in svelte flow

---
 packages/react/src/styles/base.css   | 18 ------------------
 packages/react/src/styles/style.css  | 14 ++------------
 packages/svelte/src/styles/base.css  |  9 ---------
 packages/svelte/src/styles/style.css | 12 +++---------
 packages/system/src/styles/style.css |  6 ++++++
 5 files changed, 11 insertions(+), 48 deletions(-)

diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css
index 4a7281dc..d6be5b10 100644
--- a/packages/react/src/styles/base.css
+++ b/packages/react/src/styles/base.css
@@ -1,21 +1,3 @@
 /* this will be exported as base.css and can be used for a basic styling */
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/base.css';
-
-.react-flow {
-  --edge-label-background-color-default: #ffffff;
-  --edge-label-color-default: inherit;
-}
-
-.react-flow.dark {
-  --edge-label-background-color-default: #141414;
-  --edge-label-color-default: #f8f8f8;
-}
-
-.react-flow__edge-textbg {
-  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
-}
-
-.react-flow__edge-text {
-  fill: var(--edge-label-color, var(--edge-label-color-default));
-}
diff --git a/packages/react/src/styles/style.css b/packages/react/src/styles/style.css
index 2ff7f6c1..71b4d08c 100644
--- a/packages/react/src/styles/style.css
+++ b/packages/react/src/styles/style.css
@@ -3,20 +3,10 @@
 @import '../../../system/src/styles/style.css';
 @import '../../../system/src/styles/node-resizer.css';
 
-.react-flow {
-  --edge-label-background-color-default: #ffffff;
-  --edge-label-color-default: inherit;
-}
-
-.react-flow.dark {
-  --edge-label-background-color-default: #141414;
-  --edge-label-color-default: #f8f8f8;
-}
-
 .react-flow__edge-textbg {
-  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
+  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }
 
 .react-flow__edge-text {
-  fill: var(--edge-label-color, var(--edge-label-color-default));
+  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
diff --git a/packages/svelte/src/styles/base.css b/packages/svelte/src/styles/base.css
index b9861c98..80bc953d 100644
--- a/packages/svelte/src/styles/base.css
+++ b/packages/svelte/src/styles/base.css
@@ -2,16 +2,7 @@
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/base.css';
 
-.svelte-flow {
-  --edge-label-color-default: inherit;
-}
-
-.svelte-flow.dark {
-  --edge-label-color-default: #f8f8f8;
-}
-
 .svelte-flow__edge-label {
   text-align: center;
   position: absolute;
-  color: var(--edge-label-color, var(--edge-label-color-default));
 }
diff --git a/packages/svelte/src/styles/style.css b/packages/svelte/src/styles/style.css
index 308a6a1e..e607d0f8 100644
--- a/packages/svelte/src/styles/style.css
+++ b/packages/svelte/src/styles/style.css
@@ -3,19 +3,13 @@
 @import '../../../system/src/styles/style.css';
 @import '../../../system/src/styles/node-resizer.css';
 
-.svelte-flow {
-  --edge-label-color-default: inherit;
-}
-
-.svelte-flow.dark {
-  --edge-label-color-default: #f8f8f8;
-}
-
 .svelte-flow__edge-label {
   text-align: center;
   position: absolute;
+  padding: 2px;
   font-size: 10px;
-  color: var(--edge-label-color, var(--edge-label-color-default));
+  color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
+  background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }
 
 .svelte-flow__nodes {
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
index 880ebaf7..cb6f2b7c 100644
--- a/packages/system/src/styles/style.css
+++ b/packages/system/src/styles/style.css
@@ -19,6 +19,9 @@
   --xy-controls-button-color-hover-default: inherit;
   --xy-controls-button-border-color-default: #eee;
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  --xy-edge-label-background-color-default: #ffffff;
+  --xy-edge-label-color-default: inherit;
 }
 
 .xy-flow.dark {
@@ -41,6 +44,9 @@
   --xy-controls-button-color-hover-default: #fff;
   --xy-controls-button-border-color-default: #5b5b5b;
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  --xy-edge-label-background-color-default: #141414;
+  --xy-edge-label-color-default: #f8f8f8;
 }
 
 .xy-flow__edge {

From 88aa0fccf3f5a4ed9bf037c6f0fbf78453f06f13 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 18 Jan 2024 14:26:35 +0100
Subject: [PATCH 2/6] Added handleEdgeSelect hook & click on edge-label now
 selects edge

---
 .../lib/components/BaseEdge/BaseEdge.svelte   | 14 ++----
 .../lib/components/EdgeLabel/EdgeLabel.svelte | 27 +++++++++++
 .../src/lib/components/EdgeLabel/index.ts     |  1 +
 .../components/EdgeWrapper/EdgeWrapper.svelte | 45 ++++++-------------
 .../EdgeRenderer/EdgeRenderer.svelte          |  9 +---
 .../src/lib/hooks/useHandleEdgeSelect.ts      | 39 ++++++++++++++++
 packages/svelte/src/styles/style.css          |  1 +
 7 files changed, 86 insertions(+), 50 deletions(-)
 create mode 100644 packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
 create mode 100644 packages/svelte/src/lib/components/EdgeLabel/index.ts
 create mode 100644 packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts

diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
index d1c60f8f..b0591ce2 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import cc from 'classcat';
-  import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import type { BaseEdgeProps } from './types';
+  import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
 
   type $$Props = BaseEdgeProps;
 
@@ -43,13 +43,7 @@
 {/if}
 
 {#if label}
-  <EdgeLabelRenderer>
-    <div
-      class="svelte-flow__edge-label"
-      style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
-      style={labelStyle}
-    >
-      {label}
-    </div>
-  </EdgeLabelRenderer>
+  <EdgeLabel {labelX} {labelY} {labelStyle}>
+    {label}
+  </EdgeLabel>
 {/if}
diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
new file mode 100644
index 00000000..98467787
--- /dev/null
+++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
+  import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';
+  import { getContext } from 'svelte';
+  import type { BaseEdgeProps } from '../BaseEdge/types';
+
+  export let labelStyle: BaseEdgeProps['labelStyle'] = undefined;
+  export let labelX: BaseEdgeProps['labelX'] = undefined;
+  export let labelY: BaseEdgeProps['labelY'] = undefined;
+
+  const handleEdgeSelect = useHandleEdgeSelect();
+
+  const id = getContext<string>('svelteflow__edge_id');
+</script>
+
+<EdgeLabelRenderer>
+  <div
+    class="svelte-flow__edge-label"
+    style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+    style={'pointer-events: all;' + labelStyle}
+    on:click={() => {
+      if (id) handleEdgeSelect(id);
+    }}
+  >
+    <slot />
+  </div>
+</EdgeLabelRenderer>
diff --git a/packages/svelte/src/lib/components/EdgeLabel/index.ts b/packages/svelte/src/lib/components/EdgeLabel/index.ts
new file mode 100644
index 00000000..2e0a457c
--- /dev/null
+++ b/packages/svelte/src/lib/components/EdgeLabel/index.ts
@@ -0,0 +1 @@
+export { default as EdgeLabel } from './EdgeLabel.svelte';
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index c68ea1d5..8809eec7 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -2,13 +2,13 @@
 
 <script lang="ts">
   import cc from 'classcat';
-  import { createEventDispatcher } from 'svelte';
-  import { errorMessages, getMarkerId } from '@xyflow/system';
+  import { createEventDispatcher, setContext } from 'svelte';
+  import { getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { BezierEdgeInternal } from '$lib/components/edges';
   import type { EdgeLayouted, Edge } from '$lib/types';
-  import { get } from 'svelte/store';
+  import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';
 
   type $$Props = EdgeLayouted;
 
@@ -22,7 +22,6 @@
 
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
-  export let selectable: $$Props['selectable'] = true;
   export let hidden: $$Props['hidden'] = false;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
@@ -43,16 +42,9 @@
   let className: string = '';
   export { className as class };
 
-  const {
-    edges,
-    edgeTypes,
-    flowId,
-    selectionRect,
-    selectionRectMode,
-    multiselectionKeyPressed,
-    addSelectedEdges,
-    unselectNodesAndEdges
-  } = useStore();
+  setContext('svelteflow__edge_id', id);
+
+  const { edgeLookup, edgeTypes, flowId } = useStore();
   const dispatch = createEventDispatcher<{
     edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
     edgecontextmenu: { edge: Edge; event: MouseEvent };
@@ -62,30 +54,19 @@
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
 
+  const handleEdgeSelect = useHandleEdgeSelect();
+
   function onClick(event: MouseEvent | TouchEvent) {
-    const edge = $edges.find((e) => e.id === id);
+    const edge = $edgeLookup.get(id);
 
-    if (!edge) {
-      console.warn('012', errorMessages['error012'](id));
-      return;
+    if (edge) {
+      handleEdgeSelect(id);
+      dispatch('edgeclick', { event, edge });
     }
-
-    if (selectable) {
-      selectionRect.set(null);
-      selectionRectMode.set(null);
-
-      if (!edge.selected) {
-        addSelectedEdges([id]);
-      } else if (edge.selected && get(multiselectionKeyPressed)) {
-        unselectNodesAndEdges({ nodes: [], edges: [edge] });
-      }
-    }
-
-    dispatch('edgeclick', { event, edge });
   }
 
   function onContextMenu(event: MouseEvent) {
-    const edge = $edges.find((e) => e.id === id);
+    const edge = $edgeLookup.get(id);
 
     if (edge) {
       dispatch('edgecontextmenu', { event, edge });
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 663b72ea..d7a1a23b 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -24,12 +24,6 @@
   </svg>
 
   {#each $visibleEdges as edge (edge.id)}
-    {@const edgeType = edge.type || 'default'}
-    {@const selectable = !!(
-      edge.selectable ||
-      ($elementsSelectable && typeof edge.selectable === 'undefined')
-    )}
-
     <EdgeWrapper
       id={edge.id}
       source={edge.source}
@@ -54,9 +48,8 @@
       ariaLabel={edge.ariaLabel}
       interactionWidth={edge.interactionWidth}
       class={edge.class}
-      type={edgeType}
+      type={edge.type || 'default'}
       zIndex={edge.zIndex}
-      {selectable}
       on:edgeclick
       on:edgecontextmenu
     />
diff --git a/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts b/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
new file mode 100644
index 00000000..3a10948e
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
@@ -0,0 +1,39 @@
+import { get } from 'svelte/store';
+
+import { useStore } from '$lib/store';
+import { errorMessages } from '@xyflow/system';
+
+export function useHandleEdgeSelect() {
+  const {
+    edgeLookup,
+    selectionRect,
+    selectionRectMode,
+    multiselectionKeyPressed,
+    addSelectedEdges,
+    unselectNodesAndEdges,
+    elementsSelectable
+  } = useStore();
+
+  return (id: string) => {
+    const edge = get(edgeLookup).get(id);
+
+    if (!edge) {
+      console.warn('012', errorMessages['error012'](id));
+      return;
+    }
+
+    const selectable =
+      edge.selectable || (get(elementsSelectable) && typeof edge.selectable === 'undefined');
+
+    if (selectable) {
+      selectionRect.set(null);
+      selectionRectMode.set(null);
+
+      if (!edge.selected) {
+        addSelectedEdges([id]);
+      } else if (edge.selected && get(multiselectionKeyPressed)) {
+        unselectNodesAndEdges({ nodes: [], edges: [edge] });
+      }
+    }
+  };
+}
diff --git a/packages/svelte/src/styles/style.css b/packages/svelte/src/styles/style.css
index e607d0f8..981bc92e 100644
--- a/packages/svelte/src/styles/style.css
+++ b/packages/svelte/src/styles/style.css
@@ -8,6 +8,7 @@
   position: absolute;
   padding: 2px;
   font-size: 10px;
+  cursor: pointer;
   color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
   background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
 }

From b6b3822787720820599800e7190f7f401e343c68 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 18 Jan 2024 15:23:31 +0100
Subject: [PATCH 3/6] changed prop names edgeLabel

---
 .../svelte/src/lib/components/BaseEdge/BaseEdge.svelte |  3 +--
 .../src/lib/components/EdgeLabel/EdgeLabel.svelte      | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
index b0591ce2..36b3763e 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -18,7 +18,6 @@
   let className: $$Props['class'] = undefined;
   export { className as class };
 
-  // @todo, why is interactionWidth undefined after first re-render?
   let interactionWidthValue = interactionWidth === undefined ? 20 : interactionWidth;
 </script>
 
@@ -43,7 +42,7 @@
 {/if}
 
 {#if label}
-  <EdgeLabel {labelX} {labelY} {labelStyle}>
+  <EdgeLabel x={labelX} y={labelY} style={labelStyle}>
     {label}
   </EdgeLabel>
 {/if}
diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
index 98467787..eb0c794f 100644
--- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
+++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
@@ -4,9 +4,9 @@
   import { getContext } from 'svelte';
   import type { BaseEdgeProps } from '../BaseEdge/types';
 
-  export let labelStyle: BaseEdgeProps['labelStyle'] = undefined;
-  export let labelX: BaseEdgeProps['labelX'] = undefined;
-  export let labelY: BaseEdgeProps['labelY'] = undefined;
+  export let style: BaseEdgeProps['labelStyle'] = undefined;
+  export let x: BaseEdgeProps['labelX'] = undefined;
+  export let y: BaseEdgeProps['labelY'] = undefined;
 
   const handleEdgeSelect = useHandleEdgeSelect();
 
@@ -16,8 +16,8 @@
 <EdgeLabelRenderer>
   <div
     class="svelte-flow__edge-label"
-    style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
-    style={'pointer-events: all;' + labelStyle}
+    style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
+    style={'pointer-events: all;' + style}
     on:click={() => {
       if (id) handleEdgeSelect(id);
     }}

From e0d7dbe8a104d6cb29933a8c32784238b1f48e87 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 18 Jan 2024 15:50:21 +0100
Subject: [PATCH 4/6] fixed focused, selectable css

---
 packages/react/src/components/EdgeWrapper/index.tsx | 1 +
 packages/system/src/styles/init.css                 | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx
index cb9b9c8b..28323a19 100644
--- a/packages/react/src/components/EdgeWrapper/index.tsx
+++ b/packages/react/src/components/EdgeWrapper/index.tsx
@@ -186,6 +186,7 @@ export function EdgeWrapper({
             animated: edge.animated,
             inactive: !isSelectable && !onClick,
             updating: updateHover,
+            selectable: isSelectable,
           },
         ])}
         onClick={onEdgeClick}
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index a688f6b9..14519c74 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -139,8 +139,8 @@
   }
 
   &.selected .xy-flow__edge-path,
-  &:focus .xy-flow__edge-path,
-  &:focus-visible .xy-flow__edge-path {
+  &.selectable:focus .xy-flow__edge-path,
+  &.selectable:focus-visible .xy-flow__edge-path {
     stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
   }
 

From 1f454b42f6c51b4d19ee0a98b2cd8e39f891b6fe Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 22 Jan 2024 17:19:39 +0100
Subject: [PATCH 5/6] chore(svelte): cleanup imports

---
 .../svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte     | 5 +++--
 .../svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte | 2 +-
 packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts         | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
index eb0c794f..81039d0d 100644
--- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
+++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { getContext } from 'svelte';
+
   import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';
-  import { getContext } from 'svelte';
-  import type { BaseEdgeProps } from '../BaseEdge/types';
+  import type { BaseEdgeProps } from '$lib/components/BaseEdge/types';
 
   export let style: BaseEdgeProps['labelStyle'] = undefined;
   export let x: BaseEdgeProps['labelX'] = undefined;
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 8809eec7..0d4c126b 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -1,8 +1,8 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import cc from 'classcat';
   import { createEventDispatcher, setContext } from 'svelte';
+  import cc from 'classcat';
   import { getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
diff --git a/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts b/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
index 3a10948e..5e6ba5d3 100644
--- a/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
+++ b/packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts
@@ -1,7 +1,7 @@
 import { get } from 'svelte/store';
+import { errorMessages } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
-import { errorMessages } from '@xyflow/system';
 
 export function useHandleEdgeSelect() {
   const {

From 736327687f6e09d57a2d6fe11f1ade3bd0618637 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 22 Jan 2024 17:20:36 +0100
Subject: [PATCH 6/6] chore(svelte): update changelog

---
 packages/svelte/CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b7557fff..163f9663 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xyflow/svelte
 
+## 0.0.35
+
+## Minor changes
+
+- Edge label has a default background and is clickable
+
 ## 0.0.34
 
 ## Minor changes