feat: add cursor circle visual feedback during line drawing (Phase 2)
This commit is contained in:
parent
7f144e4ab8
commit
30b13d6898
2 changed files with 18 additions and 1 deletions
|
|
@ -78,7 +78,7 @@ stroke={annotation.color || '#3b82f6'}
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Phase 2: Visual Feedback
|
### Phase 2: Visual Feedback ✅ DONE
|
||||||
|
|
||||||
#### 2.1 Cursor Circle During Drawing
|
#### 2.1 Cursor Circle During Drawing
|
||||||
**File**: `src/components/SvgOverlay.tsx`
|
**File**: `src/components/SvgOverlay.tsx`
|
||||||
|
|
|
||||||
|
|
@ -334,6 +334,22 @@ export default function SvgOverlay({
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Render cursor circle during line drawing
|
||||||
|
const renderCursorCircle = () => {
|
||||||
|
if (!drawingLine || !mousePosition) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<circle
|
||||||
|
cx={mousePosition.x}
|
||||||
|
cy={mousePosition.y}
|
||||||
|
r={5}
|
||||||
|
fill="transparent"
|
||||||
|
stroke={selectedColor}
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
if (!chart || !series) return null;
|
if (!chart || !series) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -354,6 +370,7 @@ export default function SvgOverlay({
|
||||||
>
|
>
|
||||||
{renderLines()}
|
{renderLines()}
|
||||||
{renderPreviewLine()}
|
{renderPreviewLine()}
|
||||||
|
{renderCursorCircle()}
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue