new openMarkdown tools

SQUASHED: AUTO-COMMIT-doc-files-changesgraph.md,AUTO-COMMIT-doc-journal-2020-09-01.md-graph-markdown.png,AUTO-COMMIT-doc-journal-2020-09-01.md-graph-tool.png,AUTO-COMMIT-doc-journal-2020-09-01.md-index.md,AUTO-COMMIT-src-client-lively.js,AUTO-COMMIT-src-client-viewnav.js,AUTO-COMMIT-src-components-tools-lively-sync.html,AUTO-COMMIT-src-components-tools-lively-sync.js,AUTO-COMMIT-src-components-widgets-lively-markdown.js,AUTO-COMMIT-src-components-widgets-lively-script.js,

Author: JensLincke

doc/files/changesgraph.md

@@ -1,3 +1,5 @@
+<!-- used as a #Tool by lively-sync --> 
+
 <div>
 limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
 </div>
@@ -9,6 +11,8 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
   import AnsiColorFilter from "src/external/ansi-to-html.js"
   import ViewNav from 'src/client/viewnav.js'
 
+  var markdownComp = lively.query(this, "lively-markdown")
+  
 
   class ChangesGraph {
 
@@ -17,20 +21,36 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
       element.addEventListener("change", function(evt) {
           update(this.value)
       })
+      
     }
 
     static query(query) {
       return lively.query(this.ctx, query)
     }
 
