Fix component selection boundaries in case when there is multiple component instances with the same key.

Author: ipselon

src/framework/components/PageComposer/ComponentWrapper.js

@@ -1,6 +1,7 @@
 import isEqual from 'lodash/isEqual';
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
+import { isVisible } from './utilities';
 
 const style = {
   width: '100%',
@@ -66,16 +67,10 @@ class ComponentWrapper extends Component {
     this.handleDragEnter = this.handleDragEnter.bind(this);
     this.handleDragLeave = this.handleDragLeave.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
-
-    const { elementKey, onComponentInstanceInitialize } = this.props;
-    if (onComponentInstanceInitialize) {
-      onComponentInstanceInitialize(elementKey, this);
-    }
-
   }
 
   initDOMNode() {
-    this.$DOMNode = this.$DOMNode || ReactDOM.findDOMNode(this);
+    this.$DOMNode = ReactDOM.findDOMNode(this);
     if (this.$DOMNode) {
       this.$DOMNode.addEventListener('mousedown', this.handleMouseDown, false);
       this.$DOMNode.addEventListener('mouseover', this.handleMouseOver, false);
@@ -87,8 +82,25 @@ class ComponentWrapper extends Component {
     }
   }
 
+  clearDOMNode() {
+    if (this.$DOMNode) {
+      this.$DOMNode.removeEventListener('mousedown', this.handleMouseDown);
+      this.$DOMNode.removeEventListener('mouseover', this.handleMouseOver);
+      this.$DOMNode.removeEventListener('mouseout', this.handleMouseOut);
+      this.$DOMNode.removeEventListener('click', this.handleNoop);
+      this.$DOMNode.removeEventListener('doubleclick', this.handleNoop);
+      this.$DOMNode.removeEventListener('mouseup', this.handleNoop);
+      this.$DOMNode.removeEventListener('contextmenu', this.handleContextMenu);
+    }
+    this.$DOMNode = undefined;
+  }
+
   componentDidMount() {
     this.initDOMNode();
+    const { elementKey, onComponentInstanceInitialize } = this.props;
+    if (onComponentInstanceInitialize) {
+      onComponentInstanceInitialize(elementKey, this);
+    }
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -122,30 +134,23 @@ class ComponentWrapper extends Component {
   }
 
   componentWillUnmount() {
-    if (this.$DOMNode) {
-      this.$DOMNode.removeEventListener('mousedown', this.handleMouseDown);
-      this.$DOMNode.removeEventListener('mouseover', this.handleMouseOver);
-      this.$DOMNode.removeEventListener('mouseout', this.handleMouseOut);
-      this.$DOMNode.removeEventListener('click', this.handleNoop);
-      this.$DOMNode.removeEventListener('doubleclick', this.handleNoop);
-      this.$DOMNode.removeEventListener('mouseup', this.handleNoop);
-      this.$DOMNode.removeEventListener('contextmenu', this.handleContextMenu);
-    }
-    this.$DOMNode = undefined;
+    this.clearDOMNode();
     const { elementKey, onComponentInstanceDestroy } = this.props;
     if (onComponentInstanceDestroy) {
-      onComponentInstanceDestroy(elementKey);
+      onComponentInstanceDestroy(elementKey, this);
     }
   }
 
   selectComponent () {
     const {elementKey} = this.props;
-    window.dispatchEvent(new CustomEvent('selectComponentWrapper', {
-      detail: {
-        elementKey,
-        domNode: this.$DOMNode
-      }
-    }));
+    if (isVisible(this.$DOMNode)) {
+      window.dispatchEvent(new CustomEvent('selectComponentWrapper', {
+        detail: {
+          elementKey,
+          domNode: this.$DOMNode
+        }
+      }));
+    }
   };
 
   handleMouseDown(e) {

src/framework/components/PageComposer/PageComposer.js

@@ -243,9 +243,13 @@ class PageComposer extends React.Component {
   traverseComponentInstances() {
     if (selectedKeys && selectedKeys.length > 0) {
       selectedKeys.forEach(selectedKeyItem => {
-        const componentInstance = this.componentInstancesMap[selectedKeyItem];
-        if (componentInstance && componentInstance.selectComponent) {
-          componentInstance.selectComponent();
+        const componentRefs = this.componentInstancesMap[selectedKeyItem];
+        if (componentRefs && componentRefs.length > 0) {
+          componentRefs.forEach(componentInstance => {
+            if (componentInstance && componentInstance.selectComponent) {
+              componentInstance.selectComponent();
+            }
+          });
         }
       });
     } else {
@@ -258,11 +262,23 @@ class PageComposer extends React.Component {
   }
 
   handleComponentInstanceInitialize(elementKey, componentRef) {
-    this.componentInstancesMap[elementKey] = componentRef;
+    this.componentInstancesMap[elementKey] = this.componentInstancesMap[elementKey] || [];
+    this.componentInstancesMap[elementKey].push(componentRef);
   }
 
-  handleComponentInstanceDestroy(elementKey) {
-    delete this.componentInstancesMap[elementKey];
+  handleComponentInstanceDestroy(elementKey, componentRef) {
+    const componentRefs = this.componentInstancesMap[elementKey];
+    if (componentRefs) {
+      if (componentRefs.length === 1) {
+        delete this.componentInstancesMap[elementKey];
+      } else if (componentRefs.length > 1) {
+        const foundIndex = componentRefs.findIndex(i => i === componentRef);
+        if (foundIndex >= 0) {
+          componentRefs.splice(foundIndex, 1);
+          this.componentInstancesMap[elementKey] = componentRefs;
+        }
+      }
+    }
   }
 
   handleReceiveMessage(event) {

src/framework/components/PageComposer/utilities.js

@@ -6,6 +6,27 @@ export function offsetInViewPort(el) {
   return getPosition(el);
 }
 
+export function isVisible(el) {
+  if (el) {
+    let styleDisplay = el.style.display;
+    let styleVisibility = el.style.visibility;
+    if (styleDisplay === 'none' || styleVisibility === 'hidden') {
+      return false;
+    } else {
+      const computedStyle = window.getComputedStyle(el, null);
+      if (computedStyle) {
+        styleDisplay = computedStyle.getPropertyValue('display');
+        styleVisibility = computedStyle.getPropertyValue('visibility');
+        if (styleDisplay === 'none' || styleVisibility === 'hidden') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
 function getPosition1(el) {
   let xPos = 0;
   let yPos = 0;