[Canvas] Layout engine integration simplification

x-pack/plugins/canvas/public/apps/workpad/workpad_app/index.js

@@ -6,7 +6,7 @@
 
 import { connect } from 'react-redux';
 import { compose, branch, renderComponent } from 'recompose';
-import { selectElement } from '../../../state/actions/transient';
+import { selectToplevelNodes } from '../../../state/actions/transient';
 import { canUserWrite, getAppReady } from '../../../state/selectors/app';
 import { getWorkpad, isWriteable } from '../../../state/selectors/workpad';
 import { LoadWorkpad } from './load_workpad';
@@ -25,7 +25,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => ({
   deselectElement(ev) {
     ev && ev.stopPropagation();
-    dispatch(selectElement(null));
+    dispatch(selectToplevelNodes([]));
   },
 });
 

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

@@ -37,9 +37,12 @@ export class DomPreview extends React.Component {
       return;
     }
 
-    if (!this.observer) {
-      this.original = this.original || document.querySelector(`#${this.props.elementId}`);
-      if (this.original) {
+    const currentOriginal = document.querySelector(`#${this.props.elementId}`);
+    const originalChanged = currentOriginal !== this.original;
+    if (originalChanged) {
+      this.observer && this.observer.disconnect();
+      this.original = currentOriginal;
+      if (currentOriginal) {
         const slowUpdate = debounce(this.update, 100);
         this.observer = new MutationObserver(slowUpdate);
         // configuration of the observer

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

@@ -5,7 +5,7 @@
  */
 
 import { connect } from 'react-redux';
-import { setFullscreen, selectElement } from '../../state/actions/transient';
+import { setFullscreen, selectToplevelNodes } from '../../state/actions/transient';
 import { getFullscreen } from '../../state/selectors/app';
 import { FullscreenControl as Component } from './fullscreen_control';
 
@@ -16,7 +16,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   setFullscreen: value => {
     dispatch(setFullscreen(value));
-    value && dispatch(selectElement(null));
+    value && dispatch(selectToplevelNodes([]));
   },
 });
 

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { cloneSubgraphs } from '../../lib/clone_subgraphs';
 import { insertNodes, elementLayer } from '../../state/actions/elements';
 import { getSelectedPage, getSelectedElement } from '../../state/selectors/workpad';
-import { selectElement } from './../../state/actions/transient';
+import { selectToplevelNodes } from '../../state/actions/transient';
 
 import { Sidebar as Component } from './sidebar';
 
@@ -23,7 +23,7 @@ const mapDispatchToProps = dispatch => ({
     // todo: more unification w/ copy/paste; group cloning
     const newElements = cloneSubgraphs([selectedElement]);
     dispatch(insertNodes(newElements, pageId));
-    dispatch(selectElement(newElements[0].id));
+    dispatch(selectToplevelNodes(newElements.map(e => e.id)));
   },
   elementLayer: (pageId, selectedElement) => movement =>
     dispatch(

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

@@ -131,7 +131,7 @@ export class Workpad extends React.PureComponent {
                   {pages.map((page, i) => (
                     <WorkpadPage
                       key={page.id}
-                      page={page}
+                      pageId={page.id}
                       height={height}
                       width={width}
                       isSelected={i + 1 === selectedPageNumber}

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

@@ -44,37 +44,36 @@ const setupHandler = (commit, canvasOrigin) => {
 const handleMouseMove = (
   commit,
   { clientX, clientY, altKey, metaKey, shiftKey, ctrlKey },
-  isEditable,
   canvasOrigin
 ) => {
-  if (isEditable) {
-    const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
+  const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
+  if (commit) {
     commit('cursorPosition', { x, y, altKey, metaKey, shiftKey, ctrlKey });
   }
 };
 
 const handleMouseLeave = (commit, { buttons }) => {
-  if (buttons !== 1) {
+  if (buttons !== 1 && commit) {
     commit('cursorPosition', {}); // reset hover only if we're not holding down left key (ie. drag in progress)
   }
 };
 
-const handleMouseDown = (commit, e, isEditable, canvasOrigin) => {
+const handleMouseDown = (commit, e, canvasOrigin) => {
   e.stopPropagation();
   const { clientX, clientY, buttons, altKey, metaKey, shiftKey, ctrlKey } = e;
-  if (buttons !== 1 || !isEditable) {
+  if (buttons !== 1 || !commit) {
     resetHandler();
-    return; // left-click and edit mode only
+    return; // left-click only
   }
   setupHandler(commit, canvasOrigin);
   const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
   commit('mouseEvent', { event: 'mouseDown', x, y, altKey, metaKey, shiftKey, ctrlKey });
 };
 
 export const eventHandlers = {
-  onMouseDown: props => e => handleMouseDown(props.commit, e, props.isEditable, props.canvasOrigin),
-  onMouseMove: props => e => handleMouseMove(props.commit, e, props.isEditable, props.canvasOrigin),
+  onMouseDown: props => e => handleMouseDown(props.commit, e, props.canvasOrigin),
+  onMouseMove: props => e => handleMouseMove(props.commit, e, props.canvasOrigin),
   onMouseLeave: props => e => handleMouseLeave(props.commit, e),
-  onWheel: props => e => handleMouseMove(props.commit, e, props.isEditable, props.canvasOrigin),
+  onWheel: props => e => handleMouseMove(props.commit, e, props.canvasOrigin),
   resetHandler: () => () => resetHandler(),
 };