fix: use lit svg template for SVG fragments (background/rooms did not render) — v1.0.1

This commit is contained in:
JB
2026-07-03 22:03:47 +03:00
parent ce0d44d185
commit 17f8e8164e
4 changed files with 59 additions and 59 deletions
File diff suppressed because one or more lines are too long
+26 -26
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "houseplan-card", "name": "houseplan-card",
"version": "1.0.0", "version": "1.0.1",
"description": "Interactive house plan Lovelace card for Home Assistant (dacha Kirillovskoe)", "description": "Interactive house plan Lovelace card for Home Assistant (dacha Kirillovskoe)",
"license": "MIT", "license": "MIT",
"type": "module", "type": "module",
+6 -6
View File
@@ -3,13 +3,13 @@
* Работает от объекта `hass` (без токена). Раскладка иконок хранится на сервере * Работает от объекта `hass` (без токена). Раскладка иконок хранится на сервере
* через WS-команды интеграции `houseplan` (fallback localStorage). * через WS-команды интеграции `houseplan` (fallback localStorage).
*/ */
import { LitElement, html, css, nothing, TemplateResult, PropertyValues } from 'lit'; import { LitElement, html, svg, css, nothing, TemplateResult, PropertyValues } from 'lit';
import { ROOMS, FLOOR_VB, FLOOR_TITLES, AREA_NAMES, IMG_W, IMG_H, Room } from './data/house'; import { ROOMS, FLOOR_VB, FLOOR_TITLES, AREA_NAMES, IMG_W, IMG_H, Room } from './data/house';
import { FLOOR_BG } from './data/backgrounds'; import { FLOOR_BG } from './data/backgrounds';
import { EXCLUDED_DOMAINS, GROUP_TITLES, iconFor, DOMAIN_PRIORITY } from './rules'; import { EXCLUDED_DOMAINS, GROUP_TITLES, iconFor, DOMAIN_PRIORITY } from './rules';
import './editor'; import './editor';
const CARD_VERSION = '1.0.0'; const CARD_VERSION = '1.0.1';
const LS_KEY = 'houseplan_card_layout_v1'; const LS_KEY = 'houseplan_card_layout_v1';
interface DevItem { interface DevItem {
@@ -500,17 +500,17 @@ class HouseplanCard extends LitElement {
<div class="stage ${this._edit ? 'edit' : ''}" style="aspect-ratio:${vb[2]}/${vb[3]}"> <div class="stage ${this._edit ? 'edit' : ''}" style="aspect-ratio:${vb[2]}/${vb[3]}">
<svg viewBox="${vb.join(' ')}" preserveAspectRatio="xMidYMid meet"> <svg viewBox="${vb.join(' ')}" preserveAspectRatio="xMidYMid meet">
${bg ${bg
? html`<image href="${bg}" x="0" y="0" width="${IMG_W}" height="${IMG_H}" preserveAspectRatio="none" />` ? svg`<image href="${bg}" x="0" y="0" width="${IMG_W}" height="${IMG_H}" preserveAspectRatio="none" />`
: nothing} : nothing}
${rooms.map( ${rooms.map(
(r) => html`<rect (r) => svg`<rect
class="room ${bg ? 'overlay' : 'yard'}" class="room ${bg ? 'overlay' : 'yard'}"
x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="8" x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="8"
@click=${() => this._clickRoom(r)} @click=${() => this._clickRoom(r)}
@mousemove=${(e: MouseEvent) => this._showTip(e, r.name, 'комната — открыть зону')} @mousemove=${(e: MouseEvent) => this._showTip(e, r.name, 'комната — открыть зону')}
@mouseleave=${() => (this._tip = null)} @mouseleave=${() => (this._tip = null)}
></rect> ></rect>
${!bg ? html`<text class="rlabel" x="${r.x + r.w / 2}" y="${r.y + 26}">${r.name}</text>` : nothing}`, ${!bg ? svg`<text class="rlabel" x="${r.x + r.w / 2}" y="${r.y + 26}">${r.name}</text>` : nothing}`,
)} )}
</svg> </svg>
<div class="devlayer" style="--icon-size:${iconSize}px"> <div class="devlayer" style="--icon-size:${iconSize}px">
@@ -931,4 +931,4 @@ if (!(window as any).customCards.find((c: any) => c.type === 'houseplan-card'))
} }
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.info(`%c HOUSEPLAN-CARD %c v${CARD_VERSION} `, 'background:#3ea6ff;color:#04121f;font-weight:700', ''); console.info(`%c HOUSEPLAN-CARD %c v${CARD_VERSION} `, 'background:#3ea6ff;color:#04121f;font-weight:700', '')