[Canvas][Layout Engine] Annotation showing node rotation angle (#30702) (#31084)

* Feat: angle rotation annotation (in degrees) added
* Style annotation like EUI tooltip (#30950)

x-pack/plugins/canvas/public/components/tooltip_annotation/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { pure } from 'recompose';
+import { HoverAnnotation as Component } from './tooltip_annotation';
+
+export const TooltipAnnotation = pure(Component);

x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { toCSS } from '../../lib/aeroelastic';
+
+export const HoverAnnotation = ({ transformMatrix, text }) => {
+  const newStyle = {
+    transform: `${toCSS(transformMatrix)} translate(1em, -1em)`,
+  };
+  return (
+    <div className="tooltipAnnotation canvasLayoutAnnotation" style={newStyle}>
+      <p>{text}°</p>
+    </div>
+  );
+};
+
+HoverAnnotation.propTypes = {
+  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  text: PropTypes.string.isRequired,
+};

x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss

@@ -0,0 +1,10 @@
+@import '@elastic/eui/src/components/tool_tip/mixins';
+
+.tooltipAnnotation {
+  @include euiToolTipStyle($size: 's');
+  position: absolute;
+  transform-origin: center center; /* the default, only for clarity */
+  transform-style: preserve-3d;
+  outline: none;
+  pointer-events: none;
+}

x-pack/plugins/canvas/public/components/workpad_page/workpad_page.js

@@ -10,6 +10,7 @@ import { Shortcuts } from 'react-shortcuts';
 import { ElementWrapper } from '../element_wrapper';
 import { AlignmentGuide } from '../alignment_guide';
 import { HoverAnnotation } from '../hover_annotation';
+import { TooltipAnnotation } from '../tooltip_annotation';
 import { RotationHandle } from '../rotation_handle';
 import { BorderConnection } from '../border_connection';
 import { BorderResizeHandle } from '../border_resize_handle';
@@ -136,6 +137,7 @@ export class WorkpadPage extends PureComponent {
                 transformMatrix: element.transformMatrix,
                 width: element.width,
                 height: element.height,
+                text: element.text,
               };
 
               switch (element.subtype) {
@@ -150,6 +152,8 @@ export class WorkpadPage extends PureComponent {
                   return <BorderResizeHandle {...props} />;
                 case 'resizeConnector':
                   return <BorderConnection {...props} />;
+                case 'rotationTooltip':
+                  return <TooltipAnnotation {...props} />;
                 default:
                   return [];
               }

x-pack/plugins/canvas/public/lib/aeroelastic/layout.js

@@ -50,6 +50,7 @@ import {
   getResizeManipulator,
   getRestateShapesEvent,
   getRotationAnnotations,
+  getRotationTooltipAnnotation,
   getScene,
   getSelectedPrimaryShapeIds,
   getSelectedShapeObjects,
@@ -172,6 +173,14 @@ const constrainedShapesWithPreexistingAnnotations = select(
   getConstrainedShapesWithPreexistingAnnotations
 )(snappedShapes, transformedShapes);
 
+const rotationTooltipAnnotation = select(getRotationTooltipAnnotation)(
+  configuration,
+  draggedPrimaryShape,
+  draggedShape,
+  transformIntents,
+  cursorPosition
+);
+
 const groupAction = select(getGroupAction)(actionEvent);
 
 const grouping = select(getGrouping)(
@@ -201,6 +210,7 @@ const annotatedShapes = select(getAnnotatedShapes)(
   hoverAnnotations,
   rotationAnnotations,
   resizeAnnotations,
+  rotationTooltipAnnotation,
   adHocChildrenAnnotations
 );
 

x-pack/plugins/canvas/public/lib/aeroelastic/layout_functions.js

@@ -183,7 +183,7 @@ const rotationManipulation = config => ({
   const vector = mvMultiply(multiply(center, directShape.localTransformMatrix), ORIGIN);
   const oldAngle = Math.atan2(centerPosition[1] - vector[1], centerPosition[0] - vector[0]);
   const newAngle = Math.atan2(centerPosition[1] - y, centerPosition[0] - x);
-  const closest45deg = (Math.round(newAngle / (Math.PI / 4)) * Math.PI) / 4;
+  const closest45deg = (Math.round(newAngle / (Math.PI / 12)) * Math.PI) / 12;
   const radius = Math.sqrt(Math.pow(centerPosition[0] - x, 2) + Math.pow(centerPosition[1] - y, 2));
   const closest45degPosition = [Math.cos(closest45deg) * radius, Math.sin(closest45deg) * radius];
   const pixelDifference = Math.sqrt(
@@ -625,12 +625,28 @@ const rotationAnnotation = (config, shapes, selectedShapes, shape, i) => {
     interactive: true,
     parent: foundShape.id,
     localTransformMatrix: transform,
-    backgroundColor: 'rgb(0,0,255,0.3)',
     a: config.rotationHandleSize,
     b: config.rotationHandleSize,
   };
 };
 
+export const getRotationTooltipAnnotation = (config, proper, shape, intents, cursorPosition) =>
+  shape && shape.subtype === config.rotationHandleName
+    ? [
+        {
+          id: config.rotationTooltipName + '_' + proper.id,
+          type: 'annotation',
+          subtype: config.rotationTooltipName,
+          interactive: false,
+          parent: null,
+          localTransformMatrix: translate(cursorPosition.x, cursorPosition.y, config.tooltipZ),
+          a: 0,
+          b: 0,
+          text: String(Math.round((matrixToAngle(proper.transformMatrix) / Math.PI) * 180)),
+        },
+      ]
+    : [];
+
 const resizePointAnnotations = (config, parent, a, b) => ([x, y, cursorAngle]) => {
   const markerPlace = translate(x * a, y * b, config.resizeAnnotationOffsetZ);
   const pixelOffset = translate(
@@ -1366,13 +1382,16 @@ export const getAnnotatedShapes = (
   hoverAnnotations,
   rotationAnnotations,
   resizeAnnotations,
+  rotationTooltipAnnotation,
   adHocChildrenAnnotations
 ) => {
+  // fixme update it to a simple concatenator, no need for enlisting the now pretty long subtype list
   const annotations = [].concat(
     alignmentGuideAnnotations,
     hoverAnnotations,
     rotationAnnotations,
     resizeAnnotations,
+    rotationTooltipAnnotation,
     adHocChildrenAnnotations
   );
   // remove preexisting annotations

x-pack/plugins/canvas/public/state/middleware/aeroelastic.js

@@ -50,9 +50,11 @@ const aeroelasticConfiguration = {
   rotationEpsilon: 0.001,
   rotationHandleName: 'rotationHandle',
   rotationHandleSize: 14,
+  rotationTooltipName: 'rotationTooltip',
   shortcuts: false,
   singleSelect: false,
   snapConstraint: true,
+  tooltipZ: 1100,
 };
 
 const isGroupId = id => id.startsWith(aeroelasticConfiguration.groupName);

x-pack/plugins/canvas/public/style/index.scss

@@ -52,6 +52,7 @@
 @import '../components/sidebar/sidebar';
 @import '../components/toolbar/toolbar';
 @import '../components/toolbar/tray/tray';
+@import '../components/tooltip_annotation/tooltip_annotation';
 @import '../components/workpad/workpad';
 @import '../components/workpad_export/workpad_export';
 @import '../components/workpad_loader/workpad_loader';