createRule(rule, isEditing) {
let type = "action";
if (!isEditing) {
if (_.isUndefined(rule["name"]) || _.isEmpty(rule["name"])) {
return;
}
if(this.nodes.length>0){
let checkRule = _.filter(this.nodes, function (node) {
return node.data.name.toLowerCase() == rule.name.toLowerCase()
});
if(checkRule.length>0){
return;
}
}
this.nodes.push({
data: rule,
coords: this.coords,
showAddCondition: true,
type: type
});
let lastNode = this.nodes[this.nodes.length - 1];
this.selectedOverlayName = "";
setTimeout(() => {
this.plumb.draggable($("[data-id=" + lastNode.data.id + "]"), {
// containment: $('#drop_here'), // drop widget with in the containment
stop: function (event, ui) {
// gets called on every drag
// lastNode.coords.x = $(event.el).position().left;
// lastNode.coords.y = $(event.el).position().top;
lastNode.coords.x = event.finalPos[0]; // for left position
lastNode.coords.y = event.finalPos[1]; // for top position
}
});
this.addStartingpointForComponent(lastNode, isEditing);
}, 100);
} else {
this.nodes.push(rule);
setTimeout(() => {
this.plumb.draggable($("[data-id=" + rule.data.id + "]"), {
// containment: $('#drop_here'), // drop widget with in the containment
stop: function (event, ui) {
// gets called on every drag
rule.coords.x = event.finalPos[0]; // for left position
rule.coords.y = event.finalPos[1]; // for top position
}
});
this.addStartingpointForComponent(rule, isEditing);
}, 100);
}
}
addStartingpointForComponent(comp, isEditing) {
const ele = $("[data-id=" + comp.data.id + "]");
const endpointsCount = this.plumb.getEndpoints(ele).length;
const endpoint = this.plumb.addEndpoint(
ele,
{
anchor: [
0.1 * (endpointsCount + 1),
0.23,
0.2,
0.1 * (endpointsCount + 1)
]
},
{
paintStyle: { width: 25, height: 21, fill: "#666" },
connector: "Straight",
connectorStyle: { stroke: "#666", strokeWidth: 1 },
isSource: true,
maxConnections: 4,
isTarget: true,
connectorOverlays: [
["Arrow", { width: 10, length: 15, location: 0.5, id: "arrow" }]
]
}
);
if (!isEditing) {
comp.endpointsCount = (comp.endpointsCount || 0) + 1;
}
}
addEndpointForNode(node, isEditing) {
const ele = $("[data-id=" + node.data.id + "]");
const endpointsCount = this.plumb.getEndpoints(ele).length;
const epConfig = {
anchor: [0.2 * endpointsCount, 1, 0, 0.3 * endpointsCount],
config: {
endpoint: "Rectangle",
connector: "Straight",
uuid: "uuid" + this.uuIdCounter++,
isSource: true,
maxConnections: 3,
isTarget: false,
connectorOverlays: [
["Arrow", { width: 10, length: 15, location: 0.5, id: "arrow" }]
]
// dropOptions: this.defaultOptions
}
};
const endpoint = this.plumb.addEndpoint(
ele,
{ anchor: epConfig.anchor },
epConfig.config
);
if (node.type === "action") {
node.data.conditions[node.data.conditions.length - 1]["pos_x"] = endpoint.anchor.x;
} else if (node.type === "loop") {
node.data.loops[0].conditions[node.data.loops[0].conditions.length - 1]["pos_x"] = endpoint.anchor.x;
}
endpoint.bind("dblclick", ep => this.handleEndpointDblClick(node, ep));
endpoint.bind("click", ep => this.handleEndpointClick(node, ep));
if (!isEditing) {
node.endpointsCount = (node.endpointsCount || 0) + 1;
}
}
<div class="card-body-height widget" id="drop_here">
<div class="playground-component">
<div class="component" *ngFor="let node of nodes" [attr.data-id]="node.data.id"
[style.left.px]="node.coords.x" [style.top.px]="node.coords.y">
<div class="widget-header border-1">
<div class="icons">
<div class="action settings" (click)="detachConnectionsForElement(node)">
<i title="Unlink" class="fal fa-unlink"></i>
</div>
<div class="action settings" (click)="openRulePopup(node)">
<i title="Edit" class="fal fa-edit"></i>
</div>
<div class="action del" (click)="deleteComponent(node)">
<i title="Delete" class="fal fa-trash-alt"></i>
</div>
</div>
</div>
<div class="widget-content">
<div class="widget-title">{{ node.data.name }}</div>
<div class="widget-des">{{ node.data.description }}</div>
</div>
<div class="add-endpoint" (click)="addExpression($event, node)">
<i title="Add Condition" class="fa fa-plus-circle"></i>
</div>
</div>
</div>
</div>