MD.OFFICE
FAL

Daily Log - 2026-04-11

Dynaforms: Layout Bugs & Builder Keybindings

Achievements

  • Read-Only Defensive Guards: Eliminated sporadic UI race conditions where iterative matrix widgets leaked usable "Add Row" and "Trash" buttons immediately after entering disabled modes (like "Approval" or "View").
  • Builder Delete Keybinding: Wired the physical Delete keystroke to explicitly delete selected structural items in the canvas builder, effectively tying into existing backend guards without requiring a manual UI trash click.
  • Tab Component Expansion Fix: Patched the horizontal layout tab-field wrapper to organically stretch full-width (flex min-w-full), ensuring the blue boundary line gracefully traverses the complete horizontal block.
  • Tab Margin Spacing Fix: Restrung standardized mb-2 spacing manually beneath the tab-field components within the iterative renderer layout.

Decisions

  • TypeScript over DOM Evaluation: Intentionally opted to implement the read-only guard logically inside the component's underlying TS methods (if (this.form?.disabled || this.config?.disabled) return;), prioritizing deterministic backend business-logic evaluation instead of chasing inherently lagging async DOM Change Detection updates.
  • Decoupled Keybinding Registration: Centralized keybinding evaluation directly inside CenterPanelComponent leveraging @HostListener, resolving multi-tiered nested context challenges regarding Canvas Elements vs Tab Panes. A custom resolveDeleteParent() helper handles resolution of parent components explicitly to prevent deleting dependencies silently.

Technical Details

  • Modified: matrix.component.ts -> Inserted execution interception guards directly onto the addIterativeRow and removeIterativeRow handlers, explicitly halting action whenever the root reactive config is categorized as disabled.
  • Modified: center-panel.component.html & tab-field.component.html -> Changed wrapper classes from inline-flex min-w-max to flex min-w-full. Added mb-2 modifier to vertical tabs rendering.
  • Modified: dynaform.service.ts -> Created the two-step resolveDeleteParent(parentId) logical resolver to distinguish pure DynaFormElement node parents from tabs[] sub-arrays.
  • Modified: center-panel.component.ts -> Moved the deletion logic to executeDeleteElement(item, parent). Added @HostListener capturing keyboard Delete utilizing existing constraints logic (shouldIgnoreShortcut).