// import {Component, OnInit, AfterContentInit} from "@angular/core";
// import "snap";
// import {NgFor, NgClass, NgIf} from "@angular/common";
// import {IFlowComponent, IFlowNetwork, IFlowVariable, IFlowVariableType} from "../../models/IFlow";
// import {Card} from "../card/card";
//
// import {CoreButton} from "../core-button/core-button";
// import {CoreForm} from "../odisseia-form/odisseia-form";
// import {OdisseiaInput} from "../odisseia-input/odisseia-input";
// import {SearchPipe} from "../../pipes/search";
// import {CoreIcon} from "../core-icon/core-icon";
//
//
// @Component(
//     {
//         selector: 'flow',
//         templateUrl: "framework/components/flow/flow.template.html",
//         styleUrls: ['framework/components/flow/flow.css'],
//         directives: [NgFor, NgClass, NgFor, NgIf, Card, CoreButton, CoreIcon, CoreForm, OdisseiaInput],
//         pipes: [SearchPipe]
//     }
// )
// export class Flow implements OnInit, AfterContentInit
// {
//     private flowGraph:Snap.Paper;
//     transMatrix:number[] = [1, 0, 0, 1, 0, 0];
//     transform:string;
//
//
//     private emailComponentNode:IFlowComponent =
//     {
//         id: 0,
//         type: "EmailComponent",
//         layout: {x: 100, y: 100},
//         color: "accent",
//         description: "Componente destinado ao envio de e-mails",
//         inputPorts: [
//             {name: "ToEmail", description: "To Email Address", type: "string"},
//             {name: "ToName", description: "To Name Address", type: "string"},
//             {name: "Subject", description: "SubjectAddress", type: "string"}
//         ],
//         outputPorts: [{name: "LogOut", type: "string", optional: true}],
//         componentType: 'NODE'
//     };
//     private stringComponentVariable:IFlowComponent =
//     {
//         id: 0,
//         type: "StringComponent",
//         color: "warning",
//         layout: {x: 100, y: 100},
//         description: "Componente que guarda valores em string",
//         inputPorts: [],
//         outputPorts: [{name: "", type: "string"}],
//         componentType: 'VARIABLE'
//     };
//     private booleanComponentVariable:IFlowComponent =
//     {
//         id: 1,
//         type: "BooleanComponent",
//         color: "success",
//         layout: {x: 100, y: 100},
//         description: "Componente que guarda valores lógicos",
//         inputPorts: [],
//         outputPorts: [{name: "", type: "boolean"}],
//         componentType: 'VARIABLE'
//     };
//
//     public componentList:IFlowComponent[] = [
//         this.stringComponentVariable,
//         this.emailComponentNode,
//         this.booleanComponentVariable
//     ];
//
//     private myNetwork:IFlowNetwork =
//     {
//         name: 'Query Network',
//         components: [this.emailComponentNode]
//     };
//
//     constructor()
//     {
//
//     }
//
//     private selectedVariable:IFlowVariable = null;
//     public currentVariables:IFlowVariable[] = [];
//     private currentVariableTypes:IFlowVariableType[] =
//         [
//             {name: "string", color: "success", defaultValue: ""},
//             {name: "boolean", color: "red", defaultValue: false},
//             {name: "int", color: "primary", defaultValue: 0},
//         ];
//
//     public createVariable = () =>
//     {
//         let myVar:IFlowVariable = {
//             name: "myVariable" + (this.currentVariables.length + 1).toString(),
//             type: this.currentVariableTypes[0],
//             category: "",
//             tolltip: ""
//         };
//         this.currentVariables.push(myVar);
//     };
//
//     private setupGraph = ()=>
//     {
//
//         let colorComponent = '#424242', colorPort = "#8a8a8a";
//
//         let nodeSize:IPoint = {x: 200, y: 100};
//         let nodeTextAttr = {'font-size': 14, 'fill': '#bbbbbb', 'text-anchor': "middle"};
//         let portRadius = 10;
//         let portSpace = 30;
//         let portTextMargin = 15;
//         let portTextFontSize = 10;
//         let portTopMargin = 25;
//         let portNameINputAttributes = {'font-size': portTextFontSize, 'fill': '#bbbbbb', 'text-anchor': "start"};
//         let portNameOutAttributes = {'font-size': portTextFontSize, 'fill': '#bbbbbb', 'text-anchor': "end"};
//
//         this.flowGraph = Snap("#svgout");
//         this.flowGraph.attr({viewBox: "0 0 100% 100%"});
//
//         let networkName = this.flowGraph
//             .text(20, 60, this.myNetwork.name)
//             .attr({'font-size': 40, 'fill': '#525252'});
//
//
//         //Nodes
//         this.myNetwork.components.forEach((comp, compIndex) =>
//         {
//
//             let nodePos:IPoint = {x: 100 * (compIndex + 1), y: 100};
//
//
//             let max = Math.max(comp.inputPorts.length, comp.outputPorts.length);
//             let calcHeight = (max * portSpace ) + ((portTopMargin * 2) + portRadius);
//
//             nodeSize.y = calcHeight;
//
//
//             //Node
//             let node = this.flowGraph
//                 .rect(nodePos.x, nodePos.y, nodeSize.x, nodeSize.y)
//                 .attr({fill: colorComponent});
//
//             var nodeGroup = this.flowGraph.group(node);
//
//             //text Title
//
//
//             //input ports
//             comp.inputPorts.forEach((port, index) =>
//             {
//                 let inputY = (nodePos.y + portTopMargin) + ((index + 1) * portSpace);
//
//                 let input = this.flowGraph
//                     .circle(nodePos.x, inputY, portRadius)
//                     .attr({fill: colorPort});
//
//                 let inputText = this.flowGraph
//                     .text(nodePos.x + portTextMargin, inputY + 5, port.name)
//                     .attr(portNameINputAttributes);
//
//
//                 nodeGroup.group(input);
//                 nodeGroup.group(inputText);
//             });
//
//             //input ports
//             comp.outputPorts.forEach((port, index) =>
//             {
//                 let inputY = (nodePos.y + portTopMargin) + ((index + 1) * portSpace);
//
//
//                 let outPort = this.flowGraph
//                     .circle(nodePos.x + nodeSize.x, inputY, portRadius)
//                     .attr({fill: colorPort});
//
//                 let outputText = this.flowGraph
//                     .text((nodeSize.x + nodePos.x) - portTextMargin, inputY + 5, port.name)
//                     .attr(portNameOutAttributes);
//
//                 nodeGroup.group(outPort);
//                 nodeGroup.group(outputText);
//             });
//
//
//             let nodeTitleCmp = this.flowGraph
//                 .text((nodePos.x + (nodeSize.x / 2)), nodePos.y + 20, comp.type)
//                 .attr(nodeTextAttr);
//             nodeGroup.group(nodeTitleCmp);
//             nodeGroup.filter(Snap.filter.shadow(23, 20, 22, "#000", 1));
//             nodeGroup.drag();
//         });
//
//
//         //let w = this.elementRef.nativeElement.offsetHeight;
//         // Get dimensions
//         // var boundingClientRectNormalized = this.getBoundingClientRectNormalized(this.elementRef.nativeElement);
//         // this._width = boundingClientRectNormalized.width;
//         // this._height = boundingClientRectNormalized.height;
//     };
//
//
//     ngOnInit():any
//     {
//         //this.setupGraph();
//     }
//
//     private group:Snap.Element;
//
//     ngAfterContentInit():any
//     {
//         return undefined;
//     }
//
//     private onSelectVariable = (variable:IFlowVariable)=> { this.selectedVariable = variable; };
//
//
//     public onClick = (event:MouseEvent):void =>
//     {
//
//     };
//
//     public svgloaded = (event:SVGElement):void =>
//     {
//
//     };
//
//     public onMouseDown = (event:MouseEvent) =>
//     {
//
//     };
//
//     public onMouseUp = (event:MouseEvent) =>
//     {
//
//     };
//
//     public onMouseWheel = (event:MouseWheelEvent) =>
//     {
//
//         // this.currentScale += (event.wheelDelta / 120) / 10;
//         // console.log("Whell " + event.wheelDelta / 120 + " escale " + this.currentScale);
//     };
//
//     private currentScale:number = 1;
//     private currentComponent:IFlowComponent;
//     private currentClickedPoint:IPoint = {x: 0, y: 0};
//     private currentMousePoint:IPoint = {x: 0, y: 0};
//
//
//     private dragCompoenent = (event:MouseEvent):void =>
//     {
//
//         // this.currentComponent.layout.x = (this.currentComponent.layout.x + event.clientX - this.currentClickedPoint.x);
//         // this.currentComponent.layout.y = (this.currentComponent.layout.y + event.clientY - this.currentClickedPoint.y);
//         //
//         // //console.log("Dragging x:" + (component.layout.x - event.clientX) + " y:" + (component.layout.y - event.clientY));
//
//     };
//
//     public onMouseMove = (event:MouseEvent) =>
//     {
//         // if (this.currentComponent && this.currentComponent.layout.canDrag)
//         //     this.dragCompoenent(event);
//         //
//         // this.currentMousePoint = {x: event.clientX, y: event.clientY};
//         //
//         // console.log("Mouse move x:" + event.clientX + " y:" + event.clientY);
//
//     };
//
//
//     public onNodeMouseDown = (event:MouseEvent, component:IFlowComponent) =>
//     {
//         // if (!this.currentComponent)
//         // {
//         //     this.currentComponent = component;
//         //     this.currentComponent.layout.canDrag = true;
//         //     this.currentClickedPoint = {x: event.clientX, y: event.clientY};
//         // }
//         // console.log("down");
//         // event.stopPropagation();
//         // event.preventDefault();
//     };
//
//     public onNodeMouseUp = (event:MouseEvent, component:IFlowComponent) =>
//     {
//         // this.currentComponent = null;
//         // //component.layout.canDrag = false;
//         // console.log("up");
//         //
//         // event.stopPropagation();
//         // event.preventDefault();
//     };
//
//     public onNodeMouseMove = (event:MouseEvent, component:IFlowComponent) =>
//     {
//         //     if (this.currentComponent && this.currentComponent.layout.canDrag)
//         //     {
//         //         // this.currentComponent.layout.canDrag = true;
//         //     }
//
//         //
//         // if (component.layout.canDrag && !component.layout.isDraging)
//         // {
//         //     component.layout.isDraging = true;
//         //
//         //     // component.layout.x += 30;
//         //     //  component.layout.y += 30;
//         //
//         //     console.log("Dragging true x:" + event.clientX + " y:" + event.clientY);
//         // }
//         // else if (!component.layout.canDrag && component.layout.isDraging)
//         // {
//         //     component.layout.isDraging = false;
//         //     console.log("Dragging false");
//         // }
//
//
//         //event.stopPropagation();
//         // event.preventDefault();
//
//     };
//
//
// }
//
// interface IPoint
// {
//     x:number;
//     y:number;
// }
//
//