@openseat/renderer-konva

The pictogram a seat carries: wheelchair wins over companion. Null for other seats.

Maps a layout point through a selection transform (same matrix as core's transformObjects).

Start and end points of an arc marking, for drawing it as an SVG path.

The colour a section's or GA area's fill is drawn in, as a colour and an opacity: the tint (style or category colour) at AREA_TINT_ALPHA, or at full strength in "solid" mode; the theme fill when there is no tint.

Where an area's label sits, in its local space: the pole of inaccessibility of the boundary (the interior point furthest from the edges, so labels stay inside concave shapes), plus a section's labelOffset.

Paint of a GA area, booth or table in a visual state. Available keeps base; selected and held keep the fill and take the state's colour as a thicker outline; booked is greyed ("Sold out"); blocked is greyed and hatched ("Not for sale"). Greyed labels keep AA contrast.

Bounds used for indexing. Rows have no shape of their own, but their labels still need culling: with seatsOf the bounds cover the labels at both ends (null when the row shows none); without it, a label left of row.position.

Light tint and stronger stroke of a category (or style) colour, for GA areas and booths. The label is a dark shade of the colour when that keeps AA contrast (4.5:1) on the tint, else the theme's label colour.

The selection transform that takes the proxy from initialRect to finalAttrs (Konva's attributes after the user dragged the transformer): pivot = initial centre, translate = new centre - pivot, rotation and scale relative to the initial rect.

Margin around a fitted layout: 32 px, or 4% of a small container's shorter side (at least 10 px).

Default hit rules. View mode: seats, zones (GA areas and sections shown as zones, showSeats: false, sold by quantity) and booths with an inventory key. Edit mode: everything but rows. The rows, seats and tables inside a zone section are never hit (the scene suppresses them).

The pieces of a divider (a path with a caption) that are drawn, in its local space: the polyline with the stretch under the caption cut out, so the line stops on both sides of the text. gap is the length cut out, centred caption.distance along the path. A closed path is walked back to its first point.

The row labels that are drawn: core resolveRowLabelPlacements (each label pushed outward along the row until it clears every drawn seat in the layout), without the ones that could not be cleared. Without a layout (a preview of objects not added yet) the plain placements are used.

Edge auto-pan: the pan step (screen pixels per frame, ready for panBy) while a drag holds the pointer within margin pixels of the container edge. Zero when the pointer is further in. The step grows linearly to maxStep at the edge (and beyond it), and moves the content so that more of the side the pointer is near comes into view.

IDs of objects hidden themselves or through an ancestor. Cheap when nothing is hidden, which is the common case for large booking maps.

Escapes text for use in SVG element content and attribute values. Code points that XML cannot represent at all are removed, so a stray control character in a label never makes the document unparseable.

The markings of a rink, court or pitch, scaled to the stage's width and height. The long side is the length of the field, so a stage taller than it is wide gets a vertical field. Pure: the canvas and SVG renderers both draw exactly these shapes. Empty without (or with unknown) markings.

• rink: red centre line, blue lines at ±1/6 of the length, a centre circle (radius 0.12 × width of the ice), four face-off circles, and red goal lines with half-circle creases 0.06 × length from each end;
• court: centre line, centre circle and two key rectangles;
• pitch: halfway line, centre circle and two penalty boxes.

Viewport that fits bounds inside size with padding screen pixels on every side, centred.

Paint of a GA area, drawn as a zone (see zonePaintOf): its style or category colour as the tier tint, mixed toward white as an opaque pastel fill with a tier-colour border and a dark label of at least 4.5:1 contrast. Booked is the sold-out paint (light grey, grey text); blocked (Not for sale) is the same with a hatch. areaFillMode no longer changes zones: their fill is opaque in both modes.

Path data of a pictogram.

Scale from path units to layout units that fits a pictogram inside a seat of radius radius. compact halves it (seat labels are shown, and the pictogram moves below the number).

Grid line spacing in layout units for a grid of size at scale: the grid size, doubled until lines are at least minPx screen pixels apart, so a zoomed-out grid never turns into a solid fill.

The tooltip for a handle hit, or null for no hit.

Diagonal hatch lines (running from lower left to upper right) clipped to an outline, as segments in its local space. Computed geometrically rather than with a clip path, so the SVG export needs no <clipPath> references.

Spacing of hatch lines for an outline whose shorter side is size: about six lines across, at least 4 units apart.

Stroke width of the hatch lines drawn over an outline.

Stroke width of hatch lines at a given spacing.

The row handle under point, within radius layout units.

The vertex or midpoint handle under point (vertices win), within radius layout units.

The inventory key of an object sold as a unit, which seat state maps (and booking statuses) use for it: a GA area's or booth's inventoryId, the object ID of a table booked as a whole, or the ID of a section shown as a zone (showSeats: false). Undefined for everything else.

True for a seat flagged wheelchair or companion.

Whether a click adds to the selection: Shift or Cmd (meta) anywhere, Ctrl everywhere but macOS, where Ctrl+click opens the context menu instead.

True on macOS, where Ctrl+click is a secondary (context menu) click rather than an additive one.

True when a seat carries the "marked" tag.

True when keyboard input is going to a text field, so canvas shortcuts (Space to pan, for example) must not react.

True for an object drawn as a zone: a GA area, or a section shown as a zone (showSeats: false).

Dark or light label text, whichever contrasts more with fill.

Konva fontStyle for a label's bold and italic flags.

Renders a layout as a standalone SVG document: venue, areas, zones, stages, booths, tables, seats (coloured by category or seat state, with the wheelchair pictogram or companion mark on accessible seats), labels, dividers, row labels and section titles. Text goes where the canvas puts it at the "detail" level (core label layout): section titles in a header band clear of the seats, row labels pushed off seats, zone sections labelled inside. Deterministic for a given input, with all text XML-escaped. The viewBox is the content bounds (venue and titles included) plus padding. Hidden objects are skipped, and so is everything inside a hidden row, table or section and the contents of zone sections (showSeats: false), which draw as one zone; sections with outline "none" draw only their title, as in view mode.

Stroke colour of a field marking: the theme's rink red or blue, or a line that contrasts with the stage fill.

Member kind for an object's main node.

The shorter side of an outline's box, which sets its hatch spacing.

Transformer rotation snapping: every 15 degrees by default (0, 15 … 345, within 7.5 degrees, so every angle snaps), right angles with Shift (within 10 degrees), and free rotation with Alt.

SVG path data of a closed polygon with its corners rounded by radius (core roundedPolygonPath: each corner clamped to half of its edges). Arcs are SVG A commands, so Konva and SVG draw true arcs.

Seats to add (positive) or remove (negative) at a handle's end for a pointer at pointer: the pointer projected onto the end tangent, in whole seat spacings. Never removes more than seatCount - 1 seats.

The two "+" handles of a row, beyond its first and last seat. Empty for a row without seats.

Where a row's start label is anchored.

Layout-space box of a row label drawn at placement.

Where a row's labels would go before they are pushed clear of seats: before the first seat and/or after the last one along the row's tangent, following row.labelPosition. seats are the row's seats in row order.

The renderer and the SVG export draw core resolveRowLabelPlacements instead (see drawnRowLabels), which moves a label off any seat it would cover and leaves out one that cannot be cleared.

Slot spacing used to turn a handle drag into a seat count: the layout's, else the first gap.

Viewport that scrolls the minimum distance needed to bring bounds fully on screen (with padding), without changing zoom. Used for keyboard focus.

A seat's radius: a circle's radius, or half the shorter side of a rectangle.

Colour of a section's label: the theme colour, or (over a solid fill) dark or white text, whichever reads better on the fill.

The size a section label is drawn at: its labelSize (default 16), but no more than 0.45 × the shorter side of the outline's box in section space, so a label fits inside a small section. Never shrunk below 8.

Corner radius a stage is drawn with: its own cornerRadius, else theme.stage.cornerRadiusFraction × its shorter side (rect and thrust stages; round stages are not rounded further).

The text a stage shows: its label, upper-cased when the theme says so.

Paint of a stage: its own style where set, the theme's stage colours otherwise (a soft light grey with a thin border and a muted label). A stage with its own fill (a sports field, a dark stage) keeps it, with dark or white label text, whichever reads better on it.

SVG path data of a stage's outline in its local space (core stageOutline): a rounded rect, a thrust (T) with a runway toward the audience, an ellipse, or a semicircle. Corners are rounded by stageCornerRadius.

IDs of objects that are not drawn and cannot be hit: hidden ones (effectivelyHidden) plus the rows, tables and seats of sections shown as zones (showSeats: false), whatever the mode. A zone section is drawn as one zone instead; its contents stay in the document.

Where a member node goes for a selection transform, from its pose when the transform started. For "scaled" nodes the node is stretched by how much the map stretches its own axes, and turned to follow its local +x axis.

True when a seat of radius layout units, drawn at pixelsPerUnit, gets the ring instead of the pictogram.

Layout-space bounds of a venue outline.

The venue outline plus its name when shown.

Layout-space box of a venue's name, or null when it is not shown.

Where a venue's name is drawn: centred above the outline's top edge, its baseline about half a font size above it. at is the centre of the text.

Vertex handles of an object with an editable outline (section, GA area, polygon, aisle, path), or null.

Layout-space rectangle visible on screen, grown by margin screen pixels so edges do not pop in.

Decides what a wheel event does:

• Ctrl or Cmd zooms (a trackpad pinch arrives as wheel + ctrlKey);
• in "zoom" mode a plain wheel zooms at the cursor, unless the movement is mostly horizontal (a trackpad swipe) or Shift is held, which pans;
• in "pan" mode a plain wheel pans. Shift with a vertical-only wheel pans horizontally.

#rrggbb (or #rgb) colour with an alpha channel, as rgba(...). Other formats are returned unchanged.

Corner radius a zone is drawn with: its own cornerRadius, else the theme fallback for zone sections (GA areas: none).

Paint of a zone (a GA area, or a section shown as a zone) in a visual state: its style or category colour as the tier tint (else the theme's GA or section outline colour) through zoneStatePaint. An available zone keeps its own style.stroke.

SVG path data of a zone's outline in its local space, its corners rounded by zoneCornerRadius.

Paint of a zone (a GA area or a section shown as a zone) in tier colour tint and a visual state. Available: the theme's zonePaint (pastel fill, tier-colour border, dark label). Selected and held keep it with the state's colour as a thicker outline. Booked is the theme's sold-out paint (light grey, grey text, no tint); blocked is the same plus the not-for-sale hatch.

Zooms by factor while keeping the layout point under screenPoint fixed, so zooming follows the cursor or pinch centre.

Turns raw pointer down/move/up into taps, drags and two-finger pinches.

DOM-free so it can be tested directly: the renderer feeds it pointer events and reacts to what it returns. Rules:

• one pointer that moves less than the threshold and lifts is a tap;
• one pointer that passes the threshold is a drag;
• a second pointer turns any drag into a pinch (the drag is cancelled);
• after a pinch, nothing else happens until every pointer has lifted, so lifting one finger does not cause a jump into a drag.

Renderer-independent model of what is drawn: object lookup, paint order, bounds, and a spatial index for culling and hit testing.

Updates are diffed by object reference, so hosts must update layouts immutably (replace an object to change it). That is what makes re-rendering a 2,000-seat layout after moving one seat cost one node, not 2,000.

The seat map renderer: draws a layout on a Konva canvas, in view mode (a booking map) or edit mode (the designer, with resize and rotate handles).

It lives in its own module, apart from SeatMapViewRenderer, so a page that only shows a map (a booking page, through BookingMap) never imports Konva's Transformer.

The seat map renderer without Konva's Transformer, for pages that only show and sell a layout (a booking map): everything SeatMapRenderer does, except that edit mode draws no resize or rotate handles. Bundlers then leave the Transformer out of such pages. Use SeatMapRenderer for editing.

How an area in a given state is painted, and whether it carries the not-for-sale hatch.

Category-coloured paint: a light tint of the colour as the fill, and a stronger shade of it as the stroke.

A drawing drag (see setDrawOnDrag). Points are in layout coordinates.

How a GA area is painted: fill (CSS colour, translucent for a tint), outline, label colour and state cues.

A transform of a whole selection through the group transformer.

An alignment guide: a vertical line at x = value or a horizontal line at y = value, in layout units.

What setHighlight emphasises. Everything else is dimmed.

Modifier keys held during a move.

Context some nodes need beyond the object itself.

A Konva node's own transform: Konva composes translate · rotate · scale.

The proxy rectangle as Konva sees it: (x, y) is the top-left corner before rotation.

What edit mode needs that a view-only page does not: Konva's Transformer (resize and rotate handles, about 7 kB gzip). SeatMapRenderer passes it; SeatMapViewRenderer leaves it out.