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) ? ( - )} + ) : null} ); +const getDevtoolsMiddleware = () => ( + hasDevToolExtension + ? window.devToolsExtension() + : DevTools.instrument() +); + +export const devToolMiddleware = DEVTOOLS_ENABLED ? getDevtoolsMiddleware() : x => x; + +export const devTool = (hasDevToolExtension || !DEVTOOLS_ENABLED) ? null : ; export default devTool;