From ec8f53aea9c38f42fe4e6c28d1f31705d996cb04 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 6 Feb 2020 13:00:39 +0200
Subject: [PATCH] Rule chain UI performance improvements

---
 .../pages/rulechain/rulenode.component.html   | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
index 65ca7d13b4..5cee2166d3 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
@@ -20,8 +20,10 @@
    (mousedown)="userNodeCallbacks.mouseDown($event, node)"
    (mouseenter)="userNodeCallbacks.mouseEnter($event, node)"
    (mouseleave)="userNodeCallbacks.mouseLeave($event, node)">
-  <div class="{{flowchartConstants.nodeOverlayClass}}"></div>
-  <div class="tb-rule-node {{node.nodeClass}}" [ngClass]="{'tb-rule-node-highlighted' : node.highlighted, 'tb-rule-node-invalid': node.error }">
+  <div class="fc-node-overlay"></div>
+  <div class="tb-rule-node {{node.nodeClass}}"
+       [ngClass]="{'tb-rule-node-highlighted' : node.highlighted,
+                   'tb-rule-node-invalid': node.error }">
     <mat-icon *ngIf="!iconUrl" fxFlex="15">{{node.icon}}</mat-icon>
     <img *ngIf="iconUrl" fxFlex="15" [src]="iconUrl"/>
     <div fxLayout="column" fxFlex="85" fxLayoutAlign="center">
@@ -32,6 +34,7 @@
       <div fc-magnet [connector]="connector" [callbacks]="callbacks"
            *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
         <div fc-connector [connector]="connector"
+             [nodeRectInfo]="nodeRectInfo"
              [mouseOverConnector]="mouseOverConnector"
              [callbacks]="callbacks"
              [modelservice]="modelservice"></div>
@@ -41,16 +44,19 @@
       <div fc-magnet [connector]="connector" [callbacks]="callbacks"
            *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
         <div fc-connector [connector]="connector"
+             [nodeRectInfo]="nodeRectInfo"
              [mouseOverConnector]="mouseOverConnector"
              [callbacks]="callbacks"
              [modelservice]="modelservice"></div>
       </div>
     </div>
   </div>
-  <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">
-    <i class="fa fa-pencil" aria-hidden="true"></i>
-  </div>
-  <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">
-    &times;
-  </div>
+  <section *ngIf="modelservice.isEditable() && !node.readonly">
+    <div class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">
+      <i class="fa fa-pencil" aria-hidden="true"></i>
+    </div>
+    <div class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">
+      &times;
+    </div>
+  </section>
 </div>