From 242ccac29094e94d74eca1a6d7ed027145a2ccce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Forja?= <jnforja@gmail.com>
Date: Sun, 13 Sep 2020 18:17:16 +0100
Subject: [PATCH] Arrows binds/unbinds to bindable elements when moved with
 arrow keys (Issue #2103) (#2150)

---
 src/components/App.tsx                        | 12 +++++++++
 .../regressionTests.test.tsx.snap             |  2 +-
 src/tests/binding.test.tsx                    | 26 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index c178af34..f099bdde 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1530,6 +1530,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         });
       });
 
+      this.maybeSuggestBindingForAll(selectedElements);
+
       event.preventDefault();
     } else if (event.key === KEYS.ENTER) {
       const selectedElements = getSelectedElements(
@@ -1601,6 +1603,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     if (!event[KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {
       this.setState({ isBindingEnabled: true });
     }
+    if (isArrowKey(event.key)) {
+      const selectedElements = getSelectedElements(
+        this.scene.getElements(),
+        this.state,
+      );
+      isBindingEnabled(this.state)
+        ? bindOrUnbindSelectedElements(selectedElements)
+        : unbindLinearElements(selectedElements);
+      this.setState({ suggestedBindings: [] });
+    }
   });
 
   private selectShapeTool(elementType: AppState["elementType"]) {
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index 47dd3cc6..000e4dab 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -2676,7 +2676,7 @@ Object {
 
 exports[`regression tests arrow keys: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests arrow keys: [end of test] number of renders 1`] = `13`;
+exports[`regression tests arrow keys: [end of test] number of renders 1`] = `19`;
 
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] appState 1`] = `
 Object {
diff --git a/src/tests/binding.test.tsx b/src/tests/binding.test.tsx
index 7f68ae65..4ca802f4 100644
--- a/src/tests/binding.test.tsx
+++ b/src/tests/binding.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "./test-utils";
 import App from "../components/App";
-import { UI, Pointer } from "./helpers/ui";
+import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
 
@@ -79,4 +79,28 @@ describe("element binding", () => {
       expect(API.getSelectedElement().type).toBe("rectangle");
     },
   );
+
+  it("should bind/unbind arrow when moving it with keyboard", () => {
+    const rectangle = UI.createElement("rectangle", {
+      x: 75,
+      y: 0,
+      size: 100,
+    });
+
+    // Creates arrow 1px away from bidding with rectangle
+    const arrow = UI.createElement("arrow", {
+      x: 0,
+      y: 0,
+      size: 50,
+    });
+
+    expect(arrow.endBinding).toBe(null);
+
+    expect(API.getSelectedElement().type).toBe("arrow");
+    Keyboard.hotkeyPress("ARROW_RIGHT");
+    expect(arrow.endBinding?.elementId).toBe(rectangle.id);
+
+    Keyboard.hotkeyPress("ARROW_LEFT");
+    expect(arrow.endBinding).toBe(null);
+  });
 });