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

Author: JensLincke

demos/leo/dice_roller.js

@@ -0,0 +1,163 @@
+export default class DiceRoller {
+  
+  onMouseDownOverAmount(evt, currentAmount) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    
+    // reset
+    var all = currentAmount.parentElement.parentElement.parentElement.querySelectorAll("div[name='value']")
+    all.forEach(e => e.style.border = "1px lightgray solid")
+    // mark and save new
+    currentAmount.style.border = "1px black solid";
+    this.amount = currentAmount;
+  }
+  
+  onMouseOverType(evt, currentType) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    
+    if (this.amount) {
+      // reset
+      var all = currentType.parentElement.parentElement.parentElement.querySelectorAll("div[name='value']")
+      all.forEach(e => e.style.border = "1px lightgray solid")
+      // mark and save new
+      currentType.style.border = "1px black solid";
+      this.type = currentType;
+    }
+  }
+  
+  onMouseOverBonus(evt, currentBonus) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    
+    if (this.amount) {
+      // reset
+      var all = currentBonus.parentElement.parentElement.parentElement.querySelectorAll("div[name='value']")
+      all.forEach(e => e.style.border = "1px lightgray solid")
+      // mark and save new
+      currentBonus.style.border = "1px black solid";
+      this.bonus = currentBonus;
+    }
+  }
+  
+  onMouseUp(evt) {
+    if (this.amount && this.type) {
+      var output = this.amount.value + this.type.value
+      if (this.bonus){
+        output = output + this.bonus.value
+      }
+      this.output.value = output;
+    }
+    [this.amount, this.type, this.bonus].forEach(e => {
+      if (e) e.style.border = "1px lightgray solid";
+    })
+    this.amount = undefined;
+    this.type = undefined;
+    this.bonus = undefined;
+  }
+  
+  create() {
+
+    // amount
+    var table = <table style="width:100%"></table>
+    var amount = <div style="padding:5px">
+        <div style="border: 1px solid black; margin:auto">
+          {table}
+        </div>
+      </div>
+
+    for (var i = 1; i <= 4; i++) {
+      var value = <div name="value" style="width:max; text-align:center; background-color: lightgray; border: 1px lightgray solid; cursor: grab">{i}</div>
+      value.value = i;
+      var del = <div style="width:max; text-align:right; cursor: pointer">X</div>;
+      
+      const currentAmount = value
+      value.addEventListener('mousedown', (evt) => this.onMouseDownOverAmount(evt, currentAmount));
+      
+      var cell = 
+          <tr>
+            <td style="width: 33%"></td>
+            <td style="width: 33%">{value}</td>
+            <td style="width: 33%">{del}</td>
+          </tr>
+      table.appendChild(cell)
+    }
+    
+    
+    // type
+    var typeTable = <table style="width:100%"></table>;
+    var type = <div style="padding:5px">
+        <div style="border: 1px solid black; margin:auto">
+          {typeTable}
+        </div>
+      </div>;
+    
+    ["d4", "d6", "d8", "d10", "d12", "d20"].forEach(e => {
+      var value = <div name="value" style="width:max; text-align:center; background-color: lightgray; border: 1px lightgray solid; cursor: grab">{e}</div>
+      value.value = e;
+      var del = <div style="width:max; text-align:right; cursor: pointer">X</div>;
+      
+      const currentType = value
+      
+      value.addEventListener('mouseover', (evt) => this.onMouseOverType(evt, currentType));
+      
+      var cell = 
+          <tr>
+            <td style="width: 33%"></td>
+            <td style="width: 33%">{value}</td>
+            <td style="width: 33%">{del}</td>
+          </tr>
+      typeTable.appendChild(cell)
+    })
+    
+    
+    // bonus
+    var bonusTable = <table style="width:100%"></table>;
+    var bonus = <div style="padding:5px">
+        <div style="border: 1px solid black; margin:auto">
+          {bonusTable}
+        </div>
+      </div>;
+    
+    ["-1", "0", "+1", "+2", "+3", "+4"].forEach(e => {
+      var value = <div name="value" style="width:max; text-align:center; background-color: lightgray; border: 1px lightgray solid; cursor: grab">{e}</div>
+      value.value = e;
+      var del = <div style="width:max; text-align:right; cursor: pointer">X</div>;
+      
+      const currentBonus = value
+      
+      value.addEventListener('mouseover', (evt) => this.onMouseOverBonus(evt, currentBonus));
+      
+      var cell = 
+          <tr>
+            <td style="width: 33%"></td>
+            <td style="width: 33%">{value}</td>
+            <td style="width: 33%">{del}</td>
+          </tr>
+      bonusTable.appendChild(cell)
+    })
+    
+    this.output = <input></input>
+    
+    var roller = 
+        <table style="width:100%, height:100%; border: 1px lightgray solid">
+          <tr>
+            <th style="width:33%">Amount</th>
+            <th style="width:33%">Type</th>
+            <th style="width:33%">Bonus</th>
+          </tr>
+          <tr>
+            <td>{amount}</td>
+            <td>{type}</td>
+            <td>{bonus}</td>
+          </tr>
+          <tr>
+            {this.output}
+          </tr>
+        </table>
+    roller.addEventListener('mouseleave', (evt) => this.onMouseUp(evt));
+    roller.addEventListener('mouseup', (evt) => this.onMouseUp(evt));
+    
+    return roller
+  }
+}

