fix: make dotted line transparent to click events (#190) @majiayu000

Add pointerEvents: 'none' to the dotted line SVG between node and label
so that clicking on the dotted line properly selects the node instead
of being blocked.

Fixes #61
Authored by: majiayu000 <majiayu000@users.noreply.github.com>

packages/fossflow-lib/src/components/Label/Label.tsx

@@ -39,7 +39,8 @@ export const Label = ({
           sx={{
             position: 'absolute',
             top: -labelHeight,
-            left: -CONNECTOR_DOT_SIZE / 2
+            left: -CONNECTOR_DOT_SIZE / 2,
+            pointerEvents: 'none'
           }}
         >
           <line

packages/fossflow-lib/src/components/Label/__tests__/Label.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Label } from '../Label';
+
+describe('Label', () => {
+  describe('dotted line', () => {
+    it('should render dotted line with pointerEvents none to not block clicks', () => {
+      const { container } = render(
+        <Label maxWidth={200} labelHeight={50}>
+          <span>Test Label</span>
+        </Label>
+      );
+
+      // Find the SVG element (the dotted line container)
+      const svg = container.querySelector('svg');
+      expect(svg).toBeTruthy();
+
+      // Check that the SVG has pointerEvents set to none
+      const svgStyles = window.getComputedStyle(svg!);
+      expect(svgStyles.pointerEvents).toBe('none');
+    });
+
+    it('should not render dotted line when labelHeight is 0', () => {
+      const { container } = render(
+        <Label maxWidth={200} labelHeight={0}>
+          <span>Test Label</span>
+        </Label>
+      );
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeNull();
+    });
+
+    it('should not render dotted line when showLine is false', () => {
+      const { container } = render(
+        <Label maxWidth={200} labelHeight={50} showLine={false}>
+          <span>Test Label</span>
+        </Label>
+      );
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeNull();
+    });
+
+    it('should render children correctly', () => {
+      render(
+        <Label maxWidth={200} labelHeight={50}>
+          <span data-testid="label-content">Test Label Content</span>
+        </Label>
+      );
+
+      expect(screen.getByTestId('label-content')).toHaveTextContent(
+        'Test Label Content'
+      );
+    });
+  });
+});