Migrating from Floor Plan SDK v3 to v5

This guide will help you transition from version 3 to version 5 of the Floor Plan SDK. We'll cover the key changes in importing, initialization, and usage of the SDK.

Key changes

Importing the module

The way you import the Floor Plan SDK has changed slightly in version 5. Here's how you should import it now:

v5

import { FloorPlanEngine } from '@archilogic/floor-plan-sdk'

v3

import FloorPlanEngine from '@archilogic/floor-plan-sdk'

Startup options

The interface for initializing the Floor Plan SDK has changed in version 5. The constructor now takes a single object parameter that includes both the container and options.

v5

const floorPlan = new FloorPlanEngine({ container, options })

floorPlan.set(options)

v3

const floorPlan = new FloorPlanEngine(container, options)

floorPlan.set(options)

Loading a floor

The method for loading a floor has been renamed and the parameter for the access token has been updated in version 5. Here's how it differs:

v5

floorPlan.loadFloorById(<floor-id>, { publishableAccessToken })

v3

floorPlan.loadScene(<floor-id>, { publishableToken })

Adding a marker or html marker

In version 5, the parameter for specifying the position of a marker has been renamed from pos to position. This change applies to both addMarker and addHtmlMarker methods. The new naming convention better reflects the purpose of the parameter and aligns with other position-related properties in the SDK.

v5

floorPlan.addMarker({ position, color })

floorPlan.addHtmlMarker({ position, color })

v3

floorPlan.addMarker({ pos, color })

floorPlan.addHtmlMarker({ pos, color })

Events

Similar to the changes in marker positioning, the event callbacks in version 5 now use position instead of pos for consistency. This change affects both 'click' and 'mousemove' events.

v5

floorPlan.on('click', ({ position, sourceEvent, nodeId }) => {}})

floorPlan.on('mousemove', ({ position, sourceEvent, nodeId }) => {})

v3

floorPlan.on('click', ({ pos, sourceEvent, nodeId }) => {})

floorPlan.on('mousemove', ({ pos, sourceEvent, nodeId }) => {})

Accessing assets & spaces

In version 5, the way to access assets and spaces has been updated for improved consistency and organization. The layout property now provides access to these elements, replacing the previous resources property. This change allows for a more intuitive and structured approach to accessing floor plan elements.

v5

for (const space of floorPlan.layout.spaces) {
  console.log(space.id)
}

for (const asset of floorPlan.layout.elementsByType['element:asset']) {
  console.log(asset.id)
}

v3

for (const space of floorPlan.resources.spaces) {
  console.log(space.id)
}

for (const assets of floorPlan.resources.assets) {
  console.log(asset.id)
}