Commit ec8f53aea9c38f42fe4e6c28d1f31705d996cb04
1 parent
c979a930
Rule chain UI performance improvements
Showing
1 changed file
with
14 additions
and
8 deletions
| @@ -20,8 +20,10 @@ | @@ -20,8 +20,10 @@ | ||
| 20 | (mousedown)="userNodeCallbacks.mouseDown($event, node)" | 20 | (mousedown)="userNodeCallbacks.mouseDown($event, node)" |
| 21 | (mouseenter)="userNodeCallbacks.mouseEnter($event, node)" | 21 | (mouseenter)="userNodeCallbacks.mouseEnter($event, node)" |
| 22 | (mouseleave)="userNodeCallbacks.mouseLeave($event, node)"> | 22 | (mouseleave)="userNodeCallbacks.mouseLeave($event, node)"> |
| 23 | - <div class="{{flowchartConstants.nodeOverlayClass}}"></div> | ||
| 24 | - <div class="tb-rule-node {{node.nodeClass}}" [ngClass]="{'tb-rule-node-highlighted' : node.highlighted, 'tb-rule-node-invalid': node.error }"> | 23 | + <div class="fc-node-overlay"></div> |
| 24 | + <div class="tb-rule-node {{node.nodeClass}}" | ||
| 25 | + [ngClass]="{'tb-rule-node-highlighted' : node.highlighted, | ||
| 26 | + 'tb-rule-node-invalid': node.error }"> | ||
| 25 | <mat-icon *ngIf="!iconUrl" fxFlex="15">{{node.icon}}</mat-icon> | 27 | <mat-icon *ngIf="!iconUrl" fxFlex="15">{{node.icon}}</mat-icon> |
| 26 | <img *ngIf="iconUrl" fxFlex="15" [src]="iconUrl"/> | 28 | <img *ngIf="iconUrl" fxFlex="15" [src]="iconUrl"/> |
| 27 | <div fxLayout="column" fxFlex="85" fxLayoutAlign="center"> | 29 | <div fxLayout="column" fxFlex="85" fxLayoutAlign="center"> |
| @@ -32,6 +34,7 @@ | @@ -32,6 +34,7 @@ | ||
| 32 | <div fc-magnet [connector]="connector" [callbacks]="callbacks" | 34 | <div fc-magnet [connector]="connector" [callbacks]="callbacks" |
| 33 | *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)"> | 35 | *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)"> |
| 34 | <div fc-connector [connector]="connector" | 36 | <div fc-connector [connector]="connector" |
| 37 | + [nodeRectInfo]="nodeRectInfo" | ||
| 35 | [mouseOverConnector]="mouseOverConnector" | 38 | [mouseOverConnector]="mouseOverConnector" |
| 36 | [callbacks]="callbacks" | 39 | [callbacks]="callbacks" |
| 37 | [modelservice]="modelservice"></div> | 40 | [modelservice]="modelservice"></div> |
| @@ -41,16 +44,19 @@ | @@ -41,16 +44,19 @@ | ||
| 41 | <div fc-magnet [connector]="connector" [callbacks]="callbacks" | 44 | <div fc-magnet [connector]="connector" [callbacks]="callbacks" |
| 42 | *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)"> | 45 | *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)"> |
| 43 | <div fc-connector [connector]="connector" | 46 | <div fc-connector [connector]="connector" |
| 47 | + [nodeRectInfo]="nodeRectInfo" | ||
| 44 | [mouseOverConnector]="mouseOverConnector" | 48 | [mouseOverConnector]="mouseOverConnector" |
| 45 | [callbacks]="callbacks" | 49 | [callbacks]="callbacks" |
| 46 | [modelservice]="modelservice"></div> | 50 | [modelservice]="modelservice"></div> |
| 47 | </div> | 51 | </div> |
| 48 | </div> | 52 | </div> |
| 49 | </div> | 53 | </div> |
| 50 | - <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)"> | ||
| 51 | - <i class="fa fa-pencil" aria-hidden="true"></i> | ||
| 52 | - </div> | ||
| 53 | - <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" (click)="modelservice.nodes.delete(node)"> | ||
| 54 | - × | ||
| 55 | - </div> | 54 | + <section *ngIf="modelservice.isEditable() && !node.readonly"> |
| 55 | + <div class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)"> | ||
| 56 | + <i class="fa fa-pencil" aria-hidden="true"></i> | ||
| 57 | + </div> | ||
| 58 | + <div class="fc-nodedelete" (click)="modelservice.nodes.delete(node)"> | ||
| 59 | + × | ||
| 60 | + </div> | ||
| 61 | + </section> | ||
| 56 | </div> | 62 | </div> |