platform-calendar-seatmap 2.1.12 → 2.1.13

package/.github/workflows/main.yml

@@ -1,49 +1,49 @@
-name: Publish to npm
-
-on:
-  push:
-    branches:
-      - main_needtofix
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org/'
-
-      - name: Set Git user configuration
-        run: |
-          git config --global user.name "Boomtech dev"
-          git config --global user.email "dev@boomte.ch"
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Run build
-        run: npm run build
-
-      - name: Run build
-        run: git status
-        
-
-      - name: Bump version (patch)
-        run: |
-            npm version patch
-            git push origin main
-          
-
-      - name: Configure npm for authentication
-        run: echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}" > ~/.npmrc
-
-      - name: Publish to npm
-        run: npm publish
-        env:
-            NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+name: Publish to npm
+
+on:
+  push:
+    branches:
+      - main_needtofix
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org/'
+
+      - name: Set Git user configuration
+        run: |
+          git config --global user.name "Boomtech dev"
+          git config --global user.email "dev@boomte.ch"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run build
+        run: npm run build
+
+      - name: Run build
+        run: git status
+        
+
+      - name: Bump version (patch)
+        run: |
+            npm version patch
+            git push origin main
+          
+
+      - name: Configure npm for authentication
+        run: echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}" > ~/.npmrc
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+            NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 sam-mfb
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 sam-mfb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,36 +1,36 @@
-# Boom Calendar
-
-Powerful and customizable calendar package.
-
-# Installation
-
-```js
-    npm install --save platform-calendar-seatmap
-```
-
-# Code Example
-
-Here's an example of basic usage:
-
-```js
-import React from 'react';
-import SeatMap from 'platform-calendar-seatmap';
-
-const App = () => {
-	return <SeatMap />;
-};
-
-export default App;
-```
-
-How to start project locally:
-
-npm i in root directory
-
-npm start in root directory
-
-npm i in example folder
-
-npm start in example folder
-
-Full documentation is on the way.
+# Boom Calendar
+
+Powerful and customizable calendar package.
+
+# Installation
+
+```js
+    npm install --save platform-calendar-seatmap
+```
+
+# Code Example
+
+Here's an example of basic usage:
+
+```js
+import React from 'react';
+import SeatMap from 'platform-calendar-seatmap';
+
+const App = () => {
+	return <SeatMap />;
+};
+
+export default App;
+```
+
+How to start project locally:
+
+npm i in root directory
+
+npm start in root directory
+
+npm i in example folder
+
+npm start in example folder
+
+Full documentation is on the way.

package/custom.d.ts

@@ -1,8 +1,8 @@
-declare module '*.svg' {
-	import * as React from 'react';
-	const ReactComponent: React.FC<React.SVGProps<SVGSVGElement> & { title?: string }>;
-
-	export default ReactComponent;
-}
-
-declare module '*.module.css';
+declare module '*.svg' {
+	import * as React from 'react';
+	const ReactComponent: React.FC<React.SVGProps<SVGSVGElement> & { title?: string }>;
+
+	export default ReactComponent;
+}
+
+declare module '*.module.css';

package/dist/canvas/CanvasRegistry.d.ts

@@ -0,0 +1,47 @@
+import { CanvasRenderer } from './CanvasRenderer';
+import { CanvasSeat } from './types';
+export interface CanvasElementEntry {
+    elementId: string | number;
+    elementType: string;
+    elementTitle: string;
+    renderer: CanvasRenderer;
+    canvas: HTMLCanvasElement;
+}
+/**
+ * Global registry of all canvas-rendered seat elements.
+ * MouseSeatSelector uses this to perform hit-testing on canvas elements.
+ */
+declare class CanvasRegistryClass {
+    private entries;
+    register(entry: CanvasElementEntry): void;
+    unregister(elementId: string | number): void;
+    /**
+     * Given a pointer position, find the canvas element under the pointer
+     * and hit-test its spatial index.
+     */
+    hitTestAll(clientX: number, clientY: number): {
+        entry: CanvasElementEntry;
+        seat: CanvasSeat;
+    } | null;
+    /**
+     * Find the canvas element entry whose canvas contains the given point.
+     */
+    findCanvasAt(clientX: number, clientY: number): CanvasElementEntry | null;
+    /**
+     * Query all seats within a screen-space rectangle from a specific element's canvas.
+     */
+    queryRectInElement(elementId: string | number, screenLeft: number, screenTop: number, screenRight: number, screenBottom: number): CanvasSeat[];
+    getEntry(elementId: string | number): CanvasElementEntry | undefined;
+    getAllEntries(): CanvasElementEntry[];
+    /**
+     * Set preview-selected seat IDs on a specific element's renderer and redraw.
+     * Used during mouse drag selection to highlight seats in real-time.
+     */
+    setPreviewSelection(elementId: string | number, ids: Set<string | number>): void;
+    /**
+     * Clear preview selection on a specific element's renderer.
+     */
+    clearPreviewSelection(elementId: string | number): void;
+}
+export declare const CanvasRegistry: CanvasRegistryClass;
+export {};

