DTDesign plugin: remember position of window + show error details when something goes wrong.

src/main/webapp/myPlugins/dtdesign.js

@@ -129,18 +129,47 @@ function executeSPARQL(query) {
   .then(json => json.results.bindings)
 }
 
+const defaultSettings = {
+  dialogPosX: 100,
+  dialogPosY: 100,
+  dialogWidth: 240,
+  dialogHeight: 400,
+};
+
 Draw.loadPlugin(function(ui) {
 
-  const omlErrDiv = document.createElement('div');
+  function getSetting(prop) {
+    const result = localStorage.getItem("dtdesign-"+prop);
+    if (result !== null) {
+      return JSON.parse(result);
+    }
+    return defaultSettings[prop];
+  }
+  function setSetting(prop, value) {
+    localStorage.setItem("dtdesign-"+prop, JSON.stringify(value));
+  }
+
+  const errWndDiv = document.createElement('div');
     // wndDiv.style.color = "red";
-    omlErrDiv.style.overflow = "auto";
-    omlErrDiv.style.height = "100%";
-  const omlErrWnd = new mxWindow("OML Build Error",
-    omlErrDiv, 300, 300, 300, 360, true, true);
-    omlErrWnd.destroyOnClose = false;
-    omlErrWnd.setMaximizable(false);
-    omlErrWnd.setResizable(true);
-    omlErrWnd.setClosable(true);
+    errWndDiv.style.overflow = "auto";
+    errWndDiv.style.height = "100%";
+    errWndDiv.style.padding = '12px 14px 8px 14px';
+  const errWnd = new mxWindow("Error Details",
+    errWndDiv, 300, 300, 300, 360, true, true);
+    errWnd.destroyOnClose = false;
+    errWnd.setMaximizable(false);
+    errWnd.setResizable(true);
+    errWnd.setClosable(true);
+
+  function getErrDetailsAnchor() {
+    const anchor = document.createElement('a');
+      anchor.innerText = "Details";
+      anchor.href = "#";
+      anchor.onclick = function() {
+        errWnd.show();
+      };
+    return anchor;
+  }
 
   let rebuildOMLPromise = Promise.resolve();
 
@@ -149,36 +178,34 @@ Draw.loadPlugin(function(ui) {
     rebuildOMLPromise = rebuildOMLPromise.then(() => {
       omlStatusDiv.style.color = null;
       omlStatusDiv.innerText = "Rebuilding OML...";
-      console.log("rebuilding OML... this may take a while...");
       return fetch(BACKEND + "/rebuild_oml", {
         method: "PUT",
       }).then(res => {
         res.text().then(text => {
           if (text.length > 0) {
-            omlErrDiv.innerText = text;
+            errWndDiv.innerText = text;
           }
           else {
-            omlErrDiv.innerText = "No error."
+            errWndDiv.innerText = "No error."
           }
         });
         if (res.status >= 500) {
-          omlStatusDiv.innerHTML = "Failed to build OML ";
+          omlStatusDiv.innerHTML = "✗ Failed to build OML ";
           omlStatusDiv.style.color = "red";
-          const anchor = document.createElement('a');
-            anchor.innerText = "Details";
-            anchor.href = "#";
-            anchor.onclick = function() {
-              omlErrWnd.show();
-            };
-            omlStatusDiv.appendChild(anchor);
+          omlStatusDiv.appendChild(getErrDetailsAnchor());
         } else {
-          omlStatusDiv.innerText = "Ready";
+          omlStatusDiv.innerText = "✓ Built OML";
+          omlStatusDiv.style.color = "green";
         }
       });
     });
   }
 
   function savePages(onlyCurrentPage) {
+    saveStatusDiv.innerHTML = "Saving page(s)..."
+    saveStatusDiv.style.color = null;
+    omlStatusDiv.innerHTML = "";
+
     const headers = new Headers({
       "Content-Type": "application/xml",
     });
@@ -187,46 +214,37 @@ Draw.loadPlugin(function(ui) {
       null, // ignore selection
       onlyCurrentPage,
       true); // uncompressed
-    // console.log("committing pages...");
-    Promise.all(Array.from(xmlnode.children).map(diagram => {
-      const diagramName = diagram.getAttribute("name");
-      const xml = serializer.serializeToString(diagram);
-      return fetch(BACKEND + "/diagrams/"+diagramName, {
-        method: "PUT",
-        headers,
-        body: xml,
-      })
-      .then(res => {
-        if (res.status >= 200 && res.status < 300) {
-          res.json().then(parsedAs => {
-            console.log(diagramName, "-> OML success", JSON.stringify(parsedAs));
-          });
-          return true;
-        }
-        else {
-          console.log(diagramName, res.status, res.statusText);
-          return false;
-        }
-      });
-    })).then(ok => {
-      if (ok.filter(ok => ok === true).length >= 1) {
-        // At least one diagram successfully committed - refresh list of diagrams (fast)
+    const diagram = xmlnode.children[0]
+    const diagramName = diagram.getAttribute("name");
+    const xml = serializer.serializeToString(diagram);
+    return fetch(BACKEND + "/diagrams/"+diagramName, {
+      method: "PUT",
+      headers,
+      body: xml,
+    })
+    .then(res => {
+      if (res.status >= 200 && res.status < 300) {
+        errWndDiv.innerText = "No error.";
+        res.json().then(parsedAs => {
+          saveStatusDiv.innerHTML = "✓ Generated OML (" + parsedAs.join(", ") + ")";
+          saveStatusDiv.style.color = "green";
+        });
         refreshModels();
         rebuildOML();
       }
+      else {
+        saveStatusDiv.innerHTML = "✗ Failed to save/parse. ";
+        saveStatusDiv.appendChild(getErrDetailsAnchor());
+        res.text().then(text => {
+          errWndDiv.innerText = text;
+        });
+        saveStatusDiv.style.color = "red";
+      }
     });
   }
 
   ui.actions.addAction('whatIsThis', mxUtils.bind(this, function() {}));
 
-  // // Add context menu item
-  // const oldAddPopupMenuItems = ui.menus.addPopupMenuEditItems;
-  // ui.menus.addPopupMenuEditItems = function(menu, cell, evt) {
-  //   this.addMenuItems(menu, ['whatIsThis'], null, evt);
-  //   oldAddPopupMenuItems.call(this, menu, cell, evt);
-  //   console.log("CONTEXT MENU")
-  // }
-
   const oldFactoryMethod = ui.editor.graph.popupMenuHandler.factoryMethod;
   ui.editor.graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
     const modelverseMenu = menu.addItem("ModelVerse", null, null);
@@ -234,7 +252,6 @@ Draw.loadPlugin(function(ui) {
     menu.addSeparator();
     oldFactoryMethod.apply(this, arguments);
     if (cell && cell.vertex) {
-      // menu.addItem(`Draw.io cell "${cell.id}"`, null, function(evt) {}, modelverseMenu, null, false);
       executeSPARQL(whatIsCell(cell.id))
       .then(json => {
         for (const {cell, rel_type, as_type, as_element} of json) {
@@ -248,26 +265,12 @@ Draw.loadPlugin(function(ui) {
                 console.log("query", q, "json:", json);
               });
             }))
-            // executeSPARQL(getAllOutgoingRelations(as_element.value))
-            // .then(json => {
-            //   for (const {rel, other} of json) {
-            //     menu.addItem(rel.value+"      "+other.value, null, null, isAMenu);
-            //   }
-            // })
-          // for (const [key,val] of Object.entries(el)) {
-          //   menu.addItem(key + ": " + val.value, null, null, modelverseMenu, null, false);
-          // }
-          // const [as_element, as_type, cell, rel_type] = json[0];
-
         }
         console.log(json);
       });
     }
   }
 
-
-  
-
   const wndDiv = document.createElement('div');
     wndDiv.style.userSelect = 'none';
     wndDiv.style.height = '100%';
@@ -277,32 +280,30 @@ Draw.loadPlugin(function(ui) {
 
   const saveDiv = document.createElement('div');
     saveDiv.classList.add('geFormatSection')
-    saveDiv.style.padding = '12px 0px 8px 14px';
+    saveDiv.style.padding = '12px 14px 8px 14px';
     wndDiv.appendChild(saveDiv);
 
   const lsDiv = document.createElement('div');
     lsDiv.classList.add('geFormatSection')
-    lsDiv.style.padding = '12px 0px 8px 14px';
+    lsDiv.style.padding = '12px 14px 8px 14px';
     wndDiv.appendChild(lsDiv);
 
-  // const saveLabel = document.createElement('div');
-  //   saveLabel.innerText = "Save";
-  //   saveLabel.style.fontWeight = 'bold';
-  //   saveDiv.appendChild(saveLabel);
-
-  const saveButton = mxUtils.button("Save current page", function() {
+  const saveButton = mxUtils.button("Save Current Page", function() {
     savePages(true);
   });
-    saveButton.style.width = "210px";
+    saveButton.style.width = "100%";
     saveButton.style.marginBottom = "2px";
     saveDiv.appendChild(saveButton);
 
-  const saveAllButton = mxUtils.button("Save all pages", function() {
-    savePages(false);
-  });
-    saveAllButton.style.width = "210px";
-    saveAllButton.style.marginBottom = "2px";
-    saveDiv.appendChild(saveAllButton);
+  // const saveAllButton = mxUtils.button("Save all pages", function() {
+  //   savePages(false);
+  // });
+  //   saveAllButton.style.width = "100%";
+  //   saveAllButton.style.marginBottom = "2px";
+  //   saveDiv.appendChild(saveAllButton);
+
+  const saveStatusDiv = document.createElement('div');
+    saveDiv.appendChild(saveStatusDiv);
 
   const omlStatusDiv = document.createElement('div');
     omlStatusDiv.innerText = "Ready";
@@ -316,6 +317,7 @@ Draw.loadPlugin(function(ui) {
   const modelsDiv = document.createElement('div');
     lsDiv.appendChild(modelsDiv);
 
+  // Refreshes the list of models shown in the ModelVerse window
   function refreshModels() {
     fetch(BACKEND + "/diagrams", {
       method: "GET",
@@ -351,14 +353,25 @@ Draw.loadPlugin(function(ui) {
 
   refreshModels();
 
-  const wnd = new mxWindow("ModelVerse",
-    wndDiv, 900, 20, 240, 400, true, true);
+  const wnd = new mxWindow("ModelVerse", wndDiv,
+    getSetting("dialogPosX"), getSetting("dialogPosY"),
+    getSetting("dialogWidth"), getSetting("dialogHeight"),
+    true, true);
     wnd.destroyOnClose = false;
     wnd.setMaximizable(false);
-    wnd.setResizable(false);
+    wnd.setResizable(true);
     wnd.setClosable(false);
-    wnd.addListener('show', mxUtils.bind(this, function() {
-    }));
+    // remember window geometry in localstorage:
+    wnd.addListener('resize', function(wnd) {
+      // couldn't find a better way to get the new window size but the following:
+      const parsepx = px => parseInt(px.substring(0, px.length-2));
+      setSetting("dialogWidth", parsepx(wnd.div.style.width));
+      setSetting("dialogHeight", parsepx(wnd.div.style.height));
+    })
+    wnd.addListener('move', function() {
+      setSetting("dialogPosX", wnd.getX());
+      setSetting("dialogPosY", wnd.getY());
+    })
 
   wnd.show();
 })