Developer Docs

Appearance

Floor Plan SDK API reference ​

FloorPlanEngine ​

The main class for interacting with the floor plan engine.

Constructor ​

ts
constructor({ container, options }: { container?: Element; options?: FpeConfig })

Creates a new FloorPlanEngine instance.

  • container: The DOM element to render the floor plan in.
  • options: Configuration options (see FpeConfig)

Example:

js
const container = document.getElementById('floor-plan-container')
const floorPlan = new FloorPlanEngine({
  container,
  options: {
    // ...
  }
})

Properties ​

  • fpeNode: The HTMLElement containing the floor plan.
  • view: The WebGlView instance handling the rendering.
  • interaction: Manages user interactions with the floor plan.
  • availableHelpers: A record of available helper classes.
  • helper: Instantiated helper objects.

Update settings ​

set ​

ts
set(args: FpeConfig): void

Updates the floor plan engine configuration. See FpeConfig for options.

Load methods ​

loadFloorById ​

ts
loadFloorById(floorId: string, accessTokenOptions?: TokenOptions): Promise<boolean | Error>

Loads a floor by its unique identifier.

loadSpaceGraphJson ​

ts
loadSpaceGraphJson(spaceGraphJson: SpaceGraphJson): void

Loads a SpaceGraphJson into the engine.

Zoom methods ​

zoomExtents ​

ts
zoomExtents(margin?: number, animate?: Animate, boundingBox?: BoundingBox2d): Promise<boolean>

Zooms to the extent of the scene in the viewport.

zoomToElement ​

ts
zoomToElement(node: string | LayoutElement | LayoutSpace, margin?: number, animate?: Animate): Promise<boolean | Error>

Zooms to the bounding box of an element.

setZoom ​

ts
setZoom(bb: BoundingBox2d, animate?: Animate): Promise<boolean>

Sets zoom to a specific bounding box.

zoomByFactor ​

ts
zoomByFactor(factor: number, animate?: Animate): Promise<boolean>

Zooms the current view by a factor.

Marker / window methods ​

addInfoWindow ​

ts
addInfoWindow(args?: InfoWindowArgs): InfoWindow

Adds an InfoWindow to the floor plan.

addHtmlMarker ​

ts
addHtmlMarker(args?: HtmlMarkerArgs): HtmlMarker

Adds a custom HtmlMarker to the floor plan.

addMarker ​

ts
addMarker({ position, color, size }?: MarkerArgs): MarkerPin

Adds a MarkerPin to the floor plan.

Position methods ​

getPlanPosition ​

ts
getPlanPosition(point: Vector2): Vector2

Converts screen coordinates to plan coordinates.

getScreenPosition ​

ts
getScreenPosition(point: Vector2): Vector2

Converts plan coordinates to screen coordinates.

getResourcesFromPosition ​

ts
getResourcesFromPosition(position: Vector2): {
    spaces: LayoutSpace[];
    assets: LayoutAsset[];
};

Layer / graphics methods ​

addLayer ​

ts
addLayer({ id, baseLayer }?: { id?: string; baseLayer?: BaseLayers }): PlanLayer

Creates a new PlanLayer or returns an existing one by id.

getLayer ​

ts
getLayer(id: any): PlanLayer

Gets a PlanLayer by name.

drawNodeUpdate ​

ts
drawNodeUpdate(id: string, style?: 'selected' | ShapeStyle | false): void

Updates the style of a node in the floor plan.

Misc methods ​

addHelper ​

ts
addHelper(helper: string | typeof Helper, options?: any): Helper

Adds a helper and removes previous instances of it.

removeHelper ​

ts
removeHelper(helperId: string): void

Removes a helper by its id.

exportImage ​

ts
exportImage({ format, fileName, quality, output, maxWidth, download }?: ExportImage): Promise<string | Error>

Exports the current view as an image.

destroy ​

ts
destroy(): void

Destroys the floor plan instance, cleaning up all resources.

Event Handling ​

  • on<EventType extends FpeEvent>(event: EventType, handler: FpeEventHandler<EventType>, ctx?: any): this
  • once<EventType extends FpeEvent>(event: EventType, handler: FpeEventHandler<EventType>, ctx?: any): this
  • off<EventType extends FpeEvent>(event: EventType, handler?: FpeEventHandler<EventType>, ctx?: any): this

PlanLayer ​

Represents a layer in the floor plan for adding graphics. Allows to add a PlanGraphic to the layer.

ts
class PlanLayer {
  addGraphic(args: GraphicArgs): PlanGraphic
  deleteGraphic(graphic: PlanGraphic): void
  // clear all shapes from the layer
  clear(): void
  // destroy layer and all shapes
  destroy(): void
}

PlanGraphic ​

Represents a graphic element on a layer.

ts
class PlanGraphic {
  shapes: Shape[]
  scaleOnZoom: boolean
  set({ position, style, shapes }?: GraphicUpdate): void
  on(event: string, callback: any, context?: any): this
  off(event: string, callback?: any): this
  destroy(): void
}

InfoWindow ​

Represents an HTML info window in the floor plan.

ts
class InfoWindow {
  position: Vector2
  height: number
  width: number
  closeButton: any
  html: any
  el: Element

