elkjs - Eclipse Layout Kernel (ELK)

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Thu Apr 04 2019 09:53:11 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: elkjs - Eclipse Layout Kernel (ELK)
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 9ab0af53ae3b0b78048608c96a311578
Keywords: 

My Notes
--------
April 4, 2019

To install on Ubuntu:
----------
cd ~/nodespace
npm install elkjs
cd node_modules
cd elkjs
ls lib
 elk-api.js  elk.bundled.js  elk-worker.js  elk-worker.min.js  main.js

- copy elk.bundled.js to Xholon src/org/public/lib
- recompile Xholon

To use with Xholon:
------------------
http://127.0.0.1:8888/Xholon.html?app=HelloWorld&gui=clsc&jslib=elk.bundled

To test elkjs (Dev Tools):
-------------
const elk = new ELK()
const graph = {
  id: "root",
  properties: { "elk.direction": "RIGHT" },
  children: [
    { id: "n1", width: 10, height: 10 },
    { id: "n2", width: 10, height: 10 }
  ],
  edges: [{
    id: "e1", sources: [ "n1" ], targets: [ "n2" ]
  }]
}
elk.layout(graph)
  .then(function(g) {
    console.log(g)
  })

result:
------
{
  "id": "root",
  "properties": {
    "elk.direction": "RIGHT"
  },
  "children": [
    {
      "id": "n1",
      "width": 10,
      "height": 10,
      "$H": 276,
      "x": 12,
      "y": 12
    },
    {
      "id": "n2",
      "width": 10,
      "height": 10,
      "$H": 278,
      "x": 42,
      "y": 12
    }
  ],
  "edges": [
    {
      "id": "e1",
      "sources": [
        "n1"
      ],
      "targets": [
        "n2"
      ],
      "sections": [
        {
          "id": "e1_s0",
          "startPoint": {
            "x": 22,
            "y": 17
          },
          "endPoint": {
            "x": 42,
            "y": 17
          }
        }
      ]
    }
  ],
  "$H": 12,
  "x": 0,
  "y": 0,
  "width": 64,
  "height": 34
}

To view:
-------
https://rtsys.informatik.uni-kiel.de/elklive/json.html
 - paste in the "const graph" that's defined above

sprotty generates the following SVG (after I moved things around a bit):
<svg id="sprotty_root" tabindex="1176" class="sprotty-graph">
  <g transform="scale(2.281880765329297) translate(77.00325883091415,66.08610242121033)">
    <g id="sprotty_e1" opacity="1" class="sprotty-edge">
      <path d="M 22,17 L 42,17" class="elkedge">
      </path>
      <path d="M 0,0 L 8,-3 L 8,3 Z" transform="rotate(180 42 17) translate(42 17)" class="edge arrow">
      </path>
    </g>
    <g id="sprotty_n1" transform="translate(12, 12)" opacity="1" class="">
      <rect x="0" y="0" width="10" height="10" class="elknode">
      </rect>
    </g>
    <g id="sprotty_n2" transform="translate(42, 12)" opacity="1" class="">
      <rect x="0" y="0" width="10" height="10" class="elknode">
      </rect>
    </g>
  </g>
</svg>

References
----------
(1) https://github.com/OpenKieler/elkjs

(2) https://rtsys.informatik.uni-kiel.de/elklive/index.html

(3) https://github.com/theia-ide/sprotty

]]></Notes> 

<_-.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="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>

<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1) translate(0,0)">
    <g id="sprotty_e1" opacity="1" class="sprotty-edge">
      <path d="M 22,17 L 42,17" class="elkedge">
      </path>
      <path d="M 0,0 L 8,-3 L 8,3 Z" transform="rotate(180 42 17) translate(42 17)" class="edge arrow">
      </path>
    </g>
    <g id="sprotty_n1" transform="translate(12, 12)" opacity="1" class="">
      <rect x="0" y="0" width="10" height="10" class="elknode">
      </rect>
    </g>
    <g id="sprotty_n2" transform="translate(42, 12)" opacity="1" class="">
      <rect x="0" y="0" width="10" height="10" class="elknode">
      </rect>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>