+    static get url() {
+      if (!this._url) 
+      this.url = "https://lively-kernel.org/lively4/lively4-jens/src/client/"
+      return this._url
+    }
+
+    static set url(url) {
+      this._url = url
+      this.query("input#url").value = url
+    }
+
+
     static async create(ctx) {
+    
       this.ctx = ctx
+      var parameters = markdownComp.parameters
+      if (parameters.url) {
+        this.url = parameters.url
+      }
+      
       var dmp = new diff.diff_match_patch();
       var baseUrl = lively4url + "/"
-      // var url = "https://lively-kernel.org/lively4/lively4-jens/src/client/auth-dropbox.js"
-      var url = "https://lively-kernel.org/lively4/lively4-jens/src/client/"
-
-      this.query("input#url").value = url
+      var url = this.url
       var limitElement = this.query("input#limit")
 
       limitElement.value = 200
@@ -43,16 +63,14 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
 
 
       var limit = Number(limitElement.value)
-      limitElement.addEventListener("change", function(evt) {
-          limit = Number(this.value)
-          updateTable() // on Enter
-        //}
+      limitElement.addEventListener("change", (evt) => {
+          limit = Number(limitElement.value)
+          this.updateTable() // on Enter
       });
 
-      urlElement.addEventListener("change", function(evt) {
-          url = this.value
-          updateTable() // on Enter
-        //}
+      urlElement.addEventListener("change", (evt) => {
+          url = urlElement.value
+          this.updateTable() // on Enter
       });
 
       var data   
@@ -124,7 +142,7 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
         // addEdge(shortCut, path.last)
       }
 
-      var updateTable = async () => {
+      this.updateTable = async () => {
 
         details.innerHTML = ""
 
@@ -198,10 +216,10 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
         tanglingParents.forEach(ea => {
           var path = findConnectingPath(ea)
           if (path) {
-            console.log("FOUND " + path)
+            // console.log("FOUND " + path)
             addShortPath(path)
           } else {
-            console.log("nothing found for" + ea)
+            // console.log("nothing found for" + ea)
           }
         })
 
@@ -262,16 +280,16 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
             let delta = pos.subPt(panePos)
             pane.scrollLeft = delta.x - lively.getExtent(pane).y / 2
             pane.scrollTop = delta.y - 100
-            lively.notify("scroll to: " + delta )
+            // lively.notify("scroll to: " + delta )
 
           } else {
-            lively.notify("no pane to scroll into...")
+            // lively.notify("no pane to scroll into...")
           }
         })        
       }
 
       var details = <div id="details"></div>
-      updateTable()
+      this.updateTable()
 
       var style = document.createElement("style")
       style.textContent = `
@@ -296,8 +314,8 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
 
 
       graphviz.style.display = "inline-block" // so it takes the width of children and not parent
-      
-      pane = <div id="root" style="z-index: -1; position: absolute; top: 0px; left: 0px; overflow-x: auto; overflow-y: scroll; width: calc(100% - 0px); height: calc(100% - 0px);">
+      // z-index: -1;
+      pane = <div id="root" style="position: absolute; top: 20px; left: 0px; overflow-x: auto; overflow-y: scroll; width: calc(100% - 0px); height: calc(100% - 20px);">
         {style}
          <div style="height: 20px"></div>
         <h2>Change Graph</h2>
@@ -328,9 +346,12 @@ limit <input id="limit"> url <input style="width:500px" id="url" value=""><br>
         }
       }, true)
 
-      
       return pane
     }
   }
+  
+  markdownComp.ChangesGraph = ChangesGraph // expose it?
+  
+
   ChangesGraph.create(this)
 </script>

doc/journal/2020-09-01.md/graph-markdown.png

@@ -0,0 +1,48 @@
+## 2020-09-01 #LiveProgrammingLoop
+*Author: @JensLincke*
+
+```javascript
+var lastWindow;
+
+(async () => {
+  if (lastWindow) lastWindow.remove(); // #LiveProgrammingLoop
+  var comp = await lively.openComponentInWindow("lively-markdown") 
+
+  var src = `# hello
+ This works:
+
+ <script>
+  import moment from "src/external/moment.js";  
+ 
+
+  moment("1981-06-10").toString()  
+
+ </script>
+ `
+  
+  comp.setContent(src)
+  lastWindow = comp.parentElement  
+})()
+```
+
+## Turning Wiki-pages into Tools (#PaperIdea)
+
+We used markdown pages to prototype tools and visualizations a lot. But to use it, one had to navigate to that specific page and interact with the tool there. A good and working example of the setup are these journal pages and their index page that allows to create new entries. But markdown pages are not easy to integrate into a workflow with other tools. E.g. using the git graph visualization tool directly from our sync tools is not possible.
+
+![](graph-markdown.png)
+
+With our new `openMarkdown` feature this can now be done.
+
+```javascript
+lively.openMarkdown(lively4url + "/doc/files/changesgraph.md", 
+  "Change Graph", {url:"https://lively-kernel.org/lively4/lively4-jens/"})
+```
+
+This method opens a markdown page directly into it's own window without using the container/browser. The JavaScript world can interact with the markdown with in two ways:
+
+1. Parameters can be passed (here the `url`) and be read by the scripts inside 
+2. The `openMarkdown` awaits the execution of all scripts and the resolving of all promised parameters. That way one can wait on active content in the markdown and use it further. 
+
+As an example, we added a button to the repository sync tool. 
+
+![](graph-tool.png)

doc/journal/2020-09-01.md/graph-tool.png

@@ -1581,6 +1581,18 @@ export default class Lively {
     });
   }
 
+  static async openMarkdown(url, title="Markdown", parameters={}) {
+    var comp = await lively.openComponentInWindow("lively-markdown", undefined, pt(1000,800)) 
+    var src = await fetch(url).then(r => r.text())
+    comp.parameters = parameters
+    comp.setContent(src)
+    comp.parentElement.setAttribute("title", title)
+    await comp.evaluated
+    
+    return comp
+  }
+  
+  
   static get(query) {
     return document.querySelector(query)
   }

doc/journal/2020-09-01.md/index.md

@@ -60,8 +60,6 @@ export default class ViewNav {
     if (!evt.ctrlKey || evt.button != 0)
       return;
 
-    
-    debugger
     this.targetContainer = evt.composedPath().find(ea => {
       return ea.tagName == "LIVELY-CONTAINER"
     })

src/client/lively.js

@@ -155,6 +155,7 @@
           <button class="repo" id="squashButton">squash</button>
           <!-- <button class="repo" id="resolveButton">resolve</button> -->
           <button class="repo" id="changelogButton">log</button>
+          <button class="repo" id="changesgraphButton">graph</button>
           <button class="repo" id="npmInstallButton">npm install</button>
           <button class="repo" id="npmTestButton">npm test</button>
           <!-- <button class="repo" id="resetButton">reset</button> -->

src/client/viewnav.js

@@ -300,6 +300,11 @@ export default class Sync extends Morph {
    this.gitControl("graph");
   }
 
+  onChangesgraphButton() {
+    lively.openMarkdown(lively4url + "/doc/files/changesgraph.md", 
+      "Change Graph", {url: this.getServerURL() + "/" + this.getRepository() + "/"})
+  }
+  
   onCommitButton() {
     // return lively.notify("Commit is not implemented yet")  
     this.gitControl("commit");

src/components/tools/lively-sync.html

@@ -31,9 +31,14 @@ import FileIndex from 'src/client/fileindex.js'
 
 export default class LivelyMarkdown extends Morph {
   async initialize() {
+    
+    // all scripts are evaluated
+    this.evaluated = new Promise(resolve => {
+      this.resolveEvaluated = resolve
+    })
     this.windowTitle = "LivelyMarkdown";
     this.registerButtons();
-    
+    this.parameters = {}
 
     this.updateView().then(() => {
       if (this.getAttribute("mode") == "presentation") {
@@ -172,6 +177,13 @@ export default class LivelyMarkdown extends Morph {
 
     await components.loadUnresolved(root, true, "lively-markdown.js", true);    
     await persistence.initLivelyObject(root)
+    
+    // for using markdown content as tools
+    var allScripts = lively.queryAll(root, "lively-script")
+    var allPromises = allScripts.map(ea => ea.evaluated)
+    await Promise.all(allPromises)
+    // lively.notify("[markdown] scripts evaluated: " + allScripts.length + "promises: " + allPromises)
+    this.resolveEvaluated()
   }
 
   async updateView() {

src/components/tools/lively-sync.js

@@ -24,7 +24,9 @@ export default class LivelyScript extends Morph {
 
 
   async initialize() {
-    
+    this.evaluated = new Promise(resolve => {
+      this.resolveEvaluated = resolve
+    })
   }
 
 
@@ -54,6 +56,13 @@ export default class LivelyScript extends Morph {
     } else {
       this.get("#result").innerHTML = ""
     }
+    if (this.resolveEvaluated) {
+      // lively.notify("[script] evaluated " + this)
+      this.resolveEvaluated()
+      this.resolveEvaluated = null // don't do it twice...
+    } else {
+      console.log("[script] evaluated AGAIN" )
+    }
   }
 
 
@@ -104,7 +113,7 @@ export default class LivelyScript extends Morph {
       // console.log("wait on last: " + last)
       await last
     }
-    console.log("" + this.id + ">>boundEval " + "targetModule: " + targetModule + "\n exec: \"" + str + '"', )
+    // console.log("" + this.id + ">>boundEval " + "targetModule: " + targetModule + "\n exec: \"" + str + '"', )
     var myPromisedResult = boundEval(str, this, targetModule)
     myPromisedResult.then(() => {
       var first = currentScriptPromises.shift()