Fix custom class layout

Author: malte-hansen

src/utils/extended-reality/view-objects/vr/detail-info-mesh.ts

@@ -1,10 +1,10 @@
 // @ts-ignore because three mesh ui's typescript support is not fully matured
-import ScrollUpButton from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/scroll-up-button';
-import ScrollDownButton from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/scroll-down-button';
-import OpenEntityButton from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/open-entity-button';
-import ThreeMeshUI from 'three-mesh-ui';
 import DetailInfoScrollarea from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/detail-info-scrollarea';
+import OpenEntityButton from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/open-entity-button';
+import ScrollDownButton from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/scroll-down-button';
+import ScrollUpButton from 'explorviz-frontend/src/utils/extended-reality/view-objects/vr/scroll-up-button';
 import * as THREE from 'three';
+import ThreeMeshUI from 'three-mesh-ui';
 
 export default class DetailInfoMesh extends ThreeMeshUI.Block {
   /*implements IntersectableObject*/ sourceClass: string;

src/utils/layout/circle-layouter.ts

@@ -13,7 +13,7 @@ let WIDTH_METRIC: string;
 let WIDTH_METRIC_MULTIPLIER: number;
 let DEPTH_METRIC: string;
 let DEPTH_METRIC_MULTIPLIER: number;
-
+let COMPONENT_HEIGHT: number;
 /**
  * Sets the visualization settings needed for circle layout.
  * This should be called before using circle layout functions.
@@ -27,6 +27,7 @@ export function setCircleLayoutSettings() {
   DEPTH_METRIC_MULTIPLIER = vs.classDepthMultiplier.value;
   APP_LABEL_MARGIN = vs.appLabelMargin.value;
   APP_MARGIN = vs.appMargin.value;
+  COMPONENT_HEIGHT = vs.openedComponentHeight.value;
 }
 
 /**
@@ -94,7 +95,7 @@ export function applyCircleLayoutToClasses(
       classLayout.width = CLASS_FOOTPRINT;
       classLayout.depth = CLASS_FOOTPRINT;
       classLayout.height = CLASS_FOOTPRINT;
-      classLayout.positionY = classLayout.height / 2.0; // Place directly on foundation
+      classLayout.positionY = COMPONENT_HEIGHT * 2; // Place directly on foundation
 
       // As Label and regular margin can differ, we offset by half the label margin difference
       const zMarginOffset = -APP_LABEL_MARGIN / 2 + APP_MARGIN / 2;

src/utils/layout/spiral-layouter.ts

@@ -98,6 +98,7 @@ export function applySpiralLayoutToClasses(
   const { visualizationSettings: vs } = useUserSettingsStore.getState();
   const CLASS_FOOTPRINT = vs.classFootprint.value;
   const CLASS_MARGIN = vs.classMargin.value;
+  const COMPONENT_HEIGHT = vs.openedComponentHeight.value;
   const APP_LABEL_MARGIN = vs.appLabelMargin.value;
   const APP_MARGIN = vs.appMargin.value;
   const SPIRAL_CENTER_OFFSET = vs.spiralCenterOffset.value;
@@ -177,7 +178,7 @@ export function applySpiralLayoutToClasses(
       classLayout.width = CLASS_FOOTPRINT;
       classLayout.depth = CLASS_FOOTPRINT;
       classLayout.height = CLASS_FOOTPRINT;
-      classLayout.positionY = classLayout.height / 2.0; // Place directly on foundation
+      classLayout.positionY = COMPONENT_HEIGHT * 2; // Place directly on foundation
 
       // Calculate position based on current grid coordinates
       const classX = centerX + spiralState.x * spacing - CLASS_FOOTPRINT / 2;