the-graph study

[changtimwu]

continue the notes here https://gist.github.com/changtimwu/0b8f9d5547ac0a2ccaeb

• having the concept of node template & node instance
• save map
• bidirectional links

[changtimwu]

theme is controllered by the classes the-graph-light, the-graph-dark in most outer element -- #svgcontainer.

[changtimwu]

this.$ is defined by polymer https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding.

For a polymer component, with this.$, you can access DOM elements/attributes/contents this a way like this.$.svgcontainer.className.

[changtimwu]

several layers

<!-- polymer starts below, the-graph.coffeekup -->
<div id="svgcontainer" class="the-graph-dark">  
   <!-- reactjs starts below.  app.coffee -->
   <div class="the-graph-app normal" name="app" style="" data-reactid=".0"> 
      <canvas class="app-canvas" width="1190" height="858" data-reactid=".0.0"></canvas>
      <svg class="app-svg" width="1190" height="858" data-reactid=".0.1">
         <g class="view" transform="matrix()" data-reactid=".0.1.0">
            <!-- graph.coffee -->
            <g class="graph" data-reactid=".0.1.0.0"></g>
         </g>
      </svg>
   </div>
</div>

How Polymer works with React ?

The the-graph is a polymer element. One of its properties is graph and the changes of the graph property is implemented in graphChanged. In Polymer, property change can be observed in this way.
In graphChanged, It does the following

@appView = React.renderComponent TheGraph.App(), @$.svgcontainer

[changtimwu]

study /the-graph-editor/demo-simple.html. It uses the-graph-editor.

一個 polymer element 的參數, 通常

• In html, 有 attribute 可以填

    <the-graph-editor id="editor"
      width="800" height="600"
      grid="72"
      snap="36"
      theme="dark">
    </the-graph-editor>

• In JS, 有 method 可以call

var editor = document.getElementById('editor');
editor.triggerAutolayout();

[changtimwu]

get all components

var lib = editor.getLibrary();

[changtimwu]

the live reload function of gulp-connect doesn't work

the scope of the variable lr in node_modules/gulp-connect/index.js has some problem. reported here https://github.com/AveVlad/gulp-connect/issues/88

issue solved.!

[changtimwu]

在 index.html 加 jquery , $.ajax 會動

[changtimwu]

index.html 裡面有看到其他 map, 可以 load

 // script.src = 'https://api.github.com/gists/7135158?callback=loadGraph';
 // script.src = 'clock.json.js';
 script.src = 'photobooth.json.js';
 // Gesture object building (lots of ports!)
 // script.src = 'https://api.github.com/gists/7022120?callback=loadGraph';
 // Gesture data gathering (big graph)
 //script.src = 'https://api.github.com/gists/7022262?callback=loadGraph';
 // Edge algo test
 //script.src = 'https://api.github.com/gists/6890344?callback=loadGraph';

[changtimwu]

• editor.graph -- noflo 處理前, load 出來就放到這裡
• editor.toJSON() -- noflo 處理後, 會隨著編輯變動

map的 load & save格式不一致, 畫面上秀的圖 the-graph, 有提供 export 出來卻沒提供 load

[changtimwu]

想要把 polymer 換成 angularjs

• 需要動三個檔案, 前兩者是 polymer component definition, 最後一個是 polymer caller
  • the-graph-browserify/the-graph.coffeekup
  • editor/the-graph-editor.coffeekup
  • editor/index.coffeekup

what does a polymer element do? How can angularjs offer alternative?

angular 最接近的機制是 directive

• attribute change: https://gist.github.com/CMCDragonkai/6282750
• callback handler: 要傳給 the-graph 這個 react component 用的
  • 共有 onEdgeSelection, onNodeSelection, onPanScale
  • 也用 attribute 處理就好
• template
  • div '#svgcontainer'
  • 用 directive template
• component member data
  • graph
• component member functions
  • getComponent
  • toJSON
  • registerComponent

[changtimwu]

ngReact or handwrite directive?

[changtimwu]

• index passes pure data object to editor.graph
• editor(the-graph-editor.coffeekup) converts @graph into an noflograph object(with methods) and passes it to the-graph(the-graph.coffeekup)

noflo = require("noflo") 
noflo.graph.loadJSON @graph, (nofloGraph)=>
    @buildInitialLibrary nofloGraph
    @nofloGraph = nofloGraph

• the-graph(browserify/the-graph.coffeekup) passes the noflograph object into the TheGraph.App react component.

[changtimwu]

noflo defines

data

• outports -- always empty
• inports -- always empty
• nodes

functions

• on:
• removeListener
• setNodeMetadata
• setInportMetadata
• setOutportMetadata
• startTransaction -- still runnable even removed
• endTransaction -- still runnable even removed
• addNode
• getNode
• toJSON

events

• addNode
• removeNode
• addInport -- not used
• removeInport -- not used
• addOutport -- not used
• removeOutport -- not used
• addEdge
• removeEdge

[changtimwu]

react.animate

    script src: "../bower_components/react.animate-djdeath/react.animate.js"

[changtimwu]

bidirectional flow is still under discussion https://groups.google.com/forum/#!searchin/flow-based-programming/bidirection/flow-based-programming/hfYw1gP7FVI/1tWthSjUMtkJ

http://www.jpaulmorrison.com/fbp/noflo.html

[changtimwu]

The author did a complete rewrite from reactjs to polymer https://github.com/noflo/noflo-ui/tree/master/elements

react based the-graph is here https://github.com/noflo/noflo-ui/blob/master/bower.json#L21

study how the the-graph-editor be used as a component with rich polymer UI. https://github.com/noflo/noflo-ui/blob/master/elements/noflo-ui.html

[changtimwu]

noflo usage

• [ ] Edge
• [ ] Group
• [ ] Node
• [ ] Graph

[changtimwu]

some difficulty of implementing bidirectional edge , 故意 IN port 連 IN port, OUT port 連 OUT port

In Graph.coffee

• edgeStart 預設 IN port 一定是放在 to, OUT port 一定是放在 from

      halfEdge = @state.edgePreview
      if event.detail.isIn
        halfEdge.to = port
      else
        halfEdge.from = port

• edgeStart calls addEdge and in addEdge
  • 找不到 edge.to or edge.from 因為上述規則
  • @state.graph 是 一個 noflo object, addEdge 是它自己的 function, call 了 addEdge 後, 會觸發 addEdge event, event handler 目前是 resetPortRoute

@props.graph.on 'addEdge', @resetPortRoute`, 

@state.graph.addEdge edge.from.process, edge.from.port, edge.to.process, edge.to.port, edge.metadata

[changtimwu]

resetPortRoute 是如何一路到 renderEdges ?