Merge branch '153-custom-arrows' into 'main'

Use custom mesh for communication arrows and add config options

Closes #153

See merge request ExplorViz/code/frontend!249

app/components/visualization/page-setup/sidebar/customizationbar/settings/settings.ts

@@ -190,6 +190,7 @@ export default class Settings extends Component<Args> {
         break;
       case 'commThickness':
       case 'commArrowSize':
+      case 'commArrowOffset':
       case 'curvyCommHeight':
         if (this.args.redrawCommunication && this.args.updateHighlighting) {
           this.args.redrawCommunication();

app/services/link-renderer.ts

@@ -182,23 +182,19 @@ export default class LinkRenderer extends Service.extend({}) {
     viewCenterPoint: THREE.Vector3
   ) {
     pipe.children.forEach((child) => {
-      if (child instanceof CommunicationArrowMesh) child.dispose();
-      pipe.remove(child);
+      if (child instanceof CommunicationArrowMesh) {
+        pipe.remove(child);
+        child.disposeRecursively();
+      }
     });
 
-    const arrowOffset = 1;
+    const arrowOffset = this.appSettings.commArrowOffset.value;
     const arrowHeight = curveHeight / 2 + arrowOffset;
     const arrowThickness = this.appSettings.commArrowSize.value;
-    const arrowColorHex =
-      this.userSettings.colors.communicationArrowColor.getHex();
+    const arrowColor = this.userSettings.colors.communicationArrowColor;
 
     if (arrowThickness > 0.0) {
-      pipe.addArrows(
-        viewCenterPoint,
-        arrowThickness,
-        arrowHeight,
-        arrowColorHex
-      );
+      pipe.addArrows(viewCenterPoint, arrowThickness, arrowHeight, arrowColor);
     }
 
     if (pipe.material.opacity !== 1) {

app/utils/application-rendering/communication-rendering.ts

@@ -58,19 +58,14 @@ export default class CommunicationRendering {
     curveHeight: number,
     viewCenterPoint: Vector3
   ) {
-    const arrowOffset = 0.8;
+    const arrowOffset =
+      this.userSettings.visualizationSettings.commArrowOffset.value;
     const arrowHeight = curveHeight / 2 + arrowOffset;
     const arrowThickness = this.appSettings.commArrowSize.value;
-    const arrowColorHex =
-      this.userSettings.colors.communicationArrowColor.getHex();
+    const arrowColor = this.userSettings.colors.communicationArrowColor;
 
     if (arrowThickness > 0.0) {
-      pipe.addArrows(
-        viewCenterPoint,
-        arrowThickness,
-        arrowHeight,
-        arrowColorHex
-      );
+      pipe.addArrows(viewCenterPoint, arrowThickness, arrowHeight, arrowColor);
     }
   }
 

app/utils/application-rendering/entity-manipulation.ts

@@ -15,7 +15,6 @@ import MessageSender from 'explorviz-frontend/services/collaboration/message-sen
 import FoundationMesh from 'explorviz-frontend/view-objects/3d/application/foundation-mesh';
 import gsap from 'gsap';
 import BaseMesh from 'explorviz-frontend/view-objects/3d/base-mesh';
-import CommunicationArrowMesh from 'explorviz-frontend/view-objects/3d/application/communication-arrow-mesh';
 import { ExplorVizColors } from 'explorviz-frontend/services/user-settings';
 import {
   getStoredNumberSetting,
@@ -471,9 +470,6 @@ export function updateColors(
   scene.traverse((object3D) => {
     if (object3D instanceof BaseMesh) {
       object3D.updateColor();
-      // Special case because communication arrow is no base mesh
-    } else if (object3D instanceof CommunicationArrowMesh) {
-      object3D.updateColor(applicationColors.communicationArrowColor);
     }
   });
   scene.background = applicationColors.backgroundColor;

app/utils/raycaster.ts

@@ -15,9 +15,9 @@ export function defaultRaycastFilter(
   return !(
     intersection.object instanceof LabelMesh ||
     intersection.object instanceof LogoMesh ||
-    intersection.object.parent instanceof CommunicationArrowMesh ||
     intersection.object instanceof PingMesh ||
     intersection.object instanceof CrosshairMesh ||
+    intersection.object instanceof CommunicationArrowMesh ||
     intersection.object.type === 'AxesHelper' ||
     isChildOfText(intersection)
   );

app/utils/settings/default-settings.ts

@@ -234,19 +234,28 @@ export const defaultVizSettings: VisualizationSettings = {
   commArrowSize: {
     level: SettingLevel.DEFAULT,
     value: 2.0,
-    range: { min: 0.0, max: 5.0, step: 0.25 },
+    range: { min: 0.0, max: 10.0, step: 0.25 },
     group: 'Communication',
-    displayName: 'Arrow Size in Application Visualization',
+    displayName: 'Arrow Size',
     description:
       'Arrow Size for selected communications in application visualization',
     isRangeSetting: true,
   },
+  commArrowOffset: {
+    level: SettingLevel.EXTENDED,
+    value: 4.0,
+    range: { min: -20.0, max: 20.0, step: 0.25 },
+    group: 'Communication',
+    displayName: 'Arrow Offset',
+    description: 'Distance between arrow and communication line',
+    isRangeSetting: true,
+  },
   curvyCommHeight: {
     level: SettingLevel.DEFAULT,
     value: 1.0,
     range: { min: 0.0, max: 5.0, step: 0.1 },
     group: 'Communication',
-    displayName: 'Curviness Factor of the Communication Lines',
+    displayName: 'Communication Curviness',
     description:
       'If greater 0.0, communication lines are rendered arc-shaped (Straight lines: 0.0)',
     isRangeSetting: true,

app/utils/settings/settings-schemas.ts

@@ -58,6 +58,7 @@ export type ControlSettings = {
 export type CommunicationSettingId =
   | 'commThickness'
   | 'commArrowSize'
+  | 'commArrowOffset'
   | 'curvyCommHeight';
 
 export type CommunicationSettings = Record<

app/view-objects/3d/application/clazz-communication-mesh.ts

@@ -248,9 +248,9 @@ export default class ClazzCommunicationMesh extends BaseMesh {
    */
   addArrows(
     applicationCenter = new THREE.Vector3(),
-    width = 1,
-    yOffset = 1,
-    color = 0x000000
+    width: number,
+    yOffset: number,
+    color: THREE.Color
   ) {
     const { layout } = this;
     // Scale arrow with communication line thickness
@@ -307,7 +307,7 @@ export default class ClazzCommunicationMesh extends BaseMesh {
     end: THREE.Vector3,
     width: number,
     yOffset: number,
-    color: number
+    color: THREE.Color
   ) {
     const dir = new THREE.Vector3().subVectors(end, start);
     const len = dir.length();
@@ -354,7 +354,7 @@ export default class ClazzCommunicationMesh extends BaseMesh {
     end: THREE.Vector3,
     width: number,
     yOffset: number,
-    color: number
+    color: THREE.Color
   ) {
     const dir = new THREE.Vector3().subVectors(end, start);
     const len = dir.length();

app/view-objects/3d/application/communication-arrow-mesh.ts

@@ -3,10 +3,12 @@ import ClassCommunication from 'explorviz-frontend/utils/landscape-schemes/dynam
 import ComponentCommunication from 'explorviz-frontend/utils/landscape-schemes/dynamic/component-communication';
 import * as THREE from 'three';
 import { SemanticZoomableObjectBaseMixin } from './utils/semantic-zoom-manager';
+import BaseMesh from 'explorviz-frontend/view-objects/3d/base-mesh';
 
-class CommunicationArrowMeshPrivate extends THREE.ArrowHelper {
+class CommunicationArrowMeshPrivate extends BaseMesh {
   dataModel: ClassCommunication | ComponentCommunication;
 
+  _axis = new THREE.Vector3();
   isHovered = false;
 
   HOVER_Y_TRANSLATION = 2;
@@ -17,42 +19,51 @@ class CommunicationArrowMeshPrivate extends THREE.ArrowHelper {
     dir: THREE.Vector3,
     origin: THREE.Vector3,
     length: number,
-    color: number,
+    color: THREE.Color,
     headLength: number,
     headWidth: number
   ) {
-    super(dir, origin, length, color, headLength, headWidth);
+    super(color);
     this.dataModel = dataModel;
+
+    this.material = new THREE.MeshBasicMaterial({
+      color: color,
+      toneMapped: false,
+    });
+    this.geometry = new THREE.CylinderGeometry(0, 0.5, 1, 5, 1);
+    this.geometry.translate(0, -0.5, 0);
+
+    this.position.copy(origin);
+
+    this.matrixAutoUpdate = true;
+
+    this.setDirection(dir);
+    this.setLength(length, headLength, headWidth);
   }
 
-  /**
-   * Deletes this arrow from its parent and dispose the arrow's geomeries and materials
-   */
-  delete() {
-    if (this.parent) {
-      this.parent.remove(this);
-    }
-    const { line } = this;
-    line.geometry.dispose();
+  setDirection(dir: THREE.Vector3) {
+    // dir is assumed to be normalized
 
-    if (line.material instanceof THREE.Material) {
-      line.material.dispose();
-    }
+    if (dir.y > 0.99999) {
+      this.quaternion.set(0, 0, 0, 1);
+    } else if (dir.y < -0.99999) {
+      this.quaternion.set(1, 0, 0, 0);
+    } else {
+      this._axis.set(dir.z, 0, -dir.x).normalize();
+
+      const radians = Math.acos(dir.y);
 
-    const { cone } = this;
-    cone.geometry.dispose();
-    if (cone.material instanceof THREE.Material) {
-      cone.material.dispose();
+      this.quaternion.setFromAxisAngle(this._axis, radians);
     }
   }
 
-  updateColor(color: THREE.Color) {
-    if (this.line.material instanceof THREE.LineBasicMaterial) {
-      this.line.material.color = color;
-    }
-    if (this.cone.material instanceof THREE.MeshBasicMaterial) {
-      this.cone.material.color = color;
-    }
+  setLength(
+    length: number,
+    headLength = length * 0.2,
+    headWidth = headLength * 0.2
+  ) {
+    this.scale.set(headWidth, headLength, headWidth);
+    this.updateMatrix();
   }
 
   /**
@@ -63,40 +74,24 @@ class CommunicationArrowMeshPrivate extends THREE.ArrowHelper {
   changeOpacity(opacity: number) {
     const isTransparent = opacity < 1;
 
-    if (this.line.material instanceof THREE.Material) {
-      this.line.material.opacity = opacity;
-      this.line.material.transparent = isTransparent;
-      this.line.material.needsUpdate = true;
-    }
-
-    if (this.cone.material instanceof THREE.Material) {
-      this.cone.material.opacity = opacity;
-      this.cone.material.transparent = isTransparent;
-      this.cone.material.needsUpdate = true;
+    if (this.material instanceof THREE.Material) {
+      this.material.opacity = opacity;
+      this.material.transparent = isTransparent;
+      this.material.needsUpdate = true;
     }
   }
 
   hide() {
-    if (this.line.material instanceof THREE.Material) {
-      this.line.material.visible = false;
-      this.line.material.needsUpdate = true;
-    }
-
-    if (this.cone.material instanceof THREE.Material) {
-      this.cone.material.visible = false;
-      this.cone.material.needsUpdate = true;
+    if (this.material instanceof THREE.Material) {
+      this.material.visible = false;
+      this.material.needsUpdate = true;
     }
   }
 
   show() {
-    if (this.line.material instanceof THREE.Material) {
-      this.line.material.visible = true;
-      this.line.material.needsUpdate = true;
-    }
-
-    if (this.cone.material instanceof THREE.Material) {
-      this.cone.material.visible = true;
-      this.cone.material.needsUpdate = true;
+    if (this.material instanceof THREE.Material) {
+      this.material.visible = true;
+      this.material.needsUpdate = true;
     }
   }
 
@@ -153,7 +148,7 @@ export default class CommunicationArrowMesh extends SemanticZoomableObjectBaseMi
     dir: THREE.Vector3,
     origin: THREE.Vector3,
     length: number,
-    color: number,
+    color: THREE.Color,
     headLength: number,
     headWidth: number
   ) {