From: Sweidan Omar <TFS\sweidan.omar>
Date: Tue, 12 Apr 2022 14:54:35 +0000 (+0000)
Subject: git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube... 
X-Git-Url: http://git.useribm.hu/?a=commitdiff_plain;h=03b78720a599a9246c0b80f98b71c5fd93720a9d;p=mediacube.git

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

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