|
|
@@ -0,0 +1,143 @@
|
|
|
+const BACKEND = "http://localhost:5000";
|
|
|
+
|
|
|
+Draw.loadPlugin(function(ui) {
|
|
|
+
|
|
|
+ // shortcut Ctrl+Space will "commit"/"save" all pages as models in backend:
|
|
|
+ window.onkeydown = function(e) {
|
|
|
+ if (e.ctrlKey && e.key === ' ') {
|
|
|
+ const headers = new Headers({
|
|
|
+ "Content-Type": "application/xml",
|
|
|
+ });
|
|
|
+ const serializer = new XMLSerializer();
|
|
|
+ const xmlnode = ui.getXmlFileData(
|
|
|
+ null, // ignore selection
|
|
|
+ false, // only the current page
|
|
|
+ true); // uncompressed
|
|
|
+ console.log("committing all 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)
|
|
|
+ refreshModels();
|
|
|
+ // Rebuild OML (very slow!)
|
|
|
+ console.log("rebuilding OML...");
|
|
|
+ fetch(BACKEND + "/rebuild_oml", {
|
|
|
+ method: "PUT",
|
|
|
+ }).then(res => {
|
|
|
+ console.log("rebuild OML", res.status, res.statusText);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const wndDiv = document.createElement('div');
|
|
|
+ wndDiv.style.userSelect = 'none';
|
|
|
+ // wndDiv.style.overflow = 'auto';
|
|
|
+ // wndDiv.style.padding = '10px';
|
|
|
+ wndDiv.style.height = '100%';
|
|
|
+ wndDiv.style.color = "rgb(112, 112, 112)";
|
|
|
+ // wndDiv.classList.add("geFormatSelection");
|
|
|
+ wndDiv.classList.add("geFormatContainer");
|
|
|
+
|
|
|
+ const saveDiv = document.createElement('div');
|
|
|
+ saveDiv.classList.add('geFormatSection')
|
|
|
+ saveDiv.style.padding = '12px 0px 8px 14px';
|
|
|
+ wndDiv.appendChild(saveDiv);
|
|
|
+
|
|
|
+ const lsDiv = document.createElement('div');
|
|
|
+ lsDiv.classList.add('geFormatSection')
|
|
|
+ lsDiv.style.padding = '12px 0px 8px 14px';
|
|
|
+ wndDiv.appendChild(lsDiv);
|
|
|
+
|
|
|
+ const saveLabel = document.createElement('div');
|
|
|
+ saveLabel.innerText = "Save";
|
|
|
+ saveLabel.style.fontWeight = 'bold';
|
|
|
+ saveDiv.appendChild(saveLabel);
|
|
|
+
|
|
|
+ const saveButton = document.createElement('button');
|
|
|
+ saveButton.innerText = "Save current page";
|
|
|
+ saveButton.style.width = "210px";
|
|
|
+ saveButton.style.marginBottom = "2px";
|
|
|
+ saveDiv.appendChild(saveButton);
|
|
|
+
|
|
|
+ const saveAllButton = document.createElement('button');
|
|
|
+ saveAllButton.innerText = "Save all pages";
|
|
|
+ saveAllButton.style.width = "210px";
|
|
|
+ saveAllButton.style.marginBottom = "2px";
|
|
|
+ saveDiv.appendChild(saveAllButton);
|
|
|
+
|
|
|
+ const modelsLabel = document.createElement('div');
|
|
|
+ modelsLabel.innerText = "Models";
|
|
|
+ modelsLabel.style.fontWeight = 'bold';
|
|
|
+ lsDiv.appendChild(modelsLabel);
|
|
|
+
|
|
|
+ const modelsDiv = document.createElement('div');
|
|
|
+ modelsDiv.style.overflow = 'auto';
|
|
|
+ lsDiv.appendChild(modelsDiv);
|
|
|
+
|
|
|
+ function refreshModels() {
|
|
|
+ fetch(BACKEND + "/diagrams", {
|
|
|
+ method: "GET",
|
|
|
+ })
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(json => {
|
|
|
+ modelsDiv.replaceChildren(...json.map(modelName => {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.style.padding = '3px 0px';
|
|
|
+ // const loadButton = document.createElement('button');
|
|
|
+ // loadButton.innerText = "Load";
|
|
|
+ const loadButton = mxUtils.button("Load", function() {
|
|
|
+ fetch(BACKEND + "/diagrams/" + modelName)
|
|
|
+ .then(res => res.text())
|
|
|
+ .then(xmltext => {
|
|
|
+ console.log(xmltext);
|
|
|
+ const parser = new DOMParser();
|
|
|
+ const doc = parser.parseFromString(xmltext, "application/xml");
|
|
|
+ const node = doc.documentElement;
|
|
|
+ const page = new DiagramPage(node);
|
|
|
+ ui.pages.push(page);
|
|
|
+ ui.currentPage = page;
|
|
|
+ ui.editor.setGraphXml(node);
|
|
|
+ })
|
|
|
+ });
|
|
|
+ loadButton.style.marginLeft = "12px";
|
|
|
+ div.appendChild(document.createTextNode(modelName));
|
|
|
+ div.appendChild(loadButton);
|
|
|
+ return div;
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ refreshModels();
|
|
|
+
|
|
|
+ const wnd = new mxWindow("ModelVerse",
|
|
|
+ wndDiv, 100, 100, 240, 400, true, true);
|
|
|
+ wnd.destroyOnClose = false;
|
|
|
+ wnd.setMaximizable(false);
|
|
|
+ wnd.setResizable(false);
|
|
|
+ wnd.setClosable(false);
|
|
|
+ wnd.addListener('show', mxUtils.bind(this, function() {
|
|
|
+ }));
|
|
|
+
|
|
|
+ wnd.show();
|
|
|
+})
|
