Skip to content

Conversation

@WillyEverGreen
Copy link
Contributor

Summary

Replaces the hardcoded _slotSize = 21 in js/blockfactory.js with a dynamic calculation derived from block geometry. This resolves the existing TODO and makes the layout logic more maintainable and theme-friendly.


Problem

The slot size (the vertical spacing used in clamp blocks) was hardcoded to 21, which caused several issues:

  • Magic number: No clear explanation of why the value was 21
  • Fragility: Changes to block dimensions (radius, stroke width) could cause visual misalignment
  • Theming limitations: Future features such as compact mode or large-text mode would require manual updates

Solution

The slot size is now computed dynamically using the formula:

_slotSize = 2 * _radius + _innieY2 + _strokeWidth

This formula reflects the actual block geometry:

  • 2 * _radius → vertical space for rounded corners
  • _innieY2 → innie connector height
  • _strokeWidth → border width

With the current defaults:

2 * 8 + 4 + 1 = 21

The visual output remains unchanged while eliminating the hardcoded dependency.


Changes

1. js/blockfactory.js (SVG constructor)

  • Replaced the hardcoded _slotSize value with a derived calculation
  • Added inline documentation explaining the formula and its origin

2. js/blockfactory.js (setstrokeWidth)

  • Recalculates _innieY2 and _slotSize when strokeWidth changes
  • Ensures dependent layout values remain consistent

3. js/__tests__/blockfactory.test.js

  • Added test case: "should compute slot size dynamically"
  • Verifies:
    • Default computed value (21)
    • Updated value when strokeWidth changes (e.g., 19.5)

Testing

  • All existing tests pass
  • New test validates dynamic recalculation
  • Backward compatible (default rendering unchanged)
  • No public API changes

Benefits

  • Self-documenting code: Removes a hidden magic number
  • Single source of truth: Slot size stays in sync with block geometry
  • Future-proof: Automatically adapts to theming or accessibility changes
  • Low risk: Refactor only, no behavioral changes

Fixes

Resolves the TODO in js/blockfactory.js (slot size computation).

Replace hardcoded _slotSize = 21 with dynamic calculation based on
block dimensions. The formula (2 * radius + innieY2 + strokeWidth)
ensures clamp blocks scale properly with theme changes.

Changes:
- Update SVG constructor to compute _slotSize dynamically
- Update setstrokeWidth() to recalculate dependent values
- Add test case to verify dynamic calculation and updates

This makes the codebase more maintainable and future-proof for
theming support where block sizes may vary.

Fixes the TODO comment in blockfactory.js line 77.
@github-actions
Copy link
Contributor

github-actions bot commented Jan 9, 2026

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

blockfactory.test.js

@github-actions
Copy link
Contributor

github-actions bot commented Jan 9, 2026

✅ All Jest tests passed! This PR is ready to merge.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 9, 2026

✅ All Jest tests passed! This PR is ready to merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant