From 2f3cff9b3f6711b8e60f8e44bc8544205b12a409 Mon Sep 17 00:00:00 2001
From: Evgeny Kochetkov <evgeny.kochetkov@me.com>
Date: Tue, 8 Aug 2017 19:08:26 +0300
Subject: [PATCH 1/2] tweak(xod-client): optimize onMouseMove handler in Patch
 container

---
 .../src/editor/containers/Patch.jsx           | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/packages/xod-client/src/editor/containers/Patch.jsx b/packages/xod-client/src/editor/containers/Patch.jsx
index f2af9755..851909ae 100644
--- a/packages/xod-client/src/editor/containers/Patch.jsx
+++ b/packages/xod-client/src/editor/containers/Patch.jsx
@@ -66,33 +66,39 @@ class Patch extends React.Component {
 
   onNodeMouseDown(event, nodeId) {
     this.props.actions.selectNode(nodeId);
-
     const clickedNode = this.props.nodes[nodeId];
-    const mouseOffsetFromClickedEntity =
-      subtractPoints(this.state.mousePosition, clickedNode.position);
 
-    this.setState({
-      isMouseDown: true,
-      mouseOffsetFromClickedEntity,
+    this.updateMousePosition(event, () => {
+      const mouseOffsetFromClickedEntity =
+        subtractPoints(this.state.mousePosition, clickedNode.position);
+
+      this.setState({
+        isMouseDown: true,
+        mouseOffsetFromClickedEntity,
+      });
     });
   }
 
   onCommentMouseDown(event, commentId) {
     this.props.actions.selectComment(commentId);
-
     const clickedComment = this.props.comments[commentId];
-    const mouseOffsetFromClickedEntity =
-      subtractPoints(this.state.mousePosition, clickedComment.position);
 
-    this.setState({
-      isMouseDown: true,
-      mouseOffsetFromClickedEntity,
+    this.updateMousePosition(event, () => {
+      const mouseOffsetFromClickedEntity =
+        subtractPoints(this.state.mousePosition, clickedComment.position);
+
+      this.setState({
+        isMouseDown: true,
+        mouseOffsetFromClickedEntity,
+      });
     });
   }
 
   onCommentResizeHandleMouseDown(event, commentId) {
     this.props.actions.selectComment(commentId);
 
+    this.updateMousePosition(event);
+
     this.setState({
       isMouseDown: true,
       manipulationMode: MANIPULATION_MODE.RESIZE,
@@ -123,6 +129,8 @@ class Patch extends React.Component {
   }
 
   onMouseMove(event) {
+    if (!(this.state.isMouseDown || this.props.mode.isLinking)) return;
+
     // jump to move mode only if user actually drags something
     if (
       this.state.isMouseDown &&
@@ -133,17 +141,7 @@ class Patch extends React.Component {
       });
     }
 
-    if (!this.patchSvgRef) return;
-    const bbox = this.patchSvgRef.getBoundingClientRect();
-
-    // TODO: probably, could be optimized, but for now we are
-    // always keeping an up-to-date mouse position in state
-    this.setState({
-      mousePosition: {
-        x: event.clientX - bbox.left,
-        y: event.clientY - bbox.top,
-      },
-    });
+    this.updateMousePosition(event);
   }
 
   onMouseUp() {
@@ -266,6 +264,18 @@ class Patch extends React.Component {
     };
   }
 
+  updateMousePosition(event, setStateCallback) {
+    if (!this.patchSvgRef) return;
+    const bbox = this.patchSvgRef.getBoundingClientRect();
+
+    this.setState({
+      mousePosition: {
+        x: event.clientX - bbox.left,
+        y: event.clientY - bbox.top,
+      },
+    }, setStateCallback);
+  }
+
   render() {
     const links = R.values(this.props.links);
 
@@ -325,12 +335,12 @@ class Patch extends React.Component {
             onResizeHandleMouseDown={this.onCommentResizeHandleMouseDown}
             onFinishEditing={this.props.actions.editComment}
           />
-          {(this.state.manipulationMode !== MANIPULATION_MODE.SELECT) && (
+          {(this.state.manipulationMode !== MANIPULATION_MODE.SELECT) ? (
             <Layers.SnappingPreview
               draggedEntityPosition={manipulatedEntityPosition}
               draggedEntitySize={manipulatedEntitySize}
             />
-          )}
+          ) : null}
           <Layers.ManipulatedComment
             comment={manipulatedComment}
             position={manipulatedEntityPosition}

From c2da34f28c531a4634276e9fa56afff372e1acad Mon Sep 17 00:00:00 2001
From: Evgeny Kochetkov <evgeny.kochetkov@me.com>
Date: Tue, 8 Aug 2017 19:17:30 +0300
Subject: [PATCH 2/2] tweak(xod-client): disable redux devtools in production

because they impact performance quite a bit
---
 packages/xod-client/src/utils/devtools.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/xod-client/src/utils/devtools.jsx b/packages/xod-client/src/utils/devtools.jsx
index 1b9d7479..e3e26d4d 100644
--- a/packages/xod-client/src/utils/devtools.jsx
+++ b/packages/xod-client/src/utils/devtools.jsx
@@ -3,9 +3,16 @@ import DevTools from '../core/containers/DevTools';
 
 const hasDevToolExtension = (typeof window === 'object' && typeof window.devToolsExtension !== 'undefined');
 
-export const devToolMiddleware = hasDevToolExtension ?
-  window.devToolsExtension() : DevTools.instrument();
+const DEVTOOLS_ENABLED = process.env.NODE_ENV !== 'production';
 
-export const devTool = (hasDevToolExtension ? null : <DevTools />);
+const getDevtoolsMiddleware = () => (
+  hasDevToolExtension
+    ? window.devToolsExtension()
+    : DevTools.instrument()
+);
+
+export const devToolMiddleware = DEVTOOLS_ENABLED ? getDevtoolsMiddleware() : x => x;
+
+export const devTool = (hasDevToolExtension || !DEVTOOLS_ENABLED) ? null : <DevTools />;
 
 export default devTool;