Draw a seating chart using SVG and Angular.

Math & Geometry is not needed anymore after school? Think twice!

Published in

CodeX

5 min readOct 14, 2022

Some time ago, we were commissioned by an event organizer company to help them transform how they operated in the events industry. The company wanted to expand its presence in the region by building a product that would compete with big platforms like TicketMaster and modernize how they organize and manage all kinds of events.

So we went into brainstorming and designing a bunch of features tailored for all kinds of events, like event setup, ticket template customization, event check-in, payment gateway integrations, email marketing module, customer support, finance, etc.

As a frontend developer, when you want to evaluate the most difficult part of these types of platforms, after your research, I bet you would most definitely say it’s the venue designer. The event venue can be a theatre, a stadium, a multi-floor building, or a custom setup built in an open space or indoors. With the “nothing is impossible” reputation that technology has earned nowadays, as an event organizer, you would want a level of venue customization, ideally a designer tool to be able to draw different area shapes and seating rows.

Drawing a polygon inside the venue designer tool — Venue designer tool

Furthermore, these types of tools have already been invented by other companies. So it’s nothing new, right?

What does the market provide?

As developers, we always have a sense of certainty that we can “Google” it, or we can “StackOverflow” it, but here comes the bad news!

You can’t find anything decent about this topic.

Going through the web and conducting competitive research, you can find some business models that provide this type of service, but they offer it bundled with the ticket-selling feature and then…

Yeah, you guessed it, it charges you for each ticket sold, so basically you “win” a royalty partner bundled with everything. So it’s a convenient marriage, not a desired one.

Choosing the framework

In the process of framework decision, we went with Angular because it offers very good DOM access and manipulation, which is a must when it comes to drawing shapes in the browser and listening to DOM events.

Secondly, the project was already being developed in Angular, so it felt quite natural to continue with the same technology framework.

SVG vs HTML5 Canvas

Starting to draw a venue template in the browser using Javascript, you quickly realize that there aren’t many choices. You can either go with SVG or Canvas. I am not going to explain the pros and cons of choosing one over the other, because there are some very good articles out there with tons of references. I would recommend reading this article, which I believe will be enough to help you decide which option to choose.

At the time, I went with SVG since I wasn’t expecting a heavy browser interaction. Also, SVG is very good for debugging and resolution independent, which was perfect for me wanting to render the scene on different device types.

How to play with DOM

Now it’s time to interact with the DOM. If you don’t know what it is, here is a quick sentence for you to get onboard quickly:

“The Document Object Model is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

If you come from a JavaScript background, you are familiar with native methods like:

getElementById() method which returns an Element Object, allowing to interact with this object.
setAttribute() sets the value of an attribute on the specified element.
setProperty() sets a new value for a property on a CSS style declaration object.

Even if you are familiar with the methods above and they can be used inside Angular, let’s not forget that this framework offers a lot of good features to interact with the DOM. The best practice here is to keep the rendering logic in directives so it doesn’t get mixed up with the presentation logic written in components. It goes like this:

@Component({
  selector: 'app-root',
  template: `<svg 
               appSvg 
               style="border: 1px solid black;" 
               width="1000" 
               height="700" 
               xmlns="<http://www.w3.org/2000/svg>">
             </svg>`,
})export class AppComponent {}@Directive({
  selector: '[appSvg]'
})export class SvgDirective implements OnInit {  constructor(private element: ElementRef, 
              private renderer: Renderer2) {}
 
  ngOnInit(): void {
    this.renderer.setAttribute(this.element.nativeElement, '');
  }  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent): void {
    // Interact with DOM when you click inside the SVG 
  }
	
  @HostListener('mousemove', ['$event'])
  onMouseMove(event: MouseEvent): void {
    // Interact with DOM when you are moving the mouse
  }  @HostListener('mouseup', ['$event'])
  onMouseUp(event: MouseEvent): void {
    // Interact with DOM to cleanup and reset the state
  }}

So basically, we have:

ElementRef — it helps to access DOM elements from the component. Since we are using the directive selector name “[appSvg]” inside the <svg> tag, we are accessing the reference of the SVG element.
Renderer — makes it possible to modify elements safely and without touching the DOM directly. It can also be used to implement custom rendering and intercept rendering calls.
HostListener — an angular decorator used to register event listeners so we can track mouse events happening in real-time.