alisaitteke / seatmap-canvas

Typescript base multi-block supporting open source seat selection framework

Seatmap Canvas

Seatmap Canvas is an advanced, open-source library for interactive seat selection in various settings such as stadiums, theaters, and event spaces. Designed with d3.js, this code version is optimized for developers looking for a customizable and efficient solution to handle seat arrangements and user interactions.

Features

• React Integration: Designed specifically for React projects, offering a streamlined development experience.
• Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.
• Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.
• Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.
• Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.
• Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.

Screenshot

Planned

• React & React Native Integration
• Vue & Nuxt Integration
• Angular Integration

LIVE DEMO

What does it do?

In any organization

• Seat selection
• Seat categorizing
• Locating
• Turnstile and Gate information

Installation

npm i @alisaitteke/seatmap-canvas --save
OR
yarn add @alisaitteke/seatmap-canvas --save

Example Config

{
    "resizable": true,
    "seat_style": {
        "radius": 12,
        "color": "#6796ff",
        "hover": "#5671ff",
        "not_salable": "#424747",
        "selected": "#56aa45",
        "focus": "#435fa4",
        "focus_out": "#56aa45"
    },
    "block_style": {
        "fill": "#e2e2e2",
        "stroke": "#e2e2e2"
    },
    "label_style": {
        "color": "#000",
        "radius": 12,
        "font-size": "12px",
        "bg": "#ffffff"
    }
}

Usage

var seatmap = new SeatmapCanvas(".seats_container",config);

Seat Model

{
  "id": 1,
  "title": "49",
  "x": 0,
  "y": 0,
  "salable": true,
  "note": "note test",
  "color":"#ffffff",
  "custom_data": {
    "any": "things"
  }
}

Block Model

{
  "blocks": [
    {
      "id": 1,
      "title": "Test Block 1",
      "color": "#2c2828",
      "labels": [
        {
          "title": "A",
          "x": -30,
          "y": 0
        },
        {
          "title": "B",
          "x": 120,
          "y": 30
        }
      ],
      "seats": [
        {
          "id": 1,
          "x": 0,
          "y": 0,
          "salable": true,
          "note": "note test",
          "title": "49"
        },
        {
          "id": 2,
          "x": 30,
          "y": 0,
          "salable": true,
          "note": "note test",
          "title": "47"
        }
      ]
    }
  ]
}

Set Block Data

seatmap.setData(data);

Seat Click Trigger

seatmap.addEventListener("seat_click", (seat) => {
    console.log(seat);
    if (seat.selected) {
        seatmap.seatUnselect(seat);
    } else {
        seatmap.seatSelect(seat);
    }
});

Activated unsalable seat click

click_enable_sold_seats param add to config object

let config = {
    click_enable_sold_seats: true // default false
}

Get selected seat

seatmap.addEventListener("seat_click", (seat) => {
    var selectedSeats = seatmap.getSelectedSeats();
});

Complete Example Code

var config = {
    "resizable": true,
    "seat_style": {
        "radius": 12,
        "color": "#6796ff",
        "hover": "#5671ff",
        "not_salable": "#424747",
        "selected": "#56aa45",
        "focus": "#435fa4",
        "focus_out": "#56aa45"
    },
    "block_style": {
        "fill": "#e2e2e2",
        "stroke": "#e2e2e2"
    },
    "label_style": {
        "color": "#000",
        "radius": 12,
        "font-size": "12px",
        "bg": "#ffffff"
    }
}

var seatmap = new SeatmapCanvas(".seats_container",config);
seatmap.addEventListener("seat_click", (seat) => {
    console.log(seat);
    if (seat.selected) {
        seatmap.seatUnselect(seat);
    } else {
        seatmap.seatSelect(seat);
    }
});
var data = {
    "blocks": [
        {
            "id": 1,
            "title": "Test Block 1",
            "color": "#2c2828",
            "labels": [
                {
                    "title": "A",
                    "x": -30,
                    "y": 0
                },
                {
                    "title": "B",
                    "x": 120,
                    "y": 30
                }
            ],
            "seats": [
                {
                    "id": 1,
                    "x": 0,
                    "y": 0,
                    "salable": true,
                    "note": "note test",
                    "title": "49"
                },
                {
                    "id": 2,
                    "x": 30,
                    "y": 0,
                    "salable": true,
                    "note": "note test",
                    "title": "47"
                }
            ]
        }
    ]
}

// SET SEATS DATA
seatmap.setData(data);

Contributors

Ali Sait Teke [email protected]

seatmap-canvas's Issues

Could not find a declaration file for module

Describe the bug
When installing in the Typescript project, I encountered the following issue:
Could not find a declaration file for module '@alisaitteke/seatmap-canvas'.

To Reproduce
Steps to reproduce the behavior:

1. Install this lib through yarn
2. Import SeatMapCanvas in the typescript file

Expected behavior
The module has a properly declared file

Screenshots

Additional context
I tried to find the root cause, then I saw you declare the types field in package.json: "types": "dist/index.d.ts",. But in the node_modules when I install the module, the path of the declaration file is dist/type.d.ts as below:

So we need to correct this path, if you agree, I can create the PR to resolve it.

Zoom not working correctly when seat map is not visible when you load the page.

Description
When the zoom is set to display the full seat setup, but the map is not initially loaded at the top of the page, the zoom function does not work correctly. The map fails to load the zoomed-in version as expected.

Additionally, this issue complicates the ticket selection process. Users are required to zoom out and then zoom in again to select their seats, resulting in a poor customer experience.

Steps to Reproduce
Open the page with the seat map.
Ensure the map is not loaded at the top of the page.
Set the zoom to display the full seat setup.
Observe that the map does not load the zoomed version correctly.
Attempt to select a ticket, noting the need to manually zoom out and then zoom in again.
Expected Behavior
The map should correctly load the zoomed-in version regardless of its initial position on the page, allowing users to easily select tickets without additional zoom adjustments.

Actual Behavior
The map fails to load the zoomed-in version, requiring users to manually adjust the zoom, leading to a frustrating user experience.

Impact
This issue significantly affects the user experience by making the ticket selection process cumbersome and inefficient.

Suggested Fix
Investigate and ensure the zoom functionality works correctly regardless of the map's initial position on the page. Implement a solution that allows the map to load the zoomed-in version directly, enhancing the overall user experience.

[Question]: Is there any way to import my SVG seatmap file for use?

Hello @alisaitteke 👋 , I'm testing your seat map, and it's very smooth—great work! I was wondering if there's a way for me to import my seat map SVG file in a specific format to use with your package. Do you have any suggestions for my use case? I'm eager to hear your thoughts. Thank you in advance!

Create seating plan

Thanks for the great library.it is very helpful.

How do you create the maps in JSON file? is there a tool for that or you have to create Manuel?

How do I use it in Vue or React

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

güncelleme gelecek mi?

Merhaba, kütüphane için öncelikle teşekkür ederim. Uygulama hakkında bi kaç sorum var.

1. sahne gibi mekanlarda bulunan yerlerin gösterimi nasıl yapabiliriz?
2. Mobil cihazlarda zoom out yaparken çok fazla uzaklaşma oluyor ve zoom out'u kapatma gibi şansımız yok mu?