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

Author: JensLincke

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),

src/client/files.js

@@ -261,10 +261,14 @@ export default class Files {
         }).then(resp => resp.status == 200); 
     }  
 
-    var resp = (await fetch(urlString, {method: "OPTIONS"}))
-    if (resp.status != 200) return false
-    var stats = await resp.json()
-    return stats.error ? false : true
+    try {      
+      var resp = (await fetch(urlString, {method: "OPTIONS"}))
+      if (resp.status != 200) return false
+      var stats = await resp.json()
+      return stats.error ? false : true
+    } catch (e) {
+      return false;
+    }
   }
 
 

src/client/reactive/active-expression-rewriting/active-expression-rewriting.js

@@ -149,7 +149,10 @@ class Dependency {
 
   untrack() {
     this.isTracked = false;
+    const compKey = CompositeKeyToDependencies.getLeftFor(this);
+    CompositeKeyToDependencies.removeRight(this);
     HooksToDependencies.disconnectAllForDependency(this);
+    ContextAndIdentifierCompositeKey.remove(compKey);
   }
 
   contextIdentifierValue() {
@@ -494,17 +497,18 @@ const HooksToDependencies = {
   },
 
   disconnectAllForDependency(dep) {
-    this._hooksToDeps.removeAllLeftFor(dep);
-
     // Track affected files
     for (const hook of HooksToDependencies.getHooksForDep(dep)) {
+      hook.untrack();
       hook.getLocations().then(locations => DebuggingCache.updateFiles(locations.map(loc => loc.file)));
     }
     for (const ae of DependenciesToAExprs.getAExprsForDep(dep)) {
       if (ae.meta().has("location")) {
         DebuggingCache.updateFiles([ae.meta().get("location").file]);
       }
     }
+    
+    this._hooksToDeps.removeAllLeftFor(dep);
   },
 
   getDepsForHook(hook) {
@@ -580,6 +584,8 @@ class Hook {
     this.locations = await Promise.all(this.locations);
     return this.locations;
   }
+  
+  untrack() {}
 
   notifyDependencies(location) {
     HooksToDependencies.getDepsForHook(this).forEach(dep => dep.notifyAExprs(location));
@@ -605,6 +611,10 @@ class SourceCodeHook extends Hook {
     const compKey = ContextAndIdentifierCompositeKey.for(context, identifier);
     return CompositeKeyToSourceCodeHook.getRightFor(compKey);
   }
+  
+  untrack() {
+    CompositeKeyToSourceCodeHook.removeRight(this);
+  }
 
   constructor(context, identifier) {
     super();

src/client/reactive/active-expression-rewriting/composite-key.js

@@ -31,6 +31,17 @@ export default class CompositeKey {
     return this._compositeKeyStoreReverse.get(compKey) || [];
   }
 
+  remove(compKey) {
+    const [obj1, obj2] = this._compositeKeyStoreReverse.get(compKey);
+    
+    const secondKeyMap = this._getByPrimaryKey(obj1);
+    secondKeyMap.delete(obj2);
+    if(secondKeyMap.size === 0) {
+      this._compositeKeyStore.delete(obj1);
+    }
+    this._compositeKeyStoreReverse.delete(compKey);
+  }
+  
   clear() {
     this._compositeKeyStore.clear();
     this._compositeKeyStoreReverse.clear();

src/client/reactive/active-expression-rewriting/injective-map.js

@@ -24,6 +24,14 @@ export default class InjectiveMap {
     }
     return this.leftToRight.get(left);
   }
+  
+  removeRight(right) {
+    const left = this.rightToLeft.get(right);
+    if(left) {
+      this.leftToRight.delete(left);
+    }
+    this.rightToLeft.delete(right);
+  }
 
   getLeftFor(right) {
     return this.rightToLeft.get(right);
@@ -39,6 +47,14 @@ export default class InjectiveMap {
     }
     return this.rightToLeft.get(right);
   }
+  
+  removeLeft(left) {
+    const right = this.leftToRight.get(left);
+    if(right) {
+      this.rightToLeft.delete(right);
+    }
+    this.leftToRight.delete(left);
+  }
 
   clear() {
     this.leftToRight.clear();

src/client/reactive/components/basic/aexpr-timeline.js

@@ -53,18 +53,16 @@ export default class EventDrops extends Morph {
             case 'changed value':
               {
                 const location = data.value.trigger;
-                const start = { line: location.line - 1, ch: location.column };
-                lively.openBrowser(location.source, true, start, false, undefined, true);
+                this.openLocationInBrowser(location);
+                
                 break;
               }
             case 'created':
             case 'disposed':
               {
                 const ae = data.value;
                 const location = ae.meta().get("location");
-                const start = { line: location.start.line - 1, ch: location.start.column };
-                const end = { line: location.end.line - 1, ch: location.end.column };
-                lively.openBrowser(location.file, true, { start, end }, false, undefined, true);
+                this.openLocationInBrowser(location);
                 break;
               }
             case 'dependencies changed':
@@ -122,7 +120,7 @@ export default class EventDrops extends Morph {
     jQuery(this.aeOverview).on("changed.jstree", (e, data) => {
       this.eventsChanged();
     });
-    this.ready = false;                 
+    this.ready = false;
     jQuery(this.aeOverview).one("ready.jstree", (e, data) => {
       this.ready = true;
     });
@@ -150,10 +148,22 @@ export default class EventDrops extends Morph {
     });
   }
 
+  openLocationInBrowser(location) {
+    const start = { line: location.start.line - 1, ch: location.start.column };
+    const end = { line: location.end.line - 1, ch: location.end.column };
+    lively.files.exists(location.file).then(exists => {
+      if(exists) {
+        lively.openBrowser(location.file, true, { start, end }, false, undefined, true);
+      } else {
+        lively.notify("Unable to find file:" + location.file);
+      }
+    });
+  }
+
   humanizeEventData(event) {
     switch (event.type) {
       case 'changed value':
-        return <div>{this.humanizePosition(event.value.trigger.source, event.value.trigger.line)} <br /> <span style="color:#00AAAA">{event.value.lastValue}</span> → <span style="color:#00AAAA">{event.value.value}</span></div>;
+        return <div>{this.humanizePosition(event.value.trigger.file, event.value.trigger.start.line)} <br /> <span style="color:#00AAAA">{event.value.lastValue}</span> → <span style="color:#00AAAA">{event.value.value}</span></div>;
       case 'created':
       case 'disposed':
         {
@@ -337,23 +347,17 @@ export default class EventDrops extends Morph {
   filterToAEs(aes) {
     const tree = jQuery(this.aeOverview).jstree(true);
     tree.deselect_all();
-    if(this.ready) {      
-      for(const ae of aes) {
+    if (this.ready) {
+      for (const ae of aes) {
         tree.select_node(ae.timelineID + 1);
       }
-    } else {       
-      this.filteredAEs = aes;      
-      jQuery(this.aeOverview).on("refresh.jstree", (e, data) => {
-        if(this.filteredAEs) {        
-          for(const ae of this.filteredAEs) {
-            tree.select_node(ae.timelineID + 1);
-          }
-          if(tree.get_node([...this.filteredAEs][0])) {
-            this.filteredAEs = [];
-          }
+    } else {
+      //This is not the best workaround, but the event callbacks do not work reliably
+      setTimeout(() => {
+        for (const ae of aes) {
+          tree.select_node(ae.timelineID + 1);
         }
-      });
-      tree.refresh();
+      }, 100);
     }
   }
 

src/client/reactive/components/rewritten/jumping-cubes.js

@@ -343,7 +343,7 @@ export default class JumpingCubes extends Morph {
     this.buildFieldOfCubes(startingInfo);
 
     // #TODO connect: this.energy <= this.cubes.sumBy('value')
-    this.ae(() => this.cubes.sumBy('value')).dataflow(v => this.energy = v);
+    this.registerAE(aexpr(() => this.cubes.sumBy('value'))).dataflow(v => this.energy = v);
 
     const checkEnd = (color, v) => {
       const numCubes = this.fieldSize * this.fieldSize;
@@ -352,10 +352,10 @@ export default class JumpingCubes extends Morph {
       }
     };
 
-    const greenCubes = this.ae(() => this.cubes.count(cube => cube.color === 'green'));
+    const greenCubes = this.registerAE(aexpr(() => this.cubes.count(cube => cube.color === 'green')));
     greenCubes.dataflow(v => this.updatePlayerWidget('green', v));
     greenCubes.onChange(v => checkEnd('green', v));
-    const redCubes = this.ae(() => this.cubes.count(cube => cube.color === 'red'));
+    const redCubes = this.registerAE(aexpr(() => this.cubes.count(cube => cube.color === 'red')));
     redCubes.dataflow(v => this.updatePlayerWidget('red', v));
     redCubes.onChange(v => checkEnd('red', v));
 
@@ -440,12 +440,12 @@ export default class JumpingCubes extends Morph {
     });
 
     this.cubes.forEach(cube => {
-      this.ae(() => cube.value).dataflow(value => cube.button.innerHTML = value).dataflow(value => {
+      this.registerAE(aexpr(() => cube.value)).dataflow(value => cube.button.innerHTML = value).dataflow(value => {
         if (value > cube.neighbours.length) {
           this.addAnimation(new Explode(cube, this));
         }
       });
-      this.ae(() => cube.color).dataflow(value => cube.button.style.background = COLOR_MAP.get(value));
+      this.registerAE(aexpr(() => cube.color)).dataflow(value => cube.button.style.background = COLOR_MAP.get(value));
     });
 
     const fieldSize = this.cubes.size;
@@ -484,8 +484,7 @@ export default class JumpingCubes extends Morph {
     this.processQueue(clickables.sample());
   }
 
-  ae(fn) {
-    const ae = aexpr(fn);
+  registerAE(ae) {
     this.aexprs.add(ae);
     return ae;
   }

src/components/tools/file-chooser.js

@@ -3,6 +3,7 @@
 import Morph from 'src/components/widgets/lively-morph.js';
 import Bindings from "src/client/bindings.js"
 import {promisedEvent} from "src/client/utils.js"
+import ContextMenu from 'src/client/contextmenu.js';
 
 
 /*MD # File Chooser
@@ -19,7 +20,20 @@ export default class FileChooser extends Morph {
     this.registerButtons()
 
     lively.html.registerKeys(this); // automatically installs handler for some methods
-    this.updateView()
+    this.updateView();
+    this.get('#navbar').onContextMenu = evt => this.onContextMenu(evt);
+  }
+
+  // Please overwrite for your use case
+  getMenuElements() {
+      return [];
+  }
+    
+  onContextMenu(evt) {
+    const menuElements = this.getMenuElements();
+      
+    const menu = new ContextMenu(this, menuElements)
+    menu.openIn(document.body, evt, this)
   }
 
   async updateView() {