Inputs mapper

services/dy-modeling/client/source/class/qxapp/Application.js

@@ -76,16 +76,19 @@ qx.Class.define("qxapp.Application", {
       let docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
 
       // initialize components
-      const menuBarHeight = 35;
-      const avaiBarHeight = 55;
+      let menuBarHeight = 35;
+      let avaiBarHeight = 55;
+      const showMenuBar = false;
+      const showUserMenu = false;
+      const showModelingTools = true;
 
       this._menuBar = new qxapp.component.MenuBar(
         docWidth, menuBarHeight,
         this._appModel.getColors().getMenuBar()
           .getBackground(), this._appModel.getColors().getMenuBar()
           .getFont());
 
-      this._userMenu = new qxapp.component.UserMenu(
+      let userMenu = new qxapp.component.UserMenu(
         this._appModel,
         this._appModel.getColors().getMenuBar()
           .getBackground(), this._appModel.getColors().getMenuBar()
@@ -116,15 +119,23 @@ qx.Class.define("qxapp.Application", {
         backgroundColor: "white",
         allowGrowY: false
       });
-      toolBarcontainer.add(this._menuBar);
-      toolBarcontainer.add(this.__availableServicesBar);
-      // toolBarcontainer.add(this.__threeView);
+
+      if (showMenuBar) {
+        toolBarcontainer.add(this._menuBar);
+      }
+      if (showModelingTools) {
+        toolBarcontainer.add(this.__availableServicesBar);
+      }
       doc.add(toolBarcontainer);
 
-      doc.add(this._userMenu, {
-        right: 30
-      });
+      if (showUserMenu) {
+        doc.add(userMenu, {
+          right: 30
+        });
+      }
 
+      menuBarHeight = showMenuBar ? menuBarHeight : 0;
+      avaiBarHeight = showModelingTools ? avaiBarHeight : 0;
       this.__entityList.moveTo(10, menuBarHeight + avaiBarHeight + 10);
       this.__entityList.open();
 
@@ -177,6 +188,17 @@ qx.Class.define("qxapp.Application", {
       return this._appModel.getUsers().toArray()[activeUserId].getName();
     },
 
+    loadModel: function(modelName) {
+      if (!this._socket.slotExists("importModelScene")) {
+        this._socket.on("importModelScene", function(val) {
+          if (val.type === "importModelScene") {
+            this.__threeView.importSceneFromBuffer(val.value);
+          }
+        }, this);
+      }
+      this._socket.emit("importModel", modelName);
+    },
+
     _initSignals: function() {
       // Menu bar
       this._menuBar.addListener("fileNewPressed", function(e) {
@@ -208,14 +230,7 @@ qx.Class.define("qxapp.Application", {
 
       this._menuBar.addListener("fileLoadModelPressed", function(e) {
         let selectedModel = e.getData();
-        if (!this._socket.slotExists("importModelScene")) {
-          this._socket.on("importModelScene", function(val) {
-            if (val.type === "importModelScene") {
-              this.__threeView.importSceneFromBuffer(val.value);
-            }
-          }, this);
-        }
-        this._socket.emit("importModel", selectedModel);
+        this.loadModel(selectedModel);
       }, this);
 
       this._menuBar.addListener("editPreferencesPressed", function(e) {

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

@@ -0,0 +1,194 @@
+/* eslint no-underscore-dangle: ["error", { "allowAfterThis": true, "allow": ["__willBeBranch", "__willBeLeaf", "__tree"] }] */
+
+qx.Class.define("qxapp.component.widget.InputsMapper", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(nodeModel, mapper) {
+    this.base();
+
+    let widgetLayout = new qx.ui.layout.VBox(5);
+    this._setLayout(widgetLayout);
+
+    this.setNodeModel(nodeModel);
+    this.setMapper(mapper);
+
+    let tree = this.__tree = new qx.ui.tree.VirtualTree(null, "label", "children").set({
+      openMode: "none"
+    });
+    this._add(tree, {
+      flex: 1
+    });
+    tree.getSelection().addListener("change", this.__onTreeSelectionChanged, this);
+
+    let that = this;
+    tree.setDelegate({
+      createItem: () => new qxapp.component.widget.inputs.NodeOutputListItem(),
+      bindItem: (c, item, id) => {
+        c.bindDefaultProperties(item, id);
+        // c.bindProperty("key", "key", null, item, id);
+        c.bindProperty("isDir", "isDir", null, item, id);
+        c.bindProperty("isRoot", "isRoot", null, item, id);
+      },
+      configureItem: item => {
+        item.set({
+          droppable: true
+        });
+        item.addListener("dragover", e => {
+          item.set({
+            droppable: item.getIsDir()
+          });
+          let compatible = false;
+          if (e.supportsType("osparc-mapping")) {
+            const from = e.getRelatedTarget();
+            const to = e.getCurrentTarget();
+            const fromKey = from.getNodeKey();
+            if (to.getIsRoot()) {
+              // root
+              compatible = from.getIsDir() && that.__willBeBranch(fromKey);
+            } else {
+              // non root
+              compatible = to.getIsDir() && !from.getIsDir() && that.__willBeLeaf(fromKey);
+            }
+          }
+          if (!compatible) {
+            e.preventDefault();
+          }
+        });
+        item.addListener("drop", e => {
+          if (e.supportsType("osparc-mapping")) {
+            const from = e.getRelatedTarget();
+            const fromNodeKey = from.getNodeKey();
+            const fromPortKey = from.getPortKey();
+            let data = {
+              key: from.getModel(),
+              label: from.getLabel(),
+              nodeKey: from.getNodeKey(),
+              portKey: from.getPortKey(),
+              isDir: from.getIsDir()
+            };
+            const willBeBranch = that.__willBeBranch(fromNodeKey);
+            if (willBeBranch) {
+              data["children"] = [];
+            }
+            let newItem = qx.data.marshal.Json.createModel(data, true);
+            const to = e.getCurrentTarget();
+            to.getModel().getChildren()
+              .push(newItem);
+            if (willBeBranch) {
+              const nodeInstanceUUID = null;
+              const itemProps = qxapp.data.Store.getInstance().getItem(nodeInstanceUUID, fromPortKey, newItem.getKey());
+              if (itemProps) {
+                let form = new qxapp.component.form.Auto(itemProps);
+                let propsWidget = new qxapp.component.form.renderer.PropForm(form);
+                newItem["propsWidget"] = propsWidget;
+              }
+            }
+            to.setOpen(true);
+            tree.focus();
+          }
+        });
+      }
+    });
+
+    let data = {
+      label: nodeModel.getLabel(),
+      isRoot: true,
+      children: []
+    };
+    let model = qx.data.marshal.Json.createModel(data, true);
+    tree.setModel(model);
+
+    this.addListener("keypress", function(keyEvent) {
+      let treeSelection = this.__tree.getSelection();
+      if (treeSelection.length < 1) {
+        return;
+      }
+      let selectedItem = treeSelection.toArray()[0];
+      if (selectedItem.getIsRoot && selectedItem.getIsRoot()) {
+        return;
+      }
+      switch (keyEvent.getKeyIdentifier()) {
+        case "F2": {
+          let treeItemRenamer = new qxapp.component.widget.TreeItemRenamer(selectedItem);
+          treeItemRenamer.addListener("LabelChanged", e => {
+            let newLabel = e.getData()["newLabel"];
+            selectedItem.setLabel(newLabel);
+          }, this);
+          treeItemRenamer.center();
+          treeItemRenamer.open();
+          break;
+        }
+        case "Delete": {
+          let branches = this.__tree.getModel().getChildren();
+          // branch
+          let removed = branches.remove(selectedItem);
+          if (!removed) {
+            // leaf
+            let br = branches.toArray();
+            for (let i=0; i<br.length; i++) {
+              let branch = br[i];
+              removed = branch.getChildren().remove(selectedItem);
+              if (removed) {
+                break;
+              }
+            }
+          }
+          break;
+        }
+      }
+    }, this);
+  },
+
+  properties: {
+    nodeModel: {
+      check: "qxapp.data.model.NodeModel",
+      nullable: false
+    },
+
+    mapper: {
+      nullable: false
+    }
+  },
+
+  members: {
+    __tree: null,
+
+    __willBeBranch: function(candidate) {
+      let isBranch = false;
+      const maps = this.getMapper().maps;
+      if (Object.prototype.hasOwnProperty.call(maps, "branch")) {
+        if (maps["branch"] === candidate) {
+          isBranch = true;
+        }
+      }
+      const isDefault = candidate === this.getNodeModel().getKey();
+      return isDefault || isBranch;
+    },
+
+    __willBeLeaf: function(candidate) {
+      let isLeave = false;
+      const maps = this.getMapper().maps;
+      if (Object.prototype.hasOwnProperty.call(maps, "leaf")) {
+        if (maps["leaf"] === candidate) {
+          isLeave = true;
+        }
+      }
+      return isLeave;
+    },
+
+    __onTreeSelectionChanged: function() {
+      // remove all but the tree
+      while (this._getChildren().length > 1) {
+        this._removeAt(1);
+      }
+      let selectedItems = this.__tree.getSelection();
+      if (selectedItems.length < 1) {
+        return;
+      }
+      let selectedItem = selectedItems.toArray()[0];
+      if (Object.prototype.hasOwnProperty.call(selectedItem, "propsWidget")) {
+        this._add(selectedItem["propsWidget"]);
+      }
+    }
+  }
+});

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

@@ -1,3 +1,16 @@
+/* ************************************************************************
+   Copyright: 2018 ITIS Foundation
+   License:   MIT
+   Authors:   Odei Maiz <[email protected]>
+   Utf8Check: äöü
+************************************************************************ */
+
+/**
+ *  Creates the widget that represents what needs to be exposed
+ * to outsise the container.
+ *
+ */
+
 qx.Class.define("qxapp.component.widget.NodeExposed", {
   extend: qx.ui.core.Widget,
 
@@ -56,7 +69,6 @@ qx.Class.define("qxapp.component.widget.NodeExposed", {
       this.__inputPort = {};
       this.__outputPort = {};
       this.__createUIPorts(true, metaData.inputs);
-      // this.__createUIPorts(false, metaData.outputs);
     },
 
     getInputPort: function() {

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

@@ -1,3 +1,16 @@
+/* ************************************************************************
+   Copyright: 2018 ITIS Foundation
+   License:   MIT
+   Authors:   Odei Maiz <[email protected]>
+   Utf8Check: äöü
+************************************************************************ */
+
+/**
+ *  Creates the widget that represents an input node.
+ * It shows nothing more than the name of the input node in the middle of a box.
+ *
+ */
+
 qx.Class.define("qxapp.component.widget.NodeInput", {
   extend: qx.ui.core.Widget,
 
@@ -13,10 +26,14 @@ qx.Class.define("qxapp.component.widget.NodeInput", {
 
     let atom = new qx.ui.basic.Atom().set({
       label: nodeModel.getLabel(),
-      center : true,
+      center: true,
       draggable: true,
       droppable: true
     });
+    const title16Font = qx.bom.Font.fromConfig(qxapp.theme.Font.fonts["title-16"]);
+    atom.getChildControl("label").set({
+      font: title16Font
+    });
 
     this._add(atom, {
       flex: 1