@seatmap.pro/renderer 1.47.0 → 1.53.0

package/lib/index.d.ts

@@ -368,6 +368,12 @@ interface IRendererMachineContext {
         id: number;
     };
     visibility?: IVisibilityStatuses;
+    enable3DView?: boolean;
+    rotationZ?: number;
+    perspectiveZ?: number;
+    tiltX?: number;
+    getWidth?: () => number;
+    getHeight?: () => number;
 }
 /**
  * @hidden
@@ -629,6 +635,10 @@ declare class Context {
     translate: IPoint;
     isEagleView: boolean;
     visibility: IVisibilityStatuses;
+    enable3DView: boolean;
+    rotationZ: number;
+    perspectiveZ: number;
+    tiltX: number;
     private _seats;
     seatsIndex: KDBush;
     seatsById: ById<ISeat>;
@@ -640,6 +650,15 @@ declare class Context {
     pricesById: ById<IColoredPrice>;
     seatsKeysMissedOnPriceSet: string[];
     seatsIdsMissedOnPriceSet: number[];
+    rowsPolylines?: Array<{
+        points: {
+            x: number;
+            y: number;
+        }[];
+        widthPx?: number;
+        color?: string;
+    }>;
+    rowsPolylinesVersion: number;
     /**
      * @hidden
      */
