git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube...

diff --git a/server/user.mediacube.gui/js/processVisualizer.js b/server/user.mediacube.gui/js/processVisualizer.js
index 8e341c11c7db61ebd2c3ac5b0f5b25271c121431..6376d7324f94552a15e11d5f3e473c5f9e38b7d0 100644 (file)
--- a/server/user.mediacube.gui/js/processVisualizer.js
+++ b/server/user.mediacube.gui/js/processVisualizer.js
@@ -1,133 +1,87 @@
-var json= [\r
-  {\r
-    "type": "draw2d.shape.node.Start",\r
-    "id": "354fa3b9-a834-0221-2009-abc2d6bd852a",\r
-    "x": 25,\r
-    "y": 97,\r
-    "width": 50,\r
-    "height": 50,\r
-    "alpha": 1,\r
-    "selectable": true,\r
-    "draggable": true,\r
-    "angle": 0,\r
-    "userData": {},\r
-    "cssClass": "draw2d_shape_node_Start",\r
-    "ports": [\r
-      {\r
-        "type": "draw2d.OutputPort",\r
-        "id": "76964902-c2ef-ab24-e88d-20d71c7d9ba7",\r
-        "width": 10,\r
-        "height": 10,\r
-        "alpha": 1,\r
-        "selectable": false,\r
-        "draggable": true,\r
-        "angle": 0,\r
-        "userData": {},\r
-        "cssClass": "draw2d_OutputPort",\r
-        "bgColor": "rgba(79,104,112,1)",\r
-        "color": "rgba(27,27,27,1)",\r
-        "stroke": 1,\r
-        "dasharray": null,\r
-        "maxFanOut": 9007199254740991,\r
-        "name": "output0",\r
-        "semanticGroup": "global",\r
-        "port": "draw2d.OutputPort",\r
-        "locator": "draw2d.layout.locator.OutputPortLocator",\r
-        "locatorAttr": {}\r
-      }\r
-    ],\r
-    "bgColor": "rgba(77,144,254,1)",\r
-    "color": "rgba(69,130,229,1)",\r
-    "stroke": 1,\r
-    "radius": 2,\r
-    "dasharray": null\r
-  },\r
-  {\r
-    "type": "draw2d.shape.node.End",\r
-    "id": "ebfb35bb-5767-8155-c804-14bda7759dc2",\r
-    "x": 272,\r
-    "y": 45,\r
-    "width": 50,\r
-    "height": 50,\r
-    "alpha": 1,\r
-    "selectable": true,\r
-    "draggable": true,\r
-    "angle": 0,\r
-    "userData": {},\r
-    "cssClass": "draw2d_shape_node_End",\r
-    "ports": [\r
-      {\r
-        "type": "draw2d.InputPort",\r
-        "id": "76d4b200-abaa-6641-e02e-53c627326183",\r
-        "width": 10,\r
-        "height": 10,\r
-        "alpha": 1,\r
-        "selectable": false,\r
-        "draggable": true,\r
-        "angle": 0,\r
-        "userData": {},\r
-        "cssClass": "draw2d_InputPort",\r
-        "bgColor": "rgba(79,104,112,1)",\r
-        "color": "rgba(27,27,27,1)",\r
-        "stroke": 1,\r
-        "dasharray": null,\r
-        "maxFanOut": 9007199254740991,\r
-        "name": "input0",\r
-        "semanticGroup": "global",\r
-        "port": "draw2d.InputPort",\r
-        "locator": "draw2d.layout.locator.InputPortLocator",\r
-        "locatorAttr": {}\r
-      }\r
-    ],\r
-    "bgColor": "rgba(255,0,0,1)",\r
-    "color": "rgba(69,130,229,1)",\r
-    "stroke": 1,\r
-    "radius": 2,\r
-    "dasharray": null,\r
-    "fill": "linear"\r
-  },\r
-  {\r
-    "type": "draw2d.Connection",\r
-    "id": "74ce9e7e-5f0e-8642-6bec-4ff9c54b3f0a",\r
-    "alpha": 1,\r
-    "selectable": true,\r
-    "draggable": true,\r
-    "angle": 0,\r
-    "userData": {},\r
-    "cssClass": "draw2d_Connection",\r
-    "stroke": 2,\r
-    "color": "rgba(18,156,228,1)",\r
-    "outlineStroke": 0,\r
-    "outlineColor": "rgba(0,0,0,0)",\r
-    "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy",\r
-    "vertex": [\r
-      {\r
-        "x": 75,\r
-        "y": 122\r
-      },\r
-      {\r
-        "x": 272,\r
-        "y": 70\r
-      }\r
-    ],\r
-    "router": "draw2d.layout.connection.VertexRouter",\r
-    "radius": 3,\r
-    "source": {\r
-      "node": "354fa3b9-a834-0221-2009-abc2d6bd852a",\r
-      "port": "output0"\r
-    },\r
-    "target": {\r
-      "node": "ebfb35bb-5767-8155-c804-14bda7759dc2",\r
-      "port": "input0"\r
-    }\r
-  }\r
-];\r
+/* global $ */\r
+var defaultFlowchartData = {\r
+       operators: {\r
+               operator1: {\r
+                       top: 20,\r
+                       left: 20,\r
+                       properties: {\r
+                               title: 'Operator 1',\r
+                               inputs: {},\r
+                               outputs: {\r
+                                       output_1: {\r
+                                               label: 'Output 1',\r
+                                       }\r
+                               }\r
+                       }\r
+               },\r
+               operator2: {\r
+                       top: 80,\r
+                       left: 300,\r
+                       properties: {\r
+                               title: 'Operator 2',\r
+                               inputs: {\r
+                                       input_1: {\r
+                                               label: 'Input 1',\r
+                                       },\r
+                                       input_2: {\r
+                                               label: 'Input 2',\r
+                                       },\r
+                               },\r
+                               outputs: {}\r
+                       }\r
+               },\r
+       },\r
+       links: {\r
+               link_1: {\r
+                       fromOperator: 'operator1',\r
+                       fromConnector: 'output_1',\r
+                       toOperator: 'operator2',\r
+                       toConnector: 'input_2',\r
+               },\r
+       }\r
+};\r
 \r
