From d6f9e7bebb403e47c17aae024f66c4028d361cd0 Mon Sep 17 00:00:00 2001
From: Evgeny Kochetkov <evgeny.kochetkov@me.com>
Date: Fri, 1 Mar 2019 16:24:05 +0300
Subject: [PATCH] fix(xod-client): move links during node resize

Closes #1691
---
 .../editor/containers/Patch/modes/moving.jsx  | 28 +++++++------
 .../containers/Patch/modes/resizingNode.jsx   | 41 ++++++++++++++++---
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/packages/xod-client/src/editor/containers/Patch/modes/moving.jsx b/packages/xod-client/src/editor/containers/Patch/modes/moving.jsx
index cc3a7c6e..4a242314 100644
--- a/packages/xod-client/src/editor/containers/Patch/modes/moving.jsx
+++ b/packages/xod-client/src/editor/containers/Patch/modes/moving.jsx
@@ -62,6 +62,20 @@ const updateLinksPositions = R.uncurryN(3)((draggedNodeIds, deltaPosition) =>
   )
 );
 
+// We have to shorten dragged links to avoid overlapping
+// Pins with ending of the Link, cause it became ugly
+// when User drags Link connected to the variadic Pin,
+// that contains "dots" symbol inside it.
+export const shortenDraggedLinks = R.map(link =>
+  R.compose(
+    R.assoc('from', R.__, link),
+    R.converge(changeLineLength(R.negate(PIN_RADIUS_WITH_OUTER_STROKE)), [
+      R.prop('to'),
+      R.prop('from'),
+    ])
+  )(link)
+);
+
 const movingMode = {
   getInitialState(props, { mousePosition, dragStartPosition }) {
     const draggedNodeIds = getSelectedEntityIdsOfType(
@@ -131,19 +145,7 @@ const movingMode = {
       R.partition(isLinkConnectedToNodeIds(draggedNodeIds))
     )(api.props.links);
 
-    // We have to shorten dragged links to avoid overlapping
-    // Pins with ending of the Link, cause it became ugly
-    // when User drags Link connected to the variadic Pin,
-    // that contains "dots" symbol inside it.
-    const shortenedDraggedLinks = R.map(link =>
-      R.compose(
-        R.assoc('from', R.__, link),
-        R.converge(changeLineLength(R.negate(PIN_RADIUS_WITH_OUTER_STROKE)), [
-          R.prop('to'),
-          R.prop('from'),
-        ])
-      )(link)
-    )(draggedLinks);
+    const shortenedDraggedLinks = shortenDraggedLinks(draggedLinks);
 
     const snappedPreviews = getSnappedPreviews(
       draggedNodes,
diff --git a/packages/xod-client/src/editor/containers/Patch/modes/resizingNode.jsx b/packages/xod-client/src/editor/containers/Patch/modes/resizingNode.jsx
index 6a2b3d34..6b38629a 100644
--- a/packages/xod-client/src/editor/containers/Patch/modes/resizingNode.jsx
+++ b/packages/xod-client/src/editor/containers/Patch/modes/resizingNode.jsx
@@ -4,6 +4,7 @@
 import * as R from 'ramda';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
+import * as XP from 'xod-project';
 
 import { EDITOR_MODE } from '../../../constants';
 
@@ -24,6 +25,25 @@ import {
 import { getPxSize } from '../../../../project/pxDimensions';
 
 import { getOffsetMatrix, bindApi, getMousePosition } from '../modeUtils';
+import { isLinkConnectedToNodeIds } from '../../../../project/utils';
+import { shortenDraggedLinks } from './moving';
+
+const updateLinksPositions = R.uncurryN(2)(resizedNodes =>
+  R.map(link => {
+    // only outputs are moving during node resizing
+    const nodeId = XP.getLinkOutputNodeId(link);
+
+    if (!R.has(nodeId, resizedNodes)) return link;
+
+    const node = resizedNodes[nodeId];
+    // pins are moved only vertically during resizing,
+    // so we don't touch the `x`
+    const linkEndY =
+      node.pxPosition.y + node.pins[XP.getLinkOutputPinKey(link)].position.y;
+
+    return R.assocPath(['to', 'y'], linkEndY, link);
+  })
+);
 
 let patchSvgRef = null;
 
@@ -122,11 +142,19 @@ const resizingNodeMode = {
     const deltaPosition = getDeltaPosition(api);
 
     const { resizedNodeId, idleNodes } = api.state;
+
     const resizedNodes = R.compose(
       addDeltaToNodeSizes(deltaPosition),
       R.pick([resizedNodeId])
     )(api.props.nodes);
 
+    const [draggedLinks, idleLinks] = R.compose(
+      R.over(R.lensIndex(0), updateLinksPositions(resizedNodes)),
+      R.partition(isLinkConnectedToNodeIds([resizedNodeId]))
+    )(api.props.links);
+
+    const shortenedDraggedLinks = shortenDraggedLinks(draggedLinks);
+
     const snappedPreviews = R.compose(
       R.map(
         R.compose(
@@ -157,10 +185,7 @@ const resizingNodeMode = {
               selection={api.props.selection}
               onFinishEditing={api.props.actions.editComment}
             />
-            <Layers.Links
-              links={api.props.links}
-              selection={api.props.selection}
-            />
+            <Layers.Links links={idleLinks} selection={api.props.selection} />
             <Layers.Nodes
               nodes={idleNodes}
               selection={api.props.selection}
@@ -178,8 +203,14 @@ const resizingNodeMode = {
             />
 
             <Layers.SnappingPreview previews={snappedPreviews} />
+            <Layers.Links
+              key="dragged links"
+              links={shortenedDraggedLinks}
+              selection={api.props.selection}
+              isDragged
+            />
             <Layers.Nodes
-              key="resized comment"
+              key="resized node"
               areDragged
               nodes={resizedNodes}
               selection={api.props.selection}