Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages

Author: Markus-Brand

doc/journal/2021-02-24.md/generate_drawio_content.png

@@ -0,0 +1,65 @@
+## 2021-02-24
+*Author: @JensLincke*
+
+
+![](generate_drawio_content.png)
+
+### Reverse Engineering
+
+Copy some drawio content and past it into a workspace...
+
+```javascript
+import XML from "src/client/xml.js"
+
+lively.get("#drawiosource").value = XML.prettify(decodeURIComponent(
+lively.get("#drawiocode").value))
+```
+
+That produces some source... and copy and pasting it back into drawio produced actual graphical content. 
+
+```javascript
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <UserObject label="[@Olsen2007EUI]" id="2">
+      <mxCell style="text;whiteSpace=wrap;html=1;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
+        <mxGeometry x="240" y="220" width="100" height="30" as="geometry"/>
+      </mxCell>
+    </UserObject>
+    <UserObject label="[@Hoho]" id="3">
+      <mxCell style="text;whiteSpace=wrap;html=1;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
+        <mxGeometry x="250" y="270" width="100" height="30" as="geometry"/>
+      </mxCell>
+    </UserObject>
+  </root>
+</mxGraphModel>
+```
+
+### Generating Draw.io Content
+
+So, we can actually generate content
+
+
+```javascript
+
+var source = `<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>`
+
+var idCounter = 3;
+that.childNodes.forEach((ea,index) => {
+  source += `<UserObject label="[@${ea.key}] ${ea.getAuthors()[0]} ${ea.year}. ${ea.title} " id="${idCounter++}">
+      <mxCell style="text;whiteSpace=wrap;html=1;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
+        <mxGeometry x="250" y="${30 *index}" width="600" height="40" as="geometry"/>
+      </mxCell>
+    </UserObject>`
+  
+})
+
+source += `  </root>
+</mxGraphModel>`
+
+
+```

doc/journal/2021-02-24.md/index.md

@@ -770,7 +770,8 @@ export default class FileIndex {
     }).then(r => r.clone().json())
 
     if (!stats.error) {
-      await this.addFile(url, stats.name, stats.type, stats.size, stats.modified)
+      let name = url.replace(/.*\//,"")
+      await this.addFile(url, name, stats.type, stats.size, stats.modified)
     }
   } 
 

src/client/fileindex.js

@@ -216,6 +216,13 @@ export default class HTML {
       if (node.getAttribute) {
 
         var href = node.getAttribute("href")
+        if (!href) {
+          href = node.getAttribute("xlink:href")
+          if (href) {
+            var isXLink = true;
+          }
+        }
+        
         if (href) {
           // console.log("FIX LINK ", href)
           // #TODO load inplace....

src/client/html.js

@@ -21,6 +21,9 @@ export class BibScheme extends BibliographyScheme {
     var entry = entries[0] || {authors: undefined, keywords: undefined, title: ""}
     var key = query
     var files = await FileIndex.current().db.files.where("bibkey").equals(key).toArray()
+    var literatureNotes = await FileIndex.current().db.files
+      .filter( ea => ea.name.match(key + ".md")).toArray()
+
 
     var papers = await Literature.db.papers.where("key").equals(key).toArray()
 
@@ -43,7 +46,7 @@ export class BibScheme extends BibliographyScheme {
     if (entry.source) {
       content += "<pre>" + entry.source+ "</pre>"
     }         
-    content += "<h3>Documents</h3><ul>" + files.map(ea => {
+    content += "<h3>Documents</h3><ul>" + (files.concat(literatureNotes)).map(ea => {
       return `<li><a href="${ea.url}">${ea.name}</a></li>`     
     }).join("\n") + "</ul>"
 

src/client/protocols/bib.js

@@ -5,6 +5,12 @@ import Bindings from "src/client/bindings.js"
 import {promisedEvent} from "src/client/utils.js"
 
 
+/*MD # File Chooser
+
+![](file-chooser.png){width=300px}
+
+MD*/
+
 export default class FileChooser extends Morph {
   async initialize() {
     this.registerAttributes(["root"]);

src/components/tools/file-chooser.js

@@ -0,0 +1,23 @@
+<template id="literature-graph" >
+  <style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
+  <style data-src="/templates/livelystyle.css"></style>
+  <style>
+    :host {
+
+    }
+    
+    
+    #details {
+      width: 600px;
+      padding: 20px;
+      background-color: rgba(240,240,250,0.9);
+      border: 1px solid rgba(200,200,250,0.9);
+      border-radius: 10px;
+    }
+    
+  </style>
+  <div id="content">
+  </div>
+  <slot></slot>
+</template>
+