matei/tono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add A/B marker names

Browse Source
This commit is contained in:
matei jordache
2026-03-27 20:09:26 -07:00
parent 31214bf26c
commit bc0c25085d
2 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/LinePlotOverlay.jsx
View File

@@ -173,6 +173,7 @@ export default function LinePlotOverlay({
const cursorStroke = clamp(plotWidth / 220, 1.4, 2.2); const cursorStroke = clamp(plotWidth / 220, 1.4, 2.2);
const measureStroke = clamp(plotWidth / 180, 1.6, 2.8); const measureStroke = clamp(plotWidth / 180, 1.6, 2.8);
const markerRadius = clamp(plotWidth / 42, 5.5, 9); const markerRadius = clamp(plotWidth / 42, 5.5, 9);
const markerLabelSize = clamp(plotWidth / 34, 8, 11);
const updateCursor = useCallback((point, event) => { const updateCursor = useCallback((point, event) => {
if (!interactive || !onWidgetChange || !nodeId) return; if (!interactive || !onWidgetChange || !nodeId) return;
@@ -250,20 +251,44 @@ export default function LinePlotOverlay({
<line x1={cursorA.x} y1={plotTop} x2={cursorA.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" /> <line x1={cursorA.x} y1={plotTop} x2={cursorA.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" />
<line x1={cursorB.x} y1={plotTop} x2={cursorB.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" /> <line x1={cursorB.x} y1={plotTop} x2={cursorB.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" />
<circle <g onPointerDown={onPointerDown('p1')}>
cx={cursorA.x} <circle
cy={cursorA.y} cx={cursorA.x}
r={markerRadius} cy={cursorA.y}
className={`lineplot-marker ${aLocked ? 'lineplot-marker-locked' : ''}`} r={markerRadius}
onPointerDown={onPointerDown('p1')} className={`lineplot-marker ${aLocked ? 'lineplot-marker-locked' : ''}`}
/> />
<circle <text
cx={cursorB.x} x={cursorA.x}
cy={cursorB.y} y={cursorA.y}
r={markerRadius} textAnchor="middle"
className={`lineplot-marker ${bLocked ? 'lineplot-marker-locked' : ''}`} dominantBaseline="middle"
onPointerDown={onPointerDown('p2')} fontSize={markerLabelSize}
/> className="lineplot-marker-label"
pointerEvents="none"
>
A
</text>
</g>
<g onPointerDown={onPointerDown('p2')}>
<circle
cx={cursorB.x}
cy={cursorB.y}
r={markerRadius}
className={`lineplot-marker ${bLocked ? 'lineplot-marker-locked' : ''}`}
/>
<text
x={cursorB.x}
y={cursorB.y}
textAnchor="middle"
dominantBaseline="middle"
fontSize={markerLabelSize}
className="lineplot-marker-label"
pointerEvents="none"
>
B
</text>
</g>
</> </>
)} )}
</svg> </svg>

6
frontend/src/styles.css
View File

@@ -967,6 +967,12 @@ html, body, #root {
cursor: default; cursor: default;
} }
.lineplot-marker-label {
fill: var(--bg-deep);
font-weight: 700;
user-select: none;
}
.crop-overlay { .crop-overlay {
position: relative; position: relative;
user-select: none; user-select: none;