aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 10:28:42 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 10:51:01 +0200
commit451a3400b76511393c62a444f588a4ed15f4a549 (patch)
treee4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html
parent5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html')
-rw-r--r--catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html169
1 files changed, 169 insertions, 0 deletions
diff --git a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html
new file mode 100644
index 0000000000..d19fd36c24
--- /dev/null
+++ b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="cs">
+<head>
+ <meta charset="UTF-8">
+ <title>CytoscapeEdgeEditation</title>
+ <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+ <script src="bower_components/cytoscape/dist/cytoscape.js"></script>
+ <script src="CytoscapeEdgeEditation.js"></script>
+ <script>
+ $(function(){
+ //INITIALIZATION
+ var domContainer = $(".cy");
+ var cy = cytoscape({
+ container: domContainer,
+ style: [
+ {
+ selector: 'node[type="type1"]',
+ style: {
+ 'background-color': '#FFEB12',
+ }
+ },
+ {
+ selector: 'node[type="type2"]',
+ style: {
+ 'background-color': '#2CE8F2',
+ }
+ },
+ {
+ selector: 'edge',
+ style: {
+ 'width': 3,
+ 'target-arrow-shape': 'triangle'
+ }
+ },
+ {
+ selector: 'edge[type="default"]',
+ style: {
+ 'line-color': 'green',
+ 'target-arrow-color': 'green',
+ }
+ },
+ {
+ selector: 'edge[type="yes"]',
+ style: {
+ 'line-color': '#48FF00',
+ 'target-arrow-color': '#48FF00',
+ }
+ },
+ {
+ selector: 'edge[type="no"]',
+ style: {
+ 'line-color': '#ED1000',
+ 'target-arrow-color': '#ED1000',
+ }
+ }
+ ]
+ });
+
+
+ var handles = new CytoscapeEdgeEditation;
+ handles.init(cy);
+
+ handles.registerHandle({
+ positionX: "center",
+ positionY: "bottom",
+ color: "green",
+ type: "default",
+ single: false,
+ nodeTypeNames: ["type1"]
+ });
+
+ handles.registerHandle({
+ positionX: "center",
+ positionY: "top",
+ color: "green",
+ type: "default",
+ single: false,
+ nodeTypeNames: ["type1"]
+ });
+
+ handles.registerHandle({
+ positionX: "left",
+ positionY: "center",
+ color: "green",
+ type: "default",
+ single: false,
+ nodeTypeNames: ["type1"]
+ });
+
+ handles.registerHandle({
+ positionX: "right",
+ positionY: "center",
+ color: "green",
+ type: "default",
+ single: false,
+ nodeTypeNames: ["type1"]
+ // noMultigraph: true
+ });
+
+ handles.registerHandle({
+ positionX: "left",
+ positionY: "center",
+ color: "#48FF00",
+ type: "yes",
+ single: true,
+ nodeTypeNames: ["type2"]
+ });
+
+ handles.registerHandle({
+ positionX: "right",
+ positionY: "center",
+ color: "#ED1000",
+ type: "no",
+ single: true,
+ nodeTypeNames: ["type2"]
+ });
+
+
+ //ADD NODES
+ cy.add({
+ data: { id: 'n1', type: "type1"},
+ });
+
+ cy.add({
+ data: { id: 'n2', type: "type1"},
+ });
+
+ cy.add({
+ data: { id: 'n3', type: "type1"},
+ });
+
+ cy.add({
+ data: { id: 'n4', type: "type2"},
+ });
+
+
+ //ADJUST HEIGHT
+ var resizeViewport = function(){
+ $(".cy").height($(window).height());
+ cy.resize();
+ };
+
+ $(window).resize(resizeViewport);
+ resizeViewport();
+
+ //LAYOUT
+ cy.layout({
+ name: 'random',
+ fit: true,
+ padding: 40,
+ boundingBox: {x1: -200, y1:-200, x2:300, y2: 200}
+ });
+ });
+ </script>
+ <style>
+ * {
+ padding: 0;
+ margin: 0;
+ }
+ .cy {
+ width: 100%;
+ height:100%;
+ }
+ </style>
+</head>
+<body>
+ <div class="cy"></div>
+</body>
+</html> \ No newline at end of file