demos/leo/dice_roller.md

@@ -0,0 +1,9 @@
+# Dice Roller
+
+<script>
+  import DiceRoller from "./dice_roller.js";
+  
+  var d = new DiceRoller();
+  
+  d.create();
+</script>

demos/tom/TraceLogParser.js

@@ -181,6 +181,8 @@ export default class TraceLogParser {
 
     parsePlugin(sections) {
         const plugin = new PluginSection(...this.consume().data);
+        plugin.position = this.peek().position;
+        
         sections.push(plugin);
         this.defaultParse(plugin, []);
         return plugin;

demos/tom/babel-plugin-tracer.js

@@ -1,6 +1,8 @@
 import Trace from 'demos/tom/trace.js';
 import wrapAST from 'demos/tom/wrapAST.js';
 
+'hello world'
+
 let pluginDefinedTrace = false;
 
 export default function({ types: t }) {

demos/tom/index.md

@@ -83,6 +83,9 @@ Es ist möglich das trace plugin mit sich selbst zu debuggen. Dazu wird einfach
 * Diff was ist dazu gekommen; was wurde entfernt während des changes
 * AST-compare sollte direkt die Änderung aufgeklappt haben (cool: farblich markieren)
 * Im Plugin code markieren und anzeigen welche konkreten Traces darüber gelaufen sind
+* "brushing and linking"
+  - **whence** and **whither** === wohin und woher
+  - **What if** === Was wäre, wenn
 
 ## Known problems
 * Wenn zu viele Daten generiert werden (weil entweder das plugin oder der gegebene Code zu viel sind) ist der Worker nicht mehr in der Lage dazu die Daten zu senden, was darin endet, dass das TraceVisualization Tool nicht mehr funktioniert. Dies liegt anscheinend daran, dass während eines Aufrufs von JSON.stringify der Fehler: _rangeerror invalid string length_ geworfen wird

demos/tom/plugin-explorer-worker.js

@@ -84,6 +84,7 @@ function decorateNodePathTraverse(plugin, trace) {
                         } else if (typeof visitors[name] === 'object') {
                             const obj = visitors[name];
 
+                            // Todo: what is if already decorated
                             if(obj.enter) {
                                 obj.enter = obj.enter.map(fn => function(path, ...rest) {
                                     trace.startTraversePlugin(name, path.node.traceID);
@@ -133,8 +134,8 @@ async function importPlugin(url) {
     return modifiedPlugin;
 }
 
-function importPlugins(urls) {
-    return Promise.all(urls.map(url => importPlugin(url)))
+function importPlugins(pluginData) {
+    return Promise.all(pluginData.map(({url, data}) => importPlugin(url)))
         .then(plugins => {
             let counter = 0;
             for (const plugin of plugins) {
@@ -179,7 +180,7 @@ self.onmessage = function(msg) {
             return trace.createTraceID();
         }
 
-        importPlugins(msg.data.urls)
+        importPlugins(msg.data.pluginData)
             .then(function(modules) {
                 config.plugins = modules;
                 config.sourceFileName = 'tmpfile.js';

demos/tom/plugin-load-promise.js

@@ -1,4 +1,4 @@
-export default function(source, urls) {
+export default function(source, pluginData) {
     return new Promise((resolve, reject) => {
         const worker = new Worker('demos/tom/plugin-explorer-worker.js')
         worker.onmessage = function(msg) {
@@ -9,6 +9,6 @@ export default function(source, urls) {
             reject(msg);
             worker.terminate();
         }
-        worker.postMessage({source, urls})
+        worker.postMessage({source, pluginData})
     })
 }

demos/tom/trace.js

@@ -67,8 +67,8 @@ export default class Trace {
         return trace;
     }
 
-    static async on(source, pluginsUrls) {
-        const data = await loadPlugin(source, pluginsUrls);
+    static async on(source, pluginData) {
+        const data = await loadPlugin(source, pluginData);
         const obj = {
             locations: data.locations,
             oldAST: JSON.parse(data.oldAST),