spincycle/lib/spin/src/spin-app/flow-connector.html

A reactive message router and object manager that lets clients subscribe to object property changes on the server

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../spin-client/spin-client.html">
<link rel="import" href="../spin-client/spin-admin.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">

<dom-module id="flow-connector">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

    </template>

    <script>
            // {startNodule: 'xxx', endModule: 'yyy, startOutputName: 'zzz', endInputName: 'qqq'}
			Polymer({

				is: 'flow-connector',

				properties:
					         {
						       ctx:             {type: Object, observer:'onStuff'},
                               connector:       {type: Object, observer:'onStuff'},
                               index:           {type: Number},
                               startModule:     {type: String, notify: true},
                               endModule:       {type: String, notify: true},
                               startOutputName: {type: String, notify: true},
                               endInputName:    {type: String, notify: true},
                               height:     {type: Number, value:40},
							   width:      {type: Number, value:140},
							   strokeStyle:{type: String, value: 'blue'}
					         },

				onStuff:function()
                        {
                        	if(this.ctx && this.connector)
                            {
	                            this.ctx.strokeStyle = this.strokeStyle
	                            this.ctx.strokeRect(this.basex, this.basey * this.index * this.height, this.width, this.height)
                            }
                        }


			});
    </script>
</dom-module>