WorkbenchUIPreview2

Author: odeimaiz

services/static-webserver/client/source/class/osparc/data/model/Function.js

@@ -42,12 +42,10 @@ qx.Class.define("osparc.data.model.Function", {
       thumbnail: functionData.thumbnail || this.getThumbnail(),
     });
 
-    const wbData = functionData.workbench || this.getWorkbench();
-    const workbench = new osparc.data.model.Workbench(wbData, functionData.ui);
-    this.setWorkbench(workbench);
-    workbench.setFunction(this);
-
-    this.getWorkbench().buildWorkbench();
+    const wbData = functionData.workbench || {};
+    const wbUiData = functionData.ui || {};
+    const workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview2(wbData, wbUiData);
+    this.setWorkbenchUiPreview(workbenchUIPreview);
   },
 
   properties: {
@@ -128,11 +126,10 @@ qx.Class.define("osparc.data.model.Function", {
       init: null
     },
 
-    workbench: {
-      check: "osparc.data.model.Workbench",
+    workbenchUiPreview: {
+      check: "osparc.workbench.WorkbenchUIPreview2",
       nullable: false,
-      event: "changeWorkbench",
-      init: {}
+      init: null,
     },
   },
 

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUIPreview2.js

@@ -0,0 +1,89 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2021 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * @ignore(SVGElement)
+ */
+
+/**
+ * *Example*
+ *
+ * Here is a little example of how to use the widget.
+ *
+ * <pre class='javascript'>
+ *   let workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview();
+ *   this.getRoot().add(workbenchUIPreview);
+ * </pre>
+ */
+
+qx.Class.define("osparc.workbench.WorkbenchUIPreview2", {
+  extend: osparc.workbench.WorkbenchUI,
+
+  construct: function(wbData, wbDataUi) {
+    this.base(arguments);
+
+    this.set({
+      backgroundColor: "background-main"
+    });
+  },
+
+  members: {
+    // overridden
+    _addItemsToLayout: function() {
+      this._addWorkbenchLayer();
+    },
+
+    // overridden
+    _loadModel: function(model) {
+      this._clearAll();
+      this.resetSelection();
+      this._currentModel = model;
+      if (model) {
+        qx.ui.core.queue.Visibility.flush();
+
+        // create nodes
+        const nodes = model.getNodes();
+        for (const nodeId in nodes) {
+          const node = nodes[nodeId];
+          const nodeUI = this._createNodeUI(nodeId);
+          nodeUI.setIsMovable(false);
+          this._addNodeUIToWorkbench(nodeUI, node.getPosition());
+        }
+        qx.ui.core.queue.Layout.flush();
+
+        // create edges
+        for (const nodeId in nodes) {
+          const node = nodes[nodeId];
+          const inputNodeIDs = node.getInputNodes();
+          inputNodeIDs.forEach(inputNodeId => {
+            if (inputNodeId in nodes) {
+              this._createEdgeBetweenNodes(inputNodeId, nodeId, false);
+            }
+          });
+        }
+
+        const maxScale = 0.7;
+        this._fitScaleToNodes(maxScale);
+      }
+    },
+
+    // overridden
+    _addEventListeners: function() {
+      this.addListenerOnce("appear", this._listenToMouseWheel, this);
+    }
+  }
+});