natus wheel: ASC/MC angles — tooltips, aspect lines, section headers, tooltip polish
- ASC/MC clickable w. DON/DOFF aspect lines (fixed: open w.o. lines; DON/DOFF both work; angles ring handled in _toggleAspects; lines origin at R.planetR) - btn-disabled click-through fix: pointer-events:auto on DON/DOFF; bounding-rect workaround removed - planet tooltip: applying ⇥ left, separating ↦ right; sign shown for angle partners - sign tooltip: Planets + Cusps section headers; ordinal house + domain; em-dash fallback - house tooltip: Planets header; Angular/Succedent/Cadent + phase labels; em-dash fallback - element tooltips: Planets header for Fire/Stone/Air/Water; Stellium/Parade as section-header labels; compact single-stellium Tempo; Parade sign : planets format - tt-ord: no negative margin in .tt-angle-house context Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -300,11 +300,24 @@ def _sky_natus_preview(request):
|
||||
|
||||
@login_required(login_url="/")
|
||||
def sky_view(request):
|
||||
chart_data = request.user.sky_chart_data
|
||||
birth_dt = request.user.sky_birth_dt
|
||||
saved_birth_date = ''
|
||||
saved_birth_time = ''
|
||||
if birth_dt:
|
||||
if request.user.sky_birth_tz:
|
||||
try:
|
||||
birth_dt = birth_dt.astimezone(zoneinfo.ZoneInfo(request.user.sky_birth_tz))
|
||||
except (zoneinfo.ZoneInfoNotFoundError, KeyError):
|
||||
pass
|
||||
saved_birth_date = birth_dt.strftime('%Y-%m-%d')
|
||||
saved_birth_time = birth_dt.strftime('%H:%M')
|
||||
return render(request, "apps/dashboard/sky.html", {
|
||||
"preview_url": request.build_absolute_uri("/dashboard/sky/preview"),
|
||||
"save_url": request.build_absolute_uri("/dashboard/sky/save"),
|
||||
"saved_sky": request.user.sky_chart_data,
|
||||
"saved_birth_dt": request.user.sky_birth_dt,
|
||||
"saved_sky_json": json.dumps(chart_data) if chart_data else 'null',
|
||||
"saved_birth_date": saved_birth_date,
|
||||
"saved_birth_time": saved_birth_time,
|
||||
"saved_birth_place": request.user.sky_birth_place,
|
||||
"saved_birth_lat": request.user.sky_birth_lat,
|
||||
"saved_birth_lon": request.user.sky_birth_lon,
|
||||
@@ -329,13 +342,23 @@ def sky_save(request):
|
||||
return HttpResponse(status=400)
|
||||
|
||||
user = request.user
|
||||
birth_tz_str = body.get('birth_tz', '').strip()
|
||||
birth_dt_str = body.get('birth_dt', '')
|
||||
if birth_dt_str:
|
||||
try:
|
||||
naive = datetime.fromisoformat(birth_dt_str.replace('Z', '+00:00'))
|
||||
user.sky_birth_dt = naive if naive.tzinfo else naive.replace(
|
||||
tzinfo=zoneinfo.ZoneInfo('UTC')
|
||||
naive = datetime.fromisoformat(birth_dt_str.replace('Z', '').replace('+00:00', ''))
|
||||
if naive.tzinfo is None and birth_tz_str:
|
||||
try:
|
||||
local_tz = zoneinfo.ZoneInfo(birth_tz_str)
|
||||
user.sky_birth_dt = naive.replace(tzinfo=local_tz).astimezone(
|
||||
zoneinfo.ZoneInfo('UTC')
|
||||
)
|
||||
except (zoneinfo.ZoneInfoNotFoundError, KeyError):
|
||||
user.sky_birth_dt = naive.replace(tzinfo=zoneinfo.ZoneInfo('UTC'))
|
||||
elif naive.tzinfo is None:
|
||||
user.sky_birth_dt = naive.replace(tzinfo=zoneinfo.ZoneInfo('UTC'))
|
||||
else:
|
||||
user.sky_birth_dt = naive.astimezone(zoneinfo.ZoneInfo('UTC'))
|
||||
except ValueError:
|
||||
user.sky_birth_dt = None
|
||||
user.sky_birth_lat = body.get('birth_lat')
|
||||
|
||||
@@ -103,12 +103,44 @@ const NatusWheel = (() => {
|
||||
'Cooperation', 'Regeneration', 'Enterprise', 'Career', 'Reward', 'Reprisal',
|
||||
];
|
||||
|
||||
const ANGLE_DEFS = {
|
||||
ASC: { label: 'Ascendant', sym: 'ASC', house: 1 },
|
||||
MC: { label: 'Midheaven', sym: 'MC', house: 10 },
|
||||
};
|
||||
|
||||
// Major aspect angles and their exact expected separations
|
||||
const MAJOR_ASPECTS = [
|
||||
{ type: 'Conjunction', angle: 0 },
|
||||
{ type: 'Sextile', angle: 60 },
|
||||
{ type: 'Square', angle: 90 },
|
||||
{ type: 'Trine', angle: 120 },
|
||||
{ type: 'Opposition', angle: 180 },
|
||||
];
|
||||
|
||||
const ANGLE_ORB = 10;
|
||||
|
||||
// Cardinal / Fixed / Mutable — parallel index to SIGNS
|
||||
const SIGN_MODALITIES = [
|
||||
'Cardinal', 'Fixed', 'Mutable', 'Cardinal', 'Fixed', 'Mutable',
|
||||
'Cardinal', 'Fixed', 'Mutable', 'Cardinal', 'Fixed', 'Mutable',
|
||||
];
|
||||
|
||||
// Angular / Succedent / Cadent — 1-indexed (index 0 unused)
|
||||
const HOUSE_QUADRANT = [
|
||||
'', 'Angular', 'Succedent', 'Cadent',
|
||||
'Angular', 'Succedent', 'Cadent',
|
||||
'Angular', 'Succedent', 'Cadent',
|
||||
'Angular', 'Succedent', 'Cadent',
|
||||
];
|
||||
|
||||
// Houses 1–3: Juvenescence; 4–6: Adolescence; 7–9: Maturescence; 10–12: Senescence
|
||||
const HOUSE_PHASE = [
|
||||
'', 'Juvenescence', 'Juvenescence', 'Juvenescence',
|
||||
'Adolescence', 'Adolescence', 'Adolescence',
|
||||
'Maturescence', 'Maturescence', 'Maturescence',
|
||||
'Senescence', 'Senescence', 'Senescence',
|
||||
];
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────────────
|
||||
|
||||
let _svg = null;
|
||||
@@ -125,12 +157,13 @@ const NatusWheel = (() => {
|
||||
|
||||
// ── Cycle state ────────────────────────────────────────────────────────────
|
||||
|
||||
let _activeRing = null; // 'planets' | 'elements' | 'signs' | 'houses' | null
|
||||
let _activeRing = null; // 'planets' | 'elements' | 'signs' | 'houses' | 'angles' | null
|
||||
let _activeIdx = null; // index within the active ring's sorted list
|
||||
let _planetItems = []; // [{name, degree}] sorted by ecliptic degree ascending
|
||||
let _elementItems = []; // [{key}] in ELEMENT_ORDER
|
||||
let _signItems = []; // [{name, symbol, element}] in SIGNS order
|
||||
let _houseItems = []; // [{num, label}] houses 1–12
|
||||
let _angleItems = []; // [{name, label, house}] — ASC and MC
|
||||
|
||||
// Tooltip DOM refs — set by _injectTooltipControls() on each draw().
|
||||
let _tooltipEl = null;
|
||||
@@ -214,6 +247,29 @@ const NatusWheel = (() => {
|
||||
return `<svg viewBox="0 0 640 640" width="1em" height="1em" class="tt-sign-icon" aria-hidden="true"><path d="${d}"/></svg>`;
|
||||
}
|
||||
|
||||
/** Planet symbol wrapped in its metal-color span. data-planet allows test queries. */
|
||||
function _pSym(planetName) {
|
||||
const el = PLANET_ELEMENTS[planetName] || '';
|
||||
const sym = PLANET_SYMBOLS[planetName] || planetName[0];
|
||||
return el
|
||||
? `<span class="tt-title--${el}" data-planet="${planetName}">${sym}</span>`
|
||||
: `<span data-planet="${planetName}">${sym}</span>`;
|
||||
}
|
||||
|
||||
/** Sign icon SVG wrapped in its element-color span. */
|
||||
function _signIcon(signName) {
|
||||
const sign = SIGNS.find(s => s.name === signName) || {};
|
||||
const el = (sign.element || '').toLowerCase();
|
||||
const svg = _signIconSvg(signName) || sign.symbol || '';
|
||||
return el ? `<span class="tt-sign-icon-wrap--${el}">${svg}</span>` : svg;
|
||||
}
|
||||
|
||||
/** Ordinal suffix HTML for a house number, e.g. 2 → "2<span class=tt-ord>nd</span>". */
|
||||
function _houseOrdinal(n) {
|
||||
const sfx = n === 1 ? 'st' : n === 2 ? 'nd' : n === 3 ? 'rd' : 'th';
|
||||
return `${n}<span class="tt-ord">${sfx}</span>`;
|
||||
}
|
||||
|
||||
/** <img> for an element-square badge (Ardor.svg etc.). */
|
||||
function _elementSquareImg(elementKey) {
|
||||
const info = ELEMENT_INFO[elementKey];
|
||||
@@ -261,6 +317,10 @@ const NatusWheel = (() => {
|
||||
num: i + 1,
|
||||
label: HOUSE_LABELS[i + 1],
|
||||
}));
|
||||
_angleItems = [
|
||||
{ name: 'ASC', deg: data.houses.asc },
|
||||
{ name: 'MC', deg: data.houses.mc },
|
||||
];
|
||||
}
|
||||
|
||||
/** Clear all active-lock classes and reset cycle state. */
|
||||
@@ -268,6 +328,9 @@ const NatusWheel = (() => {
|
||||
if (_svg) {
|
||||
_svg.selectAll('.nw-planet-group').classed('nw-planet--active', false);
|
||||
_svg.selectAll('.nw-element-group').classed('nw-element--active', false);
|
||||
_svg.selectAll('.nw-sign-group').classed('nw-sign--active', false);
|
||||
_svg.selectAll('[data-house]').classed('nw-house--active', false);
|
||||
_svg.selectAll('[data-angle]').classed('nw-angle--active', false);
|
||||
}
|
||||
_activeRing = null;
|
||||
_activeIdx = null;
|
||||
@@ -325,6 +388,97 @@ const NatusWheel = (() => {
|
||||
}
|
||||
}
|
||||
|
||||
/** Draw aspect lines from an angle (ASC/MC) to all planets in its aspect index. */
|
||||
function _showAngleAspects(angleName) {
|
||||
if (!_aspectGroup || !_currentData) return;
|
||||
_clearAspectLines();
|
||||
|
||||
const angleDeg = angleName === 'ASC' ? _currentData.houses.asc : _currentData.houses.mc;
|
||||
const asc = _currentData.houses.asc;
|
||||
const a1 = _toAngle(angleDeg, asc);
|
||||
const r1 = R.planetR;
|
||||
|
||||
(_aspectIndex[angleName] || []).forEach(({ partner, type, applying_planet }) => {
|
||||
const pdata = _currentData.planets[partner];
|
||||
if (!pdata) return;
|
||||
const a2 = _toAngle(pdata.degree, asc);
|
||||
const style = ASPECT_STYLES[type] || { dash: 'none', width: 0.8 };
|
||||
const color = _aspectColor(applying_planet);
|
||||
|
||||
const line = _aspectGroup.append('line')
|
||||
.attr('x1', _cx + r1 * Math.cos(a1))
|
||||
.attr('y1', _cy + r1 * Math.sin(a1))
|
||||
.attr('x2', _cx + R.planetR * Math.cos(a2))
|
||||
.attr('y2', _cy + R.planetR * Math.sin(a2))
|
||||
.attr('stroke', color)
|
||||
.attr('stroke-width', style.width * 2)
|
||||
.attr('stroke-opacity', 0.9);
|
||||
|
||||
if (style.dash !== 'none') line.attr('stroke-dasharray', style.dash);
|
||||
});
|
||||
}
|
||||
|
||||
/** Lock-activate an angle (ASC or MC) — show tooltip + draw aspect lines. */
|
||||
function _activateAngle(angleName) {
|
||||
if (_activeRing === 'angles' && _activeIdx === angleName) {
|
||||
_closeTooltip();
|
||||
return;
|
||||
}
|
||||
_clearActive();
|
||||
_activeRing = 'angles';
|
||||
_activeIdx = angleName;
|
||||
|
||||
if (_svg) _svg.select(`[data-angle="${angleName}"]`).classed('nw-angle--active', true);
|
||||
|
||||
const def = ANGLE_DEFS[angleName] || {};
|
||||
const angleDeg = angleName === 'ASC' ? _currentData.houses.asc : _currentData.houses.mc;
|
||||
const signIdx = Math.floor(angleDeg / 30) % 12;
|
||||
const sign = SIGNS[signIdx] || {};
|
||||
const inDeg = (angleDeg % 30).toFixed(1);
|
||||
const icon = _signIconSvg(sign.name) || sign.symbol || '';
|
||||
const elKey = (sign.element || '').toLowerCase();
|
||||
|
||||
let aspectHtml = '';
|
||||
const myAspects = _aspectIndex[angleName] || [];
|
||||
if (myAspects.length) {
|
||||
aspectHtml = '<small class="tt-aspects">';
|
||||
myAspects.forEach(({ partner, type, orb, applying_planet }) => {
|
||||
const ppdata = _currentData.planets[partner] || {};
|
||||
const asym = ASPECT_SYMBOLS[type] || type;
|
||||
const lineSvg = _aspectLineSvg(type, applying_planet);
|
||||
aspectHtml +=
|
||||
`<div class="tt-asp-row">` +
|
||||
`${lineSvg} ${asym} ${_pSym(partner)} <span class="tt-asp-in">in</span> ${_signIcon(ppdata.sign)}` +
|
||||
` <span class="tt-asp-orb">${APPLY_SYM} ${orb}°</span>` +
|
||||
`</div>`;
|
||||
});
|
||||
aspectHtml += '</small>';
|
||||
}
|
||||
|
||||
if (_ttBody) {
|
||||
_ttBody.innerHTML =
|
||||
`<div class="tt-planet-header">` +
|
||||
`<span class="tt-title">${def.label || angleName}</span>` +
|
||||
`<span class="tt-planet-sym tt-angle-sym">${def.sym || angleName}</span>` +
|
||||
`</div>` +
|
||||
`<div class="tt-planet-loc">` +
|
||||
`<span>@${inDeg}° ${sign.name || ''}</span>` +
|
||||
`<span class="tt-planet-sign-icon tt-planet-sign-icon--${elKey}">${icon}</span>` +
|
||||
`</div>` +
|
||||
`<div class="tt-angle-house">${_houseOrdinal(def.house)} House <span class="tt-dim">(${HOUSE_LABELS[def.house] || ''})</span></div>` +
|
||||
aspectHtml;
|
||||
}
|
||||
|
||||
_aspectsVisible = false;
|
||||
_positionTooltipAtItem('angles', angleName);
|
||||
if (_tooltipEl) {
|
||||
_tooltipEl.style.display = 'block';
|
||||
_tooltipEl.querySelector('.nw-asp-don')?.style.removeProperty('display');
|
||||
_tooltipEl.querySelector('.nw-asp-doff')?.style.removeProperty('display');
|
||||
}
|
||||
_updateAspectToggleUI();
|
||||
}
|
||||
|
||||
/**
|
||||
* Position the tooltip in the vertical half of the wheel opposite to the
|
||||
* clicked planet/element.
|
||||
@@ -357,6 +511,9 @@ const NatusWheel = (() => {
|
||||
} else if (ring === 'houses') {
|
||||
const grp = svgNode.querySelector(`[data-house="${_houseItems[idx].num}"]`);
|
||||
el = grp && (grp.querySelector('path') || grp);
|
||||
} else if (ring === 'angles') {
|
||||
const grp = svgNode.querySelector(`[data-angle="${idx}"]`);
|
||||
el = grp && (grp.querySelector('text') || grp);
|
||||
}
|
||||
if (el) iRect = el.getBoundingClientRect();
|
||||
}
|
||||
@@ -404,16 +561,29 @@ const NatusWheel = (() => {
|
||||
if (myAspects.length) {
|
||||
aspectHtml = '<small class="tt-aspects">';
|
||||
myAspects.forEach(({ partner, type, orb, applying_planet }) => {
|
||||
const psym = PLANET_SYMBOLS[partner] || partner[0];
|
||||
const ppdata = _currentData.planets[partner] || {};
|
||||
const sicon = _signIconSvg(ppdata.sign) || (SIGNS.find(s => s.name === ppdata.sign) || {}).symbol || '';
|
||||
const isAngle = partner === 'ASC' || partner === 'MC';
|
||||
const ppdata = isAngle ? {} : (_currentData.planets[partner] || {});
|
||||
const asym = ASPECT_SYMBOLS[type] || type;
|
||||
const dirsym = applying_planet === item.name ? APPLY_SYM : SEP_SYM;
|
||||
const applying = applying_planet === item.name;
|
||||
const lineSvg = _aspectLineSvg(type, applying_planet);
|
||||
const partnerSym = isAngle
|
||||
? `<span class="tt-title tt-angle-sym">${(ANGLE_DEFS[partner] || {}).sym || partner}</span>`
|
||||
: _pSym(partner);
|
||||
let signPart;
|
||||
if (isAngle) {
|
||||
const aDeg = partner === 'ASC' ? _currentData.houses.asc : _currentData.houses.mc;
|
||||
const aSign = SIGNS[Math.floor(aDeg / 30) % 12];
|
||||
signPart = aSign ? ` <span class="tt-asp-in">in</span> ${_signIcon(aSign.name)}` : '';
|
||||
} else {
|
||||
signPart = ` <span class="tt-asp-in">in</span> ${_signIcon(ppdata.sign)}`;
|
||||
}
|
||||
const orbHtml = applying
|
||||
? `${APPLY_SYM} ${orb}°`
|
||||
: `${orb}° ${SEP_SYM}`;
|
||||
aspectHtml +=
|
||||
`<div class="tt-asp-row">` +
|
||||
`${lineSvg} ${asym} ${psym} <span class="tt-asp-in">in</span> ${sicon}` +
|
||||
` <span class="tt-asp-orb">(${dirsym} ${orb}°)</span>` +
|
||||
`${lineSvg} ${asym} ${partnerSym}${signPart}` +
|
||||
` <span class="tt-asp-orb">${orbHtml}</span>` +
|
||||
`</div>`;
|
||||
});
|
||||
aspectHtml += '</small>';
|
||||
@@ -427,7 +597,7 @@ const NatusWheel = (() => {
|
||||
`</div>` +
|
||||
`<div class="tt-planet-loc">` +
|
||||
`<span>@${inDeg}° ${pdata.sign}${rx}</span>` +
|
||||
`<span class="tt-planet-sign-icon">${icon}</span>` +
|
||||
`<span class="tt-planet-sign-icon tt-planet-sign-icon--${(signData.element || '').toLowerCase()}">${icon}</span>` +
|
||||
`</div>` +
|
||||
aspectHtml;
|
||||
}
|
||||
@@ -464,14 +634,13 @@ const NatusWheel = (() => {
|
||||
if (CLASSIC_ELEMENTS.has(item.key)) {
|
||||
const contribs = elData.contributors || [];
|
||||
bodyHtml = `<div class="tt-el-body-line">${vecImg} +${count} (${pct}%)</div>`;
|
||||
bodyHtml += `<div class="tt-sign-section-header">Planets</div>`;
|
||||
if (contribs.length) {
|
||||
bodyHtml += '<div class="tt-el-contribs">';
|
||||
contribs.forEach(c => {
|
||||
const psym = PLANET_SYMBOLS[c.planet] || c.planet[0];
|
||||
const pdata = (_currentData.planets || {})[c.planet] || {};
|
||||
const inDeg = pdata.degree !== undefined ? _inSignDeg(pdata.degree).toFixed(1) : '?';
|
||||
const sicon = _signIconSvg(c.sign) || (SIGNS.find(s => s.name === c.sign) || {}).symbol || '';
|
||||
bodyHtml += `<div class="tt-asp-row">${psym} @ ${inDeg}° ${sicon} +1</div>`;
|
||||
bodyHtml += `<div class="tt-asp-row">${_pSym(c.planet)} @ ${inDeg}° ${_signIcon(c.sign)} +1</div>`;
|
||||
});
|
||||
bodyHtml += '</div>';
|
||||
} else {
|
||||
@@ -482,17 +651,21 @@ const NatusWheel = (() => {
|
||||
const stellia = elData.stellia || [];
|
||||
bodyHtml = `<div class="tt-el-body-line">${vecImg} +${count} (${pct}%)</div>`;
|
||||
if (stellia.length) {
|
||||
const isTie = stellia.length > 1;
|
||||
bodyHtml += '<div class="tt-el-contribs">';
|
||||
stellia.forEach(st => {
|
||||
const bonus = st.planets.length - 1;
|
||||
bodyHtml += `<div class="tt-el-formation-header">Stellium +${bonus}</div>`;
|
||||
bodyHtml += `<div class="tt-el-formation-header"><span class="tt-el-formation-label">Stellium</span> +${bonus}</div>`;
|
||||
if (isTie) {
|
||||
st.planets.forEach(p => {
|
||||
const psym = PLANET_SYMBOLS[p.planet] || p.planet[0];
|
||||
const pdata = (_currentData.planets || {})[p.planet] || {};
|
||||
const inDeg = pdata.degree !== undefined ? _inSignDeg(pdata.degree).toFixed(1) : '?';
|
||||
const sicon = _signIconSvg(p.sign) || (SIGNS.find(s => s.name === p.sign) || {}).symbol || '';
|
||||
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${psym} @ ${inDeg}° ${sicon}</div>`;
|
||||
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${_pSym(p.planet)} @ ${inDeg}° ${_signIcon(p.sign)}</div>`;
|
||||
});
|
||||
} else {
|
||||
const psyms = st.planets.map(p => _pSym(p.planet)).join(' ');
|
||||
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${_signIcon(st.sign)} : ${psyms}</div>`;
|
||||
}
|
||||
});
|
||||
bodyHtml += '</div>';
|
||||
} else {
|
||||
@@ -506,8 +679,7 @@ const NatusWheel = (() => {
|
||||
bodyHtml += '<div class="tt-el-contribs">';
|
||||
parades.forEach(pd => {
|
||||
const bonus = pd.signs.length - 1;
|
||||
bodyHtml += `<div class="tt-el-formation-header">Parade +${bonus}</div>`;
|
||||
// Group planets by sign, sorted by ecliptic degree (counterclockwise = ascending)
|
||||
bodyHtml += `<div class="tt-el-formation-header"><span class="tt-el-formation-label">Parade</span> +${bonus}</div>`;
|
||||
const bySign = {};
|
||||
pd.planets.forEach(p => {
|
||||
if (!bySign[p.sign]) bySign[p.sign] = [];
|
||||
@@ -522,9 +694,8 @@ const NatusWheel = (() => {
|
||||
});
|
||||
pd.signs.forEach(sign => {
|
||||
const planets = bySign[sign] || [];
|
||||
const sicon = _signIconSvg(sign) || (SIGNS.find(s => s.name === sign) || {}).symbol || sign;
|
||||
const psyms = planets.map(p => PLANET_SYMBOLS[p.planet] || p.planet[0]).join(' ');
|
||||
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${sicon} (${psyms})</div>`;
|
||||
const psyms = planets.map(p => _pSym(p.planet)).join(' ');
|
||||
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${_signIcon(sign)} : ${psyms}</div>`;
|
||||
});
|
||||
});
|
||||
bodyHtml += '</div>';
|
||||
@@ -549,9 +720,11 @@ const NatusWheel = (() => {
|
||||
}
|
||||
|
||||
function _activateSign(idx) {
|
||||
_clearActive();
|
||||
_activeRing = 'signs';
|
||||
_activeIdx = idx;
|
||||
const sign = _signItems[idx];
|
||||
_svg.select(`[data-sign-name="${sign.name}"]`).classed('nw-sign--active', true);
|
||||
const elKey = sign.element.toLowerCase();
|
||||
const modality = SIGN_MODALITIES[idx];
|
||||
const vecImg = _elementVectorImg(sign.element);
|
||||
@@ -559,33 +732,51 @@ const NatusWheel = (() => {
|
||||
`<span class="tt-sign-sym-fallback">${sign.symbol}</span>`;
|
||||
|
||||
let planetsHtml = '';
|
||||
let cuspsHtml = '';
|
||||
if (_currentData) {
|
||||
const cusps = (_currentData.houses || {}).cusps || [];
|
||||
const inSign = Object.entries(_currentData.planets || {})
|
||||
.filter(([, p]) => p.sign === sign.name)
|
||||
.sort((a, b) => a[1].degree - b[1].degree);
|
||||
inSign.forEach(([pname, pdata]) => {
|
||||
const psym = PLANET_SYMBOLS[pname] || pname[0];
|
||||
const inDeg = _inSignDeg(pdata.degree).toFixed(1);
|
||||
const house = cusps.length ? _planetHouse(pdata.degree, cusps) : null;
|
||||
const domain = house ? HOUSE_LABELS[house] : '';
|
||||
const houseHtml = house
|
||||
? ` ${_houseOrdinal(house)} House <span class="tt-dim">(${domain})</span>`
|
||||
: '';
|
||||
planetsHtml +=
|
||||
`<div class="tt-asp-row">${psym} <span class="tt-asp-orb">@${inDeg}°</span>` +
|
||||
(domain ? `, House of ${domain}` : '') + `</div>`;
|
||||
`<div class="tt-house-planet-row">${_pSym(pname)} <span class="tt-dim">@${inDeg}°</span>${houseHtml}</div>`;
|
||||
});
|
||||
|
||||
if (cusps.length) {
|
||||
cusps.forEach((cuspDeg, i) => {
|
||||
const norm = ((cuspDeg % 360) + 360) % 360;
|
||||
if (Math.floor(norm / 30) === idx) {
|
||||
const houseNum = i + 1;
|
||||
const inDeg = _inSignDeg(cuspDeg).toFixed(1);
|
||||
cuspsHtml +=
|
||||
`<div class="tt-house-planet-row">${_houseOrdinal(houseNum)} House <span class="tt-dim">@${inDeg}°</span> ${_signIcon(sign.name)}</div>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (_ttBody) {
|
||||
_ttBody.innerHTML =
|
||||
`<div class="tt-sign-header">` +
|
||||
`<span class="tt-title tt-title--el-${elKey}">${sign.name}</span>` +
|
||||
`<span class="tt-sign-icon-wrap">${iconSvg}</span>` +
|
||||
`<span class="tt-title tt-title--sign-${elKey}">${sign.name}</span>` +
|
||||
`<span class="tt-sign-icon-wrap tt-sign-icon-wrap--${elKey}">${iconSvg}</span>` +
|
||||
`</div>` +
|
||||
`<div class="tt-sign-meta">` +
|
||||
`<span>${modality} ${sign.element}</span>` +
|
||||
vecImg +
|
||||
`</div>` +
|
||||
(planetsHtml ? `<div class="tt-sign-planets">${planetsHtml}</div>` : '');
|
||||
`<div class="tt-sign-section-header">Planets</div>` +
|
||||
(planetsHtml ? `<div class="tt-sign-planets">${planetsHtml}</div>` : `<div class="tt-el-formation">—</div>`) +
|
||||
`<br>` +
|
||||
`<div class="tt-sign-section-header">Cusps</div>` +
|
||||
(cuspsHtml ? `<div class="tt-sign-cusps">${cuspsHtml}</div>` : `<div class="tt-el-formation">—</div>`);
|
||||
}
|
||||
_positionTooltipAtItem('signs', idx);
|
||||
if (_tooltipEl) {
|
||||
@@ -595,9 +786,11 @@ const NatusWheel = (() => {
|
||||
}
|
||||
|
||||
function _activateHouse(idx) {
|
||||
_clearActive();
|
||||
_activeRing = 'houses';
|
||||
_activeIdx = idx;
|
||||
const house = _houseItems[idx];
|
||||
_svg.select(`[data-house="${house.num}"]`).classed('nw-house--active', true);
|
||||
const cusps = (_currentData && (_currentData.houses || {}).cusps) || [];
|
||||
|
||||
let planetsHtml = '';
|
||||
@@ -606,20 +799,26 @@ const NatusWheel = (() => {
|
||||
.filter(([, p]) => _planetHouse(p.degree, cusps) === house.num)
|
||||
.sort((a, b) => a[1].degree - b[1].degree);
|
||||
inHouse.forEach(([pname, pdata]) => {
|
||||
const psym = PLANET_SYMBOLS[pname] || pname[0];
|
||||
const inDeg = _inSignDeg(pdata.degree).toFixed(1);
|
||||
const sicon = _signIconSvg(pdata.sign) || (SIGNS.find(s => s.name === pdata.sign) || {}).symbol || '';
|
||||
planetsHtml += `<div class="tt-asp-row">${psym} <span class="tt-asp-orb">@${inDeg}°</span> ${sicon}</div>`;
|
||||
planetsHtml += `<div class="tt-house-planet-row">${_pSym(pname)} <span class="tt-dim">@${inDeg}°</span> ${_signIcon(pdata.sign)}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
const quadrant = HOUSE_QUADRANT[house.num] || '';
|
||||
const phase = HOUSE_PHASE[house.num] || '';
|
||||
|
||||
if (_ttBody) {
|
||||
_ttBody.innerHTML =
|
||||
`<div class="tt-house-header">` +
|
||||
`<span class="tt-title"><span class="tt-house-of">House of</span><br>${house.label}</span>` +
|
||||
`<span class="tt-title">` +
|
||||
`<span class="tt-house-of">House of</span><br>` +
|
||||
`${house.label}<br>` +
|
||||
`<span class="tt-house-type">${quadrant} ${phase}</span>` +
|
||||
`</span>` +
|
||||
`<span class="tt-house-num">${house.num}</span>` +
|
||||
`</div>` +
|
||||
(planetsHtml ? `<div class="tt-house-planets">${planetsHtml}</div>` : '');
|
||||
`<div class="tt-sign-section-header">Planets</div>` +
|
||||
(planetsHtml ? `<div class="tt-house-planets">${planetsHtml}</div>` : `<div class="tt-el-formation">—</div>`);
|
||||
}
|
||||
_positionTooltipAtItem('houses', idx);
|
||||
if (_tooltipEl) {
|
||||
@@ -662,6 +861,8 @@ const NatusWheel = (() => {
|
||||
if (_aspectsVisible) {
|
||||
if (_activeRing === 'planets' && _activeIdx !== null) {
|
||||
_showPlanetAspects(_planetItems[_activeIdx].name);
|
||||
} else if (_activeRing === 'angles' && _activeIdx !== null) {
|
||||
_showAngleAspects(_activeIdx);
|
||||
}
|
||||
} else {
|
||||
_clearAspectLines();
|
||||
@@ -691,9 +892,9 @@ const NatusWheel = (() => {
|
||||
e.stopPropagation(); _stepCycle(1);
|
||||
});
|
||||
_tooltipEl.querySelector('.nw-asp-don')
|
||||
.addEventListener('click', (e) => { e.stopPropagation(); _toggleAspects(); });
|
||||
.addEventListener('click', (e) => { e.stopPropagation(); if (!e.currentTarget.classList.contains('btn-disabled')) _toggleAspects(); });
|
||||
_tooltipEl.querySelector('.nw-asp-doff')
|
||||
.addEventListener('click', (e) => { e.stopPropagation(); _toggleAspects(); });
|
||||
.addEventListener('click', (e) => { e.stopPropagation(); if (!e.currentTarget.classList.contains('btn-disabled')) _toggleAspects(); });
|
||||
// Sync button to current state in case of redraw mid-session.
|
||||
_updateAspectToggleUI();
|
||||
}
|
||||
@@ -705,15 +906,6 @@ const NatusWheel = (() => {
|
||||
document.addEventListener('click', (e) => {
|
||||
if (_activeRing === null) return;
|
||||
if (_tooltipEl && _tooltipEl.contains(e.target)) return;
|
||||
// DON/DOFF have pointer-events:none when disabled — check bounding rect directly
|
||||
if (_tooltipEl) {
|
||||
for (const cls of ['.nw-asp-don', '.nw-asp-doff', '.nw-tt-prv', '.nw-tt-nxt']) {
|
||||
const btn = _tooltipEl.querySelector(cls);
|
||||
if (!btn) continue;
|
||||
const r = btn.getBoundingClientRect();
|
||||
if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return;
|
||||
}
|
||||
}
|
||||
_closeTooltip();
|
||||
}, { signal: _outsideClickController.signal });
|
||||
}
|
||||
@@ -750,13 +942,13 @@ const NatusWheel = (() => {
|
||||
const asc = data.houses.asc;
|
||||
const mc = data.houses.mc;
|
||||
const points = [
|
||||
{ deg: asc, label: 'ASC' },
|
||||
{ deg: asc + 180, label: 'DSC' },
|
||||
{ deg: mc, label: 'MC' },
|
||||
{ deg: mc + 180, label: 'IC' },
|
||||
{ deg: asc, label: 'ASC', clickable: true },
|
||||
{ deg: asc + 180, label: 'DSC', clickable: false },
|
||||
{ deg: mc, label: 'MC', clickable: true },
|
||||
{ deg: mc + 180, label: 'IC', clickable: false },
|
||||
];
|
||||
const axisGroup = g.append('g').attr('class', 'nw-axes');
|
||||
points.forEach(({ deg, label }) => {
|
||||
points.forEach(({ deg, label, clickable }) => {
|
||||
const a = _toAngle(deg, asc);
|
||||
const x1 = _cx + R.houseInner * Math.cos(a);
|
||||
const y1 = _cy + R.houseInner * Math.sin(a);
|
||||
@@ -766,7 +958,8 @@ const NatusWheel = (() => {
|
||||
.attr('x1', x1).attr('y1', y1)
|
||||
.attr('x2', x2).attr('y2', y2)
|
||||
.attr('class', 'nw-axis-line');
|
||||
axisGroup.append('text')
|
||||
|
||||
const textEl = axisGroup.append('text')
|
||||
.attr('x', _cx + (R.ascMcR + 12) * Math.cos(a))
|
||||
.attr('y', _cy + (R.ascMcR + 12) * Math.sin(a))
|
||||
.attr('text-anchor', 'middle')
|
||||
@@ -774,6 +967,37 @@ const NatusWheel = (() => {
|
||||
.attr('font-size', `${_r * 0.055}px`)
|
||||
.attr('class', 'nw-axis-label')
|
||||
.text(label);
|
||||
|
||||
if (clickable) {
|
||||
const hitR = _r * 0.055 + 6;
|
||||
const hitGroup = axisGroup.append('g')
|
||||
.attr('class', 'nw-angle-group')
|
||||
.attr('data-angle', label)
|
||||
.style('cursor', 'pointer');
|
||||
|
||||
// Invisible hit circle over the label
|
||||
hitGroup.append('circle')
|
||||
.attr('cx', _cx + (R.ascMcR + 12) * Math.cos(a))
|
||||
.attr('cy', _cy + (R.ascMcR + 12) * Math.sin(a))
|
||||
.attr('r', hitR)
|
||||
.attr('fill', 'transparent');
|
||||
|
||||
// Move the text into the clickable group
|
||||
textEl.remove();
|
||||
hitGroup.append('text')
|
||||
.attr('x', _cx + (R.ascMcR + 12) * Math.cos(a))
|
||||
.attr('y', _cy + (R.ascMcR + 12) * Math.sin(a))
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dominant-baseline', 'middle')
|
||||
.attr('font-size', `${_r * 0.055}px`)
|
||||
.attr('class', 'nw-axis-label')
|
||||
.text(label);
|
||||
|
||||
hitGroup.on('click', function (event) {
|
||||
event.stopPropagation();
|
||||
_activateAngle(label);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -822,7 +1046,7 @@ const NatusWheel = (() => {
|
||||
.attr('cx', lx)
|
||||
.attr('cy', ly)
|
||||
.attr('r', cr)
|
||||
.attr('class', `nw-sign-icon-bg--${sign.element.toLowerCase()}`);
|
||||
.attr('class', `nw-sign-icon-bg nw-sign-icon-bg--${sign.element.toLowerCase()}`);
|
||||
|
||||
if (_signPaths[sign.name]) {
|
||||
signSlice.append('path')
|
||||
@@ -848,8 +1072,22 @@ const NatusWheel = (() => {
|
||||
return { i, startA, sa, ea, midA: (sa + ea) / 2 };
|
||||
});
|
||||
|
||||
houses.forEach(({ i, sa, ea }) => {
|
||||
houseGroup.append('path')
|
||||
houses.forEach(({ i, startA, sa, ea, midA }) => {
|
||||
// Per-house group — wraps fill + number so CSS can target both on hover/active
|
||||
const grp = houseGroup.append('g')
|
||||
.attr('class', 'nw-house-group')
|
||||
.attr('data-house', i + 1)
|
||||
.on('click', function (event) {
|
||||
event.stopPropagation();
|
||||
const clickIdx = i;
|
||||
if (_activeRing === 'houses' && _activeIdx === clickIdx) {
|
||||
_closeTooltip();
|
||||
} else {
|
||||
_activateHouse(clickIdx);
|
||||
}
|
||||
});
|
||||
|
||||
grp.append('path')
|
||||
.attr('transform', `translate(${_cx},${_cy})`)
|
||||
.attr('d', arc({
|
||||
innerRadius: R.houseInner,
|
||||
@@ -857,30 +1095,9 @@ const NatusWheel = (() => {
|
||||
startAngle: sa + Math.PI / 2,
|
||||
endAngle: ea + Math.PI / 2,
|
||||
}))
|
||||
.attr('class', i % 2 === 0 ? 'nw-house-fill--even' : 'nw-house-fill--odd')
|
||||
.attr('data-house', i + 1)
|
||||
.on('click', function (event) {
|
||||
event.stopPropagation();
|
||||
const clickIdx = i; // _houseItems[i].num === i+1
|
||||
if (_activeRing === 'houses' && _activeIdx === clickIdx) {
|
||||
_closeTooltip();
|
||||
} else {
|
||||
_activateHouse(clickIdx);
|
||||
}
|
||||
});
|
||||
});
|
||||
.attr('class', i % 2 === 0 ? 'nw-house-fill--even' : 'nw-house-fill--odd');
|
||||
|
||||
houses.forEach(({ i, startA, midA }) => {
|
||||
if (i % 3 === 0) {
|
||||
houseGroup.append('line')
|
||||
.attr('x1', _cx + R.houseInner * Math.cos(startA))
|
||||
.attr('y1', _cy + R.houseInner * Math.sin(startA))
|
||||
.attr('x2', _cx + R.signInner * Math.cos(startA))
|
||||
.attr('y2', _cy + R.signInner * Math.sin(startA))
|
||||
.attr('class', 'nw-house-cusp');
|
||||
}
|
||||
|
||||
houseGroup.append('text')
|
||||
grp.append('text')
|
||||
.attr('x', _cx + R.houseNumR * Math.cos(midA))
|
||||
.attr('y', _cy + R.houseNumR * Math.sin(midA))
|
||||
.attr('text-anchor', 'middle')
|
||||
@@ -889,6 +1106,16 @@ const NatusWheel = (() => {
|
||||
.attr('class', 'nw-house-num')
|
||||
.attr('pointer-events', 'none')
|
||||
.text(i + 1);
|
||||
|
||||
// Cusp lines at quadrant boundaries stay in houseGroup (not clickable)
|
||||
if (i % 3 === 0) {
|
||||
houseGroup.append('line')
|
||||
.attr('x1', _cx + R.houseInner * Math.cos(startA))
|
||||
.attr('y1', _cy + R.houseInner * Math.sin(startA))
|
||||
.attr('x2', _cx + R.signInner * Math.cos(startA))
|
||||
.attr('y2', _cy + R.signInner * Math.sin(startA))
|
||||
.attr('class', 'nw-house-cusp');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -989,6 +1216,17 @@ const NatusWheel = (() => {
|
||||
* Build the aspect index (planet → aspects list) and create the persistent
|
||||
* nw-aspects group. Lines are drawn per-planet on click, not here.
|
||||
*/
|
||||
/** Compute aspect type + orb between an angle (deg) and a planet (deg), or null. */
|
||||
function _angleAspectWith(angleDeg, planetDeg) {
|
||||
let diff = Math.abs(planetDeg - angleDeg) % 360;
|
||||
if (diff > 180) diff = 360 - diff;
|
||||
for (const { type, angle } of MAJOR_ASPECTS) {
|
||||
const orb = Math.abs(diff - angle);
|
||||
if (orb <= ANGLE_ORB) return { type, orb: +orb.toFixed(1) };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function _drawAspects(g, data) {
|
||||
_aspectIndex = {};
|
||||
Object.entries(data.planets).forEach(([name]) => { _aspectIndex[name] = []; });
|
||||
@@ -1000,6 +1238,19 @@ const NatusWheel = (() => {
|
||||
_aspectIndex[planet2].push({ partner: planet1, ...shared });
|
||||
});
|
||||
|
||||
// Compute planet-angle aspects client-side (planet always applies to angle).
|
||||
['ASC', 'MC'].forEach(angleName => {
|
||||
const angleDeg = angleName === 'ASC' ? data.houses.asc : data.houses.mc;
|
||||
_aspectIndex[angleName] = [];
|
||||
Object.entries(data.planets).forEach(([pname, pdata]) => {
|
||||
const asp = _angleAspectWith(angleDeg, pdata.degree);
|
||||
if (!asp) return;
|
||||
const shared = { type: asp.type, orb: asp.orb, applying_planet: pname };
|
||||
_aspectIndex[angleName].push({ partner: pname, ...shared });
|
||||
_aspectIndex[pname].push({ partner: angleName, ...shared });
|
||||
});
|
||||
});
|
||||
|
||||
_aspectGroup = g.append('g').attr('class', 'nw-aspects');
|
||||
}
|
||||
|
||||
|
||||
@@ -819,3 +819,137 @@ describe("NatusWheel — house ring click tooltips", () => {
|
||||
expect(tooltipEl.style.display).toBe("none");
|
||||
});
|
||||
});
|
||||
|
||||
// ── T15 — ASC / MC angle click tooltips + aspect lines ────────────────────────
|
||||
//
|
||||
// ASC and MC labels are clickable groups ([data-angle='ASC'] / [data-angle='MC']).
|
||||
// Clicking shows a tooltip similar to a planet tooltip:
|
||||
// Title: "Ascendant" (ASC) or "Midheaven" (MC)
|
||||
// Degree in sign + sign name, plus the house number the angle defines.
|
||||
// Aspect list for planets within 10° orb of the angle (client-side computed).
|
||||
// Aspect lines drawn to those planets.
|
||||
// Clicking same angle again closes the tooltip.
|
||||
// Planet tooltips include angle aspects in their own aspect lists.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
|
||||
|
||||
// ASC=0°(Aries): Sun@8° → Conjunction orb 8° ✓; Mars@188° → Opposition orb 8° ✓
|
||||
// MC=90°(Cancer): Moon@97° → Conjunction orb 7° ✓
|
||||
const ANGLE_CHART = {
|
||||
planets: {
|
||||
Sun: { sign: "Aries", degree: 8.0, retrograde: false },
|
||||
Moon: { sign: "Cancer", degree: 97.0, retrograde: false },
|
||||
Mars: { sign: "Libra", degree: 188.0, retrograde: false },
|
||||
},
|
||||
houses: {
|
||||
cusps: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330],
|
||||
asc: 0.0,
|
||||
mc: 90.0,
|
||||
},
|
||||
elements: { Fire: 2, Stone: 0, Air: 1, Water: 1, Time: 0, Space: 0 },
|
||||
aspects: [],
|
||||
distinctions: {
|
||||
"1":1,"2":0,"3":0,"4":1,"5":0,"6":0,
|
||||
"7":1,"8":0,"9":0,"10":1,"11":0,"12":0,
|
||||
},
|
||||
house_system: "O",
|
||||
};
|
||||
|
||||
let svgEl, tooltipEl;
|
||||
|
||||
beforeEach(() => {
|
||||
svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgEl.setAttribute("id", "id_natus_svg");
|
||||
svgEl.setAttribute("width", "400");
|
||||
svgEl.setAttribute("height", "400");
|
||||
svgEl.style.width = "400px";
|
||||
svgEl.style.height = "400px";
|
||||
document.body.appendChild(svgEl);
|
||||
|
||||
tooltipEl = document.createElement("div");
|
||||
tooltipEl.id = "id_natus_tooltip";
|
||||
tooltipEl.className = "tt";
|
||||
tooltipEl.style.display = "none";
|
||||
document.body.appendChild(tooltipEl);
|
||||
|
||||
NatusWheel.draw(svgEl, ANGLE_CHART);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
NatusWheel.clear();
|
||||
svgEl.remove();
|
||||
tooltipEl.remove();
|
||||
});
|
||||
|
||||
// T15a — ASC label is a clickable group with data-angle='ASC'
|
||||
it("T15a: clicking [data-angle='ASC'] shows tooltip with 'Ascendant' title and house 1", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
expect(ascGroup).not.toBeNull("expected [data-angle='ASC'] to exist in the SVG");
|
||||
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
expect(tooltipEl.style.display).toBe("block");
|
||||
const text = tooltipEl.textContent;
|
||||
expect(text).toContain("Ascendant");
|
||||
// ASC=0° is the cusp of House 1
|
||||
expect(text).toContain("1");
|
||||
});
|
||||
|
||||
// T15b — MC label is a clickable group with data-angle='MC'
|
||||
it("T15b: clicking [data-angle='MC'] shows tooltip with 'Midheaven' title and house 10", () => {
|
||||
const mcGroup = svgEl.querySelector("[data-angle='MC']");
|
||||
expect(mcGroup).not.toBeNull("expected [data-angle='MC'] to exist in the SVG");
|
||||
|
||||
mcGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
expect(tooltipEl.style.display).toBe("block");
|
||||
const text = tooltipEl.textContent;
|
||||
expect(text).toContain("Midheaven");
|
||||
expect(text).toContain("10");
|
||||
});
|
||||
|
||||
// T15c — ASC tooltip shows degree-in-sign and sign name
|
||||
it("T15c: ASC tooltip shows the in-sign degree and sign of the Ascendant", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
const text = tooltipEl.textContent;
|
||||
// ASC=0° → 0° Aries
|
||||
expect(text).toContain("Aries");
|
||||
expect(text).toContain("0.0");
|
||||
});
|
||||
|
||||
// T15d — clicking same angle a second time hides the tooltip
|
||||
it("T15d: clicking the same angle again hides the tooltip", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(tooltipEl.style.display).toBe("block");
|
||||
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(tooltipEl.style.display).toBe("none");
|
||||
});
|
||||
|
||||
// T15e — ASC tooltip lists planets within 10° orb (client-side computed)
|
||||
it("T15e: ASC tooltip includes aspect rows for planets within 10° orb", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
|
||||
// Sun at 8° → Conjunction (orb 8°) ✓ — _pSym emits data-planet attr
|
||||
expect(bodyHtml).toContain('data-planet="Sun"');
|
||||
// Mars at 188° → Opposition to ASC (0°), angular distance 172° → orb 8° ✓
|
||||
expect(bodyHtml).toContain('data-planet="Mars"');
|
||||
});
|
||||
|
||||
// T15f — planet tooltip includes ASC in its aspect list when within orb
|
||||
it("T15f: planet tooltip for Sun lists ASC as an aspect partner", () => {
|
||||
const sunGroup = svgEl.querySelector("[data-planet='Sun']");
|
||||
expect(sunGroup).not.toBeNull();
|
||||
|
||||
sunGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
|
||||
expect(bodyHtml).toContain("ASC");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -373,33 +373,33 @@ html.natus-open .natus-modal-wrap {
|
||||
.nw-axis-line { stroke: rgba(var(--secUser), 1); stroke-width: 1.5px; }
|
||||
.nw-axis-label { fill: rgba(var(--secUser), 1); }
|
||||
|
||||
// Sign ring — uniform --priMe bg at half opacity
|
||||
// Sign ring — uniform --priYl bg at half opacity
|
||||
.nw-sign--fire,
|
||||
.nw-sign--stone,
|
||||
.nw-sign--air,
|
||||
.nw-sign--water {
|
||||
fill: rgba(var(--priMe), 0.25);
|
||||
fill: rgba(var(--priYl), 0.25);
|
||||
stroke: rgba(var(--terUser), 1);
|
||||
stroke-width: 0.75px;
|
||||
}
|
||||
|
||||
// Icon bg circles — element fill + matching border
|
||||
.nw-sign-icon-bg--fire { fill: rgba(var(--terRd), 0.92); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--stone { fill: rgba(var(--priYl), 0.92); stroke: rgba(var(--priLm), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--air { fill: rgba(var(--terGn), 0.92); stroke: rgba(var(--priTk), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--water { fill: rgba(var(--priCy), 0.92); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--fire { fill: rgba(var(--quaRd), 0.92); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--stone { fill: rgba(var(--quaFs), 0.92); stroke: rgba(var(--priMe), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--air { fill: rgba(var(--quiCy), 0.92); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--water { fill: rgba(var(--sixId), 0.92); stroke: rgba(var(--priVt), 1); stroke-width: 1px; }
|
||||
|
||||
// Inline SVG path icons — per-element colors
|
||||
.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
||||
.nw-sign-icon--stone { fill: rgba(var(--terLm), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
||||
.nw-sign-icon--air { fill: rgba(var(--priTk), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
||||
.nw-sign-icon--water { fill: rgba(var(--terBl), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
||||
.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); }
|
||||
.nw-sign-icon--stone { fill: rgba(var(--priMe), 1); }
|
||||
.nw-sign-icon--air { fill: rgba(var(--priBl), 1); }
|
||||
.nw-sign-icon--water { fill: rgba(var(--priVt), 1); }
|
||||
|
||||
// House ring — uniform --priFs bg
|
||||
// House ring — uniform --priGn bg
|
||||
.nw-house-cusp { stroke: rgba(var(--terUser), 1); stroke-width: 1.2px; }
|
||||
.nw-house-num { fill: rgba(var(--ninUser), 1); }
|
||||
.nw-house-fill--even { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
||||
.nw-house-fill--odd { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
||||
.nw-house-fill--even { fill: rgba(var(--secGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
||||
.nw-house-fill--odd { fill: rgba(var(--quiGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
||||
|
||||
// Planets — base geometry
|
||||
.nw-planet-circle,
|
||||
@@ -431,17 +431,34 @@ html.natus-open .natus-modal-wrap {
|
||||
.nw-planet-label--pu { fill: rgba(var(--sixPu), 1); stroke: rgba(var(--sixPu), 0.6); }
|
||||
.nw-rx { fill: rgba(var(--terUser), 1); }
|
||||
|
||||
// Hover and active-lock glow — planet groups and element slice groups
|
||||
// Hover and active-lock glow — planet, element, sign, house groups
|
||||
.nw-planet-group,
|
||||
.nw-element-group { cursor: pointer; }
|
||||
.nw-element-group,
|
||||
.nw-sign-group,
|
||||
.nw-house-group { cursor: pointer; }
|
||||
|
||||
.nw-planet-group:hover,
|
||||
.nw-planet-group.nw-planet--active,
|
||||
.nw-planet-group.nw-planet--asp-active,
|
||||
.nw-element-group:hover,
|
||||
.nw-element-group.nw-element--active {
|
||||
.nw-element-group.nw-element--active,
|
||||
.nw-sign-group:hover,
|
||||
.nw-sign-group.nw-sign--active,
|
||||
.nw-house-group:hover,
|
||||
.nw-house-group.nw-house--active {
|
||||
filter: drop-shadow(0 0 5px rgba(var(--ninUser), 0.9));
|
||||
}
|
||||
|
||||
// Zodiac icon circles — muted by default, full opacity on hover/active
|
||||
.nw-sign-icon-bg { opacity: 0.5; }
|
||||
.nw-sign-group:hover .nw-sign-icon-bg,
|
||||
.nw-sign-group.nw-sign--active .nw-sign-icon-bg { opacity: 1; }
|
||||
|
||||
// House numbers — muted by default, full opacity on hover/active
|
||||
.nw-house-num { opacity: 0.75; }
|
||||
.nw-house-group:hover .nw-house-num,
|
||||
.nw-house-group.nw-house--active .nw-house-num { opacity: 1; }
|
||||
|
||||
// ── Planet tick lines — hidden until parent group is active ──────────────────
|
||||
.nw-planet-tick {
|
||||
fill: none;
|
||||
@@ -521,6 +538,14 @@ body[class*="-light"] {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.tt-angle-sym {
|
||||
font-variant-caps: all-small-caps;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.tt-angle-house .tt-ord {
|
||||
margin-left: 0;
|
||||
}
|
||||
.tt-planet-loc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -560,6 +585,19 @@ body[class*="-light"] {
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.tt-sign-section-header {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.55;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
.tt-sign-cusps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
// House tooltip — "House of X" | number; planets in house
|
||||
.tt-house-header {
|
||||
@@ -581,12 +619,24 @@ body[class*="-light"] {
|
||||
opacity: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tt-house-type {
|
||||
display: block;
|
||||
font-size: 0.6em;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
.tt-house-planets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.tt-house-planet-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
// DON|DOFF aspect line toggle — stacked at top-left outside the tooltip box,
|
||||
// matching the PRV/NXT pattern at the bottom corners.
|
||||
@@ -595,6 +645,7 @@ body[class*="-light"] {
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
margin: 0;
|
||||
pointer-events: auto; // override btn-disabled; click must land here, not pass through to SVG
|
||||
}
|
||||
.nw-asp-don { top: -1rem; }
|
||||
.nw-asp-doff { top: 1.2rem; }
|
||||
@@ -627,12 +678,30 @@ body[class*="-light"] {
|
||||
|
||||
.tt-asp-line { flex-shrink: 0; vertical-align: middle; }
|
||||
|
||||
.tt-asp-orb,
|
||||
.tt-asp-orb {
|
||||
margin-left: auto;
|
||||
opacity: 0.6;
|
||||
font-size: 0.65rem;
|
||||
padding-left: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tt-asp-in {
|
||||
opacity: 0.6;
|
||||
font-size: 0.65rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.tt-dim {
|
||||
opacity: 0.6;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.tt-ord {
|
||||
font-size: 0.6rem;
|
||||
vertical-align: 0.25rem;
|
||||
line-height: 0;
|
||||
opacity: 1;
|
||||
margin-left: -0.25rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
// Element tooltip — title + square badge
|
||||
.tt-el-header {
|
||||
@@ -672,9 +741,14 @@ body[class*="-light"] {
|
||||
|
||||
.tt-el-formation-header {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
margin-top: 0.35rem;
|
||||
.tt-el-formation-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.55;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
|
||||
.tt-el-formation {
|
||||
@@ -708,6 +782,24 @@ body[class*="-light"] {
|
||||
.tt-title--el-water { color: rgba(var(--priId), 1); }
|
||||
}
|
||||
|
||||
// Sign tooltip title + sign icon SVG — element border colors (Stone/Air/Fire/Water schema)
|
||||
#id_natus_tooltip,
|
||||
#id_natus_tooltip_2 {
|
||||
.tt-title--sign-fire { color: rgba(var(--priOr), 1); }
|
||||
.tt-title--sign-stone { color: rgba(var(--priMe), 1); }
|
||||
.tt-title--sign-air { color: rgba(var(--priBl), 1); }
|
||||
.tt-title--sign-water { color: rgba(var(--priVt), 1); }
|
||||
|
||||
.tt-sign-icon-wrap--fire .tt-sign-icon,
|
||||
.tt-planet-sign-icon--fire .tt-sign-icon { fill: rgba(var(--priOr), 1); }
|
||||
.tt-sign-icon-wrap--stone .tt-sign-icon,
|
||||
.tt-planet-sign-icon--stone .tt-sign-icon { fill: rgba(var(--priMe), 1); }
|
||||
.tt-sign-icon-wrap--air .tt-sign-icon,
|
||||
.tt-planet-sign-icon--air .tt-sign-icon { fill: rgba(var(--priBl), 1); }
|
||||
.tt-sign-icon-wrap--water .tt-sign-icon,
|
||||
.tt-planet-sign-icon--water .tt-sign-icon { fill: rgba(var(--priVt), 1); }
|
||||
}
|
||||
|
||||
// On light palettes — switch to tertiary tier for legibility
|
||||
body[class*="-light"] #id_natus_tooltip,
|
||||
body[class*="-light"] #id_natus_tooltip_2 {
|
||||
|
||||
@@ -819,3 +819,137 @@ describe("NatusWheel — house ring click tooltips", () => {
|
||||
expect(tooltipEl.style.display).toBe("none");
|
||||
});
|
||||
});
|
||||
|
||||
// ── T15 — ASC / MC angle click tooltips + aspect lines ────────────────────────
|
||||
//
|
||||
// ASC and MC labels are clickable groups ([data-angle='ASC'] / [data-angle='MC']).
|
||||
// Clicking shows a tooltip similar to a planet tooltip:
|
||||
// Title: "Ascendant" (ASC) or "Midheaven" (MC)
|
||||
// Degree in sign + sign name, plus the house number the angle defines.
|
||||
// Aspect list for planets within 10° orb of the angle (client-side computed).
|
||||
// Aspect lines drawn to those planets.
|
||||
// Clicking same angle again closes the tooltip.
|
||||
// Planet tooltips include angle aspects in their own aspect lists.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
|
||||
|
||||
// ASC=0°(Aries): Sun@8° → Conjunction orb 8° ✓; Mars@188° → Opposition orb 8° ✓
|
||||
// MC=90°(Cancer): Moon@97° → Conjunction orb 7° ✓
|
||||
const ANGLE_CHART = {
|
||||
planets: {
|
||||
Sun: { sign: "Aries", degree: 8.0, retrograde: false },
|
||||
Moon: { sign: "Cancer", degree: 97.0, retrograde: false },
|
||||
Mars: { sign: "Libra", degree: 188.0, retrograde: false },
|
||||
},
|
||||
houses: {
|
||||
cusps: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330],
|
||||
asc: 0.0,
|
||||
mc: 90.0,
|
||||
},
|
||||
elements: { Fire: 2, Stone: 0, Air: 1, Water: 1, Time: 0, Space: 0 },
|
||||
aspects: [],
|
||||
distinctions: {
|
||||
"1":1,"2":0,"3":0,"4":1,"5":0,"6":0,
|
||||
"7":1,"8":0,"9":0,"10":1,"11":0,"12":0,
|
||||
},
|
||||
house_system: "O",
|
||||
};
|
||||
|
||||
let svgEl, tooltipEl;
|
||||
|
||||
beforeEach(() => {
|
||||
svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgEl.setAttribute("id", "id_natus_svg");
|
||||
svgEl.setAttribute("width", "400");
|
||||
svgEl.setAttribute("height", "400");
|
||||
svgEl.style.width = "400px";
|
||||
svgEl.style.height = "400px";
|
||||
document.body.appendChild(svgEl);
|
||||
|
||||
tooltipEl = document.createElement("div");
|
||||
tooltipEl.id = "id_natus_tooltip";
|
||||
tooltipEl.className = "tt";
|
||||
tooltipEl.style.display = "none";
|
||||
document.body.appendChild(tooltipEl);
|
||||
|
||||
NatusWheel.draw(svgEl, ANGLE_CHART);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
NatusWheel.clear();
|
||||
svgEl.remove();
|
||||
tooltipEl.remove();
|
||||
});
|
||||
|
||||
// T15a — ASC label is a clickable group with data-angle='ASC'
|
||||
it("T15a: clicking [data-angle='ASC'] shows tooltip with 'Ascendant' title and house 1", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
expect(ascGroup).not.toBeNull("expected [data-angle='ASC'] to exist in the SVG");
|
||||
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
expect(tooltipEl.style.display).toBe("block");
|
||||
const text = tooltipEl.textContent;
|
||||
expect(text).toContain("Ascendant");
|
||||
// ASC=0° is the cusp of House 1
|
||||
expect(text).toContain("1");
|
||||
});
|
||||
|
||||
// T15b — MC label is a clickable group with data-angle='MC'
|
||||
it("T15b: clicking [data-angle='MC'] shows tooltip with 'Midheaven' title and house 10", () => {
|
||||
const mcGroup = svgEl.querySelector("[data-angle='MC']");
|
||||
expect(mcGroup).not.toBeNull("expected [data-angle='MC'] to exist in the SVG");
|
||||
|
||||
mcGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
expect(tooltipEl.style.display).toBe("block");
|
||||
const text = tooltipEl.textContent;
|
||||
expect(text).toContain("Midheaven");
|
||||
expect(text).toContain("10");
|
||||
});
|
||||
|
||||
// T15c — ASC tooltip shows degree-in-sign and sign name
|
||||
it("T15c: ASC tooltip shows the in-sign degree and sign of the Ascendant", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
const text = tooltipEl.textContent;
|
||||
// ASC=0° → 0° Aries
|
||||
expect(text).toContain("Aries");
|
||||
expect(text).toContain("0.0");
|
||||
});
|
||||
|
||||
// T15d — clicking same angle a second time hides the tooltip
|
||||
it("T15d: clicking the same angle again hides the tooltip", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(tooltipEl.style.display).toBe("block");
|
||||
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(tooltipEl.style.display).toBe("none");
|
||||
});
|
||||
|
||||
// T15e — ASC tooltip lists planets within 10° orb (client-side computed)
|
||||
it("T15e: ASC tooltip includes aspect rows for planets within 10° orb", () => {
|
||||
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
|
||||
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
|
||||
// Sun at 8° → Conjunction (orb 8°) ✓ — _pSym emits data-planet attr
|
||||
expect(bodyHtml).toContain('data-planet="Sun"');
|
||||
// Mars at 188° → Opposition to ASC (0°), angular distance 172° → orb 8° ✓
|
||||
expect(bodyHtml).toContain('data-planet="Mars"');
|
||||
});
|
||||
|
||||
// T15f — planet tooltip includes ASC in its aspect list when within orb
|
||||
it("T15f: planet tooltip for Sun lists ASC as an aspect partner", () => {
|
||||
const sunGroup = svgEl.querySelector("[data-planet='Sun']");
|
||||
expect(sunGroup).not.toBeNull();
|
||||
|
||||
sunGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
|
||||
const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
|
||||
expect(bodyHtml).toContain("ASC");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -20,13 +20,13 @@
|
||||
<div class="natus-field">
|
||||
<label for="id_nf_date">Birth date</label>
|
||||
<input id="id_nf_date" name="date" type="date" required
|
||||
{% if saved_birth_dt %}value="{{ saved_birth_dt|date:'Y-m-d' }}"{% endif %}>
|
||||
{% if saved_birth_date %}value="{{ saved_birth_date }}"{% endif %}>
|
||||
</div>
|
||||
|
||||
<div class="natus-field">
|
||||
<label for="id_nf_time">Birth time</label>
|
||||
<input id="id_nf_time" name="time" type="time"
|
||||
value="{% if saved_birth_dt %}{{ saved_birth_dt|time:'H:i' }}{% else %}12:00{% endif %}">
|
||||
value="{{ saved_birth_time|default:'12:00' }}">
|
||||
<small>Local time at birth place. Use 12:00 if unknown.</small>
|
||||
</div>
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
const PLACE_DELAY = 400;
|
||||
const CHART_DELAY = 300;
|
||||
|
||||
NatusWheel.preload();
|
||||
const _preloadReady = NatusWheel.preload();
|
||||
|
||||
// ── Status helper ───────────────────────────────────────────────────────
|
||||
|
||||
@@ -313,9 +313,18 @@
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
// ── Auto-preview on load if form is pre-filled from saved sky ───────────
|
||||
// ── Draw saved sky on load; only call PySwiss if no saved chart yet ─────
|
||||
|
||||
if (_formReady()) schedulePreview();
|
||||
const _savedSky = {{ saved_sky_json|safe }};
|
||||
_preloadReady.then(() => {
|
||||
if (_savedSky) {
|
||||
_lastChartData = _savedSky;
|
||||
confirmBtn.disabled = false;
|
||||
NatusWheel.draw(svgEl, _savedSky);
|
||||
} else if (_formReady()) {
|
||||
schedulePreview();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user