draft visualization of dot

TODO.md

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

src/pages-collection.js

@@ -33,7 +33,7 @@ const FORMATS = { // + Exports/Modules
     html: {extension: '.html', language: 'html', type: 'text/html'}, // HTML
     log: {extension: '.log', language: 'plaintext', type: 'text/plain'},
 
-    dot: {extension: '.dot', pageType: 'Viz', language: 'dot', type: 'text/plain'},
+    dot: {extension: '.dot', pageType: 'viz', language: 'dot', type: 'text/plain'},
     xls: {extension: '.xls', pageType: 'info', type: 'application/vnd.ms-excel'},
 };
 
@@ -85,13 +85,16 @@ export class PagesCollection {
       let format = FORMATS[formatName];
       if (format.pageType==='info') {
         var page = new InfoPage(filepath, deleteBtn, rightSide, format.type)
-            .addTo(this);
+          .addTo(this);
+      } else if (format.pageType==='viz') {
+        page = new VizPage(filepath, deleteBtn, rightSide, format.type)
+          .addTo(this);
       } else {
         page = new EditorPage(filepath, {language: format.language, readOnly: readOnly}, deleteBtn, rightSide, format.type)
           .addTo(this);
       }
 
-      page.fromArrayBuffer(ab);
+      await page.fromArrayBuffer(ab);
 
       return page;
     }

src/viz-page.js

@@ -8,5 +8,31 @@ import { instance } from "@viz-js/viz";
 import Page from './abstract-page';
 
 export default class VizPage extends Page {
+    constructor(id, deleteBtn=true, rightSide=false, mimeType='application/octet-stream') {
+        super(id, deleteBtn, rightSide, mimeType);
+    }
+    async fromArrayBuffer(ab){
+        let text = new TextDecoder('utf-8').decode(ab);
+        this.text = text;
 
+        let viz = await instance();
+        console.log(viz.engines)
+        let svg =  viz.renderSVGElement(text, { // https://viz-js.com/api/#viz.RenderOptions
+            //format: 'dot', // ignored
+            engine: 'dot', //'circo', 'dot', 'fdp', 'neato', 'nop', 'nop1', 'nop2', 'osage', 'patchwork', 'sfdp', 'twopi'
+            yInvert: true,
+            //reduce: false,
+            //graphAttributes:
+            //nodeAttributes:
+            //edgeAttributes:
+        });
+        this.editorContainer.appendChild(svg);
+
+        return this;
+    }
+    getArrayBuffer() {
+        let text = this.text;
+
+        return new TextEncoder().encode(text).buffer;
+    }
 }