-  // create the canvas for the user interaction\r
-  //\r
-  var canvas = new draw2d.Canvas("myDiv");\r
+$(document).ready(function() {\r
+       var $flowchart = $('#flowchartworkspace');\r
+       var $container = $flowchart.parent();\r
+\r
+       console.log("$flowchart: ", $flowchart);\r
+       console.log("$container: ", $container);\r
+       \r
+       // Apply the plugin on a standard, empty div...\r
+       $flowchart.flowchart({          \r
+               data: defaultFlowchartData,\r
+               defaultSelectedLinkColor: '#000055',\r
+               grid: 10,\r
+               multipleLinksOnInput: true,\r
+               multipleLinksOnOutput: true\r
+       });     \r
+       \r
+       function getOperatorData($element) {\r
+               var nbInputs = parseInt($element.data('nb-inputs'), 10);\r
+               var nbOutputs = parseInt($element.data('nb-outputs'), 10);\r
+               var data = {\r
+                       properties: {\r
+                               title: $element.text(),\r
+                               inputs: {},\r
+                               outputs: {}\r
+                       }\r
+               };\r
        \r
-  // unmarshal the JSON document into the canvas\r
-  // (load)\r
-  var reader = new draw2d.io.json.Reader();\r
-  reader.unmarshal(canvas, json);\r
+               var i = 0;\r
+               for (i = 0; i < nbInputs; i++) {\r
+                       data.properties.inputs['input_' + i] = {\r
+                               label: 'Input ' + (i + 1)\r
+                       };\r
+               }\r
+               for (i = 0; i < nbOutputs; i++) {\r
+                       data.properties.outputs['output_' + i] = {\r
+                               label: 'Output ' + (i + 1)\r
+                       };\r
+               }\r
+       \r
+               return data;\r
+       }\r
+});\r
+\r
+if (true) console.log('remove lint unused warning', defaultFlowchartData);
\ No newline at end of file