From edb04320caee8dcea60cfd2f9de5938078f604fd Mon Sep 17 00:00:00 2001
From: Ahmad Kadri <ahmad.kadri@nordeck.net>
Date: Mon, 6 Jan 2025 08:38:21 +0100
Subject: [PATCH 1/5] add transparen line to extend the padding of the arrwo
 and line element

Signed-off-by: Ahmad Kadri <ahmad.kadri@nordeck.net>
---
 .../react-sdk/src/components/elements/line/Display.tsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/react-sdk/src/components/elements/line/Display.tsx b/packages/react-sdk/src/components/elements/line/Display.tsx
index 50520f1e..cf86a6ed 100644
--- a/packages/react-sdk/src/components/elements/line/Display.tsx
+++ b/packages/react-sdk/src/components/elements/line/Display.tsx
@@ -46,6 +46,15 @@ const LineDisplay = ({
   const renderedChild = (
     <g data-testid={`element-${elementId}`}>
       {endMarker}
+      <line
+        fill="none"
+        stroke="transparent"
+        strokeWidth={strokeWidth + 10}
+        x1={start.x}
+        x2={end.x}
+        y1={start.y}
+        y2={end.y}
+      />
       <line
         fill="none"
         stroke={strokeColor}

From 5e481bbee7ad7fbe0003360f55fb40ebb25e1eee Mon Sep 17 00:00:00 2001
From: Ahmad Kadri <ahmad.kadri@nordeck.net>
Date: Mon, 6 Jan 2025 08:46:37 +0100
Subject: [PATCH 2/5] add changeset

Signed-off-by: Ahmad Kadri <ahmad.kadri@nordeck.net>
---
 .changeset/quiet-starfishes-cough.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/quiet-starfishes-cough.md

diff --git a/.changeset/quiet-starfishes-cough.md b/.changeset/quiet-starfishes-cough.md
new file mode 100644
index 00000000..05e83609
--- /dev/null
+++ b/.changeset/quiet-starfishes-cough.md
@@ -0,0 +1,6 @@
+---
+'@nordeck/matrix-neoboard-react-sdk': patch
+'@nordeck/matrix-neoboard-widget': patch
+---
+
+Enhance the interactivity of arrows and lines by increasing the clickable area around them

From 0048e2fae20c585513fcc8516d952cc39f8f135b Mon Sep 17 00:00:00 2001
From: Ahmad Kadri <ahmad.kadri@nordeck.net>
Date: Mon, 6 Jan 2025 09:13:56 +0100
Subject: [PATCH 3/5] fix the tests

Signed-off-by: Ahmad Kadri <ahmad.kadri@nordeck.net>
---
 .../components/elements/line/Display.test.tsx  | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/react-sdk/src/components/elements/line/Display.test.tsx b/packages/react-sdk/src/components/elements/line/Display.test.tsx
index f35a9e9c..56de8e4c 100644
--- a/packages/react-sdk/src/components/elements/line/Display.test.tsx
+++ b/packages/react-sdk/src/components/elements/line/Display.test.tsx
@@ -95,6 +95,15 @@ describe('<Display />', () => {
       <g
         data-testid="element-element-0"
       >
+        <line
+          fill="none"
+          stroke="transparent"
+          stroke-width="14"
+          x1="0"
+          x2="2"
+          y1="2"
+          y2="4"
+        />
         <line
           fill="none"
           stroke="#ffffff"
@@ -144,6 +153,15 @@ describe('<Display />', () => {
             stroke="#ffffff"
           />
         </marker>
+        <line
+          fill="none"
+          stroke="transparent"
+          stroke-width="14"
+          x1="0"
+          x2="2"
+          y1="2"
+          y2="4"
+        />
         <line
           fill="none"
           marker-end="url(#end-marker-id-1)"

From c5b8c867878609c28af5225bddc5efbc63485466 Mon Sep 17 00:00:00 2001
From: Ahmad Kadri <ahmad.kadri@nordeck.net>
Date: Mon, 6 Jan 2025 10:19:15 +0100
Subject: [PATCH 4/5] calculate the strokWidth depanding on the scale

Signed-off-by: Ahmad Kadri <ahmad.kadri@nordeck.net>
---
 .../react-sdk/src/components/elements/line/Display.tsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-sdk/src/components/elements/line/Display.tsx b/packages/react-sdk/src/components/elements/line/Display.tsx
index cf86a6ed..e54f0cb1 100644
--- a/packages/react-sdk/src/components/elements/line/Display.tsx
+++ b/packages/react-sdk/src/components/elements/line/Display.tsx
@@ -22,6 +22,7 @@ import {
   SelectableElement,
   WithExtendedSelectionProps,
 } from '../../Whiteboard';
+import { useSvgCanvasContext } from '../../Whiteboard/SvgCanvas';
 import { getRenderProperties } from './getRenderProperties';
 import { useEndMarker } from './useEndMarker';
 
@@ -40,6 +41,10 @@ const LineDisplay = ({
     strokeWidth,
     points: { start, end },
   } = getRenderProperties(element);
+  const { scale } = useSvgCanvasContext();
+  // Fallback to scale = 1 if scale is 0
+  const adjustedScale = scale === 0 ? 1 : scale;
+  const adjustedStrokeWidth = (strokeWidth + 10) * adjustedScale;
 
   const { endMarkerId, endMarker } = useEndMarker(element);
 
@@ -49,7 +54,7 @@ const LineDisplay = ({
       <line
         fill="none"
         stroke="transparent"
-        strokeWidth={strokeWidth + 10}
+        strokeWidth={adjustedStrokeWidth}
         x1={start.x}
         x2={end.x}
         y1={start.y}

From 13d68e9cf5a4200d1987cca554a4dced117314bf Mon Sep 17 00:00:00 2001
From: Ahmad Kadri <ahmad.kadri@nordeck.net>
Date: Mon, 6 Jan 2025 11:17:26 +0100
Subject: [PATCH 5/5] improve the calculate of the width

Signed-off-by: Ahmad Kadri <ahmad.kadri@nordeck.net>
---
 packages/react-sdk/src/components/elements/line/Display.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-sdk/src/components/elements/line/Display.tsx b/packages/react-sdk/src/components/elements/line/Display.tsx
index e54f0cb1..c076b01a 100644
--- a/packages/react-sdk/src/components/elements/line/Display.tsx
+++ b/packages/react-sdk/src/components/elements/line/Display.tsx
@@ -44,7 +44,7 @@ const LineDisplay = ({
   const { scale } = useSvgCanvasContext();
   // Fallback to scale = 1 if scale is 0
   const adjustedScale = scale === 0 ? 1 : scale;
-  const adjustedStrokeWidth = (strokeWidth + 10) * adjustedScale;
+  const adjustedStrokeWidth = strokeWidth + 10 / adjustedScale;
 
   const { endMarkerId, endMarker } = useEndMarker(element);