Skip to main content

​
Overview

The ZoneNode represents a room, space, or designated zone within a level. Zones are defined by a polygon boundary and include visual styling (color) for rendering. They’re used for space planning, room identification, and area calculations. Key features:
  • Polygon-based zone definition
  • Named spaces for organization
  • Color-coded visual representation
  • Custom metadata support

​
Type Signature

import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'

const ZoneNode = BaseNode.extend({
  id: objectId('zone'),
  type: nodeType('zone'),
  name: z.string(),
  polygon: z.array(z.tuple([z.number(), z.number()])),
  color: z.string().default('#3b82f6'),
  metadata: z.json().optional().default({}),
})

type ZoneNode = z.infer<typeof ZoneNode>
Source: /home/daytona/workspace/source/packages/core/src/schema/nodes/zone.ts

​
Fields

​
Inherited from BaseNode

​
id
string
required
Unique zone identifier.Format: zone_{randomString}Example: "zone_a1b2c3d4e5f6g7h8"
​
type
string
required
Always set to "zone".Default: "zone"
​
parentId
string | null
required
Reference to the parent level’s ID.Example: "level_abc123"Default: null
​
visible
boolean
Controls zone visibility.Default: true
​
camera
CameraSchema
Optional camera viewpoint for the zone.

​
Zone-Specific Fields

​
name
string
required
Name of the zone/room.Required for ZoneNode (overrides optional name in BaseNode)Examples:
  • "Living Room"
  • "Master Bedroom"
  • "Kitchen"
  • "Conference Room A"
  • "Storage Area"
​
polygon
Array<[number, number]>
required
Array of 2D points defining the zone boundary.Format: Array of [x, z] coordinates in metersExample:
[
  [0, 0],
  [6, 0],
  [6, 8],
  [0, 8]
]
The polygon defines the room boundary in the level coordinate system. The renderer will automatically close the polygon by connecting the last point to the first.
​
color
string
required
Hex color code for visual styling of the zone.Default: "#3b82f6" (blue)Format: Hex color string (e.g., "#FF0000", "#3b82f6")Examples:
  • "#3b82f6" - Blue (default)
  • "#10b981" - Green
  • "#f59e0b" - Orange
  • "#ef4444" - Red
  • "#8b5cf6" - Purple
Used to differentiate zones visually in the 3D scene and floor plans.
​
metadata
any
required
Custom metadata for the zone.Default: {}Common use cases:
  • Room area calculations
  • Space type classification
  • Occupancy information
  • HVAC zone assignments
  • Custom properties
Example:
{
  "area": 48.5,
  "roomType": "living",
  "capacity": 12,
  "hvacZone": "zone-a"
}

​
Example

import { ZoneNode } from '@pascal/core/schema/nodes/zone'

const zone: ZoneNode = {
  object: 'node',
  id: 'zone_abc123',
  type: 'zone',
  name: 'Living Room',
  parentId: 'level_xyz789',
  visible: true,
  polygon: [
    [0, 0],
    [8, 0],
    [8, 6],
    [0, 6],
  ],
  color: '#3b82f6',
  metadata: {
    area: 48,
    roomType: 'living',
    furnished: true,
    windows: 2,
  },
}

​
Usage

​
Creating a Simple Zone

import { ZoneNode } from '@pascal/core/schema/nodes/zone'

const livingRoom = ZoneNode.parse({
  name: 'Living Room',
  polygon: [
    [0, 0],
    [8, 0],
    [8, 6],
    [0, 6],
  ],
})
// Uses default blue color

​
Creating Zones with Different Colors

const bedroom = ZoneNode.parse({
  name: 'Master Bedroom',
  polygon: [
    [8, 0],
    [14, 0],
    [14, 6],
    [8, 6],
  ],
  color: '#10b981', // Green
})

const kitchen = ZoneNode.parse({
  name: 'Kitchen',
  polygon: [
    [0, 6],
    [6, 6],
    [6, 10],
    [0, 10],
  ],
  color: '#f59e0b', // Orange
})

const bathroom = ZoneNode.parse({
  name: 'Bathroom',
  polygon: [
    [6, 6],
    [8, 6],
    [8, 8],
    [6, 8],
  ],
  color: '#3b82f6', // Blue
})

​
Creating an L-Shaped Zone

const lShapedRoom = ZoneNode.parse({
  name: 'Open Plan Living',
  polygon: [
    [0, 0],
    [10, 0],
    [10, 5],
    [5, 5],
    [5, 10],
    [0, 10],
  ],
  color: '#8b5cf6',
})

​
Creating Zones with Metadata

const conferenceRoom = ZoneNode.parse({
  name: 'Conference Room A',
  polygon: [
    [0, 0],
    [12, 0],
    [12, 8],
    [0, 8],
  ],
  color: '#ef4444',
  metadata: {
    area: 96,
    capacity: 20,
    equipment: ['projector', 'whiteboard', 'video conference'],
    bookable: true,
    floor: 2,
  },
})

​
Creating Multiple Zones for a Floor Plan

const apartmentZones = [
  ZoneNode.parse({
    name: 'Living Room',
    polygon: [[0, 0], [8, 0], [8, 6], [0, 6]],
    color: '#3b82f6',
  }),
  ZoneNode.parse({
    name: 'Kitchen',
    polygon: [[8, 0], [12, 0], [12, 6], [8, 6]],
    color: '#f59e0b',
  }),
  ZoneNode.parse({
    name: 'Bedroom 1',
    polygon: [[0, 6], [6, 6], [6, 12], [0, 12]],
    color: '#10b981',
  }),
  ZoneNode.parse({
    name: 'Bedroom 2',
    polygon: [[6, 6], [12, 6], [12, 12], [6, 12]],
    color: '#10b981',
  }),
  ZoneNode.parse({
    name: 'Bathroom',
    polygon: [[4, 12], [8, 12], [8, 14], [4, 14]],
    color: '#06b6d4',
  }),
]

​
Zone Visualization

Zones are typically rendered in the 3D scene as:
  • Colored overlay on the floor
  • Semi-transparent fill with the specified color
  • Labels showing the zone name
  • Boundary outlines
Top View:
┌──────────┬──────┐
│          │      │
│  Living  │ Kit. │  ← Colored zones
│   Room   │      │
├──────┬───┴──────┤
│ Bed  │   Bed    │
│  1   │    2     │
└──────┴──────────┘

​
Coordinate System

Zones use 2D coordinates in the level’s XZ plane:
  • X axis: horizontal (left-right)
  • Z axis: horizontal (front-back)
  • Y axis: implied by level elevation (zones are at floor level)

​
Use Cases

  • Room definitions for residential and commercial spaces
  • Space planning and area allocation
  • Color-coded floor plans for different room types
  • Area calculations for real estate and construction
  • Functional zones (public, private, service areas)
  • HVAC and building systems zone assignment
  • Occupancy tracking and space management
  • BaseNode - Inherited base fields
  • LevelNode - Parent node containing zones
  • SlabNode - Floor slabs (similar polygon structure)

Build docs developers (and LLMs) love

Get started for freeTalk to us