#83 Store PNG/SVG exports with inline DST file

SVG part

app/domain-story-modeler/features/export/dstDownload.js

@@ -12,24 +12,7 @@ let infoText = document.getElementById('infoText');
 
 export function downloadDST(filename, text) {
 
-  const iconConfig = getIconset();
-  let configJSONString = {};
-  let actors = iconConfig.actors;
-  let workObjects = iconConfig.workObjects;
-
-  if (!actors.size>0) {
-    actors = getTypeDictionary(ACTOR);
-  }
-  if (!workObjects.size>0) {
-    workObjects = getTypeDictionary(WORKOBJECT);
-  }
-
-  configJSONString = JSON.stringify(createConfigFromDictionaries(actors, null, workObjects, null, document.getElementById('currentDomainName').innerText));
-
-  let configAndDST = {
-    domain: configJSONString,
-    dst: text
-  };
+  let configAndDST = createConfigAndDst(text);
   let json =JSON.stringify(configAndDST);
   let element = document.createElement('a');
 
@@ -81,3 +64,25 @@ export function createObjectListForDSTDownload(version) {
   objectList.push({ version: version });
   return objectList;
 }
+
+export function createConfigAndDst(text) {
+
+  const iconConfig = getIconset();
+  let configJSONString = {};
+  let actors = iconConfig.actors;
+  let workObjects = iconConfig.workObjects;
+
+  if (!actors.size>0) {
+    actors = getTypeDictionary(ACTOR);
+  }
+  if (!workObjects.size>0) {
+    workObjects = getTypeDictionary(WORKOBJECT);
+  }
+
+  configJSONString = JSON.stringify(createConfigFromDictionaries(actors, null, workObjects, null, document.getElementById('currentDomainName').innerText));
+
+  return {
+    domain: configJSONString,
+    dst: text
+  };
+}

app/domain-story-modeler/features/export/svgDownload.js

@@ -2,6 +2,8 @@
 
 import { createTitleAndDescriptionSVGElement } from './createTitleAndInfo';
 import { sanitizeForDesktop } from '../../util/Sanitizer';
+import { createConfigAndDst, createObjectListForDSTDownload } from './dstDownload';
+import { version } from '../../../../package.json';
 
 let title = document.getElementById('title'),
     infoText = document.getElementById('infoText');
@@ -96,6 +98,10 @@ function createSVGData() {
     insertText,
     cacheData.slice(insertIndex)
   ].join('');
+
+  cacheData = appendDST(cacheData);
+  console.log(cacheData);
+
   return encodeURIComponent(cacheData);
 }
 
@@ -104,3 +110,12 @@ function viewBoxCoordinates(svg) {
   const match = svg.match(ViewBoxCoordinate);
   return { width: +match[1], height: +match[2], viewBox: match[3] };
 }
+
+function appendDST(cacheData) {
+  const objects = createObjectListForDSTDownload(version);
+
+  const dstText = JSON.stringify(objects);
+  const dst = createConfigAndDst(dstText);
+  cacheData+= '\n<!-- <DST>\n' + JSON.stringify(dst) + '\n </DST> -->';
+  return cacheData;
+}

app/domain-story-modeler/features/import/import.js

@@ -28,7 +28,10 @@ import {
   registerIcons
 } from '../../language/icon/dictionaries';
 import { sanitizeIconName } from '../../util/Sanitizer';
-import { Dict } from '../../language/collection';
+import { Dict } from '../../language/classes/collection';
+
+const DST_TYPE = 1;
+const SVG_TYPE = 2;
 
 let modal = document.getElementById('modal'),
     info = document.getElementById('info'),
