adding klay layout

README.md

@@ -47,6 +47,7 @@ We proudly acknowledge using the following open source components in this projec
 
 - [Bootstrap 5](https://github.com/twbs/bootstrap) for UI components
 - [Cytoscape.js](https://github.com/cytoscape/cytoscape.js) for drawing the story graph in the editor
+  -[cytoscape-klay](https://github.com/cytoscape/cytoscape.js-klay) for the graph layout
 - [marked](https://github.com/markedjs/marked) for Markdown rendering in the viewer
 - [DOMPurify](https://github.com/cure53/DOMPurify) for HTML sanitization in the viewer
 - [JSZip](https://github.com/Stuk/jszip) for zipping

editor/code.js

@@ -1,7 +1,12 @@
 import cytoscape from "./cytoscape.esm.min.js";
+import cytoscapeKlay from './cytoscape-klay.js';
+
+cytoscape.use( cytoscapeKlay );
+
 import { toast_alert, toast_ok } from "./toast.js";
 import { supported_actions } from "./common.js";
 
+
 var story = {};
 
 const text_area = document.getElementById("text");
@@ -45,8 +50,7 @@ var cy = cytoscape({
     .stylesheet()
     .selector("node")
     .css({
-      height: 80,
-      width: 80,
+      "padding": 10,
       "border-width": 3,
       "border-opacity": 0.5,
       content: "data(id)",
@@ -56,10 +60,12 @@ var cy = cytoscape({
     .selector(".leave")
     .style({
       shape: "round-hexagon",
+      "background-color": "red",
     })
     .selector(".root")
     .style({
       shape: "diamond",
+      "background-color": "green",
     })
     .selector("edge")
     .css({
@@ -144,14 +150,33 @@ function redraw_adventure_graph() {
   cy.$("node").leaves().addClass("leave");
   cy.$("node").roots().addClass("root");
 
-  const layout = cy.layout({
-    name: "breadthfirst",
-    directed: true,
-    padding: 10,
-  });
+  const layouts = {
+    breadthfirst: {
+      name: "breadthfirst",
+      directed: true,
+      spacingFactor:1.3,
+      animate: true,
+    },
+    cose: {
+      name: "cose",
+      animate: true,
+    },
+    klay: {
+      name: "klay",
+      animate: true,
+      klay: {
+        direction: 'RIGHT', // Overall direction of edges: horizontal (right / left) or vertical (down / up)
+        /* UNDEFINED, RIGHT, LEFT, DOWN, UP */
+        thoroughness: 14 // How much effort should be spent to produce a nice layout..
+      }
+    },
+  };
+
+  const layout = cy.layout(layouts["klay"]);
   layout.run();
   cy.fit();
 }
+
 function edit_variable(variable) {
   let new_value = prompt(
     `Set variable ${variable} with current value '${story?.state?.variables?.[variable]}'`

editor/cytoscape-klay.js

@@ -0,0 +1,4 @@
+/* esm.sh - [email protected] */
+import "./klayjs.mjs";
+export * from "./cytoscape-klay.mjs";
+export { default } from "./cytoscape-klay.mjs";

editor/cytoscape-klay.mjs

@@ -0,0 +1,5 @@
+/* esm.sh - esbuild bundle([email protected]) es2022 production */
+import * as __0$ from "./klayjs.mjs";
+var require=n=>{const e=m=>typeof m.default<"u"?m.default:m,c=m=>Object.assign({__esModule:true},m);switch(n){case"klayjs":return e(__0$);default:throw new Error("module \""+n+"\" not found");}};
+var X=Object.create;var A=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var T=(i=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(i,{get:(e,t)=>(typeof require<"u"?require:e)[t]}):i)(function(i){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+i+'" is not supported')});var Z=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),ee=(i,e)=>{for(var t in e)A(i,t,{get:e[t],enumerable:!0})},O=(i,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of J(e))!V.call(i,r)&&r!==t&&A(i,r,{get:()=>e[r],enumerable:!(o=$(e,r))||o.enumerable});return i},h=(i,e,t)=>(O(i,e,"default"),t&&O(t,e,"default")),K=(i,e,t)=>(t=i!=null?X(Q(i)):{},O(e||!i||!i.__esModule?A(t,"default",{value:i,enumerable:!0}):t,i));var D=Z((v,N)=>{(function(e,t){typeof v=="object"&&typeof N=="object"?N.exports=t(T("klayjs")):typeof define=="function"&&define.amd?define(["klayjs"],t):typeof v=="object"?v.cytoscapeKlay=t(T("klayjs")):e.cytoscapeKlay=t(e.$klay)})(v,function(i){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.i=function(r){return r},o.d=function(r,n,u){o.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:u})},o.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return o.d(n,"a",n),n},o.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},o.p="",o(o.s=3)}([function(e,t,o){"use strict";var r=o(4),n=o(1),u=o(2),p={addUnnecessaryBendpoints:"de.cau.cs.kieler.klay.layered.unnecessaryBendpoints",alignment:"de.cau.cs.kieler.alignment",aspectRatio:"de.cau.cs.kieler.aspectRatio",borderSpacing:"borderSpacing",compactComponents:"de.cau.cs.kieler.klay.layered.components.compact",compactionStrategy:"de.cau.cs.kieler.klay.layered.nodeplace.compactionStrategy",contentAlignment:"de.cau.cs.kieler.klay.layered.contentAlignment",crossingMinimization:"de.cau.cs.kieler.klay.layered.crossMin",cycleBreaking:"de.cau.cs.kieler.klay.layered.cycleBreaking",debugMode:"de.cau.cs.kieler.debugMode",direction:"de.cau.cs.kieler.direction",edgeLabelSideSelection:"de.cau.cs.kieler.klay.layered.edgeLabelSideSelection",edgeRouting:"de.cau.cs.kieler.edgeRouting",edgeSpacingFactor:"de.cau.cs.kieler.klay.layered.edgeSpacingFactor",feedbackEdges:"de.cau.cs.kieler.klay.layered.feedBackEdges",fixedAlignment:"de.cau.cs.kieler.klay.layered.fixedAlignment",greedySwitchCrossingMinimization:"de.cau.cs.kieler.klay.layered.greedySwitch",hierarchyHandling:"de.cau.cs.kieler.hierarchyHandling",inLayerSpacingFactor:"de.cau.cs.kieler.klay.layered.inLayerSpacingFactor",interactiveReferencePoint:"de.cau.cs.kieler.klay.layered.interactiveReferencePoint",layerConstraint:"de.cau.cs.kieler.klay.layered.layerConstraint",layoutHierarchy:"de.cau.cs.kieler.layoutHierarchy",linearSegmentsDeflectionDampening:"de.cau.cs.kieler.klay.layered.linearSegmentsDeflectionDampening",mergeEdges:"de.cau.cs.kieler.klay.layered.mergeEdges",mergeHierarchyCrossingEdges:"de.cau.cs.kieler.klay.layered.mergeHierarchyEdges",noLayout:"de.cau.cs.kieler.noLayout",nodeLabelPlacement:"de.cau.cs.kieler.nodeLabelPlacement",nodeLayering:"de.cau.cs.kieler.klay.layered.nodeLayering",nodePlacement:"de.cau.cs.kieler.klay.layered.nodePlace",portAlignment:"de.cau.cs.kieler.portAlignment",portAlignmentEastern:"de.cau.cs.kieler.portAlignment.east",portAlignmentNorth:"de.cau.cs.kieler.portAlignment.north",portAlignmentSouth:"de.cau.cs.kieler.portAlignment.south",portAlignmentWest:"de.cau.cs.kieler.portAlignment.west",portConstraints:"de.cau.cs.kieler.portConstraints",portLabelPlacement:"de.cau.cs.kieler.portLabelPlacement",portOffset:"de.cau.cs.kieler.offset",portSide:"de.cau.cs.kieler.portSide",portSpacing:"de.cau.cs.kieler.portSpacing",postCompaction:"de.cau.cs.kieler.klay.layered.postCompaction",priority:"de.cau.cs.kieler.priority",randomizationSeed:"de.cau.cs.kieler.randomSeed",routeSelfLoopInside:"de.cau.cs.kieler.selfLoopInside",separateConnectedComponents:"de.cau.cs.kieler.separateConnComp",sizeConstraint:"de.cau.cs.kieler.sizeConstraint",sizeOptions:"de.cau.cs.kieler.sizeOptions",spacing:"de.cau.cs.kieler.spacing",splineSelfLoopPlacement:"de.cau.cs.kieler.klay.layered.splines.selfLoopPlacement",thoroughness:"de.cau.cs.kieler.klay.layered.thoroughness",wideNodesOnMultipleLayers:"de.cau.cs.kieler.klay.layered.wideNodesOnMultipleLayers"},m=function(a){for(var l=Object.keys(a),s={},c=0;c<l.length;c++){var d=l[c],g=p[d],f=a[d];s[g]=f}return s},S={interactiveReferencePoint:"CENTER"},U=function(a){for(var l=a.parent(),s=a.scratch("klay"),c={x:s.x,y:s.y};l.nonempty();){var d=l.scratch("klay");c.x+=d.x,c.y+=d.y,l=l.parent()}return c},_=function(a,l){var s=a.layoutDimensions(l),c=a.numericStyle("padding"),d={_cyEle:a,id:a.id(),padding:{top:c,left:c,bottom:c,right:c}};return a.isParent()||(d.width=s.w,d.height=s.h),a.scratch("klay",d),d},q=function(a,l){var s={_cyEle:a,id:a.id(),source:a.data("source"),target:a.data("target"),properties:{}},c=l.priority(a);return c!=null&&(s.properties.priority=c),a.scratch("klay",s),s},W=function(a,l,s){for(var c=[],d=[],g={},f={id:"root",children:[],edges:[]},b=0;b<a.length;b++){var R=a[b],M=_(R,s);c.push(M),g[R.id()]=M}for(var L=0;L<l.length;L++){var w=l[L],j=q(w,s);d.push(j),g[w.id()]=j}for(var x=0;x<c.length;x++){var P=c[x],F=P._cyEle;if(!F.isChild())f.children.push(P);else{var I=F.parent(),z=g[I.id()],Y=z.children=z.children||[];Y.push(P)}}for(var C=0;C<d.length;C++){var H=d[C],B=H._cyEle,ne=B.source().parent(),ie=B.target().parent();if(0)var oe;else f.edges.push(H)}return f};function E(y){var a=y.klay;this.options=n({},u,y),this.options.klay=n({},u.klay,a,S)}E.prototype.run=function(){var y=this,a=this.options,l=a.eles,s=l.nodes(),c=l.edges(),d=W(s,c,a);return r.layout({graph:d,options:m(a.klay),success:function(){},error:function(f){throw f}}),s.filter(function(g){return!g.isParent()}).layoutPositions(y,a,U),this},E.prototype.stop=function(){return this},E.prototype.destroy=function(){return this},e.exports=E},function(e,t,o){"use strict";e.exports=Object.assign!=null?Object.assign.bind(Object):function(r){for(var n=arguments.length,u=Array(n>1?n-1:0),p=1;p<n;p++)u[p-1]=arguments[p];return u.filter(function(m){return m!=null}).forEach(function(m){Object.keys(m).forEach(function(S){return r[S]=m[S]})}),r}},function(e,t,o){"use strict";var r={nodeDimensionsIncludeLabels:!1,fit:!0,padding:20,animate:!1,animateFilter:function(u,p){return!0},animationDuration:500,animationEasing:void 0,transform:function(u,p){return p},ready:void 0,stop:void 0,klay:{addUnnecessaryBendpoints:!1,aspectRatio:1.6,borderSpacing:20,compactComponents:!1,crossingMinimization:"LAYER_SWEEP",cycleBreaking:"GREEDY",direction:"UNDEFINED",edgeRouting:"ORTHOGONAL",edgeSpacingFactor:.5,feedbackEdges:!1,fixedAlignment:"NONE",inLayerSpacingFactor:1,layoutHierarchy:!1,linearSegmentsDeflectionDampening:.3,mergeEdges:!1,mergeHierarchyCrossingEdges:!0,nodeLayering:"NETWORK_SIMPLEX",nodePlacement:"BRANDES_KOEPF",randomizationSeed:1,routeSelfLoopInside:!1,separateConnectedComponents:!0,spacing:20,thoroughness:7},priority:function(u){return null}};e.exports=r},function(e,t,o){"use strict";var r=o(0),n=function(p){p&&p("layout","klay",r)};typeof cytoscape<"u"&&n(cytoscape),e.exports=n},function(e,t){e.exports=i}])})});var k={};ee(k,{default:()=>te});var re=K(D());h(k,K(D()));var{default:G,...ae}=re,te=G!==void 0?G:ae;export{te as default};
+//# sourceMappingURL=cytoscape-klay.mjs.map