mirror of
https://github.com/Matysh/houseplan-card
synced 2026-09-29 03:09:36 +00:00
Matysh
92ea8fa03c
Owner report (2026-08-01, screenshot): a device scaled up via marker.size
kept its value badge at the default size — an enlarged icon next to a tiny
'26.6°'. Same bug class as the v1.51.3 glyph fix (3456706): satellite
metrics were pinned to the base --icon-size, so --dev-scale grew the box
but nothing that belongs to it visually.
All .dev satellites now derive from var(--dev-size, var(--icon-size,
2.5cqw)) — which equals icon-size * dev-scale — keeping the exact same
coefficients, so at size=1 nothing changes pixel-wise:
- .valonly plate padding (0.16) and .valtext font (0.45)
- .tval/.hval plates: margin (0.1), radius (0.18), padding (0.14),
line-height (0.68) — font was already dev-size, the plate was not
- .lqi label: margin (0.05), font (0.38)
- .newdot: offsets (-0.12), diameter (0.34)
- .alarm ring inset (-0.35)
smoke_icon_scale extended: value badge and temp plate must double at
size=2 (getBoundingClientRect + computed font-size, 1.8-2.2 tolerance)
and keep the exact old defaults at size=1; verified failing on the
pre-fix build. space-card renders bare icons only, unaffected.
95 lines
5.3 KiB
JavaScript
95 lines
5.3 KiB
JavaScript
// Множитель «размер значка» обязан масштабировать ГЛИФ вместе с подложкой:
|
||
// --mdc-icon-size считался от базового --icon-size, и «увеличенный» значок
|
||
// был пустой рамкой вокруг дефолтной иконки (репорт пользователя, 2026-07-29).
|
||
import { launch, checkAll, finish } from './serve.mjs';
|
||
const { page, browser } = await launch();
|
||
const out = await page.evaluate(async () => {
|
||
const o = {};
|
||
const c = window.__card;
|
||
const sr = () => c.shadowRoot || c.renderRoot;
|
||
const d = c._devices.find((x) => x.space === 'f1' && x.bindingKind === 'device');
|
||
const glyphW = () => {
|
||
const el = [...sr().querySelectorAll('.dev')].find((e) => !e.classList.contains('ghost'));
|
||
const ic = el?.querySelector('ha-icon');
|
||
return ic ? ic.getBoundingClientRect().width : 0;
|
||
};
|
||
const badgeW = () => {
|
||
const el = [...sr().querySelectorAll('.dev')].find((e) => !e.classList.contains('ghost'));
|
||
return el ? el.getBoundingClientRect().width : 0;
|
||
};
|
||
// базовый размер
|
||
const g1 = glyphW(), b1 = badgeW();
|
||
// множитель ×3 на всех авто-устройствах через маркер первого
|
||
c._serverCfg.markers = (c._serverCfg.markers || []).filter((m) => m.id !== d.id);
|
||
c._serverCfg.markers.push({ id: d.id, binding: 'device:' + d.bindingRef, size: 3 });
|
||
c._cfgEpoch++; c._regSignature = '';
|
||
c._maybeRebuildDevices(); c.requestUpdate(); await c.updateComplete;
|
||
await new Promise((r) => setTimeout(r, 100));
|
||
const scaled = [...sr().querySelectorAll('.dev')].find((e) => (e.getAttribute('style') || '').includes('--dev-scale:3'));
|
||
const g3 = scaled?.querySelector('ha-icon')?.getBoundingClientRect().width || 0;
|
||
const b3 = scaled?.getBoundingClientRect().width || 0;
|
||
o.badgeScales = b3 > b1 * 2.5;
|
||
o.glyphScalesWithBadge = g3 > g1 * 2.5; // раньше глиф оставался базовым
|
||
o.glyphFillsBadge = g3 / b3 > 0.45 && g3 / b3 < 0.8; // пропорция сохранена
|
||
c._serverCfg.markers = c._serverCfg.markers.filter((m) => m.id !== d.id);
|
||
c._cfgEpoch++; c._regSignature = ''; c._maybeRebuildDevices();
|
||
return o;
|
||
});
|
||
checkAll(out);
|
||
|
||
// Тот же класс бага для СПУТНИКОВ значка (репорт владельца, 2026-08-01):
|
||
// бейдж значения (display:value) и temp-плашка считались от базового
|
||
// --icon-size и оставались маленькими при size=2. Всё, что визуально
|
||
// принадлежит устройству, обязано расти вместе с --dev-scale.
|
||
const out2 = await page.evaluate(async () => {
|
||
const o = {};
|
||
const c = window.__card;
|
||
const sr = () => c.shadowRoot || c.renderRoot;
|
||
const devEl = () => {
|
||
const idx = c._devices.filter((x) => x.space === c._space).findIndex((x) => x.id === 'd_temp');
|
||
return sr().querySelectorAll('.dev')[idx];
|
||
};
|
||
const setMarker = async (extra) => {
|
||
c._serverCfg.markers = (c._serverCfg.markers || []).filter((m) => m.id !== 'd_temp');
|
||
c._serverCfg.markers.push({ id: 'd_temp', binding: 'device:d_temp', ...extra });
|
||
c._cfgEpoch++; c._regSignature = '';
|
||
c._maybeRebuildDevices(); c.requestUpdate(); await c.updateComplete;
|
||
await new Promise((r) => setTimeout(r, 80));
|
||
};
|
||
const fs = (el) => parseFloat(getComputedStyle(el).fontSize);
|
||
// базовый --icon-size в px: ширина немасштабированного бейджа минус рамка 1px×2
|
||
const plain = [...sr().querySelectorAll('.dev')].find(
|
||
(e) => !e.classList.contains('ghost') && !e.classList.contains('valonly') && !(e.getAttribute('style') || '').includes('--dev-scale'));
|
||
const iconPx = plain.getBoundingClientRect().width - 2;
|
||
|
||
// --- бейдж значения (valonly) ---
|
||
await setMarker({ display: 'value', size: 1 });
|
||
const v1 = devEl().getBoundingClientRect();
|
||
const vf1 = fs(devEl().querySelector('.valtext'));
|
||
// при size=1 дефолт не изменился: шрифт ровно прежние 0.45 * icon-size
|
||
o.valDefaultKept = Math.abs(vf1 - iconPx * 0.45) < 0.75;
|
||
await setMarker({ display: 'value', size: 2 });
|
||
const v2 = devEl().getBoundingClientRect();
|
||
const vf2 = fs(devEl().querySelector('.valtext'));
|
||
o.valFontScales = vf2 / vf1 > 1.8 && vf2 / vf1 < 2.2;
|
||
o.valPlateScales = (v2.height - 2) / (v1.height - 2) > 1.8 && (v2.height - 2) / (v1.height - 2) < 2.2
|
||
&& v2.width / v1.width > 1.6 && v2.width / v1.width < 2.4;
|
||
|
||
// --- temp-плашка (.tval) рядом со значком ---
|
||
await setMarker({ size: 1 });
|
||
const t1 = devEl().querySelector('.tval').getBoundingClientRect();
|
||
const tf1 = fs(devEl().querySelector('.tval'));
|
||
// дефолт: line-height 0.68 * icon-size + рамка 1px×2
|
||
o.tvalDefaultKept = Math.abs(t1.height - (iconPx * 0.68 + 2)) < 1;
|
||
await setMarker({ size: 2 });
|
||
const t2 = devEl().querySelector('.tval').getBoundingClientRect();
|
||
const tf2 = fs(devEl().querySelector('.tval'));
|
||
o.tvalScales = (t2.height - 2) / (t1.height - 2) > 1.8 && (t2.height - 2) / (t1.height - 2) < 2.2
|
||
&& tf2 / tf1 > 1.8 && tf2 / tf1 < 2.2;
|
||
|
||
c._serverCfg.markers = c._serverCfg.markers.filter((m) => m.id !== 'd_temp');
|
||
c._cfgEpoch++; c._regSignature = ''; c._maybeRebuildDevices();
|
||
return o;
|
||
});
|
||
await finish(browser, checkAll(out2));
|