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

Author: onsetsu

doc/journal/2020-12-18.md/index.md

@@ -0,0 +1,33 @@
+## 2020-12-18
+*Author: @JensLincke*
+
+
+## Example #Connection Workspace
+
+```javascript
+import Connection from "src/components/halo/Connection.js"
+
+var a, b, connection;
+
+(async () => {
+  a = <div>A</div>
+  b = <div>B</div>
+  connection = new Connection(a, "foo", b, "bar")
+  connection.activate();
+  
+  await lively.sleep(0) // it seems to take time...
+  
+  a.foo = "hello3"
+
+  await lively.sleep(0) // it seems to take time...
+  
+  
+  if (b.bar != a.foo) {
+    lively.warn("foo !== bar")
+  } else {
+    lively.success("foo == bar")    
+  }
+})()
+``` 
+
+MD*/

src/client/contextmenu.js

@@ -21,6 +21,7 @@ import Favorites from "src/client/favorites.js"
 import { applicationFolder } from 'src/client/vivide/utils.js';
 import { createView } from 'src/client/vivide/scripts/loading.js';
 import SearchRoots from "src/client/search-roots.js"
+import Connection from "src/components/halo/Connection.js";
 
 // import lively from './lively.js'; #TODO resinsert after we support cycles again
 
@@ -330,6 +331,19 @@ export default class ContextMenu {
 
   // #important
   static worldMenuItems(worldContext) {
+    
+    let connections = []
+    Connection.allConnections.forEach(connection => {
+      connections.push(connection)
+    })
+    let existingConnectionsMenu = connections.map(connection => [connection.getFullLabel(), 
+      async () => {
+        let editor = await lively.openComponentInWindow('lively-connection-editor')
+        lively.setExtent(editor.parentElement, lively.pt(800, 50))
+        editor.setConnection(connection)
+      }]);
+        
+
     var items =  [
       ["Workspace", evt => {
         this.hide();
@@ -611,6 +625,13 @@ export default class ContextMenu {
           } 
         }]]), undefined, '<i class="fa fa-window-restore" aria-hidden="true"></i>'
       ],
+      [
+        "Debug", [
+          ['Connections', existingConnectionsMenu, '', '<i class="fa fa-arrow-right" aria-hidden="true"></i>']
+          
+        ], undefined, '<i class="fa fa-bug" aria-hidden="true"></i>'
+      ],
+      
       ["View", [
         ["Reset View", () => ViewNav.resetView(), 
           "",'<i class="fa fa-window-restore" aria-hidden="true"></i>'],

src/components/halo/Connection.js

@@ -22,7 +22,6 @@ export default class Connection {
   }
 
   constructor(source, sourceProperty, target, targetProperty, isEvent) {
-    debugger
     this.id = Connection.nextId();
     window.allConnections.add(this);
 
@@ -34,16 +33,17 @@ export default class Connection {
     this.isActive = false
     this._eventListener = evt => this.connectionFunction(evt)
     this._targetProperty = this.cleanProperty(this._targetProperty)
+    
+    
     if(isEvent){
-      if (this.targetIsFunction()) {
-        this.modifyingCode = 
+      if (this.targetIsFunction()) { 
       this.modifyingCode = 
 `(target, event) => {
   target.${this._targetProperty}(event);
 }`;        
       } else {
-`(target, event) => {
-  target.${this._targetProperty} = 42;
+      this.modifyingCode = `(target, event) => {
+  target.${this._targetProperty} = event;
 }`;
       }
 
@@ -322,6 +322,17 @@ export default class Connection {
   getLabel() {
     return this._sourceProperty + "⇨" + this._targetProperty 
   }
+
+  getFullLabel() {
+    try {
+      return lively.elementToCSSName(this.getSource()) + " " + this._sourceProperty +
+        "⇨" + lively.elementToCSSName(this.getTarget()) + " "+ this._targetProperty      
+    } catch(e) {
+      return this.getLabel()
+    }
+    
+  }
+
 
   setLabel(string) {
     this.label = string // not used...

src/components/widgets/lively-code-mirror.js

@@ -941,6 +941,7 @@ export default class LivelyCodeMirror extends HTMLElement {
   }
 
   set value(text) {
+    if (text === undefined) text = ""
     if (this.editor) {
       this.editor.setValue(text)
     } else {

test/bindings-test.js

@@ -2,6 +2,7 @@
 
 import {expect} from 'src/external/chai.js'
 import Bindings from "src/client/bindings.js"
+import Connection from "src/components/halo/Connection.js"
 
 /*MD # [Bindings](edit://src/client/bindings.js) Test
 
@@ -37,3 +38,94 @@ describe('Bindings', function() {
     });
   })
 });
+
+
+// The Halo based Connections
+
+describe('Connections', function() {
+  
+  describe('connect', function() {
+    it('connects event with property', async function() {
+      var a = <div>A</div>
+      var b = <div>B</div>
+      var connection = new Connection(a, "click", b, "foo", true)
+      connection.activate();
+      await lively.sleep(0) // it seems to take time...
+
+      a.dispatchEvent(new Event("click"))
+      
+      await lively.sleep(0) // it seems to take time...
+
+      expect(b.foo).to.not.be.undefined();
+    });
+    
+    it('connects event with function', async function() {
+      var a = <div>A</div>
+      var b = <div>B</div>
+      b.func = function(v) { this.bar = v}
+      
+      var connection = new Connection(a, "click", b, "func", true)
+      
+      connection.activate();
+      await lively.sleep(0) // it seems to take time...
+
+      a.dispatchEvent(new Event("click"))
+      
+      await lively.sleep(0) // it seems to take time...
+
+      expect(b.bar).to.not.be.undefined();
+    });
+    
+    
+
+    it('connects property with property', async function() {
+      var a = <div>A</div>
+      var b = <div>B</div>
+      var connection = new Connection(a, "foo", b, "bar")
+      connection.activate();
+      await lively.sleep(0) // it seems to take time...
+  
+      a.foo = "hello"
+      
+      await lively.sleep(0) // it seems to take time...
+ 
+      expect(b.bar).to.equal("hello");
+    });
+    
+    it('connects property with function', async function() {
+      var a = <div>A</div>
+      var b = <div>B</div>
+      b.func = function(v) { this.bar = v}
+      
+      var connection = new Connection(a, "foo", b, "func")
+      
+      connection.activate();
+      await lively.sleep(0) // it seems to take time...
+
+      a.foo = "hello"
+      
+      await lively.sleep(0) // it seems to take time...
+
+      expect(b.bar).to.equal("hello");
+    });
+    
+    
+     it('connects style attribute with style attribute', async function() {
+      var a = <div>A</div>
+      var b = <div>B</div>
+       
+      var connection = new Connection(a, "style.width", b, "style.width")
+      connection.activate();
+      
+      await lively.sleep(0) // it seems to take time...
+  
+      a.style.width = "50px"
+      
+       await lively.sleep(0) // it seems to take time...
+
+      expect(b.style.width).to.equal("50px");
+    });    
+  })
+});
+
+