layout selection

TODO.md

@@ -1,6 +1,5 @@
 # TODO list
 
-- dot: select layout, save as png, save as file
 - hot keys for InfoPage
 - switch monaco themes
 - nice css styles

package.json

@@ -11,7 +11,7 @@
     "build": "webpack --mode=production --node-env=production",
     "serve": "NODE_OPTIONS=--max-old-space-size=8192 webpack serve --node-env=production",
     "build:dev": "webpack --node-env=development",
-    "serve:dev": "webpack serve --node-env=development",
+    "serve:dev": "set NODE_OPTIONS=--max-old-space-size=4000&& webpack serve --node-env=development",
     "compile": "nunjucks-precompile --include [\"\\.hjk$\"] node_modules/heta-compiler/src/templates > src/compiled-templates.js"
   },
   "author": "Evgeny Metelkin <evgeny.metelkin@gmail.com> (https://github.com/metelkin)",

src/dropping.css

@@ -2,6 +2,10 @@
     /*border: 10px dotted red;*/
 }
 
+.hetaModuleContainer svg {
+    max-width: 100%;
+}
+
 svg {
     margin: 0.1em;
     overflow: visible;

src/viz-page.js

@@ -6,29 +6,66 @@
 
 import { instance } from "@viz-js/viz";
 import Page from './abstract-page';
+import path from 'path';
+
+const LAYOUTS = [ // viz.engines
+    'circo', 'dot', 'fdp', 'neato',
+    //'nop', 'nop1', 'nop2',
+    'osage', 'patchwork', 'sfdp', 'twopi'
+];
 
 export default class VizPage extends Page {
     constructor(id, deleteBtn=true, rightSide=false, mimeType='application/octet-stream') {
         super(id, deleteBtn, rightSide, mimeType);
+        this.layout = 'dot';
     }
     async fromArrayBuffer(ab){
         let text = new TextDecoder('utf-8').decode(ab);
         this.text = text;
 
+        let blob = new Blob([text])
+        let url = window.URL.createObjectURL(blob);
+        let filename = path.parse(this.id).base;
+
+        let rightPanel = $('<p class="w3-right"/>')
+            .appendTo(this.editorContainer)
+            .append(`<p><a href="${url}" download="${filename}">Download file</a></p>`)
+            .append(`<p class="downloadSVG"></p>`);
+        let select = $('<select class="w3-select layoutSelect" name="option"/>')
+            .appendTo(rightPanel)
+            .on('change', (evt) => this.setLayout(evt.target.value));
+        LAYOUTS.forEach((optName) => $(`<option value="${optName}">${optName}</option>`).appendTo(select));
+        select[0].value = this.layout;
+
+        $(this.editorContainer).append('<p class="svgContainer"/>');
+        await this.setLayout(this.layout);
+
+        return this;
+    }
+    async setLayout(layout = 'dot') {
+        this.layout = layout;
+
         let viz = await instance();
-        console.log(viz.engines)
-        let svg =  viz.renderSVGElement(text, { // https://viz-js.com/api/#viz.RenderOptions
+        let svg = this.svg = viz.renderSVGElement(this.text, { // https://viz-js.com/api/#viz.RenderOptions
             //format: 'dot', // ignored
-            engine: 'dot', //'circo', 'dot', 'fdp', 'neato', 'nop', 'nop1', 'nop2', 'osage', 'patchwork', 'sfdp', 'twopi'
+            engine: layout, 
             yInvert: true,
             //reduce: false,
             //graphAttributes:
             //nodeAttributes:
             //edgeAttributes:
         });
-        this.editorContainer.appendChild(svg);
+        $(this.editorContainer)
+            .find('.svgContainer')
+            .html(svg);
 
-        return this;
+        // set download ref
+        let blob = new Blob([svg.parentElement.innerHTML]);
+        let url = window.URL.createObjectURL(blob);
+        let filename = path.parse(this.id).base;
+        $(this.editorContainer)
+            .find('.downloadSVG')
+            .html(`<a href="${url}" download="${filename}.svg">Download SVG</a>`);
     }
     getArrayBuffer() {
         let text = this.text;