Fix graph action staying on after mouseout and few more optimizations

FredrikNoren · Apr 11, 2022 · fd960e7 · fd960e7
1 parent 3fa3d62
commit fd960e7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 46 deletions.
diff --git a/components/graph/git-elements.ts b/components/graph/git-elements.ts
@@ -82,33 +82,14 @@ 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);
     this.sha1 = sha1;
     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
@@ -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
@@ -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
@@ -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);
       }
     });