bia-framework
Version:
Bia Framework to work with angular 2
337 lines (336 loc) • 11.4 kB
text/typescript
// 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;
// }
//
//