package/dist/canvas/CanvasRenderer.d.ts

@@ -0,0 +1,54 @@
+import { CanvasSeat, SeatDrawOptions } from './types';
+import { HitTestIndex } from './HitTestIndex';
+export declare class CanvasRenderer {
+    private canvas;
+    private ctx;
+    private dpr;
+    private logicalWidth;
+    private logicalHeight;
+    readonly hitIndex: HitTestIndex;
+    private lastSeats;
+    private lastOptions;
+    constructor(canvas: HTMLCanvasElement);
+    /**
+     * Set the logical (CSS) size of the canvas and adjust for device pixel ratio.
+     */
+    setSize(width: number, height: number): void;
+    getLogicalSize(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Convert a mouse/pointer event position to local canvas coordinates.
+     */
+    eventToLocal(clientX: number, clientY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Convert local canvas coordinates to screen (client) coordinates.
+     */
+    localToScreen(localX: number, localY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Clear the canvas and redraw all seats.
+     */
+    render(seats: CanvasSeat[], options: SeatDrawOptions): void;
+    /**
+     * Rebuild the hit-test index with the given seats.
+     */
+    buildHitIndex(seats: CanvasSeat[]): void;
+    /**
+     * Full draw cycle: rebuild index + render.
+     */
+    draw(seats: CanvasSeat[], options: SeatDrawOptions): void;
+    /**
+     * Update the preview-selected seat IDs and immediately redraw.
+     * Used by MouseSeatSelector to highlight seats during drag gestures.
+     */
+    setPreviewSelection(ids: Set<string | number>): void;
+    getCanvas(): HTMLCanvasElement;
+    destroy(): void;
+}

package/dist/canvas/HitTestIndex.d.ts

@@ -0,0 +1,32 @@
+import { CanvasSeat, HitTestResult } from './types';
+/**
+ * Spatial index for efficient (x, y) -> seat lookup on canvas.
+ * Uses a flat grid approach: divide the canvas into cells, each cell
+ * contains references to seats whose bounding box overlaps it.
+ */
+export declare class HitTestIndex {
+    private seats;
+    private seatById;
+    private seatByCoord;
+    private cellSize;
+    private grid;
+    private boundsMinX;
+    private boundsMinY;
+    constructor(cellSize?: number);
+    clear(): void;
+    build(seats: CanvasSeat[]): void;
+    /**
+     * Find the seat at the given local (canvas) coordinates.
+     * Returns null if no seat is at that position.
+     */
+    hitTest(localX: number, localY: number): HitTestResult | null;
+    /**
+     * Find all seats whose bounding box overlaps the given rectangle.
+     * Coordinates are in local (canvas) space.
+     */
+    queryRect(rx: number, ry: number, rw: number, rh: number): CanvasSeat[];
+    getSeatById(id: string | number): CanvasSeat | undefined;
+    getSeatByCoord(row: number, col: number): CanvasSeat | undefined;
+    getAllSeats(): CanvasSeat[];
+    getSeatsCount(): number;
+}

package/dist/canvas/SeatDrawer.d.ts

@@ -0,0 +1,6 @@
+import { CanvasSeat, SeatDrawOptions } from './types';
+export declare function drawSeat(ctx: CanvasRenderingContext2D, seat: CanvasSeat, options: SeatDrawOptions): void;
+export declare function drawArcWedge(ctx: CanvasRenderingContext2D, cx: number, cy: number, innerR: number, outerR: number, startDeg: number, endDeg: number, fillColor: string, hideInnerHole?: boolean): void;
+export declare function drawArcRowBanding(ctx: CanvasRenderingContext2D, cx: number, cy: number, innerR: number, outerR: number, startDeg: number, endDeg: number, rows: number, bandColor: string): void;
+export declare function drawTableShape(ctx: CanvasRenderingContext2D, cx: number, cy: number, width: number, height: number, shape: 0 | 1, // 0 = round, 1 = square
+color: string): void;

package/dist/canvas/index.d.ts

@@ -0,0 +1,7 @@
+export { CanvasRenderer } from './CanvasRenderer';
+export { CanvasRegistry } from './CanvasRegistry';
+export { HitTestIndex } from './HitTestIndex';
+export { drawSeat, drawArcWedge, drawArcRowBanding, drawTableShape } from './SeatDrawer';
+export { useCanvasElement } from './useCanvasElement';
+export type { CanvasSeat, CanvasElementConfig, HitTestResult, CanvasTooltipAnchor, SeatDrawOptions, T_SeatStatus, T_IconType } from './types';
+export type { CanvasElementEntry } from './CanvasRegistry';

package/dist/canvas/types.d.ts

@@ -0,0 +1,73 @@
+import { T_Seat, T_Ticket } from 'platform-calendar-helpers';
+import { T_SeatColors } from 'helpers/constants/seatColors';
+import { T_ElementType_SeatMap } from 'store/reducers/elementSelector/types';
+export type T_SeatStatus = 'available' | 'locked' | 'unassigned' | 'sold';
+export type T_IconType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface CanvasSeat {
+    id: string | number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    iconType: T_IconType;
+    status: T_SeatStatus;
+    selected: boolean;
+    hidden: boolean;
+    accessible: boolean;
+    locked: boolean;
+    label: string;
+    displayLabel?: string;
+    seatNumber?: string | number;
+    rowLabel?: string;
+    rowIndex: number;
+    colIndex: number;
+    seat: T_Seat;
+    ticketId?: number | string;
+    filteredOut: boolean;
+    filterHighlighted: boolean;
+    rotation?: number;
+}
+export interface CanvasElementConfig {
+    elementId: string | number;
+    elementType: T_ElementType_SeatMap;
+    elementTitle?: string;
+    seatSize: number;
+    seatGap: number;
+    seatColors: T_SeatColors;
+    soldSeatIds: Set<string | number>;
+    ticketIds: {
+        [key: string | number]: boolean;
+    };
+    ticketsByIds: {
+        [key: number]: T_Ticket;
+    };
+    ticketColors?: Record<string, string>;
+    isViewOnly: boolean;
+    showNumber: boolean;
+    currencySymbol: string;
+    highlightedTicketIds: string[];
+    hideTicketAssignmentColors: boolean;
+    flatNumbering?: boolean;
+    iconType: T_IconType;
+    /** When "full", displayLabel already contains "Row X, Seat Y" — tooltip should not add row/seat prefixes */
+    separator?: 'none' | 'hyphen' | 'dot' | 'space' | 'full';
+}
+export interface HitTestResult {
+    seatId: string | number;
+    seat: CanvasSeat;
+    screenX: number;
+    screenY: number;
+}
+export interface CanvasTooltipAnchor {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SeatDrawOptions {
+    hoveredSeatId: string | number | null;
+    preSelectedIds: Set<string | number>;
+    isViewOnly: boolean;
+    isEditActive: boolean;
+}

package/dist/canvas/useCanvasElement.d.ts

@@ -0,0 +1,25 @@
+import { CanvasRenderer } from './CanvasRenderer';
+import { CanvasElementConfig } from './types';
+import { T_Seat } from 'platform-calendar-helpers';
+interface UseCanvasElementOptions {
+    config: CanvasElementConfig;
+    seats: T_Seat[][];
+    computePosition: (rowIndex: number, colIndex: number, seat: T_Seat) => {
+        x: number;
+        y: number;
+        rotation?: number;
+    } | null;
+    canvasWidth: number;
+    canvasHeight: number;
+    padding?: number;
+}
+interface UseCanvasElementReturn {
+    canvasRef: (node: HTMLCanvasElement | null) => void;
+    rendererRef: React.RefObject<CanvasRenderer | null>;
+}
+/**
+ * Hook that manages a canvas element for rendering seats.
+ * Handles: drawing, hit-testing, tooltip, selection, hover.
+ */
+export declare function useCanvasElement(options: UseCanvasElementOptions): UseCanvasElementReturn;
+export {};

package/dist/components/actionsHandler/ActionsHandler.d.ts

@@ -4,6 +4,7 @@ type actions = {
         backgroundColor: string;
         ticketColors: Record<string, string>;
         seatSize: number;
+        zoomMode: 'buttons' | 'wheel' | 'both';
     }) | false;
     cancel: () => void;
     updateSeatMap: (seatMap: T_SeatMap) => void;

package/dist/components/app/App.d.ts

@@ -10,6 +10,7 @@ type T_Props = {
     tickets: T_Ticket[];
     seatMap: (T_SeatMap & {
         ticketColors?: Record<string, string>;
+        zoomMode?: 'buttons' | 'wheel' | 'both';
     }) | null;
     actionsRef: React.ForwardedRef<actions>;
     mode?: T_Mode;

package/dist/components/numberingSettings/NumberingSettings.d.ts

@@ -8,6 +8,8 @@ import { T_NumberingConfig } from 'helpers/constants/numberingStyles';
 type T_Props = {
     config: Partial<T_NumberingConfig>;
     onChange: (config: Partial<T_NumberingConfig>) => void;
+    /** Hide the "Include row prefix" option (e.g. for arc section which uses full format) */
+    hideRowPrefix?: boolean;
 };
 declare const NumberingSettings: FC<T_Props>;
 export { NumberingSettings };

package/dist/components/sceneContainer/SceneContainer.d.ts

@@ -1,6 +1,7 @@
 import { T_SceneTransform } from 'helpers/types/commons';
 type T_SceneContainerRef = {
     zoomToFit: () => void;
+    zoomToElement: (elementId: string) => void;
 };
 type T_Props = {
     wrapperRef: React.MutableRefObject<HTMLDivElement>;

package/dist/components/seatTooltip/SeatTooltip.d.ts

@@ -18,4 +18,6 @@ export interface T_SeatTooltipData {
     currencySymbol?: string;
     /** When true, rows are irrelevant — don't show row info in the tooltip */
     flatNumbering?: boolean;
+    /** When "full", label already contains "Row X, Seat Y" — never show row separately or add prefixes */
+    separator?: 'none' | 'hyphen' | 'dot' | 'space' | 'full';
 }

package/dist/components/seatTooltip/SeatTooltipPortal.d.ts

@@ -1,7 +1,13 @@
 import { FC, ReactNode } from 'react';
 import { T_SeatTooltipData } from './SeatTooltip';
+type T_TooltipAnchor = HTMLElement | {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
 type T_TooltipAPI = {
-    show: (data: T_SeatTooltipData, anchorEl: HTMLElement) => void;
+    show: (data: T_SeatTooltipData, anchor: T_TooltipAnchor) => void;
     hide: () => void;
 };
 export declare const useSeatTooltip: () => T_TooltipAPI;

package/dist/helpers/functions/seatMap.d.ts

@@ -1,4 +1,5 @@
-import { T_Seat, T_SeatMap, T_Element_ArcSection } from 'platform-calendar-helpers';
+import { T_Seat, T_SeatMap, T_Element, T_Element_ArcSection } from 'platform-calendar-helpers';
+import { T_Element_Aisle } from 'helpers/types/aisle';
 import { T_SelectedSeats } from 'store/reducers/elementSelector/types';
 declare const removeFakeElementsFromSeatMap: (_seatMap: T_SeatMap) => {
     elements: {
@@ -14,6 +15,7 @@ declare const removeFakeElementsFromSeatMap: (_seatMap: T_SeatMap) => {
     name: string;
     backgroundColor?: string;
     seatSize?: number;
+    zoomMode?: "buttons" | "wheel" | "both";
 };
 declare const addFakeElementsToSeatMap: (_seatMap: T_SeatMap) => T_SeatMap;
 /**
@@ -33,6 +35,14 @@ declare const getArcSectionBoundingBox: (arc: T_Element_ArcSection, seatSize?: n
  * (Previously this set locked:true on sold seats, which then got copied on paste/duplicate.)
  */
 declare const disableSoldSeats: (seatMap: T_SeatMap, _soldSeats: T_Seat[]) => T_SeatMap;
+/**
+ * Estimates the bounding box size of an element based on its type and properties.
+ * Uses heuristics since exact rendered size depends on DOM — this is intentionally approximate.
+ */
+declare const estimateElementSize: (element: T_Element | T_Element_Aisle, elementType: string) => {
+    width: number;
+    height: number;
+};
 type T_GetElementInitialPositionParams = {
     sceneCoords: {
         x: number;
@@ -66,4 +76,4 @@ declare const getElementInitialPosition: (params: T_GetElementInitialPositionPar
  * @returns true if the element has sold seats, false otherwise
  */
 declare const hasSoldSeats: (elementId: string | number, elementType: "tables" | "seatingGroup" | "arcSection", soldSeats: T_SelectedSeats[keyof T_SelectedSeats][]) => boolean;
-export { removeFakeElementsFromSeatMap, addFakeElementsToSeatMap, getElementInitialPosition, getArcSectionBoundingBox, disableSoldSeats, hasSoldSeats };
+export { removeFakeElementsFromSeatMap, addFakeElementsToSeatMap, getElementInitialPosition, getArcSectionBoundingBox, estimateElementSize, disableSoldSeats, hasSoldSeats };

package/dist/helpers/functions/statistics.d.ts

@@ -102,15 +102,17 @@ export type T_Statistics = {
     soldCount: number;
     availableCount: number;
     unassignedCount: number;
+    assignedCount: number;
     lockedCount: number;
     hiddenCount: number;
     occupancyPercentage: number;
 };
 /**
- * Calculate detailed seat statistics (unassigned, locked, hidden counts)
+ * Calculate detailed seat statistics (unassigned, assigned, locked, hidden counts)
  */
 export declare const calculateDetailedStatistics: (seatMap: T_SeatMap, soldSeats: T_SelectedSeats[keyof T_SelectedSeats][], tickets?: T_Ticket[]) => {
     unassignedCount: number;
+    assignedCount: number;
     lockedCount: number;
     hiddenCount: number;
 };