@@ -83,7 +86,12 @@ export function initImports(
 ) {
   document.getElementById('import').onchange = function() {
     initElementRegistry(elementRegistry);
-    importDST(document.getElementById('import').files[0], version, modeler);
+    const filename = document.getElementById('import').files[0].name;
+    if (filename.endsWith('.dst')) {
+      importDST(document.getElementById('import').files[0], filename, version, modeler);
+    } else if (filename.endsWith('.svg')) {
+      importSVG(document.getElementById('import').files[0], filename, version, modeler);
+    }
 
     // to update the title of the svg, we need to tell the command stack, that a value has changed
     eventBus.fire('commandStack.changed', debounce(fnDebounce, 500));
@@ -143,35 +151,65 @@ export function loadPersistedDST(modeler) {
   cleanDictionaries();
   removeDirtyFlag();
 }
-export function importDST(input, version, modeler) {
+
+export function importDST(input, filename, version, modeler, DST_TYPE) {
   titleInputLast = '';
   descriptionInputLast = '';
 
   const reader = new FileReader();
-  if (input.name.endsWith('.dst')) {
-    let titleText = input.name.replace(
-      /_\d+-\d+-\d+( ?_?-?\(\d+\))?(-?\d)?.dst/,
-      ''
-    );
-    if (titleText.includes('.dst')) {
-      titleText = titleText.replace('.dst', '');
-    }
-    titleInput.value = titleText;
-    title.innerText = titleText;
-    changeWebsiteTitle(titleText);
+  let titleText = filename.replace(
+    /_\d+-\d+-\d+( ?_?-?\(\d+\))?(-?\d)?.dst/,
+    ''
+  );
+  if (titleText.includes('.dst')) {
+    titleText = titleText.replace('.dst', '');
+  }
+  titleInput.value = titleText;
+  title.innerText = titleText;
+  changeWebsiteTitle(titleText);
 
-    reader.onloadend = function(e) {
-      readerFunction(e.target.result, version, modeler);
-    };
+  reader.onloadend = function(e) {
+    readerFunction(e.target.result, version, modeler, DST_TYPE);
+  };
 
-    reader.readAsText(input);
+  reader.readAsText(input);
+}
+
+export function importSVG(input, filename, version, modeler) {
+  titleInputLast = '';
+  descriptionInputLast = '';
+
+  const reader = new FileReader();
+  let titleText = filename.replace(
+    /_\d+-\d+-\d+( ?_?-?\(\d+\))?(-?\d)?.svg/,
+    ''
+  );
+  if (titleText.includes('.svg')) {
+    titleText = titleText.replace('.svg', '');
   }
+  titleInput.value = titleText;
+  title.innerText = titleText;
+  changeWebsiteTitle(titleText);
+
+  reader.onloadend = function(e) {
+    readerFunction(e.target.result, version, modeler, SVG_TYPE);
+  };
+
+  reader.readAsText(input);
 }
 
-export function readerFunction(text, version, modeler) {
+export function readerFunction(text, version, modeler, type) {
+  let dstText;
+
+  if (type === SVG_TYPE) {
+    dstText = removeXMLComments(text);
+  } else if (type === DST_TYPE) {
+    dstText = text;
+  }
+
   let elements, config;
   let configChanged = false;
-  let dstAndConfig = JSON.parse(text);
+  let dstAndConfig = JSON.parse(dstText);
 
   if (dstAndConfig.domain) {
     config = dstAndConfig.domain;
@@ -197,7 +235,7 @@ export function readerFunction(text, version, modeler) {
       }
       elements = JSON.parse(dstAndConfig.dst);
     } else {
-      elements = JSON.parse(text);
+      elements = JSON.parse(dstText);
     }
   }
 
@@ -244,6 +282,16 @@ export function readerFunction(text, version, modeler) {
   }
 }
 
+function removeXMLComments(xmlText) {
+  xmlText = xmlText.substring(xmlText.indexOf('<DST>'));
+  while (xmlText.includes('<!--') || xmlText.includes('-->')) {
+    xmlText = xmlText.replace('<!--', '').replace('-->', '');
+  }
+  xmlText = xmlText.replace('<DST>', '');
+  xmlText = xmlText.replace('</DST>', '');
+  return xmlText;
+}
+
 export function configHasChanged(config) {
   const customConfigJSON = JSON.parse(config);
   const newActorsDict = new Dict();

app/domain-story-modeler/features/replay/initializeReplay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { Dict } from '../../language/collection';
+import { Dict } from '../../language/classes/collection';
 
 // create a trace through all activities, that recreates the path from the beginning to the end of the story
 export function traceActivities(activitiesFromActors) {

app/index.html

@@ -35,7 +35,7 @@ <h3 id="headline">
                 <button id="buttonImport" class="importButton" title="Import story from .dst file" onclick="document.getElementById('import').click();">
                     <img src="./logo/unarchive.png">
                   </button>
-                  <input type="file" accept=".dst" style="display:none;" id="import" onclick="this.value=null;" name="file" />
+                  <input type="file" accept=".dst, .svg" style="display:none;" id="import" onclick="this.value=null;" name="file" />
                   <button class="exportButton" id="export" title="Export story as .dst file">
                     <img id="exportButtonIMG" src="./logo/archive.png">
                     <img id="exportButtonIMGDirty" src = "./logo/archive_dirty.png" style="display: none">