Feat: selection box for ad-hoc group elements (#30632) (#30987)

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

@@ -141,7 +141,8 @@ export class WorkpadPage extends PureComponent {
               switch (element.subtype) {
                 case 'alignmentGuide':
                   return <AlignmentGuide {...props} />;
-                case 'hoverAnnotation':
+                case 'adHocChildAnnotation': // now sharing aesthetics but may diverge in the future
+                case 'hoverAnnotation': // fixme: with the upcoming TS work, use enumerative types here
                   return <HoverAnnotation {...props} />;
                 case 'rotationHandle':
                   return <RotationHandle {...props} />;

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

@@ -25,6 +25,7 @@ import {
   cascadeProperties,
   configuration,
   draggingShape,
+  getAdHocChildrenAnnotations,
   getAlignmentGuideAnnotations,
   getAlterSnapGesture,
   getAnnotatedShapes,
@@ -188,6 +189,8 @@ const groupedSelectedPrimaryShapeIds = select(getGroupedSelectedPrimaryShapeIds)
   groupedSelectedShapes
 );
 
+const adHocChildrenAnnotations = select(getAdHocChildrenAnnotations)(configuration, grouping);
+
 const resizeAnnotations = select(resizeAnnotationsFunction)(configuration, grouping);
 
 const rotationAnnotations = select(getRotationAnnotations)(configuration, grouping);
@@ -197,7 +200,8 @@ const annotatedShapes = select(getAnnotatedShapes)(
   alignmentGuideAnnotations,
   hoverAnnotations,
   rotationAnnotations,
-  resizeAnnotations
+  resizeAnnotations,
+  adHocChildrenAnnotations
 );
 
 const globalTransformShapes = select(cascadeProperties)(annotatedShapes);

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

@@ -1273,30 +1273,29 @@ export const getAlignmentGuideAnnotations = (config, shapes, draggedPrimaryShape
     : [];
 };
 
-export const getHoverAnnotations = (
-  config,
-  hoveredShape,
-  selectedPrimaryShapeIds,
-  draggedShape
-) => {
-  return hoveredShape &&
-    hoveredShape.type !== 'annotation' &&
-    selectedPrimaryShapeIds.indexOf(hoveredShape.id) === -1 &&
+const borderAnnotation = (subtype, lift) => shape => ({
+  ...shape,
+  id: subtype + '_' + shape.id,
+  type: 'annotation',
+  subtype,
+  interactive: false,
+  localTransformMatrix: multiply(shape.localTransformMatrix, translate(0, 0, lift)),
+  parent: shape.parent,
+});
+
+export const getAdHocChildrenAnnotations = (config, { shapes }) => {
+  const adHocGroups = shapes.filter(s => s.subtype === config.adHocGroupName);
+  return shapes
+    .filter(s => s.type !== 'annotation' && s.parent && adHocGroups.find(p => p.id === s.parent))
+    .map(borderAnnotation(config.getAdHocChildAnnotationName, config.hoverLift));
+};
+
+export const getHoverAnnotations = (config, shape, selectedPrimaryShapeIds, draggedShape) => {
+  return shape &&
+    shape.type !== 'annotation' &&
+    selectedPrimaryShapeIds.indexOf(shape.id) === -1 &&
     !draggedShape
-    ? [
-        {
-          ...hoveredShape,
-          id: config.hoverAnnotationName + '_' + hoveredShape.id,
-          type: 'annotation',
-          subtype: config.hoverAnnotationName,
-          interactive: false,
-          localTransformMatrix: multiply(
-            hoveredShape.localTransformMatrix,
-            translate(0, 0, config.hoverLift)
-          ),
-          parent: null, // consider linking to proper parent, eg. for more regular typing (ie. all shapes have all props)
-        },
-      ]
+    ? [borderAnnotation(config.hoverAnnotationName, config.hoverLift)(shape)]
     : [];
 };
 
@@ -1366,13 +1365,15 @@ export const getAnnotatedShapes = (
   alignmentGuideAnnotations,
   hoverAnnotations,
   rotationAnnotations,
-  resizeAnnotations
+  resizeAnnotations,
+  adHocChildrenAnnotations
 ) => {
   const annotations = [].concat(
     alignmentGuideAnnotations,
     hoverAnnotations,
     rotationAnnotations,
-    resizeAnnotations
+    resizeAnnotations,
+    adHocChildrenAnnotations
   );
   // remove preexisting annotations
   const contentShapes = shapes.filter(shape => shape.type !== 'annotation');

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

@@ -24,6 +24,7 @@ import { setWorkpad } from '../actions/workpad';
 import { getNodes, getPages, getSelectedPage, getSelectedElement } from '../selectors/workpad';
 
 const aeroelasticConfiguration = {
+  getAdHocChildAnnotationName: 'adHocChildAnnotation',
   adHocGroupName: 'adHocGroup',
   alignmentGuideName: 'alignmentGuide',
   atopZ: 1000,