chore: refactor global commands

.gitignore

@@ -2,6 +2,8 @@
 node_modules
 dist
 coverage
+.tmp
 *.log
 *.ini
-*.log.*
+*.log.*
+.tmp

grafana/common/index.ts

@@ -1,3 +1,2 @@
-export * from './constants';
 export * from './colors';
 export * from './get-series';

grafana/data-source/src/types.ts

@@ -1,5 +1,5 @@
 import { DataQuery, DataSourceJsonData } from '@grafana/data';
-import { floorId, token } from '@grafana-common';
+import { floorId, token } from '@bi-plugin-utils';
 
 export interface MyQuery extends DataQuery {
   token: string;

grafana/data-source/tsconfig.json

@@ -5,6 +5,7 @@
     "rootDir": "../..",
     "baseUrl": "../..",
     "paths": {
+      "@bi-plugin-utils": ["./utils"],
       "@grafana-common": ["./grafana/common/index.ts"],
     },
   }

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { FloorPlanEngine } from '@archilogic/floor-plan-sdk'
 import { PanelProps } from '@grafana/data'
 
-import { FloorPlan, getAssetsAndSpaces, getNodeByid, hexToRgb } from '@bi-plugin-utils'
+import { FloorPlan, getAssetsAndSpaces, getNodeById, hexToRgb } from '@bi-plugin-utils'
 import { getGradients, getSeries } from '@grafana-common'
 
 import { FloorOptions } from '../types'
@@ -33,7 +33,7 @@ export const FloorPanel: React.FC<Props> = props => {
     })
   }
   function handleSpaceId() {
-    const node = getNodeByid(floorPlan, nodeId)
+    const node = getNodeById(floorPlan, nodeId)
     if (node) {
       node?.setHighlight({ fill: HIGHLIGHT_COLOR })
     }

grafana/floor-panel/src/module.ts

@@ -1,39 +1,39 @@
-import { floorId, token } from '@grafana-common';
-import { PanelPlugin } from '@grafana/data';
-import { FloorOptions } from './types';
-import { FloorPanel } from './components/FloorPanel';
+import { floorId, token } from '@bi-plugin-utils'
+import { PanelPlugin } from '@grafana/data'
+import { FloorOptions } from './types'
+import { FloorPanel } from './components/FloorPanel'
 
-export const plugin = new PanelPlugin<FloorOptions>(FloorPanel).setPanelOptions((builder) => {
+export const plugin = new PanelPlugin<FloorOptions>(FloorPanel).setPanelOptions(builder => {
   return builder
     .addTextInput({
       path: 'id',
       name: 'Floor plan ID',
       description: 'Description of panel option',
-      defaultValue: floorId,
+      defaultValue: floorId
     })
     .addTextInput({
       path: 'token',
       name: 'Publishable Token',
       description: 'Description of panel option',
-      defaultValue: token,
+      defaultValue: token
     })
     .addTextInput({
       path: 'nodeId',
       name: 'Node id',
       description: 'Space or Asset id',
-      defaultValue: '',
+      defaultValue: ''
     })
     .addColorPicker({
       path: 'colorFrom',
       name: 'Color From',
       defaultValue: '#fff000',
       settings: {
-        mode: 'custom',
-      },
+        mode: 'custom'
+      }
     })
     .addColorPicker({
       path: 'colorTo',
       name: 'Color To',
-      defaultValue: '#000fff',
-    });
-});
+      defaultValue: '#000fff'
+    })
+})

package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
+    "process": "^0.11.10",
     "prettier": "2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

utils/components/FloorPlan/FloorPlan.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { FloorPlanEngine } from '@archilogic/floor-plan-sdk'
 import './FloorPlan.css'
 
@@ -31,7 +31,7 @@ const FloorPanel: React.FC<FloorOptions> = props => {
       }
     }
   }
-  useEffect(initFloorPlan)
+  setTimeout(initFloorPlan, 500)
 
   return (
     <div className="plan-wrapper">

utils/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './utils/colors';
-export * from './utils/nodes';
+export * from './utils/nodes';
+export * from './utils/constants';

utils/utils/colors.ts

@@ -2,7 +2,7 @@
 import colorGradient from 'javascript-color-gradient'
 
 export function valueToHex(color: number) {
-  var hex = color.toString(16)
+  const hex = color.toString(16)
   return hex
 }
 

utils/utils/constants.ts

@@ -0,0 +1,2 @@
+export const floorId = 'e9c82007-ae74-4b95-9174-8df619a08bd8'
+export const token = 'a983595e-94ee-4ecf-8cd0-1f5f1612fc96'

utils/utils/nodes.ts

@@ -1,18 +1,25 @@
 import { FloorPlanEngine } from '@archilogic/floor-plan-sdk'
 
 export const getAssetsAndSpaces = (floorPlan: FloorPlanEngine) => {
+  if (!floorPlan) return []
   const { spaces, assets } = floorPlan.resources
   return [...spaces, ...assets]
 }
 
-export const getNodeByid = (floorPlan: FloorPlanEngine, id: string) => {
+export const getNodeById = (floorPlan: FloorPlanEngine, id: string) => {
   const nodes = getAssetsAndSpaces(floorPlan)
   return nodes.find(node => node.id === id)
 }
 
 export const getNodeByClick = (floorPlan: FloorPlanEngine, evt: any) => {
   const { nodeId } = evt
   if (nodeId) {
-    return getNodeByid(floorPlan, nodeId)
+    return getNodeById(floorPlan, nodeId)
   }
 }
+
+export const getSpaceByPosition = (floorPlan: FloorPlanEngine, position: number[]) => {
+  const point2d = position
+  const positionResources = floorPlan.getResourcesFromPosition(point2d as [number, number])
+  return positionResources.spaces ? positionResources.spaces[0] : false
+}