From fd960e77162bdd1d1836f8aba56e9a1d1b06b321 Mon Sep 17 00:00:00 2001
From: Jung Kim <jung.kim.3627@gmail.com>
Date: Sun, 10 Apr 2022 23:12:28 -0700
Subject: [PATCH] Fix graph action staying on after mouseout and few more
 optimizations

---
 components/graph/git-elements.ts      | 43 ++++++++++++++-------------
 components/graph/git-graph-actions.ts | 23 ++++----------
 components/graph/graph.html           |  2 +-
 components/graph/graph.ts             | 10 ++-----
 4 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/components/graph/git-elements.ts b/components/graph/git-elements.ts
index e3e362fd5..cdd0c535e 100644
--- a/components/graph/git-elements.ts
+++ b/components/graph/git-elements.ts
@@ -82,7 +82,7 @@ export class NodeViewModel extends AbstractNode {
   branchOrder = ko.observable<number>();
   refSearchFormVisible = ko.observable(false);
   getGraphAttr: ko.Computed<number[]>
-  dropareaGraphActions: ko.Computed<ActionBase[]>
+  _dropAreaGraphActions: ActionBase[] | undefined
 
   constructor(graph: AbstractGraph, sha1: string) {
     super(graph);
@@ -90,25 +90,6 @@ export class NodeViewModel extends AbstractNode {
     this.selected.subscribe(() => {
       ungit.programEvents.dispatch({ event: 'graph-render' });
     });
-    this.dropareaGraphActions = ko.pureComputed(() => {
-      if (this.isViewable()) {
-        return [
-          new Move(this.graph, this),
-          new Rebase(this.graph, this),
-          new Merge(this.graph, this),
-          new Push(this.graph, this),
-          new Reset(this.graph, this),
-          new Checkout(this.graph, this),
-          new Delete(this.graph, this),
-          new CherryPick(this.graph, this),
-          new Uncommit(this.graph, this),
-          new Revert(this.graph, this),
-          new Squash(this.graph, this),
-        ];
-      } else {
-        return []
-      }
-    }).extend({ rateLimit: { timeout: 250, method: "notifyWhenChangesStop" } });
 
     this.commitComponent = components.create('commit', this);
     this.r = ko.observable<number>();
@@ -125,6 +106,28 @@ export class NodeViewModel extends AbstractNode {
     this.getGraphAttr = ko.pureComputed(() => [this.cx(), this.cy()]);
   }
 
+  getDropAreaGraphActions() {
+    if (this.isViewable() && !this._dropAreaGraphActions) {
+      this._dropAreaGraphActions = [
+        new Move(this.graph, this),
+        new Rebase(this.graph, this),
+        new Merge(this.graph, this),
+        new Push(this.graph, this),
+        new Reset(this.graph, this),
+        new Checkout(this.graph, this),
+        new Delete(this.graph, this),
+        new CherryPick(this.graph, this),
+        new Uncommit(this.graph, this),
+        new Revert(this.graph, this),
+        new Squash(this.graph, this),
+      ];
+    } else if (!this.isViewable() && this._dropAreaGraphActions) {
+      this._dropAreaGraphActions = undefined;
+    }
+
+    return this._dropAreaGraphActions;
+  }
+
 
   setGraphAttr(val) {
     this.element().setAttribute('x', (val[0] - 30).toString());
diff --git a/components/graph/git-graph-actions.ts b/components/graph/git-graph-actions.ts
index 8872e9c1f..4c4dffcda 100644
--- a/components/graph/git-graph-actions.ts
+++ b/components/graph/git-graph-actions.ts
@@ -54,36 +54,23 @@ export class ActionBase {
     if (!this.visible() || this.graph.isBigRepo()) {
       return;
     }
-    if (this.graph.hoverGraphAction() !== this) {
-      this.graph.hoverGraphAction(this);
-    }
+    this.graph.hoverGraphAction(this);
   }
 
   dragLeave() {
-    if (!this.visible() || this.graph.isBigRepo()) {
-      return;
-    }
-    if (this.graph.hoverGraphAction() !== null) {
-      this.graph.hoverGraphAction(null);
-    }
+    this.graph.hoverGraphAction(null);
   }
 
   mouseover() {
     if (!this.visible() || this.graph.isBigRepo()) {
       return;
     }
-    if (this.graph.hoverGraphAction() !== this) {
-      this.graph.hoverGraphAction(this);
-    }
+    this.graph.hoverGraphAction(this);
   }
 
   mouseout() {
-    if (!this.visible() || this.graph.isBigRepo()) {
-      return;
-    }
-    if (this.graph.hoverGraphAction() !== null) {
-      this.graph.hoverGraphAction(null);
-    }
+    console.log('>>>>12311', this.graph.hoverGraphAction())
+    this.graph.hoverGraphAction(null);
   }
 
   perform(): Promise<unknown> {
diff --git a/components/graph/graph.html b/components/graph/graph.html
index 1245f5560..d694df57d 100644
--- a/components/graph/graph.html
+++ b/components/graph/graph.html
@@ -23,7 +23,7 @@
         </span>
         <!-- /ko -->
 
-        <!-- ko foreach: dropareaGraphActions -->
+        <!-- ko foreach: getDropAreaGraphActions() -->
         <!-- ko if: visible -->
         <span class="graphAction"
           data-bind="css: cssClasses, attr: { 'data-ta-action': style }, event: { mouseover: mouseover, mouseout: mouseout }">
diff --git a/components/graph/graph.ts b/components/graph/graph.ts
index 5a8ede31b..f817b96c2 100644
--- a/components/graph/graph.ts
+++ b/components/graph/graph.ts
@@ -80,13 +80,9 @@ class GraphViewModel extends AbstractGraph {
       'beforeChange'
     );
     this.hoverGraphAction.subscribe((value) => {
-      if (!value) {
-        return;
-      }
-      const hoverGraphic = value.createHoverGraphic();
-      if (value && value.createHoverGraphic && this.hoverGraphActionGraphic() !== hoverGraphic) {
-        this.hoverGraphActionGraphic(hoverGraphic);
-      } else if (this.hoverGraphActionGraphic() !== null) {
+      if (value && value.createHoverGraphic) {
+        this.hoverGraphActionGraphic(value.createHoverGraphic());
+      } else {
         this.hoverGraphActionGraphic(null);
       }
     });