@@ -661,6 +680,12 @@ declare class Context {
     hoveredSeat?: ISeat;
     hoveredRow?: IRowDTO;
     gaInfo: IGaInfo[];
+    _selectedAt: {
+        [seatId: number]: number;
+    };
+    _deselectedAt: {
+        [seatId: number]: number;
+    };
     constructor(element: HTMLElement, settings: IRendererSettings, redrawHandler: () => void);
     set selectedSeatIds(value: number[]);
     get selectedSeatIds(): number[];
@@ -684,6 +709,18 @@ declare class Context {
     getOffsetByPosition: (position: IPoint) => IPoint;
     addGaToCart(ga: ICartGa): void;
     removeGaFromCart(removedGa: IRemovedCartGa): void;
+    /**
+     * Clears the cart and records deselection timestamps for all seats.
+     */
+    clearCart(): void;
+    /**
+     * Removes seats from the cart by internal seat IDs and records deselection times.
+     */
+    removeSeatsFromCartByIds(ids: number[]): void;
+    /**
+     * Triggers a selection pulse animation for a seat and clears any pending deselection.
+     */
+    triggerSeatSelectionPulse(seatId: number): void;
     addSeatsToCart(seats: ICartSeat[]): void;
     rectSelectSeats(rect: {
         x: number;
@@ -716,6 +753,14 @@ declare class Context {
     seatToExtendedSeat: (seat: ISeat) => IExtendedSeat;
     calculateAbsolutePoint(point: IPoint): IPoint;
     getSeatByOffset: (offset: IPoint) => ISeat | undefined;
+    /**
+     * Hit-test a seat using a viewport-relative point (CSS px) while accounting for 3D view.
+     * When 3D is enabled, the point is unprojected back to the stage before querying KDBush.
+     */
+    getSeatByViewportPoint: (viewportPoint: IPoint, viewportSize: {
+        width: number;
+        height: number;
+    }) => ISeat | undefined;
 }
 
 type Nullable<T> = T | null | undefined;
@@ -1036,6 +1081,72 @@ interface IVisibilitySettings {
     seats?: IVisibleSetting;
     outlines?: IVisibleSetting;
 }
+/**
+ * Minimap position options.
+ */
+type MinimapPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Minimap configuration settings.
+ */
+interface IMinimapSettings {
+    /**
+     * Whether the minimap is enabled.
+     */
+    enabled: boolean;
+    /**
+     * Position of the minimap on the screen.
+     * @default 'bottom-right'
+     */
+    position?: MinimapPosition;
+    /**
+     * Width of the minimap in pixels. Height is calculated automatically based on aspect ratio.
+     * @default 200
+     */
+    width?: number;
+    /**
+     * Opacity of the minimap.
+     * @default 0.8
+     */
+    opacity?: number;
+    /**
+     * Background color of the minimap.
+     */
+    backgroundColor?: string;
+    /**
+     * Border color of the minimap.
+     */
+    borderColor?: string;
+    /**
+     * Color of the viewport indicator rectangle.
+     * @default '#FF5722'
+     */
+    viewportColor?: string;
+    /**
+     * Border width in pixels.
+     * @default 2
+     */
+    borderWidth?: number;
+    /**
+     * Margin from the edge of the screen in pixels.
+     * @default 16
+     */
+    margin?: number;
+    /**
+     * Color of the dim overlay outside the viewport on the minimap.
+     * @default '#000000'
+     */
+    offscreenColor?: string;
+    /**
+     * Opacity of the dim overlay outside the viewport on the minimap (0..1).
+     * @default 0.4
+     */
+    offscreenOpacity?: number;
+    /**
+     * Show cart pins on the minimap.
+     * @default true
+     */
+    showCartPins?: boolean;
+}
 /**
  * Configuration settings for the renderer.
  * Defines various options that control the behavior and appearance of the renderer.
@@ -1134,6 +1245,22 @@ interface IRendererSettings {
      * If true, uses WebGL for rendering instead of Canvas.
      */
     switchToWebGL?: boolean;
+    /**
+     * If true, shows the debug overlay layer (diagnostic lines from sections to venue center).
+     */
+    showDebugLayer?: boolean;
+    /**
+     * If true, enables 3D view mode for enhanced visualization.
+     */
+    enable3DView?: boolean;
+    /**
+     * If true, highlights all section outlines with a border.
+     */
+    highlightAllOutlines?: boolean;
+    /**
+     * Minimap configuration settings.
+     */
+    minimap?: IMinimapSettings;
     /**
      * Option to configure zoom settings
      */
@@ -1388,6 +1515,7 @@ declare class OutlineLayer {
     private outlineShapes;
     private outlineRect;
     private context;
+    private rowsOverlayElement?;
     private originalSvg;
     private backgroundSVG;
     private hasBackgroundOutline;
@@ -1399,6 +1527,7 @@ declare class OutlineLayer {
     highlightGa(id: number | undefined): void;
     clearSectionHighlight(): void;
     highlightSection(id: number | undefined): void;
+    highlightAllSections(): void;
     clearSectionFocus(): void;
     focusSection(id: number | undefined): void;
     private removeClassNameAll;
@@ -1446,8 +1575,78 @@ declare class OutlineLayer {
     hide(): void;
     show(): void;
     private getContextSvg;
+    /**
+     * Force update the outline layer with current 3D transforms
+     * Similar to forceRedraw in WebGL layer
+     */
+    forceUpdate(): void;
+    /**
+     * Applies 3D transforms to the SVG outline layer
+     * Implements the same rotation logic as the WebGL shaders
+     */
+    private apply3DTransforms;
+    /**
+     * Appends rows overlay (SVG fragment) into the outline SVG container.
+     * If an overlay already exists, it will be replaced.
+     */
+    appendRowsOverlay(rowsFragment: string, css?: string): void;
 }
 
+/**
+ * @hidden
+ */
+interface IRendererAnimation {
+    /**
+     * Optional animation type hint to allow branching behavior in the renderer
+     * - "transform": default zoom/pan animations using scale/translate
+     * - "pan": dedicated pan animation using translate only
+     * - "rotation": continuous 3D rotation animation
+     */
+    type?: 'transform' | 'pan' | 'rotation';
+    startTime?: number;
+    duration: number;
+    fromScale: number;
+    toScale: number;
+    fromTranslate?: IPoint;
+    translate?: IPoint;
+    toTranslate: IPoint;
+    relativeTranslate?: IPoint;
+    frame: number;
+    inProgress: boolean;
+    /**
+     * Custom per-frame handler used for non-transform animations (e.g., rotation)
+     * Receives high-resolution time and elapsed milliseconds since start
+     */
+    onFrame?: (now: number, elapsedMs: number) => void;
+    /**
+     * When true, the animation never auto-finishes and must be explicitly stopped
+     */
+    isContinuous?: boolean;
+    /**
+     * Rotation-specific fields used when type === 'rotation'
+     */
+    angle?: number;
+    lastRotationZ?: number;
+    /**
+     * 3D transform interpolation fields for combined animations
+     */
+    fromRotationZ?: number;
+    toRotationZ?: number;
+    fromTiltX?: number;
+    toTiltX?: number;
+    fromPerspectiveZ?: number;
+    toPerspectiveZ?: number;
+    /** Called once when the animation finishes */
+    onComplete?: () => void;
+}
+interface IRendererSequenceStep {
+    zoomTo?: number;
+    destination?: IPoint;
+    rotateTo?: number;
+    tiltTo?: number;
+    perspectiveTo?: number;
+    durationMs?: number;
+}
 /**
  * Interface for the base Renderer functionality.
  * Defines the core methods and properties that all renderer implementations must provide.
@@ -1582,6 +1781,12 @@ interface IRenderer {
      * Destroys the renderer instance, cleaning up all resources.
      */
     destroy: () => void;
+    /**
+     * Gets the renderer version.
+     *
+     * @returns The version string
+     */
+    getVersion: () => string;
     /**
      * Disables SVG sections by their IDs.
      *
@@ -1620,21 +1825,50 @@ interface IRenderer {
      * @returns The selected SVG sections
      */
     getSvgSectionBySelection: () => ISectorDTO[];
+    /**
+     * Sets whether all section outlines should be highlighted.
+     *
+     * @param highlight - If true, all section outlines will be highlighted with a border
+     */
+    setHighlightAllOutlines: (highlight: boolean) => void;
+    /**
+     * Gets whether all section outlines are currently highlighted.
+     *
+     * @returns True if all outlines are highlighted, false otherwise
+     */
+    getHighlightAllOutlines: () => boolean;
+    /**
+     * Shows the minimap.
+     */
+    showMinimap?: () => void;
+    /**
+     * Hides the minimap.
+     */
+    hideMinimap?: () => void;
+    /**
+     * Toggles the minimap visibility.
+     */
+    toggleMinimap?: () => void;
+    /**
+     * Sets the minimap position.
+     *
+     * @param position - The position to set ('top-left', 'top-right', 'bottom-left', 'bottom-right')
+     */
+    setMinimapPosition?: (position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') => void;
 }
-/**
- * @hidden
- */
-interface IRendererAnimation {
-    startTime?: number;
-    duration: number;
-    fromScale: number;
-    toScale: number;
-    fromTranslate?: IPoint;
-    translate?: IPoint;
-    toTranslate: IPoint;
-    relativeTranslate?: IPoint;
-    frame: number;
-    inProgress: boolean;
+interface IRenderer {
+    /**
+     * Runs a sequence of composite animations. Each step can include zoom, pan (via destination), and rotation.
+     */
+    animateSequence: (steps: IRendererSequenceStep[]) => Promise<void>;
+    /**
+     * Convenience method to zoom with optional destination center point.
+     * If destination is provided, it focuses the view so that destination becomes the viewport center.
+     */
+    zoomTo: (newScale: number, options?: {
+        destination?: IPoint;
+        durationMs?: number;
+    }) => void;
 }
 
 /**
@@ -1651,16 +1885,20 @@ declare class Renderer implements IRenderer {
     private stageLayer;
     private selectionLayer;
     protected outlineLayer: OutlineLayer;
+    private minimapLayer?;
     private service;
     private zoomToFitScale;
     private isTouchMode;
     private pinchStartPoint?;
-    private animation?;
     private resizeTimer;
     protected isRunning: boolean;
     private disableZoomToEmptySpace;
     private switchToWebGL;
     private originalSectionPrices;
+    private transformAnimator;
+    private rotationAnimation;
+    private refreshMinimap;
+    private setMinimapFromSnapshot;
     /**
      * Creates a new instance of the Renderer.
      *
@@ -1686,6 +1924,12 @@ declare class Renderer implements IRenderer {
      * @returns The height in pixels
      */
     getHeight(): number;
+    /**
+     * Gets the renderer version.
+     *
+     * @returns The version string
+     */
+    getVersion(): string;
     /**
      * Sets the interaction mode for the renderer.
      *
@@ -2012,6 +2256,10 @@ declare class Renderer implements IRenderer {
      * Returns sections info
      */
     getSections(): ISector[];
+    /**
+     * Returns sections ids
+     */
+    getSectionsKeys(): string[];
     /**
      *
      * @returns Rows data array
@@ -2051,6 +2299,7 @@ declare class Renderer implements IRenderer {
     private handleDestSectionMouseLeave;
     private handleMouseMove;
     private handleMouseMoveOutside;
+    private handleMouseLeave;
     private handleWindowResize;
     private updateSize;
     /**
@@ -2059,21 +2308,32 @@ declare class Renderer implements IRenderer {
     getZoom(): number;
     zoomIn(): void;
     zoomOut(): void;
+    /**
+     * Zooms to the specified scale with optional destination center point in background coordinates.
+     * If destination is provided, the view will be centered on that point at the end of the animation.
+     */
+    zoomTo(newScaleCss: number, options?: {
+        destination?: IPoint;
+        durationMs?: number;
+    }): void;
     zoomToFit(): void;
     clearSectorHighlight(): void;
     highlightSector(id: number | undefined): void;
     private startPanAnimation;
-    private animationPanStep;
     zoomToSection(section: string | number, options?: {
         focus?: boolean;
     }): void;
     zoomToDestination(newScale: number, destination: IPoint, duration?: number): void;
+    /**
+     * Runs a sequence of composite animations. Each step can include zoom, pan (via destination), and rotation.
+     */
+    animateSequence(steps: IRendererSequenceStep[]): Promise<void>;
     private getSectionId;
     private startAnimation;
-    private animationStep;
     private cachedDraw;
     private redraw;
     private doTranslate;
+    private transformPanDeltaFor3D;
     private calculateLimitedTranslate;
     private calculateLimit;
     seatToExtendedSeat: (seat: ISeat) => IExtendedSeat;
@@ -2101,6 +2361,85 @@ declare class Renderer implements IRenderer {
     getMaxZoom(): number;
     viewSection(section: ISection): void;
     private getStageLayer;
+    /**
+     * Updates 3D view parameters for dynamic perspective changes.
+     * Only works when enable3DView is true and WebGL is enabled.
+     */
+    update3DView(options: {
+        rotationZ?: number;
+        perspectiveZ?: number;
+        tiltX?: number;
+    }): void;
+    /**
+     * Gets current 3D view parameters
+     */
+    get3DViewParams(): {
+        enable3DView: boolean;
+        rotationZ: number;
+        perspectiveZ: number;
+        tiltX: number;
+    };
+    /**
+     * Smoothly animates current 3D parameters to the given target values.
+     * Returns a Promise that resolves when the transition completes.
+     */
+    animateTo3DParams(target: {
+        rotationZ?: number;
+        perspectiveZ?: number;
+        tiltX?: number;
+    }, durationMs?: number): Promise<void>;
+    /**
+     * Animates continuous rotation of the 3D view
+     * @param angle - Rotation speed in radians per second (positive for clockwise, negative for counter-clockwise)
+     * @returns Animation ID that can be used to stop the animation
+     */
+    animateRotation(angle: number): number | null;
+    /**
+     * Stops the current rotation animation
+     */
+    stopRotationAnimation(): void;
+    /**
+     * Checks if a rotation animation is currently running
+     */
+    isRotationAnimationRunning(): boolean;
+    /**
+     * Gets the current rotation animation ID
+     */
+    getRotationAnimationId(): number | null;
+    /**
+     * Sets whether all section outlines should be highlighted.
+     *
+     * @param highlight - If true, all section outlines will be highlighted with a border
+     */
+    setHighlightAllOutlines(highlight: boolean): void;
+    /**
+     * Gets whether all section outlines are currently highlighted.
+     *
+     * @returns True if all outlines are highlighted, false otherwise
+     */
+    getHighlightAllOutlines(): boolean;
+    /**
+     * Shows the minimap.
+     */
+    showMinimap(): void;
+    /**
+     * Hides the minimap.
+     */
+    hideMinimap(): void;
+    /**
+     * Toggles the minimap visibility.
+     */
+    toggleMinimap(): void;
+    /**
+     * Enables or disables cart pins on the minimap at runtime.
+     */
+    setMinimapPinsEnabled(enabled: boolean): void;
+    /**
+     * Sets the minimap position.
+     *
+     * @param position - The position to set ('top-left', 'top-right', 'bottom-left', 'bottom-right')
+     */
+    setMinimapPosition(position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'): void;
 }
 
 interface IAdminRendererSettings extends IRendererSettings {
@@ -2353,7 +2692,51 @@ declare class SeatmapBookingRenderer extends Renderer {
     private leaveSectionOnly;
 }
 
+/**
+ * Package version information
+ * This file is automatically updated during the build process
+ */
+declare const VERSION = "1.53.0";
+
 declare const defaultZoomSettings: IZoomSettings;
 declare const mergeSettings: (defaults: IRendererSettings, settings?: Partial<IRendererSettings>) => IRendererSettings & Partial<IRendererSettings>;
 
-export { BookingApiClient, type ById, type ColorById, type ColorSequenceSettings, type DeepPartial, type DestEvent, DestEventType, type IAdminRendererSettings, type IBaseSeat, type IBaseSector, type IBasicSeatStyle, type IBeforeSeatDrawEvent, type IBookingRendererSettings, type ICart, type ICartGa, type ICartSeat, type IClickSrcEvent, type IColoredPrice, type IConfigurationDTO, type IDeselectDestEvent, type IDragEndSrcEvent, type IDragMoveSrcEvent, type IDragStartSrcEvent, type IExtendedSeat, type IMouseMoveSrcEvent, type IPanDestEvent, type IPanZoomDestEvent, type IPlainSeatsDTO, type IPngBackgroundDTO, type IPoint, type IPrice, type IPriceDTO, type IPriceId, type IPriceListDTO, type IRectSelectDestEvent, type IRemovedCartGa, type IRenderer, type IRendererAnimation, type IRendererMachineContext, type IRendererSeatStyleSettings, type IRendererSettings, type IRendererSvgSectionStylesSetting, type IRendererTheme, type IRowDTO, type ISVGBackgroundDTO, type ISchemaDTO, type ISeat, type ISeatCartSwitchDestEvent, type ISeatDTO, type ISeatMouseEnterDestEvent, type ISeatMouseLeaveDestEvent, type ISeatPriceScheme, type ISeatSelectDestEvent, type ISeatStyle, type ISection, type ISectionClickDestEvent, type ISectionMouseEnterDestEvent, type ISectionMouseLeaveDestEvent, type ISectionRect, type ISectionWithCoords, type ISector, type ISectorDTO, type ISpecialPrice, type ISpecialState, type ISvgSectionStyle, type IVenueDTO, type IVisibilitySettings, type IZoomSettings, type Nullable, Renderer, type RendererMachine, type RendererMachineReducer, type RendererMachineService, RendererSelectMode, RendererTargetType, type SeatFilter, type SeatInteractionState, SeatmapAdminRenderer, SeatmapBookingRenderer, type SrcEvent, SrcEventType, type TransformArray, convertPricesToColored, convertPricesToColoredById, defaultZoomSettings, mergeSettings, sortPrices };
+/**
+ * Rotation Animation Manager
+ * Handles continuous rotation animations for 3D view
+ */
+interface IRotationAnimation {
+    startTime: number;
+    animationId: number | null;
+    lastRotationZ: number;
+    angle: number;
+    isRunning: boolean;
+}
+declare class RotationAnimation {
+    private animation;
+    /**
+     * Starts a continuous rotation animation
+     * @param angle - Rotation speed in radians per second (positive for clockwise, negative for counter-clockwise)
+     * @param onUpdate - Callback function to update the rotation value
+     * @returns Animation ID that can be used to stop the animation
+     */
+    start(angle: number, onUpdate: (rotationZ: number) => void): number | null;
+    /**
+     * Stops the current rotation animation
+     */
+    stop(): void;
+    /**
+     * Checks if an animation is currently running
+     */
+    isRunning(): boolean;
+    /**
+     * Gets the current animation ID
+     */
+    getAnimationId(): number | null;
+    /**
+     * Gets the current animation state
+     */
+    getAnimation(): IRotationAnimation | null;
+}
+
+export { BookingApiClient, type ById, type ColorById, type ColorSequenceSettings, type DeepPartial, type DestEvent, DestEventType, type IAdminRendererSettings, type IBaseSeat, type IBaseSector, type IBasicSeatStyle, type IBeforeSeatDrawEvent, type IBookingRendererSettings, type ICart, type ICartGa, type ICartSeat, type IClickSrcEvent, type IColoredPrice, type IConfigurationDTO, type IDeselectDestEvent, type IDragEndSrcEvent, type IDragMoveSrcEvent, type IDragStartSrcEvent, type IExtendedSeat, type IMinimapSettings, type IMouseMoveSrcEvent, type IPanDestEvent, type IPanZoomDestEvent, type IPlainSeatsDTO, type IPngBackgroundDTO, type IPoint, type IPrice, type IPriceDTO, type IPriceId, type IPriceListDTO, type IRectSelectDestEvent, type IRemovedCartGa, type IRenderer, type IRendererAnimation, type IRendererMachineContext, type IRendererSeatStyleSettings, type IRendererSettings, type IRendererSvgSectionStylesSetting, type IRendererTheme, type IRowDTO, type ISVGBackgroundDTO, type ISchemaDTO, type ISeat, type ISeatCartSwitchDestEvent, type ISeatDTO, type ISeatMouseEnterDestEvent, type ISeatMouseLeaveDestEvent, type ISeatPriceScheme, type ISeatSelectDestEvent, type ISeatStyle, type ISection, type ISectionClickDestEvent, type ISectionMouseEnterDestEvent, type ISectionMouseLeaveDestEvent, type ISectionRect, type ISectionWithCoords, type ISector, type ISectorDTO, type ISpecialPrice, type ISpecialState, type ISvgSectionStyle, type IVenueDTO, type IVisibilitySettings, type IZoomSettings, type MinimapPosition, type Nullable, Renderer, type RendererMachine, type RendererMachineReducer, type RendererMachineService, RendererSelectMode, RendererTargetType, RotationAnimation, type SeatFilter, type SeatInteractionState, SeatmapAdminRenderer, SeatmapBookingRenderer, type SrcEvent, SrcEventType, type TransformArray, VERSION, convertPricesToColored, convertPricesToColoredById, defaultZoomSettings, mergeSettings, sortPrices };