Merge pull request #1707 from xodio/fix-1691-links-begaviour-during-n…

…ode-resize Move links during node resize
xodio · Mar 4, 2019 · cc4853f · cc4853f
2 parents 4cd76ef + d6f9e7b
commit cc4853f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 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
@@ -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
@@ -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}