  set({
    width,
    height,
    position,
    html,
    closeButton
  }: {
    width: any
    height: any
    position: any
    html: any
    closeButton: any
  }): void
  remove(): void
}

HtmlMarker ​

Represents a custom HTML marker in the floor plan.

ts
class HtmlMarker {
  position: Vector2
  size: Vector2
  offset: Vector2
  isHidden: boolean
  id: string
  el: HTMLElement

  set({ position, offset }: Pick<HtmlMarkerArgs, 'position' | 'offset'>): void
  remove(): void
}

MarkerPin ​

Represents a plan marker in the floor plan.

ts
class MarkerPin {
  position: Vector2
  color: string
  size: number
  id: string

  on(eventType: string, callback: any, context?: any): void
  off(eventType?: string, callback?: any): void
  set(updateArgs: MarkerUpdateArgs): void
  remove(): void
}

Types ​

FpeConfig ​

Configuration options for the FloorPlanEngine.

ts
interface FpeConfig {
  theme?: FloorPlanTheme
  units?: Units
  shapeLayers?: ShapeLayers
  spaceLabelMapping?: SpaceLabelMapping
  hideElements?: HideableElement[]
  ui?: UI
  panZoom?: boolean
  zoomRange?: [number, number]
  roomStampSize?: number
  showSpaceDividers?: boolean
  showCeilingLamps?: boolean
  showFloorPlan?: boolean
  destroyOnDomRemove?: boolean
  preserveViewbox?: string
}

TokenOptions ​

Options for access tokens required by certain API methods.

ts
interface TokenOptions {
  accessToken: string
  refreshToken?: string
  tokenExpiry?: number
}

InfoWindowArgs ​

Arguments for creating an InfoWindow.

ts
interface InfoWindowArgs {
  // pixel width of the window - default 100
  width?: number
  // pixel height of the window - default 80
  height?: number
  // coordinates of the window in meters
  position?: Vector2
  // html string as content of the info window
  html?: string
  // If true , a close button will appear in the top right corner of the info window.
  closeButton?: boolean
}

HtmlMarkerArgs ​

Arguments for creating an HtmlMarker.

ts
interface HtmlMarkerArgs {
  // coordinates of the window in meters
  position?: Vector2
  offset?: Vector2
  // html string as content of the info window
  el?: HTMLElement
  // If true , a close button will appear in the top right corner of the info window.
  closeButton?: boolean
}

MarkerArgs ​

Arguments for creating a MarkerPin.

ts
interface MarkerArgs {
  position: Vector2
  color?: string
  size?: number
}

Animate ​

Options for animation durations.

ts
type Animate = boolean | number

BoundingBox2d ​

Represents a 2D bounding box.

ts
interface BoundingBox2d {
  min: Vector2
  max: Vector2
}

FloorPlanTheme ​

Theming options for the floor plan.

ts
type FloorPlanTheme = {
  background?: BackgroundOptions
  wallContours?: boolean
  showAssetTextures?: boolean
  fontFamily?: string
  elements?: {
    byId?: Record<string, ShapeStyle>
    floorPlan?: {
      grayscale: boolean
    }
    roomStamp?: {
      roomStampDisplay?: (
        | 'usage'
        | 'area'
        | 'customId'
        | 'name'
        | 'id'
        | ['customAttribute', string]
      )[]
      text?: Rgb
      textOutline?: boolean
    }
    [key: string]: ShapeStyle | any
  }
}

ShapeStyle ​

Style options for shapes.

ts
interface ShapeStyle {
  // Color formats can be hex string, hex number or rgb array
  // '#ff0000', 0xff0000, [255, 0, 0]
  stroke?: string | number | number[]
  strokeWidth?: number | 'native'
  strokeOpacity?: number
  fill?: string | number | number[] | false
  fillOpacity?: number
  dash?: boolean
}

GraphicArgs ​

Arguments for adding a graphic to a layer.

ts
interface GraphicArgs {
  // list of shapes to be drawn
  shapes: Shape[]
  // optional base position of the graphic
  position?: Vector2
  // clear all existing graphics in the layer
  clearLayer?: boolean
  // graphic has fixed pixel dimensions
  scaleOnZoom?: boolean
}

Shape ​

Available shapes for graphics.

ts
type Shape =
  | PolygonCurve
  | PolygonWithHolesCurve
  | PolylineCurve
  | RectangleCurve
  | CircleCurve
  | LineCurve
  | GroupShape
  | TextShape
  | ArcCurve
  | BezierCurve
  | CompositeCurve

Curves are part of the Space Graph geometry definitions.

TokenOptions ​

Options for access tokens required by certain API methods.

ts
interface TokenOptions {
  publishableAccessToken?: string
  secretAccessToken?: string
  temporaryAccessToken?: TemporaryAccessToken
  temporaryAccessTokenScopes?: ScopeDefinitionArray
}

TokenOptions ​

ts
interface TemporaryAccessToken {
  authorization: string
  expiresAt: number
}

Animate ​

Options for animation durations.

ts
type Animate = boolean | number

BoundingBox2d ​

Represents a 2D bounding box.

ts
interface BoundingBox2d {
  min: Vector2
  max: Vector2
}

Vector2 ​

Represents a 2D vector.

ts
type Vector2 = [number, number]

Copyright © 2018-present Archilogic