german/houseplan-card
1
0
Fork 0
mirror of https://github.com/Matysh/houseplan-card synced 2026-10-05 06:08:59 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: round caps/joins on background-editor lines (HP-1553)

Browse Source 
Lines drawn in the background (decor) editor showed notched 'teeth' where
two segments met at an angle. Decor <line> elements — both the saved render
and the live drawing preview — now carry stroke-linecap/linejoin=round, so
every line end reads as a circle of the stroke width and joints are smooth.
smoke_decor asserts the round attributes on the draft and the saved lines.
This commit is contained in:
Codex
2026-08-02 10:47:49 +03:00
parent 9bcfebe8f4
commit 941d2709fd
5 changed files with 70 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/houseplan-card.ts
+4 -2
View File
@@ -2689,8 +2689,10 @@ class HouseplanCard extends LitElement {
const down = (e: PointerEvent) => this._decorShapeDown(e, sh);
const dbl = () => this._decorShapeDbl(sh);
if (sh.kind === 'line')
// round caps: line ends read as circles of the stroke width, so two
// lines meeting at an angle join without the notch (owner's screenshot)
return svg`<line class="${cls}" x1="${sh.x1 * W}" y1="${sh.y1 * H}" x2="${sh.x2 * W}" y2="${sh.y2 * H}"
stroke="${sh.color}" stroke-width="${sh.width}" @pointerdown=${down}></line>`;
stroke="${sh.color}" stroke-width="${sh.width}" stroke-linecap="round" stroke-linejoin="round" @pointerdown=${down}></line>`;
if (sh.kind === 'rect')
return svg`<rect class="${cls}" x="${sh.x * W}" y="${sh.y * H}" width="${sh.w * W}" height="${sh.h * H}"
stroke="${sh.color}" stroke-width="${sh.width}"
@@ -2711,7 +2713,7 @@ class HouseplanCard extends LitElement {
const st = this._decorStyle;
if (d.kind === 'line')
draft = svg`<line class="ddraft" x1="${d.a[0]}" y1="${d.a[1]}" x2="${d.b[0]}" y2="${d.b[1]}"
stroke="${st.color}" stroke-width="${st.width}"></line>`;
stroke="${st.color}" stroke-width="${st.width}" stroke-linecap="round" stroke-linejoin="round"></line>`;
else {
const x = Math.min(d.a[0], d.b[0]), y = Math.min(d.a[1], d.b[1]);
const w = Math.abs(d.b[0] - d.a[0]), h = Math.abs(d.b[1] - d.a[1]);