Basic JavaScript I/O for FlowHub

gistfile1.js

// TheGraph.App
<polymer-element name="the-graph-editor" 
javascript:alert(JSON.stringify(document.querySelector('the-graph-editor')));
Polymer('the-graph-editor', {
javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').grid));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').grid));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').menus));

javascript:document.querySelector('the-graph-editor').menus["main"] = null;

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').menus));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').menus["main"] = {"icon":"sitemap","e4":{"icon":"paste","iconLabel":"pasted"}}));
document.querySelector('the-graph-editor').menus["main"] = {"icon":"sitemap","e4":{"icon":"paste","iconLabel":"pasted"}}


"main":null,"edge":{"actions":{},"icon":"long-arrow-right","s4":{"icon":"trash-o","iconLabel":"delete"}}

{"main":{"icon":"sitemap","e4":{"icon":"paste","iconLabel":"paste"}},


"edge":{"actions":{},"icon":"long-arrow-right","s4":{"icon":"trash-o","iconLabel":"delete"}},

"node":{"actions":{},"s4":{"icon":"trash-o","iconLabel":"delete"},"w4":{"icon":"copy","iconLabel":"copy"}},

"nodeInport":{"w4":{"icon":"sign-in","iconLabel":"export"}},"nodeOutport":{"e4":{"icon":"sign-out","iconLabel":"export"}},"graphInport":{"icon":"sign-in","iconColor":2,"n4":{"label":"inport"},"s4":{"icon":"trash-o","iconLabel":"delete"}},"graphOutport":{"icon":"sign-out","iconColor":5,"n4":{"label":"outport"},"s4":{"icon":"trash-o","iconLabel":"delete"}},"group":{"icon":"th","s4":{"icon":"trash-o","iconLabel":"ungroup"},"e4":{"icon":"paste","iconLabel":"paste"}},"selection":{"icon":"th","w4":{"icon":"copy","iconLabel":"copy"},"e4":{"icon":"paste","iconLabel":"paste"}}}


"main":{"icon":"sitemap","e4":{"icon":"paste","iconLabel":"paste"}}

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').menus["main"] = {"icon":"sitemap","e4":{"icon":"paste","iconLabel":"pasted"}}));


javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').graph));


Polymer({ is: 'my-element', ready: {  this.$$('.special-paragraph');   } });

javascript:alert(JSON.stringify(Polymer({ is: 'my-element', ready: { this.$$('.special-paragraph'); } })));

// view-source:https://flowhub.github.io/the-graph/the-graph/the-graph.html
editor.fbpGraph.addNode(id, component, metadata)




TheGraph.library.componentsFromGraph(document.getElementById('editor').fbpGraph);

javascript:alert(TheGraph.library.componentsFromGraph(document.getElementById('editor')));

javascript:alert(document.getElementById('editor').getPan());

javascript:alert(JSON.stringify(TheGraph)));

javascript:alert(JSON.stringify(TheGraph.theme)));

javascript:_graph = window.open("data:text/json," + encodeURIComponent(JSON.stringify(TheGraph)),"_blank"); _graph.focus();



Polymer('sub-element', {  ready: function() { this.parentNode; } });

Polymer('the-graph', {  ready: function() { "done"; } });

javascript:Polymer('the-graph', {       
    ready: function(){
        alert('got here');
    }
});

// 
          this.fire('graphInitialised', this);


Polymer('the-graph-editor', {   
width: [],   
    ready: function(){   alert("got here");       
    }
});

https://github.com/flowhub/the-graph/search?utf8=%E2%9C%93&q=TheGraph&type=
javascript:alert(JSON.stringify(TheGraph.factories));

var g = { TheGraph: {} };
require("./the-graph/the-graph.js").register(g);
require("./the-graph/font-awesome-unicode-map.js").register(g);

javascript:alert(JSON.stringify(TheGraph.config.graph));
javascript:alert(JSON.stringify(TheGraph.config.menu));

javascript:alert(JSON.stringify(React));
javascript:alert(JSON.stringify(ReactDOM));


var Child   = React.createClass({'the-graph-editor'});
var myChild = React.renderComponent(Child);

alert(JSON.stringify(myChild);

myChild.someMethod();


javascript:alert(JSON.stringify(document.getElementsByTagName('the-graph-editor')));

javascript:alert(JSON.stringify(document.getElementsByTagName('the-graph-editor')));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').width));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').$));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').$.graph.width));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').$.graph.scale));

javascript:alert(JSON.stringify(document.querySelector('the-graph-editor').$.graph.getPan()));

javascript:alert((document.querySelector('the-graph-editor').$.graph.appView));

this.appView = ReactDOM.render(
          window.TheGraph.App({
          this.fire("changed", this);

javascript:alert((document.querySelector('the-graph-editor').$.graph.appView.minZoom));   

// graphview reference
javascript:alert((document.querySelector('the-graph-editor').$.graph.appView.refs.graph)); 

// appView is 
window.TheGraph.App

//https://github.com/flowhub/the-graph/blob/master/the-graph/the-graph-app.js
//domNode.addEventListener("contextmenu",this.onShowContext);
// where menus are shown
// this.showContext({

// get graph app
javascript:(alert(document.querySelector('the-graph-editor').$.graph.appView));

var app = document.querySelector('the-graph-editor').$.graph.appView;

// show a graph
javascript:var app = document.querySelector('the-graph-editor').$.graph.appView;
app.showContext({element: app,type: "main",x: 500,y: 500,graph: app.props.graph,itemKey: 'graph',item: app.props.graph})


javascript:var app = document.querySelector('the-graph-editor').$.graph.appView;
app.showContext({element: app,type: "edge",x: 500,y: 500,graph: app.props.graph,itemKey: 'graph',item: app.props.graph})


javascript:var app = document.querySelector('the-graph-editor').$.graph.appView.showContext = function(){alert("yeah");};

// show the edge menu
javascript:var app = document.querySelector('the-graph-editor').$.graph.appView;app.showContext({element: app,type: "edge",x: 500,y: 500,graph: app.props.graph,itemKey: 'graph',item: app.props.graph})
//var icon = TheGraph.FONT_AWESOME[ this.props.icon ];