Igor Kulikov
7 years ago
7 changed files with 392 additions and 9 deletions
@ -0,0 +1,96 @@ |
|||
/** |
|||
* 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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
<!-- |
|||
|
|||
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)"> |
|||
× |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,177 @@ |
|||
/** |
|||
* 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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
///
|
|||
/// 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(); |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue