fix: floor plan engine state

Author: romiekos

grafana/floor-panel/src/components/FloorPanel.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FloorPlanEngine } from '@archilogic/floor-plan-sdk'
 import { PanelProps } from '@grafana/data'
 
@@ -10,10 +10,10 @@ import { FloorOptions } from '../types'
 interface Props extends PanelProps<FloorOptions> {}
 const HIGHLIGHT_COLOR: [number, number, number] = [100, 200, 100]
 
-let floorPlan: FloorPlanEngine
-let isFloorPlanLoaded = false
-
 export const FloorPanel: React.FC<Props> = props => {
+  const [floorPlan, setFloorPlan] = useState(undefined as FloorPlanEngine)
+  const [isFloorPlanLoaded, setIsFloorPlanLoaded] = useState(false)
+
   const { id, token, nodeId, colorFrom, colorTo } = props.options
   const { data } = props
   const { ids, values } = getSeries(data)
@@ -39,8 +39,8 @@ export const FloorPanel: React.FC<Props> = props => {
     }
   }
   function handleEvents(fpe: FloorPlanEngine) {
-    isFloorPlanLoaded = true
-    floorPlan = fpe
+    setIsFloorPlanLoaded(true)
+    setFloorPlan(fpe)
     handleInputSourceData()
     handleSpaceId()
   }

utils/components/FloorPlan/FloorPlan.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FloorPlanEngine } from '@archilogic/floor-plan-sdk'
 import './FloorPlan.css'
 
@@ -10,22 +10,22 @@ interface FloorOptions {
   onLoad?: (floorPlan: FloorPlanEngine) => void
 }
 
-const FLOOR_PLAN_ID = `floor-plan-${new Date().getTime()}`
-let floorPlan: FloorPlanEngine
-
 const FloorPanel: React.FC<FloorOptions> = props => {
+  const [floorPlan, setFloorPlan] = useState(undefined as FloorPlanEngine);
+  const floorPlanId = `floor-plan-${new Date().getTime()}`
   const tokenOptions = {
     publishableAccessToken: props.token
   }
 
   const initFloorPlan = () => {
-    const container = document.getElementById(FLOOR_PLAN_ID)
+    const container = document.getElementById(floorPlanId)
     if (container) {
-      if (!props.loaded) {
-        floorPlan = new FloorPlanEngine({ container, options: props.startupOptions })
-        floorPlan.loadScene(props.id, tokenOptions).then(() => {
+      if (!props.loaded && !floorPlan) {
+        const fpe = new FloorPlanEngine({ container, options: props.startupOptions })
+        fpe.loadScene(props.id, tokenOptions).then(() => {
           if (props.onLoad) props.onLoad(floorPlan)
         })
+        setFloorPlan(fpe)
       } else {
         if (props.onLoad) props.onLoad(floorPlan)
       }
@@ -35,7 +35,7 @@ const FloorPanel: React.FC<FloorOptions> = props => {
 
   return (
     <div className="plan-wrapper">
-      <div id={FLOOR_PLAN_ID} className="plan-container"></div>
+      <div id={floorPlanId} className="plan-container"></div>
     </div>
   )
 }