Clean up images and start first integration

packages/mindplot/src/components/Designer.js

@@ -35,6 +35,7 @@ import DragConnector from './DragConnector';
 import DragManager from './DragManager';
 import RelationshipPivot from './RelationshipPivot';
 import Relationship from './Relationship';
+import SVGExporter from './export/SVGExporter';
 
 import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
 import TopicFeatureFactory from './TopicFeature';
@@ -339,9 +340,9 @@ class Designer extends Events {
   }
 
   /**
-       * @param {Number=} factor
+     * @param {Number=} factor
-       * zoom out by the given factor, or 1.2, if undefined
+     * zoom out by the given factor, or 1.2, if undefined
-       */
+     */
   zoomOut(factor = 1.2) {
     const model = this.getModel();
     const scale = model.getZoom() * factor;
@@ -353,6 +354,18 @@ class Designer extends Events {
     }
   }
 
+  export(formatType) {
+    const svgElement = this._workspace.getSVGElement();
+    const mindmap = this._mindmap;
+
+    let result = '';
+    if (formatType === 'svg') {
+      const exporter = new SVGExporter(mindmap, svgElement);
+      result = exporter.export();
+    }
+    return result;
+  }
+
   /**
        * @param {Number=} factor
        * zoom in by the given factor, or 1.2, if undefined

packages/mindplot/src/components/Workspace.js

@@ -29,8 +29,8 @@ class Workspace {
     this._isReadOnly = isReadOnly;
 
     const divContainer = screenManager.getContainer();
-    this._screenWidth = parseInt(divContainer.css('width'), 10);
+    this._screenWidth = Number.parseInt(divContainer.css('width'), 10);
-    this._screenHeight = parseInt(divContainer.css('height'), 10);
+    this._screenHeight = Number.parseInt(divContainer.css('height'), 10);
 
     // Initialize web2d workspace.
     const workspace = this._createWorkspace();
@@ -154,8 +154,8 @@ class Workspace {
     return this._eventsEnabled;
   }
 
-  dumpNativeChart() {
+  getSVGElement() {
-    return this._workspace.dumpNativeChart();
+    return this._workspace.getSVGElement();
   }
 
   _registerDragEvents() {

packages/mindplot/src/components/widget/Menu.js

@@ -212,17 +212,17 @@ class Menu extends IMenu {
     }
 
     this._addButton('export', false, false, () => {
-      BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/exportf`, $msg('EXPORT'), {
+      // BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/exportf`, $msg('EXPORT'), {
-        cancelButton: true,
+      //   cancelButton: true,
-        closeButton: true,
+      //   closeButton: true,
-      });
+      // });
+      const svgContent = designer.export('svg');
+      console.log(svgContent);
     });
     Menu._registerTooltip('export', $msg('EXPORT'));
 
-    const me = this;
-
     this._addButton('print', false, false, () => {
-      me.save(saveElem, designer, false);
+      this.save(saveElem, designer, false);
       const urlPrefix = window.location.href.substring(0, window.location.href.lastIndexOf('c/maps/'));
       window.open(`${urlPrefix}c/maps/${mapId}/print`);
     });
@@ -308,7 +308,7 @@ class Menu extends IMenu {
     if (saveElem) {
       this._addButton('save', false, false,
         () => {
-          me.save(saveElem, designer, true);
+          this.save(saveElem, designer, true);
         });
       Menu._registerTooltip('save', $msg('SAVE'), 'meta+S');
 
@@ -316,17 +316,17 @@ class Menu extends IMenu {
         // To prevent the user from leaving the page with changes ...
         //                Element.NativeEvents.unload = 1;
         $(window).bind('unload', () => {
-          if (me.isSaveRequired()) {
+          if (this.isSaveRequired()) {
-            me.save(saveElem, designer, false, true);
+            this.save(saveElem, designer, false, true);
           }
-          me.unlockMap(designer);
+          this.unlockMap(designer);
         });
 
         // Autosave on a fixed period of time ...
         setInterval(
           () => {
-            if (me.isSaveRequired()) {
+            if (this.isSaveRequired()) {
-              me.save(saveElem, designer, false);
+              this.save(saveElem, designer, false);
             }
           }, 30000,
         );
@@ -336,7 +336,7 @@ class Menu extends IMenu {
     const discardElem = $('#discard');
     if (discardElem) {
       this._addButton('discard', false, false, () => {
-        me.discardChanges(designer);
+        this.discardChanges(designer);
       });
       Menu._registerTooltip('discard', $msg('DISCARD_CHANGES'));
     }

packages/mindplot/test/playground/map-render/html/editor.html

@@ -33,7 +33,10 @@
                         <img src="images/save.svg" />
                     </div>
                     <div id="discard" class="buttonOn">
-                        <img src="images/discard.png" />
+                        <img src="images/discard.svg" />
+                    </div>
+                    <div id="export" class="buttonOn">
+                        <img src="images/export.svg" />
                     </div>
                 </div>
                 <div id="edit" class="buttonContainer">

packages/mindplot/test/playground/map-render/images/discard.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>

packages/web2d/src/components/Workspace.js

@@ -197,9 +197,8 @@ class Workspace extends ElementClass {
     this.peer.removeChild(element.peer);
   }
 
-  dumpNativeChart() {
+  getSVGElement() {
-    const elem = this._htmlContainer;
+    return this._htmlContainer.firstChild;
-    return elem.innerHTML;
   }
 }