Some menu interaction improvements

cimmenu/src/cimmenu.js

@@ -185,6 +185,19 @@ class cimmenu {
         }
     };
 
+    toggleAllComponentsVisibility() {
+        this.panels.diagramsPanel.classList.add('invisible');
+        this.panels.componentsPanel.classList.add('invisible');
+        this.panels.attributesPanel.classList.add('invisible');
+        if (this.panels.allComponentsPanel.classList.contains('invisible')) {
+            this.populateAllComponents();
+            this.panels.allComponentsPanel.classList.remove('invisible');
+        }
+        else {
+            this.panels.allComponentsPanel.classList.add('invisible');
+        }
+    };
+
     populateAllComponents() {
         cimmenu.cimsvgFunction(()=> {
             let baseJson = currentCimsvg().getBaseJson();
@@ -244,6 +257,7 @@ class cimmenu {
 
     toggleDiagramComponentsVisibility() {
         this.panels.componentsPanel.classList.add('invisible');
+        this.panels.allComponentsPanel.classList.add('invisible');
         this.panels.attributesPanel.classList.add('invisible');
         if (this.panels.diagramsPanel.classList.contains('invisible')) {
             this.panels.diagramsPanel.classList.remove('invisible');

cimmenu/templates/handlebars/menu.handlebars

@@ -2,7 +2,7 @@
                 <span id="barmenu-switch" class="switch button row-right topleft" onclick="currentCimmenu().toggleMainMenuVisible();">
                     <span class="fa fa-bars"></span>
                 </span>
-                <span id="all-components-switch" class="switch button row-right bottomright" onclick="currentCimmenu().populateAllComponents();">
+                <span id="all-components-switch" class="switch button row-right bottomright" onclick="currentCimmenu().toggleAllComponentsVisibility();">
                     <span class="fa fa-gears"></span>
                 </span>
                     <span id="diagram-components-switch" class="switch button row-right bottomleft" onclick="currentCimmenu().toggleDiagramComponentsVisibility();">

cimmenu/templates/handlebars/pinturaJson2AllComponentsList.handlebars

 <div class="floating-panel-list">
     {{#sort_each this as |componentList typeName|}}
         <div class="wide-row list-subtitle">
+            <button class="smallbutton" onclick="currentCimsvg().addComponent('{{typeName}}');"> + </button>
             <span class="button row-left" onclick="javascript:showContainer('all-components-{{typeName}}-accordion', null);">{{typeName}}</span>
         </div>
         <div id="all-components-{{typeName}}-accordion" class="component-accordion" style="display:none">

cimsvg/src/cimjson.js

@@ -154,10 +154,14 @@ class cimjson {
         let graph = {};
         for (let key in input) {
             let diagramObject = input[key];
-            let diagram = diagramObject["cim:DiagramObject.Diagram"]["rdf:resource"].substring(1);
-            if (diagramObject["cim:DiagramObject.IdentifiedObject"]) {
-                let identifiedObject = input[key]["cim:DiagramObject.IdentifiedObject"]["rdf:resource"].substring(1);
-                graph[identifiedObject] = input[key];
+            let diagramPlusHash = common.safeExtract(diagramObject, "cim:DiagramObject.Diagram", "rdf:resource");
+            if (diagramPlusHash) {
+                let diagram = diagramPlusHash.substring(1);
+                let identifiedObject = common.safeExtract(diagramObject, "cim:DiagramObject.IdentifiedObject")
+                if (identifiedObject) {
+                    let identifiedObjectRdfResource = identifiedObject["rdf:resource"].substring(1);
+                    graph[identifiedObjectRdfResource] = diagramObject;
+                }
             }
         }
         return graph;