get isometric

x-pack/plugins/endpoint/public/embeddables/resolver/lib/transformation.ts

@@ -71,3 +71,12 @@ export function translationTransformation([x, y]: Vector2): Matrix3 {
     0, 0, 1
   ]
 }
+
+export function rotationTransformation(angleInRadians: number): Matrix3 {
+  // prettier-ignore
+  return [
+    Math.cos(angleInRadians), -Math.sin(angleInRadians),  0,
+    Math.sin(angleInRadians), Math.cos(angleInRadians),   0,
+    0,                        0,                          1
+  ]
+}

x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/reducer.ts

@@ -28,7 +28,7 @@ const minimumScale = 0.1;
 /**
  * The maximum allowed value for the camera scale. This is greatest scale that we will ever render something at.
  */
-const maximumScale = 3;
+const maximumScale = 6;
 
 export const cameraReducer: Reducer<CameraState, ResolverAction> = (
   state = initialState(),

x-pack/plugins/endpoint/public/embeddables/resolver/store/data/selectors.ts

@@ -5,6 +5,7 @@
  */
 
 import { createSelector } from 'reselect';
+import { rotationTransformation } from '../../lib/transformation';
 import {
   DataState,
   ProcessEvent,
@@ -13,6 +14,7 @@ import {
   ProcessPositions,
   EdgeLineSegment,
   ProcessWithWidthMetadata,
+  Matrix3,
 } from '../../types';
 import { Vector2 } from '../../types';
 import { add as vector2Add, applyMatrix3 } from '../../lib/vector2';
@@ -28,6 +30,13 @@ import {
 const unit = 100;
 const distanceBetweenNodesInUnits = 1;
 
+/* prettier-ignore */
+const isometricTransformMatrix: Matrix3 = [
+  Math.sqrt(2) / 2,   -(Math.sqrt(2) / 2),  0,
+  Math.sqrt(6) / 6,   Math.sqrt(6) / 6,     -(Math.sqrt(6) / 3),
+  0,                  0,                    1,
+]
+
 /**
  * The distance in pixels (at scale 1) between nodes. Change this to space out nodes more
  */
@@ -346,14 +355,6 @@ function processPositions(
        */
       const position = vector2Add([xOffset, -distanceBetweenNodes], parentPosition);
 
-      /* prettier-ignore */
-      const isometricTransformMatrix = [
-        Math.sqrt(2) / 2,   -(Math.sqrt(2) / 2),  0,
-        Math.sqrt(6) / 6,   Math.sqrt(6) / 6,     -(Math.sqrt(6) / 3),
-        0,                  0,                    1,
-      ]
-
-      // positions.set(process, applyMatrix3(position, isometricTransformMatrix));
       positions.set(process, position);
 
       numberOfPrecedingSiblings += 1;
@@ -392,9 +393,27 @@ export const processNodePositionsAndEdgeLineSegments = createSelector(
      */
     const edgeLineSegments = processEdgeLineSegments(indexedProcessTree, widths, positions);
 
+    /**
+     * Transform the positions of nodes and edges so they seem like they are on an isometric grid.
+     */
+    const transformedEdgeLineSegments: EdgeLineSegment[] = [];
+    const transformedPositions = new Map<ProcessEvent, Vector2>();
+
+    for (const [processEvent, position] of positions) {
+      transformedPositions.set(processEvent, applyMatrix3(position, isometricTransformMatrix));
+    }
+
+    for (const edgeLineSegment of edgeLineSegments) {
+      const transformedSegment = [];
+      for (const point of edgeLineSegment) {
+        transformedSegment.push(applyMatrix3(point, isometricTransformMatrix));
+      }
+      transformedEdgeLineSegments.push(transformedSegment);
+    }
+
     return {
-      processNodePositions: positions,
-      edgeLineSegments,
+      processNodePositions: transformedPositions,
+      edgeLineSegments: transformedEdgeLineSegments,
     };
   }
 );