Important Release Documents

Release Notes - Seatmap Platform

Version 1.58.0 - 2026-01-20

Release Focus: Code Quality, Architecture, and Developer Experience

What’s New

Cleaner, More Maintainable Code

We’ve invested in the technical foundation of the Seatmap platform, particularly the booking renderer. While these changes are mostly “under the hood,” they make the platform more reliable and easier to enhance in the future.

What This Means for You:

  • Faster Support: Better code organization means we can fix issues more quickly
  • Future Features: Cleaner architecture makes it easier to add new capabilities
  • More Reliable: Better separation of concerns reduces the chance of bugs
  • Better Monitoring: Version tracking in error logs helps us resolve issues faster

Enhanced Renderer Flexibility

Minimap Height Control (SEAT-883)

Prevent the minimap from becoming too large on narrow viewports by setting a maximum height as a percentage of the container:

// Limit minimap height to 30% of container
const renderer = new SeatmapBookingRenderer({
  minimap: {
    enabled: true,
    width: 200,
    maxHeightPercent: 30  // Minimap won't exceed 30% of container height
  }
});

This is especially useful for mobile devices and variable screen sizes where the minimap could otherwise dominate the viewport.

Flex Layout Support

The renderer now works seamlessly with modern CSS flexbox and grid layouts:

  • Automatically detects and adapts to flex containers
  • Properly responds to dynamic size changes
  • No manual resize calculations needed
  • Works with flex: 1, flex-grow, and other flex properties

Improved Resize Handling

Fixed and enhanced the resize observer for more reliable behavior:

  • Smoother response when browser windows resize
  • Better handling of parent container size changes
  • Eliminates flickering during resize operations
  • More efficient resize calculations

Configurable Zoom Behavior

New interactionZoomStrategy configuration option:

const renderer = new SeatmapBookingRenderer({
  interactionZoomStrategy: 'section'  // or 'default', 'next-scale', or ['section', 'next-scale']
});

Customize how users interact with zoom controls to match your UX requirements. Use a single strategy or an array for progressive zoom behavior.

Visual Markers System

Introduced a new marker system for enhanced user guidance:

  • Highlight specific seats or sections
  • Guide users to recommended areas
  • Visual cues for special seat types
  • Fully customizable marker styles

Data Access and State Management

Real-Time Data Subscriptions

New DataManager and StateManager provide event-driven access to seat map data and state changes:

// Subscribe to data changes
renderer.getDataManager().on('sectionsChanged', (sectionId) => {
  const metadata = renderer.getDataManager().getSectionMetadata(sectionId);
  console.log('Section updated:', metadata);
});

// Get real-time seat information
const seatMetadata = renderer.getDataManager().getSeatMetadata(seatId);
console.log('Seat state:', {
  available: seatMetadata.available,
  inCart: seatMetadata.inCart,
  priceId: seatMetadata.priceId
});

// Subscribe to state changes
renderer.getStateManager().on('sectionStateChanged', (sectionId) => {
  const states = renderer.getStateManager().getSectionStates(sectionId);
  console.log('Section states:', states);
});

// Update section states programmatically
renderer.getStateManager().updateSectionState(sectionId, {
  highlighted: true,
  selected: false
});

Key Capabilities:

  • Event-Driven Architecture: Subscribe to data and state changes
  • Read-Only Data Access: Safe, cached access to entity metadata
  • State Mutation Control: Centralized state management
  • Performance Optimized: Lazy loading with dirty tracking
  • Type-Safe: Full TypeScript support with detailed interfaces

Available Events:

  • dataLoaded - Initial data loaded
  • sectionsChanged - Section metadata updated
  • seatsChanged - Seat metadata updated
  • dataInvalidated - Cache invalidated
  • sectionStateChanged - Section visual state changed
  • seatStateChanged - Seat visual state changed

Use Cases for Ticketing Applications:

  • Real-Time Availability Updates: Subscribe to seat state changes to instantly update your UI when seats become available or unavailable during high-demand sales
  • Live Shopping Cart Sync: Monitor seat selections across multiple browser tabs or devices, keeping your cart UI in perfect sync with the renderer
  • Dynamic Pricing Displays: React to price changes and update pricing panels, tooltips, and summary displays in real-time
  • Inventory Management: Build admin dashboards that monitor live seat availability, track booking patterns, and display real-time venue occupancy
  • Enhanced User Feedback: Show instant visual feedback when seats are locked by other users, creating a better competitive buying experience
  • Section Recommendations: Highlight and guide users to available sections based on real-time capacity, helping them find the best seats faster
  • Analytics & Conversion Tracking: Capture user interactions (hovers, clicks, selections) to optimize your sales funnel and improve conversion rates

Smarter Editor

Fixed Numbering Issues Resolved problems with row and seat numbering across all formats (Arabic numerals, Roman numerals, and letters). Your seat maps will now number correctly every time.

Better Object Placement When creating new shapes, they automatically position themselves in available space rather than overlapping existing objects.

Bug Fixes

