Lively Kernel canvas {"x":0,"y":0}{"x":1,"y":1}10010-1nullnull{"x":100,"y":0} {"x":500,"y":0}{"x":1,"y":1}10010-1nullnull{"x":100,"y":0} WorldMorphwithForceLayout{"x":615,"y":3}{"x":1,"y":1}26"World Morph with Force Layout"{"x":15,"y":8.666666666666666,"width":0,"height":0}{"runs":[29],"values":[{}]}{"runs":[1],"values":[{}]}{"x":619,"y":28.599966684977215}
    {"x":-2,"y":0}{"x":1,"y":1}
      "jitXeno"{"x":600,"y":600}       varlabelType='Native',useGradients=true,nativeTextSupport=true,animate=true;$morph('jitXeno').removeHTMLContent();$morph('jitXeno').setupHTMLContent();$morph('jitXeno').setFill(Color.gray.darker())//Datajson=[]this.world().withAllSubmorphsDo(function(){varea=this;json.push({"adjacencies":ea.submorphs.collect(function(ea){returnea.id()}),data:{"$color":"gray","$type":"circle","$dim":(2*this.submorphs.length)+1},id:ea.id(),name:ea.constructor.name,})});json//initForceDirectedvarfd=new$jit.ForceDirected({//idofthevisualizationcontainerinjectInto:'infovis',//Enablezoomingandpanning//byscrollingandDnDNavigation:{enable:true,//Enablepanningeventsonlyifwe'redraggingtheempty//canvas(andnotanode).panning:'avoidnodes',zooming:10//zoomspeed.higherismoresensible},//Changenodeandedgestylessuchas//colorandwidth.//Thesepropertiesarealsosetpernode//withdollarprefixeddata-propertiesinthe//JSONstructure.Node:{overridable:true},Edge:{overridable:true,color:'#23A4FF',lineWidth:0.4},//NativecanvastextstylingLabel:{type:labelType,//NativeorHTMLsize:10,style:'bold'},//AddTipsTips:{enable:true,onShow:function(tip,node){//countconnectionsvarcount=0;node.eachAdjacency(function(){count++;});//displaynodeinfointooltiptip.innerHTML="<divclass=\"tip-title\">"+node.name+"</div>"+"<divclass=\"tip-text\"><b>connections:</b>"+count+"</div>";}},//AddnodeeventsEvents:{enable:true,//ChangecursorstylewhenhoveringanodeonMouseEnter:function(){fd.canvas.getElement().style.cursor='move';},onMouseLeave:function(){fd.canvas.getElement().style.cursor='';},//UpdatenodepositionswhendraggedonDragMove:function(node,eventInfo,e){varpos=eventInfo.getPos();node.pos.setc(pos.x,pos.y);fd.plot();},//ImplementthesamehandlerfortouchscreensonTouchMove:function(node,eventInfo,e){$jit.util.event.stop(e);//stopdefaulttouchmoveeventthis.onDragMove(node,eventInfo,e);},//AddalsoaclickhandlertonodesonClick:function(node){if(!node)return;//Buildtherightcolumnrelationslist.//Thisisdonebytraversingtheclickednodeconnections.varhtml="<h4>"+node.name+"</h4><b>connections:</b><ul><li>",list=[];node.eachAdjacency(function(adj){list.push(adj.nodeTo.name);});//appendconnectionsinformation$jit.id('inner-details').innerHTML=html+list.join("</li><li>")+"</li></ul>";}},//NumberofiterationsfortheFDalgorithmiterations:200,//EdgelengthlevelDistance:130,//Addtexttothelabels.Thismethodisonlytriggered//onlabelcreationandonlyforDOMlabels(notnativecanvasones).onCreateLabel:function(domElement,node){domElement.innerHTML=node.name;varstyle=domElement.style;style.fontSize="0.8em";style.color="#ddd";},//ChangenodestyleswhenDOMlabelsareplaced//ormoved.onPlaceLabel:function(domElement,node){varstyle=domElement.style;varleft=parseInt(style.left);vartop=parseInt(style.top);varw=domElement.offsetWidth;style.left=(left-w/2)+'px';style.top=(top+10)+'px';style.display='';}});//loadJSONdata.fd.loadJSON(json);//computepositionsincrementallyandanimate.fd.computeIncremental({iter:40,property:'end',onStep:function(perc){Log.write(perc+'%loaded...');},onComplete:function(){Log.write('done');fd.animate({modes:['linear'],transition:$jit.Trans.Elastic.easeOut,duration:2500});}});//end{"x":0,"y":0}{"x":1,"y":1}"Courier""var labelType = 'Native', useGradients = true, nativeTextSupport = true, animate = true;\n\n$morph('jitXeno').removeHTMLContent();\n$morph('jitXeno').setupHTMLContent();\n$morph('jitXeno').setFill(Color.gray.darker())\n\n\n// Data\njson = []\nthis.world().withAllSubmorphsDo(function() {\n\tvar ea = this;\n\tjson.push({\n\t\t\"adjacencies\": ea.submorphs.collect(function(ea){return ea.id()}),\n\t\tdata: {\n \t\"$color\": \"gray\",\n \t\"$type\": \"circle\",\n \t\"$dim\": (2* this.submorphs.length) + 1\n \t},\n\t\tid: ea.id(),\n\t\tname: ea.constructor.name,\n\t})\n\t\n});\njson\n\n\n// init ForceDirected\nvar fd = new $jit.ForceDirected({\n //id of the visualization container\n injectInto: 'infovis',\n //Enable zooming and panning\n //by scrolling and DnD\n Navigation: {\n enable: true,\n //Enable panning events only if we're dragging the empty\n //canvas (and not a node).\n panning: 'avoid nodes',\n zooming: 10 //zoom speed. higher is more sensible\n },\n // Change node and edge styles such as\n // color and width.\n // These properties are also set per node\n // with dollar prefixed data-properties in the\n // JSON structure.\n Node: {\n overridable: true\n },\n Edge: {\n overridable: true,\n color: '#23A4FF',\n lineWidth: 0.4\n },\n //Native canvas text styling\n Label: {\n type: labelType, //Native or HTML\n size: 10,\n style: 'bold'\n },\n //Add Tips\n Tips: {\n enable: true,\n onShow: function(tip, node) {\n //count connections\n var count = 0;\n node.eachAdjacency(function() { count++; });\n //display node info in tooltip\n tip.innerHTML = \"<div class=\\\"tip-title\\\">\" + node.name + \"</div>\"\n + \"<div class=\\\"tip-text\\\"><b>connections:</b> \" + count + \"</div>\";\n }\n },\n // Add node events\n Events: {\n enable: true,\n //Change cursor style when hovering a node\n onMouseEnter: function() {\n fd.canvas.getElement().style.cursor = 'move';\n },\n onMouseLeave: function() {\n fd.canvas.getElement().style.cursor = '';\n },\n //Update node positions when dragged\n onDragMove: function(node, eventInfo, e) {\n var pos = eventInfo.getPos();\n node.pos.setc(pos.x, pos.y);\n fd.plot();\n },\n //Implement the same handler for touchscreens\n onTouchMove: function(node, eventInfo, e) {\n $jit.util.event.stop(e); //stop default touchmove event\n this.onDragMove(node, eventInfo, e);\n },\n //Add also a click handler to nodes\n onClick: function(node) {\n if(!node) return;\n // Build the right column relations list.\n // This is done by traversing the clicked node connections.\n var html = \"<h4>\" + node.name + \"</h4><b> connections:</b><ul><li>\",\n list = [];\n node.eachAdjacency(function(adj){\n list.push(adj.nodeTo.name);\n });\n //append connections information\n $jit.id('inner-details').innerHTML = html + list.join(\"</li><li>\") + \"</li></ul>\";\n }\n },\n //Number of iterations for the FD algorithm\n iterations: 200,\n //Edge length\n levelDistance: 130,\n // Add text to the labels. This method is only triggered\n // on label creation and only for DOM labels (not native canvas ones).\n onCreateLabel: function(domElement, node){\n domElement.innerHTML = node.name;\n var style = domElement.style;\n style.fontSize = \"0.8em\";\n style.color = \"#ddd\";\n },\n // Change node styles when DOM labels are placed\n // or moved.\n onPlaceLabel: function(domElement, node){\n var style = domElement.style;\n var left = parseInt(style.left);\n var top = parseInt(style.top);\n var w = domElement.offsetWidth;\n style.left = (left - w / 2) + 'px';\n style.top = (top + 10) + 'px';\n style.display = '';\n }\n});\n// load JSON data.\nfd.loadJSON(json);\n// compute positions incrementally and animate.\nfd.computeIncremental({\n iter: 40,\n property: 'end',\n onStep: function(perc){\n Log.write(perc + '% loaded...');\n },\n onComplete: function(){\n Log.write('done');\n fd.animate({\n modes: ['linear'],\n transition: $jit.Trans.Elastic.easeOut,\n duration: 2500\n });\n }\n});\n// end\n"147truetruefalse"exampleCode""var labelType = 'Native', useGradients = true, nativeTextSupport = true, animate = true;\n\n$morph('jitXeno').removeHTMLContent();\n$morph('jitXeno').setupHTMLContent();\n$morph('jitXeno').setFill(Color.gray.darker())\n\n\n// Data\njson = []\nthis.world().withAllSubmorphsDo(function() {\n\tvar ea = this;\n\tjson.push({\n\t\t\"adjacencies\": ea.submorphs.collect(function(ea){return ea.id()}),\n\t\tdata: {\n \t\"$color\": \"gray\",\n \t\"$type\": \"circle\",\n \t\"$dim\": (2* this.submorphs.length) + 1\n \t},\n\t\tid: ea.id(),\n\t\tname: ea.constructor.name,\n\t})\n\t\n});\njson\n\n\n// init ForceDirected\nvar fd = new $jit.ForceDirected({\n //id of the visualization container\n injectInto: 'infovis',\n //Enable zooming and panning\n //by scrolling and DnD\n Navigation: {\n enable: true,\n //Enable panning events only if we're dragging the empty\n //canvas (and not a node).\n panning: 'avoid nodes',\n zooming: 10 //zoom speed. higher is more sensible\n },\n // Change node and edge styles such as\n // color and width.\n // These properties are also set per node\n // with dollar prefixed data-properties in the\n // JSON structure.\n Node: {\n overridable: true\n },\n Edge: {\n overridable: true,\n color: '#23A4FF',\n lineWidth: 0.4\n },\n //Native canvas text styling\n Label: {\n type: labelType, //Native or HTML\n size: 10,\n style: 'bold'\n },\n //Add Tips\n Tips: {\n enable: true,\n onShow: function(tip, node) {\n //count connections\n var count = 0;\n node.eachAdjacency(function() { count++; });\n //display node info in tooltip\n tip.innerHTML = \"<div class=\\\"tip-title\\\">\" + node.name + \"</div>\"\n + \"<div class=\\\"tip-text\\\"><b>connections:</b> \" + count + \"</div>\";\n }\n },\n // Add node events\n Events: {\n enable: true,\n //Change cursor style when hovering a node\n onMouseEnter: function() {\n fd.canvas.getElement().style.cursor = 'move';\n },\n onMouseLeave: function() {\n fd.canvas.getElement().style.cursor = '';\n },\n //Update node positions when dragged\n onDragMove: function(node, eventInfo, e) {\n var pos = eventInfo.getPos();\n node.pos.setc(pos.x, pos.y);\n fd.plot();\n },\n //Implement the same handler for touchscreens\n onTouchMove: function(node, eventInfo, e) {\n $jit.util.event.stop(e); //stop default touchmove event\n this.onDragMove(node, eventInfo, e);\n },\n //Add also a click handler to nodes\n onClick: function(node) {\n if(!node) return;\n // Build the right column relations list.\n // This is done by traversing the clicked node connections.\n var html = \"<h4>\" + node.name + \"</h4><b> connections:</b><ul><li>\",\n list = [];\n node.eachAdjacency(function(adj){\n list.push(adj.nodeTo.name);\n });\n //append connections information\n $jit.id('inner-details').innerHTML = html + list.join(\"</li><li>\") + \"</li></ul>\";\n }\n },\n //Number of iterations for the FD algorithm\n iterations: 200,\n //Edge length\n levelDistance: 130,\n // Add text to the labels. This method is only triggered\n // on label creation and only for DOM labels (not native canvas ones).\n onCreateLabel: function(domElement, node){\n domElement.innerHTML = node.name;\n var style = domElement.style;\n style.fontSize = \"0.8em\";\n style.color = \"#ddd\";\n },\n // Change node styles when DOM labels are placed\n // or moved.\n onPlaceLabel: function(domElement, node){\n var style = domElement.style;\n var left = parseInt(style.left);\n var top = parseInt(style.top);\n var w = domElement.offsetWidth;\n style.left = (left - w / 2) + 'px';\n style.top = (top + 10) + 'px';\n style.display = '';\n }\n});\n// load JSON data.\nfd.loadJSON(json);\n// compute positions incrementally and animate.\nfd.computeIncremental({\n iter: 40,\n property: 'end',\n onStep: function(perc){\n Log.write(perc + '% loaded...');\n },\n onComplete: function(){\n Log.write('done');\n fd.animate({\n modes: ['linear'],\n transition: $jit.Trans.Elastic.easeOut,\n duration: 2500\n });\n }\n});\n// end\n""LOG"{"runs":[4088],"values":[{}]}{"runs":[4088],"values":[{}]}{"x":837,"y":2130}{"x":1,"y":1}{"x":1,"y":1}"url(#30855:lively.scene.Clip)"truetruefalse{"x":849,"y":755} "48033:Morph"{"x":0,"y":0}{"x":12,"y":12}"slider" "48032:SliderMorph"{"x":850,"y":1}{"x":5,"y":10}0.11"slider_background" true{"sourceObj":"48032:SliderMorph","sourceAttrName":"value","targetObj":"30853:ScrollPane","targetMethodName":"setVerticalScrollPosition","converter":null,"updater":null} {"sourceObj":"48032:SliderMorph","sourceAttrName":"getSliderExtent","targetObj":"30853:ScrollPane","targetMethodName":"getVerticalVisibleExtent","converter":null,"updater":null} 0{"x":0,"y":53}{"x":1,"y":1}truetruefalse{"x":864,"y":757}{"sourceObj":"30853:ScrollPane","sourceAttrName":"setVerticalScrollPosition","targetObj":"48032:SliderMorph","targetMethodName":"setValue","converter":null,"updater":null} {"x":1,"y":1}{"x":1,"y":1}"titleBar" "titleBar" nullfalse"none"{"x":864,"y":30}{"x":-1,"y":-1}{"x":1,"y":1}"url(#30864:lively.scene.Clip)"truenullfalse"none"{"x":866,"y":23} Workspace{"x":395.5,"y":0.000004999999999810711}{"x":1,"y":1}"Workspace"false{"x":6,"y":2,"width":0,"height":0}"Shrink"nulltruefalse"none"{"x":61,"y":13.200000762939453} {"x":853,"y":11}{"x":1,"y":1}false{"x":16,"y":16}{"sourceObj":"30867:WindowControlMorph","sourceAttrName":"getHelpText","targetObj":"30860:WindowMorph","targetMethodName":"getCloseHelp","converter":null,"updater":null} {"sourceObj":"30867:WindowControlMorph","sourceAttrName":"fire","targetObj":"30860:WindowMorph","targetMethodName":"initiateShutdown","converter":null,"updater":null} {"x":11,"y":11}{"x":1,"y":1}false{"x":16,"y":16}{"sourceObj":"30869:WindowControlMorph","sourceAttrName":"getHelpText","targetObj":"30860:WindowMorph","targetMethodName":"getMenuHelp","converter":null,"updater":null} {"sourceObj":"30869:WindowControlMorph","sourceAttrName":"fire","targetObj":"30860:WindowMorph","targetMethodName":"showTargetMorphMenu","converter":null,"updater":null} {"x":834,"y":11}{"x":1,"y":1}false{"x":16,"y":16}{"sourceObj":"30871:WindowControlMorph","sourceAttrName":"getHelpText","targetObj":"30860:WindowMorph","targetMethodName":"getCollapseHelp","converter":null,"updater":null} {"sourceObj":"30871:WindowControlMorph","sourceAttrName":"fire","targetObj":"30860:WindowMorph","targetMethodName":"toggleCollapse","converter":null,"updater":null} {"x":0,"y":31}{"x":1,"y":1}nullfalse"none"{"x":864,"y":22}{"x":624,"y":28}{"x":1,"y":1}{"x":0,"y":22.999999999999996}falsenullnullnullnullfalse{"name":"WorkspaceLayer"} {"name":"UndoLayer"} {"name":"WorkspaceLayer"} {"name":"UndoLayer"} {"x":864,"y":779} Wikicontrol"Wiki control""Wiki control""48037:TextMorph"{"x":0,"y":0}{"x":68,"y":42}truetrue // An array of module names that is loaded on world load ['apps.LivelyJIT']// .... Log = { elem: false, write: function(text){ console.log(text) } }; null{"x":0,"y":0}{"x":1,"y":1}19{"x":1551,"y":1031}