Feat: ad-hoc grouping (#23249)

* Feat: ad-hoc grouping

* Feat: deleting ad-hoc group constituents

* Chore: deleted the former removeElement action

* Feat: make group snap to guides

* Feat: make group snap to guides 2

* Feat: make group snap to guides 3

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

@@ -30,31 +30,35 @@ const setupHandler = (commit, target) => {
   const canvasPage = ancestorElement(target, 'canvasPage');
   if (!canvasPage) return;
   const canvasOrigin = canvasPage.getBoundingClientRect();
-  window.onmousemove = ({ clientX, clientY, altKey, metaKey }) => {
+  window.onmousemove = ({ clientX, clientY, altKey, metaKey, shiftKey }) => {
     const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
-    commit('cursorPosition', { x, y, altKey, metaKey });
+    commit('cursorPosition', { x, y, altKey, metaKey, shiftKey });
   };
   window.onmouseup = e => {
     e.stopPropagation();
-    const { clientX, clientY, altKey, metaKey } = e;
+    const { clientX, clientY, altKey, metaKey, shiftKey } = e;
     const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
-    commit('mouseEvent', { event: 'mouseUp', x, y, altKey, metaKey });
+    commit('mouseEvent', { event: 'mouseUp', x, y, altKey, metaKey, shiftKey });
     resetHandler();
   };
 };
 
-const handleMouseMove = (commit, { target, clientX, clientY, altKey, metaKey }, isEditable) => {
+const handleMouseMove = (
+  commit,
+  { target, clientX, clientY, altKey, metaKey, shiftKey },
+  isEditable
+) => {
   // mouse move must be handled even before an initial click
   if (!window.onmousemove && isEditable) {
     const { x, y } = localMousePosition(target, clientX, clientY);
     setupHandler(commit, target);
-    commit('cursorPosition', { x, y, altKey, metaKey });
+    commit('cursorPosition', { x, y, altKey, metaKey, shiftKey });
   }
 };
 
 const handleMouseDown = (commit, e, isEditable) => {
   e.stopPropagation();
-  const { target, clientX, clientY, button, altKey, metaKey } = e;
+  const { target, clientX, clientY, button, altKey, metaKey, shiftKey } = e;
   if (button !== 0 || !isEditable) {
     resetHandler();
     return; // left-click and edit mode only
@@ -63,7 +67,7 @@ const handleMouseDown = (commit, e, isEditable) => {
   if (!ancestor) return;
   const { x, y } = localMousePosition(ancestor, clientX, clientY);
   setupHandler(commit, ancestor);
-  commit('mouseEvent', { event: 'mouseDown', x, y, altKey, metaKey });
+  commit('mouseEvent', { event: 'mouseDown', x, y, altKey, metaKey, shiftKey });
 };
 
 const keyCode = key => (key === 'Meta' ? 'MetaLeft' : 'Key' + key.toUpperCase());

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { compose, withState, withProps } from 'recompose';
 import { aeroelastic } from '../../lib/aeroelastic_kibana';
-import { removeElement } from '../../state/actions/elements';
+import { removeElements } from '../../state/actions/elements';
 import { getFullscreen, getEditing } from '../../state/selectors/app';
 import { getElements } from '../../state/selectors/workpad';
 import { withEventHandlers } from './event_handlers';
@@ -23,15 +23,17 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    removeElement: pageId => elementId => dispatch(removeElement(elementId, pageId)),
+    removeElements: pageId => elementIds => dispatch(removeElements(elementIds, pageId)),
   };
 };
 
 const getRootElementId = (lookup, id) => {
   if (!lookup.has(id)) return null;
 
   const element = lookup.get(id);
-  return element.parent ? getRootElementId(lookup, element.parent) : element.id;
+  return element.parent && element.parent.subtype !== 'adHocGroup'
+    ? getRootElementId(lookup, element.parent)
+    : element.id;
 };
 
 export const WorkpadPage = compose(
@@ -60,19 +62,17 @@ export const WorkpadPage = compose(
     };
   }),
   withState('updateCount', 'setUpdateCount', 0), // TODO: remove this, see setUpdateCount below
-  withProps(({ updateCount, setUpdateCount, page, elements: pageElements, removeElement }) => {
-    const { shapes, selectedShapes = [], cursor } = aeroelastic.getStore(page.id).currentScene;
+  withProps(({ updateCount, setUpdateCount, page, elements: pageElements, removeElements }) => {
+    const { shapes, selectedLeafShapes = [], cursor } = aeroelastic.getStore(page.id).currentScene;
     const elementLookup = new Map(pageElements.map(element => [element.id, element]));
-    const shapeLookup = new Map(shapes.map(shape => [shape.id, shape]));
     const elements = shapes.map(
       shape =>
         elementLookup.has(shape.id)
           ? // instead of just combining `element` with `shape`, we make property transfer explicit
             { ...shape, filter: elementLookup.get(shape.id).filter }
           : shape
     );
-    const selectedElements = selectedShapes.map(id => getRootElementId(shapeLookup, id));
-
+    const selectedElements = selectedLeafShapes;
     return {
       elements,
       cursor,
@@ -83,7 +83,7 @@ export const WorkpadPage = compose(
       },
       remove: () => {
         // currently, handle the removal of one element, exploiting multiselect subsequently
-        if (selectedElements[0]) removeElement(page.id)(selectedElements[0]);
+        if (selectedElements.length) removeElements(page.id)(selectedElements);
       },
     };
   }), // Updates states; needs to have both local and global

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

@@ -79,7 +79,7 @@ export const WorkpadPage = ({
               default:
                 return [];
             }
-          } else {
+          } else if (element.subtype !== 'adHocGroup') {
             return <ElementWrapper key={element.id} element={element} />;
           }
         })

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

@@ -8,12 +8,16 @@
  * Mock config
  */
 
+const adHocGroupName = 'adHocGroup';
 const alignmentGuideName = 'alignmentGuide';
 const atopZ = 1000;
 const depthSelect = true;
 const devColor = 'magenta';
+const groupName = 'group';
+const groupResize = false;
 const guideDistance = 3;
 const hoverAnnotationName = 'hoverAnnotation';
+const intraGroupManipulation = false;
 const resizeAnnotationOffset = 0;
 const resizeAnnotationOffsetZ = 0.1; // causes resize markers to be slightly above the shape plane
 const resizeAnnotationSize = 10;
@@ -25,17 +29,21 @@ const rotationHandleSize = 14;
 const resizeHandleName = 'resizeHandle';
 const rotateSnapInPixels = 10;
 const shortcuts = false;
-const singleSelect = true;
+const singleSelect = false;
 const snapConstraint = true;
 const minimumElementSize = 0; // guideDistance / 2 + 1;
 
 module.exports = {
+  adHocGroupName,
   alignmentGuideName,
   atopZ,
   depthSelect,
   devColor,
+  groupName,
+  groupResize,
   guideDistance,
   hoverAnnotationName,
+  intraGroupManipulation,
   minimumElementSize,
   resizeAnnotationOffset,
   resizeAnnotationOffsetZ,

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

@@ -67,29 +67,26 @@ const disjunctiveUnion = (keyFun, set1, set2) =>
  */
 const mean = (a, b) => (a + b) / 2;
 
-/**
- * unnest
- *
- * @param {*[][]} vectorOfVectors
- * @returns {*[]}
- */
-const unnest = vectorOfVectors => [].concat.apply([], vectorOfVectors);
-
 const shallowEqual = (a, b) => {
   if (a === b) return true;
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
-
   return true;
 };
 
+const not = fun => (...args) => !fun(...args);
+
+const removeDuplicates = (idFun, a) =>
+  a.filter((d, i) => a.findIndex(s => idFun(s) === idFun(d)) === i);
+
 module.exports = {
   disjunctiveUnion,
   flatten,
   identity,
   log,
   map,
   mean,
+  not,
+  removeDuplicates,
   shallowEqual,
-  unnest,
 };

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

@@ -20,26 +20,25 @@ const primaryUpdate = state => state.primaryUpdate;
 
 // dispatch the various types of actions
 const rawCursorPosition = select(
-  action => (action && action.type === 'cursorPosition' ? action.payload : null)
+  action => (action.type === 'cursorPosition' ? action.payload : null)
 )(primaryUpdate);
 
-const mouseButtonEvent = select(
-  action => (action && action.type === 'mouseEvent' ? action.payload : null)
-)(primaryUpdate);
+const mouseButtonEvent = select(action => (action.type === 'mouseEvent' ? action.payload : null))(
+  primaryUpdate
+);
 
-const keyboardEvent = select(
-  action => (action && action.type === 'keyboardEvent' ? action.payload : null)
-)(primaryUpdate);
+const keyboardEvent = select(action => (action.type === 'keyboardEvent' ? action.payload : null))(
+  primaryUpdate
+);
 
 const keyInfoFromMouseEvents = select(
-  action =>
-    (action && action.type === 'cursorPosition') || action.type === 'mouseEvent'
-      ? { altKey: action.payload.altKey, metaKey: action.payload.metaKey }
-      : null
+  ({ type, payload: { altKey, metaKey, shiftKey } }) =>
+    type === 'cursorPosition' || type === 'mouseEvent' ? { altKey, metaKey, shiftKey } : null
 )(primaryUpdate);
 
 const altTest = key => key.slice(0, 3).toLowerCase() === 'alt' || key === 'KeyALT';
 const metaTest = key => key.slice(0, 4).toLowerCase() === 'meta';
+const shiftTest = key => key === 'KeySHIFT' || key.slice(0, 5) === 'Shift';
 const deadKey1 = 'KeyDEAD';
 const deadKey2 = 'Key†';
 
@@ -65,6 +64,10 @@ const updateKeyLookupFromMouseEvent = (lookup, keyInfoFromMouseEvent) => {
       if (value) lookup.alt = true;
       else delete lookup.alt;
     }
+    if (shiftTest(key)) {
+      if (value) lookup.shift = true;
+      else delete lookup.shift;
+    }
   });
   return lookup;
 };
@@ -83,6 +86,8 @@ const pressedKeys = selectReduce((prevLookup, next, keyInfoFromMouseEvent) => {
 
   if (metaTest(next.code)) code = 'meta';
 
+  if (shiftTest(next.code)) code = 'shift';
+
   if (next.event === 'keyDown') {
     return { ...lookup, [code]: true };
   } else {
@@ -96,6 +101,7 @@ const keyUp = select(keys => Object.keys(keys).length === 0)(pressedKeys);
 
 const metaHeld = select(lookup => Boolean(lookup.meta))(pressedKeys);
 const optionHeld = select(lookup => Boolean(lookup.alt))(pressedKeys);
+const shiftHeld = select(lookup => Boolean(lookup.shift))(pressedKeys);
 
 const cursorPosition = selectReduce((previous, position) => position || previous, { x: 0, y: 0 })(
   rawCursorPosition
@@ -198,4 +204,5 @@ module.exports = {
   mouseIsDown,
   optionHeld,
   pressedKeys,
+  shiftHeld,
 };