Simple seat mapper

npm install seat-mapper

// index.js | index.ts
import "seat-mapper"

<!-- Declare the node -->
<seat-mapper></seat-mapper>

<script>
  document.querySelector("seat-mapper")
  .addEventListener("change", (event) => {
    // Log the result of the visible map, normalized
    console.log(event.structure)
  })
</script>

import {h} from "preact"

export function MyTheater(props) {
  return (
    <seat-mapper
      initialStructure={JSON.stringify(props.initialStructure)}
      version={props.version}
      onChange={(event) => console.log(event.structure)}
    />
  )
}

Events in React are not correctly handled. You will need to create your own wrapper (not available for now).

The version changes only the model of the returning structure. It does not change the way the web-component works. The initial-structure will always be translated into internal model whatever its version is.

npm install
npm start

Go to http://localhost:8080/ for the test page.

Feather, by Cole Bemis: https://www.iconfinder.com/iconsets/feather