Critical Fixes

  • Row and Seat Numbering: Fixed numbering issues across all formats

    • Arabic numerals (1, 2, 3…)
    • Roman numerals (I, II, III…)
    • Letter sequences (A, B, C…)
    • Affected: editor-client/src/components/editor/

  • Fabric.js Recursion: Resolved infinite loop in object movement operations

    • Fixed stack overflow when moving multiple objects
    • Improved canvas update performance

  • Resize Observer: Fixed resize observer initialization and cleanup

    • Eliminated memory leaks
    • Smoother resize behavior

Editor Improvements

  • Multiple UI interaction bug fixes
  • Better shape placement logic
  • Improved filtering in development tools

Renderer Stability

  • Fixed filtering functionality
  • Improved outline rendering
  • Better test coverage

What’s Inside

This release includes 32 commits focused on code quality and architecture:

Main Changes:

  1. Booking Client Refactoring - Major architecture improvements
  2. Data & State Management - New DataManager and StateManager for real-time subscriptions
  3. Markers System - New visual guidance capabilities
  4. Zoom Enhancements - Better interaction strategies
  5. Database Organization - Migrations in separate module
  6. Bug Fixes - Numbering, UI, and stability improvements

Components Updated:

  • Booking Client (Renderer) - Major refactoring
  • Editor Client - Bug fixes and improvements
  • Editor Service - Better organization
  • Booking Service - No changes
  • Common Library - No changes

Migration Guide

For Existing Users

Excellent News: This release is 100% backwards compatible.

No code changes required
No configuration updates needed
No database migrations required
Drop-in replacement for v1.57.0

New Features to Explore

  1. Minimap Height Restriction:

    minimap: {
  enabled: true,
  maxHeightPercent: 30  // Limit minimap to 30% of container height
}

  2. Interaction Zoom Strategy:

    interactionZoomStrategy: ['section', 'next-scale']

  3. Markers API:

    renderer.addMarker({
  id: 'marker-1',
  target: { type: 'seat', seatId: 123 },
  appearance: { type: 'pin', color: '#ff0000' }
});

  4. Flex Layout Integration:

    .container {
  display: flex;
  flex-direction: column;
}
.seatmap {
  flex: 1;  /* Renderer adapts automatically */
}

  5. Data Subscriptions:

    // Subscribe to real-time data updates
renderer.getDataManager().on('sectionsChanged', (sectionId) => {
  const metadata = renderer.getDataManager().getSectionMetadata(sectionId);
  updateYourUI(metadata);
});

// Subscribe to state changes
renderer.getStateManager().on('sectionStateChanged', (sectionId) => {
  const states = renderer.getStateManager().getSectionStates(sectionId);
  syncYourState(states);
});

Testing Recommendations

While no changes are required, we recommend:

  1. Verify Rendering: Test your existing integration

    # No changes needed, just verify it works

  2. Test Minimap Height Restriction: Try limiting minimap height on narrow screens

    minimap: { enabled: true, maxHeightPercent: 30 }

  3. Explore Zoom Strategies: Test different interaction modes

    interactionZoomStrategy: ['section', 'next-scale'] // or 'default'

  4. Check Error Logs: Verify version info appears in Sentry

    // Look for version: "1.58.0" in error reports

  5. Test Flex Layouts: If using flexbox, verify smooth resizing

  6. Test Data Subscriptions: Try the new event-driven data access

    renderer.getDataManager().on('dataLoaded', () => {
  console.log('All sections:', renderer.getDataManager().getAllSectionMetadata());
});

Impact

Development Speed

  • Faster Bug Fixes: Better code organization
  • Easier Testing: Improved test structure
  • Simpler Debugging: Enhanced logging

Code Quality

  • Reduced complexity through modular design
  • Better separation of concerns
  • Improved maintainability
  • Enhanced test coverage

User Experience

  • Fixed numbering issues
  • Better object placement
  • More flexible height options
  • Improved zoom interactions

Integration & Extensibility

  • Event-driven data access for custom integrations
  • Real-time state synchronization capabilities
  • Easier to build analytics and monitoring tools
  • Type-safe APIs for external consumers

Thank You

This release represents our commitment to code quality and long-term maintainability. While the changes are primarily internal, they set the foundation for faster feature development and more reliable operation.

What’s Next?

With this improved architecture in place, we’re planning:

  • Enhanced mobile experience
  • More visualization options
  • Additional renderer customization
  • Performance optimizations

Stay tuned for more updates!

Additional Documentation

For detailed technical information, see:

  • Renderer API Changes - Complete API documentation

    • New features: Markers, zoom strategies, minimap height control
    • Method signatures and TypeScript types
    • Code examples and migration guide

  • Deployment Guide - Infrastructure and deployment details

    • Database module reorganization
    • JooQ configuration enhancements
    • Deployment checklist and rollback procedures

Questions? Contact the Seatmap team or check our documentation at seatmap.pro.

Ready to upgrade? Version 1.58.0 is now available on the dev branch.