Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wework/react-floormap

Package Overview
Dependencies
Maintainers
30
Versions
363
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wework/react-floormap

React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience

  • 2.1.1
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-66.67%
Maintainers
30
Weekly downloads
 
Created
Source

React FloorMap Component

React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience

Installation

yarn add @wework/react-floormap@v2

FloorMap Components

Display Floormap by providing buildingId and floorId

import React from 'react'
import { FloorMapComponent } from `@wework/react-floormap`

class MyMap extends React.Component {
  render() {
    return (
      <FloorMapComponent
        configuration={{
          appId: configuration.appId,
          appSecret: configuration.appSecret,
          baseUrl: configuration.baseUrl,
          spacemanToken: configuration.spacemanToken, // optional
          mwAccessToken: configuration.mwAccessToken, // optional
        }}
        buildingId="b308b94c-bca6-4318-b906-1c148f7ca183"
        floorId="54c2fe02-180f-11e7-9312-063c4950d72"
        onClickSpace={(e) => {}}
        onMouseOver={(e) => {}}
        onMouseLeave={(e) => {}}
      />
    )
  }
}

Props

type Identifier = string | { uuid: string }

export type Props = {
  configuration?: FloorMapConfiguration

  buildingId?: string
  floorId?: string
  deskLayout?: boolean
  deskInteractable?: boolean
  extensions?: Extension[]
  manager?: Manager

  selectedSpaces?: Identifier[]
  highlightedSpaces?: Identifier[]

  selectionColor?: string
  highlightColor?: string
  backgroundColor?: string

  onClickSpace?: EventHandler
  onDataChange?: EventHandler
  onMouseLeave?: EventHandler
  onMouseOver?: EventHandler

  initialFitContent: { padding: number }
  initialAzimuthAngle?: number
  initialPolarAngle?: number
  maxPolarAngle?: number
  minPolarAngle?: number
  maxAzimuthAngle?: number
  minAzimuthAngle?: number
  maxZoom?: number
  minZoom?: number

  // Deprecated use configureStyle
  configureStyle?: ConfigureSpaceFunction
  onError?(e: FloorMapError): void
  onSessionExpired?: (e?: Error) => void
  onLoad?(result: FloorMapResult): Promise<any> | undefined | void
  didLoad?(result: FloorMapResult): Promise<any> | undefined | void
  onRender?(result: FloorMapResult): Promise<any> | undefined | void
  didRender?(result: FloorMapResult): Promise<any> | undefined | void

  onAuthenticated(token?: MilkyWayAccessToken): void
  renderOptions?: object

  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>

  renderHoles?: boolean
  mapAppearance?: Partial<MapAppearance>
  floorOutline?: FloorOutlineOptions

  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)
}

Events

User Event and Data Change
<FloorMapComponent
  // ...
  onClickSpace={event => {}}
  onMouseOver={event => {}}
  onMouseLeave={event => {}}
/>
  • onClickSpace When user click on a space
  • onMouseOver When mouse over on a space
  • onMouseLeave When mouse leave on a space

event object will be contains:

  • id - ID of the space
  • payload - Event information
  • data? - If user interacts with space, the data field will presented
Mpa and Data Events
<FloorMapComponent
  // ...
  onDataChange={event => {}}
  onLoad={({ loading }) => {}}
  onRender={({ building, floor, spaces, objects, options }) => {}}
  onError={e => {
    console.log(e.message)
    console.log(e.data)
    console.log(e.options)
  }}
/>

onDataChange(event)

Gets triggered when data inside the map change via floorMap.updateData(id, data) (An floorMap SDK instance, can via access via ref.current.getInstance())

onDataChange: function(space: Space)

onLoad(event)

Get call when the map start loading data

onLoad: function({ buildingId, floorId })

onRender(event)

Get call when the map finished rendering

onError(error)

Get call when an error occured during the map loading/rendering process

onError: function({ message, data, options })

  • message - An error message
  • data - Data associated with the error
  • options - Options parameters that was passed to render function

onSessionExpired(error)

Get call when session in the map is expired

Rotate the map

<FloorMapComponent
  // ...
  initialPolarAngle={0} // Vetical rotation
  initialAzimuthAngle={90} // Horizontal rotation
  initialFitContent={{ padding: 50 }}
  maxPolarAngle={45}
  maxAzimuthAngle={45}
/>

Desk Layout

  • deskLayout - Show/Hide desk layout
  • deskInteractable - Enable interaction on Desk and Chair
<FloorMapComponent
  // ...
  deskLayout={true}
  deskInteractable={true}
