Simple JavaScript Notebook

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Mon Mar 22 2021 19:34:46 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Simple JavaScript Notebook
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 0f4556a533aa49f7371aa264101f5138
Keywords: 

My Notes
--------
March 22, 2021
Simple JavaScript Notebook

http://127.0.0.1:8080/war/Xholon.html?app=quick test 01&src=lstr&gui=clsc&jslib=FreeformText2XmlString

References
----------
(1) https://graphicallinearalgebra.net/
  ) https://www.cs.ox.ac.uk/qpl2015/slides/sobocinski-tutorial.pdf
  Graphical Linear Algebra (GLA)
  Ken Webb, 21 February 2021
  from online materials by Pawel Sobocinski

()

]]></Notes>

<markdown><![CDATA[
##Snippet
The following is a complete JavaScript snippet:

```js
(() => {
  const add = (x, y) => x + y
  $wnd.xh.root().println(add(6, 7))
})()
```
To run this code:

[Step 1: Run this workbook](http://127.0.0.1:8080/war/Xholon.html?app=quick%20test%2001&src=lstr&gui=clsc&jslib=FreeformText2XmlString "Run this workbook.")

Step 2: Once the workbook is running, then just drag the complete code snippet into the green rectangle, or into any Xholon node, and look for the result in the **out** tab.

##More Snippets
Below are some more JavaScript snippets (from my gla01.js).

```js
((title) => {
  console.log(title)
  console.log((() => 0)(-Infinity))
  console.log((x => x)(1))
  console.log((x => x + x)(1))
})("0 1 2")
```
Result:

    0 1 2
    0
    1
    2

##Pairs
```js
((title) => {
  console.log(title)
  
  // TODO I need a Pair object and/or function; Array?  Object?
  // see Joy of JS p. 200, 208
  
  const Pair = (left = null, right = null) => ({
    left,
    right,
    equals: otherPair => left === otherPair.left && right === otherPair.right,
    [Symbol.toStringTag]: 'Pair',
    [Symbol.species]: () => Pair,
    [Symbol.iterator]: function* () {
      yield left;
      yield right;
    },
    [Symbol.toPrimitive]: hint => {
      switch (hint) {
      case 'number': return left + right;
      case 'string': return `Pair [${left}, ${right}]`;
      default: return [left, right];
      }
    },
    [Symbol.for('toJson')]: () => ({
      type: 'Pair',
      left,
      right
    })
  })
  // test of Pair
  const p = Pair(20, 30)
  const [left, right] = p
  console.log(left, right, [...p])
  
  // (0, 1)
  const _zero = () => 0
  
  // (1, 0)
  const _discard = x => undefined
  
  // generators
  
  // (1, 1)
  const identity = x => x
  
  // (2, 1)
  const add = (x, y) => x + y
  const addp = pair => +pair
  
  // (1, 2)
  const copy = x => Pair(x, x)
  
  const zero = () => _discard() ?? _zero()
  const one = identity(1)
  const two = +copy(identity(1))
  //const three = copy(identity(1))
  
  console.log([zero(), one, two])
  console.log(copy(42))
  console.log(copy(42).toString()) // [object Pair]
  console.log(`${copy(42)}`) // Pair [42, 42]
  
  console.log(addp(copy(42)))
  
  console.log( copy(1,1), +copy(1,1) ) // 2
  console.log( Pair(1,1), +Pair(1,1) ) // 2
  console.log( +Pair(+Pair(1,1), 1) ) // 3
  console.log( +Pair(+copy(identity(1)), 1) ) // 3
  console.log( +Pair(+copy(identity(1)), identity(1)) ) // 3
  console.log( +copy(+copy(identity(1)), identity(1)) ) // 4
  
  // test building a binary tree (BT) structure from Pair objects
  const root = Pair(Pair(), Pair())
  console.log(root)
  
})("5. Adding, 9. Natural Numbers, diagrammatically")

```

]]></markdown> 

<_-.XholonClass>

  <!-- domain objects -->
  <PhysicalSystem/>
  <Block/>
  <Brick/>
  
  <!-- quantities -->
  <Height superClass="Quantity"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <Block>
    <port name="height" connector="Height"/>
  </Block>
</xholonClassDetails>

<PhysicalSystem>
  <Block>
    <Height>0.1 m</Height>
  </Block>
  <Brick multiplicity="2"/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var a = 123;
  var b = 456;
  var c = a * b;
  if (console) {
    console.log(c);
  }
  //# sourceURL=Blockbehavior.js
]]></Blockbehavior>

<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var myHeight, testing;
  var beh = {
    postConfigure: function() {
      testing = Math.floor(Math.random() * 10);
      myHeight = this.cnode.parent();
    },
    act: function() {
      myHeight.println(this.toString());
    },
    toString: function() {
      return "testing:" + testing;
    }
  }
  //# sourceURL=Heightbehavior.js
]]></Heightbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  $wnd.xh.Brickbehavior = function Brickbehavior() {}

  $wnd.xh.Brickbehavior.prototype.postConfigure = function() {
    this.brick = this.cnode.parent();
    this.iam = " red brick";
  };

  $wnd.xh.Brickbehavior.prototype.act = function() {
    this.brick.println("I am a" + this.iam);
  };
  //# sourceURL=Brickbehavior.js
]]></Brickbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  console.log("I'm another brick behavior");
]]></Brickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="500" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .droptext {font: normal 30px sans-serif; fill: grey; pointer-events: none;}
  </style>
  <g>
    <title>Drop target</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="100" width="500" x="25" y="0"/>
    <text x="50" y="55" class="droptext">Drag your code here</text>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>