From fa89d655edd5ee8264e84a33baa17513f6292ff4 Mon Sep 17 00:00:00 2001 From: Codex Date: Fri, 2 Oct 2026 12:13:23 +0300 Subject: [PATCH] feat(card): the LED strip tool in the Devices editor (#780) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stage 4 of #780 (ТЗ §4–§5). «LED strip» next to «Add» draws a chain with clean clicks only (pan, pinch, a second finger, cancel and the synthetic click after navigation add nothing), snaps to the grid and to physical wall faces / zero-wall axes, stops at the first face of masonry, partitions, columns and windows (doors, gates and passages are cut by geometry), Shift gives 45°. Ctrl+Z removes the chain's own point first, Esc finishes, a double click or a click on the first point (≥3 vertices) closes; fewer than two distinct points write nothing. A finished strip opens the device picker (lights first, taken markers explained, «New device…» binds in that dialog's own write, «Later» keeps unbound geometry). A selected strip shows its vertex handles (a drag re-checks both neighbours and the whole path) and a new Devices tray branch: device settings, bind/change, unbind, show as icon, delete. The device dialog gets the representation section: show as strip (restores a hidden shape at once or draws one for this marker, behind the dialog's own save/discard guard), show as icon, unbind/delete for a hidden shape. Every geometry or representation change is one optimistic write and one LED command of the device history; Undo/Redo restores only its own strip record and refuses when a newer change sits on it. A rebinding renames the link in the marker save, a deleted marker leaves an unbound strip, a bound marker may not move to another space. Plan/Background show strips as a passive translucent mark. The tool, its `led` dictionary (en static, ru/de/fr lazy) and placement geometry are a new lazy `led-strip-editor` chunk (9.5 KB gzip), loaded only on the tool, an editable strip in the shown space or a strip device's dialog. The initial graph gets the loader and delegation only (src/led-strip-card.ts); the lazy editor graph +122 B, inside its ceiling. Mutant anchors follow the moved code (marker dialog guard, static LED layer). Issue: #780 User-Visible: no --- docs/data-hp-contract.json | 1 + scripts/bundle-budget.mjs | 4 +- scripts/bundle-manifest.mjs | 24 +- scripts/mutation-registry.mjs | 13 +- src/editors/marker-dialog.ts | 18 +- src/houseplan-card.ts | 20 +- src/houseplan-editor-runtime.ts | 13 +- src/i18n/de.json | 1 + src/i18n/en.json | 1 + src/i18n/fr.json | 1 + src/i18n/led.ts | 29 + src/i18n/led/de.json | 35 ++ src/i18n/led/en.json | 35 ++ src/i18n/led/fr.json | 35 ++ src/i18n/led/led-de.ts | 6 + src/i18n/led/led-fr.ts | 6 + src/i18n/led/led-ru.ts | 6 + src/i18n/led/ru.json | 35 ++ src/i18n/ru.json | 1 + src/led-strip-card.ts | 73 +++ src/led-strip-editor.ts | 815 +++++++++++++++++++++++++ src/led-strip-gate.ts | 45 +- src/led-strip-runtime.ts | 6 +- test/bundle-assets.test.mjs | 22 +- test/i18n-lazy-namespaces.test.mjs | 5 +- test/led-strip-editor.test.mjs | 272 +++++++++ test/mutation-browser-offload.test.mjs | 2 +- tsconfig.test.json | 4 +- 28 files changed, 1479 insertions(+), 49 deletions(-) create mode 100644 src/i18n/led.ts create mode 100644 src/i18n/led/de.json create mode 100644 src/i18n/led/en.json create mode 100644 src/i18n/led/fr.json create mode 100644 src/i18n/led/led-de.ts create mode 100644 src/i18n/led/led-fr.ts create mode 100644 src/i18n/led/led-ru.ts create mode 100644 src/i18n/led/ru.json create mode 100644 src/led-strip-card.ts create mode 100755 src/led-strip-editor.ts create mode 100644 test/led-strip-editor.test.mjs diff --git a/docs/data-hp-contract.json b/docs/data-hp-contract.json index dfc9bc5f..54e7b79f 100644 --- a/docs/data-hp-contract.json +++ b/docs/data-hp-contract.json @@ -34,6 +34,7 @@ "import", "info", "kiosk", + "led-picker", "marker", "onboarding", "opening", diff --git a/scripts/bundle-budget.mjs b/scripts/bundle-budget.mjs index fa3bea0d..5b3a2b4b 100644 --- a/scripts/bundle-budget.mjs +++ b/scripts/bundle-budget.mjs @@ -427,6 +427,7 @@ const GRAPH_LABELS = { lazyEditorFiles: 'lazy editor graph', lazyOnboardingFiles: 'lazy onboarding graph', lazyNamespaceLocaleFiles: 'lazy namespace locale graph', + lazyLedEditorFiles: 'lazy LED editor graph', }; /** @@ -470,6 +471,7 @@ export const NAMESPACE_ENGLISH_CONSUMERS = { support: ['lazyEditorFiles'], topology: ['lazyEditorFiles'], tools: ['lazyEditorFiles'], + led: ['lazyLedEditorFiles'], }; /** @@ -776,7 +778,7 @@ export function assertBundleBudget( const namespaceLocales = manifest.lazyNamespaceLocaleFiles; if (!Array.isArray(namespaceLocales) || namespaceLocales.length !== NAMESPACE_LOCALE_CHUNKS.length) { throw new Error(`lazy namespace locale graph has ${namespaceLocales?.length ?? 0} files,` - + ` expected ${NAMESPACE_LOCALE_CHUNKS.length} (settings/support/topology/tools × ru/de/fr)`); + + ` expected ${NAMESPACE_LOCALE_CHUNKS.length} (settings/support/topology/tools/led × ru/de/fr)`); } for (const [graph, label] of [ ['initialViewFiles', 'initial View graph'], diff --git a/scripts/bundle-manifest.mjs b/scripts/bundle-manifest.mjs index 36f2e8b5..c6ae26bc 100644 --- a/scripts/bundle-manifest.mjs +++ b/scripts/bundle-manifest.mjs @@ -14,13 +14,14 @@ const PDF_RETRY_ASSET_TOKEN = '__HOUSEPLAN_PDF_RETRY_ASSET__'; const MOON_RETRY_ASSET_TOKEN = '__HOUSEPLAN_MOON_RETRY_ASSET__'; const LED_RETRY_ASSET_TOKEN = '__HOUSEPLAN_LED_RETRY_ASSET__'; const LED_FIELD_RETRY_ASSET_TOKEN = '__HOUSEPLAN_LED_FIELD_RETRY_ASSET__'; +const LED_EDITOR_RETRY_ASSET_TOKEN = '__HOUSEPLAN_LED_EDITOR_RETRY_ASSET__'; /** * #627: ru/de/fr of the three lazy dictionary namespaces are one chunk per * namespace × language. Their loader modules are the recognition marker for * the manifest graph and the target of each second-attempt retry token. */ -export const NAMESPACE_LOCALE_CHUNKS = ['settings', 'support', 'topology', 'tools'] +export const NAMESPACE_LOCALE_CHUNKS = ['settings', 'support', 'topology', 'tools', 'led'] .flatMap((namespace) => ['ru', 'de', 'fr'].map((language) => ({ namespace, language, @@ -124,6 +125,9 @@ export function buildBundleManifest(bundle, fingerprint) { // strip is on in a Glow room with a light scene. : modules.some((id) => id.endsWith('/src/led-strip-field.ts')) ? 'led-field' + // #780: the Devices-editor LED tool, loaded by the editor runtime. + : modules.some((id) => id.endsWith('/src/led-strip-editor.ts')) + ? 'led-editor' // #474: designer furniture artwork — its own lazy chunk, shared by // the editor (static import) and the View runtime (dynamic). : modules.some((id) => id.endsWith('/src/furniture-plan-art.generated.ts')) @@ -176,6 +180,7 @@ export function buildBundleManifest(bundle, fingerprint) { || path.includes('led-strip-runtime-')), ...files.filter((file) => file._role === 'led-field').map((file) => file.path), ]; + const ledEditorRoots = files.filter((file) => file._role === 'led-editor').map((file) => file.path); // #627: namespace dictionaries are dynamic imports of LAZY chunks, never of // the initial graph, so they are found by their module, not as a root. const namespaceLocaleRoots = files.filter((file) => file._role === 'namespace-locale') @@ -195,6 +200,7 @@ export function buildBundleManifest(bundle, fingerprint) { const lazyPdf = graphFrom(pdfRoots); const lazyMoon = graphFrom(moonRoots); const lazyLed = graphFrom(ledRoots); + const lazyLedEditor = graphFrom(ledEditorRoots); const lazyNamespaceLocale = graphFrom(namespaceLocaleRoots); const sum = (paths) => [...paths] .reduce((total, path) => total + (byPath.get(path)?.gzipBytes || 0), 0); @@ -227,6 +233,8 @@ export function buildBundleManifest(bundle, fingerprint) { lazyMoonGzipBytes: sum(lazyMoon), lazyLedFiles: [...lazyLed].sort(), lazyLedGzipBytes: sum(lazyLed), + lazyLedEditorFiles: [...lazyLedEditor].sort(), + lazyLedEditorGzipBytes: sum(lazyLedEditor), lazyNamespaceLocaleFiles: [...lazyNamespaceLocale].sort(), lazyNamespaceLocaleGzipBytes: sum(lazyNamespaceLocale), files: files.map(({ _role, ...file }) => file), @@ -302,6 +310,9 @@ export function editorRuntimeRetryUrlPlugin() { const ledField = chunks.find((chunk) => Object.keys(chunk.modules) .some((id) => id.replaceAll('\\', '/').endsWith('/src/led-strip-field.ts'))); if (!ledField) throw new Error('LED strip field chunk was not emitted'); + const ledEditor = chunks.find((chunk) => Object.keys(chunk.modules) + .some((id) => id.replaceAll('\\', '/').endsWith('/src/led-strip-editor.ts'))); + if (!ledEditor) throw new Error('LED strip editor chunk was not emitted'); const namespaceLocales = NAMESPACE_LOCALE_CHUNKS.map((entry) => { const chunk = chunks.find((candidate) => Object.keys(candidate.modules) .some((id) => id.replaceAll('\\', '/').endsWith(entry.module))); @@ -320,6 +331,7 @@ export function editorRuntimeRetryUrlPlugin() { let moonReplacements = 0; let ledReplacements = 0; let ledFieldReplacements = 0; + let ledEditorReplacements = 0; for (const chunk of chunks) { if (chunk.code.includes(EDITOR_RETRY_ASSET_TOKEN)) { let asset = posix.relative(posix.dirname(chunk.fileName), editor.fileName); @@ -375,6 +387,12 @@ export function editorRuntimeRetryUrlPlugin() { ledReplacements += chunk.code.split(LED_RETRY_ASSET_TOKEN).length - 1; chunk.code = chunk.code.replaceAll(LED_RETRY_ASSET_TOKEN, asset); } + if (chunk.code.includes(LED_EDITOR_RETRY_ASSET_TOKEN)) { + let asset = posix.relative(posix.dirname(chunk.fileName), ledEditor.fileName); + if (!asset.startsWith('.')) asset = `./${asset}`; + ledEditorReplacements += chunk.code.split(LED_EDITOR_RETRY_ASSET_TOKEN).length - 1; + chunk.code = chunk.code.replaceAll(LED_EDITOR_RETRY_ASSET_TOKEN, asset); + } if (chunk.code.includes(LED_FIELD_RETRY_ASSET_TOKEN)) { let asset = posix.relative(posix.dirname(chunk.fileName), ledField.fileName); if (!asset.startsWith('.')) asset = `./${asset}`; @@ -392,9 +410,9 @@ export function editorRuntimeRetryUrlPlugin() { if (editorReplacements !== 1 || onboardingReplacements !== 1 || isometricReplacements !== 1 || germanReplacements !== 1 || frenchReplacements !== 1 || furnitureArtReplacements !== 1 || pdfReplacements !== 1 || moonReplacements !== 1 || ledReplacements !== 1 - || ledFieldReplacements !== 1) { + || ledFieldReplacements !== 1 || ledEditorReplacements !== 1) { throw new Error('lazy retry URL placeholder counts are ' - + `${editorReplacements}/${onboardingReplacements}/${isometricReplacements}/${germanReplacements}/${frenchReplacements}/${furnitureArtReplacements}/${pdfReplacements}/${moonReplacements}/${ledReplacements}/${ledFieldReplacements}, expected 1/1/1/1/1/1/1/1/1/1`); + + `${editorReplacements}/${onboardingReplacements}/${isometricReplacements}/${germanReplacements}/${frenchReplacements}/${furnitureArtReplacements}/${pdfReplacements}/${moonReplacements}/${ledReplacements}/${ledFieldReplacements}/${ledEditorReplacements}, expected 1/1/1/1/1/1/1/1/1/1/1`); } // #627: the same strict rule for every namespace × language token — // exactly one second-attempt URL each, never zero and never two. diff --git a/scripts/mutation-registry.mjs b/scripts/mutation-registry.mjs index 458cae08..f88e07f4 100644 --- a/scripts/mutation-registry.mjs +++ b/scripts/mutation-registry.mjs @@ -6084,9 +6084,9 @@ const MUTANT_DEFINITIONS = [ patches: [{ file: 'custom_components/houseplan/validation.py', find: ' extra=vol.ALLOW_EXTRA, # unknown (legacy) keys do not break loading\n' - + ' ),\n canonicalize_config_geometry,\n _config_wall_segment_invariants,\n)', + + ' ),\n canonicalize_config_geometry,\n _config_wall_segment_invariants,\n', replace: ' extra=vol.ALLOW_EXTRA, # unknown (legacy) keys do not break loading\n' - + ' ),\n lambda value: value,\n _config_wall_segment_invariants,\n)', + + ' ),\n lambda value: value,\n _config_wall_segment_invariants,\n', }], }, { @@ -7387,7 +7387,7 @@ const MUTANT_DEFINITIONS = [ find: ' ${passageGlowTunnels}\n' + ' ${decorImages}\n' + ' ${stairShapes}\n' - + ' ${glowPools}\n ${wallUnion', + + ' ${glowPools}\n ${leds.size', replace: ' ${passageGlowTunnels}\n' + ' ${!space.bg && !disp.showNames ? svg`${space.rooms.map((room) => {\n' + ' const center = roomCenter(room);\n' @@ -7397,7 +7397,7 @@ const MUTANT_DEFINITIONS = [ + ' ${decorImages}\n' + ' ${stairShapes}\n' + ' ${glowPools}\n' - + ' ${wallUnion', + + ' ${leds.size', }], }, { @@ -13741,8 +13741,9 @@ const MUTANT_DEFINITIONS = [ + 'Перевёрнутое условие закрывает «грязный» диалог молча и спрашивает у чистого', patches: [{ file: 'src/editors/marker-dialog.ts', - find: " if (!edit || !dirty) { forgetMarkerBaseline(this.host); this._closeMarkerDialog(); return; }", - replace: " if (!edit || dirty) { forgetMarkerBaseline(this.host); this._closeMarkerDialog(); return; }", + // #780: the guard is the dialog's shared `leave` (close and the LED representation switch). + find: " if (edit && dirty && !await this.host._confirmDanger({", + replace: " if ((!edit || !dirty) && !await this.host._confirmDanger({", }], }, { diff --git a/src/editors/marker-dialog.ts b/src/editors/marker-dialog.ts index 2fcd78fc..9dbbeb3a 100644 --- a/src/editors/marker-dialog.ts +++ b/src/editors/marker-dialog.ts @@ -168,17 +168,21 @@ export function renderMarkerDialog(this: HouseplanEditorRuntime): TemplateResult && (edit ? dirty : true); const saveTitle = problems[0] ? st(problems[0].message) : bindingUnverified && !!d.binding && d.binding !== 'virtual' ? t('marker.ha_registry_limited') : ''; - const requestClose = async (event: Event) => { - if (!edit || !dirty) { forgetMarkerBaseline(this.host); this._closeMarkerDialog(); return; } - const dialog = event.currentTarget as { rejectClose?: () => void } | null; - const discard = await this.host._confirmDanger({ + // #780: the same save/discard guard also runs before a representation change. + const leave = async () => { + if (edit && dirty && !await this.host._confirmDanger({ key: 'discard-marker-dialog', kind: 'warning', title: st('dialog.discard_title'), message: st('dialog.discard_message'), objectName: d.name.trim() || previewDevice?.name || undefined, confirmLabel: st('dialog.discard_confirm'), cancelLabel: st('dialog.discard_keep'), icon: 'mdi:content-save-off-outline', confirmIcon: 'mdi:content-save-off-outline', - }); - if (discard) { forgetMarkerBaseline(this.host); this._closeMarkerDialog(); } else dialog?.rejectClose?.(); + })) return false; + forgetMarkerBaseline(this.host); this._closeMarkerDialog(); + return true; + }; + const requestClose = async (event: Event) => { + const dialog = event.currentTarget as { rejectClose?: () => void } | null; + if (!await leave()) dialog?.rejectClose?.(); }; const reviewFirst = () => { const first = problems[0]; @@ -860,7 +864,7 @@ export function renderMarkerDialog(this: HouseplanEditorRuntime): TemplateResult .badge=${previewDevice ? this.host._spaceModelById(previewDevice.space)?.title ?? '' : this.host._spaceModel()?.title ?? ''} icon="mdi:shape-plus" wide @hp-close=${requestClose}>
- ${basics}${tap}${light}${appearance}${details} + ${basics}${d.devId ? this.host._ledSection(d.devId, leave) : nothing}${tap}${light}${appearance}${details}
diff --git a/src/houseplan-card.ts b/src/houseplan-card.ts index 53d06f46..30f937e0 100755 --- a/src/houseplan-card.ts +++ b/src/houseplan-card.ts @@ -7,6 +7,7 @@ * The icon layout is stored on the server (houseplan/layout/*), fallback — localStorage. */ import { ledAnchor, ledRuntime, ledStripsByMarker } from './led-strip-gate'; +import { ledButton, ledEditorFor, ledHistory, ledSection } from './led-strip-card'; import { LitElement, html, svg, nothing, noChange, TemplateResult, PropertyValues, type PropertyDeclaration } from 'lit'; import { cache as litCache } from 'lit/directives/cache.js'; import { keyed } from 'lit/directives/keyed.js'; @@ -2891,6 +2892,7 @@ export class HouseplanCard extends LitElement { } if (this._mode === 'devices') { if ((undo || redo) && inField) return; + if (this._ledEditor?.key(e, undo)) { e.preventDefault(); return; } if (redo) { e.preventDefault(); this._redoDevicePosition(); @@ -5374,6 +5376,7 @@ export class HouseplanCard extends LitElement { : this._devicePositionHistory.redo(); if (!command) return; const target = direction === 'undo' ? command.before : command.after; + if ('kind' in target) return ledHistory(this as never, direction, command); // #780 if (!this._devicePositionStateValid(target)) { this._devicePositionHistory.clear(); this._showToast(this._t('history.device_stale')); @@ -10461,8 +10464,7 @@ export class HouseplanCard extends LitElement { pruneGlowSources( this._glowRuntimeState, this._glowRuntimeHost, space.id, seenSourceKeys, ); - const ledField = this._ledRt(space)?.renderLedFieldFor(this as never, space, disp.glow) ?? nothing; - if (!spots.length) return svg`${ledField}` as unknown as TemplateResult; + if (!spots.length) return svg`` as unknown as TemplateResult; // Per-room Glow overrides are visual clips only. The transport calculation // above still crosses a disabled room, but no base/pool pixels are painted // there. For the common all-enabled case this extra clip is omitted. @@ -10495,13 +10497,13 @@ export class HouseplanCard extends LitElement { const feather = resolveGlowFeather( this._glowRuntimeState, perUnit, cameraStill, ); - return svg`${renderGlowPools({ + return renderGlowPools({ spots, enabledClip, feather: feather.feather, featherEnabled: feather.enabled, screenBlend: this._glowScreenBlend, - })}${ledField}` as unknown as TemplateResult; + }); } /** #780: the lazy LED chunk when the space shows a strip (ТЗ §13.1). */ @@ -10509,6 +10511,12 @@ export class HouseplanCard extends LitElement { return ledStripsByMarker(space).size ? ledRuntime(space.id, () => this.requestUpdate()) : null; } + /** #780: the Devices-editor LED tool, its own lazy chunk (src/led-strip-card.ts). */ + public _ledEditor: import('./led-strip-editor').LedStripEditor | null = null; + private _ledEd(entry: string) { return ledEditorFor(this as never, entry); } + public _ledButton() { return ledButton(this as never); } + public _ledSection(devId: string, leave: () => Promise) { return ledSection(this as never, devId, leave); } + private _renderSettingsDialog(): TemplateResult { return this._editorRuntimeOrThrow()._renderSettingsDialog(); } @@ -10907,6 +10915,7 @@ export class HouseplanCard extends LitElement { ${renderDayCycleEnvironment(dayCycle, dayCycleWeight, moonLayer(this, this._sunGlobal(), dayCycle))} ${moonLayer(this, this._sunGlobal(), this._moonSkyState(), dayCycleWeight)} ${this._editorRuntime ? this._renderEditorSecondary() : nothing} + ${this._ledEditor?.chrome() ?? nothing}
@@ -11102,6 +11111,7 @@ export class HouseplanCard extends LitElement { ${this._mode === 'plan' && this._editorRuntime ? this._editorRuntime.stairs.renderLayer() : this._stairsView.renderLayer()} ${glowLayerVisible ? this._renderGlowLayer(space, disp, view) : nothing} + ${glowLayerVisible ? this._ledRt(space)?.renderLedFieldFor(this as never, space, disp.glow) : nothing} ${this._renderSunRays(space)} ${this._editing ? svg`${this._renderAlignGuides()}` : nothing} @@ -11148,6 +11158,8 @@ export class HouseplanCard extends LitElement { ? nothing : this._renderOpenings(disp)} ${this._ledRt(space)?.renderLedLayerFor(this as never, space, disp.glow, view) ?? nothing} + ${this._mode === 'devices' && (this._ledEditor || space.led_strips?.some((s) => s.active !== false)) + ? this._ledEd(space.id)?.layer(space) : nothing} ${this._renderWallThickUi()} ${this._markup && this._tool === 'resize' ? this._renderResizeLayer(view) : nothing} ${''/* editor chrome, not plan content: the backdrop frame sits on diff --git a/src/houseplan-editor-runtime.ts b/src/houseplan-editor-runtime.ts index 976eaf69..1b478821 100644 --- a/src/houseplan-editor-runtime.ts +++ b/src/houseplan-editor-runtime.ts @@ -437,6 +437,10 @@ interface DeviceInboxDialogState { } export interface HouseplanEditorHostPort { + /** #780: the LED tool lives in its own lazy chunk; the card owns its loader. */ + _ledEditor: import('./led-strip-editor').LedStripEditor | null; + _ledButton(): TemplateResult; + _ledSection(devId: string, leave: () => Promise): TemplateResult | typeof nothing; _setMode(mode: 'view' | 'plan' | 'devices' | 'decor', animate?: boolean, warm?: boolean): void; _ackNewDevice: (id: string) => void; _activeWallChainId: string | null; @@ -938,7 +942,7 @@ public warmRoomDraft() { } public _setMode(mode: 'view' | 'plan' | 'devices' | 'decor', animate = true): void { - if (mode !== this.host._mode) this.host._cancelDangerConfirm(); + if (mode !== this.host._mode) { this.host._cancelDangerConfirm(); this.host._ledEditor?.reset(); } this.host._endTabDrag(); this._clearFurniturePreview(); // A mode command is newer than the editor remembered by a same-route warm @@ -2243,6 +2247,7 @@ public _canAppendWallPoint(): boolean { public _markupClick(ev: MouseEvent): void { if (this.host._vacFit) return; // the fit overlay owns all pointer input + if (this.host._mode === 'devices') this.host._ledEditor?.backgroundClick(ev); if (!this.host._markup) return; const space = this.host._spaceModel(); if (!space) { @@ -5089,7 +5094,7 @@ public _renderEditorSecondary(): TemplateResult | typeof nothing { const model = group ? this._renderEditorGroupModel(group) : this.host._mode === 'plan' ? this._renderPlanSecondary() : this.host._mode === 'decor' ? this._withBackdropReset(this._renderDecorSecondary()) - : null; + : this.host._ledEditor?.secondary() ?? null; return this.host._editorSecondary.render(model, this.host._editorSecondaryDialogBlocked); } @@ -7577,6 +7582,7 @@ public async _saveMarker(): Promise { if (!targetSpaceModel) return; const targetSpaceId = targetSpaceModel.id; if (dlg.binding === 'virtual' && !space) space = targetSpaceId; + if (this.host._ledEditor?.markerMoveBlocked(oldId, space || targetSpaceId)) return; // #780 §5 let radarField: Pick | Record = {}; if (dlg.radarTouched) { if (dlg.radarRemove) { @@ -7694,6 +7700,7 @@ public async _saveMarker(): Promise { && (marker.binding === 'virtual' || m.binding !== marker.binding), ); candidate.markers.push(marker); + this.host._ledEditor?.linkMarker(candidate, oldId, id); const obsoleteAreaSnapshotIds = new Set(replacedRemovedIds); if (oldId && oldId !== id) obsoleteAreaSnapshotIds.add(oldId); obsoleteAreaSnapshotIds.delete(id); @@ -7838,6 +7845,7 @@ public async _deleteMarker(): Promise { ); cfg.markers = removeMarkerControlReferences(deletion.markers, deletion.cleanupIds); const cleanupIds = deletion.cleanupIds; + this.host._ledEditor?.unlinkMarkers(cfg, cleanupIds); if (cleanupIds.size && cfg.settings?.marker_area_snapshot) { cfg.settings = { ...cfg.settings, @@ -11234,6 +11242,7 @@ public _renderDevicesBar(): TemplateResult { title=${this.host._t('title.add_device')}> ${this.host._t('devbar.add')} + ${this.host._ledButton()} `; +} + +/** + * The device dialog's "icon ↔ LED strip" section — in the Devices editor + * only (ТЗ §5). A strip's dialog elsewhere still loads the tool: its save + * renames the link on a rebinding. + */ +export function ledSection( + card: LedCardPort, devId: string, leave: () => Promise, +): TemplateResult | typeof nothing { + const devices = card._mode === 'devices'; + if (!devices && !card._serverCfg?.spaces.some((space: { led_strips?: Array<{ marker: string | null }> }) => + space.led_strips?.some((strip) => strip.marker === devId))) return nothing; + const led = ledEditorFor(card, 'dialog'); + return devices ? led?.markerSection(devId, leave) ?? nothing : nothing; +} + +/** Undo/Redo of an LED command (ТЗ §4 п.9): its own strip record, never a newer foreign change. */ +export async function ledHistory( + card: LedCardPort, direction: 'undo' | 'redo', + command: { name: string; before: unknown; after: unknown }, +): Promise { + const [target, from] = (direction === 'undo' ? [command.before, command.after] : [command.after, command.before]) as LedHistoryState[]; + card._devicePositionBusy = true; + const result = card._ledEditor ? await card._ledEditor.applyHistory(target, from) : 'stale'; + card._devicePositionBusy = false; + if (result === 'failed') { + if (direction === 'undo') card._devicePositionHistory.redo(); else card._devicePositionHistory.undo(); + } else { + if (result === 'stale') card._devicePositionHistory.clear(); + card._showToast(card._t(result === 'stale' ? 'history.device_stale' + : direction === 'undo' ? 'history.undone' : 'history.redone', { name: command.name })); + } + card.requestUpdate(); +} diff --git a/src/led-strip-editor.ts b/src/led-strip-editor.ts new file mode 100755 index 00000000..0c6af7fa --- /dev/null +++ b/src/led-strip-editor.ts @@ -0,0 +1,815 @@ +/** + * The LED strip tool of the Devices editor (#780, ТЗ §4, §5) — its own lazy + * chunk, loaded by the editor runtime only on entry into the tool, when the + * shown space has an editable strip, or for the device dialog's + * representation section (ТЗ §13.1). Nothing here reaches the initial View + * graph or the editor runtime graph. + * + * Owns: drawing a chain (clean clicks only — pan, pinch, a second finger, + * cancel or a synthetic click never add a point), the selection of one strip + * with its vertex handles and its tray, the device picker, the + * "icon ↔ LED strip" switch and the LED commands of the device history. + * Writes go through the editor's optimistic transaction + * (`_prepareConfigCandidate` → `beginOptimistic` → `_saveConfigNow`): a failed + * write rolls back, a conflict follows the shared policy. + * + * Stored points are normalised (render units / NORM_W), like the layout. + */ +import { html, nothing, svg, type TemplateResult } from 'lit'; +import { NORM_W } from './space-geometry'; +import { roomPoly } from './logic'; +import { + geometryAllRings, physicalBodyParts, pointInPhysicalGeometry, +} from './physical-geometry'; +import { wallBodiesGeometry } from './wall-thickness'; +import { + LED_MAX_POINTS, LED_MAX_STRIPS, clampToBodies, clampVertexMove, compactPoints, + isClosedStrip, pathD, validStripPoints, type PlacementBodies, type Pt, +} from './led-strip-geometry'; +import { LED_LANGUAGE_RUNTIME, ledT, type LedI18nKey } from './i18n/led'; +import { langOf } from './i18n'; +import type { DevItem, LedStripModel, Marker, OpeningCfg, ServerConfig, SpaceModel } from './types'; +import type { EditorSecondaryModel } from './editor-secondary'; +import type { OptimisticAttempt } from './serialized-write-queue'; + +export const LED_EDITOR_FINGERPRINT = '__HOUSEPLAN_SOURCE_FINGERPRINT__'; + +/** The LED command of the device history: one strip record before/after (ТЗ §4 п.9). */ +export interface LedHistoryState { + kind: 'led'; + spaceId: string; + stripId: string; + strip: LedStripModel | null; +} + +type Opening = OpeningCfg & { rx: number; ry: number; rlen: number }; + +/** What the tool reads from the card (structurally; the card is passed in). */ +export interface LedEditorHost { + hass: { states: Record } & Record; + _config?: { language?: string } | null; + _serverCfg: ServerConfig | null; + _curSpaceCfg: { walls?: unknown } | null | undefined; + _space: string; + _mode: string; + _devices: DevItem[]; + _suppressClick: boolean; + _markerDialog: { devId?: string } | null; + _editorRuntime: LedEditorRuntime | null; + _cellCm: number; + _gridPitch: number; + _wallKeyPitch: number; + _spaceWalls: unknown[]; + _openingsR: Opening[]; + _devicePositionHistory: { push(command: { name: string; before: unknown; after: unknown }): void }; + _adoption: { + beginOptimistic(base: ServerConfig, candidate: ServerConfig): OptimisticAttempt; + stageLocalConfig(config: ServerConfig): void; + }; + _saveConfigDebounced: { pending(): boolean; cancel(): void }; + _regSignature: string; + _spaceModel(): SpaceModel | undefined; + _floorKey(spaceId: string): string; + _screenToVb(sx: number, sy: number): number[]; + _openCuts(): number[][]; + _roomWallOpeningInputs(openings: Opening[], space: SpaceModel): Array<{ x: number; y: number; angle: number; length: number }>; + _partitionOpeningCuts(space: SpaceModel, accept: (opening: OpeningCfg) => boolean): unknown[]; + _rollbackOptimistic(attempt: OptimisticAttempt): boolean; + _maybeRebuildDevices(): void; + _showToast(message: string): void; + _errText(error: unknown): string; + requestUpdate(): void; +} + +/** The editor runtime methods the tool calls. */ +export interface LedEditorRuntime { + _svgPoint(ev: MouseEvent): number[]; + _snap(p: number[]): number[]; + _prepareConfigCandidate(config: ServerConfig): ServerConfig; + _saveConfigNow(attempt?: OptimisticAttempt | null): Promise; + _openMarkerDialog(d?: DevItem): void; +} + +type Strips = { id: string; led_strips?: LedStripModel[] }; + +const CLICK_SLOP_PX = 6; +const MAGNET_PX = 12; +const HANDLE_PX = 7; +const HIT_PX = 22; + +const scaleOut = (p: Pt): [number, number] => [p[0] / NORM_W, p[1] / NORM_W]; +const scaleIn = (p: readonly number[]): Pt => [p[0] * NORM_W, p[1] * NORM_W]; +const clone = (value: T): T => JSON.parse(JSON.stringify(value)) as T; +const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b); + +function spacesOf(cfg: ServerConfig | null | undefined): Strips[] { + return (cfg?.spaces || []) as Strips[]; +} + +function stripsOf(cfg: ServerConfig | null | undefined, spaceId: string): LedStripModel[] { + return spacesOf(cfg).find((space) => space.id === spaceId)?.led_strips || []; +} + +/** The strip (any space) that holds this marker, active or hidden. */ +function ownerOf(cfg: ServerConfig | null | undefined, markerId: string) { + for (const space of spacesOf(cfg)) { + const strip = space.led_strips?.find((item) => item.marker === markerId); + if (strip) return { spaceId: space.id, strip }; + } + return null; +} + +function snap45(from: Pt, to: Pt): Pt { + const dx = to[0] - from[0], dy = to[1] - from[1]; + const len = Math.hypot(dx, dy); + if (!len) return to; + const angle = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4); + return [from[0] + Math.cos(angle) * len, from[1] + Math.sin(angle) * len]; +} + +function nearestOnSegment(p: Pt, a: Pt, b: Pt): Pt { + const dx = b[0] - a[0], dy = b[1] - a[1]; + const len2 = dx * dx + dy * dy; + const t = len2 ? Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / len2)) : 0; + return [a[0] + t * dx, a[1] + t * dy]; +} + +export class LedStripEditor { + /** The tool is armed: clean clicks add points. */ + tool = false; + chain: { points: Pt[]; convert: string | null } | null = null; + hover: Pt | null = null; + stopped = false; + sel: string | null = null; + picker: string | null = null; + /** A strip waiting for "New device…" (bound in that dialog's write). */ + pendingBind: { stripId: string; spaceId: string } | null = null; + private drag: { id: string; index: number; pointerId: number; points: Pt[]; moved: boolean } | null = null; + private down = new Map(); + private gesture = false; + private busy = false; + private spaceId = ''; + private bodyCache: { key: string; bodies: PlacementBodies; guides: Pt[][] } | null = null; + + constructor(private readonly host: LedEditorHost) { + void LED_LANGUAGE_RUNTIME.ensure(this.lang).then(() => host.requestUpdate()); + } + + /** The live editor runtime (it may be remounted under the same card). */ + private get rt(): LedEditorRuntime { + return this.host._editorRuntime!; + } + + private get lang() { + return langOf(this.host.hass, this.host._config?.language); + } + + t(key: LedI18nKey, vars?: Record): string { + return ledT(this.lang, key, vars); + } + + /** Screen px per render unit at the current zoom. */ + private get perUnit(): number { + const a = this.host._screenToVb(0, 0), b = this.host._screenToVb(100, 0); + const units = Math.hypot(b[0] - a[0], b[1] - a[1]); + return units > 0 ? 100 / units : 1; + } + + // ------------------------------------------------------------------------- + // Placement bodies (ТЗ §6): masonry, partitions and columns with doors, + // gates and passages cut by geometry — windows stay solid; zero walls are + // no bodies (their axes are magnet guides only). + + private placement(): { bodies: PlacementBodies; guides: Pt[][] } { + const host = this.host; + const space = host._spaceModel(); + if (!space) return { bodies: { rings: [], inside: () => false }, guides: [] }; + const key = `${host._floorKey(space.id)}|${host._cellCm}|${host._gridPitch}`; + if (this.bodyCache?.key === key) return this.bodyCache; + const passes = (o: OpeningCfg) => o.type !== 'window'; + let geoms: unknown[] = []; + try { + const extras = physicalBodyParts(space, host._cellCm, host._gridPitch, host._gridPitch * 0.0002, + host._partitionOpeningCuts(space, passes) as never).all; + const united = wallBodiesGeometry(space.rooms, host._spaceWalls as never, host._openCuts(), + host._roomWallOpeningInputs(host._openingsR.filter(passes), space), + host._wallKeyPitch, host._cellCm, host._gridPitch, NORM_W, extras); + geoms = [united.geom, ...united.components.map((c) => c.geom)]; + } catch { + geoms = []; // fail-open for placement only: light keeps its own barriers + } + const rings = geoms.flatMap((geom) => geometryAllRings(geom)).map((ring) => ring.map((p) => [p[0], p[1]] as Pt)); + const eps = host._gridPitch * 1e-4; + const nearFace = (p: Pt) => rings.some((ring) => ring.some((a, i) => { + const q = nearestOnSegment(p, a, ring[(i + 1) % ring.length]); + return Math.hypot(p[0] - q[0], p[1] - q[1]) <= eps; + })); + // Strict interior: a point on a face is outside, so touching and sliding along work. + const inside = (p: Pt) => geoms.some((geom) => pointInPhysicalGeometry([p[0], p[1]], geom)) && !nearFace(p); + const guides = space.rooms.flatMap((room) => { + const poly = roomPoly(room); + return poly ? [poly.map((p) => [p[0], p[1]] as Pt)] : []; + }); + this.bodyCache = { key, bodies: { rings, inside }, guides }; + return this.bodyCache; + } + + /** Grid snap or Shift 45°, then the face/axis magnet within MAGNET_PX on screen. */ + private snapPoint(raw: Pt, shift: boolean, from: Pt | null): Pt { + const { bodies, guides } = this.placement(); + let p: Pt = from && shift ? snap45(from, raw) : (this.rt._snap([raw[0], raw[1]]) as unknown as Pt); + let best = MAGNET_PX / this.perUnit; + for (const ring of [...bodies.rings, ...guides]) { + for (let i = 0; i < ring.length; i++) { + const q = nearestOnSegment(raw, ring[i], ring[(i + 1) % ring.length]); + const d = Math.hypot(raw[0] - q[0], raw[1] - q[1]); + if (d < best) { best = d; p = q; } + } + } + return p; + } + + // ------------------------------------------------------------------------- + // Tool lifecycle + + open(convert: string | null = null): void { + const space = this.host._spaceModel(); + if (!space) return; + if (stripsOf(this.host._serverCfg, space.id).length >= LED_MAX_STRIPS) { + this.host._showToast(this.t('led.limit_strips')); + return; + } + this.tool = true; + this.sel = null; + this.picker = null; + this.chain = { points: [], convert }; + this.hover = null; + this.stopped = false; + this.host.requestUpdate(); + } + + /** Leave the tool; an unfinished correct chain is finished, never lost (ТЗ §4 п.3). */ + close(): void { + const pending = this.chain?.points.length ? this.finish() : null; + this.tool = false; + this.chain = null; + this.hover = null; + this.down.clear(); + if (!pending) this.host.requestUpdate(); + } + + /** Mode, space or editor change: drop session-only state (ТЗ §4 п.8). */ + reset(): void { + if (this.tool) this.close(); + this.sel = null; + this.drag = null; + this.picker = null; + } + + /** + * Keys of the Devices editor, after dialogs (ТЗ §4 п.3, п.8, п.9). Returns + * true when the key was the tool's: Ctrl+Z of a chain removes its own point + * first, Esc finishes a chain, then leaves the tool, then drops the selection. + */ + key(e: KeyboardEvent, undo: boolean): boolean { + if (undo) { + if (!this.chain?.points.length) return false; + this.chain.points.pop(); + this.stopped = false; + this.host.requestUpdate(); + return true; + } + if (e.key !== 'Escape') return false; + if (this.picker) { this.picker = null; this.host.requestUpdate(); return true; } + if (this.drag) { this.drag = null; this.host.requestUpdate(); return true; } + if (this.chain?.points.length) { void this.finish(); return true; } + if (this.tool) { this.close(); return true; } + if (this.sel) { this.select(null); return true; } + return false; + } + + select(id: string | null): void { + this.sel = id; + this.host.requestUpdate(); + } + + /** A clean click on the free background drops the selection (ТЗ §4 п.8). */ + backgroundClick(ev: MouseEvent): void { + if (!this.sel || this.tool || this.host._suppressClick) return; + const path = (ev.composedPath?.() || []) as Element[]; + // Only the plan itself is background: not the tray, a dialog, a strip or a handle. + if (!path.some((node) => node?.classList?.contains?.('zoomwrap')) + || path.some((node) => node?.hasAttribute?.('data-led-select') || node?.hasAttribute?.('data-led-handle'))) return; + this.select(null); + } + + // ------------------------------------------------------------------------- + // Drawing input: one owner per sequence; only a clean click adds a point. + + private onDown(e: PointerEvent): void { + this.down.set(e.pointerId, { x: e.clientX, y: e.clientY }); + if (this.down.size > 1) this.gesture = true; + } + + private onMove(e: PointerEvent): void { + const start = this.down.get(e.pointerId); + if (start && Math.hypot(e.clientX - start.x, e.clientY - start.y) > CLICK_SLOP_PX) this.gesture = true; + if (!this.tool || (this.down.size && e.pointerType !== 'mouse')) return; + const last = this.chain?.points[this.chain.points.length - 1] || null; + let p = this.snapPoint(this.rawPoint(e), e.shiftKey, last); + this.stopped = false; + if (last) { + const hit = clampToBodies(last, p, this.placement().bodies); + if (hit) { p = hit.point; this.stopped = hit.stopped; } + } + this.hover = p; + this.host.requestUpdate(); + } + + private onUp(e: PointerEvent): void { + const start = this.down.get(e.pointerId); + this.down.delete(e.pointerId); + const clean = !!start && !this.gesture && e.button === 0 && !this.host._suppressClick + && Math.hypot(e.clientX - start.x, e.clientY - start.y) <= CLICK_SLOP_PX; + if (!this.down.size) this.gesture = false; + if (clean && this.tool) this.addPoint(e); + } + + private onCancel(e: PointerEvent): void { + this.down.delete(e.pointerId); + this.gesture = this.down.size > 0; + } + + private rawPoint(e: MouseEvent): Pt { + const p = this.rt._svgPoint(e); + return [p[0], p[1]]; + } + + private addPoint(e: PointerEvent): void { + if (this.busy) return; + const { bodies } = this.placement(); + const chain = this.chain || (this.chain = { points: [], convert: null }); + const last = chain.points[chain.points.length - 1] || null; + let p = this.snapPoint(this.rawPoint(e), e.shiftKey, last); + if (!last) { + if (bodies.inside(p)) { this.host._showToast(this.t('led.stopped')); return; } // a start inside a body + } else { + const near = (q: Pt) => Math.hypot(p[0] - q[0], p[1] - q[1]) * this.perUnit <= HANDLE_PX * 1.5; + // A click on the first point closes a chain of ≥ 3 distinct vertices. + const first = chain.points[0]; + if (compactPoints(chain.points).length >= 3 && near(first)) { + const back = clampToBodies(last, first, bodies); + if (back && !back.stopped) { + chain.points.push([first[0], first[1]]); + void this.finish(); + return; + } + } + // A double click on the last point finishes; a repeat click writes no zero segment. + if (near(last)) { + if (e.detail >= 2 && chain.points.length >= 2) void this.finish(); + return; + } + const hit = clampToBodies(last, p, bodies); + if (!hit) return; + if (hit.stopped) this.host._showToast(this.t('led.stopped')); + p = hit.point; + if (Math.hypot(p[0] - last[0], p[1] - last[1]) * this.perUnit < 0.5) return; + } + if (chain.points.length >= LED_MAX_POINTS) { + this.host._showToast(this.t('led.limit_points')); + return; + } + chain.points.push(p); + this.stopped = false; + this.host.requestUpdate(); + } + + /** Esc, a double click, a click on the first point, a tool or editor change. */ + async finish(): Promise { + const chain = this.chain; + const space = this.host._spaceModel(); + this.chain = null; + this.hover = null; + if (this.tool && chain?.convert) this.tool = false; + if (!chain || !space) { this.host.requestUpdate(); return; } + const stored = compactPoints(chain.points).map(scaleOut); + if (!validStripPoints(stored)) { + // Fewer than two distinct points: nothing is written, nothing converted. + if (this.tool) this.chain = { points: [], convert: null }; + this.host.requestUpdate(); + return; + } + const id = `led_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`; + const strip: LedStripModel = chain.convert + ? { id, points: stored, marker: chain.convert, active: true } + : { id, points: stored, marker: null }; + const ok = await this.write(this.t(chain.convert ? 'led.history_view' : 'led.history_draw'), + space.id, id, () => strip); + if (ok) { + this.tool = false; + this.sel = id; + if (!chain.convert) this.picker = id; // bind now, or "Later" + } + this.host.requestUpdate(); + } + + // ------------------------------------------------------------------------- + // One transaction per command (ТЗ §4 п.9, §5): the strip record and, for a + // link, the marker's explicit space — atomically, with rollback. + + private async write( + name: string, spaceId: string, stripId: string, + next: (current: LedStripModel | null) => LedStripModel | null, record = true, + ): Promise { + const cfg = this.host._serverCfg; + if (!cfg || this.busy) return false; + let candidate = clone(cfg); + const space = spacesOf(candidate).find((item) => item.id === spaceId); + if (!space) return false; + const strips = [...(space.led_strips || [])]; + const index = strips.findIndex((item) => item.id === stripId); + const before = index >= 0 ? clone(strips[index]) : null; + const after = next(before ? clone(before) : null); + if (same(before, after)) return true; // a no-op is no command + if (after && !before && strips.length >= LED_MAX_STRIPS) { + this.host._showToast(this.t('led.limit_strips')); + return false; + } + if (after && index >= 0) strips[index] = after; + else if (after) strips.push(after); + else strips.splice(index, 1); + space.led_strips = strips; + const markerId = after?.marker; + if (markerId) { + // ТЗ §5: the link creates or reuses the live marker and writes its explicit space. + let marker = candidate.markers?.find((item) => item.id === markerId && !item.removed); + const dev = this.device(markerId); + if (!marker && dev?.bindingKind) { + const binding = dev.bindingKind === 'virtual' ? 'virtual' : `${dev.bindingKind}:${dev.bindingRef}`; + candidate.markers = (candidate.markers || []).filter((item) => item.id !== markerId + && (binding === 'virtual' || item.binding !== binding)); + candidate.markers.push(marker = { id: markerId, binding } as Marker); + } + if (marker && !marker.space) marker.space = spaceId; + } + candidate = this.rt._prepareConfigCandidate(candidate); + const attempt = this.host._adoption.beginOptimistic(cfg, candidate); + this.host._adoption.stageLocalConfig(candidate); + if (this.host._saveConfigDebounced.pending()) this.host._saveConfigDebounced.cancel(); + this.host._regSignature = ''; + this.host._maybeRebuildDevices(); + this.busy = true; + this.host.requestUpdate(); + try { + await this.rt._saveConfigNow(attempt); + if (record) { + this.host._devicePositionHistory.push({ + name, + before: { kind: 'led', spaceId, stripId, strip: before } satisfies LedHistoryState, + after: { kind: 'led', spaceId, stripId, strip: after } satisfies LedHistoryState, + }); + } + return true; + } catch (error) { + this.host._rollbackOptimistic(attempt); + this.host._regSignature = ''; + this.host._maybeRebuildDevices(); + this.host._showToast(this.t('led.save_failed', { err: this.host._errText(error) })); + return false; + } finally { + this.busy = false; + this.host.requestUpdate(); + } + } + + /** + * Undo/Redo of an LED command: restore only this strip's record, and only + * while the current record is still the one the command left — a newer + * change by someone else is never rolled back (ТЗ §4 п.9). + */ + async applyHistory(target: LedHistoryState, from: LedHistoryState): Promise<'ok' | 'stale' | 'failed'> { + const current = stripsOf(this.host._serverCfg, target.spaceId).find((item) => item.id === target.stripId) || null; + if (!same(current, from.strip)) return 'stale'; + const marker = target.strip?.marker; + if (marker && ownerOf(this.host._serverCfg, marker)?.strip.id !== target.stripId + && ownerOf(this.host._serverCfg, marker)) return 'stale'; + const ok = await this.write('', target.spaceId, target.stripId, () => clone(target.strip), false); + if (ok && this.sel === target.stripId && target.strip?.active === false) this.sel = null; + return ok ? 'ok' : 'failed'; + } + + // ------------------------------------------------------------------------- + // Actions of the tray, the picker and the device dialog + + private device(markerId: string | null | undefined): DevItem | undefined { + return markerId ? this.host._devices.find((item) => item.id === markerId) : undefined; + } + + async bind(stripId: string, markerId: string | null, spaceId = this.host._space): Promise { + const owner = markerId ? ownerOf(this.host._serverCfg, markerId) : null; + if (owner && owner.strip.id !== stripId) { this.host._showToast(this.t('led.taken')); return; } + const ok = await this.write(this.t('led.history_view'), spaceId, stripId, + (strip) => (strip ? { ...strip, marker: markerId, ...(strip.active === false ? { active: true } : {}) } : null)); + if (ok) this.picker = null; + } + + async setActive(stripId: string, active: boolean, spaceId = this.host._space): Promise { + const ok = await this.write(this.t('led.history_view'), spaceId, stripId, + (strip) => (strip ? { ...strip, active } : null)); + if (ok && !active && this.sel === stripId) this.select(null); + } + + async remove(stripId: string, spaceId = this.host._space): Promise { + const ok = await this.write(this.t('led.delete'), spaceId, stripId, () => null); + if (ok && this.sel === stripId) this.select(null); + } + + /** "New device…": the marker dialog's save binds the strip in its own write. */ + private newDevice(stripId: string): void { + this.pendingBind = { stripId, spaceId: this.host._space }; + this.picker = null; + this.rt._openMarkerDialog(); + } + + /** + * ТЗ §5: a strip belongs to its space — the marker dialog may not move a + * bound marker (even with a hidden shape) to another space; unbind first. + */ + markerMoveBlocked(markerId: string | undefined, targetSpaceId: string): boolean { + const owner = markerId ? ownerOf(this.host._serverCfg, markerId) : null; + if (!owner || owner.spaceId === targetSpaceId) return false; + this.host._showToast(this.t('led.space')); + return true; + } + + /** + * The marker dialog's save, on its candidate — one transaction (ТЗ §5): a + * rebinding renames the strip link, "New device…" binds its pending strip. + */ + linkMarker(candidate: ServerConfig, oldId: string | undefined, id: string): void { + for (const space of spacesOf(candidate)) { + for (const strip of space.led_strips || []) if (oldId && oldId !== id && strip.marker === oldId) strip.marker = id; + } + this.bindPending(candidate, id); + } + + /** A deleted marker leaves an unbound, visible strip in the same write (ТЗ §5). */ + unlinkMarkers(cfg: ServerConfig, removed: ReadonlySet): void { + for (const space of spacesOf(cfg)) { + for (const strip of space.led_strips || []) { + if (strip.marker && removed.has(strip.marker)) Object.assign(strip, { marker: null, active: true }); + } + } + } + + private bindPending(candidate: ServerConfig, id: string): void { + const pending = this.pendingBind; + this.pendingBind = null; + const strip = pending && spacesOf(candidate).find((space) => space.id === pending.spaceId) + ?.led_strips?.find((item) => item.id === pending.stripId); + if (!pending || !strip || ownerOf(candidate, id)) return; + strip.marker = id; + strip.active = true; + const marker = candidate.markers?.find((item) => item.id === id); + if (marker && !marker.space) marker.space = pending.spaceId; + } + + // ------------------------------------------------------------------------- + // Rendering + + /** The SVG layer of the Devices editor: unbound strips, hit paths, handles, the chain. */ + layer(space: SpaceModel): TemplateResult | typeof nothing { + if (space.id !== this.spaceId) { + const changed = !!this.spaceId; + this.spaceId = space.id; + this.bodyCache = null; + if (changed) queueMicrotask(() => this.reset()); + } + const per = this.perUnit; + const strips = stripsOf(this.host._serverCfg, space.id) + .filter((strip) => strip.active !== false && validStripPoints(strip.points)); + const geometry = (strip: LedStripModel) => { + const points = (this.drag?.id === strip.id ? this.drag.points : strip.points.map(scaleIn)); + return pathD({ points, closed: isClosedStrip(points) }); + }; + const sel = strips.find((strip) => strip.id === this.sel) || null; + const chain = this.chain; + const preview = chain ? [...chain.points, ...(this.hover && this.tool ? [this.hover] : [])] : []; + const accent = 'var(--primary-color, #03a9f4)'; + return svg` + ${strips.filter((strip) => !this.device(strip.marker)).map((strip) => svg``)} + ${sel ? svg`` : nothing} + ${this.tool ? nothing : strips.map((strip) => svg` { + e.stopPropagation(); + if (!this.host._suppressClick) this.select(strip.id); + }}>`)} + ${sel && !this.tool ? this.handles(sel, per) : nothing} + ${preview.length ? svg` + ${chain!.points.map((p, i) => svg``)}` : nothing} + `; + } + + private handles(strip: LedStripModel, per: number): TemplateResult { + const points = this.drag?.id === strip.id ? this.drag.points : strip.points.map(scaleIn); + const count = isClosedStrip(points) ? points.length - 1 : points.length; + return svg`${points.slice(0, count).map((p, index) => svg` this.handleDown(e, strip, index)} + @pointermove=${(e: PointerEvent) => this.handleMove(e)} + @pointerup=${(e: PointerEvent) => void this.handleUp(e)} + @pointercancel=${() => this.handleCancel()} + @lostpointercapture=${() => this.handleCancel()}>`)}` as unknown as TemplateResult; + } + + private handleDown(e: PointerEvent, strip: LedStripModel, index: number): void { + if (e.button !== 0 || this.busy) return; + e.stopPropagation(); + (e.currentTarget as Element).setPointerCapture?.(e.pointerId); + this.drag = { id: strip.id, index, pointerId: e.pointerId, points: strip.points.map(scaleIn), moved: false }; + } + + private handleMove(e: PointerEvent): void { + const drag = this.drag; + if (!drag || drag.pointerId !== e.pointerId) return; + e.stopPropagation(); + const next = clampVertexMove(drag.points, drag.index, + this.snapPoint(this.rawPoint(e), false, null), this.placement().bodies); + const points = [...drag.points]; + const last = points.length - 1; + points[drag.index] = next; + if (isClosedStrip(drag.points) && drag.index === 0) points[last] = next; + drag.points = points; + drag.moved = true; + this.host.requestUpdate(); + } + + private async handleUp(e: PointerEvent): Promise { + const drag = this.drag; + if (!drag || drag.pointerId !== e.pointerId) return; + e.stopPropagation(); + this.drag = null; + const stored = drag.points.map(scaleOut); + if (!drag.moved || !validStripPoints(stored)) { this.host.requestUpdate(); return; } + await this.write(this.t('led.history_shape'), this.host._space, drag.id, + (strip) => (strip ? { ...strip, points: stored } : null)); + } + + private handleCancel(): void { + if (!this.drag) return; + this.drag = null; // a cancelled gesture writes nothing and records nothing + this.host.requestUpdate(); + } + + /** Stage chrome: the capture layer while drawing (icons do not take the input) and the picker. */ + chrome(): TemplateResult | typeof nothing { + const dialog = this.host._markerDialog; + // A closed "New device…" dialog drops its pending link; an icon's dialog + // drops the strip selection (ТЗ §4 п.8), the strip's own settings keep it. + if (!dialog) this.pendingBind = null; + else if (this.sel && !this.pendingBind && dialog.devId !== stripsOf(this.host._serverCfg, this.host._space) + .find((item) => item.id === this.sel)?.marker) this.sel = null; + if (this.host._mode !== 'devices') return nothing; + return html`${this.tool ? html`
this.onDown(e)} + @pointermove=${(e: PointerEvent) => this.onMove(e)} + @pointerup=${(e: PointerEvent) => this.onUp(e)} + @pointercancel=${(e: PointerEvent) => this.onCancel(e)} + @lostpointercapture=${(e: PointerEvent) => this.onCancel(e)} + @pointerleave=${() => { this.hover = null; this.host.requestUpdate(); }} + @click=${(e: MouseEvent) => e.stopPropagation()} + @dblclick=${(e: MouseEvent) => e.stopPropagation()} + @contextmenu=${(e: MouseEvent) => e.preventDefault()}>
` : nothing}${this.pickerDialog()}`; + } + + /** The tray (ТЗ §4 п.7): the drawing operation, or the selected strip. */ + secondary(): EditorSecondaryModel | null { + if (this.host._mode !== 'devices') return null; + if (this.tool) { + const touch = !!window.matchMedia?.('(pointer: coarse)').matches; + const n = this.chain?.points.length || 0; + return { + contextId: 'led-draw', + kind: 'operation', + ariaLabel: this.t('led.tool'), + visibleLabel: this.t('led.tool'), + dismissPolicy: 'stay-open-on-canvas', + dismiss: () => this.close(), + content: html`${n + ? this.t(touch ? 'led.points_touch' : 'led.points', { n }) + : `${this.t(touch ? 'led.start_touch' : 'led.start')}. ${this.t('led.hint')}`} + ${n ? html`` : nothing} + ${this.chain?.convert ? html`` : nothing}`, + }; + } + const strip = stripsOf(this.host._serverCfg, this.host._space) + .find((item) => item.id === this.sel && item.active !== false); + if (!strip) return null; + const device = this.device(strip.marker); + const label = device?.name || this.t('led.unbound'); + const button = (action: string, icon: string, text: string, run: () => void, cls = 'ghost') => + html``; + return { + contextId: `led-${strip.id}`, + kind: 'selection', + ariaLabel: label, + visibleLabel: label, + dismiss: () => this.select(null), + content: html` + ${device ? button('settings', 'mdi:tune', this.t('led.settings'), + () => this.rt._openMarkerDialog(device)) : nothing} + ${button('bind', 'mdi:link-variant', this.t(device ? 'led.change' : 'led.bind'), + () => { this.picker = strip.id; this.host.requestUpdate(); })} + ${strip.marker ? button('unbind', 'mdi:link-variant-off', this.t('led.unbind'), + () => void this.bind(strip.id, null)) : nothing} + ${device ? button('icon', 'mdi:lightbulb-outline', this.t('led.show_icon'), + () => void this.setActive(strip.id, false)) : nothing} + ${button('delete', 'mdi:delete-outline', this.t('led.delete'), () => void this.remove(strip.id), 'danger')}`, + }; + } + + /** The device picker: devices of this space, lights first; taken ones explained, or a new one. */ + private pickerDialog(): TemplateResult | typeof nothing { + const stripId = this.picker; + if (!stripId) return nothing; + const current = stripsOf(this.host._serverCfg, this.host._space).find((item) => item.id === stripId); + if (!current) return nothing; + const isLight = (d: DevItem) => d.entities.some((eid) => eid.startsWith('light.')); + const devices = this.host._devices + .filter((d) => d.space === this.host._space && !d.marker?.removed) + .sort((a, b) => Number(isLight(b)) - Number(isLight(a)) || a.name.localeCompare(b.name)); + const close = () => { this.picker = null; this.host.requestUpdate(); }; + return html` +
+ ${devices.length ? devices.map((d) => { + const owner = ownerOf(this.host._serverCfg, d.id); + const taken = !!owner && owner.strip.id !== stripId; + return html``; + }) : html`
${this.t('led.pick_empty')}
`} +
+
+ + + +
+ `; + } + + /** + * The representation section of the device dialog (ТЗ §5): "Show as LED + * strip" (restoring a hidden shape at once, or drawing one) or "Show as + * icon"; for a hidden shape also unbind/delete. `leave` runs the dialog's + * own save/discard guard and closes it; false keeps the dialog. + */ + markerSection(devId: string, leave: () => Promise): TemplateResult { + const owner = ownerOf(this.host._serverCfg, devId); + const active = !!owner && owner.strip.active !== false; + const then = (action: () => unknown) => async () => { if (await leave()) await action(); }; + const button = (name: string, icon: string, text: string, run: () => unknown, cls = 'ghost') => + html``; + return html`
+ ${active ? html`${this.t('led.type_note')}` : nothing} +
+ ${active + ? button('show-icon', 'mdi:lightbulb-outline', this.t('led.show_icon'), + () => this.setActive(owner.strip.id, false, owner.spaceId)) + : button('show-strip', 'mdi:led-strip-variant', this.t('led.show_strip'), + () => (owner ? this.setActive(owner.strip.id, true, owner.spaceId) : this.open(devId)))} + ${owner && !active ? html` + ${button('unbind', 'mdi:link-variant-off', this.t('led.unbind'), + () => this.bind(owner.strip.id, null, owner.spaceId))} + ${button('delete', 'mdi:delete-outline', this.t('led.delete'), + () => this.remove(owner.strip.id, owner.spaceId), 'danger')}` : nothing} +
+
`; + } +} + +export function createLedStripEditor(host: LedEditorHost): LedStripEditor { + return new LedStripEditor(host); +} diff --git a/src/led-strip-gate.ts b/src/led-strip-gate.ts index a4187c57..b6e9dbe7 100644 --- a/src/led-strip-gate.ts +++ b/src/led-strip-gate.ts @@ -15,11 +15,29 @@ import { ENTRY_BUILD_FINGERPRINT } from './editor-runtime-loader'; import type { LedStripModel, SpaceModel } from './types'; type LedRuntime = typeof import('./led-strip-runtime'); +type LedEditorModule = typeof import('./led-strip-editor'); -let runtime: LedRuntime | null = null; -let loading: Promise | null = null; -/** The entry that failed last (a different one may try again); '' = foreign build. */ -let failed: string | undefined; +/** One page-wide lazy chunk; `failed` is the entry that failed last, '' = a foreign build. */ +interface Slot { module: M | null; loading: Promise | null; failed?: string } + +const runtimeSlot: Slot = { module: null, loading: null }; +const editorSlot: Slot = { module: null, loading: null }; + +function lazy( + slot: Slot, entry: string, ready: () => void, + first: () => Promise, retry: string, fingerprint: (module: M) => string, +): M | null { + if (!slot.module && !slot.loading && slot.failed !== entry && slot.failed !== '') { + slot.loading = (slot.failed === undefined ? first() + : import(/* @vite-ignore */ new URL(`${retry}?${Date.now()}`, import.meta.url).href) as Promise + ).then((module) => { + if (fingerprint(module) === ENTRY_BUILD_FINGERPRINT) slot.module = module; + else slot.failed = ''; + }, () => { slot.failed = entry; }).finally(() => { slot.loading = null; }); + } + if (!slot.module) void slot.loading?.then(() => slot.module && ready()); + return slot.module; +} /** Active, bound strips of a space by marker id. No geometry. */ export function ledStripsByMarker(space: SpaceModel | null | undefined): Map { @@ -47,15 +65,12 @@ export function ledAnchor(points: readonly number[][], scale: number): { x: numb * it lands. `entry` names the explicit entry (space id or the LED tool). */ export function ledRuntime(entry: string, ready: () => void): LedRuntime | null { - if (!runtime && !loading && failed !== entry && failed !== '') { - loading = (failed === undefined - ? import('./led-strip-runtime') - : import(/* @vite-ignore */ new URL(`__HOUSEPLAN_LED_RETRY_ASSET__?${Date.now()}`, import.meta.url).href) as Promise - ).then((module) => { - if (module.LED_RUNTIME_FINGERPRINT === ENTRY_BUILD_FINGERPRINT) runtime = module; - else failed = ''; - }, () => { failed = entry; }).finally(() => { loading = null; }); - } - if (!runtime) void loading?.then(() => runtime && ready()); - return runtime; + return lazy(runtimeSlot, entry, ready, () => import('./led-strip-runtime'), + '__HOUSEPLAN_LED_RETRY_ASSET__', (module) => module.LED_RUNTIME_FINGERPRINT); +} + +/** The Devices-editor LED tool chunk (ТЗ §13.1): only on an explicit entry. */ +export function ledEditorModule(entry: string, ready: () => void): LedEditorModule | null { + return lazy(editorSlot, entry, ready, () => import('./led-strip-editor'), + '__HOUSEPLAN_LED_EDITOR_RETRY_ASSET__', (module) => module.LED_EDITOR_FINGERPRINT); } diff --git a/src/led-strip-runtime.ts b/src/led-strip-runtime.ts index be513d01..79caf784 100755 --- a/src/led-strip-runtime.ts +++ b/src/led-strip-runtime.ts @@ -445,7 +445,7 @@ export function renderLedLayerFor( const theme = deviceThemeClass(host._renderPlanHass) === 'theme-dark' ? 'dark' : 'light'; const lightFloor = !!host._isoLightFloors?.size; const shadow = isoTileShadow(theme, lightFloor); - return renderLedStripes({ + const stripes = renderLedStripes({ views: frame.views, d, iso: iso ? { @@ -474,6 +474,10 @@ export function renderLedLayerFor( label: (d) => d.name, } : null, }); + // ТЗ §4 п.10: Plan/Background show a passive translucent mark, never a target. + return host._mode === 'plan' || host._mode === 'decor' + ? svg`${stripes}` as unknown as TemplateResult + : stripes; } export function renderLedFieldFor(host: LedCardHost, space: SpaceModel, spaceGlow: boolean): TemplateResult { diff --git a/test/bundle-assets.test.mjs b/test/bundle-assets.test.mjs index 6306f732..43e33969 100644 --- a/test/bundle-assets.test.mjs +++ b/test/bundle-assets.test.mjs @@ -299,7 +299,7 @@ test('bundle manifest separates static initial graph from dynamic editor graph', } assert.throws(() => assertBundleBudget({ ...manifest, lazyNamespaceLocaleFiles: manifest.lazyNamespaceLocaleFiles.slice(1), - }, 1_000_000, undefined, ...lazyCeilings), /lazy namespace locale graph has 11 files, expected 12/); + }, 1_000_000, undefined, ...lazyCeilings), /lazy namespace locale graph has 14 files, expected 15/); // #661 AC8: a moon pulled into the first frame (a static import leaves no // lazy moon graph — the builder subtracts initial) is refused by name. assert.throws(() => assertBundleBudget({ ...manifest, lazyMoonFiles: [] }, 1_000_000, undefined, ...lazyCeilings), @@ -540,7 +540,8 @@ test('retry URL points at the content-hashed runtime chunk after naming', () => + 'new URL("__HOUSEPLAN_PDF_RETRY_ASSET__", import.meta.url);' + 'new URL("__HOUSEPLAN_MOON_RETRY_ASSET__", import.meta.url);' + 'new URL("__HOUSEPLAN_LED_RETRY_ASSET__", import.meta.url);' - + 'new URL("__HOUSEPLAN_LED_FIELD_RETRY_ASSET__", import.meta.url)', modules: {}, + + 'new URL("__HOUSEPLAN_LED_FIELD_RETRY_ASSET__", import.meta.url);' + + 'new URL("__HOUSEPLAN_LED_EDITOR_RETRY_ASSET__", import.meta.url)', modules: {}, }, // #627: the lazy namespace chunk that owns the nine second-attempt tokens. 'houseplan-assets/backdrop-pick-HASH.js': { @@ -589,6 +590,11 @@ test('retry URL points at the content-hashed runtime chunk after naming', () => type: 'chunk', fileName: 'houseplan-assets/led-strip-field-HASH.js', code: '', modules: { '/repo/src/led-strip-field.ts': {} }, }, + // #780: the Devices-editor LED tool, loaded only on an explicit entry. + 'houseplan-assets/led-strip-editor-HASH.js': { + type: 'chunk', fileName: 'houseplan-assets/led-strip-editor-HASH.js', code: '', + modules: { '/repo/src/led-strip-editor.ts': {} }, + }, }; plugin.generateBundle({}, bundle); assert.equal( @@ -602,7 +608,8 @@ test('retry URL points at the content-hashed runtime chunk after naming', () => + 'new URL("./pdf-export-HASH.js", import.meta.url);' + 'new URL("./moon-runtime-HASH.js", import.meta.url);' + 'new URL("./led-strip-runtime-HASH.js", import.meta.url);' - + 'new URL("./led-strip-field-HASH.js", import.meta.url)', + + 'new URL("./led-strip-field-HASH.js", import.meta.url);' + + 'new URL("./led-strip-editor-HASH.js", import.meta.url)', ); assert.equal( bundle['houseplan-assets/backdrop-pick-HASH.js'].code, @@ -615,7 +622,7 @@ test('#627 namespace retry tokens stay strict: exactly one each, every chunk emi const bundle = { 'houseplan-assets/houseplan-card.js': { type: 'chunk', fileName: 'houseplan-assets/houseplan-card.js', modules: {}, - code: ['EDITOR', 'ONBOARDING', 'ISO', 'DE', 'FR', 'FURNITURE_ART', 'PDF', 'MOON', 'LED', 'LED_FIELD'] + code: ['EDITOR', 'ONBOARDING', 'ISO', 'DE', 'FR', 'FURNITURE_ART', 'PDF', 'MOON', 'LED', 'LED_FIELD', 'LED_EDITOR'] .map((name) => `"__HOUSEPLAN_${name}_RETRY_ASSET__"`).join(';'), }, ...Object.fromEntries([ @@ -625,6 +632,7 @@ test('#627 namespace retry tokens stay strict: exactly one each, every chunk emi ['fr', '/src/i18n/fr.ts'], ['furniture-plan-art.generated', '/src/furniture-plan-art.generated.ts'], ['pdf-export', '/src/pdf/pdf-export.ts'], ['moon-runtime', '/src/moon-runtime.ts'], ['led-strip-runtime', '/src/led-strip-runtime.ts'], ['led-strip-field', '/src/led-strip-field.ts'], + ['led-strip-editor', '/src/led-strip-editor.ts'], ].map(([name, module]) => [`houseplan-assets/${name}-HASH.js`, { type: 'chunk', fileName: `houseplan-assets/${name}-HASH.js`, code: '', modules: { [`/repo${module}`]: {} }, }])), @@ -1009,6 +1017,7 @@ const runBudgetCli = (initialViewGzipBytes) => { english('settings'), english('support'), english('topology'), english('tools'), ].join('\n')); writeFileSync(join(dir, 'dist/onboarding.js'), english('settings')); + writeFileSync(join(dir, 'dist/led-editor.js'), english('led')); for (const entry of NAMESPACE_LOCALE_CHUNKS) { const marker = namespaceMarkers.find((candidate) => candidate.namespace === entry.namespace && candidate.language === entry.language).text; @@ -1040,6 +1049,7 @@ const runBudgetCli = (initialViewGzipBytes) => { initialPanelOnlyFiles: ['houseplan-panel.js'], initialPanelOnlyGzipBytes: 1, lazyEditorFiles: ['editor.js'], + lazyLedEditorFiles: ['led-editor.js'], // #593: у ленивых графов теперь свои потолки, и фикстура обязана лежать // внутри полосы — иначе CLI краснеет не на том, что проверяет тест. lazyEditorGzipBytes: LAZY_EDITOR_GZIP_CEILING - 1_000, @@ -1205,6 +1215,6 @@ test('#627 AC3 проверка владения краснеет на кажд } // Маркеры реальных словарей не совпадают ни с одной строкой основного каталога. const real = namespaceLocaleMarkers(); - assert.equal(real.length, 16); - assert.equal(new Set(real.map((entry) => entry.text)).size, 16); + assert.equal(real.length, 20); + assert.equal(new Set(real.map((entry) => entry.text)).size, 20); }); diff --git a/test/i18n-lazy-namespaces.test.mjs b/test/i18n-lazy-namespaces.test.mjs index af22625a..0e45611e 100644 --- a/test/i18n-lazy-namespaces.test.mjs +++ b/test/i18n-lazy-namespaces.test.mjs @@ -7,7 +7,7 @@ import { existsSync, readFileSync } from 'node:fs'; import { NAMESPACE_LOCALE_CHUNKS } from '../scripts/bundle-manifest.mjs'; -const NAMESPACES = ['settings', 'support', 'topology', 'tools']; +const NAMESPACES = ['settings', 'support', 'topology', 'tools', 'led']; const LAZY_LANGUAGES = ['ru', 'de', 'fr']; const source = (path) => readFileSync(new URL(`../src/i18n/${path}`, import.meta.url), 'utf8'); const json = (path) => JSON.parse(source(path)); @@ -60,18 +60,21 @@ test('#627 рантайм пространства: en готов сразу, ru support: await import('../test-build/i18n/support.js'), topology: await import('../test-build/i18n/topology.js'), tools: await import('../test-build/i18n/tools.js'), + led: await import('../test-build/i18n/led.js'), }; const runtimes = { settings: modules.settings.SETTINGS_LANGUAGE_RUNTIME, support: modules.support.SUPPORT_LANGUAGE_RUNTIME, topology: modules.topology.TOPOLOGY_LANGUAGE_RUNTIME, tools: modules.tools.TOOLS_LANGUAGE_RUNTIME, + led: modules.led.LED_LANGUAGE_RUNTIME, }; const translate = { settings: modules.settings.settingsT, support: modules.support.supportT, topology: modules.topology.topologyT, tools: modules.tools.toolsT, + led: modules.led.ledT, }; for (const namespace of NAMESPACES) { const runtime = runtimes[namespace]; diff --git a/test/led-strip-editor.test.mjs b/test/led-strip-editor.test.mjs new file mode 100644 index 00000000..a6c9d15c --- /dev/null +++ b/test/led-strip-editor.test.mjs @@ -0,0 +1,272 @@ +// #780 stage 4: the Devices-editor LED tool (ТЗ §4, §5) against a structural +// host — clean-click input, chain/undo/Esc order, one transaction per command, +// atomic links, conversion and the guarded LED history. Results are judged, +// not the source text. +import { test } from 'node:test'; +import assert from 'node:assert/strict'; +import { createLedStripEditor } from '../test-build/led-strip-editor.js'; + +globalThis.window ??= { matchMedia: () => ({ matches: false }) }; +globalThis.queueMicrotask ??= (fn) => Promise.resolve().then(fn); + +function setup({ strips = [], markers = [], devices = [], fail = false } = {}) { + const pushed = []; + const toasts = []; + const rolled = []; + const saves = []; + const dialogs = []; + const space = { id: 's', vb: [0, 0, 1000, 1000], rooms: [], partitions: [], wall_columns: [], wall_segments: [], stairs: [] }; + const host = { + hass: { states: {}, language: 'en' }, _config: { language: 'en' }, + _serverCfg: { spaces: [{ id: 's', led_strips: strips }, { id: 'other', led_strips: [] }], markers, settings: {} }, + _curSpaceCfg: {}, _space: 's', _mode: 'devices', _devices: devices, _suppressClick: false, + _markerDialog: null, _cellCm: 5, _gridPitch: 10, _wallKeyPitch: 10, _spaceWalls: [], _openingsR: [], + _devicePositionHistory: { push: (command) => pushed.push(command) }, + _adoption: { beginOptimistic: (base, candidate) => ({ base, candidate }), stageLocalConfig: (config) => { host._serverCfg = config; } }, + _saveConfigDebounced: { pending: () => false, cancel: () => {} }, + _regSignature: 'x', + _spaceModel: () => space, _floorKey: () => 'k', _screenToVb: (x, y) => [x, y], _openCuts: () => [], + _roomWallOpeningInputs: () => [], _partitionOpeningCuts: () => [], + _rollbackOptimistic: (attempt) => { rolled.push(attempt); host._serverCfg = attempt.base; return true; }, + _maybeRebuildDevices: () => {}, _showToast: (message) => toasts.push(message), _errText: (e) => String(e?.message || e), + requestUpdate: () => {}, + _editorRuntime: { + _svgPoint: (ev) => [ev.clientX, ev.clientY], + _snap: (p) => p, + _prepareConfigCandidate: (c) => c, + _saveConfigNow: async (attempt) => { saves.push(attempt.candidate); if (fail) throw new Error('offline'); }, + _openMarkerDialog: (d) => { dialogs.push(d); host._markerDialog = { devId: d?.id }; }, + }, + }; + const led = createLedStripEditor(host); + return { led, host, pushed, toasts, rolled, saves, dialogs }; +} + +const ev = (x, y, extra = {}) => ({ clientX: x, clientY: y, pointerId: 1, button: 0, pointerType: 'mouse', detail: 1, shiftKey: false, ...extra }); +const click = (led, x, y, extra = {}) => { + led.onDown(ev(x, y, extra)); + led.onUp(ev(x, y, extra)); +}; +const stripsOf = (host, id = 's') => host._serverCfg.spaces.find((space) => space.id === id).led_strips; +const settle = () => new Promise((resolve) => setTimeout(resolve, 0)); + +test('ТЗ §4 п.2, п.6: only a clean click adds a point — drag, second finger, cancel and synthetic clicks do not', () => { + const { led, host } = setup(); + led.open(); + click(led, 100, 100); + assert.equal(led.chain.points.length, 1); + // A pan: the pointer travels past the slop before release. + led.onDown(ev(200, 100)); + led.onMove(ev(260, 100)); + led.onUp(ev(260, 100)); + assert.equal(led.chain.points.length, 1, 'pan is not a point'); + // A pinch: a second finger joins. + led.onDown(ev(300, 100, { pointerId: 1, pointerType: 'touch' })); + led.onDown(ev(320, 100, { pointerId: 2, pointerType: 'touch' })); + led.onUp(ev(300, 100, { pointerId: 1, pointerType: 'touch' })); + led.onUp(ev(320, 100, { pointerId: 2, pointerType: 'touch' })); + assert.equal(led.chain.points.length, 1, 'pinch is not a point'); + // pointercancel ends the sequence without a point. + led.onDown(ev(400, 100)); + led.onCancel(ev(400, 100)); + led.onUp(ev(400, 100)); + assert.equal(led.chain.points.length, 1, 'cancel is not a point'); + // The synthetic click after navigation is suppressed by the card. + host._suppressClick = true; + click(led, 500, 100); + assert.equal(led.chain.points.length, 1, 'suppressed click is not a point'); + host._suppressClick = false; + click(led, 500, 100); + assert.equal(led.chain.points.length, 2); + // A repeat click on the last point writes no zero segment. + click(led, 500, 100); + assert.equal(led.chain.points.length, 2); +}); + +test('ТЗ §4 п.3, п.9: Ctrl+Z removes the chain point first; Esc finishes, then leaves, then deselects', async () => { + const { led, host, pushed } = setup(); + led.open(); + click(led, 100, 100); + click(led, 300, 100); + click(led, 300, 300); + assert.equal(led.key({ key: 'z' }, true), true); + assert.equal(led.chain.points.length, 2, 'own point, not someone else’s command'); + assert.equal(pushed.length, 0); + assert.equal(led.key({ key: 'Escape' }, false), true); + await settle(); + const strips = stripsOf(host); + assert.equal(strips.length, 1, 'Esc finished the correct chain, it did not roll back'); + assert.deepEqual(strips[0].points, [[0.1, 0.1], [0.3, 0.1]]); + assert.equal(strips[0].marker, null); + assert.equal(led.picker, strips[0].id, 'the device picker opens after a new strip'); + assert.equal(pushed.length, 1); + assert.equal(pushed[0].before.strip, null); + assert.equal(led.key({ key: 'Escape' }, false), true, 'Esc closes the picker first'); + assert.equal(led.picker, null); + assert.equal(led.key({ key: 'Escape' }, false), true); + assert.equal(led.sel, null, 'then drops the selection'); + assert.equal(led.key({ key: 'z' }, true), false, 'without a chain Ctrl+Z is the history’s'); +}); + +test('ТЗ §4 п.4, п.5: a click on the first point closes a ≥3-vertex chain; <2 distinct points writes nothing', async () => { + const { led, host, saves } = setup(); + led.open(); + click(led, 100, 100); + click(led, 300, 100); + click(led, 300, 300); + click(led, 102, 101); + await settle(); + const strip = stripsOf(host)[0]; + assert.deepEqual(strip.points[0], strip.points[strip.points.length - 1], 'last stored point equals the first'); + assert.equal(strip.points.length, 4); + led.open(); + click(led, 600, 600); + led.close(); + await settle(); + assert.equal(stripsOf(host).length, 1, 'a one-point chain is dropped'); + assert.equal(saves.length, 1); +}); + +test('ТЗ §4 п.3: leaving the tool finishes an unfinished correct chain without an extra segment', async () => { + const { led, host } = setup(); + led.open(); + click(led, 100, 100); + led.onMove(ev(400, 400)); + click(led, 200, 100); + led.close(); + await settle(); + assert.deepEqual(stripsOf(host)[0].points, [[0.1, 0.1], [0.2, 0.1]], 'the hover preview is not a point'); +}); + +test('ТЗ §5: binding creates the live marker with the strip space; a taken marker is refused', async () => { + const devices = [ + { id: 'lamp', name: 'Lamp', entities: ['light.lamp'], space: 's', bindingKind: 'device', bindingRef: 'lamp', icon: '' }, + { id: 'fan', name: 'Fan', entities: ['fan.f'], space: 's', bindingKind: 'device', bindingRef: 'fan', icon: '' }, + ]; + const { led, host, toasts } = setup({ + devices, + strips: [{ id: 'a', points: [[0, 0], [0.1, 0]], marker: null }, { id: 'b', points: [[0, 0.2], [0.1, 0.2]], marker: 'fan' }], + markers: [{ id: 'fan', binding: 'device:fan', space: 's' }], + }); + await led.bind('a', 'lamp'); + const strip = stripsOf(host).find((item) => item.id === 'a'); + assert.equal(strip.marker, 'lamp'); + assert.notEqual(strip.active, false); + assert.deepEqual(host._serverCfg.markers.find((item) => item.id === 'lamp'), { id: 'lamp', binding: 'device:lamp', space: 's' }); + await led.bind('a', 'fan'); + assert.equal(stripsOf(host).find((item) => item.id === 'a').marker, 'lamp', 'not silently taken from strip b'); + assert.equal(toasts.at(-1), 'Already bound to another LED strip'); +}); + +test('ТЗ §5: "Show as icon" keeps the shape hidden; "Show as strip" restores the same record', async () => { + const shape = { id: 'a', points: [[0, 0], [0.1, 0], [0.1, 0.1]], marker: 'lamp' }; + const { led, host, pushed } = setup({ strips: [shape], markers: [{ id: 'lamp', binding: 'device:lamp', space: 's' }] }); + led.select('a'); + await led.setActive('a', false); + assert.deepEqual(stripsOf(host)[0], { ...shape, active: false }); + assert.equal(led.sel, null); + await led.setActive('a', true); + assert.deepEqual(stripsOf(host)[0], { ...shape, active: true }, 'points, closure and id kept exactly'); + assert.equal(pushed.length, 2, 'each representation change is one command'); +}); + +test('ТЗ §5: drawing for an icon converts it in one write; Cancel converts nothing', async () => { + const devices = [{ id: 'lamp', name: 'Lamp', entities: ['light.lamp'], space: 's', bindingKind: 'device', bindingRef: 'lamp', icon: '' }]; + const { led, host, saves } = setup({ devices, markers: [{ id: 'lamp', binding: 'device:lamp' }] }); + led.open('lamp'); + click(led, 100, 100); + click(led, 300, 100); + await led.finish(); + const strip = stripsOf(host)[0]; + assert.equal(strip.marker, 'lamp'); + assert.equal(strip.active, true); + assert.equal(led.picker, null, 'no second device choice'); + assert.equal(host._serverCfg.markers[0].space, 's', 'the empty marker space is written'); + assert.equal(saves.length, 1); + led.open('lamp'); + click(led, 500, 500); + led.chain = null; led.tool = false; // the tray's Cancel + await settle(); + assert.equal(stripsOf(host).length, 1); +}); + +test('ТЗ §4 п.9: a failed write rolls back and records nothing; a no-op is no command', async () => { + const { led, host, pushed, rolled, toasts } = setup({ fail: true }); + led.open(); + click(led, 100, 100); + click(led, 300, 100); + await led.finish(); + assert.equal(rolled.length, 1); + assert.equal(stripsOf(host).length, 0); + assert.equal(pushed.length, 0); + assert.match(toasts.at(-1), /offline/); + const ok = setup({ strips: [{ id: 'a', points: [[0, 0], [0.1, 0]], marker: null }] }); + await ok.led.bind('a', null); + assert.equal(ok.saves.length, 0); + assert.equal(ok.pushed.length, 0); +}); + +test('ТЗ §4 п.9: history restores only its own strip record and never a newer foreign change', async () => { + const { led, host } = setup({ strips: [{ id: 'a', points: [[0, 0], [0.1, 0]], marker: null }] }); + const before = { kind: 'led', spaceId: 's', stripId: 'a', strip: { id: 'a', points: [[0, 0], [0.1, 0]], marker: null } }; + const after = { kind: 'led', spaceId: 's', stripId: 'a', strip: { id: 'a', points: [[0, 0], [0.2, 0]], marker: null } }; + stripsOf(host)[0].points = [[0, 0], [0.2, 0]]; + assert.equal(await led.applyHistory(before, after), 'ok'); + assert.deepEqual(stripsOf(host)[0].points, [[0, 0], [0.1, 0]]); + // Someone else changed the strip meanwhile: the redo is refused. + stripsOf(host)[0].points = [[0, 0], [0.5, 0]]; + assert.equal(await led.applyHistory(after, before), 'stale'); + assert.deepEqual(stripsOf(host)[0].points, [[0, 0], [0.5, 0]]); +}); + +test('ТЗ §5: a rebinding renames the link, deletion unbinds, a bound marker cannot change space', () => { + const { led, host, toasts } = setup({ strips: [{ id: 'a', points: [[0, 0], [0.1, 0]], marker: 'old', active: false }] }); + const candidate = JSON.parse(JSON.stringify(host._serverCfg)); + led.linkMarker(candidate, 'old', 'new'); + assert.equal(candidate.spaces[0].led_strips[0].marker, 'new'); + led.unlinkMarkers(candidate, new Set(['new'])); + assert.deepEqual(candidate.spaces[0].led_strips[0], { id: 'a', points: [[0, 0], [0.1, 0]], marker: null, active: true }); + assert.equal(led.markerMoveBlocked('old', 's'), false); + assert.equal(led.markerMoveBlocked('old', 'other'), true); + assert.match(toasts.at(-1), /Unbind the LED strip first/); + assert.equal(led.markerMoveBlocked('free', 'other'), false); +}); + +test('ТЗ §5: "New device…" binds the pending strip in the dialog’s own write; closing the dialog forgets it', () => { + const { led, host } = setup({ strips: [{ id: 'a', points: [[0, 0], [0.1, 0]], marker: null }] }); + led.picker = 'a'; + led.newDevice('a'); + const candidate = JSON.parse(JSON.stringify(host._serverCfg)); + candidate.markers.push({ id: 'v_1', binding: 'virtual' }); + led.linkMarker(candidate, undefined, 'v_1'); + assert.equal(candidate.spaces[0].led_strips[0].marker, 'v_1'); + assert.equal(candidate.markers[0].space, 's'); + led.newDevice('a'); + host._markerDialog = null; + led.chrome(); + const other = JSON.parse(JSON.stringify(host._serverCfg)); + led.linkMarker(other, undefined, 'v_2'); + assert.equal(other.spaces[0].led_strips[0].marker, null, 'a cancelled "New device…" binds nothing later'); +}); + +test('ТЗ §4 п.9: the card’s LED history branch — stale clears, failure restores the stack position', async () => { + const { ledHistory } = await import('../test-build/led-strip-card.js'); + const calls = []; + const card = { + _ledEditor: { applyHistory: async () => card.result }, + _devicePositionBusy: false, + _devicePositionHistory: { undo: () => calls.push('undo'), redo: () => calls.push('redo'), clear: () => calls.push('clear') }, + _t: (key) => key, _showToast: (message) => calls.push(message), requestUpdate: () => {}, + }; + const command = { name: 'LED strip', before: { kind: 'led' }, after: { kind: 'led' } }; + card.result = 'stale'; + await ledHistory(card, 'undo', command); + assert.deepEqual(calls.splice(0), ['clear', 'history.device_stale']); + card.result = 'failed'; + await ledHistory(card, 'undo', command); + assert.deepEqual(calls.splice(0), ['redo'], 'the undone command goes back on the stack, no success toast'); + card.result = 'ok'; + await ledHistory(card, 'redo', command); + assert.deepEqual(calls.splice(0), ['history.redone']); + assert.equal(card._devicePositionBusy, false); +}); diff --git a/test/mutation-browser-offload.test.mjs b/test/mutation-browser-offload.test.mjs index d8381090..cfe19af8 100644 --- a/test/mutation-browser-offload.test.mjs +++ b/test/mutation-browser-offload.test.mjs @@ -139,7 +139,7 @@ test('#659 marker handlers preserve callouts, baselines and explicit user choice "? callout({ kind: 'warning', role: 'status', text: t('marker.run_target_gone', { id: d.tapTarget }) })", '&& (edit ? dirty : true);', '@click=${() => { void this._saveMarker(); }}', - 'if (!edit || !dirty) { forgetMarkerBaseline(this.host); this._closeMarkerDialog(); return; }', + 'if (edit && dirty && !await this.host._confirmDanger({', "${effectiveTapAction === 'run' || effectiveTapAction === 'toggle'", "markerglowblock ${glowSourceDisabled ? 'hpf-disabled' : ''}", 'valueBadgePosition: position,\n valueBadgeTouched: true,', diff --git a/tsconfig.test.json b/tsconfig.test.json index 029a1bc0..404a385b 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -10,14 +10,14 @@ "tsBuildInfoFile": "test-build/.tsbuildinfo" }, "include": [ - "src/color.ts", "src/styles.ts", "src/styles/*.styles.ts", "src/logic.ts", "src/i18n.ts", "src/i18n/registry.ts", "src/i18n/language-runtime.ts", "src/i18n/namespace-language.ts", "src/i18n/settings.ts", "src/i18n/support.ts", "src/i18n/topology.ts", "src/i18n/tools.ts", "src/glow-blend.ts", "src/grid-scale.ts", "src/device-visual.ts", "src/device-pulse.ts", "src/device-presentation.ts", "src/device-marker-geometry.ts", + "src/color.ts", "src/styles.ts", "src/styles/*.styles.ts", "src/logic.ts", "src/i18n.ts", "src/i18n/registry.ts", "src/i18n/language-runtime.ts", "src/i18n/namespace-language.ts", "src/i18n/settings.ts", "src/i18n/support.ts", "src/i18n/topology.ts", "src/i18n/tools.ts", "src/i18n/led.ts", "src/glow-blend.ts", "src/grid-scale.ts", "src/device-visual.ts", "src/device-pulse.ts", "src/device-presentation.ts", "src/device-marker-geometry.ts", "src/device-face.ts", "src/device-hit-owner.ts", "src/device-toggle.ts", "src/marker-toggle-entity.ts", "src/activity-runtime.ts", "src/summary-runtime-loader.ts", "src/card-version.ts", "src/device-area-relocation.ts", "src/ha-binding-status.ts", "src/zigbee-topology-settings.ts", "src/zigbee-topology.ts", "src/zigbee-topology-geometry.ts", "src/zigbee-topology-runtime.ts", "src/radar-model.ts", "src/radar-editor.ts", "src/radar-geometry.ts", "src/radar-setup.ts", "src/radar-render.ts", "src/integration-provider.ts", "src/vacuum.ts", "src/vacuum-routes.ts", "src/vacuum-route-edit.ts", "src/sun.ts", "src/moon.ts", "src/moon-gate.ts", "src/moon-runtime.ts", "src/moon-art.generated.ts", - "src/light-visibility.ts", "src/led-strip-geometry.ts", "src/led-strip-gate.ts", "src/led-strip-runtime.ts", "src/led-strip-field.ts", "src/glow-scene.ts", "src/space-render.ts", + "src/light-visibility.ts", "src/led-strip-geometry.ts", "src/led-strip-gate.ts", "src/led-strip-runtime.ts", "src/led-strip-field.ts", "src/led-strip-editor.ts", "src/led-strip-card.ts", "src/glow-scene.ts", "src/space-render.ts", "src/resize.ts", "src/resize-labels.ts", "src/resize-controller.ts", "src/wall-record-preservation.ts", "src/rules.ts", "src/devices.ts", "src/device-inbox.ts",