Rulenode component

@@ -1407,12 +1407,14 @@
         "balanced-match": {
         "balanced-match": {
           "version": "1.0.0",
           "version": "1.0.0",
           "bundled": true,
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         },
         "brace-expansion": {
         "brace-expansion": {
           "version": "1.1.11",
           "version": "1.1.11",
           "bundled": true,
           "bundled": true,
           "dev": true,
           "dev": true,
+          "optional": true,
           "requires": {
           "requires": {
             "balanced-match": "^1.0.0",
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
             "concat-map": "0.0.1"
@@ -1427,17 +1429,20 @@
         "code-point-at": {
         "code-point-at": {
           "version": "1.1.0",
           "version": "1.1.0",
           "bundled": true,
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         },
         "concat-map": {
         "concat-map": {
           "version": "0.0.1",
           "version": "0.0.1",
           "bundled": true,
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         },
         "console-control-strings": {
         "console-control-strings": {
           "version": "1.1.0",
           "version": "1.1.0",
           "bundled": true,
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         },
         "core-util-is": {
         "core-util-is": {
           "version": "1.0.2",
           "version": "1.0.2",
@@ -1554,7 +1559,8 @@
         "inherits": {
         "inherits": {
           "version": "2.0.3",
           "version": "2.0.3",
           "bundled": true,
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         },
         "ini": {
         "ini": {
           "version": "1.3.5",
           "version": "1.3.5",
@@ -1566,6 +1572,7 @@
           "version": "1.0.0",
           "version": "1.0.0",
           "bundled": true,
           "bundled": true,
           "dev": true,
           "dev": true,
+          "optional": true,
           "requires": {
           "requires": {
             "number-is-nan": "^1.0.0"
             "number-is-nan": "^1.0.0"
           }
           }
@@ -1580,6 +1587,7 @@
           "version": "3.0.4",
           "version": "3.0.4",
           "bundled": true,
           "bundled": true,
           "dev": true,
           "dev": true,
+          "optional": true,
           "requires": {
           "requires": {
             "brace-expansion": "^1.1.7"
             "brace-expansion": "^1.1.7"
           }
           }
@@ -1691,7 +1699,8 @@
         "number-is-nan": {
         "number-is-nan": {
           "version": "1.0.1",
           "version": "1.0.1",
           "bundled": true,
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         },
         "object-assign": {
         "object-assign": {
           "version": "4.1.1",
           "version": "4.1.1",
@@ -1703,6 +1712,7 @@
           "version": "1.4.0",
           "version": "1.4.0",
           "bundled": true,
           "bundled": true,
           "dev": true,
           "dev": true,
+          "optional": true,
           "requires": {
           "requires": {
             "wrappy": "1"
             "wrappy": "1"
           }
           }
@@ -1824,6 +1834,7 @@
           "version": "1.0.2",
           "version": "1.0.2",
           "bundled": true,
           "bundled": true,
           "dev": true,
           "dev": true,
+          "optional": true,
           "requires": {
           "requires": {
             "code-point-at": "^1.0.0",
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host ::ng-deep {
+  .fc-canvas {
+    .fc-node {
+      border-radius: 8px;
+      &.fc-selected {
+        &:not(.fc-edit) {
+          margin: -3px;
+          border: solid 3px #f00;
+        }
+      }
+    }
+
+    .fc-edit {
+      .fc-nodeedit,
+      .fc-nodedelete {
+        border: solid 2px #fff;
+        background: #f83e05;
+        outline: none;
+      }
+    }
+
+    .fc-arrow-marker {
+      polygon {
+        fill: #808080;
+        stroke: #808080;
+      }
+    }
+
+    .fc-arrow-marker-selected {
+      polygon {
+        fill: #f00;
+        stroke: #f00;
+      }
+    }
+
+    .fc-edge {
+      outline: none;
+      stroke: #808080;
+
+      &.fc-selected {
+        stroke: #f00;
+      }
+
+      &.fc-hover {
+        stroke: #808080;
+      }
+    }
+
+    .edge-endpoint {
+      fill: #808080;
+    }
+
+    .fc-edge-label {
+      opacity: 1 !important;
+      &:focus {
+        outline: 0;
+      }
+
+      &.fc-selected {
+        .fc-edge-label-text {
+          span {
+            color: #fff !important;
+            background-color: #f00 !important;
+            border: solid #f00 !important;
+          }
+        }
+      }
+
+      .fc-edge-label-text {
+        font-size: 14px !important;
+        font-weight: 600 !important;
+
+        span {
+          background-color: #fff !important;
+          color: #003a79 !important;
+          border: solid 2px #003a79 !important;
+        }
+      }
+    }
+  }
+}

@@ -39,7 +39,7 @@ import { RuleChainService } from '@core/http/rule-chain.service';
 @Component({
 @Component({
   selector: 'tb-rulechain-page',
   selector: 'tb-rulechain-page',
   templateUrl: './rulechain-page.component.html',
   templateUrl: './rulechain-page.component.html',
-  styleUrls: []
+  styleUrls: ['./rulechain-page.component.scss']
 })
 })
 export class RuleChainPageComponent extends PageComponent implements OnInit, HasDirtyFlag {
 export class RuleChainPageComponent extends PageComponent implements OnInit, HasDirtyFlag {
 
 

@@ -22,16 +22,28 @@ import {RuleChainRoutingModule} from '@modules/home/pages/rulechain/rulechain-ro
 import {HomeComponentsModule} from '@modules/home/components/home-components.module';
 import {HomeComponentsModule} from '@modules/home/components/home-components.module';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
 import { RuleChainPageComponent } from './rulechain-page.component';
 import { RuleChainPageComponent } from './rulechain-page.component';
+import { RuleNodeComponent } from '@home/pages/rulechain/rulenode.component';
+import { FC_NODE_COMPONENT_CONFIG } from 'ngx-flowchart/dist/ngx-flowchart';
 
 
 @NgModule({
 @NgModule({
   entryComponents: [
   entryComponents: [
     RuleChainComponent,
     RuleChainComponent,
-    RuleChainTabsComponent
+    RuleChainTabsComponent,
+    RuleNodeComponent
   ],
   ],
   declarations: [
   declarations: [
     RuleChainComponent,
     RuleChainComponent,
     RuleChainTabsComponent,
     RuleChainTabsComponent,
-    RuleChainPageComponent
+    RuleChainPageComponent,
+    RuleNodeComponent
+  ],
+  providers: [
+    {
+      provide: FC_NODE_COMPONENT_CONFIG,
+      useValue: {
+        nodeComponentType: RuleNodeComponent
+      }
+    }
   ],
   ],
   imports: [
   imports: [
     CommonModule,
     CommonModule,

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div
+   (dblclick)="userNodeCallbacks.doubleClick($event, node)"
+   (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 }">
+    <mat-icon *ngIf="!node.iconUrl" fxFlex="15">{{node.icon}}</mat-icon>
+    <img *ngIf="node.iconUrl" fxFlex="15" src="{{node.iconUrl}}"/>
+    <div fxLayout="column" fxFlex="85" fxLayoutAlign="center">
+      <span class="tb-node-type">{{ node.component.name }}</span>
+      <span class="tb-node-title" *ngIf="node.name">{{ node.name }}</span>
+    </div>
+    <div class="{{flowchartConstants.leftConnectorClass}}">
+      <div fc-magnet [connector]="connector" [callbacks]="callbacks"
+           *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
+        <div fc-connector [connector]="connector"
+             [mouseOverConnector]="mouseOverConnector"
+             [callbacks]="callbacks"
+             [modelservice]="modelservice"></div>
+      </div>
+    </div>
+    <div class="{{flowchartConstants.rightConnectorClass}}">
+      <div fc-magnet [connector]="connector" [callbacks]="callbacks"
+           *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
+        <div fc-connector [connector]="connector"
+             [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>
+</div>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+
+  .fc-node-overlay {
+    position: absolute;
+    pointer-events: none;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000;
+    border-radius: 5px;
+    opacity: 0;
+  }
+
+  :host-context(.fc-hover) .fc-node-overlay {
+    opacity: 0.25;
+    transition: opacity .2s;
+  }
+
+  :host-context(.fc-selected) .fc-node-overlay {
+    opacity: 0.25;
+  }
+
+  :host-context(.fc-edit) {
+    .fc-nodeedit,
+    .fc-nodedelete {
+      border: solid 2px #fff;
+      background: #f83e05;
+      outline: none;
+    }
+  }
+
+  .tb-rule-node {
+    display: flex;
+    flex-direction: row;
+    min-width: 150px;
+    max-width: 150px;
+    height: 32px;
+    min-height: 32px;
+    max-height: 32px;
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #333;
+    pointer-events: none;
+    background-color: #f15b26;
+    border: solid 1px #777;
+    border-radius: 5px;
+
+    &.tb-filter-type {
+      background-color: #f1e861;
+    }
+
+    &.tb-enrichment-type {
+      background-color: #cdf14e;
+    }
+
+    &.tb-transformation-type {
+      background-color: #79cef1;
+    }
+
+    &.tb-action-type {
+      background-color: #f1928f;
+    }
+
+    &.tb-external-type {
+      background-color: #fbc766;
+    }
+
+    &.tb-rule-chain-type {
+      background-color: #d6c4f1;
+    }
+
+    &.tb-unknown-type {
+      background-color: #f16c29;
+    }
+
+    &.tb-rule-node-highlighted:not(.tb-rule-node-invalid) {
+      box-shadow: 0 0 10px 6px #51cbee;
+
+      .tb-node-title {
+        font-weight: 700;
+        text-decoration: underline;
+      }
+    }
+
+    &.tb-rule-node-invalid {
+      box-shadow: 0 0 10px 6px #ff5c50;
+    }
+
+    &.tb-input-type {
+      user-select: none;
+      background-color: #a3eaa9;
+    }
+
+    mat-icon, img {
+      margin: auto;
+      width: 20px;
+      min-width: 20px;
+      height: 20px;
+      min-height: 20px;
+      padding-right: 4px;
+      font-size: 20px;
+    }
+
+    .tb-node-title {
+      font-weight: 500;
+    }
+
+    .tb-node-type,
+    .tb-node-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .fc-leftConnectors,
+    .fc-rightConnectors {
+      position: absolute;
+      top: 0;
+
+      z-index: 0;
+
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .fc-magnet {
+        align-items: center;
+      }
+    }
+
+    .fc-leftConnectors {
+      left: -20px;
+    }
+
+    .fc-rightConnectors {
+      right: -20px;
+    }
+
+    .fc-magnet {
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
+      height: 60px;
+    }
+
+    .fc-connector {
+      width: 14px;
+      height: 14px;
+      margin: 10px;
+      pointer-events: all;
+      background-color: #ccc;
+      border: 1px solid #333;
+      border-radius: 5px;
+    }
+
+    .fc-connector.fc-hover {
+      background-color: #000;
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { FcNodeComponent } from 'ngx-flowchart/dist/ngx-flowchart';
+
+@Component({
+  selector: 'rule-node',
+  templateUrl: './rulenode.component.html',
+  styleUrls: ['./rulenode.component.scss']
+})
+export class RuleNodeComponent extends FcNodeComponent {
+
+  constructor() {
+    super();
+  }
+
+}