search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
fix: more conspicuous search target and tighter zoom
- Crosshair replaced with amber reticle (outer ring, gapped crosshair
lines, center dot) — much more visible against both themes
- Search zoom now targets 4-15x (was 2-8x), fitting results in 30%
of viewport instead of 40%
- Label uses drawLabel with outline for readability
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+25
-17
+25
-17
site/atlas.js
+25
-17
site/atlas.js
···
355
355
// draw search centroid marker
356
356
if (searchCenter) {
357
357
var mx = cx + searchCenter.x * scale, my = cy + searchCenter.y * scale;
358
-
// crosshair
359
-
ctx.strokeStyle = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.4)';
360
-
ctx.lineWidth = 1;
358
+
var accent = dark ? 'rgba(250,200,80,' : 'rgba(200,120,0,';
359
+
// outer ring — pulsing glow
361
360
ctx.beginPath();
362
-
ctx.moveTo(mx - 12, my); ctx.lineTo(mx + 12, my);
363
-
ctx.moveTo(mx, my - 12); ctx.lineTo(mx, my + 12);
361
+
ctx.arc(mx, my, 18, 0, Math.PI * 2);
362
+
ctx.strokeStyle = accent + '0.25)';
363
+
ctx.lineWidth = 3;
364
364
ctx.stroke();
365
-
// ring
365
+
// crosshair lines
366
+
ctx.strokeStyle = accent + '0.8)';
367
+
ctx.lineWidth = 1.5;
366
368
ctx.beginPath();
367
-
ctx.arc(mx, my, 6, 0, Math.PI * 2);
368
-
ctx.strokeStyle = dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.5)';
369
-
ctx.lineWidth = 1.5;
369
+
ctx.moveTo(mx - 20, my); ctx.lineTo(mx - 8, my);
370
+
ctx.moveTo(mx + 8, my); ctx.lineTo(mx + 20, my);
371
+
ctx.moveTo(mx, my - 20); ctx.lineTo(mx, my - 8);
372
+
ctx.moveTo(mx, my + 8); ctx.lineTo(mx, my + 20);
370
373
ctx.stroke();
371
-
// label
372
-
ctx.font = '10px monospace';
373
-
ctx.fillStyle = dark ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.5)';
374
+
// center dot
375
+
ctx.beginPath();
376
+
ctx.arc(mx, my, 3, 0, Math.PI * 2);
377
+
ctx.fillStyle = accent + '0.9)';
378
+
ctx.fill();
379
+
// label with outline
380
+
ctx.font = '12px monospace';
374
381
ctx.textAlign = 'left';
375
-
ctx.textBaseline = 'top';
376
-
ctx.fillText('"' + searchQuery + '"', mx + 12, my - 6);
382
+
ctx.textBaseline = 'middle';
383
+
ctx.fillStyle = accent + '0.9)';
384
+
drawLabel('"' + searchQuery + '"', mx + 24, my, dark);
377
385
}
378
386
}
379
387
···
850
858
851
859
// zoom to fit the spread with some padding
852
860
// at zoom=1, visible radius in data coords is ~1.0 (since range is [-1,1])
853
-
// we want maxDist to fit in ~40% of the viewport
854
-
var targetZoom = maxDist > 0 ? Math.min(view.maxZoom, 0.4 / maxDist) : 4;
855
-
targetZoom = Math.max(2, Math.min(8, targetZoom)); // clamp to reasonable range
861
+
// we want maxDist to fit in ~30% of the viewport
862
+
var targetZoom = maxDist > 0 ? Math.min(view.maxZoom, 0.3 / maxDist) : 6;
863
+
targetZoom = Math.max(4, Math.min(15, targetZoom));
856
864
857
865
animateTo(searchCenter.x, searchCenter.y, targetZoom);
858
866
})