Good! I have finished the browserifying
it uses lots of
<link rel="import" href="../the-graph/the-graph.html" >http://www.html5rocks.com/en/tutorials/webcomponents/imports/
import tree of the-graph-editor
the-graph-editor.html imports
../the-graph/the-graph.html../the-graph-nav/the-graph-nav.html../build/noflo.js this is a browserifed version of noflowindow.TheGraph.FONT_AWESOME exists. This is a bad design since FONT_AWESOME is provided through the-graph-editor.html including../the-graph/the-graph.html`noflo is a also global variable. You can access it in console.
the-graph is packed as a web component. What does its interface?
data structure
.groups). changeFilter is the group label{
name: 'changefilter',
nodes:
[ 'dom/GetElement_e16dy',
'dom/GetElement_85so0',
'interaction/ListenMouse_bil4d',
'interaction/ListenMouse_aii7r' ],
metadata: { description: '', color: 5 }
}.process). clickPrev is the process label.{
'interaction/ListenMouse_aii7r': {
component: 'interaction/ListenMouse',
metadata: { x: 720, y: 288, label: 'clickPrev' }
},
}{
src: { process: 'dom/GetElement_85so0', port: 'element' },
tgt: { process: 'interaction/ListenMouse_aii7r', port: 'element' },
metadata: { route: '10' }
}
{
src: { process: 'interaction/ListenMouse_aii7r', port: 'click' },
tgt: { process: 'routers/KickRouter_bzaiw', port: 'prev' },
metadata: { route: '9' }
}Obviously, component of a process defines its type and its ports.
Too bad! there is no ports define component. A port not connected is defined as single end connection like the following.
{
data: 0.01,
tgt: { process: 'seriously/TVGlitch_e1qre', port: 'verticalsync' }
}Component is actually defined in noflo. Take the simple noflo component Output as an example.
http://noflojs.org/component/noflo-core-Output/
the-graph-editor/index.htmlphoto_booth.json.js 內一開始就call loadGraph, index.html 裡面有定義好 window.loadGraphvar editor=document.getElementById('editor') . editor 看出下列 api editor.graph; // 完整 graph 資料
editor.getComponent('core/Split'); // -- 取得某種component
editor.triggerAutolayout();
theme = (theme==="dark" ? "light" : "dark");
editor.theme = theme;
editor.toJSON(); // get json
'#editor' 的 tag 是<the-graph-editor >, <the-graph-editor > 是用 polymer 訂出來的, 主要實作在 the-graph-editor.html內, its properties & methods are all defined through the Polymer statement
Polymer('the-graph-editor', {
});
graph: null,
grid: 72,
snap: 36,
width: 800,
height: 600,
scale: 1,
plugins: {},
nofloGraph: null,
menus: null,
autolayout: false,
theme: "dark",
selectedNodes: [],
copyNodes: [],
errorNodes: {},
selectedEdges: [],
animatedEdges: [],
displaySelectionGroup: true,
forceSelection: false,
editor, navigator, control buttons, 前兩者都是 polymer<the-graph-editor id="editor"
width="800" height="600"
grid="72"
snap="36"
theme="dark">
</the-graph-editor>
<the-graph-nav id="nav" width="216" height="162"></the-graph-nav>
<div id="testing">
<button id="autolayout">autolayout</button>
<button id="theme">theme</button>
<button id="focus">focus</button>
</div>window.loadGraph 直接塞到 editor.graph#editor 是個 polymer tag, 所以等於是把 map資料傳給了 the-graph-editor了.var editor = document.getElementById('editor');<the-graph-editor > 內又使用了 the-graph, 而 <the-graph> 也是用 polymer 訂出來的, 主要實作在 the-graph.html 內graphChanged: (oldGraph, newGraph), 使用了 React.renderComponent 來 render TheGraph.App<the-graph-editor> 把 this.graph 經過 noflo.graph.loadJSON 轉換, 放入 this.nofloGraph, 然後再傳給 <the-graph>裏的 this.graphthis.$.graph.updateIcon, 就是select child tag graph -> <the-graph id="graph" >this.$.graph & this.graph 是不一樣的, 前者也是一個polymer 元件, 可以call這個元件所有method, this.graph 是純資料.
come up with some screenshots. make a component
is outports are at right side and inport are always at left side?
line is rendered at edge.coffee
Graph = React.createClass
renderEdges: ->
graph = @state.graph
for edge in graph.edges
source = graph.getNode edge.from.node
target = graph.getNode edge.to.node
the-graphmodule?the-graphassigned itself top object intocontext.TheGraphthen main page can reference it by accessingwindow.TheGraphlike the following. See it?TheGraphis as an React component.