diff options
author | vempo <vitaliy.emporopulo@amdocs.com> | 2018-07-24 17:34:04 +0300 |
---|---|---|
committer | vempo <vitaliy.emporopulo@amdocs.com> | 2018-07-25 11:39:10 +0300 |
commit | a52d50e788792a63e97a9176ab319d53db7a2853 (patch) | |
tree | b1c2222cacf4b8192aea16d1e0315b1f005c5347 /deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node | |
parent | 3c2665debb400aef7f0ed9e235698d2ff9f859db (diff) |
Replaced old implementation at root
Old project files and directories has been moved
under 'deprecated-workflow-designer'. The old project
is not built by the CI anymore, but can be still built manually.
New modules/directories have been moved up and integrated with
the CI system.
Change-Id: I1528c792bcbcce9e50bfc294a1328a20e72c91cf
Issue-ID: SDC-1559
Signed-off-by: vempo <vitaliy.emporopulo@amdocs.com>
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node')
3 files changed, 517 insertions, 0 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css new file mode 100644 index 00000000..f1fead94 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css @@ -0,0 +1,229 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +.node { + cursor: pointer; + display: inline-block; + position: absolute; + z-index: 2; +} + +.node-icon{ + position: relative; + border-radius: 4px; +} + +.node-icon svg{ + display: block; + fill: #00ABFF; +} + +.active { + outline: 1px solid #00ABFF; +} + +/** + * Anchors + */ +.anchors { + position: absolute; + border-radius: 1em; + display: none; + background-color: #2e6f9a; + width: 12px; + height: 12px; + cursor: pointer; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -webkit-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; +} + +.node-icon:hover > .anchors { + display: inline-block; +} + +.anchor-left { + left: -6px; + top: calc(50% - 6px); +} + +.anchor-right { + right: -6px; + top: calc(50% - 6px); +} + +.anchor-top { + top: -6px; + left: calc(50% - 6px); +} + +.anchor-bottom { + bottom: -6px; + left: calc(50% - 6px); +} + +/*right arrow*/ +.right { + width: 10px; + height: 10px; + position: absolute; + left: 4px; + top: 1px; + +} + +.right-arrow1, .right-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + border-top: 5px transparent dashed; + border-right: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-left: 5px #2e6f9a solid; + overflow: hidden; +} + +.right-arrow1 { + + border-left: 5px white solid; +} + +.right-arrow2 { + left: -2px; +} + +/*left arrow */ +.left { + width: 10px; + height: 10px; + position: absolute; + left: -2px; + top: 1px; + z-index: 2; +} + +.left-arrow1, .left-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; /*ie8-*/ + border-top: 5px transparent dashed; + border-left: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-right: 5px #2e6f9a solid; + overflow: hidden; +} + +.left-arrow1 { + border-right: 5px #fff solid; +} + +.left-arrow2 { + left: 2px; +} + +/*top arrow*/ +.top { + width: 10px; + height: 10px; + position: absolute; + left: 1px; + z-index: 2; +} + +.top-arrow1, .top-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px #2e6f9a solid; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px transparent dashed; + overflow: hidden; +} + +.top-arrow1 { + z-index: 6; +} + +.top-arrow2 { + top: -2px; + border-bottom: 5px white solid; +} + +/*bottom arrow*/ +.bottom { + width: 10px; + height: 10px; + position: absolute; + left: 1px; + top: 4px; + z-index: 2; +} + +.bottom-arrow1, .bottom-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px transparent dashed; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px #2e6f9a solid; + overflow: hidden; +} + +.bottom-arrow1 { + top: -2px; + z-index: 6; +} + +.bottom-arrow2 { + border-top: 5px white solid; +} +/** + * Anchors End + */ + +.node .name { + width: 55px; + height: 12px; + text-align: center; + white-space: nowrap; + color: #5c6d90; + line-height: 12px; + cursor: pointer; + font-family: Arial; + font-size: 12px; +} + +.resizeable { + background-color: darkolivegreen; + border:1px solid blue; + margin: 10px; +} + diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.html new file mode 100644 index 00000000..f0ade497 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.html @@ -0,0 +1,164 @@ +<!-- +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +--> +<div #nodeItem class="node" [id]="node.id" [title]="node.id" + (click)="onClick($event)" (mousedown)="onMousedown()" (dblclick)="showProperties($event)" + (mouseover)="onMouseOver($event, $event.target.parentNode)" + (mouseout)="onMouseOut($event, $event.target.parentNode)" + [style.top]="node.position.top + 'px'" + [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'"> + + <div *ngIf="!isGatewayNodeType(node.type)" class="name"> + {{node.name}} + </div> + + <div *ngIf="canHaveChildren()" wfmResizable class="node-icon" [style.width]="node.position.width + 'px'" + [style.height]="node.position.height + 'px'" + [class.active]="active"> + <wfm-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></wfm-node> + <div class="anchor anchors anchor-left"> + <span class="left"> + <i class="left-arrow1"></i> + <i class="left-arrow2"></i> + </span> + </div> + <div class="anchor anchors anchor-right"> + <span class="right"> + <i class="right-arrow1"></i> + <i class="right-arrow2"></i> + </span> + </div> + </div> + + <div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active"> + <img *ngIf='node.icon && "" != node.icon' [src]='getImageUrl(node.icon)'/> + <svg *ngIf='!(node.icon && "" != node.icon)' version="1.1" xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" + [style.height]="node.position.height + 'px'"> + <g [ngSwitch]="node.type"> + <g *ngSwitchCase="nodeType[nodeType.startEvent]"> + <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 + s15-6.7,15-15S23.3,0,15,0L15,0z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.endEvent]"> + <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15 + s15-6.7,15-15S23.3,0,15,0L15,0z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.errorStartEvent]"> + <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2 + s13,5.8,13,13S22.2,28,15,28z"/> + <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16 + c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0 + c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6 + c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z" + /> + </g> + <g *ngSwitchCase="nodeType[nodeType.errorEndEvent]"> + <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4 + s11,4.9,11,11S21.1,26,15,26z"/> + <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10 + c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0 + c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]"> + <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3 + C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z"/> + <path class="st0" + d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z"/> + <path class="st0" + d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z"/> + <path class="st0" + d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z"/> + <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1 + C25.7,15.5,25.2,15.1,24.7,15.1z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.restTask]"> + <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3 + C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z"/> + <path class="st0" + d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z"/> + <path class="st0" + d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z"/> + <path class="st0" + d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z"/> + <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2 + c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4 + c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z" + /> + </g> + <g *ngSwitchCase="nodeType[nodeType.exclusiveGateway]"> + <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4 + l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z" + /> + <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12 + c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12 + c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12 + c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.parallelGateway]"> + <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1 + s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z"/> + <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12 + c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12 + c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12 + c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.subProcess]"> + <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4 + v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4 + c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z"/> + <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5 + c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]"> + <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26 + c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4 + c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z" + /> + <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9 + c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z"/> + </g> + <g *ngSwitchCase="nodeType[nodeType.scriptTask]"> + <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4 + c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6 + c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4 + c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5 + C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3 + c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8 + c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3 + c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0 + l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5 + l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z"/> + <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2 + l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z"/> + <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2 + c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z"/> + <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1 + c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z"/> + </g> + </g> + </svg> + <div class="anchor anchors anchor-left"> + <span class="left"> + <i class="left-arrow1"></i> + <i class="left-arrow2"></i> + </span> + </div> + <div class="anchor anchors anchor-right"> + <span class="right"> + <i class="right-arrow1"></i> + <i class="right-arrow2"></i> + </span> + </div> + </div> +</div>
\ No newline at end of file diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.ts new file mode 100644 index 00000000..5482758e --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.ts @@ -0,0 +1,124 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +import {AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild} from "@angular/core"; +import {Subscription} from "rxjs/Subscription"; +import {WorkflowNode} from "../../model/workflow/workflow-node"; +import {BroadcastService} from "../../services/broadcast.service"; +import {JsPlumbService} from "../../services/jsplumb.service"; +import {NodeType} from "../../model/workflow/node-type.enum"; +import {WorkflowUtil} from "../../util/workflow-util"; + +/** + * node component represent a single workflow node. + * every node would be rendered on the container component + */ +@Component({ + selector: 'wfm-node', + styleUrls: ['./node.component.css'], + templateUrl: 'node.component.html', +}) +export class NodeComponent implements AfterViewInit, OnDestroy { + @Input() public node: WorkflowNode; + @Input() public rank: number; + @ViewChild('nodeItem') nodeItem: ElementRef; + + public nodeType = NodeType; + public active = false; + private currentWorkflowSubscription: Subscription; + private isMoving = false; + + constructor(private jsPlumbService: JsPlumbService, + private broadcastService: BroadcastService) { + } + + public ngAfterViewInit() { + this.jsPlumbService.initJsPlumbInstance(this.node.parentId); + this.jsPlumbService.initNode(this.node); + + if (this.canHaveChildren()) { + this.jsPlumbService.nodeDroppable(this.node, this.rank); + this.jsPlumbService.connectChildrenNodes(this.node.id); + } + + this.currentWorkflowSubscription = this.broadcastService.selectedElement$.subscribe(activeNodes => { + let active = false; + for (let index = 0; index < activeNodes.length; index++) { + let activeNode = activeNodes[index] as WorkflowNode; + if (activeNode.id === this.node.id) { + active = true; + break; + } + } + this.active = active; + }); + } + + public ngOnDestroy() { + this.currentWorkflowSubscription.unsubscribe(); + if (this.nodeItem.nativeElement.onmousemove) { + this.nodeItem.nativeElement.onmousemove = null; + } + } + + public onMousedown() { + let currentThis = this; + this.nodeItem.nativeElement.onmousemove = function () { + currentThis.isMoving = true; + }; + } + + public onClick(event) { + if (this.nodeItem.nativeElement.onmousemove) { + this.nodeItem.nativeElement.onmousemove = null; + } + if (this.isMoving && this.active) { + this.isMoving = false; + return; + } + event.stopPropagation(); + this.broadcastService.broadcast(this.broadcastService.showProperty, null); + this.broadcastService.broadcast(this.broadcastService.selectedElement, [this.node]); + } + + public canHaveChildren(): boolean { + return this.node.type === 'subProcess'; + } + + public onMouseOut(event, target) { + event.stopPropagation(); + target.classList.remove('hover'); + } + + public onMouseOver(event, target) { + event.stopPropagation(); + target.classList.add('hover'); + } + + public isGatewayNodeType(type: string): boolean { + if (type === this.nodeType[this.nodeType.exclusiveGateway] || type === this.nodeType[this.nodeType.parallelGateway]) { + return true; + } + return false; + } + + public showProperties(event) { + if (this.isGatewayNodeType(this.node.type)) { + return; + } + event.stopPropagation(); + this.broadcastService.broadcast(this.broadcastService.showProperty, this.node); + } + + public getImageUrl(name: string): string { + return WorkflowUtil.GetIconFullPath(name); + } +} |