/>

Styling

We provide simple way to make a selection and highlight styling to spaces by passing:

  • selectedSpaces - Array of uuid of space (or space object) you want to style as selection
  • selectionColor - Color to use style when space is in selection state (selectedSpaces)
  • highlightedSpaces - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)
  • highlightColor - Color to use style when space is in selection state (highlightedSpaces)

The different between selection and highlight is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of highlightedSpaces

<FloorMapComponent
  // ...
  selectedSpaces={[uuid1, uuid2]}
  highlightedSpaces={[uuid3]}
  selectionColor="#acc3fe"
  highlightColor="#ffffff"
/>
Example
class MyMap extends React.Component {
  state = { selected: [] }
  render() {
    return (
      <FloorMapComponent
        // ...
        selectedSpaces={this.state.selected}
        selectionColor="#acc3fe"
        onClickSpace={({ data }) => {
          if (data) {
            this.setState({ selected: [data.uuid] })
          } else {
            // No data means click outside any space
            this.setState({ selected: [] })
          }
        }}
      />
    )
  }
}

Advanced Styling

ConfigureStyle

In case you want to take more control of styling or configure each space (eg. visible, interactable). You can use configureSpace props to config each space in the Map.

For supported properties, please refer to Floormap SDK's styling

<FloorMapComponent
  // ...
  configureStyle={space => {
    // Hide all DESK and CHIAR
    if (space.type === 'object') {
      return { visible: fales }
    }

    // All work type will be #f0f0ff
    if (space.programType === 'WORK') {
      return {
        color: '#f0f0ff',
        interactable: true,
      }
    }

    // otherwise set color to #d0d0d0
    // and set interactable to false
    return {
      color: '#d0d0d0',
      interactable: false,
    }
  }}
/>

configureSpace will get called everytime when to map need to style a space or you can force the map to re-configure space by call invalidate(space?: Space[]|UUID[]) on FloorMap Instance

example

Combine configureStyle and invalidate to highlight space

class MyMap extends React.Component {
  floorMapRef = React.createRef()

  state = { selectedUuid: undefined }

  render() {
    return (
      <FloorMapComponent
        // ...
        floorMapRef={this.floorMapRef}
        onClickSpace={({ data }) => {
          if (!data) {
            return
          }
          const currentSelection = this.state.selectedUuid
          const newSelection = data.uuid
          this.setState({ selectedUuid: newSelection })

          // Reload 2 space the previous one and new one
          this.floormapRef.current.invalidate([newSelection, currentSelection])
        }}
        configureSpace={space => {
          if (this.state.selectedUuid === space.uuid) {
            return {
              color: 'red',
            }
          } else {
            return { color: '#f0f0f0' }
          }
        }}
      />
    )
  }
}

To prevent configureSpace get called for every spaces, you can pass array of spaces/uuid to configureSpace to reload only specific spaces.

Overriding Style using ApplyStyle

To override the style from configureStyle, We can applyStyle, revertStyle, and resetStyle functions from the FloormapSDK instance

const Map = () => {
  const floorMapRef = React.createRef()

  return (
    <FloorMapComponent
      onClickSpace={({ data }) => {
        this.floorMap.current?.applyStyle({
          uuid: data.uuid,
          style: {
            color: 'red',
          },
        })
      }}
      configureStyle={() => {
        // Every spaces will be white
        return { color: 'white' }
      }}
    />
  )
}

Access Floormap SDK Instance

React Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.

To use functions inside Floormap SDK such as applyStyle, addObject, controlling the camera - You can access to the FloormapSDK instance by passing ref to floorMapRef

class MyMap extends React.Component {
  floorMapRef = React.createRef()

  render() {
    return (
      <FloorMapComponent
        // ...
        floorMapRef={this.floorMapRef}
        didRender={space => {
          const floorMap = this.floorMapRef.current

          floormap.fitContent()
        }}
      />
    )
  }
}

See more on Floormap SDK Documentation

Extension Support

Register extensions to the floormap, passing array of extension instances as a props to the component.

import { OccupancyExtension } from '@wework/floormap-extensions'

class MyMap extends React.Component {
  occupancyExtension = new OccupancyExtension()

  render() {
    return (
      <FloorMapComponent
        // ...
        extensions={[this.occupancyExtension]}
      />
    )
  }
}

Development

git clone git@github.com:WeConnect/react-floormap.git
cd react-floormap

yarn
yarn dev

Demo

yarn start:demo

FAQs

Package last updated on 08 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc