Neuroman service

services/web/client/source/class/qxapp/component/form/renderer/PropForm.js

@@ -21,7 +21,11 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
      *
      * @param vizWidget {Widget} visualization widget to embedd
      */
-  construct: function(form) {
+  construct: function(form, nodeModel) {
+    if (nodeModel) {
+      this.setNodeModel(nodeModel);
+    }
+
     this.base(arguments, form);
     let fl = this._getLayout();
     // have plenty of space for input, not for the labels
@@ -32,11 +36,15 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
   },
 
   events: {
-    "PortDragOver": "qx.event.type.Data",
-    "PortDrop": "qx.event.type.Data",
     "RemoveLink" : "qx.event.type.Data"
   },
 
+  properties: {
+    nodeModel: {
+      check: "qxapp.data.model.NodeModel"
+    }
+  },
+
   members: {
     addItems: function(items, names, title, itemOptions, headerOptions) {
       // add the header
@@ -74,10 +82,8 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
             item: items[i]
           });
         }
-        label.setDroppable(true);
-        item.setDroppable(true);
-        this.__createUIPortConnections(label, item.key);
-        this.__createUIPortConnections(item, item.key);
+        this.__createDropMechanism(label, item.key);
+        this.__createDropMechanism(item, item.key);
       }
     },
 
@@ -139,20 +145,44 @@ qx.Class.define("qxapp.component.form.renderer.PropForm", {
       }
     },
 
-    __createUIPortConnections: function(uiElement, portId) {
-      [
-        ["dragover", "PortDragOver"],
-        ["drop", "PortDrop"]
-      ].forEach(eventPair => {
-        uiElement.addListener(eventPair[0], e => {
-          const eData = {
-            event: e,
-            // nodeId: nodeId,
-            portId: portId
-          };
-          this.fireDataEvent(eventPair[1], eData);
+    __arePortsCompatible: function(node1, port1, node2, port2) {
+      return qxapp.data.Store.getInstance().arePortsCompatible(node1, port1, node2, port2);
+    },
+
+    __createDropMechanism: function(uiElement, portId) {
+      if (this.isPropertyInitialized("nodeModel")) {
+        uiElement.setDroppable(true);
+        uiElement.nodeId = this.getNodeModel().getNodeId();
+        uiElement.portId = portId;
+
+        uiElement.addListener("dragover", e => {
+          let compatible = false;
+          if (e.supportsType("osparc-port-link")) {
+            const from = e.getRelatedTarget();
+            let dragNodeId = from.nodeId;
+            let dragPortId = from.portId;
+            const to = e.getCurrentTarget();
+            let dropNodeId = to.nodeId;
+            let dropPortId = to.portId;
+            compatible = this.__arePortsCompatible(dragNodeId, dragPortId, dropNodeId, dropPortId);
+          }
+          if (!compatible) {
+            e.preventDefault();
+          }
         }, this);
-      }, this);
+
+        uiElement.addListener("drop", e => {
+          if (e.supportsType("osparc-port-link")) {
+            const from = e.getRelatedTarget();
+            let dragNodeId = from.nodeId;
+            let dragPortId = from.portId;
+            const to = e.getCurrentTarget();
+            // let dropNodeId = to.nodeId;
+            let dropPortId = to.portId;
+            this.getNodeModel().addPortLink(dropPortId, dragNodeId, dragPortId);
+          }
+        }, this);
+      }
     }
   }
 });

services/web/client/source/class/qxapp/component/widget/NodePorts.js

@@ -50,10 +50,6 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
     }
   },
 
-  events: {
-    "PortDragStart": "qx.event.type.Data"
-  },
-
   members: {
     __inputPort: null,
     __outputPort: null,
@@ -100,6 +96,11 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
               widget = nodeOutputList.getOutputWidget();
               break;
             }
+            case "node-output-list-icon-api-v0.0.1": {
+              let nodeOutputList = new qxapp.component.widget.inputs.NodeOutputListIcon(this.getNodeModel(), port, portKey);
+              widget = nodeOutputList.getOutputWidget();
+              break;
+            }
           }
           if (widget !== null) {
             this._add(widget, {
@@ -109,9 +110,6 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
         } else {
           let nodeOutputLabel = new qxapp.component.widget.inputs.NodeOutputLabel(this.getNodeModel(), port, portKey);
           let widget = nodeOutputLabel.getOutputWidget();
-          nodeOutputLabel.addListener("PortDragStart", e => {
-            this.fireDataEvent("PortDragStart", e.getData());
-          }, this);
           this._add(widget);
           let label = {
             isInput: isInput,

services/web/client/source/class/qxapp/component/widget/NodeView.js

@@ -49,7 +49,7 @@ qx.Class.define("qxapp.component.widget.NodeView", {
       flex: 1
     });
 
-    this.__settingsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+    this.__settingsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
     this.__mapperLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
     this.__iFrameLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
     this.__initButtons();
@@ -116,62 +116,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
       buttonsLayout.add(openFolder);
     },
 
-    __arePortsCompatible: function(node1, port1, node2, port2) {
-      return qxapp.data.Store.getInstance().arePortsCompatible(node1, port1, node2, port2);
-    },
-
-    __createDragDropMechanism: function(portUI) {
-      portUI.addListener("PortDragStart", e => {
-        let data = e.getData();
-        let event = data.event;
-        let dragNodeId = data.nodeId;
-        let dragPortId = data.portId;
-
-        // Register supported actions
-        event.addAction("copy");
-
-        // Register supported types
-        event.addType("osparc-port-link");
-        let dragData = {
-          dragNodeId: dragNodeId,
-          dragPortId: dragPortId
-        };
-        event.addData("osparc-port-link", dragData);
-      }, this);
-
-      portUI.addListener("PortDragOver", e => {
-        let data = e.getData();
-        let event = data.event;
-        // let dropNodeId = data.nodeId;
-        let dropNodeId = this.getNodeModel().getNodeId();
-        let dropPortId = data.portId;
-
-        let compatible = false;
-        if (event.supportsType("osparc-port-link")) {
-          const dragNodeId = event.getData("osparc-port-link").dragNodeId;
-          const dragPortId = event.getData("osparc-port-link").dragPortId;
-          compatible = this.__arePortsCompatible(dragNodeId, dragPortId, dropNodeId, dropPortId);
-        }
-
-        if (!compatible) {
-          event.preventDefault();
-        }
-      }, this);
-
-      portUI.addListener("PortDrop", e => {
-        let data = e.getData();
-        let event = data.event;
-        // let dropNodeId = data.nodeId;
-        let dropPortId = data.portId;
-
-        if (event.supportsType("osparc-port-link")) {
-          let dragNodeId = event.getData("osparc-port-link").dragNodeId;
-          let dragPortId = event.getData("osparc-port-link").dragPortId;
-          this.getNodeModel().addPortLink(dropPortId, dragNodeId, dragPortId);
-        }
-      }, this);
-    },
-
     __createInputPortsUI: function(inputNodeModel, isInputModel = true) {
       let nodePorts = null;
       if (isInputModel) {
@@ -180,7 +124,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
         nodePorts = inputNodeModel.getInputsDefaultWidget();
       }
       if (nodePorts) {
-        this.__createDragDropMechanism(nodePorts);
         this.__inputNodesLayout.add(nodePorts, {
           flex: 1
         });
@@ -237,7 +180,6 @@ qx.Class.define("qxapp.component.widget.NodeView", {
 
         this.__settingsLayout.add(titleBox);
         this.__settingsLayout.add(propsWidget);
-        this.__createDragDropMechanism(propsWidget);
 
         this.__mainLayout.add(this.__settingsLayout);
       } else if (qx.ui.core.Widget.contains(this.__mainLayout, this.__settingsLayout)) {

services/web/client/source/class/qxapp/component/widget/inputs/NodeOutputLabel.js

@@ -8,14 +8,13 @@ qx.Class.define("qxapp.component.widget.inputs.NodeOutputLabel", {
 
     let toolTip = new qx.ui.tooltip.ToolTip(port.description);
     let portLabel = this.__portLabel = new qx.ui.basic.Label(port.label).set({
-      draggable: true,
       toolTip: toolTip,
       textAlign: "right",
       allowGrowX: true,
       paddingRight: 20
     });
 
-    this.__createUIPortConnections(portLabel, portKey);
+    this.__createDragMechanism(portLabel, portKey);
   },
 
   properties: {
@@ -25,25 +24,19 @@ qx.Class.define("qxapp.component.widget.inputs.NodeOutputLabel", {
     }
   },
 
-  events: {
-    "PortDragStart": "qx.event.type.Data"
-  },
-
   members: {
     __portLabel: null,
 
-    __createUIPortConnections: function(uiPort, portId) {
-      [
-        ["dragstart", "PortDragStart"]
-      ].forEach(eventPair => {
-        uiPort.addListener(eventPair[0], e => {
-          const eData = {
-            event: e,
-            nodeId: this.getNodeModel().getNodeId(),
-            portId: portId
-          };
-          this.fireDataEvent(eventPair[1], eData);
-        }, this);
+    __createDragMechanism: function(uiPort, portKey) {
+      uiPort.setDraggable(true);
+      uiPort.nodeId = this.getNodeModel().getNodeId();
+      uiPort.portId = portKey;
+
+      uiPort.addListener("dragstart", e => {
+        // Register supported actions
+        e.addAction("copy");
+        // Register supported types
+        e.addType("osparc-port-link");
       }, this);
     },
 

services/web/client/source/class/qxapp/component/widget/inputs/NodeOutputListIcon.js

@@ -0,0 +1,78 @@
+qx.Class.define("qxapp.component.widget.inputs.NodeOutputListIcon", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(nodeModel, port, portKey) {
+    this.base();
+
+    this.setNodeModel(nodeModel);
+
+    let list = this.__list = new qx.ui.list.List().set({
+      labelPath: "label",
+      iconPath: "icon"
+    });
+
+    let that = this;
+    list.setDelegate({
+      createItem: () => new qxapp.component.widget.inputs.NodeOutputListItemIcon(),
+      bindItem: (c, item, id) => {
+        c.bindDefaultProperties(item, id);
+        c.bindProperty("key", "model", null, item, id);
+        c.bindProperty("thumbnail", "icon", null, item, id);
+        c.bindProperty("label", "label", {
+          converter: function(data, model, source, target) {
+            // return "<b>" + data + "</b>";
+            return data;
+          }
+        }, item, id);
+      },
+      configureItem: item => {
+        let icon = item.getChildControl("icon");
+        icon.set({
+          scale: true,
+          width: 246,
+          height: 144
+        });
+        that.__createDragMechanism(item); // eslint-disable-line no-underscore-dangle
+      }
+    });
+
+    const itemList = qxapp.data.Store.getInstance().getItemList(nodeModel.getNodeId(), portKey);
+    const listModel = qxapp.data.Converters.fromAPIListToVirtualListModel(itemList);
+    let model = qx.data.marshal.Json.createModel(listModel, true);
+    list.setModel(model);
+  },
+
+  properties: {
+    nodeModel: {
+      check: "qxapp.data.model.NodeModel",
+      nullable: false
+    }
+  },
+
+  members: {
+    __list: null,
+
+    __createDragMechanism: function(item) {
+      item.setDraggable(true);
+      item.addListener("dragstart", e => {
+        // Register supported actions
+        e.addAction("copy");
+
+        // HACK
+        if (this.getNodeModel().getKey() === "services/demodec/dynamic/itis/s4l/Neuroman") {
+          // Register supported types
+          e.addType("osparc-port-link");
+          item.nodeId = this.getNodeModel().getNodeId();
+          item.portId = item.getLabel();
+        } else {
+          // Register supported types
+          e.addType("osparc-mapping");
+        }
+      }, this);
+    },
+
+    getOutputWidget: function() {
+      return this.__list;
+    }
+  }
+});