Merge pull request #151 from mdenet/feature/composite-panel

Updated composite panel

platform/public/common/utility.json

@@ -40,6 +40,26 @@
 
                     "icon": "problems"
 
+                },
+
+                {
+                    "id": "composite",
+
+                    "name": "composite",
+
+                    "panelclass": "CompositePanel",
+
+                    "icon": "diagram"
+                },
+
+                {
+                    "id": "output",
+
+                    "name": "output",
+
+                    "panelclass": "OutputPanel",
+
+                    "icon": "console"
                 }
             ]
         }

platform/public/css/custom.css

@@ -3,12 +3,8 @@
 }
 
 .editor { 
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     height: 100%;
+    width: 100%;
 }
 
 .info { 

platform/src/ActivityManager.js

@@ -82,7 +82,7 @@ class ActivityManager {
      */
     resolvePanelReference(activityId, panelRef){
 
-        const foundPanel = this.activities[activityId].panels.find( pnl => pnl.id == panelRef );
+        const foundPanel = this.findPanel(panelRef,this.activities[activityId].panels);
 
         if ( foundPanel != undefined && typeof foundPanel.id == "string" ){
 
@@ -94,6 +94,26 @@ class ActivityManager {
         }
     }
 
+    /**
+     * Required to search within CompositePanels
+     * 
+     * @param {*} panelRef 
+     * @param {*} panelList 
+     * @returns 
+     */
+    findPanel(panelRef, panelList) {
+        for(let panel of panelList) {
+            if (panel.id == panelRef) return panel;
+            else {
+                if (panel.childPanels) {
+                    const pnl = this.findPanel(panelRef, panel.childPanels)
+                    if (pnl) return pnl;
+                }
+            }
+        }
+        return undefined;
+    }
+
     /**
      * Fetches all the activities from activitiesUrl
      * and populates the activities array
@@ -326,6 +346,34 @@ class ActivityManager {
         return null;
     }
 
+
+
+    /* resolve panel refs recursively because of CompositePanels */
+    resolveRef(panelList) {
+        for ( let apanel of panelList ){
+
+            if (apanel.file != null) { 
+                apanel.url =  new URL( apanel.file, this.activitiesUrl).href; 
+                let file = this.fetchFile(apanel.file);
+                apanel.file = file.content;
+                apanel.sha = file.sha; 
+            };
+
+            // Resolve the panel definition reference  
+            if ( typeof apanel.ref == "string" ){
+                const panelDef = this.accessPanelDef(apanel.ref);
+
+                if (panelDef != null){
+                    apanel.ref = panelDef;
+                }
+            }
+
+            if (apanel.childPanels) {
+                this.resolveRef(apanel.childPanels);
+            }
+        }
+    }
+
     /**
      * Fetches the contents of the activity with the provided ID
      */ 
@@ -335,25 +383,7 @@ class ActivityManager {
 
             var activity = this.activities[id];
 
-            for ( let apanel of activity.panels ){
-
-                if (apanel.file != null) { 
-                    apanel.url =  new URL( apanel.file, this.activitiesUrl).href; 
-                    let file = this.fetchFile(apanel.file);
-                    apanel.file = file.content;
-                    apanel.sha = file.sha; 
-                };
-
-                // Resolve the panel definition reference  
-                if ( typeof apanel.ref == "string" ){
-
-                    const panelDef = this.accessPanelDef(apanel.ref);
-
-                    if (panelDef != null){
-                        apanel.ref = panelDef;
-                    }
-                }
-            }
+            this.resolveRef(activity.panels);
 
             return activity;
         }

platform/src/Button.js

@@ -32,8 +32,13 @@ class Button {
             this.action = "runAction( '" + parentPanel + "', '" + buttonConfigObject.id +"' )";
 
         } else if (buttonConfigObject["internal"] != undefined) {
-            this.action = buttonConfigObject.internal;
-
+
+            if (buttonConfigObject.targetPanel && buttonConfigObject.internal === "toggle") {
+                this.action = "togglePanelById( '" + buttonConfigObject.targetPanel + "Panel' )";  
+            } else {
+                this.action = buttonConfigObject.internal;
+            }
+
         } else {
             console.log( "Button '" + buttonConfigObject.id + "' with uknown key.");
         }

platform/src/CompositePanel.js

@@ -0,0 +1,93 @@
+import { Panel } from "./Panel.js";
+import { Layout } from "./Layout.js";
+
+class CompositePanel extends Panel {
+    childPanels = [];
+    constructor(id = "composite") {
+        super(id);
+    }
+
+    initialize(editor) {
+        super.initialize(editor)
+        this.childPanels.forEach(panel => {
+            panel.initialize(editor);
+            panel.parentComposite = this;
+        });
+    }
+
+    /**
+     * Check whether there are saveable changes to a child panels contents.
+     * @override
+     * @returns true if there are changes that can be saved.
+     */
+    canSave(){
+        let childrenCanSave = false;
+
+        this.childPanels.forEach( (cp) => childrenCanSave = childrenCanSave || cp.canSave() );
+
+        return childrenCanSave;
+    }
+
+    /**
+     * @override
+     */
+    save(fileHandler){
+        let savePromises =  this.childPanels.map( (cp) => { 
+            if (cp.canSave()) { 
+                //save each child panel
+                return cp.save(fileHandler); 
+            } else { 
+                return null; 
+            }
+        });
+        return Promise.all(savePromises);
+    }
+
+    addPanel(panel) {
+        this.childPanels.push(panel);
+        panel.parentComposite = this; // Set a reference to the parent CompositePanel
+    }
+
+    removePanel(panel) {
+        this.childPanels = this.childPanels.filter(p => p !== panel);
+    }
+
+
+
+    createElement() {
+        var root = document.createElement("div");
+        root.setAttribute("class", "compositePanel");
+        root.setAttribute("data-role", "panel");
+        root.setAttribute("id", this.id + "Panel");
+
+        root.style.display = "flex";
+        root.style.flexDirection = "column";
+        root.style.flex = "1";
+
+        var childElementList = []
+        if (this.childPanels) {
+            this.childPanels.forEach(childPanel => { 
+                var childElement = childPanel.getElement();
+                childElementList.push(childElement);
+            });
+        }
+        const splitter = Layout.createHorizontalSplitter(childElementList);
+        splitter.setAttribute("class", "h-100");
+
+        root.appendChild(splitter);
+
+        return root;
+    }
+
+    fit() {
+        const panelElement = document.getElementById(this.id + "Panel");
+        panelElement.firstChild.style.height = "100%";
+
+        this.childPanels.forEach(panel => {
+            panel.fit();
+        });
+    }
+
+}
+
+export { CompositePanel };

platform/src/ConsolePanel.js

@@ -6,9 +6,13 @@ class ConsolePanel extends Panel {
 
     constructor(id) {
         super(id);
+    }
+
+    initialize(editor) {
+        super.initialize(editor)
+
         this.editor.setReadOnly(true);
         this.editor.setValue("", 1);
-
         let buttons = [];
         let clearButton = new Button(
             { id:"clear", 
@@ -59,8 +63,8 @@ class ConsolePanel extends Panel {
         root.setAttribute("id", this.id + "Panel");
 
         var editor = document.createElement("div");
-        editor.setAttribute("id", this.id + "Editor");
         editor.setAttribute("class", "editor");
+        editor.setAttribute("id", this.id + "Editor");
 
         root.appendChild(editor);