Binding labels (#323)

Binding NodeModel to labels in: * NodeBase * NavigationBar * NodeInput * NodeExposed * NodePorts
ITISFoundation · Nov 13, 2018 · ff41cf4 · ff41cf4
1 parent f51d68b
commit ff41cf4
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 57 deletions.
diff --git a/services/web/client/source/class/qxapp/component/widget/NodeExposed.js b/services/web/client/source/class/qxapp/component/widget/NodeExposed.js
@@ -25,11 +25,19 @@ qx.Class.define("qxapp.component.widget.NodeExposed", {
     });
 
     let atom = new qx.ui.basic.Atom().set({
-      label: nodeModel.getLabel() + "'s outputs",
-      center : true,
+      rich: true,
+      center: true,
       draggable: true,
       droppable: true
     });
+    atom.getChildControl("label").set({
+      textAlign: "center"
+    });
+    nodeModel.bind("label", atom, "label", {
+      converter: function(data) {
+        return data + "'s<br>outputs";
+      }
+    });
 
     this._add(atom, {
       flex: 1

diff --git a/services/web/client/source/class/qxapp/component/widget/NodeInput.js b/services/web/client/source/class/qxapp/component/widget/NodeInput.js
@@ -15,6 +15,8 @@ qx.Class.define("qxapp.component.widget.NodeInput", {
   extend: qx.ui.core.Widget,
 
   construct: function(nodeModel) {
+    this.setNodeModel(nodeModel);
+
     this.base();
 
     let nodeInputLayout = new qx.ui.layout.VBox(10);
@@ -25,11 +27,11 @@ qx.Class.define("qxapp.component.widget.NodeInput", {
     });
 
     let atom = new qx.ui.basic.Atom().set({
-      label: nodeModel.getLabel(),
       center: true,
       draggable: true,
       droppable: true
     });
+    nodeModel.bind("label", atom, "label");
     const title16Font = qx.bom.Font.fromConfig(qxapp.theme.Font.fonts["title-16"]);
     atom.getChildControl("label").set({
       font: title16Font
@@ -38,8 +40,6 @@ qx.Class.define("qxapp.component.widget.NodeInput", {
     this._add(atom, {
       flex: 1
     });
-
-    this.setNodeModel(nodeModel);
   },
 
   properties: {

diff --git a/services/web/client/source/class/qxapp/component/widget/NodePorts.js b/services/web/client/source/class/qxapp/component/widget/NodePorts.js
@@ -26,11 +26,12 @@ qx.Class.define("qxapp.component.widget.NodePorts", {
     });
 
     const title16Font = qx.bom.Font.fromConfig(qxapp.theme.Font.fonts["title-16"]);
-    let label = new qx.ui.basic.Label(nodeModel.getLabel()).set({
+    let label = new qx.ui.basic.Label().set({
       font: title16Font,
       alignX: "center",
       alignY: "middle"
     });
+    nodeModel.bind("label", label, "value");
     this._add(label);
 
     this.setIsInputModel(isInputModel);

diff --git a/services/web/client/source/class/qxapp/component/widget/TreeTool.js b/services/web/client/source/class/qxapp/component/widget/TreeTool.js
@@ -31,9 +31,11 @@ qx.Class.define("qxapp.component.widget.TreeTool", {
 
         let treeItemRenamer = new qxapp.component.widget.TreeItemRenamer(selectedItem);
         treeItemRenamer.addListener("LabelChanged", e => {
-          let data = e.getData();
-          data["nodeId"] = selectedItem.getNodeId();
-          this.fireDataEvent("NodeLabelChanged", data);
+          const data = e.getData();
+          const newLabel = data.newLabel;
+          const nodeId = selectedItem.getNodeId();
+          let nodeModel = this.getWorkbenchModel().getNodeModel(nodeId);
+          nodeModel.setLabel(newLabel);
         }, this);
         const bounds = this.getLayoutParent().getBounds();
         treeItemRenamer.moveTo(bounds.left+100, bounds.top+150);
@@ -43,8 +45,7 @@ qx.Class.define("qxapp.component.widget.TreeTool", {
   },
 
   events: {
-    "NodeDoubleClicked": "qx.event.type.Data",
-    "NodeLabelChanged": "qx.event.type.Data"
+    "NodeDoubleClicked": "qx.event.type.Data"
   },
 
   properties: {

diff --git a/services/web/client/source/class/qxapp/component/workbench/NodeBase.js b/services/web/client/source/class/qxapp/component/workbench/NodeBase.js
@@ -96,13 +96,13 @@ qx.Class.define("qxapp.component.workbench.NodeBase", {
 
     populateNodeLayout: function() {
       const nodeModel = this.getNodeModel();
-      const metaData = nodeModel.getMetaData();
-      this.setCaption(nodeModel.getLabel());
+      nodeModel.bind("label", this, "caption");
       if (nodeModel.isContainer()) {
         this.setIcon("@FontAwesome5Solid/folder-open/14");
       }
       this.__inputPort = {};
       this.__outputPort = {};
+      const metaData = nodeModel.getMetaData();
       if (metaData) {
         this.__createUIPorts(true, metaData.inputs);
         this.__createUIPorts(false, metaData.outputs);

diff --git a/services/web/client/source/class/qxapp/data/model/NodeModel.js b/services/web/client/source/class/qxapp/data/model/NodeModel.js
@@ -74,7 +74,8 @@ qx.Class.define("qxapp.data.model.NodeModel", {
 
     label: {
       check: "String",
-      nullable: true
+      nullable: true,
+      event: "changeLabel"
     },
 
     propsWidget: {

diff --git a/services/web/client/source/class/qxapp/data/model/ProjectModel.js b/services/web/client/source/class/qxapp/data/model/ProjectModel.js
@@ -36,6 +36,7 @@ qx.Class.define("qxapp.data.model.ProjectModel", {
       check: "String",
       nullable: false,
       init: "New Project",
+      event: "changeName",
       apply : "__applyName"
     },
 

diff --git a/services/web/client/source/class/qxapp/data/model/WorkbenchModel.js b/services/web/client/source/class/qxapp/data/model/WorkbenchModel.js
@@ -52,38 +52,22 @@ qx.Class.define("qxapp.data.model.WorkbenchModel", {
       return nodes;
     },
 
-    getPath: function(nodeId) {
-      let pathWithIds = this.getPathWithId(nodeId);
-      let nodePath = [];
-      for (let i=0; i<pathWithIds.length; i++) {
-        nodePath.push(Object.values(pathWithIds[i])[0]);
-      }
-      return nodePath;
-    },
-
-    getPathWithId: function(nodeId) {
-      let rootObj = {};
-      rootObj["root"] = this.getProjectName();
+    getPathIds: function(nodeId) {
       if (nodeId === "root" || nodeId === undefined) {
-        return [rootObj];
+        return ["root"];
       }
-
-      const nodeModel = this.getNodeModel(nodeId);
       let nodePath = [];
-      let obj = {};
-      obj[nodeId] = nodeModel.getLabel();
-      nodePath.unshift(obj);
+      nodePath.unshift(nodeId);
+      const nodeModel = this.getNodeModel(nodeId);
       let parentNodeId = nodeModel.getParentNodeId();
       while (parentNodeId) {
         const checkThisNode = this.getNodeModel(parentNodeId);
         if (checkThisNode) {
-          let thisObj = {};
-          thisObj[parentNodeId] = checkThisNode.getLabel();
-          nodePath.unshift(thisObj);
+          nodePath.unshift(parentNodeId);
           parentNodeId = checkThisNode.getParentNodeId();
         }
       }
-      nodePath.unshift(rootObj);
+      nodePath.unshift("root");
       return nodePath;
     },
 

diff --git a/services/web/client/source/class/qxapp/desktop/LayoutManager.js b/services/web/client/source/class/qxapp/desktop/LayoutManager.js
@@ -45,9 +45,8 @@ qx.Class.define("qxapp.desktop.LayoutManager", {
       this.__prjEditor = new qxapp.desktop.PrjEditor(projectModel);
       this.__prjStack.add(this.__prjEditor);
       this.__prjStack.setSelection([this.__prjEditor]);
-      this.__navBar.setMainViewCaption([{
-        "root": projectModel.getName()
-      }]);
+      this.__navBar.setProjectModel(projectModel);
+      this.__navBar.setMainViewCaption(projectModel.getWorkbenchModel().getPathIds("root"));
 
       this.__prjEditor.addListener("ChangeMainViewCaption", function(ev) {
         const elements = ev.getData();

diff --git a/services/web/client/source/class/qxapp/desktop/NavigationBar.js b/services/web/client/source/class/qxapp/desktop/NavigationBar.js
@@ -89,6 +89,13 @@ qx.Class.define("qxapp.desktop.NavigationBar", {
     "DashboardPressed": "qx.event.type.Event"
   },
 
+  properties: {
+    projectModel: {
+      check: "qxapp.data.model.ProjectModel",
+      nullable: true
+    }
+  },
+
   members: {
     __mainViewCaptionLayout: null,
 
@@ -110,21 +117,28 @@ qx.Class.define("qxapp.desktop.NavigationBar", {
       this.__mainViewCaptionLayout.add(mainViewCaption);
     },
 
-    __showMainViewCaptionAsButtons: function(newLabels) {
+    __showMainViewCaptionAsButtons: function(nodeIds) {
       const navBarLabelFont = qx.bom.Font.fromConfig(qxapp.theme.Font.fonts["nav-bar-label"]);
-      for (let i=0; i<newLabels.length; i++) {
-        const newLabel = newLabels[i];
-        const label = Object.values(newLabel)[0];
-        const nodeId = Object.keys(newLabel)[0];
-        let btn = new qx.ui.form.Button(label).set({
+      for (let i=0; i<nodeIds.length; i++) {
+        let btn = new qx.ui.form.Button().set({
           maxHeight: NAVIGATION_BUTTON_HEIGHT
         });
+        const nodeId = nodeIds[i];
+        if (nodeId === "root") {
+          this.getProjectModel().bind("name", btn, "label");
+        } else {
+          const nodeModel = this.getProjectModel().getWorkbenchModel()
+            .getNodeModel(nodeId);
+          if (nodeModel) {
+            nodeModel.bind("label", btn, "label");
+          }
+        }
         btn.addListener("execute", function() {
           this.fireDataEvent("NodeDoubleClicked", nodeId);
         }, this);
         this.__mainViewCaptionLayout.add(btn);
 
-        if (i<newLabels.length-1) {
+        if (i<nodeIds.length-1) {
           let mainViewCaption = this.__mainViewCaption = new qx.ui.basic.Label(">").set({
             font: navBarLabelFont
           });

diff --git a/services/web/client/source/class/qxapp/desktop/PrjEditor.js b/services/web/client/source/class/qxapp/desktop/PrjEditor.js
@@ -115,15 +115,6 @@ qx.Class.define("qxapp.desktop.PrjEditor", {
           this.nodeSelected(nodeId);
         }, this);
       });
-
-      this.__treeView.addListener("NodeLabelChanged", function(e) {
-        const data = e.getData();
-        const nodeId = data.nodeId;
-        const newLabel = data.newLabel;
-
-        let nodeModel = this.getProjectModel().getWorkbenchModel().getNodeModel(nodeId);
-        nodeModel.setLabel(newLabel);
-      }, this);
     },
 
     nodeSelected: function(nodeId) {
@@ -199,8 +190,9 @@ qx.Class.define("qxapp.desktop.PrjEditor", {
       }
 
       this.__mainPanel.setMainView(widget);
-      let nodePath = this.getProjectModel().getWorkbenchModel().getPathWithId(nodeId);
-      this.fireDataEvent("ChangeMainViewCaption", nodePath);
+
+      let nodesPath = this.getProjectModel().getWorkbenchModel().getPathIds(nodeId);
+      this.fireDataEvent("ChangeMainViewCaption", nodesPath);
     },
 
     showInExtraView: function(widget) {